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

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 = {
@@ -38,6 +34,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 +180,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;
@@ -253,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} />;
@@ -286,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
         );
     }
 );
@@ -324,6 +340,7 @@ export function NodeContent<CONTENT_PROPS = any>({
     style = {},
     showUnconnectableHandles = false,
     animated = false,
+    introductionTime = 0,
     onNodeResize,
     nodeDimensions,
     // forwarded props
@@ -386,7 +403,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,21 +411,51 @@ 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) {
-                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 (
@@ -430,12 +477,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 +513,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={