@eccenca/gui-elements 23.1.0-easynav.1 → 23.1.0-easynav.3

package/src/extensions/react-flow/nodes/NodeContent.tsx

@@ -1,10 +1,12 @@
 import React from "react";
+import Color from "color";
 import { Position, useStoreState as useStoreStateFlowLegacy } from "react-flow-renderer";
 import { useStore as useStoreStateFlowNext } from "react-flow-renderer-lts";
 import { Icon, Depiction, OverflowText } from "../../../index";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
 import { DepictionProps } from "../../../components/Depiction/Depiction";
+import { IntentTypes, intentClassName } from "../../../common/Intent";
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 import { HandleDefault, HandleProps, HandleNextProps } from "./../handles/HandleDefault";
 import { NodeProps } from "./NodeDefault";
@@ -12,6 +14,7 @@ import { NodeContentExtensionProps } from "./NodeContentExtension";
 import { Resizable } from "re-resizable";
 
 export type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
+export type NodeHighlightColor = "default" | "alternate" | Color | string;
 
 export interface IHandleProps extends HandleProps {
     category?: "configuration";
@@ -85,11 +88,27 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      * Use this for example if you need more space for a label subline.
      * Also the depiction is displayed larger.
      */
-    increadeHeader?: boolean;
+    enlargeHeader?: boolean;
     /**
+     * @deprecated
      * Set the type of used highlights to mark the node.
+     * Replaced by `intent` and `highlightColor` properties.
      */
     highlightedState?: HighlightingState | HighlightingState[];
+    /**
+     * Defines how the borders of a node are displayed.
+     * Use this property to overwrite default styles.
+     * You can use this to visuaize different states or type without depending only on color.
+     */
+    border?: "solid" | "double" | "dashed" | "dotted";
+    /**
+     * Feedback state of the node.
+     */
+    intent?: IntentTypes;
+    /**
+     * Set the type of used highlights to mark the node.
+     */
+    highlightColor?: NodeHighlightColor | [NodeHighlightColor, NodeHighlightColor];
     /**
      * Text used for tooltip used on icon and depiction.
      */
@@ -240,10 +259,14 @@ const addHandles = (handles: any, position: any, posDirection: any, isConnectabl
     });
 };
 
