@eccenca/gui-elements 23.3.0-rc.0 → 23.3.0

package/src/extensions/react-flow/handles/_handles.scss

@@ -1,63 +1,128 @@
+$eccgui-size-flow-handle: $eccgui-size-block-whitespace * 0.7;
+$eccgui-size-flow-handle-border: $eccgui-size-flow-handle * 0.4;
+
 div.react-flow__handle {
     z-index: 2;
-    width: $eccgui-size-block-whitespace * 0.5;
-    height: $eccgui-size-block-whitespace * 0.5;
+    width: $eccgui-size-flow-handle;
+    height: $eccgui-size-flow-handle;
     color: $reactflow-node-border-color;
     background-color: currentcolor;
-    border-color: currentcolor;
+    border: 2px solid currentcolor;
     border-radius: 100%;
 
+    &.eccgui-intent--primary {
+        color: $eccgui-color-primary;
+    }
+
+    &.eccgui-intent--accent {
+        color: $eccgui-color-accent;
+    }
+
+    &.eccgui-intent--success {
+        color: $eccgui-color-success-text;
+    }
+
+    &.eccgui-intent--info {
+        color: $eccgui-color-info-text;
+    }
+
+    &.eccgui-intent--warning {
+        color: $eccgui-color-warning-text;
+    }
+
+    &.eccgui-intent--danger {
+        color: $eccgui-color-danger-text;
+    }
+
     .react-flow__node-default & {
         background-color: currentcolor;
     }
 
     &::before {
         position: absolute;
-        inset: $eccgui-size-block-whitespace * -0.5;
-        z-index: 1;
+        inset: $eccgui-size-flow-handle * -0.75;
+        z-index: -1;
         display: none;
         content: " ";
-        background-color: currentcolor;
-        border: solid 1px currentcolor;
+        background-color: transparent;
+        border: solid $eccgui-size-flow-handle * 0.75 currentcolor;
         border-radius: 100%;
         opacity: 0.61;
     }
 
-    &.clickable {
+    &:is(
+        // Polyfill for FF that does not support the `:has()` pseudo selector until at least version 119 or 120
+        // usally `&:has(.#{$eccgui}-graphviz__handletools-target)` should be enough
+        // need to be re-evaluated then
+        .ffpolyfill-has-#{$eccgui}-graphviz__handletools-target,
+        div:has(.#{$eccgui}-graphviz__handletools-target)
+    ) {
         &::after {
             position: absolute;
-            inset: $eccgui-size-block-whitespace * -0.75;
-            z-index: -1;
+            inset: 0;
             display: none;
             cursor: pointer;
             content: " ";
             border-radius: 100%;
-            outline: dotted $eccgui-size-block-whitespace * 0.25 currentcolor;
+            outline: dotted $eccgui-size-flow-handle-border currentcolor;
+            outline-offset: $eccgui-size-flow-handle * 0.75 + $eccgui-size-flow-handle-border * 0.5;
+
+            .react-flow__node:hover & {
+                display: block;
+            }
         }
     }
 
     &:hover {
         &::before {
-            box-shadow: 0 0 $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.25 currentcolor;
+            box-shadow: 0 0 $eccgui-size-flow-handle $eccgui-size-flow-handle * 0.5 currentcolor;
         }
     }
 
-    &.#{eccgui}-graphviz__handle--highlight-configuration {
+    &[data-category="configuration"] {
         border-radius: 0;
 
+        &::after,
         &::before {
             border-radius: 0;
+            transform: scale(0.9);
         }
     }
 
-    .react-flow__node:hover &.connectable {
+    &[data-category="dependency"] {
+        background-color: color-mix(in srgb, currentcolor 39%, white);
+        border-radius: 0;
+        transform: rotate(45deg);
+
+        &[data-category="dependency"].react-flow__handle-left {
+            transform-origin: 125% 100%;
+        }
+
+        &[data-category="dependency"].react-flow__handle-right {
+            transform-origin: 75% -50%;
+        }
+
+        &::after,
         &::before {
-            display: block;
+            border-radius: 0;
+            transform: scale(0.9);
         }
     }
 
-    .react-flow__node:hover &.clickable {
-        &::after {
+    &[data-category="flexible"] {
+        background-color: white;
+    }
+
+    &[data-category="fixed"] {
+        border-color: currentcolor; // no change, only here to have a "fixed" rule
+    }
+
+    &[data-category="unknown"] {
+        background-color: color-mix(in srgb, currentcolor 39%, white);
+    }
+
+    .react-flow__node:hover &.connectable {
+        &::before {
             display: block;
         }
     }
@@ -85,22 +150,22 @@ div.react-flow__handle {
 }
 
 div.react-flow__handle-right {
-    right: -1 * $eccgui-size-block-whitespace * 0.5;
+    right: -1 * $eccgui-size-flow-handle;
     transform: translateX(-50%) translateY(-50%);
 }
 
 div.react-flow__handle-left {
-    left: -1 * $eccgui-size-block-whitespace * 0.5;
+    left: -1 * $eccgui-size-flow-handle;
     transform: translateX(50%) translateY(-50%);
 }
 
 div.react-flow__handle-top {
-    top: -1 * $eccgui-size-block-whitespace * 0.5;
+    top: -1 * $eccgui-size-flow-handle;
     transform: translateX(-50%) translateY(50%);
 }
 
 div.react-flow__handle-bottom {
-    bottom: -1 * $eccgui-size-block-whitespace * 0.5;
+    bottom: -1 * $eccgui-size-flow-handle;
     transform: translateX(-50%) translateY(-50%);
 }
 

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

@@ -2,7 +2,18 @@ import React, { useCallback, useEffect, useState } from "react";
 import { Elements, ReactFlowProvider } from "react-flow-renderer";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { HandleDefault, HandleProps, HandleTools, ReactFlow } from "./../../../../../index";
+import { Definitions } from "../../../../common/Intent";
+
+import {
+    Button,
+    HandleDefault,
+    HandleProps,
+    HandleTools,
+    Menu,
+    MenuItem,
+    ReactFlow,
+    SimpleDialog,
+} from "./../../../../../index";
 import { edgeTypes } from "./../../edges/edgeTypes";
 
 const HandleDefaultDataProps = (data: HandleProps["data"]) => {
@@ -14,7 +25,12 @@ export default {
     title: "Extensions/React Flow/Handle",
     component: HandleDefault,
     subcomponents: { HandleDefaultDataProps, HandleTools },
-    argTypes: {},
+    argTypes: {
+        intent: {
+            control: "select",
+            options: { "Not set": undefined, ...Definitions },
+        },
+    },
 } as Meta<typeof HandleDefault>;
 
 const HandleDefaultExample = (args: any) => {
@@ -59,6 +75,24 @@ const HandleDefaultExample = (args: any) => {
     );
 };
 
+const HandleTestMenu = () => {
+    const [menuOpen, setMenuOpen] = useState<boolean>(false);
+
+    return (
+        <>
+            <HandleTools>
+                <Menu>
+                    <MenuItem onClick={() => alert("Thank you for the click!")} text={"Click me!"} />
+                    <MenuItem onClick={() => setMenuOpen(!menuOpen)} text="Open modal" />
+                </Menu>
+            </HandleTools>
+            <SimpleDialog isOpen={menuOpen} actions={<Button onClick={() => setMenuOpen(false)}>Close</Button>}>
+                Open modal.
+            </SimpleDialog>
+        </>
+    );
+};
+
 const Template: StoryFn<typeof HandleDefault> = (args) => <HandleDefaultExample {...args} />;
 
 export const Default = Template.bind({});
@@ -66,6 +100,7 @@ Default.args = {
     type: "target",
     tooltip: "this is a target handle",
     isConnectable: true,
+    onClick: () => alert("Clicked handle."),
 };
 
 export const UsingHandleTools = Template.bind({});
@@ -73,5 +108,8 @@ UsingHandleTools.args = {
     type: "source",
     tooltip: "this is a handle with tools overlay",
     isConnectable: true,
-    children: <HandleTools>Content could be an menu, or something else.</HandleTools>,
+    children: <HandleTestMenu />,
+    data: {
+        extendedTooltip: "This is another Tooltip",
+    },
 };

package/src/extensions/react-flow/nodes/NodeContent.tsx

@@ -16,21 +16,17 @@ import { NodeContentExtensionProps } from "./NodeContentExtension";
 import { NodeProps } from "./NodeDefault";
 import { HighlightingState, NodeHighlightColor } from "./sharedTypes";
 
-// @deprecated use `NodeContentProps<any>['highlightedState']` (or import from `src/extensions/react-flow/nodes/sharedTypes`)
-export type { HighlightingState };
+type NodeContentHandleLegacyProps = HandleProps;
 
-interface NodeContentHandleLegacyProps extends HandleProps {
-    category?: "configuration";
-}
+type NodeContentHandleNextProps = HandleNextProps;
 
-// @deprecated use `NodeContentHandleProps`
-export type IHandleProps = NodeContentHandleLegacyProps;
+export type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps;
 
-export interface NodeContentHandleNextProps extends HandleNextProps {
-    category?: "configuration";
-}
+// @deprecated use `NodeContentProps<any>['highlightedState']` (or import from `src/extensions/react-flow/nodes/sharedTypes`)
+export type { HighlightingState };
 
-export type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps;
+// @deprecated use `HandleDefaultProps`
+export type IHandleProps = NodeContentHandleLegacyProps;
 
 // @deprecated use `NodeContentProps<any>['nodeDimensions']`
 export type NodeDimensions = {
@@ -274,22 +270,18 @@ const addHandles = (
     flowVersion: any = "legacy"
 ) => {
     return handles[position].map((handle: any, idx: any) => {
-        const { className, style = {}, category } = handle;
+        const { style = {}, ...otherHandleProps } = handle;
         const styleAdditions: { [key: string]: string } = {
             color: nodeStyle.borderColor ?? undefined,
         };
         styleAdditions[posDirection] = (100 / (handles[position].length + 1)) * (idx + 1) + "%";
         const handleProperties = {
-            ...handle,
+            ...otherHandleProps,
             ...{
                 position: handle.position ?? position,
                 style: { ...style, ...styleAdditions },
                 posdirection: posDirection,
                 isConnectable: typeof handle.isConnectable !== "undefined" ? handle.isConnectable : isConnectable,
-                className: category
-                    ? (className ? className + " " : "") +
-                      gethighlightedStateClasses(category, `${eccgui}-graphviz__handle`)
-                    : className,
             },
         };
         return <MemoHandler flowVersion={flowVersion} {...handleProperties} key={"handle" + idx} />;
@@ -307,7 +299,10 @@ const MemoHandler = React.memo(
         return (
             // we only test a few properties to control re-rendering
             // need to be extended if also other properties need to be changed late
-            prev.style[prev.posdirection] === next.style[next.posdirection] && prev.isConnectable === next.isConnectable
+            prev.style[prev.posdirection] === next.style[next.posdirection] &&
+            prev.isConnectable === next.isConnectable &&
+            prev.intent === next.intent &&
+            prev.category === next.category
         );
     }
 );
@@ -437,20 +432,30 @@ export function NodeContent<CONTENT_PROPS = any>({
     }, [nodeContentRef, introductionTime]);
 
     if (handles.length > 0) {
-        handles.forEach((handle) => {
-            if (handle.position) {
-                handleStack[handle.position].push(handle);
-            } else if (handle.category === "configuration") {
-                handleStack[Position.Top].push(handle);
-            } else {
-                if (handle.type === "target") {
-                    handleStack[targetPosition].push(handle);
+        handles
+            .sort((a, b) => {
+                if (a.category === "dependency") {
+                    return 1;
                 }
-                if (handle.type === "source") {
-                    handleStack[sourcePosition].push(handle);
+                if (b.category === "dependency") {
+                    return -1;
                 }
-            }
-        });
+                return 0;
+            })
+            .forEach((handle) => {
+                if (handle.position) {
+                    handleStack[handle.position].push(handle);
+                } else if (handle.category === "configuration") {
+                    handleStack[Position.Top].push(handle);
+                } else {
+                    if (handle.type === "target") {
+                        handleStack[targetPosition].push(handle);
+                    }
+                    if (handle.type === "source") {
+                        handleStack[sourcePosition].push(handle);
+                    }
+                }
+            });
     }
     const styleExpandDimensions: { [key: string]: string | number } = Object.create(null);
     if (

package/src/extensions/react-flow/nodes/stories/NodeContent.stories.tsx

@@ -1,27 +1,28 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { LoremIpsum, loremIpsum } from 'react-lorem-ipsum';
-import ReactFlow, { Elements, ReactFlowProvider } from 'react-flow-renderer';
+import React, { useCallback, useEffect, useState } from "react";
+import ReactFlow, { Elements, ReactFlowProvider } from "react-flow-renderer";
+import { LoremIpsum, loremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Definitions } from "../../../../common/Intent";
+
+import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
 import {
     Badge,
     ContextMenu,
-    MenuItem,
-    OverflowText,
     HtmlContentBlock,
     IconButton,
+    MenuItem,
+    OverflowText,
     Tag,
     TagList,
 } from "./../../../../index";
-import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
-import { Definitions } from "../../../../common/Intent";
-
 import { NodeContent } from "./../NodeContent";
-import { nodeTypes } from "./../nodeTypes";
 import { NodeContentExtension } from "./../NodeContentExtension";
 import {
     Default as ContentExtensionExample,
     SlideOutOfNode as ContentExtensionExampleSlideOut,
 } from "./NodeContentExtension.stories";
+import { nodeTypes } from "./nodeTypes";
 
 export default {
     title: "Extensions/React Flow/Node Content",
@@ -42,14 +43,32 @@ export default {
             options: ["Not set", "Text string", "OverflowText element", "Tag list"],
             mapping: {
                 "Not set": undefined,
-                "Text string": loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 8, random: false }).toString(),
-                "OverflowText element": <OverflowText>{loremIpsum({ p: 1, avgSentencesPerParagraph: 2, avgWordsPerSentence: 4, random: false }).toString()}</OverflowText>,
-                "Tag list": <TagList>{
-                    loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 5, random: false })
-                    .toString()
-                    .split(" ")
-                    .map((term) => <Tag small>{term}</Tag>)
-                }</TagList>
+                "Text string": loremIpsum({
+                    p: 1,
+                    avgSentencesPerParagraph: 1,
+                    avgWordsPerSentence: 8,
+                    random: false,
+                }).toString(),
+                "OverflowText element": (
+                    <OverflowText>
+                        {loremIpsum({
+                            p: 1,
+                            avgSentencesPerParagraph: 2,
+                            avgWordsPerSentence: 4,
+                            random: false,
+                        }).toString()}
+                    </OverflowText>
+                ),
+                "Tag list": (
+                    <TagList>
+                        {loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 5, random: false })
+                            .toString()
+                            .split(" ")
+                            .map((term) => (
+                                <Tag small>{term}</Tag>
+                            ))}
+                    </TagList>
+                ),
             },
         },
         menuButtons: {
@@ -57,14 +76,18 @@ export default {
             options: ["Not set", "Icon button", "Context Menu", "Info badge"],
             mapping: {
                 "Not set": undefined,
-                "Icon button": <IconButton name="item-info" text="Icon button" onClick={()=>alert("Click info")} />,
-                "Context Menu": <ContextMenu><MenuItem text="Context menu" /></ContextMenu>,
+                "Icon button": <IconButton name="item-info" text="Icon button" onClick={() => alert("Click info")} />,
+                "Context Menu": (
+                    <ContextMenu>
+                        <MenuItem text="Context menu" />
+                    </ContextMenu>
+                ),
                 "Info badge": <Badge intent="info">Info</Badge>,
             },
         },
         iconName: {
             control: "select",
-            options: [...(Object.keys(canonicalIcons))],
+            options: [...Object.keys(canonicalIcons)],
         },
         highlightedState: {
             control: "select",
@@ -80,20 +103,20 @@ export default {
         },
         intent: {
             control: "select",
-            options: {"Not set": undefined, ...Definitions},
+            options: { "Not set": undefined, ...Definitions },
         },
         highlightColor: {
             control: "select",
             options: {
                 "Not set": undefined,
-                "Default": "default",
-                "Alternate": "alternate",
-                "Default + alternate": ["default" , "alternate"],
+                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" },
@@ -103,7 +126,7 @@ export default {
         selected: { table: { disable: true } },
         businessData: { table: { disable: true } },
     },
-} as ComponentMeta<typeof NodeContent>;
+} as Meta<typeof NodeContent>;
 
 const NodeContentExample = (args: any) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
@@ -113,11 +136,11 @@ const NodeContentExample = (args: any) => {
     useEffect(() => {
         setElements([
             {
-                id: 'example-1',
-                type: 'default',
+                id: "example-1",
+                type: "default",
                 data: args,
                 position: { x: 50, y: 50 },
-            }
+            },
         ] as Elements);
     }, [args]);
 
@@ -130,33 +153,31 @@ const NodeContentExample = (args: any) => {
         [reactflowInstance]
     );
 
-    return <ReactFlowProvider><ReactFlow
-        elements={elements}
-        style={{ height: '400px' }}
-        onLoad={onLoad}
-        nodeTypes={ nodeTypes }
-        defaultZoom={1}
-    /></ReactFlowProvider>
-}
+    return (
+        <ReactFlowProvider>
+            <ReactFlow
+                elements={elements}
+                style={{ height: "400px" }}
+                onLoad={onLoad}
+                nodeTypes={nodeTypes}
+                defaultZoom={1}
+            />
+        </ReactFlowProvider>
+    );
+};
 
-const Template: ComponentStory<typeof NodeContent> = (args) => (
-    <NodeContentExample {...args} /*some comment*/ />
-);
+const Template: StoryFn<typeof NodeContent> = (args) => <NodeContentExample {...args} /*some comment*/ />;
 
 export const Default = Template.bind({});
 Default.args = {
-    label: 'Node title',
+    label: "Node title",
     content: (
         <HtmlContentBlock>
             <h4>Node body</h4>
             <LoremIpsum p={4} avgSentencesPerParagraph={3} random={false} />
         </HtmlContentBlock>
     ),
-    footerContent: (
-        <OverflowText passDown>
-            Node footer with some text information.
-        </OverflowText>
-    ),
+    footerContent: <OverflowText passDown>Node footer with some text information.</OverflowText>,
     contentExtension: undefined,
     minimalShape: "none",
     getMinimalTooltipData: (node: any) => {
@@ -165,7 +186,7 @@ Default.args = {
             content: node.data?.content,
             iconName: node.data?.iconName,
             depiction: node.data?.depiction,
-        }
+        };
     },
     handles: [
         {
@@ -174,8 +195,8 @@ Default.args = {
         },
         {
             type: "source",
-            data: {extendedTooltip: "this is a source handle"}
-        }
+            data: { extendedTooltip: "this is a source handle" },
+        },
     ],
     onNodeResize: false, // workaround that storybook do not automatically include empty handle function
 };
@@ -183,5 +204,7 @@ Default.args = {
 export const Resizeable = Template.bind({});
 Resizeable.args = {
     ...Default.args,
-    onNodeResize: (dimensions) => { console.log('onNodeResize', `new dimensions: ${dimensions.width}x${dimensions.height}`); },
-}
+    onNodeResize: (dimensions) => {
+        console.log("onNodeResize", `new dimensions: ${dimensions.width}x${dimensions.height}`);
+    },
+};

package/src/extensions/react-flow/nodes/stories/NodeDefault.stories.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Elements } from "react-flow-renderer";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { ReactFlow } from "./../../../../cmem";
 import { NodeContent } from "./../NodeContent";
 import { NodeDefault } from "./../NodeDefault";
-import { nodeTypes } from "./../nodeTypes";
 import { Default as NodeContentExample } from "./NodeContent.stories";
+import { nodeTypes } from "./nodeTypes";
 
 export default {
     title: "Extensions/React Flow/Node",
@@ -96,7 +96,7 @@ export default {
             description: "selector for specifying an element as a drag handle",
         },
     },
-} as ComponentMeta<typeof NodeDefault>;
+} as Meta<typeof NodeDefault>;
 
 const NodeDefaultExample = (args: any) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
@@ -127,7 +127,7 @@ const NodeDefaultExample = (args: any) => {
     );
 };
 
-const Template: ComponentStory<typeof NodeDefault> = (args) => <NodeDefaultExample {...args} /*some comment*/ />;
+const Template: StoryFn<typeof NodeDefault> = (args) => <NodeDefaultExample {...args} /*some comment*/ />;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/extensions/react-flow/nodes/stories/nodeTypes.ts

@@ -0,0 +1,11 @@
+import { nodeTypes as nodeTypesGraph } from "./../../../../cmem/react-flow/configuration/graph";
+import { nodeTypes as nodeTypesLinking } from "./../../../../cmem/react-flow/configuration/linking";
+import { nodeTypes as nodeTypesUnspecified } from "./../../../../cmem/react-flow/configuration/unspecified";
+import { nodeTypes as nodeTypesWorkflow } from "./../../../../cmem/react-flow/configuration/workflow";
+
+export const nodeTypes = {
+    ...nodeTypesUnspecified,
+    ...nodeTypesWorkflow,
+    ...nodeTypesLinking,
+    ...nodeTypesGraph,
+};