windmill-components 1.60.3 → 1.83.1

package/components/graph/svelvet/edges/views/Edges/SmoothStepEdge.svelte

@@ -0,0 +1,176 @@
+<script>
+  import BaseEdge from './BaseEdge.svelte';
+  import { getCenter } from './utils';
+
+  const Position = {};
+  Position['Left'] = 'left';
+  Position['Right'] = 'right';
+  Position['Top'] = 'top';
+  Position['Bottom'] = 'bottom';
+  // These are some helper methods for drawing the round corners
+  // The name indicates the direction of the path. "bottomLeftCorner" goes
+  // from bottom to the left and "leftBottomCorner" goes from left to the bottom.
+  // We have to consider the direction of the paths because of the animated lines.
+  const bottomLeftCorner = (x, y, size) =>
+    `L ${x},${y - size}Q ${x},${y} ${x + size},${y}`;
+  const leftBottomCorner = (x, y, size) =>
+    `L ${x + size},${y}Q ${x},${y} ${x},${y - size}`;
+  const bottomRightCorner = (x, y, size) =>
+    `L ${x},${y - size}Q ${x},${y} ${x - size},${y}`;
+  const rightBottomCorner = (x, y, size) =>
+    `L ${x - size},${y}Q ${x},${y} ${x},${y - size}`;
+  const leftTopCorner = (x, y, size) =>
+    `L ${x + size},${y}Q ${x},${y} ${x},${y + size}`;
+  const topLeftCorner = (x, y, size) =>
+    `L ${x},${y + size}Q ${x},${y} ${x + size},${y}`;
+  const topRightCorner = (x, y, size) =>
+    `L ${x},${y + size}Q ${x},${y} ${x - size},${y}`;
+  const rightTopCorner = (x, y, size) =>
+    `L ${x - size},${y}Q ${x},${y} ${x},${y + size}`;
+  // returns string to pass into edge 'path' svg d attribute (where to be drawn)
+  export function getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition = Position.Bottom,
+    targetX,
+    targetY,
+    targetPosition = Position.Top,
+    borderRadius = 5,
+    centerX,
+    centerY,
+  }) {
+    const [_centerX, _centerY, offsetX, offsetY] = getCenter({
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+    });
+    const cornerWidth = Math.min(borderRadius, Math.abs(targetX - sourceX));
+    const cornerHeight = Math.min(borderRadius, Math.abs(targetY - sourceY));
+    const cornerSize = Math.min(cornerWidth, cornerHeight, offsetX, offsetY);
+    const leftAndRight = [Position.Left, Position.Right];
+    const cX = typeof centerX !== 'undefined' ? centerX : _centerX;
+    const cY = typeof centerY !== 'undefined' ? centerY : _centerY;
+    let firstCornerPath = null;
+    let secondCornerPath = null;
+    // for non-mixed edge top/bottom
+    if (sourceX <= targetX) {
+      firstCornerPath =
+        sourceY <= targetY
+          ? bottomLeftCorner(sourceX, cY, cornerSize)
+          : topLeftCorner(sourceX, cY, cornerSize);
+      secondCornerPath =
+        sourceY <= targetY
+          ? rightTopCorner(targetX, cY, cornerSize)
+          : rightBottomCorner(targetX, cY, cornerSize);
+    } else {
+      firstCornerPath =
+        sourceY < targetY
+          ? bottomRightCorner(sourceX, cY, cornerSize)
+          : topRightCorner(sourceX, cY, cornerSize);
+      secondCornerPath =
+        sourceY < targetY
+          ? leftTopCorner(targetX, cY, cornerSize)
+          : leftBottomCorner(targetX, cY, cornerSize);
+    }
+    // for non-mixed edge left/right
+    if (
+      leftAndRight.includes(sourcePosition) &&
+      leftAndRight.includes(targetPosition)
+    ) {
+      if (sourceX <= targetX) {
+        firstCornerPath =
+          sourceY <= targetY
+            ? rightTopCorner(cX, sourceY, cornerSize)
+            : rightBottomCorner(cX, sourceY, cornerSize);
+        secondCornerPath =
+          sourceY <= targetY
+            ? bottomLeftCorner(cX, targetY, cornerSize)
+            : topLeftCorner(cX, targetY, cornerSize);
+      } else if (
+        (sourcePosition === Position.Right &&
+          targetPosition === Position.Left) ||
+        (sourcePosition === Position.Left &&
+          targetPosition === Position.Right) ||
+        (sourcePosition === Position.Left && targetPosition === Position.Left)
+      ) {
+        // and sourceX > targetX
+        firstCornerPath =
+          sourceY <= targetY
+            ? leftTopCorner(cX, sourceY, cornerSize)
+            : leftBottomCorner(cX, sourceY, cornerSize);
+        secondCornerPath =
+          sourceY <= targetY
+            ? bottomRightCorner(cX, targetY, cornerSize)
+            : topRightCorner(cX, targetY, cornerSize);
+      }
+      // for mixed edges (top/bottom to left/right) OR (left/right to top/bottom)
+    } else if (
+      leftAndRight.includes(sourcePosition) &&
+      !leftAndRight.includes(targetPosition)
+    ) {
+      if (sourceX <= targetX) {
+        firstCornerPath =
+          sourceY <= targetY
+            ? rightTopCorner(targetX, sourceY, cornerSize)
+            : rightBottomCorner(targetX, sourceY, cornerSize);
+      } else {
+        firstCornerPath =
+          sourceY <= targetY
+            ? leftTopCorner(targetX, sourceY, cornerSize)
+            : leftBottomCorner(targetX, sourceY, cornerSize);
+      }
+      secondCornerPath = '';
+    } else if (
+      !leftAndRight.includes(sourcePosition) &&
+      leftAndRight.includes(targetPosition)
+    ) {
+      if (sourceX <= targetX) {
+        firstCornerPath =
+          sourceY <= targetY
+            ? bottomLeftCorner(sourceX, targetY, cornerSize)
+            : topLeftCorner(sourceX, targetY, cornerSize);
+      } else {
+        firstCornerPath =
+          sourceY <= targetY
+            ? bottomRightCorner(sourceX, targetY, cornerSize)
+            : topRightCorner(sourceX, targetY, cornerSize);
+      }
+      secondCornerPath = '';
+    }
+    return `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`;
+  }
+  export let edge;
+  export let borderRadius = 5;
+  export let canvasId;
+
+  import { findStore } from '../../../store/controllers/storeApi';
+  import { getAnchorFromEdge } from '../../../edges/controllers/util';
+
+  let params;
+  $: {
+    const store = findStore(canvasId);
+    const sourceAnchor = getAnchorFromEdge(store, edge.id, 'source');
+    const targetAnchor = getAnchorFromEdge(store, edge.id, 'target');
+    const mapAngle = { 0: 'right', 90: 'top', 180: 'left', 270: 'bottom' };
+    params = {
+      sourceX: edge.sourceX,
+      sourceY: edge.sourceY,
+      targetX: edge.targetX,
+      targetY: edge.targetY,
+      sourcePosition: mapAngle[sourceAnchor.angle],
+      targetPosition: mapAngle[targetAnchor.angle],
+      borderRadius: borderRadius,
+    };
+  }
+  $: [centerX, centerY] = getCenter(params);
+  $: path = getSmoothStepPath(params);
+  $: baseEdgeProps = {
+    ...edge,
+    path: path,
+    centerX: centerX,
+    centerY: centerY,
+  };
+</script>
+
+<BaseEdge {baseEdgeProps} {canvasId} />

