windmill-components 1.70.0 → 1.75.0

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

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