@eccenca/gui-elements 23.0.0-rc.2 → 23.0.0-rc.3-unofficial.0

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

@@ -1,13 +1,12 @@
 import React from "react";
-import {
-    Position
-} from "react-flow-renderer";
+import { Position, useStoreState } from "react-flow-renderer";
 import { Icon, Tooltip } from "../../../index";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import {ValidIconName} from "../../../components/Icon/canonicalIconNames";
+import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
 import { HandleDefault, HandleProps } from "./../handles/HandleDefault";
 import { NodeProps } from "./NodeDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
+import { Resizable } from "re-resizable";
 
 export type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
 
@@ -15,6 +14,11 @@ export interface IHandleProps extends HandleProps {
     category?: "configuration";
 }
 
+export type NodeDimensions = {
+    width: number;
+    height: number;
+};
+
 interface NodeContentData<CONTENT_PROPS = any> {
     /**
      * Name of icon that should be displayed before the node label.
@@ -37,9 +41,15 @@ interface NodeContentData<CONTENT_PROPS = any> {
      * Content extension, displayed at the bottom side of a node.
      */
     contentExtension?: React.ReactElement<NodeContentExtensionProps>;
+    /**
+     * If submitted then the node will display footer element.
+     */
+    footerContent?: React.ReactNode;
 }
 
-export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends NodeContentData, React.HTMLAttributes<HTMLDivElement> {
+export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
+    extends NodeContentData,
+        React.HTMLAttributes<HTMLDivElement> {
     /**
      * Size of the node.
      * If `minimalShape` is not set to `none`then the configured size definition is only used for the selected node state.
@@ -67,7 +77,10 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
     /**
      * Set of defined buttons and icons that can be displayed.
      */
-    executionButtons?: (adjustedContentProps: Partial<NODE_CONTENT_PROPS>, setAdjustedContentProps: React.Dispatch<React.SetStateAction<Partial<NODE_CONTENT_PROPS>>>) => React.ReactElement<NODE_CONTENT_PROPS>;
+    executionButtons?: (
+        adjustedContentProps: Partial<NODE_CONTENT_PROPS>,
+        setAdjustedContentProps: React.Dispatch<React.SetStateAction<Partial<NODE_CONTENT_PROPS>>>
+    ) => React.ReactElement<NODE_CONTENT_PROPS>;
     /**
      * Can be used for permanent action button or context menu.
      * It is displayed at the node header right to the label.
@@ -98,7 +111,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
     /**
      * The node is displayed with some animated shadow for highlighting purposes.
      */
-    animated?:boolean;
+    animated?: boolean;
 
     /** Additional data stored in the node. */
     businessData?: NODE_DATA;
@@ -130,19 +143,24 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * If this is allowed scrolling inside a node is not possible.
      */
     letPassWheelEvents?: boolean;
+    /**
+     * When set to true, allows nodes to be resized by dragging edges and sides
+     */
+    onNodeResize?: (data: NodeDimensions) => void;
+    /**
+     * width and height dimensions of the node (Optional)
+     */
+    nodeDimensions?: NodeDimensions;
 }
 
 interface MemoHandlerProps extends HandleProps {
-     posdirection: string;
-     style: {
-        [key:string]: string | undefined
-     }
+    posdirection: string;
+    style: {
+        [key: string]: string | undefined;
+    };
 }
 
-const defaultHandles = [
-    { type: "target" },
-    { type: "source" },
-] as IHandleProps[];
+const defaultHandles = [{ type: "target" }, { type: "source" }] as IHandleProps[];
 
 const getDefaultMinimalTooltipData = (node: any) => {
     return {
@@ -150,56 +168,56 @@ const getDefaultMinimalTooltipData = (node: any) => {
         content: node.data?.content,
         iconName: node.data?.iconName,
         depiction: node.data?.depiction,
-    }
-}
+    };
+};
 
 const addHandles = (handles: any, position: any, posDirection: any, isConnectable: any, nodeStyle: any) => {
     return handles[position].map((handle: any, idx: any) => {
-        const {
-            className,
-            style = {},
-            category,
-        } = handle;
-        const styleAdditions : {[key: string]: string}= {
-            color: nodeStyle.borderColor ?? undefined
-        }
-        styleAdditions[posDirection] = (100 / (handles[position].length + 1) * (idx + 1)) + "%";
+        const { className, style = {}, category } = handle;
+        const styleAdditions: { [key: string]: string } = {
+            color: nodeStyle.borderColor ?? undefined,
+        };
+        styleAdditions[posDirection] = (100 / (handles[position].length + 1)) * (idx + 1) + "%";
         const handleProperties = {
             ...handle,
             ...{
                 position: handle.position ?? position,
-                style: { ...style, ...styleAdditions},
+                style: { ...style, ...styleAdditions },
                 posdirection: posDirection,
                 isConnectable: typeof handle.isConnectable !== "undefined" ? handle.isConnectable : isConnectable,
-                className: !!category ? (className?className+" ":"") + gethighlightedStateClasses(category, `${eccgui}-graphviz__handle`) : className,
-            }
+                className: !!category
+                    ? (className ? className + " " : "") +
+                      gethighlightedStateClasses(category, `${eccgui}-graphviz__handle`)
+                    : className,
+            },
         };
-        return (
-            <MemoHandler {...handleProperties} key={"handle" + idx} />
-        );
+        return <MemoHandler {...handleProperties} key={"handle" + idx} />;
     });
