@eccenca/gui-elements 23.4.2-rc.0 → 23.6.0-rc.0

package/src/cmem/react-flow/extensions/scrollOnDragHook.ts

@@ -1,63 +1,71 @@
-import {OnLoadParams, useStoreState} from "react-flow-renderer";
-import React, {MouseEvent as ReactMouseEvent, useCallback} from "react";
+import React, { MouseEvent as ReactMouseEvent, useCallback } from "react";
+import { OnLoadParams, useStoreState } from "react-flow-renderer";
 import {
     Edge,
     Node,
     OnConnectStartFunc,
     OnConnectStartParams,
     OnConnectStopFunc,
-    Transform
+    Transform,
 } from "react-flow-renderer/dist/types";
-import {ReactFlowProps} from "../ReactFlow/ReactFlow";
+
+import { ReactFlowProps } from "../ReactFlow/ReactFlow";
 
 interface IProps {
     /** The original react-flow props. */
-    reactFlowProps: ReactFlowProps
+    reactFlowProps: ReactFlowProps;
     /** If defined the canvas scrolls on all drag operations (node, selection, edge connect)
      * when the mouse pointer comes near the canvas borders or goes beyond them.
      * The `id` property of the ReactFlow component must be set in order for this to work. */
     scrollOnDrag?: {
         /** Time in milliseconds to wait before the canvas scrolls the next step. */
-        scrollInterval: number
+        scrollInterval: number;
 
         /**
          * The size of each scroll step.
          * This should be a number between 0.0 - 1.0.
          * E.g. a value of 0.25 will lead to a scroll step size of a quarter of the visible canvas. */
-        scrollStepSize: number
-    }
+        scrollStepSize: number;
+    };
 }
 
 interface ScrollState {
     // The react-flow instance
-    reactFlowInstance?: OnLoadParams
+    reactFlowInstance?: OnLoadParams;
     // The current x position of the react-flow view
-    currentX: number
+    currentX: number;
     // The current y position of the react-flow view
-    currentY: number
+    currentY: number;
     // The current Zoom level
-    currentZoom: number
+    currentZoom: number;
     // The current scroll function callback, when scrolling is active
-    scrollTaskId?: NodeJS.Timeout
+    scrollTaskId?: NodeJS.Timeout;
     // If a warning of the react-flow instance with the given ID has not been found
-    loggedWarning: boolean,
+    loggedWarning: boolean;
     // If the x-axis is currently being scrolled
-    scrollX: boolean,
+    scrollX: boolean;
     // If the y-axis is currently being scrolled
-    scrollY: boolean
+    scrollY: boolean;
     // Only if this is true the canvas will scroll when moving the mouse past it
-    draggingOperationActive: boolean
+    draggingOperationActive: boolean;
 }
 
-type ReturnType = Pick<ReactFlowProps, "onLoad" | "onNodeDragStart" | "onNodeDragStop" | "onConnectStart" | "onConnectStop" |
-    "onSelectionDragStart" | "onSelectionDragStop" | "onEdgeUpdateStart" | "onEdgeUpdateEnd">
+type ReturnType = Pick<
+    ReactFlowProps,
+    | "onLoad"
+    | "onNodeDragStart"
+    | "onNodeDragStop"
+    | "onConnectStart"
+    | "onConnectStop"
+    | "onSelectionDragStart"
+    | "onSelectionDragStop"
+    | "onEdgeUpdateStart"
+    | "onEdgeUpdateEnd"
+>;
 
 /** Handles the scrolling of the react-flow canvas on all drag operations when the mouse pointer gets near or over the borders.
  * The return value contains the wrapped react-flow callback functions that need to be handed over to the react-flow component. */
