windmill-components 1.70.0 → 1.75.0

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;

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

@@ -0,0 +1,180 @@
+const pkStringGenerator = () => (Math.random() + 1).toString(36).substring(7);
+import { rightCb, leftCb, topCb, bottomCb, } from '../../edges/controllers/anchorCbUser'; // these are callbacks used to calculate anchor position relative to node
+import { dynamicCbCreator, fixedCbCreator, } from '../../edges/controllers/anchorCbDev';
+import { ResizeNode } from '../../resizableNodes/models/ResizeNode';
+import { Anchor } from '../../edges/models/Anchor';
+import { Node } from '../../nodes/models/Node';
+import { Edge } from '../../edges/models/Edge';
+import { writable, derived, get, readable } from 'svelte/store';
+import { getEdgeById, getAnchors } from '../../edges/controllers/util';
+/**
+ * Creates resize node on the bottom right corner of the targeted Node
+ * @param canvasId The canvasId of the Svelvet component that holds the targeted Node
+ * @param nodeId The id of the Node that the resize node attached to
+ * @param posX The number of pixels on the x-axis relative to the left top corner of the targeted Node
+ * @param posY The number of pixels on the y-axis relative to the left top corner of the targeted Node
+ * @returns A ReziseNode object with randomized id, canvasId, nodeId, posX, and posY
+ */
+function createResizeNode(canvasId, nodeId, posX, posY) {
+    const id = pkStringGenerator();
+    const resizeNode = new ResizeNode(id, canvasId, nodeId, posX, posY);
+    return resizeNode;
+}
+/**
+ * Creates an Anchor on the targeted Node with infomation the userNode holds
+ * @param store An object containing the state of the Svelvet component. You can access the following through `store`: nodesStore, edgesStore, anchorsStore, etc.
+ * @param userNode A node that the user specifies. This is NOT the same as a Node object.
+ * @param sourceOrTarget User specified information of source or target
+ * @param canvasId The id of the canvas that holds the Anchor and its attached Node
+ * @param edge An edge that the user specifies. It should target the userNode as source or target. This is NOT the same as an Edge object
+ * @returns An Anchor object
+ */
+function createAnchor(store, userNode, sourceOrTarget, canvasId, edge) {
+    // edge case
+    if (userNode === null)
+        throw `you cannot create an anchor without a user node (for now)`;
+    const edgeId = edge.id;
+    const anchorId = pkStringGenerator();
+    // userCb is the appropriate source or taret callback from userEdge object. It is
+    // possible the user to NOT set userCb in which case userCb will be undefined
+    let userCb;
+    if (sourceOrTarget === 'target')
+        userCb = edge.targetAnchorCb;
+    else
+        userCb = edge.sourceAnchorCb;
+    // create anchor callbacks
+    let cb;
+    if (userCb === undefined)
+        cb = dynamicCbCreator(store, edgeId, anchorId);
+    else
+        cb = fixedCbCreator(store, edgeId, anchorId, userNode.id, userCb);
+    // Create a new anchor.
+    const anchor = new Anchor(anchorId, userNode.id, edgeId, sourceOrTarget, -1, // dummy variables for x,y,angle for now
+    -1, // dummy variables for x,y,angle for now
+    cb, canvasId, 0 // dummy variables for x,y,angle for now
+    );
+    // return
+    return anchor;
+}
+/**
+ * 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 function populateEdgesStore(store, edges, canvasId) {
+    const edgesStore = {};
+    for (let i = 0; i < edges.length; i++) {
+        const userEdge = edges[i];
+        //  { id: 'e1-2', source: 1, type: 'straight', target: 2, label: 'e1-2' },
+        // source is node.id for the source node
+        // target is node.id for the target node
+        // We need to get the anchors
+        const { source: sourceNodeId, target: targetNodeId, id: edgeId, type, label, labelBgColor, labelTextColor, edgeColor, animate, noHandle, arrow, clickCallback, className, } = userEdge;
+        const anchors = getAnchors(store, { edgeId: edgeId });
+        // check that we have two anchors for every edge
+        if (anchors.length !== 2)
+            throw 'We should have two anchors for every node';
+        // check that we have 1 source anchor and 1 target anchor. Since sourceOrTarget is typed to be either 'source'
+        //   or 'target', it suffices to check whether there are two unique elements
+        if (new Set(anchors.map((e) => e.sourceOrTarget)).size !== 2)
+            throw 'we should have one source and one target anchor';
+        // get source and target anchor
+        let sourceAnchor, targetAnchor;
+        if (anchors[0].sourceOrTarget === 'source') {
+            sourceAnchor = anchors[0];
+            targetAnchor = anchors[1];
+        }
+        else {
+            sourceAnchor = anchors[1];
+            targetAnchor = anchors[0];
+        }
+        edgesStore[edgeId] = new Edge(edgeId, sourceAnchor.positionX, sourceAnchor.positionY, targetAnchor.positionX, targetAnchor.positionY, canvasId, userEdge.label === undefined ? '' : userEdge.label, userEdge.type === undefined ? 'bezier' : userEdge.type, userEdge.labelBgColor === undefined ? 'white' : userEdge.labelBgColor, userEdge.labelTextColor === undefined ? 'black' : userEdge.labelTextColor, userEdge.edgeColor === undefined ? 'black' : userEdge.edgeColor, userEdge.animate === undefined ? false : userEdge.animate, userEdge.noHandle === undefined ? false : userEdge.noHandle, userEdge.arrow === undefined ? false : userEdge.arrow, userEdge.clickCallback === undefined ? () => { } : userEdge.clickCallback, userEdge.className === undefined ? '' : userEdge.className);
+    }
+    store.edgesStore.set(edgesStore);
+}
+/**
+ * Finds userNode (with UserNodeType; Not the same as the Node) by the node id from nodesStore
+ * @param id The id of the Node in its nodesStore
+ * @param userNodes The array of userNodes (NOT the same as Node object)
+ * @returns The node that user specified or null if not found
+ */
+function findUserNodeById(id, userNodes) {
+    for (let i = 0; i < userNodes.length; i++) {
+        const userNode = userNodes[i];
+        if (userNode.id === id)
+            return userNode;
+    }
+    return null;
+}
+/**
+ * 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 function populateAnchorsStore(store, nodes, edges, canvasId) {
+    // anchorsStore will populated and eventaully synchronized to store.anchorsStore
+    const anchorsStore = {};
+    // iterate through user edges. Note the user never explicitly defines anchors; we calculate anchors
+    // from the user edge/node information
+    for (let i = 0; i < edges.length; i++) {
+        const userEdge = edges[i];
+        // find the source and target userNodes. These will be used to create the nodeId foreign key and
+        // determine placement of the anchor based on userNode.targetPosition, useNode.sourcePosition
+        const { source: sourceNodeId, target: targetNodeId } = userEdge;
+        const sourceUserNode = findUserNodeById(sourceNodeId, nodes);
+        const targetUserNode = findUserNodeById(targetNodeId, nodes);
+        // create source anchor
+        const sourceAnchor = createAnchor(store, sourceUserNode, 'source', canvasId, userEdge);
+        // create target anchor
+        const targetAnchor = createAnchor(store, targetUserNode, 'target', canvasId, userEdge);
+        // store source and target anchors
+        anchorsStore[sourceAnchor.id] = sourceAnchor;
+        anchorsStore[targetAnchor.id] = targetAnchor;
+    }
+    //populates the anchorsStore
+    store.anchorsStore.set(anchorsStore);
+    // set anchor positions. We can only set anchor positions after anchorsStore and nodesStore
+    // has been populated. TODO: maybe add a check to see that anchorsStore and NodesStore populated?
+    const anchors = getAnchors(store);
+    for (const anchor of anchors)
+        anchor.callback();
+}
+/**
+ * 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 function populateNodesStore(store, nodes, canvasId) {
+    // this is the nodesStore object. THIS IS NOT THE SAME AS A NODESTORE
+    const nodesStore = {};
+    // iterate through user nodes and create node objects
+    for (let i = 0; i < nodes.length; i++) {
+        const userNode = nodes[i];
+        const nodeId = userNode.id;
+        // TODO: move sanitizing default values to middleware
+        const node = new Node(nodeId.toString(), userNode.position.x, userNode.position.y, userNode.width, userNode.height, userNode.bgColor ?? 'white', userNode.data, canvasId, userNode.borderColor === undefined ? 'black' : userNode.borderColor, userNode.image === undefined ? false : userNode.image, userNode.src === undefined ? '' : userNode.src, userNode.textColor === undefined ? '' : userNode.textColor, userNode.borderRadius === undefined ? 0 : userNode.borderRadius, userNode.childNodes === undefined ? [] : userNode.childNodes, userNode.className === undefined ? '' : userNode.className, userNode.clickCallback === undefined ? () => { } : userNode.clickCallback);
+        nodesStore[nodeId] = node;
+    }
+    // This is actually what sets the store
+    store.nodesStore.set(nodesStore);
+}
+/**
+ * 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 function populateResizeNodeStore(store, nodes, canvasId) {
+    const resizeNodeStore = {};
+    for (let i = 0; i < nodes.length; i++) {
+        const userNode = nodes[i];
+        const { id, width, height, position } = userNode;
+        const resizeNode = createResizeNode(canvasId, id, position.x + width, position.y + height);
+        resizeNodeStore[resizeNode.id] = resizeNode;
+    }
+    store.resizeNodesStore.set(resizeNodeStore);
+}

package/components/graph/svelvet/store/models/store.d.ts

@@ -0,0 +1,12 @@
+import type { StoreType } from '../types/types';
+/**
+  `store` is a dictionary of Svelvet stores.
+    * The reason why we have multiple Svelvet stores is to handle multiple canvases on the same page.
+    * A Svelvet store is the single source of truth for a canvas state.
+    * We discourage developers from interacting with stores directly; instead use the api methods in
+      `src/lib/controllers/storeApi.ts`. However, if need to direct access you can do so by importing:
+      `import { store } from 'src/lib/models/store';`
+*/
+export declare const stores: {
+    [key: string]: StoreType;
+};

