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

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

@@ -1,15 +1,15 @@
 .react-flow__edge {
+    --#{$eccgui}-reactflow-node-color-default: #{$reactflow-edge-stroke-color-default};
+    --#{$eccgui}-reactflow-node-color-hover: #{$reactflow-edge-stroke-color-hover};
+    --#{$eccgui}-reactflow-node-color-selected: #{$reactflow-edge-stroke-color-selected};
 
     path, rect {
         shape-rendering: optimizeSpeed;
-        /* TODO: transitions currently do not work like expected
-        transition: $reactflow-transition-time * 0.5 $reactflow-transition-function;
-        */
-        stroke-opacity: $reactflow-edge-stroke-opacity;
+        stroke-opacity: $reactflow-edge-stroke-opacity-default;
     }
 
     text {
-        opacity: $reactflow-edge-stroke-opacity;
+        opacity: $reactflow-edge-stroke-opacity-default;
     }
 
     &:hover {
@@ -31,11 +31,24 @@
             opacity: $reactflow-edge-stroke-opacity-selected;
         }
     }
+    stroke: var(--#{$eccgui}-reactflow-node-color-default);
+    color: var(--#{$eccgui}-reactflow-node-color-default);
+
+    &:hover {
+        stroke: var(--#{$eccgui}-reactflow-node-color-hover);
+        color: var(--#{$eccgui}-reactflow-node-color-hover);
+    }
+
+    &.selected {
+        stroke: var(--#{$eccgui}-reactflow-node-color-selected);
+        color: var(--#{$eccgui}-reactflow-node-color-selected);
+    }
 }
 
 path.react-flow__edge-path {
     stroke-width: 2;
     stroke: currentColor;
+    stroke-opacity: $reactflow-edge-stroke-opacity-default;
 
     .react-flow__edge.selected & {
         stroke-width: 2;
@@ -49,9 +62,12 @@ path.react-flow__edge-path-glow {
     fill: none;
     stroke-linecap: round;
 
-    .react-flow__edge:hover &,
+    .react-flow__edge:hover & {
+        stroke-opacity: $reactflow-edge-stroke-opacity-hover * 0.2;
+    }
+
     .react-flow__edge.selected & {
-        stroke-opacity: 0.1;
+        stroke-opacity: $reactflow-edge-stroke-opacity-selected * 0.2;
     }
 
     .react-flow__edge.animated & {
@@ -70,12 +86,6 @@ path.react-flow__edge-path-glow {
     }
 }
 
-.react-flow__edge-textwrapper {
-    /* TODO: transitions currently do not work like expected
-    transition: $reactflow-transition-time * 0.5 $reactflow-transition-function;
-    */
-}
-
 .react-flow__edge-text {
     fill: currentColor;
     stroke: none;
@@ -84,39 +94,127 @@ path.react-flow__edge-path-glow {
 .react-flow__edge-textbg {
 }
 
+// Stroke types
+
+path.react-flow__edge-path--stroke-solid {
+    stroke-dasharray: unset;
+}
+
+path.react-flow__edge-path--stroke-dashed,
+.react-flow__edge.animated path.react-flow__edge-path--stroke-dashed {
+    stroke-dasharray: 5;
+}
+
+path.react-flow__edge-path--stroke-dotted,
+.react-flow__edge.animated path.react-flow__edge-path--stroke-dotted {
+    stroke-dasharray: 2;
+}
+
+path.react-flow__edge-path--stroke-double {
+    stroke: #fff !important;
+    stroke-opacity: 1 !important;
+    filter: drop-shadow(1px 1px 1px currentColor) drop-shadow(-1px -1px 1px currentColor);
+}
+
+path.react-flow__edge-path--stroke-doubledashed {
+    stroke: #fff !important;
+    stroke-opacity: 1 !important;
+    filter: drop-shadow(1px 1px 1px currentColor) drop-shadow(-1px -1px 1px currentColor);
+    stroke-dasharray: 5;
+}
+
+// Intent states
+
+g[class*="#{$eccgui}-intent--"] {
+    color: var(--edge-intent-color);
+}
+
+g[class*="#{$eccgui}-intent--"] > path.react-flow__edge-path,
+g[class*="#{$eccgui}-intent--"] > path.react-flow__edge-path-glow {
+    stroke: var(--edge-intent-color);
+
+    .react-flow__edge.selected & {
+        stroke: var(--edge-intent-color);
+    }
+}
+
+g.#{$eccgui}-intent--primary {
+    --edge-intent-color: #{$eccgui-color-primary};
+}
+
+g.#{$eccgui}-intent--accent {
+    --edge-intent-color: #{$eccgui-color-accent};
+}
+
+g.#{$eccgui}-intent--info {
+    --edge-intent-color: #{$eccgui-color-info-text};
+}
+
+g.#{$eccgui}-intent--success {
+    --edge-intent-color: #{$eccgui-color-success-text};
+}
+
+g.#{$eccgui}-intent--warning {
+    --edge-intent-color: #{$eccgui-color-warning-text};
+}
+
+g.#{$eccgui}-intent--danger {
+    --edge-intent-color: #{$eccgui-color-danger-text};
+}
+
+// Highlightning
+
+path.react-flow__edge-path-highlight {
+    stroke-opacity: 1;
+    fill: none;
+    stroke-linecap: round;
+    stroke: #fff;
+    filter:
+        drop-shadow(2px -2px 1px var(--edge-highlight-default-color))
+        drop-shadow(-2px 2px 1px var(--edge-highlight-alternate-color, var(--edge-highlight-default-color)));
+}
+
+.#{$eccgui}-graphviz__edge--highlight-default {
+    --edge-highlight-default-color: #{$eccgui-color-accent};
+    --edge-highlight-alternate-color: #{$eccgui-color-accent};
+}
+
+.#{$eccgui}-graphviz__edge--highlight-alternate {
+    --edge-highlight-default-color: #{$eccgui-color-primary};
+    --edge-highlight-alternate-color: #{$eccgui-color-primary};
+}
+
+.#{$eccgui}-graphviz__edge--highlight-default.#{$eccgui}-graphviz__edge--highlight-alternate {
+    --edge-highlight-default-color: #{$eccgui-color-accent};
+    --edge-highlight-alternate-color: #{$eccgui-color-primary};
+}
+
+
+
 // Type colors
 
 .react-flow__edge-default,
 .react-flow__edge-straight,
 .react-flow__edge-smoothstep,
 .react-flow__edge-step {
-    stroke: $reactflow-edge-stroke-color;
-    color: $reactflow-edge-stroke-color;
-
-    &:hover {
-        stroke: $reactflow-edge-stroke-color-hover;
-        color: $reactflow-edge-stroke-color-hover;
-    }
-
-    &.selected {
-        stroke: $reactflow-edge-stroke-color-selected;
-        color: $reactflow-edge-stroke-color-selected;
-    }
 }
 
 .react-flow__edge-success {
-    stroke: $eccgui-color-success-text;
-    color: $eccgui-color-success-text;
+    --#{$eccgui}-reactflow-node-color-default: #{$eccgui-color-success-text};
+    --#{$eccgui}-reactflow-node-color-hover: #{$eccgui-color-success-text};
+    --#{$eccgui}-reactflow-node-color-selected: #{$eccgui-color-success-text};
 }
 
 .react-flow__edge-warning {
-    stroke: $eccgui-color-warning-text;
-    color: $eccgui-color-warning-text;
+    --#{$eccgui}-reactflow-node-color-default: #{$eccgui-color-warning-text};
+    --#{$eccgui}-reactflow-node-color-hover: #{$eccgui-color-warning-text};
+    --#{$eccgui}-reactflow-node-color-selected: #{$eccgui-color-warning-text};
 }
 
 .react-flow__edge-danger {
-    stroke: $eccgui-color-danger-text;
-    color: $eccgui-color-danger-text;
+    --#{$eccgui}-reactflow-node-color-default: #{$eccgui-color-danger-text};
+    --#{$eccgui}-reactflow-node-color-hover: #{$eccgui-color-danger-text};
+    --#{$eccgui}-reactflow-node-color-selected: #{$eccgui-color-danger-text};
 }
 
 // Tools overlay
@@ -154,3 +252,80 @@ path.react-flow__edge-path-glow {
         transform: scale(1.75, 0.75);
     }
 }
