windmill-components 1.70.0 → 1.77.0

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

@@ -0,0 +1,137 @@
+<script>import BaseEdge from './BaseEdge.svelte';
+// import { Position } from '../types/utils';
+// // enumerable values (static) set for Position
+// export var Position;
+// (function (Position) {
+//     Position["Left"] = "left";
+//     Position["Right"] = "right";
+//     Position["Top"] = "top";
+//     Position["Bottom"] = "bottom";
+// })(Position || (Position = {}));
+// //
+// // export type CoordinateExtent = [[number, number], [number, number]];
+const Position = { Left: 'left', Right: 'right', Top: 'top', Bottom: 'bottom' };
+import { findStore } from '../../../store/controllers/storeApi';
+import { getAnchorFromEdge } from '../../../edges/controllers/util';
+function calculateControlOffset(distance, curvature) {
+    if (distance >= 0) {
+        return 0.5 * distance;
+    }
+    else {
+        return curvature * 25 * Math.sqrt(-distance);
+    }
+}
+// get the control point for the bezier curve (in the middle of the edge)
+function getControlWithCurvature({ pos, x1, y1, x2, y2, c }) {
+    let ctX, ctY;
+    switch (pos) {
+        case Position.Left:
+            {
+                ctX = x1 - calculateControlOffset(x1 - x2, c);
+                ctY = y1;
+            }
+            break;
+        case Position.Right:
+            {
+                ctX = x1 + calculateControlOffset(x2 - x1, c);
+                ctY = y1;
+            }
+            break;
+        case Position.Top:
+            {
+                ctX = x1;
+                ctY = y1 - calculateControlOffset(y1 - y2, c);
+            }
+            break;
+        case Position.Bottom:
+            {
+                ctX = x1;
+                ctY = y1 + calculateControlOffset(y2 - y1, c);
+            }
+            break;
+    }
+    return [ctX, ctY];
+}
+// returns string to pass into edge 'path' svg d attribute (where to be drawn)
+// referenced from ReactFlow.dev
+function getSimpleBezierPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, curvature = 0.25 }) {
+    const [sourceControlX, sourceControlY] = getControlWithCurvature({
+        pos: sourcePosition,
+        x1: sourceX,
+        y1: sourceY,
+        x2: targetX,
+        y2: targetY,
+        c: curvature
+    });
+    const [targetControlX, targetControlY] = getControlWithCurvature({
+        pos: targetPosition,
+        x1: targetX,
+        y1: targetY,
+        x2: sourceX,
+        y2: sourceY,
+        c: curvature
+    });
+    return `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`;
+}
+// determining center of the bezier curve to know where to place the bezier edge text label
+function getSimpleBezierCenter({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, curvature = 0.25 }) {
+    const [sourceControlX, sourceControlY] = getControlWithCurvature({
+        pos: sourcePosition,
+        x1: sourceX,
+        y1: sourceY,
+        x2: targetX,
+        y2: targetY,
+        c: curvature
+    });
+    const [targetControlX, targetControlY] = getControlWithCurvature({
+        pos: targetPosition,
+        x1: targetX,
+        y1: targetY,
+        x2: sourceX,
+        y2: sourceY,
+        c: curvature
+    });
+    // cubic bezier t=0.5 mid point, not the actual mid point, but easy to calculate
+    // https://stackoverflow.com/questions/67516101/how-to-find-distance-mid-point-of-bezier-curve
+    const centerX = sourceX * 0.125 + sourceControlX * 0.375 + targetControlX * 0.375 + targetX * 0.125;
+    const centerY = sourceY * 0.125 + sourceControlY * 0.375 + targetControlY * 0.375 + targetY * 0.125;
+    const xOffset = Math.abs(centerX - sourceX);
+    const yOffset = Math.abs(centerY - sourceY);
+    return [centerX, centerY, xOffset, yOffset];
+}
+export let canvasId;
+export let edgeId;
+const store = findStore(canvasId);
+const { nodesStore, edgesStore, anchorsStore } = store;
+let edge;
+$: edge = $edgesStore[edgeId];
+let params;
+$: {
+    const store = findStore(canvasId);
+    const sourceAnchor = getAnchorFromEdge(store, edge.id, 'source');
+    const targetAnchor = getAnchorFromEdge(store, edge.id, 'target');
+    const mapAngle = { 0: 'right', 90: 'top', 180: 'left', 270: 'bottom' };
+    params = {
+        sourceX: edge.sourceX,
+        sourceY: edge.sourceY,
+        sourcePosition: mapAngle[sourceAnchor.angle],
+        targetX: edge.targetX,
+        targetY: edge.targetY,
+        targetPosition: mapAngle[targetAnchor.angle],
+        curvature: 0.25
+    };
+}
+// pass in params to function that returns a string value for SVG path d attribute (where to be drawn)
+$: path = getSimpleBezierPath(params);
+$: [centerX, centerY] = getSimpleBezierCenter(params);
+// pass necessary values to BaseEdge component
+// BaseEdge renders a 'base' path that can be customized by parent Edge components
+$: baseEdgeProps = {
+    ...edge,
+    path: path,
+    centerX: centerX,
+    centerY: centerY
+};
+</script>
+
+<BaseEdge {baseEdgeProps} {canvasId} />

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        canvasId: string;
+        edgeId: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SimpleBezierEdgeProps = typeof __propDef.props;
+export type SimpleBezierEdgeEvents = typeof __propDef.events;
+export type SimpleBezierEdgeSlots = typeof __propDef.slots;
+export default class SimpleBezierEdge extends SvelteComponentTyped<SimpleBezierEdgeProps, SimpleBezierEdgeEvents, SimpleBezierEdgeSlots> {
+}
+export {};

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

