windmill-components 1.70.0 → 1.77.0

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 };
+        });
+    }
+}

package/components/graph/svelvet/resizableNodes/views/ResizeNode.svelte

@@ -0,0 +1,81 @@
+<script>import { findStore } from '../../store/controllers/storeApi';
+import { writable, derived, get, readable } from 'svelte/store';
+export let resizeId;
+export let canvasId;
+const store = findStore(canvasId);
+const { resizeNodesStore, nodeSelected } = store;
+let isSelected = false;
+let reactResizeNode;
+$: reactResizeNode = $resizeNodesStore[resizeId];
+</script>
+
+<svelte:window
+  on:mousemove={(e) => {
+    e.preventDefault();
+    if (isSelected) {
+      resizeNodesStore.update((resNode) => {
+        const newResNode = resNode[resizeId];
+        const d3Scale = get(store.d3Scale);
+        newResNode.setPositionAndCascade(
+          e.movementX / d3Scale,
+          e.movementY / d3Scale,
+          resizeId
+        );
+        return { ...resNode };
+      });
+    }
+  }}
+  on:mouseup={(e) => {
+    e.preventDefault();
+    // don't need to set $nodeSelected = false because Node component will do it for you
+    isSelected = false;
+  }}
+/>
+
+<div
+  on:mousedown={(e) => {
+    e.preventDefault();
+    $nodeSelected = true;
+    isSelected = true;
+  }}
+  on:mouseover={(e) => ($nodeSelected = true)}
+  on:focus
+  on:mouseleave={(e) => ($nodeSelected = false)}
+  on:mouseenter={(e) => ($nodeSelected = true)}
+  on:wheel|preventDefault
+  class="ResizeNode"
+  style="
+  left: {reactResizeNode.positionX - 10}px;
+  top: {reactResizeNode.positionY - 10}px;
+  width: {20}px;
+  height: {20}px;
+  background-color: purple;
+  border-color: purple;
+  border-radius: 50%;"
+  id="svelvet-{resizeId}"
+/>
+
+<style>
+  .ResizeNode {
+    position: absolute;
+    display: grid;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    cursor: move;
+    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);
+    opacity: 0;
+    pointer-events: auto; /* this is needed for pointer events to work since we disable them in graphview */
+  }
+
+  .ResizeNode:hover {
+    cursor: nwse-resize;
+    opacity: 0.5;
+  }</style>

package/components/graph/svelvet/resizableNodes/views/ResizeNode.svelte.d.ts

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

package/components/graph/svelvet/store/controllers/storeApi.d.ts

@@ -0,0 +1,32 @@
+import type { StoreType } from '../types/types';
+import type { UserNodeType, UserEdgeType } from '../../types/types';
+/**
+ * findStore is going to return the target Svelvet store with the canvasId provided as argument.
+ * There can be multiple Svelvet canvases on the same page, and each has their own store with a unique canvasId.
+ * @param canvasId The canvasId of a Svelvet component
+ * @returns The store of a Svelvet component that matches the canvasId
+ */
+export declare function findStore(canvasId: string): StoreType;
+/**
+ * createStoreEmpty will initialize a new Svelvet store with a unique canvasId.
+ * If you have multiple Svelvet components on the page, the stores object will look like the following example:
+ * const stores = \{
+ *                  canvasId-1: store of Svelvet component 1,
+ *                  canvasId-2: store of Svelvet component 2,
+ *                  canvasId-3: store of Svelvet component 3,
+ *                \}
+ * Notes: This should be called once every time you initialize a new Svelvet canvas, (ie, only in the Svelvet.svelte file).
+ * This function will initialize an empty store for the Svelvet component and should be followed by invoking populateSvelvetStoreFromUserInput to populate all the initial state from the user input.
+ *
+ * @param canvasId The canvasId of the newly created Svelvet component
+ * @returns An empty store for the newly created Svelvet component.
+ */
+export declare function createStoreEmpty(canvasId: string): StoreType;
+/**
+ * populateSvelvetStoreFromUserInput will populate all the states and set these states into the Svelvet store initialized by invoking createStoreEmpty
+ *
+ * @param canvasId The canvasId of the Svelvet component you are creating a store for
+ * @param nodes This is an array of objects containing node info that is defined by the user. NOTE THAT THE STRUCTURE DIFFERS FROM THE NODES CLASS. The whole point of populateSvelvetStoreFromUserInput is to convert nodes into proper Svelvet Node objects. An example of nodes is in $routes/testingplayground/index.svelte
+ * @param edges Same as nodes, this is an array of objects containing edge info THAT IS DIFFERENT FROM THE EDGE CLASS.
+ */
+export declare function populateSvelvetStoreFromUserInput(canvasId: string, nodes: UserNodeType[], edges: UserEdgeType[]): void;