+
+// Custom label
+
+.#{$eccgui}-graphviz__edge-label {
+    border: 0.5*$reactflow-node-border-width solid currentColor;
+    border-radius: $reactflow-node-border-radius;
+    background: #fff; // TODO color
+    color: currentColor;
+    display: inline-flex;
+    align-items: center;
+    width: auto;
+    max-width: 20rem;
+    height: 0.5 * $reactflow-node-largesize;
+    font-size: $reactflow-node-font-size;
+
+    &.#{$eccgui}-intent--primary {
+        color: $eccgui-color-primary;
+        border-color: $eccgui-color-primary;
+    }
+    &.#{$eccgui}-intent--accent {
+        color: $eccgui-color-accent;
+        border-color: $eccgui-color-accent;
+    }
+    &.#{$eccgui}-intent--success {
+        color: $eccgui-color-success-text;
+        border-color: $eccgui-color-success-text;
+    }
+    &.#{$eccgui}-intent--info {
+        color: $eccgui-color-info-text;
+        border-color: $eccgui-color-info-text;
+    }
+    &.#{$eccgui}-intent--warning {
+        color: $eccgui-color-warning-text;
+        border-color: $eccgui-color-warning-text;
+    }
+    &.#{$eccgui}-intent--danger {
+        color: $eccgui-color-danger-text;
+        border-color: $eccgui-color-danger-text;
+    }
+}
+.#{$eccgui}-graphviz__edge-label--large {
+    height: $reactflow-node-largesize;
+}
+.#{$eccgui}-graphviz__edge-label--fullwidth {
+    max-width: none;
+    width: 100%;
+}
+.#{$eccgui}-graphviz__edge-label__depiction {
+    margin: $eccgui-size-block-whitespace * 0.25;
+    flex-grow: 0;
+    flex-shrink: 0;
+    .#{$eccgui}-depiction__image {
+        height: calc(#{0.5 * $reactflow-node-largesize} - #{$eccgui-size-block-whitespace * 0.25});
+
+        .#{$eccgui}-graphviz__edge-label--large & {
+            height: calc(#{$reactflow-node-largesize} - #{$eccgui-size-block-whitespace * 0.25});
+        }
+    }
+}
+.#{$eccgui}-graphviz__edge-label__text {
+    margin: $eccgui-size-block-whitespace * 0.25;
+    flex-grow: 1;
+    flex-shrink: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+
+    .#{$eccgui}-graphviz__edge-label--fullwidth & {
+        text-align: left;
+    }
+}
+.#{$eccgui}-graphviz__edge-label__aux {
+    margin: $eccgui-size-block-whitespace * 0.25;
+    flex-grow: 0;
+    flex-shrink: 0;
+}

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

