windmill-components 1.379.4 → 1.382.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package/components/ArgInput.svelte +33 -3
- package/package/components/DisplayResult.svelte +17 -5
- package/package/components/ErrorOrRecoveryHandler.svelte +3 -2
- package/package/components/FlowBuilder.svelte +3 -0
- package/package/components/FlowBuilder.svelte.d.ts +1 -0
- package/package/components/FlowGraphViewer.svelte +6 -5
- package/package/components/FlowJobResult.svelte +4 -2
- package/package/components/FlowJobResult.svelte.d.ts +2 -0
- package/package/components/FlowStatusViewerInner.svelte +17 -6
- package/package/components/FlowViewer.svelte +1 -0
- package/package/components/HighlightCode.svelte +2 -2
- package/package/components/ModulePreviewForm.svelte +1 -1
- package/package/components/ObjectResourceInput.svelte +7 -2
- package/package/components/ObjectResourceInput.svelte.d.ts +2 -0
- package/package/components/ResourcePicker.svelte +60 -48
- package/package/components/ScriptVersionHistory.svelte +63 -7
- package/package/components/apps/components/display/dbtable/DbExplorerCount.svelte +3 -2
- package/package/components/apps/components/display/table/AppAggridExplorerTable.svelte +22 -5
- package/package/components/apps/components/display/table/AppAggridTable.svelte +14 -5
- package/package/components/apps/components/display/table/AppAggridTableActions.svelte +23 -8
- package/package/components/apps/components/display/table/AppAggridTableActions.svelte.d.ts +5 -3
- package/package/components/apps/components/display/table/utils.js +8 -7
- package/package/components/apps/components/helpers/RunnableComponent.svelte +13 -1
- package/package/components/apps/components/helpers/eval.js +31 -25
- package/package/components/apps/editor/AppEditorHeader.svelte +1 -0
- package/package/components/apps/editor/AppReportsDrawer.svelte +4 -3
- package/package/components/apps/editor/component/components.d.ts +1 -1
- package/package/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte +0 -1
- package/package/components/apps/editor/settingsPanel/DecisionTreeGraphHeader.svelte +55 -45
- package/package/components/apps/editor/settingsPanel/DecisionTreeGraphHeader.svelte.d.ts +7 -9
- package/package/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte +66 -59
- package/package/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte.d.ts +9 -11
- package/package/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte +213 -254
- package/package/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte.d.ts +0 -1
- package/package/components/apps/editor/settingsPanel/decisionTree/nodeHelpers.d.ts +1 -1
- package/package/components/apps/editor/settingsPanel/decisionTree/nodeHelpers.js +2 -6
- package/package/components/details/DetailPageDetailPanel.svelte +9 -1
- package/package/components/details/DetailPageDetailPanel.svelte.d.ts +2 -1
- package/package/components/details/DetailPageLayout.svelte +2 -0
- package/package/components/details/DetailPageLayout.svelte.d.ts +3 -0
- package/package/components/details/EmailTriggerPanel.svelte +128 -0
- package/package/components/details/EmailTriggerPanel.svelte.d.ts +20 -0
- package/package/components/details/WebhooksPanel.svelte +7 -68
- package/package/components/flows/FlowHistory.svelte +1 -0
- package/package/components/flows/content/FlowInputs.svelte +0 -1
- package/package/components/flows/content/FlowModuleScript.svelte +33 -3
- package/package/components/flows/content/FlowModuleScript.svelte.d.ts +2 -0
- package/package/components/flows/content/FlowModuleSuspend.svelte +15 -0
- package/package/components/flows/flowInfers.js +1 -1
- package/package/components/flows/map/FlowJobsMenu.svelte +39 -44
- package/package/components/flows/map/FlowModuleSchemaItem.svelte +1 -2
- package/package/components/flows/map/FlowModuleSchemaMap.svelte +4 -3
- package/package/components/flows/map/InsertModuleButton.svelte +16 -9
- package/package/components/flows/map/MapItem.svelte +3 -97
- package/package/components/flows/map/MapItem.svelte.d.ts +0 -5
- package/package/components/flows/map/VirtualItem.svelte +6 -159
- package/package/components/flows/map/VirtualItem.svelte.d.ts +0 -15
- package/package/components/graph/FlowGraphV2.svelte +256 -0
- package/package/components/graph/{FlowGraph.svelte.d.ts → FlowGraphV2.svelte.d.ts} +8 -8
- package/package/components/graph/graphBuilder.d.ts +15 -0
- package/package/components/graph/graphBuilder.js +337 -0
- package/package/components/graph/index.d.ts +0 -1
- package/package/components/graph/index.js +0 -1
- package/package/components/graph/model.d.ts +1 -8
- package/package/components/graph/renderers/edges/BaseEdge.svelte +109 -0
- package/package/components/graph/renderers/edges/BaseEdge.svelte.d.ts +35 -0
- package/package/components/graph/renderers/edges/DataflowEdge.svelte +37 -0
- package/package/components/graph/renderers/edges/DataflowEdge.svelte.d.ts +29 -0
- package/package/components/graph/renderers/edges/EmptyEdge.svelte +22 -0
- package/package/components/graph/renderers/edges/EmptyEdge.svelte.d.ts +23 -0
- package/package/components/graph/renderers/nodes/BranchAllStart.svelte +44 -0
- package/package/components/graph/renderers/nodes/BranchAllStart.svelte.d.ts +29 -0
- package/package/components/graph/renderers/nodes/BranchOneStart.svelte +41 -0
- package/package/components/graph/renderers/nodes/BranchOneStart.svelte.d.ts +29 -0
- package/package/components/graph/renderers/nodes/ForLoopEndNode.svelte +19 -0
- package/package/components/graph/renderers/nodes/ForLoopEndNode.svelte.d.ts +24 -0
- package/package/components/graph/renderers/nodes/ForLoopStartNode.svelte +20 -0
- package/package/components/graph/renderers/nodes/ForLoopStartNode.svelte.d.ts +25 -0
- package/package/components/graph/renderers/nodes/InputNode.svelte +74 -0
- package/package/components/graph/renderers/nodes/InputNode.svelte.d.ts +23 -0
- package/package/components/graph/renderers/nodes/ModuleNode.svelte +71 -0
- package/package/components/graph/renderers/nodes/ModuleNode.svelte.d.ts +41 -0
- package/package/components/graph/renderers/nodes/NoBranchNode.svelte +20 -0
- package/package/components/graph/renderers/nodes/NoBranchNode.svelte.d.ts +27 -0
- package/package/components/graph/renderers/nodes/NodeWrapper.svelte +21 -0
- package/package/components/graph/renderers/nodes/NodeWrapper.svelte.d.ts +22 -0
- package/package/components/graph/renderers/nodes/ResultNode.svelte +24 -0
- package/package/components/graph/renderers/nodes/ResultNode.svelte.d.ts +22 -0
- package/package/components/graph/renderers/nodes/branchAllEndNode.svelte +19 -0
- package/package/components/graph/renderers/nodes/branchAllEndNode.svelte.d.ts +26 -0
- package/package/components/graph/renderers/nodes/branchOneEndNode.svelte +19 -0
- package/package/components/graph/renderers/nodes/branchOneEndNode.svelte.d.ts +24 -0
- package/package/components/graph/renderers/utils.d.ts +8 -0
- package/package/components/graph/renderers/utils.js +26 -0
- package/package/components/graph/util.d.ts +1 -2
- package/package/components/graph/util.js +2 -8
- package/package/components/runs/RunsFilter.svelte +15 -17
- package/package/gen/core/OpenAPI.js +1 -1
- package/package/gen/schemas.gen.d.ts +3 -0
- package/package/gen/schemas.gen.js +3 -0
- package/package/gen/services.gen.d.ts +22 -3
- package/package/gen/services.gen.js +38 -2
- package/package/gen/types.gen.d.ts +69 -6
- package/package/hub.d.ts +11 -0
- package/package/hub.js +2 -0
- package/package/hubPaths.json +9 -0
- package/package/init_scripts/python_failure_module.d.ts +1 -1
- package/package/init_scripts/python_failure_module.js +4 -3
- package/package/script_helpers.d.ts +2 -2
- package/package/script_helpers.js +11 -9
- package/package.json +2 -1
- package/package/components/graph/FlowGraph.svelte +0 -614
- package/package/components/graph/svelvet/LICENSE +0 -21
- package/package/components/graph/svelvet/container/README.md +0 -7
- package/package/components/graph/svelvet/container/controllers/middleware.d.ts +0 -11
- package/package/components/graph/svelvet/container/controllers/middleware.js +0 -87
- package/package/components/graph/svelvet/container/models/index.d.ts +0 -0
- package/package/components/graph/svelvet/container/models/index.js +0 -1
- package/package/components/graph/svelvet/container/views/GraphView.svelte +0 -262
- package/package/components/graph/svelvet/container/views/GraphView.svelte.d.ts +0 -26
- package/package/components/graph/svelvet/container/views/Svelvet.svelte +0 -121
- package/package/components/graph/svelvet/container/views/Svelvet.svelte.d.ts +0 -36
- package/package/components/graph/svelvet/customCss/controllers/getCss.d.ts +0 -2
- package/package/components/graph/svelvet/customCss/controllers/getCss.js +0 -46
- package/package/components/graph/svelvet/d3/controllers/d3.d.ts +0 -5
- package/package/components/graph/svelvet/d3/controllers/d3.js +0 -59
- package/package/components/graph/svelvet/edges/controllers/anchorCbDev.d.ts +0 -4
- package/package/components/graph/svelvet/edges/controllers/anchorCbDev.js +0 -92
- package/package/components/graph/svelvet/edges/controllers/anchorCbUser.d.ts +0 -57
- package/package/components/graph/svelvet/edges/controllers/anchorCbUser.js +0 -73
- package/package/components/graph/svelvet/edges/controllers/util.d.ts +0 -37
- package/package/components/graph/svelvet/edges/controllers/util.js +0 -71
- package/package/components/graph/svelvet/edges/models/Anchor.d.ts +0 -48
- package/package/components/graph/svelvet/edges/models/Anchor.js +0 -122
- package/package/components/graph/svelvet/edges/models/Edge.d.ts +0 -48
- package/package/components/graph/svelvet/edges/models/Edge.js +0 -109
- package/package/components/graph/svelvet/edges/types/types.d.ts +0 -18
- package/package/components/graph/svelvet/edges/types/types.js +0 -1
- package/package/components/graph/svelvet/edges/views/Edges/BaseEdge.svelte +0 -104
- package/package/components/graph/svelvet/edges/views/Edges/BaseEdge.svelte.d.ts +0 -18
- package/package/components/graph/svelvet/edges/views/Edges/EdgeText.svelte +0 -42
- package/package/components/graph/svelvet/edges/views/Edges/EdgeText.svelte.d.ts +0 -17
- package/package/components/graph/svelvet/edges/views/Edges/SimpleBezierEdge.svelte +0 -151
- package/package/components/graph/svelvet/edges/views/Edges/SimpleBezierEdge.svelte.d.ts +0 -17
- package/package/components/graph/svelvet/edges/views/Edges/SmoothStepEdge.svelte +0 -157
- package/package/components/graph/svelvet/edges/views/Edges/SmoothStepEdge.svelte.d.ts +0 -60
- package/package/components/graph/svelvet/edges/views/Edges/StepEdge.svelte +0 -8
- package/package/components/graph/svelvet/edges/views/Edges/StepEdge.svelte.d.ts +0 -25
- package/package/components/graph/svelvet/edges/views/Edges/types.d.ts +0 -52
- package/package/components/graph/svelvet/edges/views/Edges/types.js +0 -1
- package/package/components/graph/svelvet/edges/views/Edges/utils.d.ts +0 -33
- package/package/components/graph/svelvet/edges/views/Edges/utils.js +0 -31
- package/package/components/graph/svelvet/nodes/controllers/util.d.ts +0 -9
- package/package/components/graph/svelvet/nodes/controllers/util.js +0 -13
- package/package/components/graph/svelvet/nodes/models/Node.d.ts +0 -74
- package/package/components/graph/svelvet/nodes/models/Node.js +0 -156
- package/package/components/graph/svelvet/nodes/views/Node.svelte +0 -84
- package/package/components/graph/svelvet/nodes/views/Node.svelte.d.ts +0 -21
- package/package/components/graph/svelvet/store/controllers/storeApi.d.ts +0 -25
- package/package/components/graph/svelvet/store/controllers/storeApi.js +0 -91
- package/package/components/graph/svelvet/store/controllers/userApi.d.ts +0 -3
- package/package/components/graph/svelvet/store/controllers/userApi.js +0 -18
- package/package/components/graph/svelvet/store/controllers/util.d.ts +0 -24
- package/package/components/graph/svelvet/store/controllers/util.js +0 -148
- package/package/components/graph/svelvet/store/models/store.d.ts +0 -13
- package/package/components/graph/svelvet/store/models/store.js +0 -12
- package/package/components/graph/svelvet/store/types/types.d.ts +0 -127
- package/package/components/graph/svelvet/store/types/types.js +0 -1
- package/package/components/graph/svelvet/types/README.md +0 -3
- package/package/components/graph/svelvet/types/index.d.ts +0 -2
- package/package/components/graph/svelvet/types/index.js +0 -1
- package/package/components/graph/svelvet/types/types.d.ts +0 -50
- package/package/components/graph/svelvet/types/types.js +0 -18
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
export type AnchorCbType = {
|
|
2
|
-
(): void;
|
|
3
|
-
type: 'dynamic' | 'fixed';
|
|
4
|
-
};
|
|
5
|
-
export interface AnchorType {
|
|
6
|
-
id: string;
|
|
7
|
-
nodeId: string;
|
|
8
|
-
edgeId: string;
|
|
9
|
-
sourceOrTarget: 'source' | 'target';
|
|
10
|
-
positionX: number;
|
|
11
|
-
positionY: number;
|
|
12
|
-
callback: AnchorCbType;
|
|
13
|
-
angle: number;
|
|
14
|
-
setPositionFromNode: Function;
|
|
15
|
-
setPosition: Function;
|
|
16
|
-
updateEdges: Function;
|
|
17
|
-
getOtherAnchorId: Function;
|
|
18
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
<script>import { findStore } from '../../../store/models/store';
|
|
2
|
-
import { getEdgeById } from '../../../edges/controllers/util';
|
|
3
|
-
import EdgeText from '../Edges/EdgeText.svelte';
|
|
4
|
-
import { get } from 'svelte/store';
|
|
5
|
-
export let baseEdgeProps;
|
|
6
|
-
export let canvasId;
|
|
7
|
-
// destructuring the props passed in from the parent component
|
|
8
|
-
$: ({ path, animate, arrow, label, labelBgColor, labelTextColor, edgeColor, centerX, centerY } =
|
|
9
|
-
baseEdgeProps);
|
|
10
|
-
// setting edge text props
|
|
11
|
-
$: edgeTextProps = {
|
|
12
|
-
label: label,
|
|
13
|
-
labelBgColor: labelBgColor,
|
|
14
|
-
labelTextColor: labelTextColor,
|
|
15
|
-
centerX: centerX,
|
|
16
|
-
centerY: centerY
|
|
17
|
-
};
|
|
18
|
-
// Click event handlers
|
|
19
|
-
// At some point in the future, it would be good to refactor event handling to use the flux architecture
|
|
20
|
-
// ie, events will create an action that will be dispatched to some centralized reducer.
|
|
21
|
-
// or in other words, the creators of Redux knew what they were doing.
|
|
22
|
-
// The advantage of this re-design would be greater modularity; views would be agnostic to the exact features implmemented,
|
|
23
|
-
// and they would be only responsible to detecting events and dispatch actions.
|
|
24
|
-
const edgeId = baseEdgeProps.id;
|
|
25
|
-
const store = findStore(canvasId);
|
|
26
|
-
const edge = getEdgeById(store, edgeId);
|
|
27
|
-
const highlightEdgesOption = get(store.highlightEdgesOption);
|
|
28
|
-
const handleRightClick = () => {
|
|
29
|
-
const store = findStore(canvasId);
|
|
30
|
-
const { editableOption } = store;
|
|
31
|
-
// handles edgeEdit feature
|
|
32
|
-
if (get(editableOption))
|
|
33
|
-
store.edgeEditModal.set(edgeId);
|
|
34
|
-
};
|
|
35
|
-
const handleClick = () => {
|
|
36
|
-
const store = findStore(canvasId);
|
|
37
|
-
const edge = getEdgeById(store, edgeId);
|
|
38
|
-
// handles edge clickCallback feature
|
|
39
|
-
if (edge.clickCallback)
|
|
40
|
-
edge.clickCallback(edge);
|
|
41
|
-
};
|
|
42
|
-
const defaultArrow = `0 0, 9 4.5, 0 9`;
|
|
43
|
-
</script>
|
|
44
|
-
|
|
45
|
-
<defs>
|
|
46
|
-
<marker id="arrow" markerWidth="9" markerHeight="9" refX="8" refY="4" orient="auto">
|
|
47
|
-
<polygon points={defaultArrow} fill="gray" />
|
|
48
|
-
</marker>
|
|
49
|
-
</defs>
|
|
50
|
-
|
|
51
|
-
<!-- This is an invisible edge that is used to implement event events, because the visible edge is thin and hard to click on. It
|
|
52
|
-
highlights on hover -->
|
|
53
|
-
{#if highlightEdgesOption}
|
|
54
|
-
<path
|
|
55
|
-
id={`edgeSelector`}
|
|
56
|
-
d={path}
|
|
57
|
-
fill="transparent"
|
|
58
|
-
stroke={'red'}
|
|
59
|
-
stroke-opacity="0"
|
|
60
|
-
stroke-width="10"
|
|
61
|
-
on:contextmenu={handleRightClick}
|
|
62
|
-
on:click={handleClick}
|
|
63
|
-
on:keypress={() => {}}
|
|
64
|
-
/>
|
|
65
|
-
{/if}
|
|
66
|
-
|
|
67
|
-
{#if arrow}
|
|
68
|
-
<path
|
|
69
|
-
class={animate ? `animate ${edge.className}` : `${edge.className}`}
|
|
70
|
-
d={path}
|
|
71
|
-
fill="transparent"
|
|
72
|
-
stroke={edgeColor ? edgeColor : 'gray'}
|
|
73
|
-
marker-end="url(#arrow)"
|
|
74
|
-
aria-label="svg-path"
|
|
75
|
-
/>
|
|
76
|
-
{:else}
|
|
77
|
-
<path
|
|
78
|
-
class={animate ? `animate ${edge.className}` : `${edge.className}`}
|
|
79
|
-
d={path}
|
|
80
|
-
fill="transparent"
|
|
81
|
-
stroke={edgeColor ? edgeColor : 'gray'}
|
|
82
|
-
aria-label="svg-path"
|
|
83
|
-
/>
|
|
84
|
-
{/if}
|
|
85
|
-
|
|
86
|
-
{#if edgeTextProps.label}
|
|
87
|
-
<EdgeText {edgeTextProps} />
|
|
88
|
-
{/if}
|
|
89
|
-
|
|
90
|
-
<style>
|
|
91
|
-
.animate {
|
|
92
|
-
stroke-dasharray: 5;
|
|
93
|
-
animation: dash 50000s linear;
|
|
94
|
-
}
|
|
95
|
-
@keyframes dash {
|
|
96
|
-
from {
|
|
97
|
-
stroke-dashoffset: 1000000;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
#edgeSelector:hover {
|
|
102
|
-
stroke: 'red';
|
|
103
|
-
stroke-opacity: 0.5;
|
|
104
|
-
}</style>
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { SvelteComponent } from "svelte";
|
|
2
|
-
import type { EdgeProps } from '../Edges/types';
|
|
3
|
-
declare const __propDef: {
|
|
4
|
-
props: {
|
|
5
|
-
baseEdgeProps: EdgeProps;
|
|
6
|
-
canvasId: any;
|
|
7
|
-
};
|
|
8
|
-
events: {
|
|
9
|
-
[evt: string]: CustomEvent<any>;
|
|
10
|
-
};
|
|
11
|
-
slots: {};
|
|
12
|
-
};
|
|
13
|
-
export type BaseEdgeProps = typeof __propDef.props;
|
|
14
|
-
export type BaseEdgeEvents = typeof __propDef.events;
|
|
15
|
-
export type BaseEdgeSlots = typeof __propDef.slots;
|
|
16
|
-
export default class BaseEdge extends SvelteComponent<BaseEdgeProps, BaseEdgeEvents, BaseEdgeSlots> {
|
|
17
|
-
}
|
|
18
|
-
export {};
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
<script>// destructuring props to pass into BaseEdge component
|
|
2
|
-
export let edgeTextProps;
|
|
3
|
-
$: ({ label, labelBgColor, labelTextColor, centerX, centerY } = edgeTextProps);
|
|
4
|
-
const shiftRectY = 7;
|
|
5
|
-
$: pxRatio = label.length < 3 ? 9 : 7;
|
|
6
|
-
// determine the center point of the edge to be used in the EdgeText component
|
|
7
|
-
$: textCenterX = centerX;
|
|
8
|
-
$: textCenterY = centerY;
|
|
9
|
-
// determine width of rect to render based on label.length (removing spaces)
|
|
10
|
-
// pxRatio is an estimate of how many pixels 1 character might take up
|
|
11
|
-
// pxRatio not 100% accurate as font is not monospace
|
|
12
|
-
$: spaces = label.split(' ').length - 1;
|
|
13
|
-
$: newLength = label.length - spaces;
|
|
14
|
-
$: labelPx = newLength * pxRatio;
|
|
15
|
-
</script>
|
|
16
|
-
|
|
17
|
-
{#if typeof label === 'undefined' || !label}
|
|
18
|
-
{null}
|
|
19
|
-
{:else}
|
|
20
|
-
<g>
|
|
21
|
-
<rect
|
|
22
|
-
class="EdgeTextBg"
|
|
23
|
-
data-testid="edge-text-bg"
|
|
24
|
-
fill={labelBgColor ? labelBgColor : 'white'}
|
|
25
|
-
x={textCenterX - labelPx / 2}
|
|
26
|
-
y={textCenterY - shiftRectY}
|
|
27
|
-
width={labelPx}
|
|
28
|
-
height={16}
|
|
29
|
-
/>
|
|
30
|
-
<text
|
|
31
|
-
class="EdgeText"
|
|
32
|
-
x={textCenterX}
|
|
33
|
-
y={textCenterY}
|
|
34
|
-
font-size="12px"
|
|
35
|
-
dominant-baseline="central"
|
|
36
|
-
text-anchor="middle"
|
|
37
|
-
fill={labelTextColor ? labelTextColor : 'black'}
|
|
38
|
-
>
|
|
39
|
-
{label}
|
|
40
|
-
</text>
|
|
41
|
-
</g>
|
|
42
|
-
{/if}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { SvelteComponent } from "svelte";
|
|
2
|
-
import type { EdgeTextProps } from './types';
|
|
3
|
-
declare const __propDef: {
|
|
4
|
-
props: {
|
|
5
|
-
edgeTextProps: EdgeTextProps;
|
|
6
|
-
};
|
|
7
|
-
events: {
|
|
8
|
-
[evt: string]: CustomEvent<any>;
|
|
9
|
-
};
|
|
10
|
-
slots: {};
|
|
11
|
-
};
|
|
12
|
-
type EdgeTextProps_ = typeof __propDef.props;
|
|
13
|
-
export { EdgeTextProps_ as EdgeTextProps };
|
|
14
|
-
export type EdgeTextEvents = typeof __propDef.events;
|
|
15
|
-
export type EdgeTextSlots = typeof __propDef.slots;
|
|
16
|
-
export default class EdgeText extends SvelteComponent<EdgeTextProps, EdgeTextEvents, EdgeTextSlots> {
|
|
17
|
-
}
|
|
@@ -1,151 +0,0 @@
|
|
|
1
|
-
<script>import BaseEdge from './BaseEdge.svelte';
|
|
2
|
-
const Position = { Left: 'left', Right: 'right', Top: 'top', Bottom: 'bottom' };
|
|
3
|
-
import { findStore } from '../../../store/models/store';
|
|
4
|
-
import { getAnchorFromEdge } from '../../../edges/controllers/util';
|
|
5
|
-
function calculateControlOffset(distance, curvature) {
|
|
6
|
-
if (distance >= 0) {
|
|
7
|
-
return 0.9 * distance;
|
|
8
|
-
}
|
|
9
|
-
else {
|
|
10
|
-
return curvature * 25 * Math.sqrt(-distance);
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
// get the control point for the bezier curve (in the middle of the edge)
|
|
14
|
-
function getControlWithCurvature({ pos, x1, y1, x2, y2, c }) {
|
|
15
|
-
let ctX, ctY;
|
|
16
|
-
switch (pos) {
|
|
17
|
-
case Position.Left:
|
|
18
|
-
{
|
|
19
|
-
ctX = x1 - calculateControlOffset(x1 - x2, c);
|
|
20
|
-
ctY = y1;
|
|
21
|
-
}
|
|
22
|
-
break;
|
|
23
|
-
case Position.Right:
|
|
24
|
-
{
|
|
25
|
-
ctX = x1 + calculateControlOffset(x2 - x1, c);
|
|
26
|
-
ctY = y1;
|
|
27
|
-
}
|
|
28
|
-
break;
|
|
29
|
-
case Position.Top:
|
|
30
|
-
{
|
|
31
|
-
ctX = x1;
|
|
32
|
-
ctY = y1 - calculateControlOffset(y1 - y2, c);
|
|
33
|
-
}
|
|
34
|
-
break;
|
|
35
|
-
case Position.Bottom:
|
|
36
|
-
{
|
|
37
|
-
ctX = x1;
|
|
38
|
-
ctY = y1 + calculateControlOffset(y2 - y1, c);
|
|
39
|
-
}
|
|
40
|
-
break;
|
|
41
|
-
}
|
|
42
|
-
return [ctX, ctY];
|
|
43
|
-
}
|
|
44
|
-
// returns string to pass into edge 'path' svg d attribute (where to be drawn)
|
|
45
|
-
// referenced from ReactFlow.dev
|
|
46
|
-
function getSimpleBezierPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, curvature = 0.25 }) {
|
|
47
|
-
const [sourceControlX, sourceControlY] = getControlWithCurvature({
|
|
48
|
-
pos: sourcePosition,
|
|
49
|
-
x1: sourceX,
|
|
50
|
-
y1: sourceY,
|
|
51
|
-
x2: targetX,
|
|
52
|
-
y2: targetY,
|
|
53
|
-
c: curvature
|
|
54
|
-
});
|
|
55
|
-
const [targetControlX, targetControlY] = getControlWithCurvature({
|
|
56
|
-
pos: targetPosition,
|
|
57
|
-
x1: targetX,
|
|
58
|
-
y1: targetY,
|
|
59
|
-
x2: sourceX,
|
|
60
|
-
y2: sourceY,
|
|
61
|
-
c: curvature
|
|
62
|
-
});
|
|
63
|
-
return `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`;
|
|
64
|
-
}
|
|
65
|
-
// returns string to pass into edge 'path' svg d attribute for the straight line
|
|
66
|
-
function getStraightLinePath({ sourceX, sourceY, targetX, targetY }) {
|
|
67
|
-
return `M${sourceX},${sourceY} L${sourceX},${targetY - 50}`;
|
|
68
|
-
}
|
|
69
|
-
// determining center of the bezier curve to know where to place the bezier edge text label
|
|
70
|
-
function getSimpleBezierCenter({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, curvature = 0.25 }) {
|
|
71
|
-
const [sourceControlX, sourceControlY] = getControlWithCurvature({
|
|
72
|
-
pos: sourcePosition,
|
|
73
|
-
x1: sourceX,
|
|
74
|
-
y1: sourceY,
|
|
75
|
-
x2: targetX,
|
|
76
|
-
y2: targetY,
|
|
77
|
-
c: curvature
|
|
78
|
-
});
|
|
79
|
-
const [targetControlX, targetControlY] = getControlWithCurvature({
|
|
80
|
-
pos: targetPosition,
|
|
81
|
-
x1: targetX,
|
|
82
|
-
y1: targetY,
|
|
83
|
-
x2: sourceX,
|
|
84
|
-
y2: sourceY,
|
|
85
|
-
c: curvature
|
|
86
|
-
});
|
|
87
|
-
// cubic bezier t=0.5 mid point, not the actual mid point, but easy to calculate
|
|
88
|
-
// https://stackoverflow.com/questions/67516101/how-to-find-distance-mid-point-of-bezier-curve
|
|
89
|
-
const centerX = sourceX * 0.125 + sourceControlX * 0.375 + targetControlX * 0.375 + targetX * 0.125;
|
|
90
|
-
const centerY = sourceY * 0.125 + sourceControlY * 0.375 + targetControlY * 0.375 + targetY * 0.125;
|
|
91
|
-
const xOffset = Math.abs(centerX - sourceX);
|
|
92
|
-
const yOffset = Math.abs(centerY - sourceY);
|
|
93
|
-
return [centerX, centerY, xOffset, yOffset];
|
|
94
|
-
}
|
|
95
|
-
export let canvasId;
|
|
96
|
-
export let edgeId;
|
|
97
|
-
const store = findStore(canvasId);
|
|
98
|
-
const { edgesStore } = store;
|
|
99
|
-
let edge;
|
|
100
|
-
$: edge = $edgesStore[edgeId];
|
|
101
|
-
let bezierParams, lineParams;
|
|
102
|
-
$: {
|
|
103
|
-
const store = findStore(canvasId);
|
|
104
|
-
const sourceAnchor = getAnchorFromEdge(store, edge.id, 'source');
|
|
105
|
-
const targetAnchor = getAnchorFromEdge(store, edge.id, 'target');
|
|
106
|
-
const mapAngle = { 0: 'right', 90: 'top', 180: 'left', 270: 'bottom' };
|
|
107
|
-
if (edge.targetY - edge.sourceY > 100) {
|
|
108
|
-
bezierParams = {
|
|
109
|
-
sourceX: edge.sourceX + (edge.offset ?? 0),
|
|
110
|
-
sourceY: edge.targetY - 100,
|
|
111
|
-
sourcePosition: mapAngle[sourceAnchor.angle],
|
|
112
|
-
targetX: edge.targetX + (edge.offset ?? 0),
|
|
113
|
-
targetY: edge.targetY,
|
|
114
|
-
targetPosition: mapAngle[targetAnchor.angle],
|
|
115
|
-
curvature: 0.25
|
|
116
|
-
};
|
|
117
|
-
lineParams = {
|
|
118
|
-
sourceX: edge.sourceX + (edge.offset ?? 0),
|
|
119
|
-
sourceY: edge.sourceY,
|
|
120
|
-
targetX: edge.targetX + (edge.offset ?? 0),
|
|
121
|
-
targetY: edge.targetY - 50
|
|
122
|
-
};
|
|
123
|
-
}
|
|
124
|
-
else {
|
|
125
|
-
bezierParams = {
|
|
126
|
-
sourceX: edge.sourceX + (edge.offset ?? 0),
|
|
127
|
-
sourceY: edge.sourceY,
|
|
128
|
-
sourcePosition: mapAngle[sourceAnchor.angle],
|
|
129
|
-
targetX: edge.targetX + (edge.offset ?? 0),
|
|
130
|
-
targetY: edge.targetY,
|
|
131
|
-
targetPosition: mapAngle[targetAnchor.angle],
|
|
132
|
-
curvature: 0.25
|
|
133
|
-
};
|
|
134
|
-
lineParams = {};
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
// pass in params to function that returns a string value for SVG path d attribute (where to be drawn)
|
|
138
|
-
$: bezierPath = getSimpleBezierPath(bezierParams);
|
|
139
|
-
$: linePath = lineParams ? getStraightLinePath(lineParams) : '';
|
|
140
|
-
$: [bezierCenterX, bezierCenterY] = getSimpleBezierCenter(bezierParams);
|
|
141
|
-
// pass necessary values to BaseEdge component
|
|
142
|
-
// BaseEdge renders a 'base' path that can be customized by parent Edge components
|
|
143
|
-
$: baseEdgeProps = {
|
|
144
|
-
...edge,
|
|
145
|
-
path: `${bezierPath} ${linePath}`,
|
|
146
|
-
centerX: bezierCenterX,
|
|
147
|
-
centerY: bezierCenterY
|
|
148
|
-
};
|
|
149
|
-
</script>
|
|
150
|
-
|
|
151
|
-
<BaseEdge {baseEdgeProps} {canvasId} />
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { SvelteComponent } from "svelte";
|
|
2
|
-
declare const __propDef: {
|
|
3
|
-
props: {
|
|
4
|
-
canvasId: string;
|
|
5
|
-
edgeId: string;
|
|
6
|
-
};
|
|
7
|
-
events: {
|
|
8
|
-
[evt: string]: CustomEvent<any>;
|
|
9
|
-
};
|
|
10
|
-
slots: {};
|
|
11
|
-
};
|
|
12
|
-
export type SimpleBezierEdgeProps = typeof __propDef.props;
|
|
13
|
-
export type SimpleBezierEdgeEvents = typeof __propDef.events;
|
|
14
|
-
export type SimpleBezierEdgeSlots = typeof __propDef.slots;
|
|
15
|
-
export default class SimpleBezierEdge extends SvelteComponent<SimpleBezierEdgeProps, SimpleBezierEdgeEvents, SimpleBezierEdgeSlots> {
|
|
16
|
-
}
|
|
17
|
-
export {};
|
|
@@ -1,157 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import BaseEdge from './BaseEdge.svelte'
|
|
3
|
-
import { getCenter } from './utils'
|
|
4
|
-
|
|
5
|
-
const Position = {}
|
|
6
|
-
Position['Left'] = 'left'
|
|
7
|
-
Position['Right'] = 'right'
|
|
8
|
-
Position['Top'] = 'top'
|
|
9
|
-
Position['Bottom'] = 'bottom'
|
|
10
|
-
// These are some helper methods for drawing the round corners
|
|
11
|
-
// The name indicates the direction of the path. "bottomLeftCorner" goes
|
|
12
|
-
// from bottom to the left and "leftBottomCorner" goes from left to the bottom.
|
|
13
|
-
// We have to consider the direction of the paths because of the animated lines.
|
|
14
|
-
const bottomLeftCorner = (x, y, size) => `L ${x},${y - size}Q ${x},${y} ${x + size},${y}`
|
|
15
|
-
const leftBottomCorner = (x, y, size) => `L ${x + size},${y}Q ${x},${y} ${x},${y - size}`
|
|
16
|
-
const bottomRightCorner = (x, y, size) => `L ${x},${y - size}Q ${x},${y} ${x - size},${y}`
|
|
17
|
-
const rightBottomCorner = (x, y, size) => `L ${x - size},${y}Q ${x},${y} ${x},${y - size}`
|
|
18
|
-
const leftTopCorner = (x, y, size) => `L ${x + size},${y}Q ${x},${y} ${x},${y + size}`
|
|
19
|
-
const topLeftCorner = (x, y, size) => `L ${x},${y + size}Q ${x},${y} ${x + size},${y}`
|
|
20
|
-
const topRightCorner = (x, y, size) => `L ${x},${y + size}Q ${x},${y} ${x - size},${y}`
|
|
21
|
-
const rightTopCorner = (x, y, size) => `L ${x - size},${y}Q ${x},${y} ${x},${y + size}`
|
|
22
|
-
// returns string to pass into edge 'path' svg d attribute (where to be drawn)
|
|
23
|
-
export function getSmoothStepPath({
|
|
24
|
-
sourceX,
|
|
25
|
-
sourceY,
|
|
26
|
-
sourcePosition = Position.Bottom,
|
|
27
|
-
targetX,
|
|
28
|
-
targetY,
|
|
29
|
-
targetPosition = Position.Top,
|
|
30
|
-
borderRadius = 5,
|
|
31
|
-
centerX,
|
|
32
|
-
centerY
|
|
33
|
-
}) {
|
|
34
|
-
const [_centerX, _centerY, offsetX, offsetY] = getCenter({
|
|
35
|
-
sourceX,
|
|
36
|
-
sourceY,
|
|
37
|
-
targetX,
|
|
38
|
-
targetY
|
|
39
|
-
})
|
|
40
|
-
const cornerWidth = Math.min(borderRadius, Math.abs(targetX - sourceX))
|
|
41
|
-
const cornerHeight = Math.min(borderRadius, Math.abs(targetY - sourceY))
|
|
42
|
-
const cornerSize = Math.min(cornerWidth, cornerHeight, offsetX, offsetY)
|
|
43
|
-
const leftAndRight = [Position.Left, Position.Right]
|
|
44
|
-
const cX = typeof centerX !== 'undefined' ? centerX : _centerX
|
|
45
|
-
const cY = typeof centerY !== 'undefined' ? centerY : _centerY
|
|
46
|
-
let firstCornerPath = null
|
|
47
|
-
let secondCornerPath = null
|
|
48
|
-
// for non-mixed edge top/bottom
|
|
49
|
-
if (sourceX <= targetX) {
|
|
50
|
-
firstCornerPath =
|
|
51
|
-
sourceY <= targetY
|
|
52
|
-
? bottomLeftCorner(sourceX, cY, cornerSize)
|
|
53
|
-
: topLeftCorner(sourceX, cY, cornerSize)
|
|
54
|
-
secondCornerPath =
|
|
55
|
-
sourceY <= targetY
|
|
56
|
-
? rightTopCorner(targetX, cY, cornerSize)
|
|
57
|
-
: rightBottomCorner(targetX, cY, cornerSize)
|
|
58
|
-
} else {
|
|
59
|
-
firstCornerPath =
|
|
60
|
-
sourceY < targetY
|
|
61
|
-
? bottomRightCorner(sourceX, cY, cornerSize)
|
|
62
|
-
: topRightCorner(sourceX, cY, cornerSize)
|
|
63
|
-
secondCornerPath =
|
|
64
|
-
sourceY < targetY
|
|
65
|
-
? leftTopCorner(targetX, cY, cornerSize)
|
|
66
|
-
: leftBottomCorner(targetX, cY, cornerSize)
|
|
67
|
-
}
|
|
68
|
-
// for non-mixed edge left/right
|
|
69
|
-
if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
|
|
70
|
-
if (sourceX <= targetX) {
|
|
71
|
-
firstCornerPath =
|
|
72
|
-
sourceY <= targetY
|
|
73
|
-
? rightTopCorner(cX, sourceY, cornerSize)
|
|
74
|
-
: rightBottomCorner(cX, sourceY, cornerSize)
|
|
75
|
-
secondCornerPath =
|
|
76
|
-
sourceY <= targetY
|
|
77
|
-
? bottomLeftCorner(cX, targetY, cornerSize)
|
|
78
|
-
: topLeftCorner(cX, targetY, cornerSize)
|
|
79
|
-
} else if (
|
|
80
|
-
(sourcePosition === Position.Right && targetPosition === Position.Left) ||
|
|
81
|
-
(sourcePosition === Position.Left && targetPosition === Position.Right) ||
|
|
82
|
-
(sourcePosition === Position.Left && targetPosition === Position.Left)
|
|
83
|
-
) {
|
|
84
|
-
// and sourceX > targetX
|
|
85
|
-
firstCornerPath =
|
|
86
|
-
sourceY <= targetY
|
|
87
|
-
? leftTopCorner(cX, sourceY, cornerSize)
|
|
88
|
-
: leftBottomCorner(cX, sourceY, cornerSize)
|
|
89
|
-
secondCornerPath =
|
|
90
|
-
sourceY <= targetY
|
|
91
|
-
? bottomRightCorner(cX, targetY, cornerSize)
|
|
92
|
-
: topRightCorner(cX, targetY, cornerSize)
|
|
93
|
-
}
|
|
94
|
-
// for mixed edges (top/bottom to left/right) OR (left/right to top/bottom)
|
|
95
|
-
} else if (leftAndRight.includes(sourcePosition) && !leftAndRight.includes(targetPosition)) {
|
|
96
|
-
if (sourceX <= targetX) {
|
|
97
|
-
firstCornerPath =
|
|
98
|
-
sourceY <= targetY
|
|
99
|
-
? rightTopCorner(targetX, sourceY, cornerSize)
|
|
100
|
-
: rightBottomCorner(targetX, sourceY, cornerSize)
|
|
101
|
-
} else {
|
|
102
|
-
firstCornerPath =
|
|
103
|
-
sourceY <= targetY
|
|
104
|
-
? leftTopCorner(targetX, sourceY, cornerSize)
|
|
105
|
-
: leftBottomCorner(targetX, sourceY, cornerSize)
|
|
106
|
-
}
|
|
107
|
-
secondCornerPath = ''
|
|
108
|
-
} else if (!leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
|
|
109
|
-
if (sourceX <= targetX) {
|
|
110
|
-
firstCornerPath =
|
|
111
|
-
sourceY <= targetY
|
|
112
|
-
? bottomLeftCorner(sourceX, targetY, cornerSize)
|
|
113
|
-
: topLeftCorner(sourceX, targetY, cornerSize)
|
|
114
|
-
} else {
|
|
115
|
-
firstCornerPath =
|
|
116
|
-
sourceY <= targetY
|
|
117
|
-
? bottomRightCorner(sourceX, targetY, cornerSize)
|
|
118
|
-
: topRightCorner(sourceX, targetY, cornerSize)
|
|
119
|
-
}
|
|
120
|
-
secondCornerPath = ''
|
|
121
|
-
}
|
|
122
|
-
return `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`
|
|
123
|
-
}
|
|
124
|
-
export let edge
|
|
125
|
-
export let borderRadius = 5
|
|
126
|
-
export let canvasId
|
|
127
|
-
|
|
128
|
-
import { findStore } from '../../../store/models/store'
|
|
129
|
-
import { getAnchorFromEdge } from '../../../edges/controllers/util'
|
|
130
|
-
|
|
131
|
-
let params
|
|
132
|
-
$: {
|
|
133
|
-
const store = findStore(canvasId)
|
|
134
|
-
const sourceAnchor = getAnchorFromEdge(store, edge.id, 'source')
|
|
135
|
-
const targetAnchor = getAnchorFromEdge(store, edge.id, 'target')
|
|
136
|
-
const mapAngle = { 0: 'right', 90: 'top', 180: 'left', 270: 'bottom' }
|
|
137
|
-
params = {
|
|
138
|
-
sourceX: edge.sourceX,
|
|
139
|
-
sourceY: edge.sourceY,
|
|
140
|
-
targetX: edge.targetX,
|
|
141
|
-
targetY: edge.targetY,
|
|
142
|
-
sourcePosition: mapAngle[sourceAnchor.angle],
|
|
143
|
-
targetPosition: mapAngle[targetAnchor.angle],
|
|
144
|
-
borderRadius: borderRadius
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
$: [centerX, centerY] = getCenter(params)
|
|
148
|
-
$: path = getSmoothStepPath(params)
|
|
149
|
-
$: baseEdgeProps = {
|
|
150
|
-
...edge,
|
|
151
|
-
path: path,
|
|
152
|
-
centerX: centerX,
|
|
153
|
-
centerY: centerY
|
|
154
|
-
}
|
|
155
|
-
</script>
|
|
156
|
-
|
|
157
|
-
<BaseEdge {baseEdgeProps} {canvasId} />
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} SmoothStepEdgeProps */
|
|
2
|
-
/** @typedef {typeof __propDef.events} SmoothStepEdgeEvents */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} SmoothStepEdgeSlots */
|
|
4
|
-
export default class SmoothStepEdge extends SvelteComponent<{
|
|
5
|
-
edge: any;
|
|
6
|
-
canvasId: any;
|
|
7
|
-
borderRadius?: number | undefined;
|
|
8
|
-
getSmoothStepPath?: (({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, borderRadius, centerX, centerY }: {
|
|
9
|
-
sourceX: any;
|
|
10
|
-
sourceY: any;
|
|
11
|
-
sourcePosition?: string | undefined;
|
|
12
|
-
targetX: any;
|
|
13
|
-
targetY: any;
|
|
14
|
-
targetPosition?: string | undefined;
|
|
15
|
-
borderRadius?: number | undefined;
|
|
16
|
-
centerX: any;
|
|
17
|
-
centerY: any;
|
|
18
|
-
}) => string) | undefined;
|
|
19
|
-
}, {
|
|
20
|
-
[evt: string]: CustomEvent<any>;
|
|
21
|
-
}, {}> {
|
|
22
|
-
get getSmoothStepPath(): ({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, borderRadius, centerX, centerY }: {
|
|
23
|
-
sourceX: any;
|
|
24
|
-
sourceY: any;
|
|
25
|
-
sourcePosition?: string | undefined;
|
|
26
|
-
targetX: any;
|
|
27
|
-
targetY: any;
|
|
28
|
-
targetPosition?: string | undefined;
|
|
29
|
-
borderRadius?: number | undefined;
|
|
30
|
-
centerX: any;
|
|
31
|
-
centerY: any;
|
|
32
|
-
}) => string;
|
|
33
|
-
}
|
|
34
|
-
export type SmoothStepEdgeProps = typeof __propDef.props;
|
|
35
|
-
export type SmoothStepEdgeEvents = typeof __propDef.events;
|
|
36
|
-
export type SmoothStepEdgeSlots = typeof __propDef.slots;
|
|
37
|
-
import { SvelteComponent } from "svelte";
|
|
38
|
-
declare const __propDef: {
|
|
39
|
-
props: {
|
|
40
|
-
edge: any;
|
|
41
|
-
canvasId: any;
|
|
42
|
-
borderRadius?: number | undefined;
|
|
43
|
-
getSmoothStepPath?: (({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, borderRadius, centerX, centerY }: {
|
|
44
|
-
sourceX: any;
|
|
45
|
-
sourceY: any;
|
|
46
|
-
sourcePosition?: string | undefined;
|
|
47
|
-
targetX: any;
|
|
48
|
-
targetY: any;
|
|
49
|
-
targetPosition?: string | undefined;
|
|
50
|
-
borderRadius?: number | undefined;
|
|
51
|
-
centerX: any;
|
|
52
|
-
centerY: any;
|
|
53
|
-
}) => string) | undefined;
|
|
54
|
-
};
|
|
55
|
-
events: {
|
|
56
|
-
[evt: string]: CustomEvent<any>;
|
|
57
|
-
};
|
|
58
|
-
slots: {};
|
|
59
|
-
};
|
|
60
|
-
export {};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import SmoothStepEdge from './SmoothStepEdge.svelte';
|
|
3
|
-
export let edge;
|
|
4
|
-
export let canvasId;
|
|
5
|
-
</script>
|
|
6
|
-
|
|
7
|
-
<!-- Utilizes the SmoothStepEdge Component and sets borderRadius to zero to give a sharp edge -->
|
|
8
|
-
<SmoothStepEdge {edge} borderRadius={0} {canvasId} />
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} StepEdgeProps */
|
|
2
|
-
/** @typedef {typeof __propDef.events} StepEdgeEvents */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} StepEdgeSlots */
|
|
4
|
-
export default class StepEdge extends SvelteComponent<{
|
|
5
|
-
edge: any;
|
|
6
|
-
canvasId: any;
|
|
7
|
-
}, {
|
|
8
|
-
[evt: string]: CustomEvent<any>;
|
|
9
|
-
}, {}> {
|
|
10
|
-
}
|
|
11
|
-
export type StepEdgeProps = typeof __propDef.props;
|
|
12
|
-
export type StepEdgeEvents = typeof __propDef.events;
|
|
13
|
-
export type StepEdgeSlots = typeof __propDef.slots;
|
|
14
|
-
import { SvelteComponent } from "svelte";
|
|
15
|
-
declare const __propDef: {
|
|
16
|
-
props: {
|
|
17
|
-
edge: any;
|
|
18
|
-
canvasId: any;
|
|
19
|
-
};
|
|
20
|
-
events: {
|
|
21
|
-
[evt: string]: CustomEvent<any>;
|
|
22
|
-
};
|
|
23
|
-
slots: {};
|
|
24
|
-
};
|
|
25
|
-
export {};
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import type { XYPosition, Position } from './utils';
|
|
2
|
-
export interface Node<T = any> {
|
|
3
|
-
id: number;
|
|
4
|
-
position: XYPosition;
|
|
5
|
-
data: T;
|
|
6
|
-
width: number;
|
|
7
|
-
height: number;
|
|
8
|
-
bgColor?: string;
|
|
9
|
-
fontSize?: number;
|
|
10
|
-
borderColor?: string;
|
|
11
|
-
borderRadius?: number;
|
|
12
|
-
textColor?: string;
|
|
13
|
-
clickCallback?: Function;
|
|
14
|
-
image?: boolean;
|
|
15
|
-
src?: string;
|
|
16
|
-
sourcePosition?: 'left' | 'right' | 'top' | 'bottom';
|
|
17
|
-
targetPosition?: 'left' | 'right' | 'top' | 'bottom';
|
|
18
|
-
}
|
|
19
|
-
export interface Edge {
|
|
20
|
-
id: string;
|
|
21
|
-
source: number;
|
|
22
|
-
target: number;
|
|
23
|
-
label?: string;
|
|
24
|
-
labelBgColor?: string;
|
|
25
|
-
labelTextColor?: string;
|
|
26
|
-
edgeColor?: string;
|
|
27
|
-
type?: string;
|
|
28
|
-
animate?: boolean;
|
|
29
|
-
noHandle?: boolean;
|
|
30
|
-
arrow?: boolean;
|
|
31
|
-
}
|
|
32
|
-
export interface DerivedEdge extends Edge {
|
|
33
|
-
sourceX: number;
|
|
34
|
-
sourceY: number;
|
|
35
|
-
sourcePosition: Position;
|
|
36
|
-
targetX: number;
|
|
37
|
-
targetY: number;
|
|
38
|
-
targetPosition: Position;
|
|
39
|
-
}
|
|
40
|
-
export interface EdgeProps extends DerivedEdge {
|
|
41
|
-
path: string;
|
|
42
|
-
centerX: number;
|
|
43
|
-
centerY: number;
|
|
44
|
-
}
|
|
45
|
-
export interface EdgeTextProps {
|
|
46
|
-
label?: any;
|
|
47
|
-
labelBgColor?: string;
|
|
48
|
-
labelTextColor?: string;
|
|
49
|
-
centerX: number;
|
|
50
|
-
centerY: number;
|
|
51
|
-
}
|
|
52
|
-
export type HandleType = 'source' | 'target';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|