-export const useReactFlowScrollOnDrag = ({
-                                             reactFlowProps,
-                                             scrollOnDrag
-                                         }: IProps): ReturnType => {
+export const useReactFlowScrollOnDrag = ({ reactFlowProps, scrollOnDrag }: IProps): ReturnType => {
     /** Tracks the zoom on drag to border functionality. */
     const scrollState = React.useRef<ScrollState>({
         reactFlowInstance: undefined,
@@ -67,170 +75,203 @@ export const useReactFlowScrollOnDrag = ({
         loggedWarning: false,
         scrollX: false,
         scrollY: false,
-        draggingOperationActive: false
-    })
+        draggingOperationActive: false,
+    });
 
     const useStoreStateInternal = (): Transform => {
         try {
-            return useStoreState((state) => state.transform)
-        } catch(ex) {
-            if(reactFlowProps.id && scrollOnDrag) {
-                console.warn("Scroll on drag is not correctly working. Reason: " + ex)
+            return useStoreState((state) => state.transform);
+        } catch (ex) {
+            if (reactFlowProps.id && scrollOnDrag) {
+                console.warn("Scroll on drag is not correctly working. Reason: " + ex);
             }
-            return [0, 0, 1]
+            return [0, 0, 1];
         }
-    }
+    };
 
     /** The current position and zoom factor of the view port. */
-    const [currentX, currentY, currentZoom] = useStoreStateInternal()
-    scrollState.current.currentX = currentX
-    scrollState.current.currentY = currentY
-    scrollState.current.currentZoom = currentZoom
-
-    const originalOnLoad = reactFlowProps.onLoad
-    const originalOnNodeDragStart = reactFlowProps.onNodeDragStart
-    const originalOnNodeDragStop = reactFlowProps.onNodeDragStop
-    const originalOnConnectStart = reactFlowProps.onConnectStart
-    const originalOnConnectStop = reactFlowProps.onConnectStop
-    const originalOnSelectionDragStart = reactFlowProps.onSelectionDragStart
-    const originalOnSelectionDragStop = reactFlowProps.onSelectionDragStop
-    const originalOnEdgeUpdateStart = reactFlowProps.onEdgeUpdateStart
-    const originalOnEdgeUpdateEnd = reactFlowProps.onEdgeUpdateEnd
-
-    const scrollInterval = scrollOnDrag?.scrollInterval
-    const scrollStepSize = scrollOnDrag?.scrollStepSize
-
-    const reactFlowInstanceId = reactFlowProps.id
+    const [currentX, currentY, currentZoom] = useStoreStateInternal();
+    scrollState.current.currentX = currentX;
+    scrollState.current.currentY = currentY;
+    scrollState.current.currentZoom = currentZoom;
+
+    const originalOnLoad = reactFlowProps.onLoad;
+    const originalOnNodeDragStart = reactFlowProps.onNodeDragStart;
+    const originalOnNodeDragStop = reactFlowProps.onNodeDragStop;
+    const originalOnConnectStart = reactFlowProps.onConnectStart;
+    const originalOnConnectStop = reactFlowProps.onConnectStop;
+    const originalOnSelectionDragStart = reactFlowProps.onSelectionDragStart;
+    const originalOnSelectionDragStop = reactFlowProps.onSelectionDragStop;
+    const originalOnEdgeUpdateStart = reactFlowProps.onEdgeUpdateStart;
+    const originalOnEdgeUpdateEnd = reactFlowProps.onEdgeUpdateEnd;
+
+    const scrollInterval = scrollOnDrag?.scrollInterval;
+    const scrollStepSize = scrollOnDrag?.scrollStepSize;
+
+    const reactFlowInstanceId = reactFlowProps.id;
 
     const clearIntervalIfExists = React.useCallback(() => {
-        if(scrollState.current.scrollTaskId) {
-            clearInterval(scrollState.current.scrollTaskId)
+        if (scrollState.current.scrollTaskId) {
+            clearInterval(scrollState.current.scrollTaskId);
         }
-    }, [])
+    }, []);
 
-    const setScrolling = React.useCallback((active: boolean) => {
-        scrollState.current.draggingOperationActive = active
-        if(!active) {
-            clearIntervalIfExists()
-        }
-    }, [clearIntervalIfExists])
+    const setScrolling = React.useCallback(
+        (active: boolean) => {
+            scrollState.current.draggingOperationActive = active;
+            if (!active) {
+                clearIntervalIfExists();
+            }
+        },
+        [clearIntervalIfExists]
+    );
 
     // Handle scrolling if any operation is active e.g. connecting or dragging a node
     React.useEffect(() => {
-        if(scrollInterval && scrollStepSize && reactFlowInstanceId) {
+        if (scrollInterval && scrollStepSize && reactFlowInstanceId) {
             const handleScrolling = (event: MouseEvent) => {
-                const state = scrollState.current
-                if(!state.draggingOperationActive) {
-                    clearIntervalIfExists()
-                    return
+                const state = scrollState.current;
+                if (!state.draggingOperationActive) {
+                    clearIntervalIfExists();
+                    return;
                 }
                 // Check if mouse pointer is outside of the canvas
-                const canvasElement = document.getElementById(reactFlowInstanceId)
+                const canvasElement = document.getElementById(reactFlowInstanceId);
                 if (!canvasElement) {
                     if (!state.loggedWarning) {
-                        console.warn("No element found with ID " + reactFlowInstanceId)
-                        state.loggedWarning = true
+                        console.warn("No element found with ID " + reactFlowInstanceId);
+                        state.loggedWarning = true;
                     }
-                    return
+                    return;
                 }
-                const boundingRect = canvasElement.getBoundingClientRect()
-                const xStepSize = boundingRect.width * scrollStepSize
-                const yStepSize = boundingRect.height * scrollStepSize
-                if (boundingRect.top > event.clientY || boundingRect.bottom < event.clientY ||
-                    boundingRect.left > event.clientX || boundingRect.right < event.clientX) {
-                    const scrollX: number = boundingRect.left > event.clientX ?
-                        xStepSize :
-                        boundingRect.right < event.clientX ?
-                            -xStepSize :
-                            0
-                    const scrollY: number = boundingRect.top > event.clientY ?
-                        yStepSize :
-                        boundingRect.bottom < event.clientY ?
-                            -yStepSize :
-                            0
+                const boundingRect = canvasElement.getBoundingClientRect();
+                const xStepSize = boundingRect.width * scrollStepSize;
+                const yStepSize = boundingRect.height * scrollStepSize;
+                if (
+                    boundingRect.top > event.clientY ||
+                    boundingRect.bottom < event.clientY ||
+                    boundingRect.left > event.clientX ||
+                    boundingRect.right < event.clientX
+                ) {
+                    const scrollX: number =
+                        boundingRect.left > event.clientX
+                            ? xStepSize
+                            : boundingRect.right < event.clientX
+                            ? -xStepSize
+                            : 0;
+                    const scrollY: number =
+                        boundingRect.top > event.clientY
+                            ? yStepSize
+                            : boundingRect.bottom < event.clientY
+                            ? -yStepSize
+                            : 0;
                     if (state.scrollY === (scrollY !== 0) && state.scrollX === (scrollX !== 0)) {
                         // Nothing has changed, do not change interval function
-                        return
+                        return;
                     }
-                    clearIntervalIfExists()
+                    clearIntervalIfExists();
                     state.scrollTaskId = setInterval(() => {
                         state.reactFlowInstance?.setTransform({
                             x: state.currentX + scrollX,
                             y: state.currentY + scrollY,
-                            zoom: state.currentZoom
-                        })
-                    }, scrollInterval)
+                            zoom: state.currentZoom,
+                        });
+                    }, scrollInterval);
                 } else {
-                    clearIntervalIfExists()
+                    clearIntervalIfExists();
                 }
-            }
+            };
             const disableScrollingOnMouseUp = () => {
-                scrollState.current.draggingOperationActive = false
-                clearIntervalIfExists()
-            }
-            document.addEventListener('mousemove', handleScrolling);
-            document.addEventListener("mouseup", disableScrollingOnMouseUp)
+                scrollState.current.draggingOperationActive = false;
+                clearIntervalIfExists();
+            };
+            document.addEventListener("mousemove", handleScrolling);
+            document.addEventListener("mouseup", disableScrollingOnMouseUp);
             return () => {
-                document.removeEventListener('mousemove', handleScrolling)
-                document.removeEventListener("mouseup", disableScrollingOnMouseUp)
-            }
+                document.removeEventListener("mousemove", handleScrolling);
+                document.removeEventListener("mouseup", disableScrollingOnMouseUp);
+            };
         } else {
-            return undefined
+            return undefined;
         }
