windmill-components 1.379.3 → 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.
Files changed (175) hide show
  1. package/package/components/ArgInput.svelte +33 -3
  2. package/package/components/DisplayResult.svelte +17 -5
  3. package/package/components/ErrorOrRecoveryHandler.svelte +3 -2
  4. package/package/components/FlowBuilder.svelte +3 -0
  5. package/package/components/FlowBuilder.svelte.d.ts +1 -0
  6. package/package/components/FlowGraphViewer.svelte +6 -5
  7. package/package/components/FlowJobResult.svelte +4 -2
  8. package/package/components/FlowJobResult.svelte.d.ts +2 -0
  9. package/package/components/FlowStatusViewerInner.svelte +17 -6
  10. package/package/components/FlowViewer.svelte +1 -0
  11. package/package/components/HighlightCode.svelte +2 -2
  12. package/package/components/ModulePreviewForm.svelte +1 -1
  13. package/package/components/ObjectResourceInput.svelte +7 -2
  14. package/package/components/ObjectResourceInput.svelte.d.ts +2 -0
  15. package/package/components/ResourcePicker.svelte +60 -48
  16. package/package/components/ScriptVersionHistory.svelte +63 -7
  17. package/package/components/apps/components/display/dbtable/DbExplorerCount.svelte +3 -2
  18. package/package/components/apps/components/display/table/AppAggridExplorerTable.svelte +22 -5
  19. package/package/components/apps/components/display/table/AppAggridTable.svelte +14 -5
  20. package/package/components/apps/components/display/table/AppAggridTableActions.svelte +23 -8
  21. package/package/components/apps/components/display/table/AppAggridTableActions.svelte.d.ts +5 -3
  22. package/package/components/apps/components/display/table/utils.js +8 -7
  23. package/package/components/apps/components/helpers/RunnableComponent.svelte +13 -1
  24. package/package/components/apps/components/helpers/eval.js +31 -25
  25. package/package/components/apps/editor/AppEditorHeader.svelte +1 -0
  26. package/package/components/apps/editor/AppReportsDrawer.svelte +4 -3
  27. package/package/components/apps/editor/component/components.d.ts +1 -1
  28. package/package/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte +0 -1
  29. package/package/components/apps/editor/settingsPanel/DecisionTreeGraphHeader.svelte +55 -45
  30. package/package/components/apps/editor/settingsPanel/DecisionTreeGraphHeader.svelte.d.ts +7 -9
  31. package/package/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte +66 -59
  32. package/package/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte.d.ts +9 -11
  33. package/package/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte +213 -254
  34. package/package/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte.d.ts +0 -1
  35. package/package/components/apps/editor/settingsPanel/decisionTree/nodeHelpers.d.ts +1 -1
  36. package/package/components/apps/editor/settingsPanel/decisionTree/nodeHelpers.js +2 -6
  37. package/package/components/details/DetailPageDetailPanel.svelte +9 -1
  38. package/package/components/details/DetailPageDetailPanel.svelte.d.ts +2 -1
  39. package/package/components/details/DetailPageLayout.svelte +2 -0
  40. package/package/components/details/DetailPageLayout.svelte.d.ts +3 -0
  41. package/package/components/details/EmailTriggerPanel.svelte +128 -0
  42. package/package/components/details/EmailTriggerPanel.svelte.d.ts +20 -0
  43. package/package/components/details/WebhooksPanel.svelte +7 -68
  44. package/package/components/flows/FlowHistory.svelte +1 -0
  45. package/package/components/flows/content/FlowInputs.svelte +0 -1
  46. package/package/components/flows/content/FlowModuleScript.svelte +33 -3
  47. package/package/components/flows/content/FlowModuleScript.svelte.d.ts +2 -0
  48. package/package/components/flows/content/FlowModuleSuspend.svelte +15 -0
  49. package/package/components/flows/flowInfers.js +1 -1
  50. package/package/components/flows/map/FlowJobsMenu.svelte +39 -44
  51. package/package/components/flows/map/FlowModuleSchemaItem.svelte +1 -2
  52. package/package/components/flows/map/FlowModuleSchemaMap.svelte +4 -3
  53. package/package/components/flows/map/InsertModuleButton.svelte +16 -9
  54. package/package/components/flows/map/MapItem.svelte +3 -97
  55. package/package/components/flows/map/MapItem.svelte.d.ts +0 -5
  56. package/package/components/flows/map/VirtualItem.svelte +6 -159
  57. package/package/components/flows/map/VirtualItem.svelte.d.ts +0 -15
  58. package/package/components/graph/FlowGraphV2.svelte +256 -0
  59. package/package/components/graph/{FlowGraph.svelte.d.ts → FlowGraphV2.svelte.d.ts} +8 -8
  60. package/package/components/graph/graphBuilder.d.ts +15 -0
  61. package/package/components/graph/graphBuilder.js +337 -0
  62. package/package/components/graph/index.d.ts +0 -1
  63. package/package/components/graph/index.js +0 -1
  64. package/package/components/graph/model.d.ts +1 -8
  65. package/package/components/graph/renderers/edges/BaseEdge.svelte +109 -0
  66. package/package/components/graph/renderers/edges/BaseEdge.svelte.d.ts +35 -0
  67. package/package/components/graph/renderers/edges/DataflowEdge.svelte +37 -0
  68. package/package/components/graph/renderers/edges/DataflowEdge.svelte.d.ts +29 -0
  69. package/package/components/graph/renderers/edges/EmptyEdge.svelte +22 -0
  70. package/package/components/graph/renderers/edges/EmptyEdge.svelte.d.ts +23 -0
  71. package/package/components/graph/renderers/nodes/BranchAllStart.svelte +44 -0
  72. package/package/components/graph/renderers/nodes/BranchAllStart.svelte.d.ts +29 -0
  73. package/package/components/graph/renderers/nodes/BranchOneStart.svelte +41 -0
  74. package/package/components/graph/renderers/nodes/BranchOneStart.svelte.d.ts +29 -0
  75. package/package/components/graph/renderers/nodes/ForLoopEndNode.svelte +19 -0
  76. package/package/components/graph/renderers/nodes/ForLoopEndNode.svelte.d.ts +24 -0
  77. package/package/components/graph/renderers/nodes/ForLoopStartNode.svelte +20 -0
  78. package/package/components/graph/renderers/nodes/ForLoopStartNode.svelte.d.ts +25 -0
  79. package/package/components/graph/renderers/nodes/InputNode.svelte +74 -0
  80. package/package/components/graph/renderers/nodes/InputNode.svelte.d.ts +23 -0
  81. package/package/components/graph/renderers/nodes/ModuleNode.svelte +71 -0
  82. package/package/components/graph/renderers/nodes/ModuleNode.svelte.d.ts +41 -0
  83. package/package/components/graph/renderers/nodes/NoBranchNode.svelte +20 -0
  84. package/package/components/graph/renderers/nodes/NoBranchNode.svelte.d.ts +27 -0
  85. package/package/components/graph/renderers/nodes/NodeWrapper.svelte +21 -0
  86. package/package/components/graph/renderers/nodes/NodeWrapper.svelte.d.ts +22 -0
  87. package/package/components/graph/renderers/nodes/ResultNode.svelte +24 -0
  88. package/package/components/graph/renderers/nodes/ResultNode.svelte.d.ts +22 -0
  89. package/package/components/graph/renderers/nodes/branchAllEndNode.svelte +19 -0
  90. package/package/components/graph/renderers/nodes/branchAllEndNode.svelte.d.ts +26 -0
  91. package/package/components/graph/renderers/nodes/branchOneEndNode.svelte +19 -0
  92. package/package/components/graph/renderers/nodes/branchOneEndNode.svelte.d.ts +24 -0
  93. package/package/components/graph/renderers/utils.d.ts +8 -0
  94. package/package/components/graph/renderers/utils.js +26 -0
  95. package/package/components/graph/util.d.ts +1 -2
  96. package/package/components/graph/util.js +2 -8
  97. package/package/components/home/Item.svelte +1 -1
  98. package/package/components/runs/RunsFilter.svelte +15 -17
  99. package/package/forLater.js +8 -4
  100. package/package/gen/core/OpenAPI.js +1 -1
  101. package/package/gen/schemas.gen.d.ts +3 -0
  102. package/package/gen/schemas.gen.js +3 -0
  103. package/package/gen/services.gen.d.ts +22 -3
  104. package/package/gen/services.gen.js +38 -2
  105. package/package/gen/types.gen.d.ts +69 -6
  106. package/package/hub.d.ts +11 -0
  107. package/package/hub.js +2 -0
  108. package/package/hubPaths.json +9 -0
  109. package/package/init_scripts/python_failure_module.d.ts +1 -1
  110. package/package/init_scripts/python_failure_module.js +4 -3
  111. package/package/script_helpers.d.ts +2 -2
  112. package/package/script_helpers.js +11 -9
  113. package/package.json +2 -1
  114. package/package/components/graph/FlowGraph.svelte +0 -614
  115. package/package/components/graph/svelvet/LICENSE +0 -21
  116. package/package/components/graph/svelvet/container/README.md +0 -7
  117. package/package/components/graph/svelvet/container/controllers/middleware.d.ts +0 -11
  118. package/package/components/graph/svelvet/container/controllers/middleware.js +0 -87
  119. package/package/components/graph/svelvet/container/models/index.d.ts +0 -0
  120. package/package/components/graph/svelvet/container/models/index.js +0 -1
  121. package/package/components/graph/svelvet/container/views/GraphView.svelte +0 -262
  122. package/package/components/graph/svelvet/container/views/GraphView.svelte.d.ts +0 -26
  123. package/package/components/graph/svelvet/container/views/Svelvet.svelte +0 -121
  124. package/package/components/graph/svelvet/container/views/Svelvet.svelte.d.ts +0 -36
  125. package/package/components/graph/svelvet/customCss/controllers/getCss.d.ts +0 -2
  126. package/package/components/graph/svelvet/customCss/controllers/getCss.js +0 -46
  127. package/package/components/graph/svelvet/d3/controllers/d3.d.ts +0 -5
  128. package/package/components/graph/svelvet/d3/controllers/d3.js +0 -59
  129. package/package/components/graph/svelvet/edges/controllers/anchorCbDev.d.ts +0 -4
  130. package/package/components/graph/svelvet/edges/controllers/anchorCbDev.js +0 -92
  131. package/package/components/graph/svelvet/edges/controllers/anchorCbUser.d.ts +0 -57
  132. package/package/components/graph/svelvet/edges/controllers/anchorCbUser.js +0 -73
  133. package/package/components/graph/svelvet/edges/controllers/util.d.ts +0 -37
  134. package/package/components/graph/svelvet/edges/controllers/util.js +0 -71
  135. package/package/components/graph/svelvet/edges/models/Anchor.d.ts +0 -48
  136. package/package/components/graph/svelvet/edges/models/Anchor.js +0 -122
  137. package/package/components/graph/svelvet/edges/models/Edge.d.ts +0 -48
  138. package/package/components/graph/svelvet/edges/models/Edge.js +0 -109
  139. package/package/components/graph/svelvet/edges/types/types.d.ts +0 -18
  140. package/package/components/graph/svelvet/edges/types/types.js +0 -1
  141. package/package/components/graph/svelvet/edges/views/Edges/BaseEdge.svelte +0 -104
  142. package/package/components/graph/svelvet/edges/views/Edges/BaseEdge.svelte.d.ts +0 -18
  143. package/package/components/graph/svelvet/edges/views/Edges/EdgeText.svelte +0 -42
  144. package/package/components/graph/svelvet/edges/views/Edges/EdgeText.svelte.d.ts +0 -17
  145. package/package/components/graph/svelvet/edges/views/Edges/SimpleBezierEdge.svelte +0 -151
  146. package/package/components/graph/svelvet/edges/views/Edges/SimpleBezierEdge.svelte.d.ts +0 -17
  147. package/package/components/graph/svelvet/edges/views/Edges/SmoothStepEdge.svelte +0 -157
  148. package/package/components/graph/svelvet/edges/views/Edges/SmoothStepEdge.svelte.d.ts +0 -60
  149. package/package/components/graph/svelvet/edges/views/Edges/StepEdge.svelte +0 -8
  150. package/package/components/graph/svelvet/edges/views/Edges/StepEdge.svelte.d.ts +0 -25
  151. package/package/components/graph/svelvet/edges/views/Edges/types.d.ts +0 -52
  152. package/package/components/graph/svelvet/edges/views/Edges/types.js +0 -1
  153. package/package/components/graph/svelvet/edges/views/Edges/utils.d.ts +0 -33
  154. package/package/components/graph/svelvet/edges/views/Edges/utils.js +0 -31
  155. package/package/components/graph/svelvet/nodes/controllers/util.d.ts +0 -9
  156. package/package/components/graph/svelvet/nodes/controllers/util.js +0 -13
  157. package/package/components/graph/svelvet/nodes/models/Node.d.ts +0 -74
  158. package/package/components/graph/svelvet/nodes/models/Node.js +0 -156
  159. package/package/components/graph/svelvet/nodes/views/Node.svelte +0 -84
  160. package/package/components/graph/svelvet/nodes/views/Node.svelte.d.ts +0 -21
  161. package/package/components/graph/svelvet/store/controllers/storeApi.d.ts +0 -25
  162. package/package/components/graph/svelvet/store/controllers/storeApi.js +0 -91
  163. package/package/components/graph/svelvet/store/controllers/userApi.d.ts +0 -3
  164. package/package/components/graph/svelvet/store/controllers/userApi.js +0 -18
  165. package/package/components/graph/svelvet/store/controllers/util.d.ts +0 -24
  166. package/package/components/graph/svelvet/store/controllers/util.js +0 -148
  167. package/package/components/graph/svelvet/store/models/store.d.ts +0 -13
  168. package/package/components/graph/svelvet/store/models/store.js +0 -12
  169. package/package/components/graph/svelvet/store/types/types.d.ts +0 -127
  170. package/package/components/graph/svelvet/store/types/types.js +0 -1
  171. package/package/components/graph/svelvet/types/README.md +0 -3
  172. package/package/components/graph/svelvet/types/index.d.ts +0 -2
  173. package/package/components/graph/svelvet/types/index.js +0 -1
  174. package/package/components/graph/svelvet/types/types.d.ts +0 -50
  175. package/package/components/graph/svelvet/types/types.js +0 -18