-export const gethighlightedStateClasses = (state: any, baseClassName: any) => {
+export const gethighlightedStateClasses = (
+    state: HighlightingState | HighlightingState[],
+    baseClassName: string
+) => {
     let hightlights = typeof state === "string" ? [state] : state;
-    //@ts-ignore
-    return hightlights.map((item) => `${baseClassName}--highlight-${item}`).join(" ");
+    return hightlights.map(
+        (item : HighlightingState) => `${baseClassName}--highlight-${item}`
+    ).join(" ");
 };
 
 const MemoHandler = React.memo(
@@ -266,7 +289,7 @@ export function NodeContent<CONTENT_PROPS = any>({
     typeLabel,
     label,
     labelSubline,
-    increadeHeader,
+    enlargeHeader,
     fullWidth,
     showExecutionButtons = true,
     executionButtons,
@@ -277,6 +300,9 @@ export function NodeContent<CONTENT_PROPS = any>({
     size = "small",
     minimalShape = "circular",
     highlightedState,
+    intent,
+    border,
+    highlightColor,
     handles = defaultHandles(),
     adaptHeightForHandleMinCount,
     adaptSizeIncrement = 15,
@@ -366,18 +392,29 @@ export function NodeContent<CONTENT_PROPS = any>({
         styleExpandDimensions["minHeight"] = Math.max(minHeightLeft, minHeightRight);
     }
 
+    const {
+        highlightClassNameSuffix,
+        highlightCustomPropertySettings
+    } = evaluateHighlightColors("--node-highlight", highlightColor);
+
     const resizableStyles = (!!onNodeResize === true && minimalShape === "none" && (width + height > 0)) ? { width, height } : {};
     const nodeContent = (
         <>
             <section
                 ref={nodeContentRef}
                 {...otherProps}
-                style={{ ...style, ...styleExpandDimensions, ...resizableStyles }}
+                style={{ ...style, ...highlightCustomPropertySettings, ...styleExpandDimensions, ...resizableStyles }}
                 className={
                     `${eccgui}-graphviz__node` +
                     ` ${eccgui}-graphviz__node--${size}` +
                     ` ${eccgui}-graphviz__node--minimal-${minimalShape}` +
                     (fullWidth ? ` ${eccgui}-graphviz__node--fullwidth` : "") +
+                    (border ? ` ${eccgui}-graphviz__node--border-${border}` : "") +
+                    (intent ? ` ${intentClassName(intent)}` : "") +
+                    (highlightClassNameSuffix.length > 0
+                        ? highlightClassNameSuffix.map(highlight => ` ${eccgui}-graphviz__node--highlight-${highlight}`).join("")
+                        : ""
+                    ) +
                     (!!highlightedState
                         ? " " + gethighlightedStateClasses(highlightedState, `${eccgui}-graphviz__node`)
                         : "") +
@@ -388,7 +425,7 @@ export function NodeContent<CONTENT_PROPS = any>({
             >
                 <header className={
                     `${eccgui}-graphviz__node__header` +
-                    ((increadeHeader && minimalShape==="none") ? ` ${eccgui}-graphviz__node__header--large` : "")
+                    ((enlargeHeader && minimalShape==="none") ? ` ${eccgui}-graphviz__node__header--large` : "")
                 }>
                     {(!!iconName || !!depiction || !!leftElement) && (
                         <div className={`${eccgui}-graphviz__node__header-depiction`}>
@@ -500,3 +537,52 @@ export function NodeContent<CONTENT_PROPS = any>({
 
     return (isResizeable) ? resizableNode() : nodeContent;
 }
+
+export const evaluateHighlightColors = (
+    baseCustomProperty: string,
+    highlightColor?: NodeHighlightColor | NodeHighlightColor[]
+) => {
+    let styleHighlightColors = {
+        [`${baseCustomProperty}-default-color`]: undefined,
+        [`${baseCustomProperty}-alternate-color`]: undefined,
+    } as React.CSSProperties;
+    const classesHightlightColors = [] as string[];
+    if (!!highlightColor) {
+        const highlightingColors = (typeof highlightColor === "string") ? [highlightColor] : highlightColor;
+        (highlightingColors as Array<string>).map((color, idx) => {
+            switch (color) {
+                case "default":
+                    classesHightlightColors.push("default");
+                    break;
+                case "alternate":
+                    classesHightlightColors.push("alternate");
+                    break;
+                default:
+                    classesHightlightColors.push("custom");
+                    let customColor = Color("#ffffff")
+                    try {
+                        customColor = Color(color);
+                    } catch(ex) {
+                        console.warn("Received invalid color for highlight: " + color)
+                    }
+                    if (idx === 0) {
+                        styleHighlightColors = {
+                            ...styleHighlightColors,
+                            [`${baseCustomProperty}-default-color`]: customColor.rgb().toString(),
+                        } as React.CSSProperties
+                    } else {
+                        styleHighlightColors = {
+                            ...styleHighlightColors,
+                            [`${baseCustomProperty}-alternate-color`]: customColor.rgb().toString(),
+                        } as React.CSSProperties
+                    }
+                    break;
+            }
+        });
+    }
+
+    return {
+        highlightClassNameSuffix: classesHightlightColors,
+        highlightCustomPropertySettings: styleHighlightColors,
+    }
+}

package/src/extensions/react-flow/nodes/_nodes.scss

@@ -51,22 +51,6 @@
     }
 }
 
-.#{$eccgui}-graphviz__node--animated {
-    animation: pumpingshadow 4 * $reactflow-transition-time linear infinite;
-}
-
-@keyframes pumpingshadow {
-  0% {
-    box-shadow: 0 0 2 * $reactflow-node-border-width 0 rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 0 rgba($reactflow-edge-stroke-color-selected, 0);
-  }
-  50% {
-    box-shadow: 0 0 2 * $reactflow-node-border-width 6 * $reactflow-node-border-width rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 6 * $reactflow-node-border-width $reactflow-edge-stroke-color-selected;
-  }
-  100% {
-    box-shadow: 0 0 2 * $reactflow-node-border-width 0 rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 0 rgba($reactflow-edge-stroke-color-selected, 0);
-  }
-}
-
 .#{$eccgui}-graphviz__node--minimal-rectangular,
 .#{$eccgui}-graphviz__node--minimal-circular {
 
@@ -264,12 +248,43 @@
     width: 100%;
 }
 
-// Node highlights
+// Node border overwrites
 
-.#{$eccgui}-graphviz__node--highlight-success,
-.#{$eccgui}-graphviz__node--highlight-warning,
-.#{$eccgui}-graphviz__node--highlight-danger {
-    &:before {
+.#{$eccgui}-graphviz__node--border-solid {
+    border-style: solid;
+}
+
+.#{$eccgui}-graphviz__node--border-double {
+    border-width: 1.5 * $reactflow-node-border-width;
+    border-style: double;
+}
+
+.#{$eccgui}-graphviz__node--border-dashed {
+    border-style: dashed;
+}
+
+.#{$eccgui}-graphviz__node--border-dotted {
+    border-style: dotted;
+}
+
+// Node intent
+
+@mixin node-intent-gradient {
+    border-image-source: conic-gradient(
+        from var(--node-intent-angle),
+        transparent,
+        var(--node-intent-color) 0.05turn,
+        var(--node-intent-color) 0.2turn,
+        transparent 0.25turn
+    );
+}
+
+.#{$eccgui}-graphviz__node[class*="#{$eccgui}-intent--"],
+.#{$eccgui}-graphviz__node--animated:not([class*="#{$eccgui}-intent--"]) {
+    --node-intent-color: #{$eccgui-color-workspace-text};
+
+    &:after {
+        --node-intent-angle: #{$reactflow-transition-anglestart};
         content: " ";
         display: block;
         position: absolute;
@@ -277,15 +292,45 @@
         left: -2 * $reactflow-node-border-width;
         bottom: -2 * $reactflow-node-border-width;
         right: -2 * $reactflow-node-border-width;
-        border-radius: inherit;
-        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-danger-text;
         z-index: -1;
+        border-style: solid;
+        border-width: 2 * $reactflow-node-border-width;
+        @include node-intent-gradient;
+        border-image-slice: 1;
+        border-image-width: 2 * $reactflow-node-border-width;
     }
 }
 
-.#{$eccgui}-graphviz__node--highlight-match,
-.#{$eccgui}-graphviz__node--highlight-altmatch {
-    &:after {
+.#{$eccgui}-graphviz__node.#{$eccgui}-intent--primary {
+    --node-intent-color: #{$eccgui-color-primary};
+}
+
+.#{$eccgui}-graphviz__node.#{$eccgui}-intent--accent {
+    --node-intent-color: #{$eccgui-color-accent};
+}
+
+.#{$eccgui}-graphviz__node.#{$eccgui}-intent--info {
+    --node-intent-color: #{$eccgui-color-info-text};
+}
+
+.#{$eccgui}-graphviz__node.#{$eccgui}-intent--success {
+    --node-intent-color: #{$eccgui-color-success-text};
+}
+
+.#{$eccgui}-graphviz__node.#{$eccgui}-intent--warning {
+    --node-intent-color: #{$eccgui-color-warning-text};
+}
+
+.#{$eccgui}-graphviz__node.#{$eccgui}-intent--danger {
+    --node-intent-color: #{$eccgui-color-danger-text};
+}
+
+// hode highlight mark
+
+.#{$eccgui}-graphviz__node[class*="#{$eccgui}-graphviz__node--highlight-"] {
+
+    &:before {
+        opacity: $eccgui-opacity-disabled;
         content: " ";
         display: block;
         position: absolute;
@@ -293,38 +338,56 @@
         left: -2 * $reactflow-node-border-width;
         bottom: -2 * $reactflow-node-border-width;
         right: -2 * $reactflow-node-border-width;
-        border-radius: inherit;
-        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-accent;
-        z-index: -1;
+        z-index: -2;
+        box-shadow:
+            0 0 0 2 * $reactflow-node-border-width var(--node-highlight-default-color),
+            0 0 0 3.5 * $reactflow-node-border-width var(--node-highlight-alternate-color, var(--node-highlight-default-color));
+        border: 0.1px solid transparent; // workaround for Firefox, otherwise shadows are overlayed
     }
+}
 