package/components/graph/svelvet/edges/views/Edges/SmoothStepEdge.svelte.d.ts

@@ -0,0 +1,60 @@
+/** @typedef {typeof __propDef.props}  SmoothStepEdgeProps */
+/** @typedef {typeof __propDef.events}  SmoothStepEdgeEvents */
+/** @typedef {typeof __propDef.slots}  SmoothStepEdgeSlots */
+export default class SmoothStepEdge extends SvelteComponentTyped<{
+    edge: any;
+    canvasId: any;
+    borderRadius?: number | undefined;
+    getSmoothStepPath?: (({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, borderRadius, centerX, centerY, }: {
+        sourceX: any;
+        sourceY: any;
+        sourcePosition?: string | undefined;
+        targetX: any;
+        targetY: any;
+        targetPosition?: string | undefined;
+        borderRadius?: number | undefined;
+        centerX: any;
+        centerY: any;
+    }) => string) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+    get getSmoothStepPath(): ({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, borderRadius, centerX, centerY, }: {
+        sourceX: any;
+        sourceY: any;
+        sourcePosition?: string | undefined;
+        targetX: any;
+        targetY: any;
+        targetPosition?: string | undefined;
+        borderRadius?: number | undefined;
+        centerX: any;
+        centerY: any;
+    }) => string;
+}
+export type SmoothStepEdgeProps = typeof __propDef.props;
+export type SmoothStepEdgeEvents = typeof __propDef.events;
+export type SmoothStepEdgeSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        edge: any;
+        canvasId: any;
+        borderRadius?: number | undefined;
+        getSmoothStepPath?: (({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, borderRadius, centerX, centerY, }: {
+            sourceX: any;
+            sourceY: any;
+            sourcePosition?: string | undefined;
+            targetX: any;
+            targetY: any;
+            targetPosition?: string | undefined;
+            borderRadius?: number | undefined;
+            centerX: any;
+            centerY: any;
+        }) => string) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/graph/svelvet/edges/views/Edges/StepEdge.svelte

