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

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 } },