- }
+};
 
 const imgWithTooltip = (imgEl: any, tooltipText: any) => {
     if (!!tooltipText) {
-        return <Tooltip content={tooltipText}><span>{imgEl}</span></Tooltip>;
+        return (
+            <Tooltip content={tooltipText}>
+                <span>{imgEl}</span>
+            </Tooltip>
+        );
     }
 
     return imgEl;
-}
+};
 
 export const gethighlightedStateClasses = (state: any, baseClassName: any) => {
     let hightlights = typeof state === "string" ? [state] : state;
     //@ts-ignore
-    return hightlights.map(item => `${baseClassName}--highlight-${item}`).join(' ');
-}
+    return hightlights.map((item) => `${baseClassName}--highlight-${item}`).join(" ");
+};
 
 const MemoHandler = React.memo(
     (props: MemoHandlerProps) => <HandleDefault {...props} />,
     (prev, next) => {
-      const styleHasChanged =
-        prev.style[prev.posdirection] === next.style[next.posdirection];
-      return styleHasChanged;
+        const styleHasChanged = prev.style[prev.posdirection] === next.style[next.posdirection];
+        return styleHasChanged;
     }
 );
 
@@ -207,130 +225,199 @@ const MemoHandler = React.memo(
  * The `NodeContent` element manages the main view of how a node is displaying which content.
  * This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
  */
- export function NodeContent <CONTENT_PROPS = any>({
-     iconName,
-     depiction,
-     typeLabel,
-     label,
-     showExecutionButtons = true,
-     executionButtons,
-     menuButtons,
-     content,
-     contentExtension,
-     size = "small",
-     minimalShape = "circular",
-     highlightedState,
-     handles = defaultHandles,
-     adaptHeightForHandleMinCount,
-     adaptSizeIncrement = 15,
-     getMinimalTooltipData = getDefaultMinimalTooltipData,
-     style = {},
-     showUnconnectableHandles = false,
-     animated = false,
-     // forwarded props
-     targetPosition = Position.Left,
-     sourcePosition = Position.Right,
-     isConnectable = true,
-     selected,
-     letPassWheelEvents = false,
-     // businessData is just being ignored
-     businessData,
-     // other props for DOM element
-     ...otherProps
- }: NodeContentProps<any>) {
-     const [adjustedContentProps, setAdjustedContentProps] = React.useState<Partial<CONTENT_PROPS>>({})
-     const handleStack: { [key: string]: IHandleProps[] } = {};
-     handleStack[Position.Top] = [] as IHandleProps[];
-     handleStack[Position.Right] = [] as IHandleProps[];
-     handleStack[Position.Bottom] = [] as IHandleProps[];
-     handleStack[Position.Left] = [] as IHandleProps[];
-     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);
-                 }
-                 if (handle.type === "source") {
-                     handleStack[sourcePosition].push(handle);
-                 }
-             }
-         });
-     }
-     const styleExpandDimensions: { [key: string]: string | number } = {};
-     if (
-         typeof adaptHeightForHandleMinCount !== "undefined" &&
-         (minimalShape === "none" || !!selected) &&
-         adaptSizeIncrement && (
-             handleStack[Position.Left].length >= adaptHeightForHandleMinCount ||
-             handleStack[Position.Right].length >= adaptHeightForHandleMinCount
-         )
-     ) {
-         const minHeightLeft = handleStack[Position.Left].length * adaptSizeIncrement;
-         const minHeightRight = handleStack[Position.Right].length * adaptSizeIncrement;
-         styleExpandDimensions["minHeight"] = Math.max(minHeightLeft, minHeightRight);
-     }
-     return (
-         <>
-             <section
-                 {...otherProps}
-                 style={{...style, ...styleExpandDimensions}}
-                 className={
-                     `${eccgui}-graphviz__node` +
-                     ` ${eccgui}-graphviz__node--${size}` +
-                     ` ${eccgui}-graphviz__node--minimal-${minimalShape}` +
-                     (!!highlightedState ? " " + gethighlightedStateClasses(highlightedState, `${eccgui}-graphviz__node`) : "") +
-                     (animated ? ` ${eccgui}-graphviz__node--animated` : "") +
-                     (showUnconnectableHandles === false ? ` ${eccgui}-graphviz__node--hidehandles` : "") +
-                     (letPassWheelEvents === false ? ` nowheel` : "")
-                 }
-             >
-                 <header className={`${eccgui}-graphviz__node__header`}>
-                     {(!!iconName || !!depiction) && (
-                         <span
-                             className={`${eccgui}-graphviz__node__header-depiction`}
-                         >
-                             {!!depiction && imgWithTooltip(<img src={depiction} alt="" />, (minimalShape === "none" || selected) ? typeLabel : undefined)}
-                             {(!!iconName && !depiction) && <Icon name={iconName} tooltipText={(minimalShape === "none" || selected) ? typeLabel : undefined} />}
-                         </span>
-                     )}
-                     <span
-                         className={`${eccgui}-graphviz__node__header-label`}
-                         title={label}
-                     >
-                         {label}
-                     </span>
-                     {(menuButtons || (showExecutionButtons && executionButtons)) && (
-                         <span
-                             className={`${eccgui}-graphviz__node__header-menu`}
-                         >
-                             {(showExecutionButtons && typeof executionButtons === "function") ? executionButtons(adjustedContentProps, setAdjustedContentProps) : null}
-                             {menuButtons??null}
-                         </span>
-                     )}
-                 </header>
-                 {content && (
-                     <div className={`${eccgui}-graphviz__node__content`}>
-                         {typeof content === "function" ? content(adjustedContentProps) : content}
-                     </div>
+export function NodeContent<CONTENT_PROPS = any>({
+    iconName,
+    depiction,
+    typeLabel,
+    label,
+    showExecutionButtons = true,
+    executionButtons,
+    menuButtons,
+    content,
+    contentExtension,
+     footerContent,
+    size = "small",
+    minimalShape = "circular",
+    highlightedState,
+    handles = defaultHandles,
+    adaptHeightForHandleMinCount,
+    adaptSizeIncrement = 15,
+    getMinimalTooltipData = getDefaultMinimalTooltipData,
+    style = {},
+    showUnconnectableHandles = false,
+    animated = false,
+    onNodeResize,
+    nodeDimensions,
+    // forwarded props
+    targetPosition = Position.Left,
+    sourcePosition = Position.Right,
+    isConnectable = true,
+    selected,
+    letPassWheelEvents = false,
+    // businessData is just being ignored
+    businessData,
+    // other props for DOM element
+    ...otherProps
+}: NodeContentProps<any>) {
+    const [width, setWidth] = React.useState<number>(nodeDimensions?.width ?? 0);
+    const [height, setHeight] = React.useState<number>(nodeDimensions?.height ?? 0);
+    const [, , zoom] = useStoreState((state) => state.transform);
+    const [adjustedContentProps, setAdjustedContentProps] = React.useState<Partial<CONTENT_PROPS>>({});
+    const nodeContentRef = React.useRef<any>();
+    const handleStack: { [key: string]: IHandleProps[] } = {};
+    handleStack[Position.Top] = [] as IHandleProps[];
+    handleStack[Position.Right] = [] as IHandleProps[];
+    handleStack[Position.Bottom] = [] as IHandleProps[];
+    handleStack[Position.Left] = [] as IHandleProps[];
+
+    // initial dimension before resize
+    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,
+                });
+            }
+            nodeContentRef.current.className = nodeContentRef.current.className + " is-resizeable";
+        }
+    }, [nodeContentRef, onNodeResize, minimalShape, nodeDimensions]);
+
+    //update node dimensions when resized
+    React.useEffect(() => {
+        if (nodeDimensions) {
+            setWidth(nodeDimensions.width);
+            setHeight(nodeDimensions.height);
+        }
+    }, [nodeDimensions]);
+
+    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);
+                }
+                if (handle.type === "source") {
+                    handleStack[sourcePosition].push(handle);
+                }
+            }
+        });
+    }
+    const styleExpandDimensions: { [key: string]: string | number } = {};
+    if (
+        typeof adaptHeightForHandleMinCount !== "undefined" &&
+        (minimalShape === "none" || !!selected) &&
+        adaptSizeIncrement &&
+        (handleStack[Position.Left].length >= adaptHeightForHandleMinCount ||
+            handleStack[Position.Right].length >= adaptHeightForHandleMinCount)
+    ) {
+        const minHeightLeft = handleStack[Position.Left].length * adaptSizeIncrement;
+        const minHeightRight = handleStack[Position.Right].length * adaptSizeIncrement;
+        styleExpandDimensions["minHeight"] = Math.max(minHeightLeft, minHeightRight);
+    }
+
+    const resizableStyles = (!!onNodeResize === true && minimalShape === "none" && (width + height > 0)) ? { width, height } : {};
+    const nodeContent = (
+        <>
+            <section
+                ref={nodeContentRef}
+                {...otherProps}
+                style={{ ...style, ...styleExpandDimensions, ...resizableStyles }}
+                className={
+                    `${eccgui}-graphviz__node` +
+                    ` ${eccgui}-graphviz__node--${size}` +
+                    ` ${eccgui}-graphviz__node--minimal-${minimalShape}` +
+                    (!!highlightedState
+                        ? " " + gethighlightedStateClasses(highlightedState, `${eccgui}-graphviz__node`)
+                        : "") +
+                    (animated ? ` ${eccgui}-graphviz__node--animated` : "") +
+                    (showUnconnectableHandles === false ? ` ${eccgui}-graphviz__node--hidehandles` : "") +
+                    (letPassWheelEvents === false ? ` nowheel` : "")
+                }
+            >
+                <header className={`${eccgui}-graphviz__node__header`}>
+                    {(!!iconName || !!depiction) && (
+                        <span className={`${eccgui}-graphviz__node__header-depiction`}>
+                            {!!depiction &&
+                                imgWithTooltip(
+                                    <img src={depiction} alt="" />,
+                                    minimalShape === "none" || selected ? typeLabel : undefined
+                                )}
+                            {!!iconName && !depiction && (
+                                <Icon
+                                    name={iconName}
+                                    tooltipText={minimalShape === "none" || selected ? typeLabel : undefined}
+                                />
+                            )}
+                        </span>
+                    )}
+                    <span className={`${eccgui}-graphviz__node__header-label`} title={label}>
+                        {label}
+                    </span>
+                    {(menuButtons || (showExecutionButtons && executionButtons)) && (
+                        <span className={`${eccgui}-graphviz__node__header-menu`}>
+                            {showExecutionButtons && typeof executionButtons === "function"
+                                ? executionButtons(adjustedContentProps, setAdjustedContentProps)
+                                : null}
+                            {menuButtons ?? null}
+                        </span>
+                    )}
+                </header>
+                {content && (
+                    <div className={`${eccgui}-graphviz__node__content`}>
+                        {typeof content === "function" ? content(adjustedContentProps) : content}
+                    </div>
+                )}
+                {contentExtension}
+                 {footerContent && (
+                     <footer className={`${eccgui}-graphviz__node__footer`}>
+                        { footerContent }
+                     </footer>
                  )}
-                 <div className={`${eccgui}-graphviz__node__footer`}>
-                 </div>
-                 {contentExtension}
-             </section>
-             {!!handles && (
-                 <>
-                     { addHandles(handleStack, Position.Top, "left", isConnectable, style) }
-                     { addHandles(handleStack, Position.Right, "top", isConnectable, style) }
-                     { addHandles(handleStack, Position.Bottom, "left", isConnectable, style) }
-                     { addHandles(handleStack, Position.Left, "top", isConnectable, style) }
-                 </>
-             )}
-         </>
-     );
- }
+            </section>
+            {!!handles && (
+                <>
+                    {addHandles(handleStack, Position.Top, "left", isConnectable, style)}
+                    {addHandles(handleStack, Position.Right, "top", isConnectable, style)}
+                    {addHandles(handleStack, Position.Bottom, "left", isConnectable, style)}
+                    {addHandles(handleStack, Position.Left, "top", isConnectable, style)}
+                </>
+            )}
+        </>
+    );
+
+    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";
+                }
+            }}
+            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>
+    );
+
+    return (!!onNodeResize && minimalShape === "none") ? resizableNode() : nodeContent;
+}

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

