@eccenca/gui-elements 23.2.0 → 23.3.0-rc.1

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

@@ -3,23 +3,31 @@
     --#{$eccgui}-reactflow-node-color-hover: #{$reactflow-edge-stroke-color-hover};
     --#{$eccgui}-reactflow-node-color-selected: #{$reactflow-edge-stroke-color-selected};
 
-    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;
+    // stroke: var(--#{$eccgui}-reactflow-node-color-default); // removed, probably not necessary
+
+    path[class*="react-flow__edge"],
+    rect[class*="react-flow__edge"] {
         stroke-opacity: $reactflow-edge-stroke-opacity-default;
+        shape-rendering: optimizespeed;
     }
 
     text[class*="react-flow__edge"] {
         opacity: $reactflow-edge-stroke-opacity-default;
     }
 
+    .react-flow__edge-textbg {
+        stroke: currentcolor;
+    }
+
     &:hover {
-        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: var(--#{$eccgui}-reactflow-node-color-hover); // removed, probably not necessary
+
+        path[class*="react-flow__edge"],
+        rect[class*="react-flow__edge"] {
             stroke-opacity: $reactflow-edge-stroke-opacity-hover;
         }
 
@@ -29,10 +37,11 @@
     }
 
     &.selected {
-        stroke: var(--#{$eccgui}-reactflow-node-color-selected);
         color: var(--#{$eccgui}-reactflow-node-color-selected);
+        stroke: var(--#{$eccgui}-reactflow-node-color-selected);
 
-        path[class*="react-flow__edge"], rect[class*="react-flow__edge"] {
+        path[class*="react-flow__edge"],
+        rect[class*="react-flow__edge"] {
             stroke-opacity: $reactflow-edge-stroke-opacity-selected;
         }
 
@@ -43,19 +52,19 @@
 }
 
 path.react-flow__edge-path {
-    stroke-width: 2;
-    stroke: currentColor;
+    stroke: currentcolor;
     stroke-opacity: $reactflow-edge-stroke-opacity-default;
+    stroke-width: 2;
 
     .react-flow__edge.selected & {
+        stroke: currentcolor;
         stroke-width: 2;
-        stroke: currentColor;
     }
 }
 
 path.react-flow__edge-path-glow {
-    stroke: currentColor;
     fill: none;
+    stroke: currentcolor;
     stroke-linecap: round;
 
     .react-flow__edge & {
@@ -77,9 +86,9 @@ path.react-flow__edge-path-glow {
 }
 
 .react-flow__edgeupdater {
-    stroke: currentColor;
-    fill: currentColor;
     opacity: 0;
+    fill: currentcolor;
+    stroke: currentcolor;
 
     &:hover {
         opacity: 0.05;
@@ -87,13 +96,10 @@ path.react-flow__edge-path-glow {
 }
 
 .react-flow__edge-text {
-    fill: currentColor;
+    fill: currentcolor;
     stroke: none;
 }
 
-.react-flow__edge-textbg {
-}
-
 // Stroke types
 
 path.react-flow__edge-path--stroke-solid {
@@ -111,16 +117,16 @@ path.react-flow__edge-path--stroke-dotted,
 }
 
 path.react-flow__edge-path--stroke-double {
+    filter: drop-shadow(1px 1px 1px currentcolor) drop-shadow(-1px -1px 1px currentcolor);
     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 {
+    filter: drop-shadow(1px 1px 1px currentcolor) drop-shadow(-1px -1px 1px currentcolor);
     stroke: #fff !important;
-    stroke-opacity: 1 !important;
-    filter: drop-shadow(1px 1px 1px currentColor) drop-shadow(-1px -1px 1px currentColor);
     stroke-dasharray: 5;
+    stroke-opacity: 1 !important;
 }
 
 // Intent states
@@ -165,13 +171,12 @@ g.#{$eccgui}-intent--danger {
 // Highlightning
 
 path.react-flow__edge-path-highlight {
-    stroke-opacity: 1;
+    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)));
     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)));
+    stroke-linecap: round;
+    stroke-opacity: 1;
 }
 
 .#{$eccgui}-graphviz__edge--highlight-default {
@@ -189,16 +194,8 @@ path.react-flow__edge-path-highlight {
     --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 {
-}
-
 .react-flow__edge-success {
     --#{$eccgui}-reactflow-node-color-default: #{$eccgui-color-success-text};
     --#{$eccgui}-reactflow-node-color-hover: #{$eccgui-color-success-text};
@@ -221,34 +218,29 @@ path.react-flow__edge-path-highlight {
 
 .#{$eccgui}-graphviz__edgetools-target {
     position: fixed;
+    z-index: 1000;
     width: $eccgui-size-block-whitespace * 2;
     height: $eccgui-size-block-whitespace * 2;
-    //margin-left: -1 * $eccgui-size-block-whitespace;
     margin-top: -1 * $eccgui-size-block-whitespace;
-    z-index: 1000;
-}
-
-.#{$eccgui}-graphviz__edgetools-overlay {
-    //transform: translate(#{$eccgui-size-block-whitespace}, #{-1 * $eccgui-size-block-whitespace});
 }
 
 .#{$eccgui}-graphviz__edgetools-content {
-    padding: $eccgui-size-block-whitespace * 0.5;
-    max-width: $reactflow-node-basesize * 8;
     min-width: $reactflow-node-basesize;
-    max-height: $reactflow-node-basesize * 13;
+    max-width: $reactflow-node-basesize * 8;
     min-height: $reactflow-node-basesize;
+    max-height: $reactflow-node-basesize * 13;
+    padding: $eccgui-size-block-whitespace * 0.5;
 }
 
 // Arrows
 
 .react-flow__arrowhead {
     polyline {
-        stroke-width: 1px;
+        fill: currentcolor;
+        stroke: currentcolor;
         stroke-linecap: square;
         stroke-linejoin: miter;
-        stroke: currentColor;
-        fill: currentColor;
+        stroke-width: 1px;
         transform: scale(1.75, 0.75);
     }
 }
@@ -256,54 +248,57 @@ path.react-flow__edge-path-highlight {
 // 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;
+    --#{$eccgui}-reactflow-edge-label-color: currentcolor;
+    --#{$eccgui}-reactflow-edge-label-color-background: #{$card-background-color};
+
     display: inline-flex;
     align-items: center;
     width: auto;
     max-width: 20rem;
     height: 0.5 * $reactflow-node-largesize;
     font-size: $reactflow-node-font-size;
+    color: var(--#{$eccgui}-reactflow-edge-label-color, currentColor);
+    background-color: var(--#{$eccgui}-reactflow-edge-label-color-background, #{$card-background-color});
+    border: 0.5 * $reactflow-node-border-width solid transparent;
+    border-color: var(--#{$eccgui}-reactflow-edge-label-color, currentColor);
+    border-radius: $reactflow-node-border-radius;
+
+    &.#{$eccgui}-graphviz__edge-label--loose {
+        background-color: transparent;
+        border: none;
+    }
 
     &.#{$eccgui}-intent--primary {
-        color: $eccgui-color-primary;
-        border-color: $eccgui-color-primary;
+        --#{$eccgui}-reactflow-edge-label-color: #{$eccgui-color-primary};
     }
     &.#{$eccgui}-intent--accent {
-        color: $eccgui-color-accent;
-        border-color: $eccgui-color-accent;
+        --#{$eccgui}-reactflow-edge-label-color: #{$eccgui-color-accent};
     }
     &.#{$eccgui}-intent--success {
-        color: $eccgui-color-success-text;
-        border-color: $eccgui-color-success-text;
+        --#{$eccgui}-reactflow-edge-label-color: #{$eccgui-color-success-text};
     }
     &.#{$eccgui}-intent--info {
-        color: $eccgui-color-info-text;
-        border-color: $eccgui-color-info-text;
+        --#{$eccgui}-reactflow-edge-label-color: #{$eccgui-color-info-text};
     }
     &.#{$eccgui}-intent--warning {
-        color: $eccgui-color-warning-text;
-        border-color: $eccgui-color-warning-text;
+        --#{$eccgui}-reactflow-edge-label-color: #{$eccgui-color-warning-text};
     }
     &.#{$eccgui}-intent--danger {
-        color: $eccgui-color-danger-text;
-        border-color: $eccgui-color-danger-text;
+        --#{$eccgui}-reactflow-edge-label-color: #{$eccgui-color-danger-text};
     }
 }
 .#{$eccgui}-graphviz__edge-label--large {
     height: $reactflow-node-largesize;
 }
 .#{$eccgui}-graphviz__edge-label--fullwidth {
