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

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

@@ -7,9 +7,24 @@ import {
     getEdgeCenter,
     EdgeText,
 } from "react-flow-renderer";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { IntentTypes, intentClassName } from "../../../common/Intent";
+import { NodeHighlightColor, evaluateHighlightColors } from "./../nodes/NodeContent";
 import { drawEdgeStraight} from "./utils";
 
 export interface EdgeDefaultDataProps {
+    /**
+     * Overwrites the default style how the edge stroke is displayed.
+     */
+    strokeType?: "solid" | "dashed" | "dotted" | "double" | "doubledashed";
+    /**
+     * Feedback state of the node.
+     */
+    intent?: IntentTypes;
+    /**
+     * Set the color of used highlights to mark the edge.
+     */
+    highlightColor?: NodeHighlightColor | [NodeHighlightColor, NodeHighlightColor];
     /**
      * Size of the "glow" effect when the edge is hovered.
      */
@@ -20,7 +35,7 @@ export interface EdgeDefaultDataProps {
      */
     inversePath?: boolean;
     /**
-     * Reference linnk to the SVG marker used for the start of the edge
+     * Reference link to the SVG marker used for the start of the edge
      */
     markerStart?: string;
     /**
@@ -49,7 +64,10 @@ export const EdgeDefault = memo(
         } = edge;
         const {
             pathGlowWidth = 10,
-            markerStart
+            markerStart,
+            strokeType,
+            intent,
+            highlightColor,
         } = data;
 
         const pathDisplay = drawSvgPath({...edgeOriginalProperties, data});
@@ -78,18 +96,38 @@ export const EdgeDefault = memo(
         ) : null);
 
         const edgeStyle = edgeOriginalProperties.style ?? {};
+        const {
+            highlightCustomPropertySettings
+        } = evaluateHighlightColors("--edge-highlight", highlightColor);
+
         return (
-            <g style={{...edgeStyle, color: edgeStyle.color || edgeStyle.stroke}}>
+            <g
+                className={createEdgeDefaultClassName({intent}, "")}
+                style={{
+                    ...edgeStyle,
+                    color: edgeStyle.color || edgeStyle.stroke
+                }}
+            >
+                { highlightColor && (
+                    <path
+                        d={pathDisplay}
+                        className={createEdgeDefaultClassName({highlightColor}, "react-flow__edge-path-highlight")}
+                        strokeWidth={pathGlowWidth}
+                        style={{
+                            ...highlightCustomPropertySettings,
+                        }}
+                    />
+                )}
                 { pathGlowWidth && (
                     <path
                         d={pathDisplay}
-                        className="react-flow__edge-path-glow"
+                        className={createEdgeDefaultClassName({}, "react-flow__edge-path-glow")}
                         strokeWidth={pathGlowWidth}
                     />
                 )}
                 <path
                     d={pathDisplay}
-                    className="react-flow__edge-path"
+                    className={createEdgeDefaultClassName({strokeType})}
                     markerStart={markerStart}
                     markerEnd={markerEnd}
                 />
@@ -98,3 +136,20 @@ export const EdgeDefault = memo(
         );
     }
 );
+
+export const createEdgeDefaultClassName = ({
+    strokeType,
+    intent,
+    highlightColor,
+}: EdgeDefaultDataProps, baseClass: string = "react-flow__edge-path") => {
+    const {
+        highlightClassNameSuffix,
+    } = evaluateHighlightColors("--edge-highlight", highlightColor);
+    return baseClass +
+    (strokeType ? ` ${baseClass}--stroke-${strokeType}` : "") +
+    (intent ? ` ${intentClassName(intent)}` : "") +
+    (highlightClassNameSuffix.length > 0
+        ? highlightClassNameSuffix.map(highlight => ` ${eccgui}-graphviz__edge--highlight-${highlight}`).join("")
+        : ""
+    );
+}

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

@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import React, { memo, useEffect, useRef } from "react";
 import { Icon, Depiction, DepictionProps, OverflowText } from "../../../index";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
@@ -81,3 +81,47 @@ export const EdgeLabel = memo(({
         </div>
     )
 });
+
+interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObjectElement> {
+    /**
+     * The `<EdgeLabel />` element that need to be displayed.
+     */
+    children: React.ReactElement<EdgeLabelProps>;
+    /**
+     * Property from the `renderLabel` callback method.
+     */
+    edgeCenter: [number, number, number, number];
+}
+
+export const EdgeLabelObject = memo(({
+    children,
+    edgeCenter,
+    ...otherForeignObjectProps
+} : EdgeLabelObjectProps) => {
+    const containerRef = useRef<SVGForeignObjectElement>(null);
+
+    useEffect(() => {
+        const labelElement = containerRef.current!.getElementsByClassName(`${eccgui}-graphviz__edge-label`);
+        if (labelElement.length > 0) {
+            const width = (labelElement[0] as HTMLElement).offsetWidth;
+            const height = (labelElement[0] as HTMLElement).offsetHeight;
+            containerRef.current!.setAttribute("width", width.toString());
+            containerRef.current!.setAttribute("height", height.toString());
+            containerRef.current!.setAttribute("x", (edgeCenter[0] - width/2).toString());
+            containerRef.current!.setAttribute("y", (edgeCenter[1] - height/2).toString());
+        }
+    })
+
+    return (
+        <foreignObject
+            ref={containerRef}
+            className={`${eccgui}-graphviz__edge-labelobject`}
+            width="1"
+            height="1"
+            {...otherForeignObjectProps}
+            requiredExtensions="http://www.w3.org/1999/xhtml"
+        >
+            { children }
+        </foreignObject>
+    )
+});

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
@@ -158,10 +256,10 @@ path.react-flow__edge-path-glow {
 // Custom label
 
 .#{$eccgui}-graphviz__edge-label {
-    border: 0.5*$reactflow-node-border-width solid $reactflow-node-border-color;
+    border: 0.5*$reactflow-node-border-width solid currentColor;
     border-radius: $reactflow-node-border-radius;
     background: #fff; // TODO color
-    color: $reactflow-node-color;
+    color: currentColor;
     display: inline-flex;
     align-items: center;
     width: auto;

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/index.ts

@@ -3,7 +3,6 @@ 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";
@@ -18,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";