@@ -1,33 +0,0 @@
1
- export declare enum Position {
2
- Left = "left",
3
- Right = "right",
4
- Top = "top",
5
- Bottom = "bottom"
6
- }
7
- export interface XYPosition {
8
- x: number;
9
- y: number;
10
- }
11
- export type XYZPosition = XYPosition & {
12
- z: number;
13
- };
14
- export interface Dimensions {
15
- width: number;
16
- height: number;
17
- }
18
- export interface Rect extends Dimensions, XYPosition {
19
- }
20
- export interface Box extends XYPosition {
21
- x2: number;
22
- y2: number;
23
- }
24
- export type Transform = [number, number, number];
25
- export interface GetCenterParams {
26
- sourceX: number;
27
- sourceY: number;
28
- targetX: number;
29
- targetY: number;
30
- sourcePosition?: Position;
31
- targetPosition?: Position;
32
- }
33
- export declare const getCenter: ({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, }: GetCenterParams) => [number, number, number, number];
@@ -1,31 +0,0 @@
1
- // enumerable values (static) set for Position
2
- export var Position;
3
- (function (Position) {
4
- Position["Left"] = "left";
5
- Position["Right"] = "right";
6
- Position["Top"] = "top";
7
- Position["Bottom"] = "bottom";
8
- })(Position || (Position = {}));
9
- //needed for getCenter funciotn
10
- const LeftOrRight = [Position.Left, Position.Right];
11
- //used to determine the position for edge text on a Smooth or Step Edge
12
- export const getCenter = ({ sourceX, sourceY, targetX, targetY, sourcePosition = Position.Bottom, targetPosition = Position.Top, }) => {
13
- const sourceIsLeftOrRight = LeftOrRight.includes(sourcePosition);
14
- const targetIsLeftOrRight = LeftOrRight.includes(targetPosition);
15
- // we expect flows to be horizontal or vertical (all handles left or right respectively top or bottom)
16
- // a mixed edge is when one the source is on the left and the target is on the top for example.
17
- const mixedEdge = (sourceIsLeftOrRight && !targetIsLeftOrRight) ||
18
- (targetIsLeftOrRight && !sourceIsLeftOrRight);
19
- if (mixedEdge) {
20
- const xOffset = sourceIsLeftOrRight ? Math.abs(targetX - sourceX) : 0;
21
- const centerX = sourceX > targetX ? sourceX - xOffset : sourceX + xOffset;
22
- const yOffset = sourceIsLeftOrRight ? 0 : Math.abs(targetY - sourceY);
23
- const centerY = sourceY < targetY ? sourceY + yOffset : sourceY - yOffset;
24
- return [centerX, centerY, xOffset, yOffset];
25
- }
26
- const xOffset = Math.abs(targetX - sourceX) / 2;
27
- const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
28
- const yOffset = Math.abs(targetY - sourceY) / 2;
29
- const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
30
- return [centerX, centerY, xOffset, yOffset];
31
- };
@@ -1,9 +0,0 @@
1
- import type { StoreType } from '../../store/types/types';
2
- /**
3
- * getNodeById will look for the targeted Node that has the same id provided in the Svelvet component store.
4
- *
5
- * @param store The Svelvet store containing the state of a Svelvet component
6
- * @param id The id of the targeted Node
7
- * @returns The targeted Node object in store.nodesStore
8
- */
9
- export declare function getNodeById(store: StoreType, id: string): import("../../store/types/types").NodeType;
@@ -1,13 +0,0 @@
1
- import { get } from 'svelte/store';
2
- /**
3
- * getNodeById will look for the targeted Node that has the same id provided in the Svelvet component store.
4
- *
5
- * @param store The Svelvet store containing the state of a Svelvet component
6
- * @param id The id of the targeted Node
7
- * @returns The targeted Node object in store.nodesStore
8
- */
9
- export function getNodeById(store, id) {
10
- const nodesStore = get(store.nodesStore);
11
- const node = nodesStore[id];
12
- return node;
13
- }
@@ -1,74 +0,0 @@
1
- /** this is where we create our node store */
2
- import type { NodeType } from '../../store/types/types';
3
- /** A Node class that implements NodeType interface
4
- * @param {string} id The id of the Node
5
- * @param {number} positionX The X-axis position of the Node (left top corner of the Node)
6
- * @param {number} positionY The Y-axis position of the Node (left top corner of the Node)
7
- * @param {number} width The width of the Node
8
- * @param {number} height The height of the Node
9
- * @param {string} bgColor The background color of the node
10
- * @param {object} data A data object that user can specify; possible keys are 'label' and 'custom';
11
- * @param {string} canvasId The canvasId of the Svelvet component that the instantiated Node will be on.
12
- * @param {string} borderColor The border color of the Node
13
- * @param {boolean} image A boolean set to true if the Node needs to display an image
14
- * @param {string} src The src link for the image; image and src are closely tied and a src link is only needed when image sets to true
15
- * @param {string} textColor The color of the text in the Node
16
- * @param {string} borderRadius The border radius of the Node
17
- * @param {string} childNodes An array of node ids that will be grouped as child nodes of this Node. This is for the GroupNodes feature. The current implementation of this feature works one way but not the other (when you drag the parent node, the child nodes will move as a group but when you drag the child node, the parent node would not move along)
18
- * @param {string} className The custom class name if user specifies. This is for the custom className feature for Node.
19
- */
20
- export declare class Node implements NodeType {
21
- id: string;
22
- positionX: number;
23
- positionY: number;
24
- width: number;
25
- height: number;
26
- bgColor: string;
27
- data: object;
28
- canvasId: string;
29
- borderColor: string;
30
- image: boolean;
31
- src: string;
32
- textColor: string;
33
- borderRadius: number;
34
- childNodes: string[];
35
- className: string;
36
- clickCallback: Function;
37
- constructor(id: string, positionX: number, positionY: number, width: number, height: number, bgColor: string, data: object, canvasId: string, borderColor: string, image: boolean, src: string, textColor: string, borderRadius: number, childNodes: string[], className: string, clickCallback: Function);
38
- /**
39
- * setPositionFromMovement will update the positionX and positionY of the Node when user drags a Node around on the canvas, reflect the changes in real time in the nodesStore, and also cascade the changes to all relative elements like Anchors and Edges.
40
- * @param {number} movementX The mouse movement value on the X-axis
41
- * @param {number} movementY The mouse movement value on the Y-axis
42
- */
43
- setPositionFromMovement(movementX: number, movementY: number): void;
44
- /**
45
- * setSizeFromMovement will update the width and height of the Node when user resizes the Node by dragging at the right bottom corner (where the ResizedNode attached), reflect the changes in real time in the nodesStore, and also cascade the changes to all relative elements like Anchors and potential Anchors.
46
- *
47
- * @param movementX The mouse movement value on the X-axis
48
- * @param movementY The mouse movement value on the Y-axis
49
- */
50
- setSizeFromMovement(movementX: number, movementY: number): void;
51
- /**
52
- * setExportableData is going to construct an object that holds all the node data that can be exported. This method is used for Exporting Diagrams feature.
53
- *
54
- * @returns An object with all the exportable data of the Node. The format of this object should align with the original format of node data user provided.
55
- */
56
- setExportableData(): {
57
- id: string;
58
- width: number;
59
- height: number;
60
- position: {
61
- x: number;
62
- y: number;
63
- };
64
- data: object;
65
- bgColor: string;
66
- borderColor: string;
67
- textColor: string;
68
- borderRadius: number;
69
- image: boolean;
70
- src: string;
71
- childNodes: string[];
72
- customClassName: string;
73
- };
74
- }
@@ -1,156 +0,0 @@
1
- import { get } from 'svelte/store';
2
- import { stores } from '../../store/models/store';
3
- /** A Node class that implements NodeType interface
4
- * @param {string} id The id of the Node
5
- * @param {number} positionX The X-axis position of the Node (left top corner of the Node)
6
- * @param {number} positionY The Y-axis position of the Node (left top corner of the Node)
7
- * @param {number} width The width of the Node
8
- * @param {number} height The height of the Node
9
- * @param {string} bgColor The background color of the node
10
- * @param {object} data A data object that user can specify; possible keys are 'label' and 'custom';
11
- * @param {string} canvasId The canvasId of the Svelvet component that the instantiated Node will be on.
12
- * @param {string} borderColor The border color of the Node
13
- * @param {boolean} image A boolean set to true if the Node needs to display an image
14
- * @param {string} src The src link for the image; image and src are closely tied and a src link is only needed when image sets to true
15
- * @param {string} textColor The color of the text in the Node
16
- * @param {string} borderRadius The border radius of the Node
17
- * @param {string} childNodes An array of node ids that will be grouped as child nodes of this Node. This is for the GroupNodes feature. The current implementation of this feature works one way but not the other (when you drag the parent node, the child nodes will move as a group but when you drag the child node, the parent node would not move along)
18
- * @param {string} className The custom class name if user specifies. This is for the custom className feature for Node.
19
- */
20
- export class Node {
21
- id;
22
- positionX;
23
- positionY;
24
- width;
25
- height;
26
- bgColor;
27
- data;
28
- canvasId;
29
- borderColor;
30
- image;
31
- src;
32
- textColor;
33
- borderRadius;
34
- childNodes;
35
- className;
36
- clickCallback;
37
- constructor(id, positionX, positionY, width, height, bgColor, data, canvasId, borderColor, image, src, textColor, borderRadius, childNodes, className, clickCallback) {
38
- this.id = id;
39
- this.positionX = positionX;
40
- this.positionY = positionY;
41
- this.width = width;
42
- this.height = height;
43
- this.bgColor = bgColor;
44
- this.data = data;
45
- this.canvasId = canvasId;
46
- this.borderColor = borderColor;
47
- this.image = image;
48
- this.src = src;
49
- this.textColor = textColor;
50
- this.borderRadius = borderRadius;
51
- this.childNodes = childNodes;
52
- this.className = className;
53
- this.clickCallback = clickCallback;
54
- }
55
- /**
56
- * setPositionFromMovement will update the positionX and positionY of the Node when user drags a Node around on the canvas, reflect the changes in real time in the nodesStore, and also cascade the changes to all relative elements like Anchors and Edges.
57
- * @param {number} movementX The mouse movement value on the X-axis
58
- * @param {number} movementY The mouse movement value on the Y-axis
59
- */
60
- setPositionFromMovement(movementX, movementY) {
61
- const { nodesStore, anchorsStore, potentialAnchorsStore, boundary, lockedOption } = stores[this.canvasId];
62
- if (get(lockedOption))
63
- return; // don't do anything if locked is enabled
64
- // boundary sets the boundary of the canvas, or else it is false if their is no boundary
65
- // check if out of bounds, and if so return without doing anything
66
- const boundaryObj = get(boundary);
67
- if (typeof boundaryObj === 'object' &&
68
- (this.positionX + this.width + movementX >= boundaryObj.x ||
69
- this.positionY + this.height + movementY >= boundaryObj.y ||
70
- this.positionY + movementY <= 0 ||
71
- this.positionX + movementX <= 0))
72
- return;
73
- //update all necessary data
74
- this.positionX += movementX;
75
- this.positionY += movementY;
76
- // update children
77
- nodesStore.update((nodes) => {
78
- if (this.childNodes)
79
- for (const childNodeId of this.childNodes)
80
- nodes[childNodeId].setPositionFromMovement(movementX, movementY);
81
- return { ...nodes };
82
- });
83
- //update all the anchors on the node in the anchorsStore
84
- anchorsStore.update((anchors) => {
85
- for (const anchorId in anchors) {
86
- if (anchors[anchorId].nodeId === this.id) {
87
- anchors[anchorId].setPositionFromNode();
88
- }
89
- }
90
- return { ...anchors };
91
- });
92
- //update all the anchors on the node in the anchorsStore
93
- potentialAnchorsStore.update((anchors) => {
94
- for (const anchorId in anchors) {
95
- if (anchors[anchorId].nodeId === this.id) {
96
- anchors[anchorId].callback(); // we don't have to worry about setting partner anchors/etc;
97
- }
98
- }
99
- return { ...anchors };
100
- });
101
- }
102
- /**
103
- * setSizeFromMovement will update the width and height of the Node when user resizes the Node by dragging at the right bottom corner (where the ResizedNode attached), reflect the changes in real time in the nodesStore, and also cascade the changes to all relative elements like Anchors and potential Anchors.
104
- *
105
- * @param movementX The mouse movement value on the X-axis
106
- * @param movementY The mouse movement value on the Y-axis
107
- */
108
- setSizeFromMovement(movementX, movementY) {
109
- this.width += movementX;
110
- this.height += movementY;
111
- const { anchorsStore, potentialAnchorsStore } = stores[this.canvasId];
112
- //Updates the anchor so it follows the node's position as the dimensions change
113
- anchorsStore.update((anchors) => {
114
- for (const anchorId in anchors) {
115
- if (anchors[anchorId].nodeId === this.id) {
116
- anchors[anchorId].setPositionFromNode();
117
- //anchors[anchorId].setPosition(movementX, movementY);
118
- }
119
- }
120
- return { ...anchors };
121
- });
122
- //update all the anchors on the node in the anchorsStore
123
- potentialAnchorsStore.update((anchors) => {
124
- for (const anchorId in anchors) {
125
- if (anchors[anchorId].nodeId === this.id) {
126
- anchors[anchorId].callback(); // we don't have to worry about setting partner anchors/etc;
127
- }
128
- }
129
- return { ...anchors };
130
- });
131
- }
132
- /**
133
- * setExportableData is going to construct an object that holds all the node data that can be exported. This method is used for Exporting Diagrams feature.
134
- *
135
- * @returns An object with all the exportable data of the Node. The format of this object should align with the original format of node data user provided.
136
- */
137
- setExportableData() {
138
- const exportableData = {
139
- id: this.id,
140
- // canvasId: this.canvasId,
141
- width: this.width,
142
- height: this.height,
143
- position: { x: this.positionX, y: this.positionY },
144
- data: this.data,
145
- bgColor: this.bgColor,
146
- borderColor: this.borderColor,
147
- textColor: this.textColor,
148
- borderRadius: this.borderRadius,
149
- image: this.image,
150
- src: this.src,
151
- childNodes: this.childNodes,
152
- customClassName: this.className
153
- };
154
- return exportableData;
155
- }
156
- }
@@ -1,84 +0,0 @@
1
- <script>import { afterUpdate } from 'svelte';
2
- import { findStore } from '../../store/models/store';
3
- import { forceCssHeightAndWidth } from '../../customCss/controllers/getCss';
4
- export let node;
5
- export let canvasId;
6
- export let isCustom = false;
7
- const store = findStore(canvasId);
8
- const { lockedOption } = store;
9
- // forceCssHeightAndWidth forces the size of the node to be defined by CSS
10
- afterUpdate(() => {
11
- if (node.className)
12
- forceCssHeightAndWidth(store, node);
13
- });
14
- const mousedown = (e) => {
15
- if (node.clickCallback)
16
- node.clickCallback(node);
17
- };
18
- </script>
19
-
20
- <!-- on:wheel prevents page scroll when using mousewheel in the Node -->
21
- <div
22
- on:mousedown={mousedown}
23
- on:touchstart={mousedown}
24
- class="{isCustom ? 'CustomNode' : 'Node'} {node.className}"
25
- style="left: {node.positionX}px;
26
- top: {node.positionY}px;
27
- width: {node.width}px;
28
- height: {node.height}px;
29
- {isCustom
30
- ? ''
31
- : `
32
- background-color: ${node.bgColor ?? 'white'};
33
- border-color: ${node.borderColor};
34
- border-radius: ${node.borderRadius}px;
35
- color: ${node.textColor};
36
- cursor: ${$lockedOption ? 'default' : 'grab'};`}"
37
- id="svelvet-{node.id}"
38
- >
39
- <!-- This executes if node.image is present without node.label -->
40
- {#if node.image}
41
- <img
42
- src={node.src}
43
- alt=""
44
- style="width: {node.width * 0.75}px;
45
- height: {node.height * 0.75}px;
46
- overflow: hidden;"
47
- />
48
- {/if}
49
- <slot />
50
- </div>
51
-
52
- <style>
53
- .CustomNode {
54
- position: absolute;
55
- display: grid;
56
- justify-content: center;
57
- align-items: center;
58
- font-size: 14px;
59
- text-align: center;
60
- pointer-events: auto;
61
- box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
62
- }
63
-
64
- .Node {
65
- position: absolute;
66
- display: grid;
67
- -webkit-user-select: none;
68
- -moz-user-select: none;
69
- user-select: none;
70
- justify-content: center;
71
- overscroll-behavior: auto;
72
- align-items: center;
73
- font-size: 14px;
74
- text-align: center;
75
- border: solid 1px black;
76
- border-radius: 5px;
77
- box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
78
- pointer-events: auto; /* this is needed for pointer events to work since we disable them in graphview */
79
- }
80
- /* the default behavior when click/dragging an image is to move it. This interferes with node dragging. We disable pointer events on img to prevent this */
81
- /* Alternatively, we could use e.preventDefault() on mouseDown. However, this interferes with embedded Svelvet forms */
82
- img {
83
- pointer-events: none;
84
- }</style>
@@ -1,21 +0,0 @@
1
- import { SvelteComponent } from "svelte";
2
- import type { NodeType } from '../../store/types/types';
3
- declare const __propDef: {
4
- props: {
5
- node: NodeType;
6
- canvasId: string;
7
- isCustom?: boolean | undefined;
8
- };
9
- events: {
10
- [evt: string]: CustomEvent<any>;
11
- };
12
- slots: {
13
- default: {};
14
- };
15
- };
16
- export type NodeProps = typeof __propDef.props;
17
- export type NodeEvents = typeof __propDef.events;
18
- export type NodeSlots = typeof __propDef.slots;
19
- export default class Node extends SvelteComponent<NodeProps, NodeEvents, NodeSlots> {
20
- }
21
- export {};
@@ -1,25 +0,0 @@
1
- import type { StoreType } from '../types/types';
2
- import type { UserNodeType, UserEdgeType } from '../../types/types';
3
- /**
4
- * createStoreEmpty will initialize a new Svelvet store with a unique canvasId.
5
- * If you have multiple Svelvet components on the page, the stores object will look like the following example:
6
- * const stores = \{
7
- * canvasId-1: store of Svelvet component 1,
8
- * canvasId-2: store of Svelvet component 2,
9
- * canvasId-3: store of Svelvet component 3,
10
- * \}
11
- * Notes: This should be called once every time you initialize a new Svelvet canvas, (ie, only in the Svelvet.svelte file).
12
- * This function will initialize an empty store for the Svelvet component and should be followed by invoking populateSvelvetStoreFromUserInput to populate all the initial state from the user input.
13
- *
14
- * @param canvasId The canvasId of the newly created Svelvet component
15
- * @returns An empty store for the newly created Svelvet component.
16
- */
17
- export declare function createStoreEmpty(canvasId: string): StoreType;
18
- /**
19
- * populateSvelvetStoreFromUserInput will populate all the states and set these states into the Svelvet store initialized by invoking createStoreEmpty
20
- *
21
- * @param canvasId The canvasId of the Svelvet component you are creating a store for
22
- * @param nodes This is an array of objects containing node info that is defined by the user. NOTE THAT THE STRUCTURE DIFFERS FROM THE NODES CLASS. The whole point of populateSvelvetStoreFromUserInput is to convert nodes into proper Svelvet Node objects. An example of nodes is in $routes/testingplayground/index.svelte
23
- * @param edges Same as nodes, this is an array of objects containing edge info THAT IS DIFFERENT FROM THE EDGE CLASS.
24
- */
25
- export declare function populateSvelvetStoreFromUserInput(canvasId: string, nodes: UserNodeType[], edges: UserEdgeType[]): void;
@@ -1,91 +0,0 @@
1
- /*
2
-
3
-
4
- Important functions (in order of how likely I think you are to use them):
5
-
6
- findStore(canvasId: string)
7
- - Input: canvasId. There can be multiple Svelvet canvases on the same page, and each has their own store
8
- - Returns: store
9
- - Notes: You will need to call this function on every component you make
10
-
11
- getNodes(store, filter)
12
- - Description: this function returns of list of Node objects
13
- - Input: store: the store where you get the list of Node objects from
14
- - filter: an object where you can filter the array. For example, if you want to find nodes with an id of 'sdf-2d3fs' and positionX=35, then you
15
- would set filter = {id: 'sdf-2d3fs, positionX: 35}.
16
- Right now, you can only test for equality.
17
- - Notes: This is a very mongoose way of retrieving information. Given the relational nature of our stores, maybe it would be better to use an SQL-like syntax
18
- This array is non-reactive (ie, you cannot use information from this array to force a re-render of a Svelte component)
19
-
20
- createStoreEmpty(canvasId: string)
21
- - Input: canvasId.
22
- - Returns: store
23
- - Notes. This should be called once every time you initialize a new Svelvet canvas, (ie, only in the Svelvet.svelte file)
24
-
25
- populateSvelvetStoreFromUserInput(canvasId, nodes, edges)
26
- - canvasId: this the the canvasId of the Svelvet component you are creating a store for
27
- - nodes: this is an array of objects containing node info that is defined by the user. NOTE THAT THE STRUCTURE DIFFERS FROM THE NODES CLASS
28
- The whole point of populateSvelvetStoreFromUserInput is to convert nodes into proper Svelvet Node objects. An example of nodes is in
29
- $routes/testingplayground/index.svelte
30
- - edges: same as nodes, this is an array of objects containing edge info THAT IS DIFFERENT FROM THE EDGE CLASS.
31
- - Returns: store
32
- */
33
- import { findStore, stores } from '../models/store';
34
- import { writable } from 'svelte/store';
35
- import { populateAnchorsStore, populateNodesStore, populateEdgesStore } from './util';
36
- /**
37
- * createStoreEmpty will initialize a new Svelvet store with a unique canvasId.
38
- * If you have multiple Svelvet components on the page, the stores object will look like the following example:
39
- * const stores = \{
40
- * canvasId-1: store of Svelvet component 1,
41
- * canvasId-2: store of Svelvet component 2,
42
- * canvasId-3: store of Svelvet component 3,
43
- * \}
44
- * Notes: This should be called once every time you initialize a new Svelvet canvas, (ie, only in the Svelvet.svelte file).
45
- * This function will initialize an empty store for the Svelvet component and should be followed by invoking populateSvelvetStoreFromUserInput to populate all the initial state from the user input.
46
- *
47
- * @param canvasId The canvasId of the newly created Svelvet component
48
- * @returns An empty store for the newly created Svelvet component.
49
- */
50
- export function createStoreEmpty(canvasId) {
51
- stores[canvasId] = {
52
- nodesStore: writable({}),
53
- edgesStore: writable({}),
54
- anchorsStore: writable({}),
55
- potentialAnchorsStore: writable({}),
56
- widthStore: writable(600),
57
- heightStore: writable(600),
58
- backgroundStore: writable(false),
59
- movementStore: writable(true),
60
- nodeSelected: writable(false),
61
- nodeIdSelected: writable(-1),
62
- d3Scale: writable(1),
63
- options: writable({}),
64
- temporaryEdgeStore: writable([]),
65
- nodeCreate: writable(false),
66
- boundary: writable(false),
67
- edgeEditModal: writable(null),
68
- lockedOption: writable(false),
69
- editableOption: writable(false),
70
- d3ZoomParameters: writable({}),
71
- highlightEdgesOption: writable(true) // option to turn on/off highlightable edges
72
- };
73
- return stores[canvasId];
74
- }
75
- /**
76
- * populateSvelvetStoreFromUserInput will populate all the states and set these states into the Svelvet store initialized by invoking createStoreEmpty
77
- *
78
- * @param canvasId The canvasId of the Svelvet component you are creating a store for
79
- * @param nodes This is an array of objects containing node info that is defined by the user. NOTE THAT THE STRUCTURE DIFFERS FROM THE NODES CLASS. The whole point of populateSvelvetStoreFromUserInput is to convert nodes into proper Svelvet Node objects. An example of nodes is in $routes/testingplayground/index.svelte
80
- * @param edges Same as nodes, this is an array of objects containing edge info THAT IS DIFFERENT FROM THE EDGE CLASS.
81
- */
82
- export function populateSvelvetStoreFromUserInput(canvasId, nodes, edges) {
83
- // find the store
84
- const store = findStore(canvasId);
85
- // populate store.nodesStore with user nodes
86
- populateNodesStore(store, nodes, canvasId);
87
- // populate store.anchorsStore with anchors. Note the userdoes not explictly define anchors; anchors are calculated from the edges
88
- populateAnchorsStore(store, nodes, edges, canvasId);
89
- // populate edges
90
- populateEdgesStore(store, edges, canvasId);
91
- }
@@ -1,3 +0,0 @@
1
- export declare function getD3PositionX(canvasId: any): number;
2
- export declare function getD3PositionY(canvasId: any): number;
3
- export declare function getD3Zoom(canvasId: any): number;
@@ -1,18 +0,0 @@
1
- import { findStore } from '../models/store';
2
- import { get } from 'svelte/store';
3
- export function getD3PositionX(canvasId) {
4
- const store = findStore(canvasId);
5
- const width = get(store.widthStore);
6
- const x = width / 2 - get(store.d3ZoomParameters).x; // user input is shifted so that x=0, y=0 occurs in the center
7
- return x;
8
- }
9
- export function getD3PositionY(canvasId) {
10
- const store = findStore(canvasId);
11
- const height = get(store.heightStore);
12
- const y = height / 2 - get(store.d3ZoomParameters).y; // user input is shifted so that x=0, y=0 occurs in the center
13
- return y;
14
- }
15
- export function getD3Zoom(canvasId) {
16
- const store = findStore(canvasId);
17
- return get(store.d3ZoomParameters).k;
18
- }
@@ -1,24 +0,0 @@
1
- import type { UserEdgeType, UserNodeType } from '../../types/types';
2
- import type { StoreType } from '../types/types';
3
- /**
4
- * Populates edgesStore of Edges. This function does not return the edgesStore. Instead it sets the nodesStore of Svelvet store.
5
- * @param store An object containing the state of the Svelvet component. You can access the following through `store`: nodesStore, edgesStore, anchorsStore, etc.
6
- * @param edges An edge that the user specifies. This is NOT the same as a Edge object.
7
- * @param canvasId The canvasId of the Svelvet component that holds the Edges
8
- */
9
- export declare function populateEdgesStore(store: StoreType, edges: UserEdgeType[], canvasId: string): void;
10
- /**
11
- * Populates the anchorsStore. This will overwrite any data in the AnchorsStore.
12
- * @param store The Svelvet store containing the state of the Svelvet component
13
- * @param nodes An array of user specified nodes
14
- * @param edges An array of user specified edges
15
- * @param canvasId The canvasId of the Svelvet component that holds the nodes and edges
16
- */
17
- export declare function populateAnchorsStore(store: StoreType, nodes: UserNodeType[], edges: UserEdgeType[], canvasId: string): void;
18
- /**
19
- * Populates the nodesStore. This will overwrite any data in the nodesStore.
20
- * @param store The Svelvet store containing the state of the Svelvet component
21
- * @param nodes An array of user specifed nodes
22
- * @param canvasId The canvasId of the Svelvet component that holds the nodes
23
- */
24
- export declare function populateNodesStore(store: StoreType, nodes: UserNodeType[], canvasId: string): void;