windmill-components 1.70.0 → 1.77.0

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;
+}

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

@@ -0,0 +1,122 @@
+/**
+ * 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/components/graph/svelvet/edges/models/Edge.d.ts

@@ -0,0 +1,47 @@
+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;
+    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);
+    /**
+     * 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/components/graph/svelvet/edges/models/Edge.js

@@ -0,0 +1,107 @@
+import { findStore } from '../../store/controllers/storeApi';
+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;
+    constructor(id, sourceX, sourceY, targetX, targetY, canvasId, label, type, labelBgColor, labelTextColor, edgeColor, animate, noHandle, arrow, clickCallback, className) {
+        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;
+    }
+    /**
+     * delete is going to delete the Edge and also delete associated Anchors
+     */
+    delete() {
+        const store = stores[this.canvasId];
+        const { nodesStore, 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;
+    }
+}

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

@@ -0,0 +1,18 @@
+export type AnchorCbType = {
+    (): void;
+    type: 'dynamic' | 'fixed';
+};
+export interface AnchorType {
+    id: string;
+    nodeId: string;
+    edgeId: string;
+    sourceOrTarget: 'source' | 'target';
+    positionX: number;
+    positionY: number;
+    callback: AnchorCbType;
+    angle: number;
+    setPositionFromNode: Function;
+    setPosition: Function;
+    updateEdges: Function;
+    getOtherAnchorId: Function;
+}

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

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

package/components/graph/svelvet/edges/views/Edges/BaseEdge.svelte