@@ -12,13 +12,17 @@ export const edgeTypes = {
     default: EdgeDefault,
     straight: EdgeDefault,
     step: EdgeStep,
-    smoothstep: EdgeStep,
-    implicitEdge: EdgeDefault,
-    importEdge: EdgeDefault,
-    subclassEdge: EdgeDefault,
-    subpropertyEdge: EdgeDefault,
-    rdftypeEdge: EdgeDefault,
-    successStep: EdgeStep,
-    warningStep: EdgeStep,
-    dangerStep: EdgeStep,
+
+    success: EdgeDefault,
+    warning: EdgeDefault,
+    danger: EdgeDefault,
+
+    implicit: EdgeDefault,
+    import: EdgeDefault,
+    subclass: EdgeDefault,
+    subproperty: EdgeDefault,
+    rdftype: EdgeDefault,
+
+    value: EdgeStep,
+    score: EdgeStep,
 };

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { ReactFlow, Tag } from "./../../../../../index";
+import { ReactFlow, EdgeLabel, EdgeLabelObject } from "./../../../../../index";
 import { ArrowHeadType, Elements, getMarkerEnd, ReactFlowProvider } from 'react-flow-renderer';
 
 import { EdgeDefault, EdgeDefaultDataProps as EdgeData } from "./../EdgeDefault";
@@ -16,6 +16,10 @@ export default {
     component: EdgeDefault,
     subcomponents: { EdgeDefaultDataProps },
     argTypes: {
+        type: {
+            control: "select",
+            options: [...(Object.keys(edgeTypes))],
+        },
     },
 } as ComponentMeta<typeof EdgeDefault>;
 
@@ -74,7 +78,7 @@ const Template: ComponentStory<typeof EdgeDefault> = (args) => (
 export const Default = Template.bind({});
 Default.args = {
     id: 'default',
-    type: 'default',
+    type: 'dangerStep',
     label: "edge",
     arrowHeadType: "arrowclosed",
     source: 'node-1',
@@ -88,21 +92,14 @@ CustomLabel.args = {
     ...Default.args,
     id: "customlabel",
     arrowHeadType: undefined,
+    label: undefined,
     data: {
         renderLabel: (
             edgeCenter: [number, number, number, number]
         ) => (
-            <foreignObject
-                width={100}
-                height={20}
-                x={edgeCenter[0] - 50}
-                y={edgeCenter[1] - 10}
-                requiredExtensions="http://www.w3.org/1999/xhtml"
-            >
-                <body>
-                    <Tag>Custom label</Tag>
-                </body>
-            </foreignObject>
+            <EdgeLabelObject edgeCenter={edgeCenter}>
+                    <EdgeLabel text="Custom label that is very long" />
+            </EdgeLabelObject>
         )
     }
 };
@@ -119,3 +116,27 @@ InverseEdge.args = {
         ),
     }
 };