-    &.#{$eccgui}-graphviz__node--highlight-success,
-    &.#{$eccgui}-graphviz__node--highlight-warning,
-    &.#{$eccgui}-graphviz__node--highlight-danger {
-        &:after {
-            top: -4 * $reactflow-node-border-width;
-            left: -4 * $reactflow-node-border-width;
-            bottom: -4 * $reactflow-node-border-width;
-            right: -4 * $reactflow-node-border-width;
-        }
-    }
+.#{$eccgui}-graphviz__node--highlight-default {
+    --node-highlight-default-color: #{$eccgui-color-accent};
+    --node-highlight-alternate-color: #{$eccgui-color-accent};
 }
 
-.#{$eccgui}-graphviz__node--highlight-success {
-    &:before {
-        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-success-text;
-    }
+.#{$eccgui}-graphviz__node--highlight-alternate {
+    --node-highlight-default-color: #{$eccgui-color-primary};
+    --node-highlight-alternate-color: #{$eccgui-color-primary};
 }
 
-.#{$eccgui}-graphviz__node--highlight-warning {
-    &:before {
-        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-warning-text;
-    }
+.#{$eccgui}-graphviz__node--highlight-default.#{$eccgui}-graphviz__node--highlight-alternate {
+    --node-highlight-default-color: #{$eccgui-color-accent};
+    --node-highlight-alternate-color: #{$eccgui-color-primary};
 }
 