package/components/graph/svelvet/store/models/store.js

@@ -0,0 +1,9 @@
+/**
+  `store` is a dictionary of Svelvet stores.
+    * The reason why we have multiple Svelvet stores is to handle multiple canvases on the same page.
+    * A Svelvet store is the single source of truth for a canvas state.
+    * We discourage developers from interacting with stores directly; instead use the api methods in
+      `src/lib/controllers/storeApi.ts`. However, if need to direct access you can do so by importing:
+      `import { store } from 'src/lib/models/store';`
+*/
+export const stores = {};

package/components/graph/svelvet/store/types/types.d.ts

@@ -0,0 +1,134 @@
+import type { CollapsibleType } from '../../collapsible/types/types';
+import type { Writable } from 'svelte/store';
+import type { AnchorType } from '../../edges/types/types';
+export interface ResizeNodeType {
+    id: string;
+    nodeId: string;
+    edgeId?: string;
+    canvasId: string;
+    anchorId?: string;
+    positionX: number;
+    positionY: number;
+    setPositionAndCascade: Function;
+    setPosition: Function;
+    delete: Function;
+}
+export interface StoreType {
+    nodesStore: Writable<{
+        [key: string]: NodeType;
+    }>;
+    edgesStore: Writable<{
+        [key: string]: EdgeType;
+    }>;
+    anchorsStore: Writable<{
+        [key: string]: AnchorType;
+    }>;
+    resizeNodesStore: Writable<{
+        [key: string]: ResizeNodeType;
+    }>;
+    potentialAnchorsStore: Writable<{
+        [key: string]: PotentialAnchorType;
+    }>;
+    widthStore: Writable<number>;
+    heightStore: Writable<number>;
+    backgroundStore: Writable<boolean>;
+    movementStore: Writable<boolean>;
+    nodeIdSelected: Writable<number>;
+    nodeSelected: Writable<boolean>;
+    d3Scale: Writable<number>;
+    options: Writable<{
+        [key: string]: any;
+    }>;
+    temporaryEdgeStore: Writable<TemporaryEdgeType[]>;
+    nodeCreate: Writable<boolean>;
+    boundary: Writable<boolean | PositionType>;
+    edgeEditModal: Writable<null | string>;
+    collapsibleStore: Writable<CollapsibleType[]>;
+    collapsibleOption: Writable<boolean>;
+    lockedOption: Writable<boolean>;
+    editableOption: Writable<boolean>;
+    d3ZoomParameters: Writable<{
+        [key: string]: number;
+    }>;
+    resizableOption: Writable<boolean>;
+    highlightEdgesOption: Writable<boolean>;
+}
+export interface PositionType {
+    x: number;
+    y: number;
+}
+export interface NodeType {
+    id: string;
+    width: number;
+    height: number;
+    positionX: number;
+    positionY: number;
+    bgColor: string;
+    data: {
+        html?: any;
+        custom?: {
+            component: any;
+            props?: any;
+            cb?: (e: string, detail: any) => void;
+        };
+        img?: any;
+        label?: string;
+    };
+    canvasId: string;
+    setPositionFromMovement: Function;
+    delete: Function;
+    setSizeFromMovement: Function;
+    setExportableData: Function;
+    borderColor: string;
+    image: boolean;
+    src: string;
+    textColor: string;
+    borderRadius: number;
+    childNodes: string[];
+    className: string;
+    clickCallback: Function;
+}
+export interface EdgeType {
+    id: string;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    canvasId: string;
+    label: string;
+    type: 'straight' | 'smoothstep' | 'step' | 'bezier';
+    labelBgColor: string;
+    labelTextColor: string;
+    edgeColor: string;
+    animate: boolean;
+    noHandle: boolean;
+    arrow: boolean;
+    clickCallback: Function;
+    className: string;
+    delete: Function;
+    setExportableData: Function;
+}
+export interface PotentialAnchorType {
+    id: string;
+    nodeId: string;
+    callback: Function;
+    positionX: number;
+    positionY: number;
+    angle: number;
+    canvasId: string;
+    delete: Function;
+}
+export interface TemporaryEdgeType {
+    id: string;
+    sourcePotentialAnchorId: string;
+    sourceX: number;
+    sourceY: number;
+    targetPotentialAnchorId: string | null;
+    targetX: number;
+    targetY: number;
+    canvasId: string;
+    type: string;
+    edgeColor: string;
+    createEdge: Function;
+    createNode: Function;
+}

package/components/graph/svelvet/store/types/types.js

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

package/components/graph/svelvet/types/README.md

@@ -0,0 +1,3 @@
+# Types
+
+This folder contains types exported to the user, as decribed in feature: `https://www.svelvet.io/docs/typescript/`

package/components/graph/svelvet/types/index.d.ts

@@ -0,0 +1,2 @@
+import type { UserEdgeType, UserNodeType } from './types';
+export { UserEdgeType, UserNodeType };

package/components/graph/svelvet/types/index.js

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