windmill-components 1.60.3 → 1.83.1

package/components/graph/svelvet/container/views/Svelvet.svelte

@@ -0,0 +1,115 @@
+<script>const pkStringGenerator = () => (Math.random() + 1).toString(36).substring(7);
+import { createStoreEmpty, populateSvelvetStoreFromUserInput } from '../../store/controllers/storeApi';
+import { afterUpdate, onMount } from 'svelte';
+import GraphView from './GraphView.svelte';
+import { sanitizeCanvasOptions, sanitizeUserNodesAndEdges } from '../controllers/middleware';
+export let nodes; // TODO: update type to make possible user id being a number
+export let edges; // TODO: update type to make possible user id being a number
+export let bgColor = '#ffffff'; // this is used to set the background color of the the Svelvet canvas
+export let width = 600;
+export let height = 600;
+export let background = true;
+export let movement = true;
+export let canvasId = pkStringGenerator();
+export let snap = false;
+export let snapTo = 30;
+export let nodeCreate = false;
+export let boundary = false;
+export let collapsible = false;
+export let locked = false; // if true, node movement is disabled
+export let editable = false;
+export let highlightEdges = true;
+export let scroll = false;
+// generates a unique string for each svelvet component's unique store instance
+// creates a store that uses the unique sting as the key to create and look up the corresponding store
+// this way we can have multiple Svelvet Components on the same page and prevent overlap of information
+const store = createStoreEmpty(canvasId);
+// stores (state) within stores, so that we cannot access values from everywhere
+//   const { widthStore, heightStore, nodesStore, derivedEdges } = svelvetStore;
+let error = '';
+// sets the state of the store to the values passed in from the Svelvet Component on initial render
+onMount(() => {
+    try {
+        // sanitize user input
+        let output = sanitizeUserNodesAndEdges(nodes, edges);
+        const userNodes = output['userNodes'];
+        const userEdges = output['userEdges'];
+        // set canvas related stores. you need to do this before setting node/edge related stores because
+        // initializing nodes/edges might read relevant options from the store.
+        store.widthStore.set(width);
+        store.heightStore.set(height);
+        store.backgroundStore.set(background);
+        store.movementStore.set(movement);
+        const optionsObj = { snap, snapTo }; // TODO: rename to snap
+        store.options.set(optionsObj); //
+        store.nodeCreate.set(nodeCreate);
+        store.boundary.set(boundary);
+        store.collapsibleOption.set(collapsible);
+        store.lockedOption.set(locked);
+        store.editableOption.set(editable);
+        store.highlightEdgesOption.set(highlightEdges);
+        // make sure that all canvas options are compatible
+        sanitizeCanvasOptions(store);
+        // set node/edge related stores
+        populateSvelvetStoreFromUserInput(canvasId, userNodes, userEdges);
+        error = '';
+    }
+    catch (e) {
+        error = 'There was an error displaying the flow. Please report the error.' + e.message;
+        console.error(e);
+    }
+});
+// // enables data reactivity. TODO: this needs to be added back in
+// Probably need to use findStore, not create store
+afterUpdate(() => {
+    try {
+        // sanitize user input
+        let output = sanitizeUserNodesAndEdges(nodes, edges);
+        const userNodes = output['userNodes'];
+        const userEdges = output['userEdges'];
+        // set canvas related stores. you need to do this before setting node/edge related stores because
+        // initializing nodes/edges might read relevant options from the store.
+        store.widthStore.set(width);
+        store.heightStore.set(height);
+        store.backgroundStore.set(background);
+        store.movementStore.set(movement);
+        const optionsObj = { snap, snapTo }; // TODO: rename to snap
+        store.options.set(optionsObj); //
+        store.nodeCreate.set(nodeCreate);
+        store.boundary.set(boundary);
+        store.collapsibleOption.set(collapsible);
+        store.lockedOption.set(locked);
+        store.editableOption.set(editable);
+        store.highlightEdgesOption.set(highlightEdges);
+        // make sure that all canvas options are compatible
+        sanitizeCanvasOptions(store);
+        // set node/edge related stores
+        populateSvelvetStoreFromUserInput(canvasId, userNodes, userEdges);
+        error = '';
+    }
+    catch (e) {
+        error = 'There was an error displaying the flow. Please report the error.' + e.message;
+        console.error(e);
+    }
+});
+</script>
+
+<!-- Now that a store has been created from the initial nodes and initial edges we drill props from the store down to the D3 GraphView along with the unique key -->
+<div
+	class="Svelvet"
+	style={`width: ${width}px; height: ${height}px; background-color: ${bgColor};`}
+>
+	{#if error != ''}
+		<div class="error text-red-600 center-center p-4">{error}</div>
+	{:else}
+		<GraphView {scroll} {canvasId} {width} {height} {boundary} />
+	{/if}
+</div>
+
+<style>
+	.Svelvet {
+		position: relative;
+		overflow: hidden;
+		display: grid;
+		font-family: 'Segoe UI', sans-serif;
+	}</style>

package/components/graph/svelvet/container/views/Svelvet.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponentTyped } from "svelte";
+import type { UserEdgeType, UserNodeType } from '../../types/types';
+declare const __propDef: {
+    props: {
+        nodes: UserNodeType[];
+        edges: UserEdgeType[];
+        bgColor?: string | undefined;
+        width?: number | undefined;
+        height?: number | undefined;
+        background?: boolean | undefined;
+        movement?: boolean | undefined;
+        canvasId?: string | undefined;
+        snap?: boolean | undefined;
+        snapTo?: number | undefined;
+        nodeCreate?: boolean | undefined;
+        boundary?: boolean | undefined;
+        collapsible?: boolean | undefined;
+        locked?: boolean | undefined;
+        editable?: boolean | undefined;
+        highlightEdges?: boolean | undefined;
+        scroll?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SvelvetProps = typeof __propDef.props;
+export type SvelvetEvents = typeof __propDef.events;
+export type SvelvetSlots = typeof __propDef.slots;
+export default class Svelvet extends SvelteComponentTyped<SvelvetProps, SvelvetEvents, SvelvetSlots> {
+}
+export {};

package/components/graph/svelvet/customCss/controllers/getCss.d.ts

@@ -0,0 +1,2 @@
+import type { NodeType, StoreType } from '../../store/types/types';
+export declare const forceCssHeightAndWidth: (store: StoreType, node: NodeType) => void;

package/components/graph/svelvet/customCss/controllers/getCss.js

@@ -0,0 +1,46 @@
+// Required for "custom css" feature
+// WHAT: For a given node with a user-defined classname, see if there are any css properties for height and width
+//       Get that height and width and set properties in node store. This is necessary for
+export const forceCssHeightAndWidth = (store, node) => {
+    let width, height, innerText;
+    // Look through each CSS rule to find the one the user defined
+    for (let i = 0; i < document.styleSheets.length; i++) {
+        const styleSheet = document.styleSheets[i];
+        const styleRules = styleSheet.cssRules;
+        for (let j = 0; j < styleRules.length; j++) {
+            const rule = styleRules[j];
+            // this is necessary to get rid of typescript warning for rule.selectorText
+            if (!(rule instanceof CSSStyleRule))
+                continue;
+            if (rule.selectorText === `.${node.className}`) {
+                const initialText = rule.cssText; // getting the full text of the CSS rule
+                const i = initialText.indexOf('{'); // finding index of first bracket
+                innerText = initialText.substring(i + 1, initialText.length - 1); // extracting the CSS to insert into inline style
+                // Adjusting the width and height if they are set via the custom class
+                const arr = innerText.split(' ');
+                arr.forEach((str, i) => {
+                    if (str === 'width:') {
+                        width = str.concat(arr[i + 1]); // go through the array and join width and the number
+                        const w = parseInt(arr[i + 1]); // getting the number for the width
+                        width = w;
+                    }
+                    if (str === 'height:') {
+                        height = str.concat(arr[i + 1]); // same as with the width
+                        const h = parseInt(arr[i + 1]);
+                        height = h;
+                    }
+                });
+            }
+        }
+    }
+    // update the width/height of the node
+    store.nodesStore.update((nodes) => {
+        if (width !== undefined)
+            nodes[node.id].width = width;
+        if (height !== undefined)
+            nodes[node.id].height = height;
+        return { ...nodes };
+    });
+    // move the node a bit to force update to anchors, potential anchors
+    node.setPositionFromMovement(0, 0);
+};

package/components/graph/svelvet/d3/controllers/d3.d.ts

@@ -0,0 +1,5 @@
+import type { ZoomBehavior } from 'd3-zoom';
+export declare function zoomInit(d3: any, canvasId: any, d3Zoom: any, d3Translate: any, initialLocation: any, initialZoom: any, d3Scale: any): any;
+export declare function determineD3Instance(boundary: any, d3: {
+    zoom: () => ZoomBehavior<any, any>;
+}, nodeSelected: any, width: any, height: any, movementStore: any, backgroundStore: any, gridSize: any, dotSize: any, canvasId: any, d3Scale: any, handleZoom: any): ZoomBehavior<any, any>;

package/components/graph/svelvet/d3/controllers/d3.js

@@ -0,0 +1,59 @@
+import { get } from 'svelte/store';
+export function zoomInit(d3, canvasId, d3Zoom, d3Translate, initialLocation, initialZoom, d3Scale) {
+    //set default zoom logic
+    d3.select(`.Edges-${canvasId}`)
+        //makes sure translation is default at center coordinates
+        .transition()
+        .duration(0)
+        .call(d3Zoom.translateTo, 0, 0)
+        //moves camera to coordinates
+        .transition()
+        .duration(0)
+        .call(d3Zoom.translateTo, initialLocation.x / initialZoom, initialLocation.y / initialZoom)
+        // zooms in on selected point
+        .transition()
+        .duration(0)
+        .call(d3Zoom.scaleTo, initialZoom.toFixed(2));
+    // updates d3Translate with d3 object with x, y, and k values to be sent down to the minimap to be further calculated further
+    d3Translate = d3.zoomIdentity
+        .translate(initialLocation.x, initialLocation.y)
+        .scale(initialZoom.toFixed(2));
+    d3.select(`.Nodes-${canvasId}`)
+        .transition()
+        .duration(0)
+        .call(d3Zoom.translateTo, 0, 0)
+        .transition()
+        .duration(0)
+        .call(d3Zoom.translateTo, initialLocation.x / initialZoom, initialLocation.y / initialZoom)
+        .transition()
+        .duration(0)
+        .call(d3Zoom.scaleTo, initialZoom.toFixed(2));
+    // sets D3 scale to current k of object
+    d3Scale.set(d3.zoomTransform(d3.select(`.Nodes-${canvasId}`)).k);
+    return d3Translate;
+}
+// create d3 instance conditionally based on boundary prop
+export function determineD3Instance(boundary, d3, nodeSelected, width, height, movementStore, backgroundStore, gridSize, dotSize, canvasId, d3Scale, handleZoom) {
+    if (boundary) {
+        return d3
+            .zoom()
+            .filter(() => !get(nodeSelected))
+            .scaleExtent([0.4, 4]) // limits for zooming in/out
+            .translateExtent([
+            [0, 0],
+            [boundary.x, boundary.y],
+        ]) // world extent
+            .extent([
+            [0, 0],
+            [width, height],
+        ])
+            .on('zoom', handleZoom);
+    }
+    else {
+        return d3
+            .zoom()
+            .filter(() => !get(nodeSelected))
+            .scaleExtent([0.4, 2])
+            .on('zoom', handleZoom);
+    }
+}

package/components/graph/svelvet/edges/controllers/anchorCbDev.d.ts

@@ -0,0 +1,4 @@
+import type { AnchorCbType } from '../../edges/types/types';
+import type { StoreType } from '../../store/types/types';
+export declare function fixedCbCreator(store: StoreType, edgeId: string, anchorId: string, userNodeId: string, positionCb: Function): AnchorCbType;
+export declare function dynamicCbCreator(store: StoreType, edgeId: string, anchorId: string): AnchorCbType;

package/components/graph/svelvet/edges/controllers/anchorCbDev.js

@@ -0,0 +1,92 @@
+import { rightCb, leftCb, topCb, bottomCb } from './anchorCbUser'; // these are callbacks used to calculate anchor position relative to node
+import { getAnchors } from './util';
+import { getNodeById } from '../../nodes/controllers/util';
+export function fixedCbCreator(store, edgeId, anchorId, userNodeId, positionCb // positionCb should be a function that takes 4 arguments (x,y,width,height) and returns a 3-array [x,y,angle] that represents the x,y position of the anchor as well as it's angle with respect to it's node.
+) {
+    const rn = fixedCb;
+    rn.type = 'fixed';
+    return rn;
+    function fixedCb() {
+        // get the two anchors
+        const anchors = getAnchors(store, { edgeId: edgeId });
+        if (anchors.length !== 2)
+            throw `there should be two anchors per edge, have: ${anchors.length}`;
+        let [anchorSelf, anchorOther] = anchors;
+        if (anchorSelf.id !== anchorId)
+            [anchorSelf, anchorOther] = [anchorOther, anchorSelf];
+        const node = getNodeById(store, userNodeId);
+        const { positionX, positionY, width, height } = node;
+        const [x, y, angle] = positionCb(positionX, positionY, width, height);
+        anchorSelf.positionX = x;
+        anchorSelf.positionY = y;
+        anchorSelf.angle = angle;
+        // update the other anchor if it is a dynamic anchor
+        // Note dyanamic anchor callbacks have a check that prevents an infinite loop
+        if (anchorOther.callback.type === 'dynamic')
+            anchorOther.callback();
+    }
+}
+export function dynamicCbCreator(store, edgeId, anchorId) {
+    const rn = dynamicCb;
+    rn.type = 'dynamic';
+    return rn;
+    function dynamicCb() {
+        // get the two anchors
+        const anchors = getAnchors(store, { edgeId: edgeId });
+        if (anchors.length !== 2)
+            throw `there should be two anchors per edge, have: ${anchors.length}`;
+        let [anchorSelf, anchorOther] = anchors;
+        if (anchorSelf.id !== anchorId)
+            [anchorSelf, anchorOther] = [anchorOther, anchorSelf];
+        // get the two nodes
+        const nodeSelf = getNodeById(store, anchorSelf.nodeId);
+        const nodeOther = getNodeById(store, anchorOther.nodeId);
+        // get the midpoints
+        const [xSelf, ySelf, xOther, yOther] = [
+            nodeSelf.positionX + nodeSelf.width / 2,
+            nodeSelf.positionY + nodeSelf.height / 2,
+            nodeOther.positionX + nodeOther.width / 2,
+            nodeOther.positionY + nodeOther.height / 2,
+        ];
+        // record angle for later. We use this so we don't have an infinite loop
+        let prevAngle = anchorSelf.angle;
+        // calculate the slope
+        const slope = (ySelf - yOther) / (xSelf - xOther);
+        // slope<1 means -45 to 45 degrees so left/right anchors
+        if (Math.abs(slope) < 1) {
+            // self node is on the left, other node is on the right
+            if (nodeSelf.positionX < nodeOther.positionX) {
+                const [selfX, selfY] = rightCb(nodeSelf.positionX, nodeSelf.positionY, nodeSelf.width, nodeSelf.height);
+                const [otherX, otherY] = leftCb(nodeOther.positionX, nodeOther.positionY, nodeOther.width, nodeOther.height);
+                anchorSelf.setPosition(selfX, selfY);
+                anchorSelf.angle = 0; // if the self node is on the left, the anchor should have orientation of 0 degrees on the unit circle
+            }
+            else {
+                // in this case, the self node is on the right and the other node is on the left
+                const [selfX, selfY] = leftCb(nodeSelf.positionX, nodeSelf.positionY, nodeSelf.width, nodeSelf.height);
+                const [otherX, otherY] = rightCb(nodeOther.positionX, nodeOther.positionY, nodeOther.width, nodeOther.height);
+                anchorSelf.setPosition(selfX, selfY);
+                anchorSelf.angle = 180;
+            }
+        }
+        else {
+            if (nodeSelf.positionY < nodeOther.positionY) {
+                // here the self node is above the other node
+                const [selfX, selfY] = bottomCb(nodeSelf.positionX, nodeSelf.positionY, nodeSelf.width, nodeSelf.height);
+                const [otherX, otherY] = topCb(nodeOther.positionX, nodeOther.positionY, nodeOther.width, nodeOther.height);
+                anchorSelf.setPosition(selfX, selfY);
+                anchorSelf.angle = 270;
+            }
+            else {
+                const [selfX, selfY] = topCb(nodeSelf.positionX, nodeSelf.positionY, nodeSelf.width, nodeSelf.height);
+                const [otherX, otherY] = bottomCb(nodeOther.positionX, nodeOther.positionY, nodeOther.width, nodeOther.height);
+                anchorSelf.setPosition(selfX, selfY);
+                anchorSelf.angle = 90;
+            }
+        }
+        // if the anchor changed position, then do operation for other anchor
+        // otherwise, don't do anything. This check is so we don't have an infinite loop
+        if (prevAngle !== anchorSelf.angle)
+            anchorOther.callback();
+    }
+}

package/components/graph/svelvet/edges/controllers/anchorCbUser.d.ts

@@ -0,0 +1,57 @@
+/**
+ *  These are callbacks used to define anchor positions relative to the node they are attached to.
+ *  These may be provided to developers as examples of how to write their own custom callbacks for adjustable anchors
+ *  It calculates the position of an anchor (x,y) coordinates given a node parameterized by (x,y,width, height)
+ */
+/**
+ * @function rightCb - This is a callback function to define the anchor position on the node to be on the right side of the node.
+ * @param xNode - positionX of the attached node
+ * @param yNode - positionY of the attached node
+ * @param widthNode -  width of the attached node
+ * @param heightNode - height of the attached node
+ * @returns [xAnchor, yAnchor, 0]
+ * xAnchor - positionX for the anchor
+ * yAnchor - positionY for the anchor
+ * 0 - this is angle of the anchor with respect to the node. The right anchor should fall at 0 degrees on the unit circle.
+ * @export rightCb
+ */
+export declare const rightCb: (xNode: number, yNode: number, widthNode: number, heightNode: number) => number[];
+/**
+ * @function leftCb - This is a callback function to define the anchor position on the node to be on the left side of the node.
+ * @param xNode - positionX of the attached node
+ * @param yNode - positionY of the attached node
+ * @param widthNode - width of the attached node
+ * @param heightNode - height of the attached node
+ * @returns [xAnchor, yAnchor, 180]
+ *   xAnchor - positionX for the anchor
+ *   yAnchor - positionY for the anchor
+ *   180 - this is angle of the anchor with respect to the node. The left anchor should fall at 180 degrees on the unit circle.
+ * @export leftCb
+ */
+export declare const leftCb: (xNode: number, yNode: number, widthNode: number, heightNode: number) => number[];
+/**
+ * @function topCb - This is a callback function to define the anchor position on the node to be on the top of the node.
+ * @param xNode - positionX of the attached node
+ * @param yNode - positionY of the attached node
+ * @param widthNode - width of the attached node
+ * @param heightNode - height of the attached node
+ * @returns [xAnchor, yAnchor, 90]
+ *   xAnchor - positionX for the anchor
+ *   yAnchor - positionY for the anchor
+ *   90 - this is angle of the anchor with respect to the node. The top anchor should fall at 90 degrees on the unit circle.
+ * @export topCb
+ */
+export declare const topCb: (xNode: number, yNode: number, widthNode: number, heightNode: number) => number[];
+/**
+ * @function bottomCb - This is a callback function to define the anchor position on the node to be on the bottom of the node.
+ * @param xNode - positionX of the attached node
+ * @param yNode - positionY of the attached node
+ * @param widthNode - width of the attached node
+ * @param heightNode - height of the attached node
+ * @returns - [xAnchor, yAnchor, 90]
+ *   xAnchor - positionX for the anchor
+ *   yAnchor - positionY for the anchor
+ *   270 - this is angle of the anchor with respect to the node. The bottom anchor should fall at 270 degrees on the unit circle.
+ * @export bottomCb
+ */
+export declare const bottomCb: (xNode: number, yNode: number, widthNode: number, heightNode: number) => number[];

package/components/graph/svelvet/edges/controllers/anchorCbUser.js

@@ -0,0 +1,73 @@
+/**
+ *  These are callbacks used to define anchor positions relative to the node they are attached to.
+ *  These may be provided to developers as examples of how to write their own custom callbacks for adjustable anchors
+ *  It calculates the position of an anchor (x,y) coordinates given a node parameterized by (x,y,width, height)
+ */
+/**
+ * @function rightCb - This is a callback function to define the anchor position on the node to be on the right side of the node.
+ * @param xNode - positionX of the attached node
+ * @param yNode - positionY of the attached node
+ * @param widthNode -  width of the attached node
+ * @param heightNode - height of the attached node
+ * @returns [xAnchor, yAnchor, 0]
+ * xAnchor - positionX for the anchor
+ * yAnchor - positionY for the anchor
+ * 0 - this is angle of the anchor with respect to the node. The right anchor should fall at 0 degrees on the unit circle.
+ * @export rightCb
+ */
+export const rightCb = (xNode, yNode, widthNode, heightNode) => {
+    const xAnchor = xNode + widthNode;
+    const yAnchor = yNode + heightNode / 2;
+    return [xAnchor, yAnchor, 0];
+};
+/**
+ * @function leftCb - This is a callback function to define the anchor position on the node to be on the left side of the node.
+ * @param xNode - positionX of the attached node
+ * @param yNode - positionY of the attached node
+ * @param widthNode - width of the attached node
+ * @param heightNode - height of the attached node
+ * @returns [xAnchor, yAnchor, 180]
+ *   xAnchor - positionX for the anchor
+ *   yAnchor - positionY for the anchor
+ *   180 - this is angle of the anchor with respect to the node. The left anchor should fall at 180 degrees on the unit circle.
+ * @export leftCb
+ */
+export const leftCb = (xNode, yNode, widthNode, heightNode) => {
+    const xAnchor = xNode;
+    const yAnchor = yNode + heightNode / 2;
+    return [xAnchor, yAnchor, 180];
+};
+/**
+ * @function topCb - This is a callback function to define the anchor position on the node to be on the top of the node.
+ * @param xNode - positionX of the attached node
+ * @param yNode - positionY of the attached node
+ * @param widthNode - width of the attached node
+ * @param heightNode - height of the attached node
+ * @returns [xAnchor, yAnchor, 90]
+ *   xAnchor - positionX for the anchor
+ *   yAnchor - positionY for the anchor
+ *   90 - this is angle of the anchor with respect to the node. The top anchor should fall at 90 degrees on the unit circle.
+ * @export topCb
+ */
+export const topCb = (xNode, yNode, widthNode, heightNode) => {
+    const xAnchor = xNode + widthNode / 2;
+    const yAnchor = yNode;
+    return [xAnchor, yAnchor, 90];
+};
+/**
+ * @function bottomCb - This is a callback function to define the anchor position on the node to be on the bottom of the node.
+ * @param xNode - positionX of the attached node
+ * @param yNode - positionY of the attached node
+ * @param widthNode - width of the attached node
+ * @param heightNode - height of the attached node
+ * @returns - [xAnchor, yAnchor, 90]
+ *   xAnchor - positionX for the anchor
+ *   yAnchor - positionY for the anchor
+ *   270 - this is angle of the anchor with respect to the node. The bottom anchor should fall at 270 degrees on the unit circle.
+ * @export bottomCb
+ */
+export const bottomCb = (xNode, yNode, widthNode, heightNode) => {
+    const xAnchor = xNode + widthNode / 2;
+    const yAnchor = yNode + heightNode;
+    return [xAnchor, yAnchor, 270];
+};

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

@@ -0,0 +1,37 @@
+import type { StoreType } from '../../store/types/types';
+import type { AnchorType } from '../types/types';
+/**
+ * Finds all Anchors that matches the conditions specified in the filter parameter from a Svelvet store and returns these Anchors in an array.
+ *
+ * @param store The Svelvet store containing the state of a Svelvet component
+ * @param filter An object to specify conditions. Example: if filter = \{ sourceOrTarget: 'source', positionX: 35 \} then we will return all anchors with sourceOrTarget = source AND poxitionX = 35
+ * @returns An array of Anchors that matches the conditions specified in the filter parameter
+ */
+export declare function getAnchors(store: StoreType, filter?: {
+    [key: string]: any;
+}): AnchorType[];
+/**
+ * Gets one anchor (source anchor or target anchor) from a given edge
+ *
+ * @param store The Svelvet store containing the state of the Svelvet component
+ * @param edgeId The id of a given edge
+ * @param sourceOrTarget A string of 'source' or 'target' to specify which anchor the function should return
+ * @returns The source or target Anchor object of a given edge
+ */
+export declare function getAnchorFromEdge(store: StoreType, edgeId: string, sourceOrTarget: 'source' | 'target'): AnchorType;
+/**
+ * getEdgeById will look for the targeted Edge 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 Edge object in store.edgesStore
+ */
+export declare function getEdgeById(store: StoreType, id: string): import("../../store/types/types").EdgeType;
+/**
+ * getAnchorById will look for the targeted Anchor that has the same id in the Svelvet component store.
+ *
+ * @param store The Svelvet store containing the state of a Svelvet component
+ * @param id The id of the targeted Anchor
+ * @returns The target Anchor object in store.anchorsStore
+ */
+export declare function getAnchorById(store: StoreType, id: string): AnchorType;

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

@@ -0,0 +1,71 @@
+import { get } from 'svelte/store';
+/**
+ * Finds all Anchors that matches the conditions specified in the filter parameter from a Svelvet store and returns these Anchors in an array.
+ *
+ * @param store The Svelvet store containing the state of a Svelvet component
+ * @param filter An object to specify conditions. Example: if filter = \{ sourceOrTarget: 'source', positionX: 35 \} then we will return all anchors with sourceOrTarget = source AND poxitionX = 35
+ * @returns An array of Anchors that matches the conditions specified in the filter parameter
+ */
+export function getAnchors(store, filter) {
+    let anchors = Object.values(get(store.anchorsStore));
+    // filter the array of anchors for elements that match filter
+    // Example: if filter = {sourceOrTarget: 'source', positionX: 35} then we will
+    //return all anchors with sourceOrTarget = source AND poxitionX = 35
+    if (filter !== undefined) {
+        anchors = anchors.filter((anchor) => {
+            for (let filterKey in filter) {
+                const filterValue = filter[filterKey];
+                if (anchor[filterKey] !== filterValue)
+                    return false;
+            }
+            return true;
+        });
+    }
+    // return list of anchors
+    return anchors;
+}
+/**
+ * Gets one anchor (source anchor or target anchor) from a given edge
+ *
+ * @param store The Svelvet store containing the state of the Svelvet component
+ * @param edgeId The id of a given edge
+ * @param sourceOrTarget A string of 'source' or 'target' to specify which anchor the function should return
+ * @returns The source or target Anchor object of a given edge
+ */
+export function getAnchorFromEdge(store, edgeId, sourceOrTarget) {
+    const edge = getEdgeById(store, edgeId);
+    const anchors = getAnchors(store, { edgeId: edgeId });
+    if (anchors.length !== 2)
+        throw `there should be two anchors for a given edge, there are ${anchors.length}`;
+    // there should be one source anchor and one target anchor. Return the source anchor
+    const anchor = anchors.filter((anchor) => anchor.sourceOrTarget === sourceOrTarget);
+    if (anchor.length !== 1)
+        throw `there should only be one source/target anchor`;
+    return anchor[0];
+}
+/**
+ * getEdgeById will look for the targeted Edge 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 Edge object in store.edgesStore
+ */
+export function getEdgeById(store, id) {
+    const edgesStore = get(store.edgesStore);
+    const edge = edgesStore[id];
+    if (edge === undefined)
+        throw 'edge not found';
+    return edge;
+}
+/**
+ * getAnchorById will look for the targeted Anchor that has the same id in the Svelvet component store.
+ *
+ * @param store The Svelvet store containing the state of a Svelvet component
+ * @param id The id of the targeted Anchor
+ * @returns The target Anchor object in store.anchorsStore
+ */
+export function getAnchorById(store, id) {
+    const anchorsStore = get(store.anchorsStore);
+    const anchor = anchorsStore[id];
+    return anchor;
+}

package/components/graph/svelvet/edges/models/Anchor.d.ts

@@ -0,0 +1,48 @@
+/**
+ * This is where we create, update  the Anchor store.
+ */
+import type { AnchorCbType, AnchorType } from '../../edges/types/types';
+/** Class representing an Anchor that implements Anchortype.
+ * @param {string} id The id of the Anchor
+ * @param {string} nodeId The id of the Node which the instantiated Anchor will be attached to
+ * @param {string} edgeId The id of the Edge which connects to the instantiated Anchor
+ * @param {'source' | 'target'} sourceOrTarget Specify the Anchor is a source or target
+ * @param {number} positionX The 'X' coordinate of the Anchor
+ * @param {number} positionY The 'Y' coordinate of the Anchor
+ * @param {function} callback The callback function that will determine the position of this Anchor
+ * @param {string} canvasId The canvasId of the Svelvet component that will hold this Anchor
+ * @param { number } angle This is the orientation of the anchor and is used to make sure bezier/step curves are rendered perpendicular to the node. Angles are defined along the unit circle. EX: 0 = right side of node, 180 = left side of node.
+ */
+export declare class Anchor implements AnchorType {
+    id: string;
+    nodeId: string;
+    edgeId: string;
+    sourceOrTarget: 'source' | 'target';
+    positionX: number;
+    positionY: number;
+    callback: AnchorCbType;
+    canvasId: string;
+    angle: 0 | 90 | 180 | 270;
+    constructor(id: string, nodeId: string, edgeId: string, sourceOrTarget: 'source' | 'target', positionX: number, positionY: number, callback: AnchorCbType, canvasId: string, angle: 0 | 90 | 180 | 270);
+    getOtherAnchorId(): string;
+    /**
+     * setPositionFromNode will invoke the user-defined callback to calculate the position of the Anchor, set the position of the Anchor in the anchorsStore, and also update the Edge position accordingly.
+     */
+    setPositionFromNode(): void;
+    /**
+     * updateEdges will update the edgesStore based on Anchor's change.
+     */
+    updateEdges(): void;
+    /**
+     * setPosition will update the positionX and positionY of the Anchor and also cascade changes to related Edge.
+     * @param x The X coordinate of the new position for the Anchor
+     * @param y The Y coordinate of the new position for the Anchor
+     */
+    setPosition(x: number, y: number): void;
+    /**
+     * Anchor.setPositionFromMovement works similarly to Anchor.setPosition. But setPosition is more powerful and we recommend using setPosition whenever possible and in the future, setPositionFromMovement can be removed.
+     * @param movementX The mouse movement value on the X-axis
+     * @param movementY The mouse movement value on the Y-axis
+     */
+    setPositionFromMovement(movementX: number, movementY: number): void;
+}