windmill-components 1.379.4 → 1.382.3

package/package/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/package/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/package/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/package/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/package/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/package/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;
-}

package/package/components/graph/svelvet/edges/models/Anchor.js

@@ -1,122 +0,0 @@
-/**
- * This is where we create, update  the Anchor store.
- */
-import { stores } from '../../store/models/store';
-import { getAnchors } from '../controllers/util';
-/** 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 class Anchor {
-    id;
-    nodeId;
-    edgeId;
-    sourceOrTarget;
-    positionX;
-    positionY;
-    callback;
-    canvasId;
-    angle;
-    constructor(id, nodeId, edgeId, sourceOrTarget, positionX, positionY, callback, canvasId, angle) {
-        this.id = id;
-        this.nodeId = nodeId;
-        this.edgeId = edgeId;
-        this.sourceOrTarget = sourceOrTarget;
-        this.positionX = positionX;
-        this.positionY = positionY;
-        this.callback = callback;
-        this.canvasId = canvasId;
-        this.angle = angle;
-    }
-    getOtherAnchorId() {
-        const store = stores[this.canvasId];
-        const anchors = getAnchors(store, { edgeId: this.edgeId });
-        if (anchors.length !== 2)
-            throw 'something is wrong, every anchor should have exactly one other associated anchor';
-        const anchor = anchors.filter((anchor) => anchor.id !== this.id)[0];
-        return anchor.id;
-    }
-    /**
-     * 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() {
-        // calculate the new position of the anchor using user-defined callback
-        this.callback();
-        const { edgesStore } = stores[this.canvasId];
-        // update edges
-        edgesStore.update((edges) => {
-            const edge = edges[this.edgeId];
-            if (this.sourceOrTarget === 'source') {
-                edge.sourceX = this.positionX;
-                edge.sourceY = this.positionY;
-            }
-            else {
-                edge.targetX = this.positionX;
-                edge.targetY = this.positionY;
-            }
-            return { ...edges };
-        });
-    }
-    /**
-     * updateEdges will update the edgesStore based on Anchor's change.
-     */
-    updateEdges() {
-        const { edgesStore } = stores[this.canvasId];
-        /** update edges by deconstructing edges store and setting its new vlue to stores[this.canvasID] */
-        edgesStore.update((edges) => {
-            const edge = edges[this.edgeId];
-            // this means that no edge was found, just return without doing anything
-            if (edge === undefined) {
-                return { ...edges };
-            }
-            if (this.sourceOrTarget === 'source') {
-                edge.sourceX = this.positionX;
-                edge.sourceY = this.positionY;
-            }
-            else {
-                edge.targetX = this.positionX;
-                edge.targetY = this.positionY;
-            }
-            return { ...edges };
-        });
-    }
-    /**
-     * 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, y) {
-        this.positionX = x;
-        this.positionY = y;
-        this.updateEdges();
-    }
-    /**
-     * 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, movementY) {
-        this.positionX += movementX;
-        this.positionY += movementY;
-        const { edgesStore } = stores[this.canvasId];
-        edgesStore.update((edges) => {
-            const edge = edges[this.edgeId];
-            if (this.sourceOrTarget === 'source') {
-                edge.sourceX += movementX;
-                edge.sourceY += movementY;
-            }
-            else {
-                edge.targetX += movementX;
-                edge.targetY += movementY;
-            }
-            return { ...edges };
-        });
-    }
-}

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

@@ -1,48 +0,0 @@
-import type { UserEdgeType } from '../../types/types';
-import type { EdgeType } from '../../store/types/types';
-/**
- * Class Edge that implements EdgeType.
- * @param id The id of the Edge
- * @param sourceX The X coordinate of the source Anchor
- * @param sourceY The Y coordinate of the source Anchor
- * @param targetX The X coordinate of the target Anchor
- * @param targetY The Y coordinate of the target Anchor
- * @param canvasId The canvasId of the Svelvet component that holds the instantiated Edge
- * @param label The label of the Edge
- * @param type The type of the Edge (options: 'straight', 'smoothstep', 'step', or 'bezier'). If user doesn't specify, the type will default to 'bezier'.
- * @param labelBgColor The background color of the Edge label
- * @param labelTextColor The text color of the Edge label
- * @param edgeColor The color of the Edge
- * @param animate Boolean value to specify whether the Edge should be animated
- * @param noHandle Boolean value but looks like it is already depracated and can be removed without damage
- * @param arraw Boolean value to specify whether the Edge displays an arrow near its target Anchor
- */
-export declare class Edge implements 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;
-    offset?: number | undefined;
-    constructor(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, offset?: number | undefined);
-    /**
-     * delete is going to delete the Edge and also delete associated Anchors
-     */
-    delete(): void;
-    /**
-     * setExportableData will construct an object that holds all the edge data that can be exported. This is needed for the Exporting Diagram feature.
-     * @returns The object of exportable edge data. The format of the object should be as close as what user initially passes in to Svelvet.
-     */
-    setExportableData(): UserEdgeType;
-}