@@ -0,0 +1,105 @@
+<script>import { findStore } from '../../../store/controllers/storeApi';
+import { getEdgeById } from '../../../edges/controllers/util';
+import EdgeText from '../Edges/EdgeText.svelte';
+import { get } from 'svelte/store';
+export let baseEdgeProps;
+export let canvasId;
+// destructuring the props passed in from the parent component
+$: ({ path, animate, arrow, label, labelBgColor, labelTextColor, edgeColor, centerX, centerY } =
+    baseEdgeProps);
+// setting edge text props
+$: edgeTextProps = {
+    label: label,
+    labelBgColor: labelBgColor,
+    labelTextColor: labelTextColor,
+    centerX: centerX,
+    centerY: centerY
+};
+// Click event handlers
+// At some point in the future, it would be good to refactor event handling to use the flux architecture
+//  ie, events will create an action that will be dispatched to some centralized reducer.
+//  or in other words, the creators of Redux knew what they were doing.
+// The advantage of this re-design would be greater modularity; views would be agnostic to the exact features implmemented,
+//   and they would be only responsible to detecting events and dispatch actions.
+const edgeId = baseEdgeProps.id;
+const store = findStore(canvasId);
+const edge = getEdgeById(store, edgeId);
+const highlightEdgesOption = get(store.highlightEdgesOption);
+const handleRightClick = () => {
+    const store = findStore(canvasId);
+    const { editableOption } = store;
+    // handles edgeEdit feature
+    if (get(editableOption))
+        store.edgeEditModal.set(edgeId);
+};
+const handleClick = () => {
+    const store = findStore(canvasId);
+    const edge = getEdgeById(store, edgeId);
+    // handles edge clickCallback feature
+    if (edge.clickCallback)
+        edge.clickCallback(edge);
+    console.log(edge.className);
+};
+const defaultArrow = `0 0, 9 4.5, 0 9`;
+</script>
+
+<defs>
+	<marker id="arrow" markerWidth="9" markerHeight="9" refX="8" refY="4" orient="auto">
+		<polygon points={defaultArrow} fill="gray" />
+	</marker>
+</defs>
+
+<!-- This is an invisible edge that is used to implement event events, because the visible edge is thin and hard to click on. It 
+highlights on hover -->
+{#if highlightEdgesOption}
+	<path
+		id={`edgeSelector`}
+		d={path}
+		fill="transparent"
+		stroke={'red'}
+		stroke-opacity="0"
+		stroke-width="10"
+		on:contextmenu={handleRightClick}
+		on:click={handleClick}
+		on:keypress={() => {}}
+	/>
+{/if}
+
+{#if arrow}
+	<path
+		class={animate ? `animate ${edge.className}` : `${edge.className}`}
+		d={path}
+		fill="transparent"
+		stroke={edgeColor ? edgeColor : 'gray'}
+		marker-end="url(#arrow)"
+		aria-label="svg-path"
+	/>
+{:else}
+	<path
+		class={animate ? `animate ${edge.className}` : `${edge.className}`}
+		d={path}
+		fill="transparent"
+		stroke={edgeColor ? edgeColor : 'gray'}
+		aria-label="svg-path"
+	/>
+{/if}
+
+{#if edgeTextProps.label}
+	<EdgeText {edgeTextProps} />
+{/if}
+
+<style>
+	.animate {
+		stroke-dasharray: 5;
+		animation: dash 50000s linear;
+	}
+	@keyframes dash {
+		from {
+			stroke-dashoffset: 1000000;
+		}
+	}
+
+	#edgeSelector:hover {
+		stroke: 'red';
+		stroke-opacity: 0.5;
+	}</style>

package/components/graph/svelvet/edges/views/Edges/BaseEdge.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { EdgeProps } from '../Edges/types';
+declare const __propDef: {
+    props: {
+        baseEdgeProps: EdgeProps;
+        canvasId: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BaseEdgeProps = typeof __propDef.props;
+export type BaseEdgeEvents = typeof __propDef.events;
+export type BaseEdgeSlots = typeof __propDef.slots;
+export default class BaseEdge extends SvelteComponentTyped<BaseEdgeProps, BaseEdgeEvents, BaseEdgeSlots> {
+}
+export {};

package/components/graph/svelvet/edges/views/Edges/EdgeAnchor.svelte

@@ -0,0 +1,12 @@
+<script>export let x;
+export let y;
+</script>
+
+<!-- renders simple half-circle for the anchor point of the edge -->
+
+<circle cx={x} cy={y} r={5} stroke="white" fill="black" />
+
+<style>
+	circle {
+		position: absolute;
+	}</style>

package/components/graph/svelvet/edges/views/Edges/EdgeAnchor.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        x: number;
+        y: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EdgeAnchorProps = typeof __propDef.props;
+export type EdgeAnchorEvents = typeof __propDef.events;
+export type EdgeAnchorSlots = typeof __propDef.slots;
+export default class EdgeAnchor extends SvelteComponentTyped<EdgeAnchorProps, EdgeAnchorEvents, EdgeAnchorSlots> {
+}
+export {};

package/components/graph/svelvet/edges/views/Edges/EdgeText.svelte

@@ -0,0 +1,43 @@
+<script>// destructuring props to pass into BaseEdge component
+export let edgeTextProps;
+$: ({ label, labelBgColor, labelTextColor, centerX, centerY } =
+    edgeTextProps);
+const shiftRectY = 7;
+$: pxRatio = label.length < 3 ? 9 : 7;
+// determine the center point of the edge to be used in the EdgeText component
+$: textCenterX = centerX;
+$: textCenterY = centerY;
+// determine width of rect to render based on label.length (removing spaces)
+// pxRatio is an estimate of how many pixels 1 character might take up
+// pxRatio not 100% accurate as font is not monospace
+$: spaces = label.split(' ').length - 1;
+$: newLength = label.length - spaces;
+$: labelPx = newLength * pxRatio;
+</script>
+
+{#if typeof label === 'undefined' || !label}
+  {null}
+{:else}
+  <g>
+    <rect
+      class="EdgeTextBg"
+      data-testid="edge-text-bg"
+      fill={labelBgColor ? labelBgColor : 'white'}
+      x={textCenterX - labelPx / 2}
+      y={textCenterY - shiftRectY}
+      width={labelPx}
+      height={16}
+    />
+    <text
+      class="EdgeText"
+      x={textCenterX}
+      y={textCenterY}
+      font-size="12px"
+      dominant-baseline="central"
+      text-anchor="middle"
+      fill={labelTextColor ? labelTextColor : 'black'}
+    >
+      {label}
+    </text>
+  </g>
+{/if}

package/components/graph/svelvet/edges/views/Edges/EdgeText.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { EdgeTextProps } from './types';
+declare const __propDef: {
+    props: {
+        edgeTextProps: EdgeTextProps;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EdgeTextProps = typeof __propDef.props;
+export type EdgeTextEvents = typeof __propDef.events;
+export type EdgeTextSlots = typeof __propDef.slots;
+export default class EdgeText extends SvelteComponentTyped<EdgeTextProps, EdgeTextEvents, EdgeTextSlots> {
+}
+export {};