@@ -0,0 +1,176 @@
+<script>
+  import BaseEdge from './BaseEdge.svelte';
+  import { getCenter } from './utils';
+
+  const Position = {};
+  Position['Left'] = 'left';
+  Position['Right'] = 'right';
+  Position['Top'] = 'top';
+  Position['Bottom'] = 'bottom';
+  // These are some helper methods for drawing the round corners
+  // The name indicates the direction of the path. "bottomLeftCorner" goes
+  // from bottom to the left and "leftBottomCorner" goes from left to the bottom.
+  // We have to consider the direction of the paths because of the animated lines.
+  const bottomLeftCorner = (x, y, size) =>
+    `L ${x},${y - size}Q ${x},${y} ${x + size},${y}`;
+  const leftBottomCorner = (x, y, size) =>
+    `L ${x + size},${y}Q ${x},${y} ${x},${y - size}`;
+  const bottomRightCorner = (x, y, size) =>
+    `L ${x},${y - size}Q ${x},${y} ${x - size},${y}`;
+  const rightBottomCorner = (x, y, size) =>
+    `L ${x - size},${y}Q ${x},${y} ${x},${y - size}`;
+  const leftTopCorner = (x, y, size) =>
+    `L ${x + size},${y}Q ${x},${y} ${x},${y + size}`;
+  const topLeftCorner = (x, y, size) =>
+    `L ${x},${y + size}Q ${x},${y} ${x + size},${y}`;
+  const topRightCorner = (x, y, size) =>
+    `L ${x},${y + size}Q ${x},${y} ${x - size},${y}`;
+  const rightTopCorner = (x, y, size) =>
+    `L ${x - size},${y}Q ${x},${y} ${x},${y + size}`;
+  // returns string to pass into edge 'path' svg d attribute (where to be drawn)
+  export function getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition = Position.Bottom,
+    targetX,
+    targetY,
+    targetPosition = Position.Top,
+    borderRadius = 5,
+    centerX,
+    centerY,
+  }) {
+    const [_centerX, _centerY, offsetX, offsetY] = getCenter({
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+    });
+    const cornerWidth = Math.min(borderRadius, Math.abs(targetX - sourceX));
+    const cornerHeight = Math.min(borderRadius, Math.abs(targetY - sourceY));
+    const cornerSize = Math.min(cornerWidth, cornerHeight, offsetX, offsetY);
+    const leftAndRight = [Position.Left, Position.Right];
+    const cX = typeof centerX !== 'undefined' ? centerX : _centerX;
+    const cY = typeof centerY !== 'undefined' ? centerY : _centerY;
+    let firstCornerPath = null;
+    let secondCornerPath = null;
+    // for non-mixed edge top/bottom
+    if (sourceX <= targetX) {
+      firstCornerPath =
+        sourceY <= targetY
+          ? bottomLeftCorner(sourceX, cY, cornerSize)
+          : topLeftCorner(sourceX, cY, cornerSize);
+      secondCornerPath =
+        sourceY <= targetY
+          ? rightTopCorner(targetX, cY, cornerSize)
+          : rightBottomCorner(targetX, cY, cornerSize);
+    } else {
+      firstCornerPath =
+        sourceY < targetY
+          ? bottomRightCorner(sourceX, cY, cornerSize)
+          : topRightCorner(sourceX, cY, cornerSize);
+      secondCornerPath =
+        sourceY < targetY
+          ? leftTopCorner(targetX, cY, cornerSize)
+          : leftBottomCorner(targetX, cY, cornerSize);
+    }
+    // for non-mixed edge left/right
+    if (
+      leftAndRight.includes(sourcePosition) &&
+      leftAndRight.includes(targetPosition)
+    ) {
+      if (sourceX <= targetX) {
+        firstCornerPath =
+          sourceY <= targetY
+            ? rightTopCorner(cX, sourceY, cornerSize)
+            : rightBottomCorner(cX, sourceY, cornerSize);
+        secondCornerPath =
+          sourceY <= targetY
+            ? bottomLeftCorner(cX, targetY, cornerSize)
+            : topLeftCorner(cX, targetY, cornerSize);
+      } else if (
+        (sourcePosition === Position.Right &&
+          targetPosition === Position.Left) ||
+        (sourcePosition === Position.Left &&
+          targetPosition === Position.Right) ||
+        (sourcePosition === Position.Left && targetPosition === Position.Left)
+      ) {
+        // and sourceX > targetX
+        firstCornerPath =
+          sourceY <= targetY
+            ? leftTopCorner(cX, sourceY, cornerSize)
+            : leftBottomCorner(cX, sourceY, cornerSize);
+        secondCornerPath =
+          sourceY <= targetY
+            ? bottomRightCorner(cX, targetY, cornerSize)
+            : topRightCorner(cX, targetY, cornerSize);
+      }
+      // for mixed edges (top/bottom to left/right) OR (left/right to top/bottom)
+    } else if (
+      leftAndRight.includes(sourcePosition) &&
+      !leftAndRight.includes(targetPosition)
+    ) {
+      if (sourceX <= targetX) {
+        firstCornerPath =
+          sourceY <= targetY
+            ? rightTopCorner(targetX, sourceY, cornerSize)
+            : rightBottomCorner(targetX, sourceY, cornerSize);
+      } else {
+        firstCornerPath =
+          sourceY <= targetY
+            ? leftTopCorner(targetX, sourceY, cornerSize)
+            : leftBottomCorner(targetX, sourceY, cornerSize);
+      }
+      secondCornerPath = '';
+    } else if (
+      !leftAndRight.includes(sourcePosition) &&
+      leftAndRight.includes(targetPosition)
+    ) {
+      if (sourceX <= targetX) {
+        firstCornerPath =
+          sourceY <= targetY
+            ? bottomLeftCorner(sourceX, targetY, cornerSize)
+            : topLeftCorner(sourceX, targetY, cornerSize);
+      } else {
+        firstCornerPath =
+          sourceY <= targetY
+            ? bottomRightCorner(sourceX, targetY, cornerSize)
+            : topRightCorner(sourceX, targetY, cornerSize);
+      }
+      secondCornerPath = '';
+    }
+    return `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`;
+  }
+  export let edge;
+  export let borderRadius = 5;
+  export let canvasId;
+
+  import { findStore } from '../../../store/controllers/storeApi';
+  import { getAnchorFromEdge } from '../../../edges/controllers/util';
+
+  let params;
+  $: {
+    const store = findStore(canvasId);
+    const sourceAnchor = getAnchorFromEdge(store, edge.id, 'source');
+    const targetAnchor = getAnchorFromEdge(store, edge.id, 'target');
+    const mapAngle = { 0: 'right', 90: 'top', 180: 'left', 270: 'bottom' };
+    params = {
+      sourceX: edge.sourceX,
+      sourceY: edge.sourceY,
+      targetX: edge.targetX,
+      targetY: edge.targetY,
+      sourcePosition: mapAngle[sourceAnchor.angle],
+      targetPosition: mapAngle[targetAnchor.angle],
+      borderRadius: borderRadius,
+    };
+  }
+  $: [centerX, centerY] = getCenter(params);
+  $: path = getSmoothStepPath(params);
+  $: baseEdgeProps = {
+    ...edge,
+    path: path,
+    centerX: centerX,
+    centerY: centerY,
+  };
+</script>
+
+<BaseEdge {baseEdgeProps} {canvasId} />

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

