windmill-components 1.70.0 → 1.77.0

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 { writable, derived, get, readable } 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,78 @@
+/** 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;
+    /**
+     * delete will handle the deletion of a Node (also waterfall down to delete anchors and edges)
+     */
+    delete(): 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;
+    };
+}

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 {};