windmill-components 1.89.1 → 1.103.0

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

@@ -1,117 +0,0 @@
-<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;
-export let edges;
-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;
-export let download = 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 on:expand {download} {scroll} {canvasId} {width} {height} {boundary} />
-	{/if}
-</div>
-
-<style>
-	.Svelvet {
-		position: relative;
-		overflow: hidden;
-		display: grid;
-		font-family: 'Segoe UI', sans-serif;
-		z-index: 1;
-	}</style>

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

@@ -1,36 +0,0 @@
-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;
-        download?: boolean | undefined;
-    };
-    events: {
-        expand: CustomEvent<any>;
-    } & {
-        [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/dist/components/graph/svelvet/customCss/controllers/getCss.d.ts

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

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

@@ -1,46 +0,0 @@
-// 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/dist/components/graph/svelvet/d3/controllers/d3.d.ts

@@ -1,5 +0,0 @@
-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/dist/components/graph/svelvet/d3/controllers/d3.js

@@ -1,59 +0,0 @@
-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/dist/components/graph/svelvet/edges/controllers/anchorCbDev.d.ts

@@ -1,4 +0,0 @@
-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/dist/components/graph/svelvet/edges/controllers/anchorCbDev.js

@@ -1,92 +0,0 @@
-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);
-                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);
-                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);
-                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);
-                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/dist/components/graph/svelvet/edges/controllers/anchorCbUser.d.ts

@@ -1,57 +0,0 @@
-/**
- *  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/dist/components/graph/svelvet/edges/controllers/anchorCbUser.js

@@ -1,73 +0,0 @@
-/**
- *  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/dist/components/graph/svelvet/edges/controllers/util.d.ts

@@ -1,37 +0,0 @@
-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/dist/components/graph/svelvet/edges/controllers/util.js

@@ -1,71 +0,0 @@
-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) {
-    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/dist/components/graph/svelvet/edges/models/Anchor.d.ts

@@ -1,48 +0,0 @@
-/**
- * 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;
-}