@@ -16,7 +16,7 @@ export interface NodeContentExtensionProps extends React.HTMLAttributes<HTMLDivE
      * Click handler to manage the expanded state from outside the the element.
      * This state is not managed automatically by the element itself.
      */
-    onToggle?: (event: React.MouseEvent<HTMLElement>, isExpanded: boolean) => void;
+    setExpanded?: (event: React.MouseEvent<HTMLElement>, isCurrentlyExpanded: boolean) => boolean;
     /**
      * Single element or aray of `IconButton` and `Button` elements.
      * They will be displayed beside the closing button under the element content body.
@@ -39,7 +39,7 @@ export const NodeContentExtension = ({
     children,
     slideOutOfNode = false,
     isExpanded = false,
-    onToggle = undefined,
+    setExpanded = undefined,
     actionButtons,
     tooltipExpand = "Show more",
     tooltipReduce = "Show less",
@@ -47,8 +47,12 @@ export const NodeContentExtension = ({
     ...otherProps
 }: NodeContentExtensionProps) => {
 
-    // always expand element if there is no handler to manage it
-    const expanded = onToggle ? isExpanded : true;
+    // display always exapanded if there is no handler to control it
+    const [expanded, expand] = React.useState<boolean>(setExpanded ? isExpanded : true);
+    const onToggle = (event: React.MouseEvent<HTMLElement>, isCurrentlyExpanded: boolean) => {
+        const willBeExpanded = setExpanded ? setExpanded(event, isCurrentlyExpanded) : isCurrentlyExpanded;
+        expand(willBeExpanded);
+    }
 
     return (
         <div
@@ -75,14 +79,16 @@ export const NodeContentExtension = ({
                         <div className={`${eccgui}-graphviz__node__extension-body`}>
                             {children}
                         </div>
-                        {(!!actionButtons || !!onToggle) && (
+                        {(!!actionButtons || !!setExpanded) && (
                             <div className={`${eccgui}-graphviz__node__extension-actions`}>
-                                <IconButton
-                                    className={`${eccgui}-graphviz__node__extension-reducebutton`}
-                                    name="toggler-showless"
-                                    text={tooltipReduce}
-                                    onClick={onToggle ? (e) => { onToggle(e, expanded); } : undefined}
-                                />
+                                {!!setExpanded && (
+                                    <IconButton
+                                        className={`${eccgui}-graphviz__node__extension-reducebutton`}
+                                        name="toggler-showless"
+                                        text={tooltipReduce}
+                                        onClick={(e) => { onToggle(e, expanded); }}
+                                    />
+                                )}
                                 {actionButtons}
                             </div>
                         )}