package/package/components/graph/svelvet/edges/models/Edge.js

@@ -1,109 +0,0 @@
-import { findStore } from '../../store/models/store';
-import { stores } from '../../store/models/store';
-import { getAnchors, getAnchorFromEdge } from '../../edges/controllers/util';
-/**
- * Class Edge that implements EdgeType.
- * @param id The id of the Edge
- * @param sourceX The X coordinate of the source Anchor
- * @param sourceY The Y coordinate of the source Anchor
- * @param targetX The X coordinate of the target Anchor
- * @param targetY The Y coordinate of the target Anchor
- * @param canvasId The canvasId of the Svelvet component that holds the instantiated Edge
- * @param label The label of the Edge
- * @param type The type of the Edge (options: 'straight', 'smoothstep', 'step', or 'bezier'). If user doesn't specify, the type will default to 'bezier'.
- * @param labelBgColor The background color of the Edge label
- * @param labelTextColor The text color of the Edge label
- * @param edgeColor The color of the Edge
- * @param animate Boolean value to specify whether the Edge should be animated
- * @param noHandle Boolean value but looks like it is already depracated and can be removed without damage
- * @param arraw Boolean value to specify whether the Edge displays an arrow near its target Anchor
- */
-export class Edge {
-    id;
-    sourceX;
-    sourceY;
-    targetX;
-    targetY;
-    canvasId;
-    label;
-    type;
-    labelBgColor;
-    labelTextColor;
-    edgeColor;
-    animate;
-    noHandle;
-    arrow;
-    clickCallback;
-    className;
-    offset;
-    constructor(id, sourceX, sourceY, targetX, targetY, canvasId, label, type, labelBgColor, labelTextColor, edgeColor, animate, noHandle, arrow, clickCallback, className, offset) {
-        this.id = id;
-        this.sourceX = sourceX;
-        this.sourceY = sourceY;
-        this.targetX = targetX;
-        this.targetY = targetY;
-        this.canvasId = canvasId;
-        this.label = label;
-        this.type = type;
-        this.labelBgColor = labelBgColor;
-        this.labelTextColor = labelTextColor;
-        this.edgeColor = edgeColor;
-        this.animate = animate;
-        this.noHandle = noHandle;
-        this.arrow = arrow;
-        this.clickCallback = clickCallback;
-        this.className = className;
-        this.offset = offset;
-    }
-    /**
-     * delete is going to delete the Edge and also delete associated Anchors
-     */
-    delete() {
-        const store = stores[this.canvasId];
-        const { anchorsStore, edgesStore } = store;
-        const sourceAnchor = getAnchorFromEdge(store, this.id, 'source'); // this is a bit wasteful
-        const targetAnchor = getAnchorFromEdge(store, this.id, 'target');
-        anchorsStore.update((anchors) => {
-            for (const anchorId in anchors) {
-                if (anchorId === sourceAnchor.id || anchorId == targetAnchor.id)
-                    delete anchors[anchorId];
-            }
-            return { ...anchors };
-        });
-        edgesStore.update((edges) => {
-            delete edges[this.id];
-            return { ...edges };
-        });
-    }
-    /**
-     * setExportableData will construct an object that holds all the edge data that can be exported. This is needed for the Exporting Diagram feature.
-     * @returns The object of exportable edge data. The format of the object should be as close as what user initially passes in to Svelvet.
-     */
-    setExportableData() {
-        const exportableData = {
-            id: this.id,
-            label: this.label,
-            type: this.type,
-            labelBgColor: this.labelBgColor,
-            labelTextColor: this.labelTextColor,
-            edgeColor: this.edgeColor,
-            animate: this.animate,
-            noHandle: this.noHandle,
-            arrow: this.arrow,
-            source: 'dummy',
-            target: 'dummy' // these will be set later
-        };
-        // set source, target on exportableData
-        const store = findStore(this.canvasId);
-        const anchors = getAnchors(store, { edgeId: this.id });
-        if (anchors.length !== 2)
-            throw 'there should be two anchors per edge';
-        for (const anchor of anchors) {
-            if (anchor.sourceOrTarget === 'target')
-                exportableData.target = anchor.nodeId;
-            if (anchor.sourceOrTarget === 'source')
-                exportableData.source = anchor.nodeId;
-        }
-        return exportableData;
-    }
-}