#717

Author: mvladic

packages/eez-studio-ui/_stylesheets/project-editor.less

@@ -1364,6 +1364,12 @@
                 marker-end: url(#seqLineEnd);
             }
 
+            &.disabled {
+                stroke: @disabledConnectionLineColor;
+                marker-start: url(#disabledLineStart);
+                marker-end: url(#disabledLineEnd);
+            }
+
             &.selected {
                 stroke: @selectedConnectionLineColor;
                 marker-start: url(#selectedLineStart);
@@ -1488,6 +1494,12 @@
                 marker-end: url(#seqLineEnd);
             }
 
+            &.disabled {
+                stroke: @disabledConnectionLineColor;
+                marker-start: url(#disabledLineStart);
+                marker-end: url(#disabledLineEnd);
+            }
+
             &.selected {
                 stroke: @selectionBackgroundColor;
                 marker-start: url(#selectedLineStartInViewer);

packages/eez-studio-ui/_stylesheets/vars-dark.less

@@ -35,6 +35,7 @@
 @activeConnectionLineColor: rgb(18, 18, 48);
 @connectionLineInTheMakingColor: #337bb7;
 @activeTabBackgroundColor: #666666;
+@disabledConnectionLineColor: #999;
 
 @actionSelectedTextColor: white;
 @actionDisabledColor: #666;

packages/eez-studio-ui/_stylesheets/vars.less

@@ -35,6 +35,7 @@
 @activeConnectionLineColor: blue;
 @connectionLineInTheMakingColor: #337bb7;
 @activeTabBackgroundColor: #ffffff;
+@disabledConnectionLineColor: #aaa;
 
 @actionSelectedTextColor: white;
 @actionDisabledColor: #ccc;

packages/eez-studio-ui/theme.ts

@@ -9,6 +9,7 @@ export interface ThemeInterface {
     selectedConnectionLineColor: string;
     seqConnectionLineColor: string;
     activeConnectionLineColor: string;
+    disabledLineColor: string;
 }
 
 export const lightTheme: ThemeInterface = {
@@ -19,7 +20,8 @@ export const lightTheme: ThemeInterface = {
     connectionLineColor: "#999",
     selectedConnectionLineColor: "red",
     seqConnectionLineColor: "#3FADB5",
-    activeConnectionLineColor: "blue"
+    activeConnectionLineColor: "blue",
+    disabledLineColor: "#aaa"
 };
 
 export const darkTheme: ThemeInterface = {
@@ -30,7 +32,8 @@ export const darkTheme: ThemeInterface = {
     connectionLineColor: "#999",
     selectedConnectionLineColor: "red",
     seqConnectionLineColor: "#3FADB5",
-    activeConnectionLineColor: "blue"
+    activeConnectionLineColor: "blue",
+    disabledLineColor: "#999"
 };
 
 export const theme = () =>

packages/project-editor/build/flows.ts

@@ -282,7 +282,8 @@ function buildComponent(
         const connectionLines = flow.connectionLines.filter(
             connectionLine =>
                 connectionLine.sourceComponent === component &&
-                connectionLine.output == output.name
+                connectionLine.output == output.name &&
+                !connectionLine.disabled
         );
 
         const connectionLinesMap: {

packages/project-editor/flow/connection-line/ConnectionLineComponent.tsx

@@ -25,6 +25,7 @@ const lineColor = () => theme().connectionLineColor;
 const seqLineColor = () => theme().seqConnectionLineColor;
 const selectedLineColor = () => theme().selectedConnectionLineColor;
 const selectedLineColorInViewer = () => theme().selectionBackgroundColor;
+const disabledLineColor = () => theme().disabledLineColor;
 
 export const strokeWidth = 1.2;
 const seqStrokeWidth = 1.2;
@@ -221,61 +222,68 @@ const ConnectionLineDebugValue = observer(
     }
 );
 
-class VisiblePath extends React.Component<{
-    lineShape: string;
-    selected: boolean;
-    connectionLine: ConnectionLine;
-    context: IFlowContext;
-    targetInput: ComponentInput | undefined;
-    shadow: { color: string } | undefined;
-}> {
-    ref = React.createRef<SVGPathElement>();
-
-    componentDidMount() {
-        if (this.ref.current) {
-            registerPath(this.props.connectionLine, this.ref.current);
+const VisiblePath = observer(
+    class VisiblePath extends React.Component<{
+        lineShape: string;
+        selected: boolean;
+        connectionLine: ConnectionLine;
+        context: IFlowContext;
+        targetInput: ComponentInput | undefined;
+        shadow: { color: string } | undefined;
+    }> {
+        ref = React.createRef<SVGPathElement>();
+
+        componentDidMount() {
+            if (this.ref.current) {
+                registerPath(this.props.connectionLine, this.ref.current);
+            }
         }
-    }
 
-    componentWillUnmount() {
-        if (this.ref.current) {
-            unregisterPath(this.props.connectionLine, this.ref.current);
+        componentWillUnmount() {
+            if (this.ref.current) {
+                unregisterPath(this.props.connectionLine, this.ref.current);
+            }
         }
-    }
 
-    render() {
-        const { lineShape, selected, connectionLine, targetInput } = this.props;
+        render() {
+            const { lineShape, selected, connectionLine, targetInput } =
+                this.props;
 
-        const seq =
-            targetInput?.isSequenceInput &&
-            !(
-                connectionLine.targetComponent instanceof
-                ProjectEditor.OutputActionComponentClass
-            );
+            const seq =
+                targetInput?.isSequenceInput &&
+                !(
+                    connectionLine.targetComponent instanceof
+                    ProjectEditor.OutputActionComponentClass
+                );
 
-        return (
-            <path
-                ref={this.ref}
-                d={lineShape}
-                style={{
-                    fill: "none",
-                    strokeWidth: this.props.shadow
-                        ? 2
-                        : seq
-                        ? seqStrokeWidth
-                        : strokeWidth,
-                    strokeLinecap: "round",
-                    stroke: this.props.shadow?.color
-                }}
-                className={classNames("connection-line-path", {
-                    selected,
-                    seq
-                })}
-                vectorEffect={selected ? "non-scaling-stroke" : "none"}
-            ></path>
-        );
+            return (
+                <path
+                    ref={this.ref}
+                    d={lineShape}
+                    style={{
+                        fill: "none",
+                        strokeWidth: this.props.shadow
+                            ? 2
+                            : seq
+                            ? seqStrokeWidth
+                            : strokeWidth,
+                        strokeLinecap: "round",
+                        strokeDasharray: connectionLine.disabled
+                            ? "5.5"
+                            : undefined,
+                        stroke: this.props.shadow?.color
+                    }}
+                    className={classNames("connection-line-path", {
+                        selected,
+                        disabled: connectionLine.disabled,
+                        seq
+                    })}
+                    vectorEffect={selected ? "non-scaling-stroke" : "none"}
+                ></path>
+            );
+        }
     }
-}
+);
 
 const DebugValue = observer(
     ({
@@ -351,6 +359,7 @@ export const LineMarkers = () => (
                 id="selectedLineEndInViewer"
                 color={selectedLineColorInViewer()}
             />
+            <LineEndMarker id="disabledLineEnd" color={disabledLineColor()} />
             <AnimationCurveEndMarker />
             <pattern
                 id="page-background"

packages/project-editor/flow/connection-line/connection-line.tsx

@@ -27,6 +27,7 @@ export class ConnectionLine extends EezObject {
     output: string;
     target: string;
     input: string;
+    disabled: boolean;
 
     _active: boolean;
 
@@ -83,9 +84,20 @@ export class ConnectionLine extends EezObject {
                 name: "input",
                 type: PropertyType.String,
                 hideInPropertyGrid: true
+            },
+            {
+                name: "disabled",
+                type: PropertyType.Boolean,
+                checkboxStyleSwitch: true
             }
         ],
 
+        beforeLoadHook(object, jsObject) {
+            if (jsObject.disabled == "undefined") {
+                jsObject.disabled = false;
+            }
+        },
+
         isSelectable: () => true,
 
         deleteObjectFilterHook: (connectionLine: ConnectionLine) => {
@@ -218,6 +230,7 @@ export class ConnectionLine extends EezObject {
             target: observable,
             input: observable,
             _active: observable,
+            disabled: observable,
             isVisible: computed
         });
     }