-.#{$eccgui}-graphviz__node--highlight-altmatch {
-    &:after {
-        box-shadow: 0 0 0 2 * $reactflow-node-border-width complement($eccgui-color-primary);
+// Node animation
+
+@property --node-intent-angle {
+    // rule necessary, otherwise increasing --node-intent-angle for animation does not work correctly
+    syntax: '<angle>';
+    initial-value: #{$reactflow-transition-anglestart};
+    inherits: true;
+}
+
+.#{$eccgui}-graphviz__node--animated:after {
+    animation: spinningborder 8 * $reactflow-transition-time linear infinite;
+
+    @keyframes spinningborder {
+        to {
+            --node-intent-angle: #{$reactflow-transition-anglestart + 360deg};
+        }
+        @for $step from 1 through 10 {
+            /*
+            This is a fix/workaround for Firefox/Gecko.
+            Looks like "animation" the custom property is not enough.
+            It is also necessary to repeat the rule.
+            */
+            #{$step*10}#{"%"} {
+                --node-intent-angle: #{$reactflow-transition-anglestart + $step * 36deg};
+                @include node-intent-gradient;
+            }
+        }
     }
 }
 
@@ -424,3 +487,67 @@
     flex-grow: 0;
     flex-shrink: 0;
 }
+
+// Node highlights (@deprecated) // FIXME: remove in v24.0.0
+
+.#{$eccgui}-graphviz__node--highlight-success,
+.#{$eccgui}-graphviz__node--highlight-warning,
+.#{$eccgui}-graphviz__node--highlight-danger {
+    &:before {
+        content: " ";
+        display: block;
+        position: absolute;
+        top: -2 * $reactflow-node-border-width;
+        left: -2 * $reactflow-node-border-width;
+        bottom: -2 * $reactflow-node-border-width;
+        right: -2 * $reactflow-node-border-width;
+        border-radius: inherit;
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-danger-text;
+        z-index: -1;
+    }
+}
+
+.#{$eccgui}-graphviz__node--highlight-match,
+.#{$eccgui}-graphviz__node--highlight-altmatch {
+    &:after {
+        content: " ";
+        display: block;
+        position: absolute;
+        top: -2 * $reactflow-node-border-width;
+        left: -2 * $reactflow-node-border-width;
+        bottom: -2 * $reactflow-node-border-width;
+        right: -2 * $reactflow-node-border-width;
+        border-radius: inherit;
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-accent;
+        z-index: -1;
+    }
+
+    &.#{$eccgui}-graphviz__node--highlight-success,
+    &.#{$eccgui}-graphviz__node--highlight-warning,
+    &.#{$eccgui}-graphviz__node--highlight-danger {
+        &:after {
+            top: -4 * $reactflow-node-border-width;
+            left: -4 * $reactflow-node-border-width;
+            bottom: -4 * $reactflow-node-border-width;
+            right: -4 * $reactflow-node-border-width;
+        }
+    }
+}
+
+.#{$eccgui}-graphviz__node--highlight-success {
+    &:before {
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-success-text;
+    }
+}
+
+.#{$eccgui}-graphviz__node--highlight-warning {
+    &:before {
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-warning-text;
+    }
+}
+
+.#{$eccgui}-graphviz__node--highlight-altmatch {
+    &:after {
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width complement($eccgui-color-primary);
+    }
+}

package/src/extensions/react-flow/nodes/stories/NodeContent.stories.tsx

@@ -13,6 +13,7 @@ import {
     TagList,
 } from "./../../../../index";
 import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
+import { Definitions } from "../../../../common/Intent";
 
 import { NodeContent } from "./../NodeContent";
 import { nodeTypes } from "./../nodeTypes";
@@ -65,6 +66,35 @@ export default {
             control: "select",
             options: [...(Object.keys(canonicalIcons))],
         },
+        highlightedState: {
+            control: "select",
+            options: ["Not set", "success", "warning", "danger", "match", "altmatch", "danger + match"],
+            mapping: {
+                "Not set": undefined,
+                "danger + match": ["danger", "match"],
+            },
+        },
+        border: {
+            control: "select",
+            options: [undefined, "solid", "double", "dashed", "dotted"],
+        },
+        intent: {
+            control: "select",
+            options: {"Not set": undefined, ...Definitions},
+        },
+        highlightColor: {
+            control: "select",
+            options: {
+                "Not set": undefined,
+                "Default": "default",
+                "Alternate": "alternate",
+                "Default + alternate": ["default" , "alternate"],
+                "Custom (red)": "red",
+                "Default + Custom (red)": ["default", "red"],
+                "Custom (green) + alternate": ["green", "alternate"],
+                "Custom (purple) + custom (yellow)": ["purple", "yellow"],
+            }
+        },
         content: { control: "none" },
         footerContent: { control: "none" },
         isConnectable: { table: { disable: true } },