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

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={