windmill-components 1.379.4 → 1.382.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,50 +0,0 @@
-export interface UserNodeType {
-    id: string;
-    width: number;
-    height: number;
-    bgColor?: string;
-    data: {
-        html?: any;
-        custom?: {
-            component: any;
-            props?: any;
-            cb?: (e: string, detail: any) => void;
-        };
-        img?: any;
-    };
-    position: {
-        x: number;
-        y: number;
-    };
-    borderColor?: string | undefined;
-    image?: boolean;
-    src?: string;
-    textColor?: string;
-    targetPosition?: 'left' | 'right' | 'top' | 'bottom';
-    sourcePosition?: 'left' | 'right' | 'top' | 'bottom';
-    borderRadius?: number;
-    childNodes?: string[];
-    className?: string;
-    clickCallback?: Function;
-}
-export interface UserEdgeType {
-    id: string;
-    source: string;
-    target: string;
-    sourceAnchorCb?: Function;
-    targetAnchorCb?: Function;
-    label?: string;
-    labelBgColor?: string;
-    labelTextColor?: string;
-    edgeColor?: string;
-    type?: 'straight' | 'smoothstep' | 'step' | 'bezier' | undefined;
-    animate?: boolean;
-    noHandle?: boolean;
-    arrow?: boolean;
-    clickCallback?: Function;
-    className?: string;
-    offset?: number;
-}
-export declare function getD3PositionX(canvasId: string): number;
-export declare function getD3PositionY(canvasId: string): number;
-export declare function getD3Zoom(canvasId: string): number;

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

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