@@ -0,0 +1,60 @@
+/** @typedef {typeof __propDef.props}  SmoothStepEdgeProps */
+/** @typedef {typeof __propDef.events}  SmoothStepEdgeEvents */
+/** @typedef {typeof __propDef.slots}  SmoothStepEdgeSlots */
+export default class SmoothStepEdge extends SvelteComponentTyped<{
+    canvasId: any;
+    edge: any;
+    borderRadius?: number | undefined;
+    getSmoothStepPath?: (({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, borderRadius, centerX, centerY, }: {
+        sourceX: any;
+        sourceY: any;
+        sourcePosition?: string | undefined;
+        targetX: any;
+        targetY: any;
+        targetPosition?: string | undefined;
+        borderRadius?: number | undefined;
+        centerX: any;
+        centerY: any;
+    }) => string) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+    get getSmoothStepPath(): ({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, borderRadius, centerX, centerY, }: {
+        sourceX: any;
+        sourceY: any;
+        sourcePosition?: string | undefined;
+        targetX: any;
+        targetY: any;
+        targetPosition?: string | undefined;
+        borderRadius?: number | undefined;
+        centerX: any;
+        centerY: any;
+    }) => string;
+}
+export type SmoothStepEdgeProps = typeof __propDef.props;
+export type SmoothStepEdgeEvents = typeof __propDef.events;
+export type SmoothStepEdgeSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        canvasId: any;
+        edge: any;
+        borderRadius?: number | undefined;
+        getSmoothStepPath?: (({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, borderRadius, centerX, centerY, }: {
+            sourceX: any;
+            sourceY: any;
+            sourcePosition?: string | undefined;
+            targetX: any;
+            targetY: any;
+            targetPosition?: string | undefined;
+            borderRadius?: number | undefined;
+            centerX: any;
+            centerY: any;
+        }) => string) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,8 @@
+<script>
+  import SmoothStepEdge from './SmoothStepEdge.svelte';
+  export let edge;
+  export let canvasId;
+</script>
+
+<!-- Utilizes the SmoothStepEdge Component and sets borderRadius to zero to give a sharp edge -->
+<SmoothStepEdge {edge} borderRadius={0} {canvasId} />

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  StepEdgeProps */
+/** @typedef {typeof __propDef.events}  StepEdgeEvents */
+/** @typedef {typeof __propDef.slots}  StepEdgeSlots */
+export default class StepEdge extends SvelteComponentTyped<{
+    edge: any;
+    canvasId: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type StepEdgeProps = typeof __propDef.props;
+export type StepEdgeEvents = typeof __propDef.events;
+export type StepEdgeSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        edge: any;
+        canvasId: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,52 @@
+import type { XYPosition, Position } from './utils';
+export interface Node<T = any> {
+    id: number;
+    position: XYPosition;
+    data: T;
+    width: number;
+    height: number;
+    bgColor?: string;
+    fontSize?: number;
+    borderColor?: string;
+    borderRadius?: number;
+    textColor?: string;
+    clickCallback?: Function;
+    image?: boolean;
+    src?: string;
+    sourcePosition?: 'left' | 'right' | 'top' | 'bottom';
+    targetPosition?: 'left' | 'right' | 'top' | 'bottom';
+}
+export interface Edge {
+    id: string;
+    source: number;
+    target: number;
+    label?: string;
+    labelBgColor?: string;
+    labelTextColor?: string;
+    edgeColor?: string;
+    type?: string;
+    animate?: boolean;
+    noHandle?: boolean;
+    arrow?: boolean;
+}
+export interface DerivedEdge extends Edge {
+    sourceX: number;
+    sourceY: number;
+    sourcePosition: Position;
+    targetX: number;
+    targetY: number;
+    targetPosition: Position;
+}
+export interface EdgeProps extends DerivedEdge {
+    path: string;
+    centerX: number;
+    centerY: number;
+}
+export interface EdgeTextProps {
+    label?: any;
+    labelBgColor?: string;
+    labelTextColor?: string;
+    centerX: number;
+    centerY: number;
+}
+export type HandleType = 'source' | 'target';

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

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

package/components/graph/svelvet/edges/views/Edges/utils.d.ts

@@ -0,0 +1,33 @@
+export declare enum Position {
+    Left = "left",
+    Right = "right",
+    Top = "top",
+    Bottom = "bottom"
+}
+export interface XYPosition {
+    x: number;
+    y: number;
+}
+export type XYZPosition = XYPosition & {
+    z: number;
+};
+export interface Dimensions {
+    width: number;
+    height: number;
+}
+export interface Rect extends Dimensions, XYPosition {
+}
+export interface Box extends XYPosition {
+    x2: number;
+    y2: number;
+}
+export type Transform = [number, number, number];
+export interface GetCenterParams {
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition?: Position;
+    targetPosition?: Position;
+}
+export declare const getCenter: ({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, }: GetCenterParams) => [number, number, number, number];

package/components/graph/svelvet/edges/views/Edges/utils.js

@@ -0,0 +1,31 @@
+// enumerable values (static) set for Position
+export var Position;
+(function (Position) {
+    Position["Left"] = "left";
+    Position["Right"] = "right";
+    Position["Top"] = "top";
+    Position["Bottom"] = "bottom";
+})(Position || (Position = {}));
+//needed for getCenter funciotn
+const LeftOrRight = [Position.Left, Position.Right];
+//used to determine the position for edge text on a Smooth or Step Edge
+export const getCenter = ({ sourceX, sourceY, targetX, targetY, sourcePosition = Position.Bottom, targetPosition = Position.Top, }) => {
+    const sourceIsLeftOrRight = LeftOrRight.includes(sourcePosition);
+    const targetIsLeftOrRight = LeftOrRight.includes(targetPosition);
+    // we expect flows to be horizontal or vertical (all handles left or right respectively top or bottom)
+    // a mixed edge is when one the source is on the left and the target is on the top for example.
+    const mixedEdge = (sourceIsLeftOrRight && !targetIsLeftOrRight) ||
+        (targetIsLeftOrRight && !sourceIsLeftOrRight);
+    if (mixedEdge) {
+        const xOffset = sourceIsLeftOrRight ? Math.abs(targetX - sourceX) : 0;
+        const centerX = sourceX > targetX ? sourceX - xOffset : sourceX + xOffset;
+        const yOffset = sourceIsLeftOrRight ? 0 : Math.abs(targetY - sourceY);
+        const centerY = sourceY < targetY ? sourceY + yOffset : sourceY - yOffset;
+        return [centerX, centerY, xOffset, yOffset];
+    }
+    const xOffset = Math.abs(targetX - sourceX) / 2;
+    const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
+    const yOffset = Math.abs(targetY - sourceY) / 2;
+    const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
+    return [centerX, centerY, xOffset, yOffset];
+};