-    max-width: none;
     width: 100%;
+    max-width: none;
 }
 .#{$eccgui}-graphviz__edge-label__depiction {
-    margin-left: 2px;
     display: inline-flex;
     flex-grow: 0;
     flex-shrink: 0;
+    margin-left: 2px;
     .#{$eccgui}-depiction__image {
         height: calc(#{0.5 * $reactflow-node-largesize} - 4px);
 
@@ -313,20 +308,20 @@ path.react-flow__edge-path-highlight {
     }
 }
 .#{$eccgui}-graphviz__edge-label__text {
-    margin: 0 $eccgui-size-block-whitespace * 0.25;
     flex-grow: 1;
     flex-shrink: 1;
-    white-space: nowrap;
+    margin: 0 $eccgui-size-block-whitespace * 0.25;
     overflow: hidden;
-    text-overflow: ellipsis;
     text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
     .#{$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;
+    margin-right: $eccgui-size-block-whitespace * 0.25;
 }

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

@@ -1,24 +1,24 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { ReactFlow, EdgeLabel, EdgeLabelObject } from "./../../../../../index";
-import { ArrowHeadType, Elements, getMarkerEnd, ReactFlowProvider } from 'react-flow-renderer';
+import React, { useCallback, useEffect, useState } from "react";
+import { ArrowHeadType, Elements, getMarkerEnd, ReactFlowProvider } from "react-flow-renderer";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
+import { EdgeLabel, EdgeLabelObject, ReactFlow } from "./../../../../../index";
 import { EdgeDefault, EdgeDefaultDataProps as EdgeData } from "./../EdgeDefault";
 import { edgeTypes } from "./../edgeTypes";
 
 const EdgeDefaultDataProps = (data: EdgeData) => {
     // this is only a mock to get it as sub element in the table
     return <></>;
-}
+};
 
 export default {
-    title: "Extensions/React Flow/Default Edge",
+    title: "Extensions/React Flow/Edge",
     component: EdgeDefault,
     subcomponents: { EdgeDefaultDataProps },
     argTypes: {
         type: {
             control: "select",
-            options: [...(Object.keys(edgeTypes))],
+            options: [...Object.keys(edgeTypes)],
         },
     },
 } as ComponentMeta<typeof EdgeDefault>;
