@eccenca/gui-elements 24.1.0-rc.3 → 24.1.0-rc.4

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,
@@ -131,7 +131,6 @@ export default {
 const NodeContentExample = (args: any) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
     const [elements, setElements] = useState([] as Elements);
-    //const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
 
     useEffect(() => {
         setElements([
@@ -206,7 +205,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}`);
     },
 };