windmill-components 1.60.4 → 1.75.0

package/components/graph/svelvet/nodes/models/Node.js

@@ -0,0 +1,195 @@
+import { writable, derived, get, readable } from 'svelte/store';
+import { stores } from '../../store/models/store';
+import { getAnchors, getEdgeById } from '../../edges/controllers/util';
+import { getResizeNodes } from '../../resizableNodes/controllers/util';
+/** 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 class Node {
+    id;
+    positionX;
+    positionY;
+    width;
+    height;
+    bgColor;
+    data;
+    canvasId;
+    borderColor;
+    image;
+    src;
+    textColor;
+    borderRadius;
+    childNodes;
+    className;
+    clickCallback;
+    constructor(id, positionX, positionY, width, height, bgColor, data, canvasId, borderColor, image, src, textColor, borderRadius, childNodes, className, clickCallback) {
+        this.id = id;
+        this.positionX = positionX;
+        this.positionY = positionY;
+        this.width = width;
+        this.height = height;
+        this.bgColor = bgColor;
+        this.data = data;
+        this.canvasId = canvasId;
+        this.borderColor = borderColor;
+        this.image = image;
+        this.src = src;
+        this.textColor = textColor;
+        this.borderRadius = borderRadius;
+        this.childNodes = childNodes;
+        this.className = className;
+        this.clickCallback = clickCallback;
+    }
+    /**
+     * 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, movementY) {
+        const { nodesStore, anchorsStore, resizeNodesStore, potentialAnchorsStore, boundary, lockedOption, } = stores[this.canvasId];
+        if (get(lockedOption))
+            return; // don't do anything if locked is enabled
+        // boundary sets the boundary of the canvas, or else it is false if their is no boundary
+        // check if out of bounds, and if so return without doing anything
+        const boundaryObj = get(boundary);
+        if (typeof boundaryObj === 'object' &&
+            (this.positionX + this.width + movementX >= boundaryObj.x ||
+                this.positionY + this.height + movementY >= boundaryObj.y ||
+                this.positionY + movementY <= 0 ||
+                this.positionX + movementX <= 0))
+            return;
+        //update all necessary data
+        this.positionX += movementX;
+        this.positionY += movementY;
+        // update children
+        nodesStore.update((nodes) => {
+            if (this.childNodes)
+                for (const childNodeId of this.childNodes)
+                    nodes[childNodeId].setPositionFromMovement(movementX, movementY);
+            return { ...nodes };
+        });
+        //update all the anchors on the node in the anchorsStore
+        anchorsStore.update((anchors) => {
+            for (const anchorId in anchors) {
+                if (anchors[anchorId].nodeId === this.id) {
+                    anchors[anchorId].setPositionFromNode();
+                }
+            }
+            return { ...anchors };
+        });
+        //update all the anchors on the node in the anchorsStore
+        potentialAnchorsStore.update((anchors) => {
+            for (const anchorId in anchors) {
+                if (anchors[anchorId].nodeId === this.id) {
+                    anchors[anchorId].callback(); // we don't have to worry about setting partner anchors/etc;
+                }
+            }
+            return { ...anchors };
+        });
+        resizeNodesStore.update((resAnchors) => {
+            for (const anchorId in resAnchors) {
+                if (resAnchors[anchorId].nodeId === this.id) {
+                    resAnchors[anchorId].setPosition(movementX, movementY);
+                    //resAnchors[anchorId].setPosition(movementX, movementY);
+                }
+            }
+            return { ...resAnchors };
+        });
+    }
+    /**
+     * 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, movementY) {
+        this.width += movementX;
+        this.height += movementY;
+        const { anchorsStore, potentialAnchorsStore } = stores[this.canvasId];
+        //Updates the anchor so it follows the node's position as the dimensions change
+        anchorsStore.update((anchors) => {
+            for (const anchorId in anchors) {
+                if (anchors[anchorId].nodeId === this.id) {
+                    anchors[anchorId].setPositionFromNode();
+                    //anchors[anchorId].setPosition(movementX, movementY);
+                }
+            }
+            return { ...anchors };
+        });
+        //update all the anchors on the node in the anchorsStore
+        potentialAnchorsStore.update((anchors) => {
+            for (const anchorId in anchors) {
+                if (anchors[anchorId].nodeId === this.id) {
+                    anchors[anchorId].callback(); // we don't have to worry about setting partner anchors/etc;
+                }
+            }
+            return { ...anchors };
+        });
+    }
+    /**
+     * delete will handle the deletion of a Node (also waterfall down to delete anchors and edges)
+     */
+    delete() {
+        const store = stores[this.canvasId];
+        const { nodesStore, anchorsStore, edgesStore } = stores[this.canvasId];
+        nodesStore.update((nodes) => {
+            for (const nodeId in nodes) {
+                if (nodes[nodeId].id === this.id) {
+                    delete nodes[nodeId];
+                }
+            }
+            return { ...nodes };
+        });
+        // variable `anchors` is an array of Anchor objects on the node
+        const anchors = getAnchors(store, { nodeId: this.id });
+        for (let anchorSelf of anchors) {
+            const edgeId = anchorSelf.edgeId;
+            const edge = getEdgeById(store, edgeId);
+            edge.delete(); // this also deletes anchors. TODO: maybe this should be renamed to explicitly say
+        }
+        // delete the resize nodes
+        const resizeNodesArr = getResizeNodes(store, { nodeId: this.id });
+        // there should be only 1 resize node if option is enabled, 0 if not enabled
+        for (const resizeNode of resizeNodesArr) {
+            resizeNode.delete();
+        }
+    }
+    /**
+     * 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() {
+        const exportableData = {
+            id: this.id,
+            // canvasId: this.canvasId,
+            width: this.width,
+            height: this.height,
+            position: { x: this.positionX, y: this.positionY },
+            data: this.data,
+            bgColor: this.bgColor,
+            borderColor: this.borderColor,
+            textColor: this.textColor,
+            borderRadius: this.borderRadius,
+            image: this.image,
+            src: this.src,
+            childNodes: this.childNodes,
+            customClassName: this.className,
+        };
+        return exportableData;
+    }
+}

package/components/graph/svelvet/nodes/views/EditNode.svelte

@@ -0,0 +1,147 @@
+<script>
+  import { findStore } from '../../store/controllers/storeApi';
+  import { getNodeById } from '../../nodes/controllers/util';
+
+  export let nodeId;
+  export let canvasId;
+  export let isEditing;
+
+  let label;
+  let width;
+  let height;
+  let customClass;
+  let backgroundColor;
+
+  const store = findStore(canvasId);
+
+  const { nodesStore, nodeSelected } = store;
+  let currentNode = $nodesStore[nodeId];
+
+  const editNode = (e) => {
+    e.preventDefault();
+    if (label) currentNode.data.label = label;
+    if (width) currentNode.width = width;
+    if (height) currentNode.height = height;
+    if (backgroundColor) currentNode.bgColor = backgroundColor;
+    width = '';
+    height = '';
+    customClass = '';
+    label = '';
+
+    store.nodesStore.set($nodesStore);
+  };
+</script>
+
+{#if isEditing}
+  <div
+    on:mouseover={(e) => ($nodeSelected = true)}
+    on:focus
+    on:wheel|preventDefault
+    class="EditNode"
+    style="left:{currentNode.positionX +
+      currentNode.width}px; top:{currentNode.positionY}px"
+  >
+    <form on:submit={editNode}>
+      <label for="label-input">Label</label>
+      <input
+        type="text"
+        id="label-input-{nodeId}"
+        placeholder={currentNode.data.label}
+        bind:value={label}
+      />
+
+      <label for="bg-color-input">Background Color</label>
+      <input
+        type="color"
+        id="bg-color-input-{nodeId}"
+        class="bgci"
+        bind:value={backgroundColor}
+      />
+      <input
+        type="text"
+        placeholder={currentNode.bgColor}
+        bind:value={backgroundColor}
+      />
+    </form>
+    <div class="btn-container">
+      <button
+        on:click={(e) => {
+          const store = findStore(canvasId);
+          const node = getNodeById(store, nodeId);
+          node.delete();
+          isEditing = false;
+        }}>Delete Node</button
+      >
+      <button
+        on:click={(e) => {
+          editNode(e);
+          isEditing = false;
+        }}>Submit</button
+      >
+    </div>
+  </div>
+{/if}
+
+<style>
+  .EditNode {
+    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;
+    pointer-events: auto; /* this is needed for pointer events to work since we disable them in graphview */
+  }
+
+  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/nodes/views/EditNode.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  EditNodeProps */
+/** @typedef {typeof __propDef.events}  EditNodeEvents */
+/** @typedef {typeof __propDef.slots}  EditNodeSlots */
+export default class EditNode extends SvelteComponentTyped<{
+    nodeId: any;
+    canvasId: any;
+    isEditing: any;
+}, {
+    focus: FocusEvent;
+    wheel: WheelEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type EditNodeProps = typeof __propDef.props;
+export type EditNodeEvents = typeof __propDef.events;
+export type EditNodeSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        nodeId: any;
+        canvasId: any;
+        isEditing: any;
+    };
+    events: {
+        focus: FocusEvent;
+        wheel: WheelEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/graph/svelvet/nodes/views/Node.svelte

@@ -0,0 +1,85 @@
+<script>import { afterUpdate } from 'svelte';
+import { findStore } from '../../store/controllers/storeApi';
+import { forceCssHeightAndWidth } from '../../customCss/controllers/getCss';
+export let node;
+export let canvasId;
+export let nodeId;
+export let isCustom = false;
+const store = findStore(canvasId);
+const { lockedOption } = store;
+// forceCssHeightAndWidth forces the size of the node to be defined by CSS
+afterUpdate(() => {
+    if (node.className)
+        forceCssHeightAndWidth(store, node);
+});
+const mousedown = (e) => {
+    if (node.clickCallback)
+        node.clickCallback(node);
+};
+</script>
+
+<!-- on:wheel prevents page scroll when using mousewheel in the Node -->
+<div
+	on:mousedown={mousedown}
+	on:touchstart={mousedown}
+	class="{isCustom ? 'CustomNode' : 'Node'} {node.className}"
+	style="left: {node.positionX}px;
+    top: {node.positionY}px;
+    width: {node.width}px;
+    height: {node.height}px;
+    {isCustom
+		? ''
+		: `
+    background-color: ${node.bgColor ?? 'white'};
+    border-color: ${node.borderColor};
+    border-radius: ${node.borderRadius}px;
+    color: ${node.textColor};
+    cursor: ${$lockedOption ? 'default' : 'grab'};`}"
+	id="svelvet-{node.id}"
+>
+	<!-- This executes if node.image is present without node.label -->
+	{#if node.image}
+		<img
+			src={node.src}
+			alt=""
+			style="width: {node.width * 0.75}px;
+			 height: {node.height * 0.75}px;
+       overflow: hidden;"
+		/>
+	{/if}
+	<slot />
+</div>
+
+<style>
+	.CustomNode {
+		position: absolute;
+		display: grid;
+		justify-content: center;
+		align-items: center;
+		font-size: 14px;
+		text-align: center;
+		pointer-events: auto;
+		box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
+	}
+
+	.Node {
+		position: absolute;
+		display: grid;
+		-webkit-user-select: none;
+		   -moz-user-select: none;
+		        user-select: none;
+		justify-content: center;
+		overscroll-behavior: auto;
+		align-items: center;
+		font-size: 14px;
+		text-align: center;
+		border: solid 1px black;
+		border-radius: 5px;
+		box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
+		pointer-events: auto; /* this is needed for pointer events to work since we disable them in graphview */
+	}
+	/* the default behavior when click/dragging an image is to move it. This interferes with node dragging. We disable pointer events on img to prevent this */
+	/* Alternatively, we could use e.preventDefault() on mouseDown. However, this interferes with embedded Svelvet forms */
+	img {
+		pointer-events: none;
+	}</style>

package/components/graph/svelvet/nodes/views/Node.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { NodeType } from '../../store/types/types';
+declare const __propDef: {
+    props: {
+        node: NodeType;
+        canvasId: string;
+        nodeId: string;
+        isCustom?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type NodeProps = typeof __propDef.props;
+export type NodeEvents = typeof __propDef.events;
+export type NodeSlots = typeof __propDef.slots;
+export default class Node extends SvelteComponentTyped<NodeProps, NodeEvents, NodeSlots> {
+}
+export {};

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

@@ -0,0 +1,11 @@
+import type { StoreType, ResizeNodeType } from '../../store/types/types';
+/**
+ * Finds all resizeNodes that matches the conditions specified in the filter parameter from a Svelvet store and returns these resizeNodes in an array
+ *
+ * @param store The Svelvet store containing the state of a Svelvet component
+ * @param filter An object to specify conditions.
+ * @returns An array of resizeNode objects that matches the conditions specified in filter parameter
+ */
+export declare function getResizeNodes(store: StoreType, filter?: {
+    [key: string]: any;
+}): ResizeNodeType[];

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

@@ -0,0 +1,24 @@
+import { get } from 'svelte/store';
+/**
+ * Finds all resizeNodes that matches the conditions specified in the filter parameter from a Svelvet store and returns these resizeNodes in an array
+ *
+ * @param store The Svelvet store containing the state of a Svelvet component
+ * @param filter An object to specify conditions.
+ * @returns An array of resizeNode objects that matches the conditions specified in filter parameter
+ */
+export function getResizeNodes(store, filter) {
+    let resizeNodes = Object.values(get(store.resizeNodesStore));
+    // filter the array for elements that match filter
+    if (filter !== undefined) {
+        resizeNodes = resizeNodes.filter((resizeNode) => {
+            for (let filterKey in filter) {
+                const filterValue = filter[filterKey];
+                if (resizeNode[filterKey] !== filterValue)
+                    return false;
+            }
+            return true;
+        });
+    }
+    // return list of anchors
+    return resizeNodes;
+}

package/components/graph/svelvet/resizableNodes/models/ResizeNode.d.ts

@@ -0,0 +1,33 @@
+import type { ResizeNodeType } from '../../store/types/types';
+/** A ResizeNode class that implements ResizeNodeType interface
+* @param {string} id The id of the ResizeNode
+* @param {string} canvasId The canvasId of the Svelvet component that the instantiated ResizeNode will be on.
+* @param {string} nodeId The id of the Node that the instantiated ResizedNode will be attached to.
+* @param {number} positionX The X-axis position of the ResizeNode (left top corner of the ResizeNode)
+* @param {number} positionY The Y-axis position of the ResizeNode (left top corner of the ResizeNode)
+*/
+export declare class ResizeNode implements ResizeNodeType {
+    id: string;
+    canvasId: string;
+    nodeId: string;
+    positionX: number;
+    positionY: number;
+    constructor(id: string, canvasId: string, nodeId: string, positionX: number, positionY: number);
+    /**
+     * setPosition will update the positionX and positionY of the ResizeNode. This will be invoked when the Node that this ResizeNode attached to is moving so that the ResizeNode will follow the Node.
+     *
+     * @param movementX The mouse movement value on the X-axis
+     * @param movementY The mouse movement value on the Y-axis
+     */
+    setPosition(movementX: number, movementY: number): void;
+    /**
+     * setPositionAndCascade will update the positionX and positionY of the ResizeNode and also cascade changes to related Node. This will be invoked when the user drags the ResizeNode so the position of the ResizeNode and the width and height of the Node would change accordingly.
+     * @param movementX The mouse movement value on the X-axis
+     * @param movementY The mouse movement value on the Y-axis
+     */
+    setPositionAndCascade(movementX: number, movementY: number): void;
+    /**
+     * delete is going to delete the ResizeNode from the resizeNodesStore.
+     */
+    delete(): void;
+}

package/components/graph/svelvet/resizableNodes/models/ResizeNode.js

@@ -0,0 +1,71 @@
+// import { writable, derived, get, readable } from 'svelte/store';
+import { stores } from '../../store/models/store';
+/** A ResizeNode class that implements ResizeNodeType interface
+* @param {string} id The id of the ResizeNode
+* @param {string} canvasId The canvasId of the Svelvet component that the instantiated ResizeNode will be on.
+* @param {string} nodeId The id of the Node that the instantiated ResizedNode will be attached to.
+* @param {number} positionX The X-axis position of the ResizeNode (left top corner of the ResizeNode)
+* @param {number} positionY The Y-axis position of the ResizeNode (left top corner of the ResizeNode)
+*/
+export class ResizeNode {
+    id;
+    canvasId;
+    nodeId;
+    positionX;
+    positionY;
+    constructor(id, canvasId, nodeId, positionX, positionY) {
+        this.id = id;
+        this.canvasId = canvasId;
+        this.nodeId = nodeId;
+        this.positionX = positionX;
+        this.positionY = positionY;
+    }
+    /**
+     * setPosition will update the positionX and positionY of the ResizeNode. This will be invoked when the Node that this ResizeNode attached to is moving so that the ResizeNode will follow the Node.
+     *
+     * @param movementX The mouse movement value on the X-axis
+     * @param movementY The mouse movement value on the Y-axis
+     */
+    setPosition(movementX, movementY) {
+        this.positionX += movementX;
+        this.positionY += movementY;
+    }
+    /**
+     * setPositionAndCascade will update the positionX and positionY of the ResizeNode and also cascade changes to related Node. This will be invoked when the user drags the ResizeNode so the position of the ResizeNode and the width and height of the Node would change accordingly.
+     * @param movementX The mouse movement value on the X-axis
+     * @param movementY The mouse movement value on the Y-axis
+     */
+    setPositionAndCascade(movementX, movementY) {
+        //declare variables needed to interact with the corresponding node to this resize anchor
+        const nodeId = this.nodeId;
+        const { nodesStore } = stores[this.canvasId];
+        //Updates the width/height of the corresponding Node
+        nodesStore.update((nodes) => {
+            const node = nodes[nodeId];
+            //sets condition so node cannot be less than 20 px in width or height.
+            if (node.width + movementX > 20 && node.height + movementY > 20) {
+                //Updates position to this resizeNode anchor. Must be done within the update method so ensure the position doesn't change if the width goes below 20px
+                this.positionX += movementX;
+                this.positionY += movementY;
+                //setSizeFromMovement will then update the anchors position as the width & height changes
+                node.setSizeFromMovement(movementX, movementY);
+            }
+            return { ...nodes };
+        });
+    }
+    /**
+     * delete is going to delete the ResizeNode from the resizeNodesStore.
+     */
+    delete() {
+        const store = stores[this.canvasId];
+        const { resizeNodesStore } = stores[this.canvasId];
+        resizeNodesStore.update((resizeNodes) => {
+            for (const resizeNodeId in resizeNodes) {
+                if (resizeNodes[resizeNodeId].id === this.id) {
+                    delete resizeNodes[resizeNodeId];
+                }
+            }
+            return { ...resizeNodes };
+        });
+    }
+}