-    }, [scrollInterval, scrollStepSize, reactFlowInstanceId, clearIntervalIfExists])
+    }, [scrollInterval, scrollStepSize, reactFlowInstanceId, clearIntervalIfExists]);
 
     const onLoad = useCallback(
         (rfi: OnLoadParams) => {
             scrollState.current.reactFlowInstance = rfi;
-            originalOnLoad?.(rfi)
+            originalOnLoad?.(rfi);
         },
         [originalOnLoad]
     );
 
     /** Wrap original callbacks to turn scrolling on and off. */
-    const onConnectStart: OnConnectStartFunc = React.useCallback((event: ReactMouseEvent, params: OnConnectStartParams) => {
-        setScrolling(true)
-        originalOnConnectStart?.(event, params)
-    }, [originalOnConnectStart, setScrolling])
-
-    const onConnectStop: OnConnectStopFunc = React.useCallback((event: MouseEvent) => {
-        setScrolling(false)
-        originalOnConnectStop?.(event)
-    }, [originalOnConnectStop, setScrolling])
-
-    const onNodeDragStart = React.useCallback((event: ReactMouseEvent, node: Node) => {
-        setScrolling(true)
-        originalOnNodeDragStart?.(event, node)
-    }, [originalOnNodeDragStart, setScrolling])
-
-    const onNodeDragStop = React.useCallback((event: ReactMouseEvent, node: Node) => {
-        setScrolling(false)
-        originalOnNodeDragStop?.(event, node)
-    }, [originalOnNodeDragStop, setScrolling])
-
-    const onSelectionDragStart = React.useCallback((event: ReactMouseEvent, nodes: Node[]) => {
-        setScrolling(true)
-        originalOnSelectionDragStart?.(event, nodes)
-    }, [originalOnSelectionDragStart, setScrolling])
-
-    const onSelectionDragStop = React.useCallback((event: ReactMouseEvent, nodes: Node[]) => {
-        setScrolling(false)
-        originalOnSelectionDragStop?.(event, nodes)
-    }, [originalOnSelectionDragStop, setScrolling])
-
-    const onEdgeUpdateStart = React.useCallback((event: ReactMouseEvent, edge: Edge) => {
-        setScrolling(true)
-        originalOnEdgeUpdateStart?.(event, edge)
-    }, [originalOnEdgeUpdateStart, setScrolling])
-
-    const onEdgeUpdateEnd = React.useCallback((event: MouseEvent, edge: Edge) => {
-        setScrolling(false)
-        originalOnEdgeUpdateEnd?.(event, edge)
-    }, [originalOnEdgeUpdateEnd, setScrolling])
+    const onConnectStart: OnConnectStartFunc = React.useCallback(
+        (event: ReactMouseEvent, params: OnConnectStartParams) => {
+            setScrolling(true);
+            originalOnConnectStart?.(event, params);
+        },
+        [originalOnConnectStart, setScrolling]
+    );
+
+    const onConnectStop: OnConnectStopFunc = React.useCallback(
+        (event: MouseEvent) => {
+            setScrolling(false);
+            originalOnConnectStop?.(event);
+        },
+        [originalOnConnectStop, setScrolling]
+    );
+
+    const onNodeDragStart = React.useCallback(
+        (event: ReactMouseEvent, node: Node) => {
+            setScrolling(true);
+            originalOnNodeDragStart?.(event, node);
+        },
+        [originalOnNodeDragStart, setScrolling]
+    );
+
+    const onNodeDragStop = React.useCallback(
+        (event: ReactMouseEvent, node: Node) => {
+            setScrolling(false);
+            originalOnNodeDragStop?.(event, node);
+        },
+        [originalOnNodeDragStop, setScrolling]
+    );
+
+    const onSelectionDragStart = React.useCallback(
+        (event: ReactMouseEvent, nodes: Node[]) => {
+            setScrolling(true);
+            originalOnSelectionDragStart?.(event, nodes);
+        },
+        [originalOnSelectionDragStart, setScrolling]
+    );
+
+    const onSelectionDragStop = React.useCallback(
+        (event: ReactMouseEvent, nodes: Node[]) => {
+            setScrolling(false);
+            originalOnSelectionDragStop?.(event, nodes);
+        },
+        [originalOnSelectionDragStop, setScrolling]
+    );
+
+    const onEdgeUpdateStart = React.useCallback(
+        (event: ReactMouseEvent, edge: Edge) => {
+            setScrolling(true);
+            originalOnEdgeUpdateStart?.(event, edge);
+        },
+        [originalOnEdgeUpdateStart, setScrolling]
+    );
+
+    const onEdgeUpdateEnd = React.useCallback(
+        (event: MouseEvent, edge: Edge) => {
+            setScrolling(false);
+            originalOnEdgeUpdateEnd?.(event, edge);
+        },
+        [originalOnEdgeUpdateEnd, setScrolling]
+    );
 
     if (!reactFlowProps.id || !scrollOnDrag) {
         // No instance ID or config available, return empty object that will not overwrite any react-flow config parameters
-        return {}
+        return {};
     } else {
         return {
             onLoad,
@@ -241,7 +282,7 @@ export const useReactFlowScrollOnDrag = ({
             onSelectionDragStart,
             onSelectionDragStop,
             onEdgeUpdateStart,
-            onEdgeUpdateEnd
-        }
+            onEdgeUpdateEnd,
+        };
     }
-}
+};

