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

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

@@ -1,72 +1,87 @@
 div.react-flow__handle {
-    color: $reactflow-node-border-color;
-    background-color: currentColor;
-    border-color: currentColor;
+    z-index: 2;
     width: $eccgui-size-block-whitespace * 0.5;
     height: $eccgui-size-block-whitespace * 0.5;
-    z-index: 2;
+    color: $reactflow-node-border-color;
+    background-color: currentcolor;
+    border-color: currentcolor;
     border-radius: 100%;
 
     .react-flow__node-default & {
-        background-color: currentColor;
+        background-color: currentcolor;
     }
 
-    &:before {
-        content: " ";
+    &::before {
         position: absolute;
-        //width: $eccgui-size-block-whitespace;
-        //height: $eccgui-size-block-whitespace;
-        top: $eccgui-size-block-whitespace * -0.5;
-        left: $eccgui-size-block-whitespace * -0.5;
-        bottom: $eccgui-size-block-whitespace * -0.5;
-        right: $eccgui-size-block-whitespace * -0.5;
-        opacity: 0.61;
+        inset: $eccgui-size-block-whitespace * -0.5;
+        z-index: 1;
         display: none;
-        background-color: currentColor;
-        border: solid 1px currentColor;
+        content: " ";
+        background-color: currentcolor;
+        border: solid 1px currentcolor;
         border-radius: 100%;
+        opacity: 0.61;
+    }
+
+    &.clickable {
+        &::after {
+            position: absolute;
+            inset: $eccgui-size-block-whitespace * -0.75;
+            z-index: -1;
+            display: none;
+            cursor: pointer;
+            content: " ";
+            border-radius: 100%;
+            outline: dotted $eccgui-size-block-whitespace * 0.25 currentcolor;
+        }
     }
 
     &:hover {
-        &:before {
-            box-shadow: 0 0 $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.25 currentColor;
+        &::before {
+            box-shadow: 0 0 $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.25 currentcolor;
         }
     }
 
     &.#{eccgui}-graphviz__handle--highlight-configuration {
         border-radius: 0;
 
-        &:before {
+        &::before {
             border-radius: 0;
         }
     }
 
     .react-flow__node:hover &.connectable {
-        &:before {
+        &::before {
             display: block;
         }
     }
 
-    &.react-flow__handle-connecting:hover, &.invalid-handle {
+    .react-flow__node:hover &.clickable {
+        &::after {
+            display: block;
+        }
+    }
+
+    &.react-flow__handle-connecting:hover,
+    &.invalid-handle {
         color: $eccgui-color-danger-text;
-        &:before {
+
+        &::before {
             display: block;
         }
     }
 
-    &.react-flow__handle-valid:hover, &.valid-handle {
+    &.react-flow__handle-valid:hover,
+    &.valid-handle {
         color: $eccgui-color-success-text;
     }
 }
 
 .#{$eccgui}-graphviz__handle__content {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    cursor: help;
+    inset: 0;
     overflow: hidden;
+    cursor: help;
 }
 
 div.react-flow__handle-right {
@@ -93,28 +108,22 @@ div.react-flow__handle-bottom {
 .#{$eccgui}-graphviz__node--minimal-circular {
     .react-flow__node:not(.selected) & {
         & ~ .react-flow__handle {
-            top: 50%;
-            left: $reactflow-node-basesize * 0.5;
-            right: auto;
-            bottom: auto;
-            transform: translateX(-50%) translateY(-50%);
+            inset: 50% auto auto $reactflow-node-basesize * 0.5;
             z-index: 0;
-            opacity: 0;
-            height: $reactflow-node-basesize;
             width: $reactflow-node-basesize;
+            height: $reactflow-node-basesize;
+            opacity: 0;
+            transform: translateX(-50%) translateY(-50%);
         }
     }
 
     & ~ .react-flow__handle:not(.connectable) {
-        top: 50%;
-        left: $reactflow-node-basesize * 0.5;
-        right: auto;
-        bottom: auto;
-        transform: translateX(-50%) translateY(-50%);
+        inset: 50% auto auto $reactflow-node-basesize * 0.5;
         z-index: 0;
-        opacity: 0;
-        height: $reactflow-node-basesize;
         width: $reactflow-node-basesize;
+        height: $reactflow-node-basesize;
+        opacity: 0;
+        transform: translateX(-50%) translateY(-50%);
     }
 }
 
@@ -132,23 +141,34 @@ div.react-flow__handle-bottom {
 
 .#{$eccgui}-graphviz__node--hidehandles {
     & ~ .react-flow__handle:not(.connectable) {
-        height: 1px;
+        z-index: -1;
         width: 1px;
+        height: 1px;
         visibility: hidden;
         border: none;
-        z-index: -1;
 
         &.react-flow__handle-top {
             top: 0;
         }
+
         &.react-flow__handle-right {
             right: 0;
         }
+
         &.react-flow__handle-bottom {
             bottom: 0;
         }
+
         &.react-flow__handle-left {
             left: 0;
         }
     }
 }
+
+.#{$eccgui}-graphviz__handletools-target {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}

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

@@ -1,21 +1,21 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { ReactFlow, HandleDefault, HandleProps } from "./../../../../../index";
-import { Elements, ReactFlowProvider } from 'react-flow-renderer';
+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 { edgeTypes } from "./../../edges/edgeTypes";
 
 const HandleDefaultDataProps = (data: HandleProps["data"]) => {
     // this is only a mock to get it as sub element in the table
     return <>{data.extendedTooltip}</>;
-}
+};
 
 export default {
-    title: "Extensions/React Flow/Default Handle",
+    title: "Extensions/React Flow/Handle",
     component: HandleDefault,
-    subcomponents: { HandleDefaultDataProps },
-    argTypes: {
-    },
-} as ComponentMeta<typeof HandleDefault>;
+    subcomponents: { HandleDefaultDataProps, HandleTools },
+    argTypes: {},
+} as Meta<typeof HandleDefault>;
 
 const HandleDefaultExample = (args: any) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
@@ -30,9 +30,7 @@ const HandleDefaultExample = (args: any) => {
                     label: "Default ",
                     content: "Example content.",
                     minimalShape: "none",
-                    handles: [
-                        { ...args }
-                    ],
+                    handles: [{ ...args }],
                 },
                 position: { x: 50, y: 200 },
             },
@@ -48,24 +46,32 @@ const HandleDefaultExample = (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 HandleDefault> = (args) => (
-    <HandleDefaultExample {...args} />
-);
+const Template: StoryFn<typeof HandleDefault> = (args) => <HandleDefaultExample {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
     type: "target",
     tooltip: "this is a target handle",
-    isConnectable: false,
+    isConnectable: true,
+};
+
+export const UsingHandleTools = Template.bind({});
+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>,
 };

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

@@ -7,6 +7,8 @@ export * from "./nodes/NodeContentExtension";
 export * from "./nodes/NodeTools";
 export * from "./nodes/nodeUtils";
 export * from "./handles/HandleDefault";
+export * from "./handles/HandleContent";
+export * from "./handles/HandleTools";
 export * from "./edges/EdgeDefault";
 export * from "./edges/EdgeStep";
 export * from "./edges/EdgeTools";

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

@@ -38,6 +38,23 @@ export type NodeDimensions = {
     height: number;
 };
 
+type IntroductionTime = {
+    /**
+     * The delay time in ms before the introduction animation is displayed.
+     * Until the animation starts the node is invisible.
+     */
+    delay?: number;
+    /**
+     * The time in ms the introdcution animation runs.
+     */
+    run: number;
+    /**
+     * Animation used for the visual introduction.
+     * `outline` is used as default animation.
+     */
+    animation?: "landing" | "outline";
+};
+
 interface NodeContentData<CONTENT_PROPS = any> {
     /**
      * Name of icon that should be displayed before the node label.
@@ -167,6 +184,10 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      * The node is displayed with some animated shadow for highlighting purposes.
      */
     animated?: boolean;
+    /**
+     * Time in ms used for a short animation of the node to visualize it was added or updated.
+     */
+    introductionTime?: number | IntroductionTime;
 
     /** Additional data stored in the node. */
     businessData?: NODE_DATA;
@@ -324,6 +345,7 @@ export function NodeContent<CONTENT_PROPS = any>({
     style = {},
     showUnconnectableHandles = false,
     animated = false,
+    introductionTime = 0,
     onNodeResize,
     nodeDimensions,
     // forwarded props
@@ -386,7 +408,7 @@ export function NodeContent<CONTENT_PROPS = any>({
         }
     }, [nodeContentRef, onNodeResize, minimalShape, nodeDimensions]);
 
-    //update node dimensions when resized
+    // update node dimensions when resized
     React.useEffect(() => {
         if (nodeDimensions) {
             setWidth(nodeDimensions.width);
@@ -394,6 +416,26 @@ export function NodeContent<CONTENT_PROPS = any>({
         }
     }, [nodeDimensions]);
 
+    // remove introduction class
+    React.useEffect(() => {
+        if (nodeContentRef && introductionTime) {
+            const timeDelay = typeof introductionTime === "object" ? introductionTime.delay ?? 0 : 0;
+            const timeRun = typeof introductionTime === "object" ? introductionTime.run : introductionTime;
+            setTimeout(() => {
+                nodeContentRef.current.className = nodeContentRef.current.className.replace(
+                    `${eccgui}-graphviz__node--introduction`,
+                    `${eccgui}-graphviz__node--introduction-runs`
+                );
+            }, timeDelay);
+            setTimeout(() => {
+                nodeContentRef.current.className = nodeContentRef.current.className.replace(
+                    `${eccgui}-graphviz__node--introduction-runs`,
+                    ""
+                );
+            }, timeDelay + timeRun);
+        }
+    }, [nodeContentRef, introductionTime]);
+
     if (handles.length > 0) {
         handles.forEach((handle) => {
             if (handle.position) {
@@ -430,12 +472,26 @@ export function NodeContent<CONTENT_PROPS = any>({
 
     const resizableStyles =
         !!onNodeResize === true && minimalShape === "none" && width + height > 0 ? { width, height } : {};
+
+    const introductionStyles = introductionTime
+        ? ({
+              "--node-introduction-time": `${
+                  typeof introductionTime === "object" ? introductionTime.run : introductionTime
+              }ms`,
+          } as React.CSSProperties)
+        : {};
     const nodeContent = (
         <>
             <section
                 ref={nodeContentRef}
                 {...otherProps}
-                style={{ ...style, ...highlightCustomPropertySettings, ...styleExpandDimensions, ...resizableStyles }}
+                style={{
+                    ...style,
+                    ...highlightCustomPropertySettings,
+                    ...styleExpandDimensions,
+                    ...resizableStyles,
+                    ...introductionStyles,
+                }}
                 className={
                     `${eccgui}-graphviz__node` +
                     ` ${eccgui}-graphviz__node--${size}` +
@@ -452,9 +508,13 @@ export function NodeContent<CONTENT_PROPS = any>({
                         ? " " + gethighlightedStateClasses(highlightedState, `${eccgui}-graphviz__node`)
                         : "") +
                     (animated ? ` ${eccgui}-graphviz__node--animated` : "") +
+                    (introductionTime ? ` ${eccgui}-graphviz__node--introduction` : "") +
                     (showUnconnectableHandles === false ? ` ${eccgui}-graphviz__node--hidehandles` : "") +
                     (letPassWheelEvents === false ? ` nowheel` : "")
                 }
+                data-introduction-animation={
+                    typeof introductionTime === "object" ? introductionTime.animation : undefined
+                }
             >
                 <header
                     className={