package/components/graph/svelvet/store/controllers/storeApi.js

@@ -0,0 +1,111 @@
+/*
+
+
+Important functions (in order of how likely I think you are to use them):
+
+findStore(canvasId: string)
+- Input: canvasId. There can be multiple Svelvet canvases on the same page, and each has their own store
+- Returns: store
+- Notes: You will need to call this function on every component you make
+
+getNodes(store, filter)
+- Description: this function returns of list of Node objects
+- Input: store: the store where you get the list of Node objects from
+-        filter: an object where you can filter the array. For example, if you want to find nodes with an id of 'sdf-2d3fs' and positionX=35, then you
+                 would set filter = {id: 'sdf-2d3fs, positionX: 35}.
+                 Right now, you can only test for equality.
+- Notes: This is a very mongoose way of retrieving information. Given the relational nature of our stores, maybe it would be better to use an SQL-like syntax
+         This array is non-reactive (ie, you cannot use information from this array to force a re-render of a Svelte component)
+
+createStoreEmpty(canvasId: string)
+- Input: canvasId.
+- Returns: store
+- Notes. This should be called once every time you initialize a new Svelvet canvas, (ie, only in the Svelvet.svelte file)
+
+populateSvelvetStoreFromUserInput(canvasId, nodes, edges)
+- canvasId: this the the canvasId of the Svelvet component you are creating a store for
+- nodes: this is an array of objects containing node info that is defined by the user. NOTE THAT THE STRUCTURE DIFFERS FROM THE NODES CLASS
+         The whole point of populateSvelvetStoreFromUserInput is to convert nodes into proper Svelvet Node objects. An example of nodes is in
+         $routes/testingplayground/index.svelte
+- edges: same as nodes, this is an array of objects containing edge info THAT IS DIFFERENT FROM THE EDGE CLASS.
+- Returns: store
+*/
+import { stores } from '../models/store';
+import { writable, get } from 'svelte/store';
+import { populateAnchorsStore, populateNodesStore, populateEdgesStore, populateResizeNodeStore, } from './util';
+import { populateCollapsibleStore } from '../../collapsible/controllers/util';
+/**
+ * findStore is going to return the target Svelvet store with the canvasId provided as argument.
+ * There can be multiple Svelvet canvases on the same page, and each has their own store with a unique canvasId.
+ * @param canvasId The canvasId of a Svelvet component
+ * @returns The store of a Svelvet component that matches the canvasId
+ */
+export function findStore(canvasId) {
+    return stores[canvasId];
+}
+/**
+ * createStoreEmpty will initialize a new Svelvet store with a unique canvasId.
+ * If you have multiple Svelvet components on the page, the stores object will look like the following example:
+ * const stores = \{
+ *                  canvasId-1: store of Svelvet component 1,
+ *                  canvasId-2: store of Svelvet component 2,
+ *                  canvasId-3: store of Svelvet component 3,
+ *                \}
+ * Notes: This should be called once every time you initialize a new Svelvet canvas, (ie, only in the Svelvet.svelte file).
+ * This function will initialize an empty store for the Svelvet component and should be followed by invoking populateSvelvetStoreFromUserInput to populate all the initial state from the user input.
+ *
+ * @param canvasId The canvasId of the newly created Svelvet component
+ * @returns An empty store for the newly created Svelvet component.
+ */
+export function createStoreEmpty(canvasId) {
+    stores[canvasId] = {
+        nodesStore: writable({}),
+        edgesStore: writable({}),
+        anchorsStore: writable({}),
+        resizeNodesStore: writable({}),
+        potentialAnchorsStore: writable({}),
+        widthStore: writable(600),
+        heightStore: writable(600),
+        backgroundStore: writable(false),
+        movementStore: writable(true),
+        nodeSelected: writable(false),
+        nodeIdSelected: writable(-1),
+        d3Scale: writable(1),
+        options: writable({}),
+        temporaryEdgeStore: writable([]),
+        nodeCreate: writable(false),
+        boundary: writable(false),
+        edgeEditModal: writable(null),
+        collapsibleStore: writable([]),
+        collapsibleOption: writable(false),
+        lockedOption: writable(false),
+        editableOption: writable(false),
+        d3ZoomParameters: writable({}),
+        resizableOption: writable(true),
+        highlightEdgesOption: writable(true), // option to turn on/off highlightable edges
+    };
+    return stores[canvasId];
+}
+/**
+ * populateSvelvetStoreFromUserInput will populate all the states and set these states into the Svelvet store initialized by invoking createStoreEmpty
+ *
+ * @param canvasId The canvasId of the Svelvet component you are creating a store for
+ * @param nodes This is an array of objects containing node info that is defined by the user. NOTE THAT THE STRUCTURE DIFFERS FROM THE NODES CLASS. The whole point of populateSvelvetStoreFromUserInput is to convert nodes into proper Svelvet Node objects. An example of nodes is in $routes/testingplayground/index.svelte
+ * @param edges Same as nodes, this is an array of objects containing edge info THAT IS DIFFERENT FROM THE EDGE CLASS.
+ */
+export function populateSvelvetStoreFromUserInput(canvasId, nodes, edges) {
+    // find the store
+    const store = findStore(canvasId);
+    // populate store.nodesStore with user nodes
+    populateNodesStore(store, nodes, canvasId);
+    // populate store.anchorsStore with anchors. Note the userdoes not explictly define anchors; anchors are calculated from the edges
+    populateAnchorsStore(store, nodes, edges, canvasId);
+    // populate edges
+    populateEdgesStore(store, edges, canvasId);
+    //populate resize Store
+    if (get(store.resizableOption))
+        populateResizeNodeStore(store, nodes, canvasId);
+    // populatate collapsible objects if "collapsible" feature is turned on
+    if (get(store.collapsibleOption))
+        populateCollapsibleStore(store, nodes, edges, canvasId);
+}