package/src/cmem/react-flow/nodes/StickyNoteNode.tsx

@@ -1,13 +1,11 @@
 import React, { memo } from "react";
+
 import { NodeDefault, NodeProps } from "./../../../extensions/react-flow/nodes/NodeDefault";
 
 export const StickyNoteNode = memo((node: NodeProps<any>) => {
-    const {
-        data,
-        ...otherNodeProps
-    } = node;
+    const { data, ...otherNodeProps } = node;
 
-    data.minimalShape = data.minimalShape??"none";
+    data.minimalShape = data.minimalShape ?? "none";
 
     return <NodeDefault data={data} {...otherNodeProps} />;
 });

package/src/cmem/react-flow/nodes/_colors.scss

@@ -6,8 +6,8 @@
 
 @mixin nodecoloring($color) {
     .#{$eccgui}-graphviz__node {
-        border-color: $color;
         background-color: mix($color, #fff, 24%);
+        border-color: $color;
     }
     .#{$eccgui}-graphviz__node__extension--expanded {
         &.#{$eccgui}-graphviz__node__extension--slideout {
@@ -26,10 +26,10 @@
     }
     .#{$eccgui}-graphviz__node__extension--expanded {
         &.#{$eccgui}-graphviz__node__extension--slideout {
+            right: -3 * $reactflow-node-border-width;
+            left: -3 * $reactflow-node-border-width;
             border-style: double;
             border-width: 3 * $reactflow-node-border-width;
