Refactor StickyNote to have a combined position and dimension object instead of two number arrays

Author: silkservice

CHANGELOG.md

@@ -8,7 +8,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Added
 
-- Added custom icon for "Concatenate to file" operator (CMEM-6476).
+-   Added custom icon for "Concatenate to file" operator (CMEM-6476).
 -   `CntentGroup` component
     -   Manage display of a grouped content section.
     -   Add info, actions and context annotations by using its properties.
@@ -25,6 +25,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   `resizeDirections` to specifiy the axis that can be used to resize the node
     -   `resizeMaxDimensions` to add maximum values for resizing height/width
 
+### Changed
+
+-   StickyNote data structure: Refactored position and dimension (breaking change)
+
 ## [24.0.1] - 2025-02-06
 
 ### Changed

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

@@ -22,7 +22,7 @@ type NodeContentHandleNextProps = HandleNextProps;
 
 export type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps;
 
-type NodeDimensions = {
+export type NodeDimensions = {
     width?: number;
     height?: number;
 };

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