@@ -33,7 +33,9 @@ const EdgeDefaultExample = (args: any) => {
                 id: args.source,
                 type: "default",
                 data: {
-                    label: "Default ", content: "Example content.", minimalShape: "none",
+                    label: "Default ",
+                    content: "Example content.",
+                    minimalShape: "none",
                 },
                 position: { x: 50, y: 200 },
             },
@@ -41,13 +43,15 @@ const EdgeDefaultExample = (args: any) => {
                 id: args.target,
                 type: "default",
                 data: {
-                    label: "Default ", content: "Example content.", minimalShape: "none",
+                    label: "Default ",
+                    content: "Example content.",
+                    minimalShape: "none",
                 },
                 position: { x: 600, y: 200 },
             },
             {
-                ...args
-            }
+                ...args,
+            },
         ] as Elements);
     }, [args]);
 
@@ -60,31 +64,30 @@ const EdgeDefaultExample = (args: any) => {
         [reactflowInstance]
     );
 
-    return <ReactFlowProvider>
-        <ReactFlow
-            elements={elements}
-            style={{ height: '400px' }}
-            onLoad={onLoad}
-            edgeTypes={ edgeTypes }
-            defaultZoom={1}
-        />
-    </ReactFlowProvider>
-}
+    return (
+        <ReactFlowProvider>
+            <ReactFlow
+                elements={elements}
+                style={{ height: "400px" }}
+                onLoad={onLoad}
+                edgeTypes={edgeTypes}
+                defaultZoom={1}
+            />
+        </ReactFlowProvider>
+    );
+};
 