package/components/graph/svelvet/store/controllers/userApi.d.ts

@@ -0,0 +1,3 @@
+export declare function getD3PositionX(canvasId: any): number;
+export declare function getD3PositionY(canvasId: any): number;
+export declare function getD3Zoom(canvasId: any): number;

package/components/graph/svelvet/store/controllers/userApi.js

@@ -0,0 +1,18 @@
+import { findStore } from './storeApi';
+import { get } from 'svelte/store';
+export function getD3PositionX(canvasId) {
+    const store = findStore(canvasId);
+    const width = get(store.widthStore);
+    const x = width / 2 - get(store.d3ZoomParameters).x; // user input is shifted so that x=0, y=0 occurs in the center
+    return x;
+}
+export function getD3PositionY(canvasId) {
+    const store = findStore(canvasId);
+    const height = get(store.heightStore);
+    const y = height / 2 - get(store.d3ZoomParameters).y; // user input is shifted so that x=0, y=0 occurs in the center
+    return y;
+}
+export function getD3Zoom(canvasId) {
+    const store = findStore(canvasId);
+    return get(store.d3ZoomParameters).k;
+}

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

@@ -0,0 +1,31 @@
+import type { StoreType } from '../types/types';
+import type { UserNodeType, UserEdgeType } from '../../types/types';
+/**
+ * Populates edgesStore of Edges. This function does not return the edgesStore. Instead it sets the nodesStore of Svelvet store.
+ * @param store An object containing the state of the Svelvet component. You can access the following through `store`: nodesStore, edgesStore, anchorsStore, etc.
+ * @param edges An edge that the user specifies. This is NOT the same as a Edge object.
+ * @param canvasId The canvasId of the Svelvet component that holds the Edges
+ */
+export declare function populateEdgesStore(store: StoreType, edges: UserEdgeType[], canvasId: string): void;
+/**
+ * Populates the anchorsStore. This will overwrite any data in the AnchorsStore.
+ * @param store The Svelvet store containing the state of the Svelvet component
+ * @param nodes An array of user specified nodes
+ * @param edges An array of user specified edges
+ * @param canvasId The canvasId of the Svelvet component that holds the nodes and edges
+ */
+export declare function populateAnchorsStore(store: StoreType, nodes: UserNodeType[], edges: UserEdgeType[], canvasId: string): void;
+/**
+ * Populates the nodesStore. This will overwrite any data in the nodesStore.
+ * @param store The Svelvet store containing the state of the Svelvet component
+ * @param nodes An array of user specifed nodes
+ * @param canvasId The canvasId of the Svelvet component that holds the nodes
+ */
+export declare function populateNodesStore(store: StoreType, nodes: UserNodeType[], canvasId: string): void;
+/**
+ * Populates the resizeNodeStore. If a Node is resizable, a small ResizeNode object is going to be attached to the Node's right bottom corner to react to the mouse drag.
+ * @param store The Svelvet store containing the state of the Svelvet component
+ * @param nodes An array of user specifed nodes (NOT the same as Node)
+ * @param canvasId The canvasId of the Svelvet component that holds the resizeNodes
+ */
+export declare function populateResizeNodeStore(store: StoreType, nodes: UserNodeType[], canvasId: string): void;