-            left: -3 * $reactflow-node-border-width;
-            right: -3 * $reactflow-node-border-width;
         }
     }
 }

package/src/cmem/react-flow/nodes/_stickynote.scss

@@ -3,33 +3,36 @@
         &:not(.#{$eccgui}-graphviz__node--minimal-rectangular),
         &:not(.#{$eccgui}-graphviz__node--minimal-circular) {
             .#{$eccgui}-graphviz__node__header {
-                color: currentColor;
                 position: absolute;
-                width: 100%;
-                height: 0px;
                 top: 0;
                 align-items: flex-start;
+                width: 100%;
+                height: 0;
                 min-height: unset;
+                color: currentcolor;
             }
             .#{$eccgui}-graphviz__node__header-label {
                 visibility: hidden;
             }
             .#{$eccgui}-graphviz__node__content {
-                color: currentColor;
-                background: transparent;
                 padding: $eccgui-size-block-whitespace * 0.5;
+                color: currentcolor;
+                background: transparent;
             }
         }
     }
     .#{$eccgui}-graphviz__node__header-menu {
         display: none;
     }
-    &.selected, &:hover {
+
+    &.selected,
+    &:hover {
         .#{$eccgui}-graphviz__node__header-menu {
             display: block;
             opacity: $eccgui-opacity-muted;
         }
     }
+
     &.selected {
         .#{$eccgui}-graphviz__node__header-menu {
             opacity: $eccgui-opacity-regular;
@@ -38,26 +41,26 @@
     .#{$eccgui}-typography__contentblock {
         h1 {
             font-size: $eccgui-size-typo-subtitle;
-            line-height: $eccgui-size-typo-subtitle-lineheight;
             font-weight: $eccgui-font-weight-bold;
+            line-height: $eccgui-size-typo-subtitle-lineheight;
         }
 
         h2 {
             font-size: $eccgui-size-typo-subtitle;
-            line-height: $eccgui-size-typo-subtitle-lineheight;
             font-weight: $eccgui-font-weight-regular;
+            line-height: $eccgui-size-typo-subtitle-lineheight;
         }
 
         h3 {
             font-size: $eccgui-size-typo-text;
-            line-height: $eccgui-size-typo-text-lineheight;
             font-weight: $eccgui-font-weight-bold;
+            line-height: $eccgui-size-typo-text-lineheight;
         }
 
         h4 {
             font-size: $eccgui-size-typo-text;
-            line-height: $eccgui-size-typo-text-lineheight;
             font-weight: $eccgui-font-weight-regular;
+            line-height: $eccgui-size-typo-text-lineheight;
         }
     }
 }

package/src/common/Intent/index.ts

@@ -2,7 +2,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export type IntentTypes = "none" | "neutral" | "primary" | "accent" | "info" | "success" | "warning" | "danger";
 
-export const Definitions: { [key: string]: IntentTypes; } = {
+export const Definitions: { [key: string]: IntentTypes } = {
     PRIMARY: "primary",
     ACCENT: "accent",
     NEUTRAL: "neutral",
@@ -11,18 +11,18 @@ export const Definitions: { [key: string]: IntentTypes; } = {
     INFO: "info",
     WARNING: "warning",
     DANGER: "danger",
-}
+};
 
 export const intentClassName = (intent: IntentTypes) => {
-    return `${eccgui}-intent--${intent}`
-}
+    return `${eccgui}-intent--${intent}`;
+};
 
 const classNamesCreation = () => {
-    const intentClasses : { [key: string]: string; } = {};
-    for (let intentDefinition in Definitions) {
+    const intentClasses: { [key: string]: string } = {};
+    for (const intentDefinition in Definitions) {
         intentClasses[intentDefinition] = intentClassName(Definitions[intentDefinition]);
     }
     return intentClasses;
-}
+};
 
 export const ClassNames = classNamesCreation();