-const Template: ComponentStory<typeof EdgeDefault> = (args) => (
-    <EdgeDefaultExample {...args} />
-);
+const Template: ComponentStory<typeof EdgeDefault> = (args) => <EdgeDefaultExample {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-    id: 'default',
-    type: 'dangerStep',
+    id: "default",
+    type: "dangerStep",
     label: "edge",
     arrowHeadType: "arrowclosed",
-    source: 'node-1',
-    target: 'node-2',
-    data: {
-    }
+    source: "node-1",
+    target: "node-2",
+    data: {},
 };
 
 export const CustomLabel = Template.bind({});
@@ -94,14 +97,12 @@ CustomLabel.args = {
     arrowHeadType: undefined,
     label: undefined,
     data: {
-        renderLabel: (
-            edgeCenter: [number, number, number, number]
-        ) => (
+        renderLabel: (edgeCenter: [number, number, number, number]) => (
             <EdgeLabelObject edgeCenter={edgeCenter}>
-                    <EdgeLabel text="Custom label that is very long" />
+                <EdgeLabel text="Custom label that is very long" />
             </EdgeLabelObject>
-        )
-    }
+        ),
+    },
 };
 
 export const InverseEdge = Template.bind({});
@@ -111,10 +112,8 @@ InverseEdge.args = {
     arrowHeadType: undefined,
     data: {
         inversePath: true,
-        markerStart: getMarkerEnd(
-            `${ArrowHeadType.ArrowClosed}-inverse` as ArrowHeadType
-        ),
-    }
+        markerStart: getMarkerEnd(`${ArrowHeadType.ArrowClosed}-inverse` as ArrowHeadType),
+    },
 };
 
 export const AdjustStrokeType = Template.bind({});
@@ -122,7 +121,7 @@ AdjustStrokeType.args = {
     ...Default.args,
     data: {
         strokeType: "double",
-    }
+    },
 };
 
 export const AdjustIntent = Template.bind({});
@@ -130,13 +129,13 @@ AdjustIntent.args = {
     ...Default.args,
     data: {
         intent: "warning",
-    }
+    },
 };
 
 export const AdjustHighlight = Template.bind({});
 AdjustHighlight.args = {
     ...Default.args,
     data: {
-        highlightColor: ["default", "alternate"]
-    }
+        highlightColor: ["default", "alternate"],
+    },
 };

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

@@ -1,6 +1,7 @@
-import React, {memo} from 'react';
+import React, { memo } from "react";
+
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { Tooltip } from "../../../index";
+import { Tooltip, TooltipProps } from "../../../index";
 
 export interface HandleContentProps {
     children?: JSX.Element | string;
@@ -8,31 +9,31 @@ export interface HandleContentProps {
      * Tooltip displayed as overlay on hover.
      */
     extendedTooltip?: JSX.Element | string;
+    /**
+     * Configure the tooltip and overwrite automatically set options.
+     */
+    tooltipProps?: Omit<TooltipProps, "content" | "children" | "renderTarget">;
 }
 
-export const HandleContent = memo(({
-    children,
-    extendedTooltip
-}: HandleContentProps) => {
-    const handleContent = !!children ? (
-        <div className={`${eccgui}-graphviz__handle__content`}>
-            { children }
-        </div>
-    ) : !!extendedTooltip ? (
+export const HandleContent = memo(({ children, extendedTooltip, tooltipProps }: HandleContentProps) => {
+    const handleContent = children ? (
+        <div className={`${eccgui}-graphviz__handle__content`}>{children}</div>
+    ) : extendedTooltip ? (
         <div className={`${eccgui}-graphviz__handle__content`} />
     ) : (
         <></>
     );
 
-    if (!!extendedTooltip) {
+    if (extendedTooltip && tooltipProps?.isOpen) {
         return (
             <Tooltip
                 content={extendedTooltip}
                 autoFocus={false}
                 enforceFocus={false}
                 openOnTargetFocus={false}
+                {...tooltipProps}
             >
-                { handleContent }
+                {handleContent}
             </Tooltip>
         );
     }