@eccenca/gui-elements 22.0.1 → 22.1.0

package/src/components/Typography/classnames.ts

@@ -4,6 +4,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 export const NOOVERFLOW = eccgui + "-typography--nooverflow";
 export const FORCELINEBREAK = eccgui + "-typography--forcelinebreak";
 export const PREVENTLINEBREAK = eccgui + "-typography--preventlinebreak";
+export const NOSCROLLBARSONCHILDREN = eccgui + "-typography--noscrollbarsonchildren";
 export const LARGE = eccgui + "-typography--large";
 export const SMALL = eccgui + "-typography--small";
 export const MUTED = eccgui + "-typography--muted";

package/src/components/Typography/typography.scss

@@ -261,6 +261,14 @@ table {
     white-space: nowrap;
 }
 
+.#{$eccgui}-typography--noscrollbarsonchildren * {
+    overflow: visible;
+
+    pre {
+        width: fit-content;
+    }
+}
+
 // white spaces
 @each $whitespacePlace in ("margin", "padding") {
     @each $whitespaceDirection in ("top", "right", "bottom", "left") {

package/src/configuration/_variables.scss

@@ -20,13 +20,13 @@ $eccgui-color-primary-contrast: rgb(255, 255, 255) !default;
 $eccgui-color-accent: rgb(10, 103, 163) !default;
 $eccgui-color-accent-contrast: rgb(255, 255, 255) !default;
 
-$eccgui-color-success-text: rgb(46, 125, 50) !default;
+$eccgui-color-success-text: #1b5e20 !default;
 $eccgui-color-success-background: rgb(232, 245, 233) !default;
 $eccgui-color-info-text: rgb(21, 101, 192) !default;
 $eccgui-color-info-background: rgb(227, 242, 253) !default;
-$eccgui-color-warning-text: rgb(239, 108, 0) !default;
+$eccgui-color-warning-text: #e65100 !default;
 $eccgui-color-warning-background: rgb(255, 243, 224) !default;
-$eccgui-color-danger-text: rgb(198, 40, 40) !default;
+$eccgui-color-danger-text: #b71c1c !default;
 $eccgui-color-danger-background: rgb(255, 235, 238) !default;
 
 $eccgui-color-applicationheader-text: #222 !default;

package/src/extensions/react-flow/_config.scss

@@ -3,13 +3,13 @@ $reactflow-node-border-color: $eccgui-color-workspace-text !default;
 $reactflow-node-background-color: $button-background-color !default;
 $reactflow-node-color: $eccgui-color-workspace-text !default;
 $reactflow-node-font-size: $eccgui-size-typo-caption !default;
-$reactflow-node-border-width: $button-border-width !default;
+$reactflow-node-border-width: 2 * $button-border-width !default;
 $reactflow-node-border-radius: $button-border-radius !default;
 $reactflow-edge-stroke-color: rgba($eccgui-color-workspace-text, .61) !default;
 $reactflow-edge-stroke-color-hover: $eccgui-color-workspace-text !default;
 $reactflow-edge-stroke-color-selected: $eccgui-color-accent !default;
 $reactflow-transition-time: 0.25s !default;
-$reactflow-transition-function: !default;
+$reactflow-transition-function: "" !default;
 
 $reactflow-edge-stroke-opacity: alpha($reactflow-edge-stroke-color) !default;
 $reactflow-edge-stroke-opacity-hover: alpha($reactflow-edge-stroke-color) !default;

package/src/extensions/react-flow/_react-flow.scss

@@ -3,3 +3,7 @@
 @import "edges/edges";
 @import "handles/handles";
 @import "minimap/minimap";
+
+.react-flow__background {
+    border: solid 1px $eccgui-color-separation-divider;
+}

package/src/extensions/react-flow/edges/EdgeDefault.tsx

@@ -67,7 +67,6 @@ export const EdgeDefault = memo(
                 <path
                     d={pathDisplay}
                     className="react-flow__edge-path"
-
                     markerEnd={markerEnd}
                 />
                 { edgeLabel }

package/src/extensions/react-flow/edges/_edges.scss

@@ -104,42 +104,17 @@ path.react-flow__edge-path-glow {
     }
 }
 
-.react-flow__edge-implicitEdge {
-    stroke: #00acc1;
-    color: #00acc1;
-}
-
-.react-flow__edge-importEdge {
-    stroke: #8e24aa;
-    color: #8e24aa;
-}
-
-.react-flow__edge-subclassEdge {
-    stroke: darken($button-background-color, 60%);
-    color: darken($button-background-color, 60%);
-}
-
-.react-flow__edge-subpropertyEdge {
-    stroke: darken(complement($button-background-color), 40%);
-    color: darken(complement($button-background-color), 40%);
-}
-
-.react-flow__edge-rdftypeEdge {
-    stroke: darken($button-background-color, 50%);
-    color: darken($button-background-color, 50%);
-}
-
-.react-flow__edge-successStep {
+.react-flow__edge-success {
     stroke: $eccgui-color-success-text;
     color: $eccgui-color-success-text;
 }
 
-.react-flow__edge-warningStep {
+.react-flow__edge-warning {
     stroke: $eccgui-color-warning-text;
     color: $eccgui-color-warning-text;
 }
 
-.react-flow__edge-dangerStep {
+.react-flow__edge-danger {
     stroke: $eccgui-color-danger-text;
     color: $eccgui-color-danger-text;
 }

package/src/extensions/react-flow/edges/getSmoothStepPath.ts

@@ -0,0 +1,118 @@
+/**
+ * Copied from `react-flow` because we need to change there routing.
+ * We use the 10.2.0cversion minus commit 87d518f8b5540a91a3f9c163a2315c2de47abc31
+ * @see https://github.com/wbkd/react-flow/commit/87d518f8b5540a91a3f9c163a2315c2de47abc31
+ */
+
+import { getEdgeCenter as getCenter, Position } from "react-flow-renderer";
+
+// These are some helper methods for drawing the round corners
+// The name indicates the direction of the path. "bottomLeftCorner" goes
+// from bottom to the left and "leftBottomCorner" goes from left to the bottom.
+// We have to consider the direction of the paths because of the animated lines.
+const bottomLeftCorner = (x: number, y: number, size: number): string =>
+    `L ${x},${y - size}Q ${x},${y} ${x + size},${y}`;
+const leftBottomCorner = (x: number, y: number, size: number): string =>
+    `L ${x + size},${y}Q ${x},${y} ${x},${y - size}`;
+const bottomRightCorner = (x: number, y: number, size: number): string =>
+    `L ${x},${y - size}Q ${x},${y} ${x - size},${y}`;
+const rightBottomCorner = (x: number, y: number, size: number): string =>
+    `L ${x - size},${y}Q ${x},${y} ${x},${y - size}`;
+const leftTopCorner = (x: number, y: number, size: number): string => `L ${x + size},${y}Q ${x},${y} ${x},${y + size}`;
+const topLeftCorner = (x: number, y: number, size: number): string => `L ${x},${y + size}Q ${x},${y} ${x + size},${y}`;
+const topRightCorner = (x: number, y: number, size: number): string => `L ${x},${y + size}Q ${x},${y} ${x - size},${y}`;
+const rightTopCorner = (x: number, y: number, size: number): string => `L ${x - size},${y}Q ${x},${y} ${x},${y + size}`;
+
+export interface GetSmoothStepPathParams {
+    sourceX: number;
+    sourceY: number;
+    sourcePosition?: Position;
+    targetX: number;
+    targetY: number;
+    targetPosition?: Position;
+    borderRadius?: number;
+    centerX?: number;
+    centerY?: number;
+}
+
+export function getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition = Position.Bottom,
+    targetX,
+    targetY,
+    targetPosition = Position.Top,
+    borderRadius = 5,
+    centerX,
+    centerY,
+}: GetSmoothStepPathParams): string {
+    const [_centerX, _centerY, offsetX, offsetY] = getCenter({ sourceX, sourceY, targetX, targetY });
+    const cornerWidth = Math.min(borderRadius, Math.abs(targetX - sourceX));
+    const cornerHeight = Math.min(borderRadius, Math.abs(targetY - sourceY));
+    const cornerSize = Math.min(cornerWidth, cornerHeight, offsetX, offsetY);
+    const cX = typeof centerX !== 'undefined' ? centerX : _centerX;
+    const cY = typeof centerY !== 'undefined' ? centerY : _centerY;
+
+    let firstCornerPath = "";
+    let secondCornerPath = "";
+
+    if (sourceX <= targetX) {
+        if (sourceY <= targetY) {
+            firstCornerPath = bottomLeftCorner(sourceX, cY, cornerSize);
+            secondCornerPath = rightTopCorner(targetX, cY, cornerSize);
+            if (sourcePosition === Position.Right) {
+                if (targetPosition === Position.Left) {
+                    firstCornerPath = rightTopCorner(cX, sourceY, cornerSize);
+                    secondCornerPath = bottomLeftCorner(cX, targetY, cornerSize);
+                }
+            } else {
+                if (targetPosition === Position.Left) {
+                    // no change
+                }
+            }
+        } else {
+            firstCornerPath = topLeftCorner(sourceX, cY, cornerSize);
+            secondCornerPath = rightBottomCorner(targetX, cY, cornerSize);
+            if (sourcePosition === Position.Right) {
+                if (targetPosition === Position.Left) {
+                    firstCornerPath = rightBottomCorner(cX, sourceY, cornerSize);
+                    secondCornerPath = topLeftCorner(cX, targetY, cornerSize);
+                }
+            } else {
+                if (targetPosition === Position.Left) {
+                    // no change
+                }
+            }
+        }
+    } else {
+        if (sourceY <= targetY) {
+            firstCornerPath = bottomRightCorner(sourceX, cY, cornerSize);
+            secondCornerPath = leftTopCorner(targetX, cY, cornerSize);
+            if (sourcePosition === Position.Left) {
+                if (targetPosition === Position.Right) {
+                    firstCornerPath = leftTopCorner(cX, sourceY, cornerSize);
+                    secondCornerPath = bottomRightCorner(cX, targetY, cornerSize);
+                }
+            } else {
+                if (targetPosition === Position.Right) {
+                    // no change
+                }
+            }
+        } else {
+            firstCornerPath = topRightCorner(sourceX, cY, cornerSize);
+            secondCornerPath = leftBottomCorner(targetX, cY, cornerSize);
+            if (sourcePosition === Position.Left) {
+                if (targetPosition === Position.Right) {
+                    firstCornerPath = leftBottomCorner(cX, sourceY, cornerSize);
+                    secondCornerPath = topRightCorner(cX, targetY, cornerSize);
+                }
+            } else {
+                if (targetPosition === Position.Right) {
+                    // no change
+                }
+            }
+        }
+    }
+
+    return `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`;
+}

package/src/extensions/react-flow/edges/utils.ts

@@ -1,14 +1,123 @@
 import { EdgeDefaultProps } from "./EdgeDefault";
 import { EdgeStepProps } from "./EdgeStep";
-import { getSmoothStepPath } from "react-flow-renderer";
+import { Position } from "react-flow-renderer";
+import { getSmoothStepPath } from "./getSmoothStepPath";
+
+interface EdgePositionCorrectionProps extends Omit<EdgeDefaultProps, "id" | "source" | "target" | "drawSvgPath" | "data"> {
+    correctionLength?: number;
+    correctionRadius?: number;
+}
+
+const posCorrectionEdge = ({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    correctionLength = 7,
+    correctionRadius = 7
+}: EdgePositionCorrectionProps) => {
+    let newSourceX = sourceX;
+    let newSourceY = sourceY;
+    let newTargetX = targetX;
+    let newTargetY = targetY;
+    let startCommandCorrection = `M ${sourceX},${sourceY} `;
+    let endCommandCorrection = ``;
+
+    if (sourcePosition === Position.Left && sourceX < targetX) {
+        newSourceX = newSourceX - 2 * correctionLength;
+        if (sourceY < targetY) {
+            newSourceY = sourceY + correctionRadius;
+            startCommandCorrection = startCommandCorrection + ` L ${newSourceX + correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} `;
+        } else {
+            newSourceY = sourceY - correctionRadius;
+            startCommandCorrection = startCommandCorrection + ` L ${newSourceX + correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} `;
+        }
+    }
+
+    if (sourcePosition === Position.Right && sourceX > targetX) {
+        newSourceX = targetPosition === Position.Right ? newSourceX + correctionLength + correctionRadius : newSourceX + correctionLength;
+        if (sourceY < targetY) {
+            newSourceY = sourceY + correctionRadius;
+            startCommandCorrection = startCommandCorrection + ` L ${newSourceX - correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} `;
+        } else {
+            newSourceY = sourceY - correctionRadius;
+            startCommandCorrection = startCommandCorrection + ` L ${newSourceX - correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} `;
+        }
+    }
+
+    if (targetPosition === Position.Left && sourceX > targetX) {
+        newTargetX = newTargetX - 3 * correctionLength;
+        if (sourceY < targetY) {
+            newTargetY = targetY - correctionRadius;
+            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} ${newTargetX + correctionRadius},${targetY} L ${targetX},${targetY}`;
+        } else {
+            newTargetY = targetY + correctionRadius;
+            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} ${newTargetX + correctionRadius},${targetY} L ${targetX},${targetY}`;
+        }
+    }
+
+    if (targetPosition === Position.Right && sourceX < targetX) {
+        newTargetX = newTargetX + 3 * correctionLength;
+        if (sourceY < targetY) {
+            newTargetY = targetY - correctionRadius;
+            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} ${newTargetX - correctionRadius},${targetY} L ${targetX},${targetY}`;
+        } else {
+            newTargetY = targetY + correctionRadius;
+            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} ${newTargetX - correctionRadius},${targetY} L ${targetX},${targetY}`;
+        }
+    }
+
+    return {
+        newSourceX,
+        newSourceY,
+        newTargetX,
+        newTargetY,
+        startCommandCorrection,
+        endCommandCorrection,
+    }
+}
+
+interface PathCommandCorrectionProps {
+    pathCommand: string;
+    startCorrection: string;
+    endCorrection: string;
+}
+
+const pathCommandCorrection = ({
+    pathCommand,
+    startCorrection,
+    endCorrection,
+}: PathCommandCorrectionProps) => {
+    return startCorrection + pathCommand.substring(1) + endCorrection;
+}
 
 export const drawEdgeStraight = ({
     sourceX,
     sourceY,
+    sourcePosition,
     targetX,
     targetY,
+    targetPosition,
 }: EdgeDefaultProps) => {
-    return `M ${sourceX},${sourceY}L ${targetX},${targetY}`;
+    const corrections = posCorrectionEdge({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+        correctionRadius: 0
+    });
+
+    const pathCommand = `M ${corrections.newSourceX},${corrections.newSourceY}L ${corrections.newTargetX},${corrections.newTargetY}`;
+
+    return pathCommandCorrection({
+        pathCommand,
+        startCorrection: corrections.startCommandCorrection,
+        endCorrection: corrections.endCommandCorrection,
+    });
 }
 
 export const drawEdgeStep = ({
@@ -20,13 +129,31 @@ export const drawEdgeStep = ({
     targetPosition,
     data = {},
 }: EdgeStepProps) => {
-    return getSmoothStepPath({
+
+    const corrections = posCorrectionEdge({
         sourceX,
         sourceY,
         sourcePosition,
         targetX,
         targetY,
         targetPosition,
-        borderRadius: data.stepCornerRadius || 10
+        correctionLength: data.stepCornerRadius || 7,
+        correctionRadius: data.stepCornerRadius || 7,
+    });
+
+    const pathCommand = getSmoothStepPath({
+        sourceX: corrections.newSourceX,
+        sourceY: corrections.newSourceY,
+        sourcePosition,
+        targetX: corrections.newTargetX,
+        targetY: corrections.newTargetY,
+        targetPosition,
+        borderRadius: data.stepCornerRadius || 7
+    });
+
+    return pathCommandCorrection({
+        pathCommand,
+        startCorrection: corrections.startCommandCorrection,
+        endCorrection: corrections.endCommandCorrection,
     });
 }

package/src/extensions/react-flow/handles/_handles.scss

@@ -22,14 +22,14 @@ div.react-flow__handle {
         right: $eccgui-size-block-whitespace/-2;
         opacity: 0.61;
         display: none;
-        background-color: transparent;
+        background-color: currentColor;
         border: solid 1px currentColor;
         border-radius: 100%;
     }
 
     &:hover {
         &:before {
-            background-color: currentColor;
+            box-shadow: 0 0 $eccgui-size-block-whitespace/2 $eccgui-size-block-whitespace/4 currentColor;
         }
     }
 
@@ -47,14 +47,14 @@ div.react-flow__handle {
         }
     }
 
-    &.react-flow__handle-connecting:hover {
+    &.react-flow__handle-connecting:hover, &.invalid-handle {
         color: $eccgui-color-danger-text;
         &:before {
             display: block;
         }
     }
 
-    &.react-flow__handle-valid:hover {
+    &.react-flow__handle-valid:hover, &.valid-handle {
         color: $eccgui-color-success-text;
     }
 }
@@ -152,57 +152,3 @@ div.react-flow__handle-bottom {
         }
     }
 }
-
-.react-flow__node-graphNode {
-    .react-flow__handle {
-        color: #8e24aa;
-    }
-}
-
-.react-flow__node-classNode {
-    .react-flow__handle {
-        color: darken($button-background-color, 60%);
-    }
-}
-
-.react-flow__node-instanceNode {
-    .react-flow__handle {
-        color: darken($button-background-color, 50%);
-    }
-}
-
-.react-flow__node-propertyNode {
-    .react-flow__handle {
-        color: darken(complement($button-background-color), 40%);
-    }
-}
-
-.react-flow__node-datasetNode {
-    .react-flow__handle {
-        color: #039be5;
-    }
-}
-
-.react-flow__node-linkingNode {
-    .react-flow__handle {
-        color: #00acc1;
-    }
-}
-
-.react-flow__node-transformNode {
-    .react-flow__handle {
-        color: #00897b;
-    }
-}
-
-.react-flow__node-taskNode {
-    .react-flow__handle {
-        color: #546e7a;
-    }
-}
-
-.react-flow__node-workflowNode {
-    .react-flow__handle {
-        color: #4527a0;
-    }
-}

package/src/extensions/react-flow/minimap/MiniMap.tsx

@@ -91,7 +91,7 @@ export const MiniMap = memo(({
     /**
         enables the mini-map fake drag effect see "handleMiniMapMouseMove" above.
      **/
-    const handleMiniMapMouseDown = (event: any) => {
+    const handleMiniMapMouseDown = () => {
         if (enableNavigation && flowInstance) { minimapCalcConf.navigationOn = true; }
     };
 

package/src/extensions/react-flow/minimap/_minimap.scss

@@ -3,51 +3,6 @@
     fill: $reactflow-node-background-color;
 }
 
-.#{$eccgui}-graphviz__minimap__node--graphNode {
-    fill: #8e24aa;
-    stroke: #8e24aa;
-}
-
-.#{$eccgui}-graphviz__minimap__node--classNode {
-    fill: darken($button-background-color, 60%);
-    stroke: darken($button-background-color, 60%);
-}
-
-.#{$eccgui}-graphviz__minimap__node--instanceNode {
-    fill: darken($button-background-color, 50%);
-    stroke: darken($button-background-color, 50%);
-}
-
-.#{$eccgui}-graphviz__minimap__node--propertyNode {
-    fill: darken(complement($button-background-color), 40%);
-    stroke: darken(complement($button-background-color), 40%);
-}
-
-.#{$eccgui}-graphviz__minimap__node--datasetNode {
-    fill: #039be5;
-    stroke: #039be5;
-}
-
-.#{$eccgui}-graphviz__minimap__node--linkingNode {
-    fill: #00acc1;
-    stroke: #00acc1;
-}
-
-.#{$eccgui}-graphviz__minimap__node--transformNode {
-    fill: #00897b;
-    stroke: #00897b;
-}
-
-.#{$eccgui}-graphviz__minimap__node--taskNode {
-    fill: #546e7a;
-    stroke: #546e7a;
-}
-
-.#{$eccgui}-graphviz__minimap__node--workflowNode {
-    fill: #4527a0;
-    stroke: #4527a0;
-}
-
 .#{$eccgui}-graphviz__minimap__node--highlight-match {
     stroke: $eccgui-color-accent;
     stroke-width: 5;