@eccenca/gui-elements 23.1.0-rc.1 → 23.1.0-rc.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

@@ -0,0 +1,127 @@
+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";
+import { IntentTypes, intentClassName } from "../../../common/Intent";
+
+export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Depiction element displayed left from the label.
+     */
+    depiction?: ValidIconName | React.ReactElement<DepictionProps>;
+    /**
+     * Label of the edge.
+     * Cannot overflow the parent container.
+     */
+    text: string | JSX.Element;
+    /**
+     * One or multiple other elements displayed right from label.
+     */
+    actions?: JSX.Element | JSX.Element[];
+    /**
+     * The element is increased in its size.
+     */
+    large?: boolean;
+    /**
+     * Stretches the label component to the full available width.
+     */
+    fullWidth?: boolean;
+    /**
+     * Add a info state to the label, visualized by color.
+     */
+    intent?: IntentTypes;
+}
+
+export const EdgeLabel = memo(({
+    depiction,
+    text,
+    actions,
+    large,
+    fullWidth,
+    intent,
+    ...otherDivProps
+} : EdgeLabelProps) => {
+
+    const depEl = (!!depiction && typeof depiction === "string")
+        ? <Depiction image={<Icon name={depiction as ValidIconName} />} />
+        : depiction;
+
+    return (
+        <div
+            className={
+                `${eccgui}-graphviz__edge-label` +
+                (large ? ` ${eccgui}-graphviz__edge-label--large` : "") +
+                (fullWidth ? ` ${eccgui}-graphviz__edge-label--fullwidth` : "") +
+                (!!intent ? ` ${intentClassName(intent)}` : '')
+            }
+            {...otherDivProps}
+        >
+            {!!depEl && (
+                <div className={`${eccgui}-graphviz__edge-label__depiction`}>
+                    {
+                        React.cloneElement(depEl, {
+                            padding: "tiny",
+                            ratio: "1:1",
+                            resizing: "contain",
+                            forceInlineSvg: true,
+                            border: false,
+                            backgroundColor: undefined,
+                        })
+                    }
+                </div>
+            )}
+            <div className={`${eccgui}-graphviz__edge-label__text`}>
+                { typeof text === "string" ? <OverflowText>{ text }</OverflowText> : text }
+            </div>
+            {!!actions && (
+                <div className={`${eccgui}-graphviz__edge-label__aux`}>
+                    { actions }
+                </div>
+            )}
+        </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,33 +1,42 @@
 .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 {
+    stroke: var(--#{$eccgui}-reactflow-node-color-default);
+    color: var(--#{$eccgui}-reactflow-node-color-default);
+
+    path[class*="react-flow__edge"], rect[class*="react-flow__edge"] {
         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;
+    text[class*="react-flow__edge"] {
+        opacity: $reactflow-edge-stroke-opacity-default;
     }
 
     &:hover {
-        path, rect {
+        stroke: var(--#{$eccgui}-reactflow-node-color-hover);
+        color: var(--#{$eccgui}-reactflow-node-color-hover);
+
+        path[class*="react-flow__edge"], rect[class*="react-flow__edge"] {
             stroke-opacity: $reactflow-edge-stroke-opacity-hover;
         }
 
-        text {
+        text[class*="react-flow__edge"] {
             opacity: $reactflow-edge-stroke-opacity-hover;
         }
     }
 
     &.selected {
-        path, rect {
+        stroke: var(--#{$eccgui}-reactflow-node-color-selected);
+        color: var(--#{$eccgui}-reactflow-node-color-selected);
+
+        path[class*="react-flow__edge"], rect[class*="react-flow__edge"] {
             stroke-opacity: $reactflow-edge-stroke-opacity-selected;
         }
 
-        text {
+        text[class*="react-flow__edge"] {
             opacity: $reactflow-edge-stroke-opacity-selected;
         }
     }
@@ -36,6 +45,7 @@
 path.react-flow__edge-path {
     stroke-width: 2;
     stroke: currentColor;
+    stroke-opacity: $reactflow-edge-stroke-opacity-default;
 
     .react-flow__edge.selected & {
         stroke-width: 2;
@@ -45,13 +55,19 @@ path.react-flow__edge-path {
 
 path.react-flow__edge-path-glow {
     stroke: currentColor;
-    stroke-opacity: 0;
     fill: none;
     stroke-linecap: round;
 
-    .react-flow__edge:hover &,
+    .react-flow__edge & {
+        stroke-opacity: 0;
+    }
+
+    .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,81 @@ 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-left: 2px;
+    display: inline-flex;
+    flex-grow: 0;
+    flex-shrink: 0;
+    .#{$eccgui}-depiction__image {
+        height: calc(#{0.5 * $reactflow-node-largesize} - 4px);
+
+        .#{$eccgui}-graphviz__edge-label--large & {
+            height: calc(#{$reactflow-node-largesize} - 4px);
+        }
+    }
+}
+.#{$eccgui}-graphviz__edge-label__text {
+    margin: 0 $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-right: $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"]
+    }
+};