@@ -0,0 +1,8 @@
+<script>
+  import SmoothStepEdge from './SmoothStepEdge.svelte';
+  export let edge;
+  export let canvasId;
+</script>
+
+<!-- Utilizes the SmoothStepEdge Component and sets borderRadius to zero to give a sharp edge -->
+<SmoothStepEdge {edge} borderRadius={0} {canvasId} />

package/components/graph/svelvet/edges/views/Edges/StepEdge.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  StepEdgeProps */
+/** @typedef {typeof __propDef.events}  StepEdgeEvents */
+/** @typedef {typeof __propDef.slots}  StepEdgeSlots */
+export default class StepEdge extends SvelteComponentTyped<{
+    edge: any;
+    canvasId: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type StepEdgeProps = typeof __propDef.props;
+export type StepEdgeEvents = typeof __propDef.events;
+export type StepEdgeSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        edge: any;
+        canvasId: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/graph/svelvet/edges/views/Edges/types.d.ts

@@ -0,0 +1,52 @@
+import type { XYPosition, Position } from './utils';
+export interface Node<T = any> {
+    id: number;
+    position: XYPosition;
+    data: T;
+    width: number;
+    height: number;
+    bgColor?: string;
+    fontSize?: number;
+    borderColor?: string;
+    borderRadius?: number;
+    textColor?: string;
+    clickCallback?: Function;
+    image?: boolean;
+    src?: string;
+    sourcePosition?: 'left' | 'right' | 'top' | 'bottom';
+    targetPosition?: 'left' | 'right' | 'top' | 'bottom';
+}
+export interface Edge {
+    id: string;
+    source: number;
+    target: number;
+    label?: string;
+    labelBgColor?: string;
+    labelTextColor?: string;
+    edgeColor?: string;
+    type?: string;
+    animate?: boolean;
+    noHandle?: boolean;
+    arrow?: boolean;
+}
+export interface DerivedEdge extends Edge {
+    sourceX: number;
+    sourceY: number;
+    sourcePosition: Position;
+    targetX: number;
+    targetY: number;
+    targetPosition: Position;
+}
+export interface EdgeProps extends DerivedEdge {
+    path: string;
+    centerX: number;
+    centerY: number;
+}
+export interface EdgeTextProps {
+    label?: any;
+    labelBgColor?: string;
+    labelTextColor?: string;
+    centerX: number;
+    centerY: number;
+}
+export type HandleType = 'source' | 'target';

package/components/graph/svelvet/edges/views/Edges/types.js

@@ -0,0 +1 @@
+export {};

package/components/graph/svelvet/edges/views/Edges/utils.d.ts

@@ -0,0 +1,33 @@
+export declare enum Position {
+    Left = "left",
+    Right = "right",
+    Top = "top",
+    Bottom = "bottom"
+}
+export interface XYPosition {
+    x: number;
+    y: number;
+}
+export type XYZPosition = XYPosition & {
+    z: number;
+};
+export interface Dimensions {
+    width: number;
+    height: number;
+}
+export interface Rect extends Dimensions, XYPosition {
+}
+export interface Box extends XYPosition {
+    x2: number;
+    y2: number;
+}
+export type Transform = [number, number, number];
+export interface GetCenterParams {
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition?: Position;
+    targetPosition?: Position;
+}
+export declare const getCenter: ({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, }: GetCenterParams) => [number, number, number, number];

package/components/graph/svelvet/edges/views/Edges/utils.js

@@ -0,0 +1,31 @@
+// enumerable values (static) set for Position
+export var Position;
+(function (Position) {
+    Position["Left"] = "left";
+    Position["Right"] = "right";
+    Position["Top"] = "top";
+    Position["Bottom"] = "bottom";
+})(Position || (Position = {}));
+//needed for getCenter funciotn
+const LeftOrRight = [Position.Left, Position.Right];
+//used to determine the position for edge text on a Smooth or Step Edge
+export const getCenter = ({ sourceX, sourceY, targetX, targetY, sourcePosition = Position.Bottom, targetPosition = Position.Top, }) => {
+    const sourceIsLeftOrRight = LeftOrRight.includes(sourcePosition);
+    const targetIsLeftOrRight = LeftOrRight.includes(targetPosition);
+    // we expect flows to be horizontal or vertical (all handles left or right respectively top or bottom)
+    // a mixed edge is when one the source is on the left and the target is on the top for example.
+    const mixedEdge = (sourceIsLeftOrRight && !targetIsLeftOrRight) ||
+        (targetIsLeftOrRight && !sourceIsLeftOrRight);
+    if (mixedEdge) {
+        const xOffset = sourceIsLeftOrRight ? Math.abs(targetX - sourceX) : 0;
+        const centerX = sourceX > targetX ? sourceX - xOffset : sourceX + xOffset;
+        const yOffset = sourceIsLeftOrRight ? 0 : Math.abs(targetY - sourceY);
+        const centerY = sourceY < targetY ? sourceY + yOffset : sourceY - yOffset;
+        return [centerX, centerY, xOffset, yOffset];
+    }
+    const xOffset = Math.abs(targetX - sourceX) / 2;
+    const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
+    const yOffset = Math.abs(targetY - sourceY) / 2;
+    const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
+    return [centerX, centerY, xOffset, yOffset];
+};

package/components/graph/svelvet/editEdges/views/EditEdge.svelte

@@ -0,0 +1,151 @@
+<script>import { findStore } from '../../store/controllers/storeApi';
+import { writable, derived, get, readable } from 'svelte/store';
+import { getEdgeById } from '../../edges/controllers/util';
+export let edgeId;
+export let canvasId;
+let label;
+let width;
+let height;
+let customClass;
+let backgroundColor;
+let type;
+const store = findStore(canvasId);
+const canvasWidth = get(store.widthStore);
+const canvasHeight = get(store.widthStore);
+const edge = getEdgeById(store, edgeId);
+const { edgesStore, nodeSelected } = store;
+function closeModal() {
+    const store = findStore(canvasId);
+    store.edgeEditModal.set(null);
+}
+function handleDelete() {
+    const store = findStore(canvasId);
+    const edge = getEdgeById(store, edgeId);
+    edge.delete();
+    closeModal();
+}
+function handleSubmit(e) {
+    e.preventDefault();
+    const store = findStore(canvasId);
+    const edge = getEdgeById(store, edgeId);
+    if (label)
+        edge.label = label;
+    if (backgroundColor)
+        edge.edgeColor = backgroundColor;
+    if (type)
+        edge.type = type;
+    // width = '';
+    // height = '';
+    // customClass = '';
+    // label = '';
+    store.edgesStore.set($edgesStore);
+    closeModal();
+}
+</script>
+
+<div
+  class="EditEdge"
+  style="left:{canvasWidth / 3}px; top:{canvasHeight / 3}px"
+  on:mouseover={(e) => ($nodeSelected = true)}
+  on:focus
+  on:wheel|preventDefault
+>
+  <form on:submit={handleSubmit}>
+    <label for="label-input">Edge label</label>
+    <input
+      type="text"
+      id="label-input-{edgeId}"
+      placeholder={edge.label}
+      bind:value={label}
+    />
+
+    <label for="bg-color-input">Edge color</label>
+    <input
+      type="color"
+      id="bg-color-input-{edgeId}"
+      class="bgci"
+      bind:value={backgroundColor}
+    />
+    <input
+      type="text"
+      placeholder={edge.edgeColor}
+      bind:value={backgroundColor}
+    />
+
+    <label for="type-input">Edge type</label>
+    <input
+      type="text"
+      id="type-input-{edgeId}"
+      placeholder={edge.type}
+      bind:value={type}
+    />
+  </form>
+  <div class="btn-container">
+    <button on:click={handleSubmit}>Submit</button>
+    <button on:click={handleDelete}>Delete</button>
+    <button on:click={closeModal}>Cancel</button>
+  </div>
+</div>
+
+<style>
+  .EditEdge {
+    position: absolute;
+    padding: 0 1rem 1rem 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border: 1px solid #333333;
+    border-radius: 0.25rem;
+    background-color: #ffffff;
+    z-index: 10;
+    -webkit-user-select: text;
+       -moz-user-select: text;
+            user-select: text;
+    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.4);
+    color: #333333;
+  }
+
+  label {
+    font-size: 0.8rem;
+    font-weight: bold;
+    margin-bottom: 0.15rem;
+  }
+
+  .btn-container {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0.5rem;
+  }
+
+  button {
+    border-radius: 0.25rem;
+    background-color: white;
+    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.4);
+    margin: 0.2rem;
+  }
+
+  input {
+    height: 1.6rem;
+    border-color: #e45b56;
+  }
+
+  .bgci {
+    height: 2rem;
+    width: 5rem;
+    padding: 0;
+    border: none;
+    background-color: none;
+  }
+
+  button:hover {
+    cursor: pointer;
+    background-color: #e45b56;
+    color: white;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }</style>

