@eccenca/gui-elements 24.0.0 → 24.1.0-featureimprovepublishingprocesscmem6356.0

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

@@ -22,11 +22,16 @@ type NodeContentHandleNextProps = HandleNextProps;
 
 export type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps;
 
-type NodeDimensions = {
-    width: number;
-    height: number;
+export type NodeDimensions = {
+    width?: number;
+    height?: number;
 };
 
+type ResizeDirections =
+    | { right: true; bottom?: false }
+    | { right?: false; bottom: true }
+    | { right: true; bottom: true };
+
 type IntroductionTime = {
     /**
      * The delay time in ms before the introduction animation is displayed.
@@ -210,6 +215,10 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      * width and height dimensions of the node (Optional)
      */
     nodeDimensions?: NodeDimensions;
+    /** if node is resizable, this allows direction of specificity */
+    resizeDirections?: ResizeDirections;
+    /** determines how much width a node can be resized to */
+    resizeMaxDimensions?: Partial<NodeDimensions>;
 }
 
 interface MemoHandlerLegacyProps extends HandleProps {
@@ -317,20 +326,24 @@ export function NodeContent<CONTENT_PROPS = any>({
     //handles = defaultHandles(),
     adaptHeightForHandleMinCount,
     adaptSizeIncrement = 15,
+    // FIXME: getMinimalTooltipData is just being ignored, only used in `NodeDefault`
     getMinimalTooltipData = getDefaultMinimalTooltipData,
     style = {},
     showUnconnectableHandles = false,
     animated = false,
     introductionTime = 0,
+    // resizing
     onNodeResize,
     nodeDimensions,
+    resizeDirections = { bottom: true, right: true },
+    resizeMaxDimensions,
     // forwarded props
     targetPosition = Position.Left,
     sourcePosition = Position.Right,
     isConnectable = true,
     selected,
     letPassWheelEvents = false,
-    // businessData is just being ignored
+    // FIXME: businessData is just being ignored
     businessData,
     // other props for DOM element
     ...otherDomProps
@@ -341,11 +354,16 @@ export function NodeContent<CONTENT_PROPS = any>({
 
     const { handles = defaultHandles(flowVersionCheck), ...otherProps } = otherDomProps;
 
-    const isResizeable = !!onNodeResize && minimalShape === "none";
-    const [width, setWidth] = React.useState<number>(nodeDimensions?.width ?? 0);
-    const [height, setHeight] = React.useState<number>(nodeDimensions?.height ?? 0);
+    const hasValidResizeDirection = resizeDirections.bottom || resizeDirections.right;
+    const isResizable = typeof onNodeResize === "function" && hasValidResizeDirection && minimalShape === "none";
+
+    const [width, setWidth] = React.useState<number | undefined>(nodeDimensions?.width ?? undefined);
+    const [height, setHeight] = React.useState<number | undefined>(nodeDimensions?.height ?? undefined);
+    // Keeps the initial size of the element
+    const originalSize = React.useRef<NodeDimensions>({})
+
     let zoom = 1;
-    if (isResizeable)
+    if (isResizable)
         try {
             [, , zoom] =
                 flowVersionCheck === "legacy"
@@ -371,28 +389,70 @@ export function NodeContent<CONTENT_PROPS = any>({
     handleStack[Position.Left] =
         flowVersionCheck === "legacy" ? ([] as NodeContentHandleLegacyProps[]) : ([] as NodeContentHandleNextProps[]);
 
-    // initial dimension before resize
+    const saveOriginalSize = () => {
+        const currentClassNames = nodeContentRef.current.classList;
+        if (currentClassNames.contains("was-resized") && !width && !height) {
+            currentClassNames.remove("was-resized");
+        }
+        originalSize.current.width = nodeContentRef.current.offsetWidth as number;
+        originalSize.current.height = nodeContentRef.current.offsetHeight as number;
+    }
+
     React.useEffect(() => {
-        if (!!onNodeResize && minimalShape === "none") {
-            if (!nodeDimensions) {
-                setWidth(nodeContentRef.current.offsetWidth);
-                setHeight(nodeContentRef.current.offsetHeight);
-                onNodeResize({
-                    height: nodeContentRef.current.offsetHeight,
-                    width: nodeContentRef.current.offsetWidth,
-                });
+        if(nodeContentRef.current && (!(originalSize.current.width || originalSize.current.height) || !(width || height))) {
+            saveOriginalSize();
+        }
+    }, [!!nodeContentRef.current, !(originalSize.current.width || originalSize.current.height), !(width || height)])
+
+    // Update width and height when node dimensions parameters has changed
+    React.useEffect(() => {
+        const updateWidth = nodeDimensions?.width ? validateWidth(nodeDimensions?.width) : undefined;
+        const updateHeight = nodeDimensions?.height ? validateHeight(nodeDimensions?.height) : undefined;
+        setWidth(updateWidth);
+        setHeight(updateHeight);
+    }, [nodeDimensions]);
+
+    const isResizingActive = React.useCallback((): boolean => {
+        const currentClassNames = nodeContentRef.current.classList;
+        return resizeDirections.right === currentClassNames.contains("is-resizable-horizontal") ||
+            resizeDirections.bottom === currentClassNames.contains("is-resizable-vertical");
+    }, [])
+
+    // force default size when resizing is activated but no dimensions are set
+    React.useEffect(() => {
+        const resizingActive = isResizingActive();
+
+        if (isResizable && !resizingActive) {
+            if (!width || !height) {
+                const newWidth = validateWidth(width ?? originalSize.current?.width as number);
+                const newHeight = validateHeight(height ?? originalSize.current?.height as number);
+                setWidth(newWidth);
+                setHeight(newHeight);
             }
-            nodeContentRef.current.className = nodeContentRef.current.className + " is-resizeable";
         }
-    }, [nodeContentRef, onNodeResize, minimalShape, nodeDimensions]);
+    }, [nodeContentRef.current, onNodeResize, minimalShape, resizeDirections?.bottom, resizeDirections?.right, width, height]); // need to be done everytime a property is changed and the element is re-rendered, otherwise the resizing class is lost
 
-    // update node dimensions when resized
+    // conditional enhancements for activated resizing
     React.useEffect(() => {
-        if (nodeDimensions) {
-            setWidth(nodeDimensions.width);
-            setHeight(nodeDimensions.height);
+        const currentClassNames = nodeContentRef.current.classList;
+        const resizingActive = isResizingActive();
+
+        if (isResizable && !resizingActive) {
+            if (currentClassNames.contains("is-resizable-horizontal")) {
+                currentClassNames.remove("is-resizable-horizontal");
+            }
+            if (currentClassNames.contains("is-resizable-vertical")) {
+                currentClassNames.remove("is-resizable-vertical");
+            }
+            
+            if (resizeDirections.right) {
+                currentClassNames.add("is-resizable-horizontal");
+            }
+            if (resizeDirections.bottom) {
+                currentClassNames.add("is-resizable-vertical");
+            }
         }
-    }, [nodeDimensions]);
+    }); // need to be done everytime a property is changed and the element is re-rendered, otherwise the resizing class is lost
 
     // remove introduction class
     React.useEffect(() => {
@@ -460,7 +520,14 @@ export function NodeContent<CONTENT_PROPS = any>({
     );
 
     const resizableStyles =
-        !!onNodeResize === true && minimalShape === "none" && width + height > 0 ? { width, height } : {};
+        isResizable && (width ?? 0) + (height ?? 0) > 0
+            ? {
+                  width,
+                  height,
+                  maxWidth: resizeDirections.right ? resizeMaxDimensions?.width ?? undefined : undefined,
+                  maxHeight: resizeDirections.bottom ? resizeMaxDimensions?.height ?? undefined : undefined,
+              }
+            : {};
 
     const introductionStyles =
         introductionTime && !introductionDone
@@ -470,6 +537,7 @@ export function NodeContent<CONTENT_PROPS = any>({
                   }ms`,
               } as React.CSSProperties)
             : {};
+
     const nodeContent = (
         <>
             <section
@@ -590,34 +658,84 @@ export function NodeContent<CONTENT_PROPS = any>({
         </>
     );
 
-    const resizableNode = () => (
-        <Resizable
-            className={`${eccgui}-graphviz__node__resizer`}
-            handleWrapperClass={`${eccgui}-graphviz__node__resizer--cursorhandles nodrag`}
-            size={{ height, width }}
-            enable={{ bottomRight: true }}
-            scale={zoom}
-            onResize={(_0, _1, _2, d) => {
-                if (nodeContentRef.current) {
-                    nodeContentRef.current.style.width = width + d.width + "px";
-                    nodeContentRef.current.style.height = height + d.height + "px";
+    const validateWidth = (resizedWidth: number): number | undefined => {
+        // only allow value if resize direction is allowed
+        if (!resizeDirections.right) {
+            return undefined;
+        }
+        // we need to check because there is probably a min value defined via CSS
+        const min = parseFloat(getComputedStyle(nodeContentRef.current).getPropertyValue("min-width"));
+        // we need to check for a given max value
+        const max = resizeMaxDimensions?.width ?? Infinity;
+        const validatedWidth = Math.max(Math.min(resizedWidth, max), min);
+        return validatedWidth;
+    };
+
+    const validateHeight = (resizedHeight: number): number | undefined => {
+        if (!resizeDirections.bottom) {
+            return undefined;
+        }
+        // we need to check because there is probably a min value defined via CSS
+        const min = parseFloat(getComputedStyle(nodeContentRef.current).getPropertyValue("min-height"));
+        const max = resizeMaxDimensions?.height ?? Infinity;
+        const validatedHeight = Math.max(Math.min(resizedHeight, max), min);
+        return validatedHeight;
+    };
+
+    const resizableNode = () => {
+        const size = { height: height ?? "auto", width: width ?? "auto" };
+        return (
+            <Resizable
+                className={
+                    `${eccgui}-graphviz__node__resizer` +
+                    (resizeDirections.right ? ` ${eccgui}-graphviz__node__resizer--right` : "") +
+                    (resizeDirections.bottom ? ` ${eccgui}-graphviz__node__resizer--bottom` : "")
                 }
-            }}
-            onResizeStop={(_0, _1, _2, d) => {
-                setWidth(width + d.width);
-                setHeight(height + d.height);
-                onNodeResize &&
-                    onNodeResize({
-                        height: height + d.height,
-                        width: width + d.width,
-                    });
-            }}
-        >
-            {nodeContent}
-        </Resizable>
-    );
+                handleWrapperClass={`${eccgui}-graphviz__node__resizer--cursorhandles` + " nodrag"}
+                size={size}
+                maxHeight={resizeMaxDimensions?.height ?? undefined}
+                maxWidth={resizeMaxDimensions?.width ?? undefined}
+                enable={resizeDirections.bottom && resizeDirections.right ? { bottomRight: true } : resizeDirections}
+                scale={zoom}
+                onResize={(_0, _1, _2, d) => {
+                    if (nodeContentRef.current) {
+                        const nextWidth = resizeDirections.right
+                            ? (width ?? originalSize.current.width ?? 0) + d.width
+                            : undefined;
+                        const nextHeight = resizeDirections.bottom
+                            ? (height ?? originalSize.current.height ?? 0) + d.height
+                            : undefined;
+                        if (nextWidth || nextHeight) {
+                            const currentClassNames = nodeContentRef.current.classList;
+                            currentClassNames.add("was-resized");
+                        }
+                        if (nextWidth) {
+                            nodeContentRef.current.style.width = `${nextWidth}px`;
+                        }
+                        if (nextHeight) {
+                            nodeContentRef.current.style.height = `${nextHeight}px`;
+                        }
+                    }
+                }}
+                onResizeStop={(_0, _1, _2, d) => {
+                    const nextWidth = validateWidth((width ?? originalSize.current.width ?? 0) + d.width);
+                    const nextHeight = validateHeight((height ?? originalSize.current.height ?? 0) + d.height);
+                    setWidth(nextWidth);
+                    setHeight(nextHeight);
+                    if (onNodeResize) {
+                        onNodeResize({
+                            height: nextHeight,
+                            width: nextWidth,
+                        });
+                    }
+                }}
+            >
+                {nodeContent}
+            </Resizable>
+        );
+    };
 
-    return isResizeable ? resizableNode() : nodeContent;
+    return isResizable ? resizableNode() : nodeContent;
 }
 
 const evaluateHighlightColors = (
@@ -644,7 +762,7 @@ const evaluateHighlightColors = (
                     let customColor = Color("#ffffff");
                     try {
                         customColor = Color(color);
-                    } catch (ex) {
+                    } catch {
                         // eslint-disable-next-line no-console
                         console.warn("Received invalid color for highlight: " + color);
                     }

package/src/extensions/react-flow/nodes/_nodes.scss

@@ -49,6 +49,38 @@
     &:hover {
         box-shadow: 0 0 0 6 * $reactflow-node-border-width rgba($reactflow-edge-stroke-color-selected, 0.05);
     }
+
+    &.was-resized.is-resizable-vertical {
+        max-height: unset;
+    }
+}
+
+.#{$eccgui}-graphviz__node--tiny {
+    width: $reactflow-node-basesize * 4;
+    min-height: $reactflow-node-basesize;
+    max-height: $reactflow-node-basesize * 4;
+}
+
+.#{$eccgui}-graphviz__node--small {
+    width: $reactflow-node-basesize * 5;
+    min-height: $reactflow-node-basesize;
+    max-height: $reactflow-node-basesize * 8;
+}
+
+.#{$eccgui}-graphviz__node--medium {
+    width: $reactflow-node-basesize * 8;
+    min-height: $reactflow-node-basesize;
+    max-height: $reactflow-node-basesize * 13;
+}
+
+.#{$eccgui}-graphviz__node--large {
+    width: $reactflow-node-basesize * 13;
+    min-height: $reactflow-node-basesize;
+    max-height: $reactflow-node-basesize * 13;
+}
+
+.#{$eccgui}-graphviz__node--fullwidth {
+    width: 100%;
 }
 
 .#{$eccgui}-graphviz__node--minimal-rectangular,
@@ -200,54 +232,58 @@
     background-color: $reactflow-node-background-color;
 }
 
-// Node sizes
+// Node Resizer
 
-.#{$eccgui}-graphviz__node__resizer,
-.#{$eccgui}-graphviz__node.is-resizeable {
+.#{$eccgui}-graphviz__node.is-resizable-horizontal,
+.#{$eccgui}-graphviz__node.is-resizable-vertical {
     min-width: 2.5 * $reactflow-node-basesize;
     min-height: 2.5 * $reactflow-node-basesize;
 }
 
+.#{$eccgui}-graphviz__node__resizer--cursorhandles {
+    position: absolute;
+    height: 0;
+    width: 0;
+    bottom: 0;
+    right: 0;
+    overflow: visible;
+    display: none;
+
+    & > div {
+        overflow: visible;
+        z-index: 0 !important;
+        height: $reactflow-cursor-delimiter-offset * 3 !important;
+        width: $reactflow-cursor-delimiter-offset * 3 !important;
+        top: unset !important;
+        left: unset !important;
+        bottom: -1 * $reactflow-cursor-delimiter-offset !important;
+        right: -1 * $reactflow-cursor-delimiter-offset !important;
+        border-bottom: $reactflow-node-border-width solid $reactflow-node-border-color;
+        border-right: $reactflow-node-border-width solid $reactflow-node-border-color;
+
+        .#{$eccgui}-graphviz__node__resizer--right:not(.#{$eccgui}-graphviz__node__resizer--bottom) & {
+            bottom: 0 !important;
+            border-bottom: none;
+        }
+        .#{$eccgui}-graphviz__node__resizer--bottom:not(.#{$eccgui}-graphviz__node__resizer--right) & {
+            right: 0 !important;
+            border-right: none;
+        }
+    }
+}
+
 .#{$eccgui}-graphviz__node__resizer {
+    min-width: 2.5 * $reactflow-node-basesize;
+    min-height: 2.5 * $reactflow-node-basesize;
+
     .selected &,
     &:hover {
         .#{$eccgui}-graphviz__node__resizer--cursorhandles {
-            & > div {
-                overflow: auto;
-                resize: both;
-            }
+            display: block;
         }
     }
 }
 
-.#{$eccgui}-graphviz__node--tiny:not(.is-resizeable) {
-    width: $reactflow-node-basesize * 4;
-    min-height: $reactflow-node-basesize;
-    max-height: $reactflow-node-basesize * 4;
-}
-
-.#{$eccgui}-graphviz__node--small:not(.is-resizeable) {
-    width: $reactflow-node-basesize * 5;
-    min-height: $reactflow-node-basesize;
-    max-height: $reactflow-node-basesize * 8;
-}
-
-.#{$eccgui}-graphviz__node--medium:not(.is-resizeable) {
-    width: $reactflow-node-basesize * 8;
-    min-height: $reactflow-node-basesize;
-    max-height: $reactflow-node-basesize * 13;
-}
-
-.#{$eccgui}-graphviz__node--large:not(.is-resizeable) {
-    width: $reactflow-node-basesize * 13;
-    min-height: $reactflow-node-basesize;
-    max-height: $reactflow-node-basesize * 13;
-}
-
-.#{$eccgui}-graphviz__node--fullwidth:not(.is-resizeable) {
-    width: 100%;
-}
-
 // Node border overwrites
 
 .#{$eccgui}-graphviz__node--border-solid {

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

@@ -1,28 +1,30 @@
 import { CSSProperties } from "react";
-import { Node } from "react-flow-renderer";
+import {Node, XYPosition} from "react-flow-renderer";
 import Color from "color";
+import {NodeDimensions} from "./NodeContent";
 
-type IStickyNote = {
+/** A sticky note for display in the UI as returned from the backend. */
+export interface StickyNote {
     id: string;
     content: string;
     color: string;
-    position: number[];
-    dimension: number[];
-};
+    position: XYPosition & NodeDimensions;
+}
 
 /**
  * converts a react-flow node with
- * type = "stickynote" to IStickyNote type compatible with the backend
+ * type = "stickynote" to StickyNote type compatible with the backend
  * @param node
- * @returns {IStickyNote}
+ * @returns {StickyNote}
  */
-const transformNodeToStickyNode = (node: Node<any>): IStickyNote => ({
-    id: node.id,
-    content: node.data.businessData.stickyNote!,
-    position: [node.position.x, node.position.y],
-    dimension: [node.data.nodeDimensions?.width!, node.data.nodeDimensions?.height!],
-    color: node.data.style?.borderColor!,
-});
+const transformNodeToStickyNode = (node: Node<any>): StickyNote => {
+    return {
+        id: node.id,
+        content: node.data.businessData.stickyNote!,
+        position: {x: node.position.x, y: node.position.y, width: node.data.nodeDimensions?.width, height: node.data.nodeDimensions?.height},
+        color: node.data.style?.borderColor!,
+    }
+};
 
 /**
  * takes in a hex color string and returns

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

@@ -15,9 +15,9 @@ import {
     OverflowText,
     Tag,
     TagList,
+    NodeContent,
+    NodeContentExtension,
 } from "./../../../../index";
-import { NodeContent } from "./../NodeContent";
-import { NodeContentExtension } from "./../NodeContentExtension";
 import {
     Default as ContentExtensionExample,
     SlideOutOfNode as ContentExtensionExampleSlideOut,
@@ -103,11 +103,12 @@ export default {
         },
         intent: {
             control: "select",
-            options: { "Not set": undefined, ...Definitions },
+            options: [ undefined, ...Object.values(Definitions) ],
         },
         highlightColor: {
             control: "select",
-            options: {
+            options: [ "Not set", "Default", "Alternate", "Default + alternate", "Custom (red)", "Default + Custom (red)", "Custom (green) + alternate", "Custom (purple) + custom (yellow)"],
+            mapping: {
                 "Not set": undefined,
                 Default: "default",
                 Alternate: "alternate",
@@ -118,8 +119,8 @@ export default {
                 "Custom (purple) + custom (yellow)": ["purple", "yellow"],
             },
         },
-        content: { control: "none" },
-        footerContent: { control: "none" },
+        content: { control: false },
+        footerContent: { control: false },
         isConnectable: { table: { disable: true } },
         targetPosition: { table: { disable: true } },
         sourcePosition: { table: { disable: true } },
@@ -128,18 +129,52 @@ export default {
     },
 } as Meta<typeof NodeContent>;
 
+let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856
 const NodeContentExample = (args: any) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
     const [elements, setElements] = useState([] as Elements);
-    //const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
+
+    const defaultElement = {
+        id: "example-1",
+        type: "default",
+        data: args,
+        position: { x: 50, y: 50 },
+    };
 
     useEffect(() => {
+        const sizeReset = {}
+        if (args.resizeMaxDimensions && args.resizeDirections) {
+            sizeReset["onNodeResize"] = (dimensions) => {
+                // eslint-disable-next-line no-console
+                console.log("call onNodeResize method")
+                if (args.onNodeResize) {
+                    args.onNodeResize(dimensions);
+                }
+                if (dimensions?.width || dimensions?.height) {
+                    sizeReset["menuButtons"] = <IconButton name="item-reset" onClick={() => {
+                        // eslint-disable-next-line no-console
+                        console.log("reset size");
+                        setElements([
+                            {
+                                ...defaultElement,
+                                data: {...defaultElement.data, ...sizeReset, ...{ nodeDimensions: {} }},
+                            },
+                        ] as Elements);
+
+                    }}/>;
+                }
+                setElements([
+                    {
+                        ...defaultElement,
+                        data: {...defaultElement.data, ...sizeReset, ...{ nodeDimensions: dimensions }},
+                    },
+                ] as Elements);
+            }
+        }
         setElements([
             {
-                id: "example-1",
-                type: "default",
-                data: args,
-                position: { x: 50, y: 50 },
+                ...defaultElement,
+                data: {...defaultElement.data, ...sizeReset},
             },
         ] as Elements);
     }, [args]);
@@ -166,7 +201,7 @@ const NodeContentExample = (args: any) => {
     );
 };
 
-const Template: StoryFn<typeof NodeContent> = (args) => <NodeContentExample {...args} /*some comment*/ />;
+const Template: StoryFn<typeof NodeContent> = (args) => <NodeContentExample {...args} /*some comment*/  key={++forcedUpdateKey} />;
 
 export const Default = Template.bind({});
 Default.args = {
@@ -206,7 +241,11 @@ Default.args = {
 export const Resizeable = Template.bind({});
 Resizeable.args = {
     ...Default.args,
+    resizeMaxDimensions: { width: 1000, height: 500 },
+    nodeDimensions: {},
+    resizeDirections: { bottom: true, right: true },
     onNodeResize: (dimensions) => {
+        // eslint-disable-next-line no-console
         console.log("onNodeResize", `new dimensions: ${dimensions.width}x${dimensions.height}`);
     },
 };