+
+export const AdjustStrokeType = Template.bind({});
+AdjustStrokeType.args = {
+    ...Default.args,
+    data: {
+        strokeType: "double",
+    }
+};
+
+export const AdjustIntent = Template.bind({});
+AdjustIntent.args = {
+    ...Default.args,
+    data: {
+        intent: "warning",
+    }
+};
+
+export const AdjustHighlight = Template.bind({});
+AdjustHighlight.args = {
+    ...Default.args,
+    data: {
+        highlightColor: ["default", "alternate"]
+    }
+};

package/src/extensions/react-flow/edges/stories/EdgeLabel.stories.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { loremIpsum } from 'react-lorem-ipsum';
+import { EdgeLabel, IconButton, Badge } from "./../../../../../index";
+import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
+import { helpersArgTypes } from "../../../../../.storybook/helpers";
+
+export default {
+    title: "Extensions/React Flow/Custom EdgeLabel",
+    component: EdgeLabel,
+    argTypes: {
+        depiction: {
+            control: "select",
+            options: [...(Object.keys(canonicalIcons))],
+        },
+        actions: {
+            control: "select",
+            options: ["Not set", "Icon button", "Icon button small", "Info badge"],
+            mapping: {
+                "Not set": undefined,
+                "Icon button": <IconButton name="item-info" text="Icon button" onClick={()=>alert("Click info")} />,
+                "Icon button small": <IconButton small name="item-info" text="Icon button" onClick={()=>alert("Click info")} />,
+                "Info badge": <Badge intent="info">Info</Badge>,
+            },
+        },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+        },
+    },
+} as ComponentMeta<typeof EdgeLabel>;
+
+const Template: ComponentStory<typeof EdgeLabel> = (args) => (
+    <EdgeLabel {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    text: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 8, random: false }).toString(),
+};

package/src/extensions/react-flow/handles/HandleDefault.tsx

@@ -8,7 +8,7 @@ import {
     Handle as HandleNext,
 } from "react-flow-renderer-lts";
 import { HandleContent, HandleContentProps } from "./HandleContent";
-import { ReacFlowVersionSupportProps } from "../versionsupport";
+import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
 interface HandleExtensionProps extends ReacFlowVersionSupportProps {
     data?: HandleContentProps;
@@ -24,7 +24,7 @@ export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNe
 }
 
 export const HandleDefault = memo(({
-    flowVersion = "legacy",
+    flowVersion = useReactFlowVersion(),
     data,
     tooltip,
     children,
@@ -38,13 +38,20 @@ export const HandleDefault = memo(({
         </HandleContent>
     );
 
-    return flowVersion === "legacy" ? (
-        <HandleLegacy {...handleProps} {...tooltipTitle}>
-            { handleContent }
-        </HandleLegacy>
-    ) : (
-        <HandleNext {...handleProps} {...tooltipTitle}>
-            { handleContent }
-        </HandleNext>
-    );
+    switch (flowVersion) {
+        case "legacy":
+            return (
+                <HandleLegacy {...handleProps} {...tooltipTitle}>
+                    { handleContent }
+                </HandleLegacy>
+            );
+        case "next":
+            return (
+                <HandleNext {...handleProps} {...tooltipTitle}>
+                    { handleContent }
+                </HandleNext>
+            );
+        default:
+            return <></>;
+    }
 });

package/src/extensions/react-flow/index.ts

@@ -3,10 +3,10 @@ export { NodeContent } from "./nodes/NodeContent";
 export { NodeContentExtension } from "./nodes/NodeContentExtension";
 export { NodeTools } from "./nodes/NodeTools";
 export { nodeTypes } from "./nodes/nodeTypes";
-export { EdgeDefault } from "./edges/EdgeDefault";
 export { EdgeStep } from "./edges/EdgeStep";
 export { EdgeTools } from "./edges/EdgeTools";
 export { edgeTypes } from "./edges/edgeTypes";
+export * from "./edges/EdgeLabel";
 export { MarkerArrowClosedInverse } from "./markers/MarkerArrowClosedInverse";
 export { ReactFlowMarkers } from "./markers/ReactFlowMarkers";
 export { MiniMap } from "./minimap/MiniMap";
@@ -17,6 +17,7 @@ export type { NodeProps } from "./nodes/NodeDefault";
 export type { NodeContentProps } from "./nodes/NodeContent";
 export type { NodeContentExtensionProps } from "./nodes/NodeContentExtension";
 export type { NodeToolsProps } from "./nodes/NodeTools";
-export type { EdgeDefaultProps } from "./edges/EdgeDefault";
 export type { EdgeStepProps } from "./edges/EdgeStep";
 export type { MiniMapProps } from "./minimap/MiniMap";
+
+export * from "./edges/EdgeDefault";