package/components/graph/svelvet/editEdges/views/EditEdge.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        edgeId: string;
+        canvasId: string;
+    };
+    events: {
+        focus: FocusEvent;
+        wheel: WheelEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EditEdgeProps = typeof __propDef.props;
+export type EditEdgeEvents = typeof __propDef.events;
+export type EditEdgeSlots = typeof __propDef.slots;
+export default class EditEdge extends SvelteComponentTyped<EditEdgeProps, EditEdgeEvents, EditEdgeSlots> {
+}
+export {};

package/components/graph/svelvet/nodes/controllers/util.d.ts

@@ -0,0 +1,9 @@
+import type { StoreType } from '../../store/types/types';
+/**
+ * getNodeById will look for the targeted Node that has the same id provided in the Svelvet component store.
+ *
+ * @param store The Svelvet store containing the state of a Svelvet component
+ * @param id The id of the targeted Node
+ * @returns The targeted Node object in store.nodesStore
+ */
+export declare function getNodeById(store: StoreType, id: string): import("../../store/types/types").NodeType;

package/components/graph/svelvet/nodes/controllers/util.js

@@ -0,0 +1,13 @@
+import { get } from 'svelte/store';
+/**
+ * getNodeById will look for the targeted Node that has the same id provided in the Svelvet component store.
+ *
+ * @param store The Svelvet store containing the state of a Svelvet component
+ * @param id The id of the targeted Node
+ * @returns The targeted Node object in store.nodesStore
+ */
+export function getNodeById(store, id) {
+    const nodesStore = get(store.nodesStore);
+    const node = nodesStore[id];
+    return node;
+}

package/components/graph/svelvet/nodes/models/Node.d.ts

@@ -0,0 +1,74 @@
+/** this is where we create our node store */
+import type { NodeType } from '../../store/types/types';
+/** A Node class that implements NodeType interface
+ * @param {string} id The id of the Node
+ * @param {number} positionX The X-axis position of the Node (left top corner of the Node)
+ * @param {number} positionY The Y-axis position of the Node (left top corner of the Node)
+ * @param {number} width The width of the Node
+ * @param {number} height The height of the Node
+ * @param {string} bgColor The background color of the node
+ * @param {object} data A data object that user can specify; possible keys are 'label' and 'custom';
+ * @param {string} canvasId The canvasId of the Svelvet component that the instantiated Node will be on.
+ * @param {string} borderColor The border color of the Node
+ * @param {boolean} image A boolean set to true if the Node needs to display an image
+ * @param {string} src The src link for the image; image and src are closely tied and a src link is only needed when image sets to true
+ * @param {string} textColor The color of the text in the Node
+ * @param {string} borderRadius The border radius of the Node
+ * @param {string} childNodes An array of node ids that will be grouped as child nodes of this Node. This is for the GroupNodes feature. The current implementation of this feature works one way but not the other (when you drag the parent node, the child nodes will move as a group but when you drag the child node, the parent node would not move along)
+ * @param {string} className The custom class name if user specifies. This is for the custom className feature for Node.
+ */
+export declare class Node implements NodeType {
+    id: string;
+    positionX: number;
+    positionY: number;
+    width: number;
+    height: number;
+    bgColor: string;
+    data: object;
+    canvasId: string;
+    borderColor: string;
+    image: boolean;
+    src: string;
+    textColor: string;
+    borderRadius: number;
+    childNodes: string[];
+    className: string;
+    clickCallback: Function;
+    constructor(id: string, positionX: number, positionY: number, width: number, height: number, bgColor: string, data: object, canvasId: string, borderColor: string, image: boolean, src: string, textColor: string, borderRadius: number, childNodes: string[], className: string, clickCallback: Function);
+    /**
+     * setPositionFromMovement will update the positionX and positionY of the Node when user drags a Node around on the canvas, reflect the changes in real time in the nodesStore, and also cascade the changes to all relative elements like Anchors and Edges.
+     * @param {number} movementX The mouse movement value on the X-axis
+     * @param {number} movementY The mouse movement value on the Y-axis
+     */
+    setPositionFromMovement(movementX: number, movementY: number): void;
+    /**
+     * setSizeFromMovement will update the width and height of the Node when user resizes the Node by dragging at the right bottom corner (where the ResizedNode attached), reflect the changes in real time in the nodesStore, and also cascade the changes to all relative elements like Anchors and potential Anchors.
+     *
+     * @param movementX The mouse movement value on the X-axis
+     * @param movementY The mouse movement value on the Y-axis
+     */
+    setSizeFromMovement(movementX: number, movementY: number): void;
+    /**
+     * setExportableData is going to construct an object that holds all the node data that can be exported. This method is used for Exporting Diagrams feature.
+     *
+     * @returns An object with all the exportable data of the Node. The format of this object should align with the original format of node data user provided.
+     */
+    setExportableData(): {
+        id: string;
+        width: number;
+        height: number;
+        position: {
+            x: number;
+            y: number;
+        };
+        data: object;
+        bgColor: string;
+        borderColor: string;
+        textColor: string;
+        borderRadius: number;
+        image: boolean;
+        src: string;
+        childNodes: string[];
+        customClassName: string;
+    };
+}