@aloudata/ink-flow 1.0.26 → 1.0.28

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 (245) hide show
  1. package/dist/components/A11yDescriptions/index.js +29 -0
  2. package/dist/components/A11yDescriptions/index.js.map +1 -0
  3. package/dist/components/BatchProvider/index.js +86 -0
  4. package/dist/components/BatchProvider/index.js.map +1 -0
  5. package/dist/components/BatchProvider/types.js +2 -0
  6. package/dist/components/BatchProvider/types.js.map +1 -0
  7. package/dist/components/BatchProvider/useQueue.js +56 -0
  8. package/dist/components/BatchProvider/useQueue.js.map +1 -0
  9. package/dist/components/ConnectionLine/index.js +62 -0
  10. package/dist/components/ConnectionLine/index.js.map +1 -0
  11. package/dist/components/EdgeLabelRenderer/index.js +12 -0
  12. package/dist/components/EdgeLabelRenderer/index.js.map +1 -0
  13. package/dist/components/EdgeWrapper/EdgeUpdateAnchors.js +68 -0
  14. package/dist/components/EdgeWrapper/EdgeUpdateAnchors.js.map +1 -0
  15. package/dist/components/EdgeWrapper/index.js +159 -0
  16. package/dist/components/EdgeWrapper/index.js.map +1 -0
  17. package/dist/components/EdgeWrapper/utils.js +17 -0
  18. package/dist/components/EdgeWrapper/utils.js.map +1 -0
  19. package/dist/components/Edges/BaseEdge.js +9 -0
  20. package/dist/components/Edges/BaseEdge.js.map +1 -0
  21. package/dist/components/Edges/BezierEdge.js +28 -0
  22. package/dist/components/Edges/BezierEdge.js.map +1 -0
  23. package/dist/components/Edges/EdgeAnchor.js +23 -0
  24. package/dist/components/Edges/EdgeAnchor.js.map +1 -0
  25. package/dist/components/Edges/EdgeText.js +31 -0
  26. package/dist/components/Edges/EdgeText.js.map +1 -0
  27. package/dist/components/Edges/SimpleBezierEdge.js +68 -0
  28. package/dist/components/Edges/SimpleBezierEdge.js.map +1 -0
  29. package/dist/components/Edges/SmoothStepEdge.js +29 -0
  30. package/dist/components/Edges/SmoothStepEdge.js.map +1 -0
  31. package/dist/components/Edges/StepEdge.js +18 -0
  32. package/dist/components/Edges/StepEdge.js.map +1 -0
  33. package/dist/components/Edges/StraightEdge.js +24 -0
  34. package/dist/components/Edges/StraightEdge.js.map +1 -0
  35. package/dist/components/Edges/index.js +9 -0
  36. package/dist/components/Edges/index.js.map +1 -0
  37. package/dist/components/Handle/index.d.ts.map +1 -1
  38. package/dist/components/Handle/index.js +179 -0
  39. package/dist/components/Handle/index.js.map +1 -0
  40. package/dist/components/InkFlowProvider/index.js +21 -0
  41. package/dist/components/InkFlowProvider/index.js.map +1 -0
  42. package/dist/components/NodeWrapper/index.js +150 -0
  43. package/dist/components/NodeWrapper/index.js.map +1 -0
  44. package/dist/components/NodeWrapper/useNodeObserver.js +54 -0
  45. package/dist/components/NodeWrapper/useNodeObserver.js.map +1 -0
  46. package/dist/components/NodeWrapper/utils.js +30 -0
  47. package/dist/components/NodeWrapper/utils.js.map +1 -0
  48. package/dist/components/Nodes/DefaultNode.js +8 -0
  49. package/dist/components/Nodes/DefaultNode.js.map +1 -0
  50. package/dist/components/Nodes/GroupNode.js +4 -0
  51. package/dist/components/Nodes/GroupNode.js.map +1 -0
  52. package/dist/components/Nodes/InputNode.js +8 -0
  53. package/dist/components/Nodes/InputNode.js.map +1 -0
  54. package/dist/components/Nodes/OutputNode.js +8 -0
  55. package/dist/components/Nodes/OutputNode.js.map +1 -0
  56. package/dist/components/Nodes/utils.js +23 -0
  57. package/dist/components/Nodes/utils.js.map +1 -0
  58. package/dist/components/Panel/index.js +11 -0
  59. package/dist/components/Panel/index.js.map +1 -0
  60. package/dist/components/StoreUpdater/index.js +169 -0
  61. package/dist/components/StoreUpdater/index.js.map +1 -0
  62. package/dist/components/UserSelection/index.js +20 -0
  63. package/dist/components/UserSelection/index.js.map +1 -0
  64. package/dist/constants/layout.js +5 -0
  65. package/dist/constants/layout.js.map +1 -0
  66. package/dist/container/EdgeRenderer/MarkerDefinitions.js +37 -0
  67. package/dist/container/EdgeRenderer/MarkerDefinitions.js.map +1 -0
  68. package/dist/container/EdgeRenderer/MarkerSymbols.js +38 -0
  69. package/dist/container/EdgeRenderer/MarkerSymbols.js.map +1 -0
  70. package/dist/container/EdgeRenderer/index.js +25 -0
  71. package/dist/container/EdgeRenderer/index.js.map +1 -0
  72. package/dist/container/FlowRenderer/index.js +29 -0
  73. package/dist/container/FlowRenderer/index.js.map +1 -0
  74. package/dist/container/GraphView/index.js +14 -0
  75. package/dist/container/GraphView/index.js.map +1 -0
  76. package/dist/container/InkFlow/Wrapper.js +13 -0
  77. package/dist/container/InkFlow/Wrapper.js.map +1 -0
  78. package/dist/container/InkFlow/index.d.ts.map +1 -1
  79. package/dist/container/InkFlow/index.js +22 -0
  80. package/dist/container/InkFlow/index.js.map +1 -0
  81. package/dist/container/InkFlow/init-values.js +11 -0
  82. package/dist/container/InkFlow/init-values.js.map +1 -0
  83. package/dist/container/NodeRenderer/index.js +29 -0
  84. package/dist/container/NodeRenderer/index.js.map +1 -0
  85. package/dist/container/NodeRenderer/useResizeObserver.js +29 -0
  86. package/dist/container/NodeRenderer/useResizeObserver.js.map +1 -0
  87. package/dist/container/Pane/index.js +207 -0
  88. package/dist/container/Pane/index.js.map +1 -0
  89. package/dist/container/Viewport/index.d.ts.map +1 -1
  90. package/dist/container/Viewport/index.js +11 -0
  91. package/dist/container/Viewport/index.js.map +1 -0
  92. package/dist/container/ZoomPane/index.js +108 -0
  93. package/dist/container/ZoomPane/index.js.map +1 -0
  94. package/dist/contexts/NodeIdContext.js +10 -0
  95. package/dist/contexts/NodeIdContext.js.map +1 -0
  96. package/dist/contexts/StoreContext.js +5 -0
  97. package/dist/contexts/StoreContext.js.map +1 -0
  98. package/dist/hooks/index.d.ts +2 -0
  99. package/dist/hooks/index.d.ts.map +1 -1
  100. package/dist/hooks/index.js +7 -0
  101. package/dist/hooks/index.js.map +1 -0
  102. package/dist/hooks/useConnection.js +47 -0
  103. package/dist/hooks/useConnection.js.map +1 -0
  104. package/dist/hooks/useDrag.js +56 -0
  105. package/dist/hooks/useDrag.js.map +1 -0
  106. package/dist/hooks/useEdgesState.js +6 -0
  107. package/dist/hooks/useEdgesState.js.map +1 -0
  108. package/dist/hooks/useGlobalKeyHandler.js +34 -0
  109. package/dist/hooks/useGlobalKeyHandler.js.map +1 -0
  110. package/dist/hooks/useInkFlow.js +185 -0
  111. package/dist/hooks/useInkFlow.js.map +1 -0
  112. package/dist/hooks/useIsomorphicLayoutEffect.d.ts +2 -2
  113. package/dist/hooks/useIsomorphicLayoutEffect.d.ts.map +1 -1
  114. package/dist/hooks/useIsomorphicLayoutEffect.js +4 -0
  115. package/dist/hooks/useIsomorphicLayoutEffect.js.map +1 -0
  116. package/dist/hooks/useKeyPress.js +117 -0
  117. package/dist/hooks/useKeyPress.js.map +1 -0
  118. package/dist/hooks/useMoveSelectedNodes.js +65 -0
  119. package/dist/hooks/useMoveSelectedNodes.js.map +1 -0
  120. package/dist/hooks/useNodeInView.d.ts +10 -0
  121. package/dist/hooks/useNodeInView.d.ts.map +1 -0
  122. package/dist/hooks/useNodeInView.js +41 -0
  123. package/dist/hooks/useNodeInView.js.map +1 -0
  124. package/dist/hooks/useNodesInView.d.ts +12 -0
  125. package/dist/hooks/useNodesInView.d.ts.map +1 -0
  126. package/dist/hooks/useNodesInView.js +52 -0
  127. package/dist/hooks/useNodesInView.js.map +1 -0
  128. package/dist/hooks/useNodesState.js +6 -0
  129. package/dist/hooks/useNodesState.js.map +1 -0
  130. package/dist/hooks/useResizeHandler.js +38 -0
  131. package/dist/hooks/useResizeHandler.js.map +1 -0
  132. package/dist/hooks/useStore.js +37 -0
  133. package/dist/hooks/useStore.js.map +1 -0
  134. package/dist/hooks/useViewportHelper.js +149 -0
  135. package/dist/hooks/useViewportHelper.js.map +1 -0
  136. package/dist/hooks/useVisibleEdgeIds.js +50 -0
  137. package/dist/hooks/useVisibleEdgeIds.js.map +1 -0
  138. package/dist/hooks/useVisibleNodeIds.js +21 -0
  139. package/dist/hooks/useVisibleNodeIds.js.map +1 -0
  140. package/dist/index.js +18 -0
  141. package/dist/index.js.map +1 -0
  142. package/dist/plugins/Background/Background.js +49 -0
  143. package/dist/plugins/Background/Background.js.map +1 -0
  144. package/dist/plugins/Background/Patterns.js +11 -0
  145. package/dist/plugins/Background/Patterns.js.map +1 -0
  146. package/dist/plugins/Background/index.js +3 -0
  147. package/dist/plugins/Background/index.js.map +1 -0
  148. package/dist/plugins/Background/types.js +7 -0
  149. package/dist/plugins/Background/types.js.map +1 -0
  150. package/dist/plugins/Controls/ControlButton.js +7 -0
  151. package/dist/plugins/Controls/ControlButton.js.map +1 -0
  152. package/dist/plugins/Controls/Controls.js +49 -0
  153. package/dist/plugins/Controls/Controls.js.map +1 -0
  154. package/dist/plugins/Controls/Icons/FitView.js +5 -0
  155. package/dist/plugins/Controls/Icons/FitView.js.map +1 -0
  156. package/dist/plugins/Controls/Icons/Lock.js +5 -0
  157. package/dist/plugins/Controls/Icons/Lock.js.map +1 -0
  158. package/dist/plugins/Controls/Icons/Minus.js +5 -0
  159. package/dist/plugins/Controls/Icons/Minus.js.map +1 -0
  160. package/dist/plugins/Controls/Icons/Plus.js +5 -0
  161. package/dist/plugins/Controls/Icons/Plus.js.map +1 -0
  162. package/dist/plugins/Controls/Icons/Unlock.js +5 -0
  163. package/dist/plugins/Controls/Icons/Unlock.js.map +1 -0
  164. package/dist/plugins/Controls/index.js +3 -0
  165. package/dist/plugins/Controls/index.js.map +1 -0
  166. package/dist/plugins/Controls/types.js +2 -0
  167. package/dist/plugins/Controls/types.js.map +1 -0
  168. package/dist/plugins/NodeResizer/NodeResizeControl.js +166 -0
  169. package/dist/plugins/NodeResizer/NodeResizeControl.js.map +1 -0
  170. package/dist/plugins/NodeResizer/NodeResizer.js +35 -0
  171. package/dist/plugins/NodeResizer/NodeResizer.js.map +1 -0
  172. package/dist/plugins/NodeResizer/index.js +4 -0
  173. package/dist/plugins/NodeResizer/index.js.map +1 -0
  174. package/dist/plugins/NodeResizer/types.js +2 -0
  175. package/dist/plugins/NodeResizer/types.js.map +1 -0
  176. package/dist/plugins/index.js +4 -0
  177. package/dist/plugins/index.js.map +1 -0
  178. package/dist/store/index.d.ts.map +1 -1
  179. package/dist/store/index.js +384 -0
  180. package/dist/store/index.js.map +1 -0
  181. package/dist/store/initialState.d.ts.map +1 -1
  182. package/dist/store/initialState.js +84 -0
  183. package/dist/store/initialState.js.map +1 -0
  184. package/dist/styles/utils.js +8 -0
  185. package/dist/styles/utils.js.map +1 -0
  186. package/dist/types/edges.js +2 -0
  187. package/dist/types/edges.js.map +1 -0
  188. package/dist/types/general.js +2 -0
  189. package/dist/types/general.js.map +1 -0
  190. package/dist/types/index.js +7 -0
  191. package/dist/types/index.js.map +1 -0
  192. package/dist/types/instance.js +2 -0
  193. package/dist/types/instance.js.map +1 -0
  194. package/dist/types/layout.js +2 -0
  195. package/dist/types/layout.js.map +1 -0
  196. package/dist/types/nodes.js +2 -0
  197. package/dist/types/nodes.js.map +1 -0
  198. package/dist/types/props.js +2 -0
  199. package/dist/types/props.js.map +1 -0
  200. package/dist/types/store.js +2 -0
  201. package/dist/types/store.js.map +1 -0
  202. package/dist/types/utils/types.js +2 -0
  203. package/dist/types/utils/types.js.map +1 -0
  204. package/dist/utils/changes.js +213 -0
  205. package/dist/utils/changes.js.map +1 -0
  206. package/dist/utils/dom.d.ts.map +1 -1
  207. package/dist/utils/dom.js +38 -0
  208. package/dist/utils/dom.js.map +1 -0
  209. package/dist/utils/edges/bezier-edge.js +96 -0
  210. package/dist/utils/edges/bezier-edge.js.map +1 -0
  211. package/dist/utils/edges/general.d.ts.map +1 -1
  212. package/dist/utils/edges/general.js +108 -0
  213. package/dist/utils/edges/general.js.map +1 -0
  214. package/dist/utils/edges/index.js +6 -0
  215. package/dist/utils/edges/index.js.map +1 -0
  216. package/dist/utils/edges/positions.js +101 -0
  217. package/dist/utils/edges/positions.js.map +1 -0
  218. package/dist/utils/edges/smoothstep-edge.js +222 -0
  219. package/dist/utils/edges/smoothstep-edge.js.map +1 -0
  220. package/dist/utils/edges/straight-edge.js +32 -0
  221. package/dist/utils/edges/straight-edge.js.map +1 -0
  222. package/dist/utils/general.d.ts +7 -0
  223. package/dist/utils/general.d.ts.map +1 -1
  224. package/dist/utils/general.js +228 -0
  225. package/dist/utils/general.js.map +1 -0
  226. package/dist/utils/graph.d.ts.map +1 -1
  227. package/dist/utils/graph.js +368 -0
  228. package/dist/utils/graph.js.map +1 -0
  229. package/dist/utils/layout.js +142 -0
  230. package/dist/utils/layout.js.map +1 -0
  231. package/dist/utils/marker.js +35 -0
  232. package/dist/utils/marker.js.map +1 -0
  233. package/dist/utils/node.js +42 -0
  234. package/dist/utils/node.js.map +1 -0
  235. package/dist/utils/positions.js +101 -0
  236. package/dist/utils/positions.js.map +1 -0
  237. package/dist/utils/store.d.ts.map +1 -1
  238. package/dist/utils/store.js +162 -0
  239. package/dist/utils/store.js.map +1 -0
  240. package/package.json +2 -2
  241. package/dist/index.cjs.js +0 -25
  242. package/dist/index.cjs.js.map +0 -1
  243. package/dist/index.esm.js +0 -25
  244. package/dist/index.esm.js.map +0 -1
  245. package/dist/style.css +0 -814
package/dist/style.css DELETED
@@ -1,814 +0,0 @@
1
- /* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
2
-
3
- .ink-flow {
4
- direction: ltr;
5
-
6
- --xy-edge-stroke-default: #b1b1b7;
7
- --xy-edge-stroke-width-default: 1;
8
- --xy-edge-stroke-selected-default: #555;
9
-
10
- --xy-connectionline-stroke-default: #b1b1b7;
11
- --xy-connectionline-stroke-width-default: 1;
12
-
13
- --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);
14
-
15
- --xy-minimap-background-color-default: #fff;
16
- --xy-minimap-mask-background-color-default: rgb(240, 240, 240, 0.6);
17
- --xy-minimap-mask-stroke-color-default: transparent;
18
- --xy-minimap-mask-stroke-width-default: 1;
19
- --xy-minimap-node-background-color-default: #e2e2e2;
20
- --xy-minimap-node-stroke-color-default: transparent;
21
- --xy-minimap-node-stroke-width-default: 2;
22
-
23
- --xy-background-color-default: transparent;
24
- --xy-background-pattern-dots-color-default: #91919a;
25
- --xy-background-pattern-lines-color-default: #eee;
26
- --xy-background-pattern-cross-color-default: #e2e2e2;
27
- background-color: var(
28
- --xy-background-color,
29
- var(--xy-background-color-default)
30
- );
31
- --xy-node-color-default: inherit;
32
- --xy-node-border-default: 1px solid #1a192b;
33
- --xy-node-background-color-default: #fff;
34
- --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
35
- --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
36
- --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
37
- --xy-node-border-radius-default: 3px;
38
-
39
- --xy-handle-background-color-default: #1a192b;
40
- --xy-handle-border-color-default: #fff;
41
-
42
- --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
43
- --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);
44
-
45
- --xy-controls-button-background-color-default: #fefefe;
46
- --xy-controls-button-background-color-hover-default: #f4f4f4;
47
- --xy-controls-button-color-default: inherit;
48
- --xy-controls-button-color-hover-default: inherit;
49
- --xy-controls-button-border-color-default: #eee;
50
- --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
51
-
52
- --xy-edge-label-background-color-default: #ffffff;
53
- --xy-edge-label-color-default: inherit;
54
- }
55
-
56
- .ink-flow.dark {
57
- --xy-edge-stroke-default: #3e3e3e;
58
- --xy-edge-stroke-width-default: 1;
59
- --xy-edge-stroke-selected-default: #727272;
60
-
61
- --xy-connectionline-stroke-default: #b1b1b7;
62
- --xy-connectionline-stroke-width-default: 1;
63
-
64
- --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);
65
-
66
- --xy-minimap-background-color-default: #141414;
67
- --xy-minimap-mask-background-color-default: rgb(60, 60, 60, 0.6);
68
- --xy-minimap-mask-stroke-color-default: transparent;
69
- --xy-minimap-mask-stroke-width-default: 1;
70
- --xy-minimap-node-background-color-default: #2b2b2b;
71
- --xy-minimap-node-stroke-color-default: transparent;
72
- --xy-minimap-node-stroke-width-default: 2;
73
-
74
- --xy-background-color-default: #141414;
75
- --xy-background-pattern-dots-color-default: #777;
76
- --xy-background-pattern-lines-color-default: #777;
77
- --xy-background-pattern-cross-color-default: #777;
78
- --xy-node-color-default: #f8f8f8;
79
- --xy-node-border-default: 1px solid #3c3c3c;
80
- --xy-node-background-color-default: #1e1e1e;
81
- --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
82
- --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
83
- --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;
84
-
85
- --xy-handle-background-color-default: #bebebe;
86
- --xy-handle-border-color-default: #1e1e1e;
87
-
88
- --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
89
- --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);
90
-
91
- --xy-controls-button-background-color-default: #2b2b2b;
92
- --xy-controls-button-background-color-hover-default: #3e3e3e;
93
- --xy-controls-button-color-default: #f8f8f8;
94
- --xy-controls-button-color-hover-default: #fff;
95
- --xy-controls-button-border-color-default: #5b5b5b;
96
- --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
97
-
98
- --xy-edge-label-background-color-default: #141414;
99
- --xy-edge-label-color-default: #f8f8f8;
100
- }
101
-
102
- .ink-flow__background {
103
- background-color: var(
104
- --xy-background-color,
105
- var(--xy-background-color-props, var(--xy-background-color-default))
106
- );
107
- pointer-events: none;
108
- z-index: -1;
109
- }
110
-
111
- .ink-flow__container {
112
- position: absolute;
113
- width: 100%;
114
- height: 100%;
115
- top: 0;
116
- left: 0;
117
- }
118
-
119
- .ink-flow__pane {
120
- z-index: 1;
121
- }
122
-
123
- .ink-flow__pane.selection {
124
- cursor: pointer;
125
- }
126
-
127
- .ink-flow__pane.draggable {
128
- cursor: grab;
129
- }
130
-
131
- .ink-flow__pane.draggable.dragging {
132
- cursor: grabbing;
133
- }
134
-
135
- .ink-flow__viewport {
136
- transform-origin: 0 0;
137
- z-index: 2;
138
- pointer-events: none;
139
- }
140
-
141
- .ink-flow__renderer {
142
- z-index: 4;
143
- }
144
-
145
- .ink-flow__selection {
146
- z-index: 6;
147
- }
148
-
149
- .ink-flow__nodesselection-rect:focus,
150
- .ink-flow__nodesselection-rect:focus-visible {
151
- outline: none;
152
- }
153
-
154
- .ink-flow__edge-path {
155
- stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
156
- stroke-width: var(
157
- --xy-edge-stroke-width,
158
- var(--xy-edge-stroke-width-default)
159
- );
160
- fill: none;
161
- }
162
-
163
- .ink-flow__connection-path {
164
- stroke: var(
165
- --xy-connectionline-stroke,
166
- var(--xy-connectionline-stroke-default)
167
- );
168
- stroke-width: var(
169
- --xy-connectionline-stroke-width,
170
- var(--xy-connectionline-stroke-width-default)
171
- );
172
- fill: none;
173
- }
174
-
175
- .ink-flow__edges {
176
- position: absolute;
177
- }
178
-
179
- .ink-flow__edges svg {
180
- overflow: visible;
181
- position: absolute;
182
- pointer-events: none;
183
- }
184
-
185
- .ink-flow__edge {
186
- pointer-events: visibleStroke;
187
- }
188
-
189
- .ink-flow__edge.selectable {
190
- cursor: pointer;
191
- }
192
-
193
- .ink-flow__edge.animated path {
194
- stroke-dasharray: 5;
195
- animation: dashdraw 0.5s linear infinite;
196
- }
197
-
198
- .ink-flow__edge.animated path.ink-flow__edge-interaction {
199
- stroke-dasharray: none;
200
- animation: none;
201
- }
202
-
203
- .ink-flow__edge.inactive {
204
- pointer-events: none;
205
- }
206
-
207
- .ink-flow__edge.selected,
208
- .ink-flow__edge:focus,
209
- .ink-flow__edge:focus-visible {
210
- outline: none;
211
- }
212
-
213
- .ink-flow__edge.selected .ink-flow__edge-path,
214
- .ink-flow__edge.selectable:focus .ink-flow__edge-path,
215
- .ink-flow__edge.selectable:focus-visible .ink-flow__edge-path {
216
- stroke: var(
217
- --xy-edge-stroke-selected,
218
- var(--xy-edge-stroke-selected-default)
219
- );
220
- }
221
-
222
- .ink-flow__edge-textwrapper {
223
- pointer-events: all;
224
- }
225
-
226
- .ink-flow__edge .ink-flow__edge-text {
227
- pointer-events: none;
228
- -webkit-user-select: none;
229
- -moz-user-select: none;
230
- user-select: none;
231
- }
232
-
233
- .ink-flow__connection {
234
- pointer-events: none;
235
- }
236
-
237
- .ink-flow__connection .animated {
238
- stroke-dasharray: 5;
239
- animation: dashdraw 0.5s linear infinite;
240
- }
241
-
242
- svg.ink-flow__connectionline {
243
- z-index: 1001;
244
- overflow: visible;
245
- position: absolute;
246
- }
247
-
248
- .ink-flow__nodes {
249
- pointer-events: none;
250
- transform-origin: 0 0;
251
- }
252
-
253
- .ink-flow__node {
254
- position: absolute;
255
- -webkit-user-select: none;
256
- -moz-user-select: none;
257
- user-select: none;
258
- pointer-events: all;
259
- transform-origin: 0 0;
260
- box-sizing: border-box;
261
- cursor: default;
262
- }
263
-
264
- .ink-flow__node.selectable {
265
- cursor: pointer;
266
- }
267
-
268
- .ink-flow__node.draggable {
269
- cursor: grab;
270
- pointer-events: all;
271
- }
272
-
273
- .ink-flow__node.draggable.dragging {
274
- cursor: grabbing;
275
- }
276
-
277
- .ink-flow__nodesselection {
278
- z-index: 3;
279
- transform-origin: left top;
280
- pointer-events: none;
281
- }
282
-
283
- .ink-flow__nodesselection-rect {
284
- position: absolute;
285
- pointer-events: all;
286
- cursor: grab;
287
- }
288
-
289
- .ink-flow__handle {
290
- position: absolute;
291
- pointer-events: none;
292
- min-width: 5px;
293
- min-height: 5px;
294
- width: 6px;
295
- height: 6px;
296
- background-color: var(
297
- --xy-handle-background-color,
298
- var(--xy-handle-background-color-default)
299
- );
300
- border: 1px solid
301
- var(--xy-handle-border-color, var(--xy-handle-border-color-default));
302
- border-radius: 100%;
303
- }
304
-
305
- .ink-flow__handle.connectingfrom {
306
- pointer-events: all;
307
- }
308
-
309
- .ink-flow__handle.connectionindicator {
310
- pointer-events: all;
311
- cursor: crosshair;
312
- }
313
-
314
- .ink-flow__handle-bottom {
315
- top: auto;
316
- left: 50%;
317
- bottom: 0;
318
- transform: translate(-50%, 50%);
319
- }
320
-
321
- .ink-flow__handle-top {
322
- top: 0;
323
- left: 50%;
324
- transform: translate(-50%, -50%);
325
- }
326
-
327
- .ink-flow__handle-left {
328
- top: 50%;
329
- left: 0;
330
- transform: translate(-50%, -50%);
331
- }
332
-
333
- .ink-flow__handle-right {
334
- top: 50%;
335
- right: 0;
336
- transform: translate(50%, -50%);
337
- }
338
-
339
- .ink-flow__edgeupdater {
340
- cursor: move;
341
- pointer-events: all;
342
- }
343
-
344
- .ink-flow__panel {
345
- position: absolute;
346
- z-index: 5;
347
- margin: 15px;
348
- }
349
-
350
- .ink-flow__panel.top {
351
- top: 0;
352
- }
353
-
354
- .ink-flow__panel.bottom {
355
- bottom: 0;
356
- }
357
-
358
- .ink-flow__panel.left {
359
- left: 0;
360
- }
361
-
362
- .ink-flow__panel.right {
363
- right: 0;
364
- }
365
-
366
- .ink-flow__panel.center {
367
- left: 50%;
368
- transform: translateX(-50%);
369
- }
370
-
371
- .ink-flow__attribution {
372
- font-size: 10px;
373
- background: var(
374
- --xy-attribution-background-color,
375
- var(--xy-attribution-background-color-default)
376
- );
377
- padding: 2px 3px;
378
- margin: 0;
379
- }
380
-
381
- .ink-flow__attribution a {
382
- text-decoration: none;
383
- color: #999;
384
- }
385
-
386
- @keyframes dashdraw {
387
- from {
388
- stroke-dashoffset: 10;
389
- }
390
- }
391
-
392
- .ink-flow__edgelabel-renderer {
393
- position: absolute;
394
- width: 100%;
395
- height: 100%;
396
- pointer-events: none;
397
- -webkit-user-select: none;
398
- -moz-user-select: none;
399
- user-select: none;
400
- left: 0;
401
- top: 0;
402
- }
403
-
404
- .ink-flow__viewport-portal {
405
- position: absolute;
406
- width: 100%;
407
- height: 100%;
408
- left: 0;
409
- top: 0;
410
- -webkit-user-select: none;
411
- -moz-user-select: none;
412
- user-select: none;
413
- }
414
-
415
- .ink-flow__minimap {
416
- background: var(
417
- --xy-minimap-background-color-props,
418
- var(
419
- --xy-minimap-background-color,
420
- var(--xy-minimap-background-color-default)
421
- )
422
- );
423
- }
424
-
425
- .ink-flow__minimap-svg {
426
- display: block;
427
- }
428
-
429
- .ink-flow__minimap-mask {
430
- fill: var(
431
- --xy-minimap-mask-background-color-props,
432
- var(
433
- --xy-minimap-mask-background-color,
434
- var(--xy-minimap-mask-background-color-default)
435
- )
436
- );
437
- stroke: var(
438
- --xy-minimap-mask-stroke-color-props,
439
- var(
440
- --xy-minimap-mask-stroke-color,
441
- var(--xy-minimap-mask-stroke-color-default)
442
- )
443
- );
444
- stroke-width: var(
445
- --xy-minimap-mask-stroke-width-props,
446
- var(
447
- --xy-minimap-mask-stroke-width,
448
- var(--xy-minimap-mask-stroke-width-default)
449
- )
450
- );
451
- }
452
-
453
- .ink-flow__minimap-node {
454
- fill: var(
455
- --xy-minimap-node-background-color-props,
456
- var(
457
- --xy-minimap-node-background-color,
458
- var(--xy-minimap-node-background-color-default)
459
- )
460
- );
461
- stroke: var(
462
- --xy-minimap-node-stroke-color-props,
463
- var(
464
- --xy-minimap-node-stroke-color,
465
- var(--xy-minimap-node-stroke-color-default)
466
- )
467
- );
468
- stroke-width: var(
469
- --xy-minimap-node-stroke-width-props,
470
- var(
471
- --xy-minimap-node-stroke-width,
472
- var(--xy-minimap-node-stroke-width-default)
473
- )
474
- );
475
- }
476
-
477
- .ink-flow__background-pattern.dots {
478
- fill: var(
479
- --xy-background-pattern-color-props,
480
- var(
481
- --xy-background-pattern-color,
482
- var(--xy-background-pattern-dots-color-default)
483
- )
484
- );
485
- }
486
-
487
- .ink-flow__background-pattern.lines {
488
- stroke: var(
489
- --xy-background-pattern-color-props,
490
- var(
491
- --xy-background-pattern-color,
492
- var(--xy-background-pattern-lines-color-default)
493
- )
494
- );
495
- }
496
-
497
- .ink-flow__background-pattern.cross {
498
- stroke: var(
499
- --xy-background-pattern-color-props,
500
- var(
501
- --xy-background-pattern-color,
502
- var(--xy-background-pattern-cross-color-default)
503
- )
504
- );
505
- }
506
-
507
- .ink-flow__controls {
508
- display: flex;
509
- flex-direction: column;
510
- align-items: flex-start;
511
- gap: 8px;
512
- }
513
-
514
- .ink-flow__controls.horizontal {
515
- flex-direction: row;
516
- }
517
-
518
- .ink-flow__controls-button {
519
- display: flex;
520
- justify-content: center;
521
- align-items: center;
522
- /* height: 32px;
523
- width: 32px; */
524
- padding: 5px;
525
-
526
- /* svg {
527
- width: 100%;
528
- max-width: 12px;
529
- max-height: 12px;
530
- fill: currentColor;
531
- } */
532
- border: none;
533
- background: var(
534
- --xy-controls-button-background-color,
535
- var(--xy-controls-button-background-color-default)
536
- );
537
- /* border-bottom: 1px solid
538
- var(
539
- --xy-controls-button-border-color-props,
540
- var(
541
- --xy-controls-button-border-color,
542
- var(--xy-controls-button-border-color-default)
543
- )
544
- ); */
545
- color: var(
546
- --xy-controls-button-color-props,
547
- var(--xy-controls-button-color, var(--xy-controls-button-color-default))
548
- );
549
- cursor: pointer;
550
- -webkit-user-select: none;
551
- -moz-user-select: none;
552
- user-select: none;
553
- }
554
-
555
- .ink-flow__controls-fitview {
556
- /* gap: 8px; */
557
- border-radius: var(--alias-radius-75, 6px);
558
- border-top: 1px solid var(--alias-colors-border-strong, #d1d5db);
559
- border-right: 1px solid var(--alias-colors-border-strong, #d1d5db);
560
- border-bottom: 1px solid var(--alias-colors-border-strong, #d1d5db);
561
- border-left: 1px solid var(--alias-colors-border-strong, #d1d5db);
562
- }
563
-
564
- .ink-flow__controls-zoom {
565
- overflow: hidden;
566
- display: flex;
567
- flex-direction: column;
568
- align-items: flex-start;
569
- gap: var(--alias-spacing-0, 0px);
570
- border-radius: var(--alias-radius-75, 6px);
571
- border: 1px solid var(--alias-colors-border-strong, #d1d5db);
572
- background: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
573
- }
574
-
575
- .ink-flow__edge.updating .ink-flow__edge-path {
576
- stroke: #777;
577
- }
578
-
579
- .ink-flow__edge-text {
580
- font-size: 10px;
581
- }
582
-
583
- .ink-flow__node.selectable:focus,
584
- .ink-flow__node.selectable:focus-visible {
585
- outline: none;
586
- }
587
-
588
- .ink-flow__node-input,
589
- .ink-flow__node-default,
590
- .ink-flow__node-output,
591
- .ink-flow__node-group {
592
- padding: 10px;
593
- border-radius: var(
594
- --xy-node-border-radius,
595
- var(--xy-node-border-radius-default)
596
- );
597
- width: 150px;
598
- font-size: 12px;
599
- color: var(--xy-node-color, var(--xy-node-color-default));
600
- text-align: center;
601
- border: var(--xy-node-border, var(--xy-node-border-default));
602
- background-color: var(
603
- --xy-node-background-color,
604
- var(--xy-node-background-color-default)
605
- );
606
- }
607
-
608
- .ink-flow__node-input.selectable:hover, .ink-flow__node-default.selectable:hover, .ink-flow__node-output.selectable:hover, .ink-flow__node-group.selectable:hover {
609
- box-shadow: var(
610
- --xy-node-boxshadow-hover,
611
- var(--xy-node-boxshadow-hover-default)
612
- );
613
- }
614
-
615
- .ink-flow__node-input.selectable.selected,
616
- .ink-flow__node-input.selectable:focus,
617
- .ink-flow__node-input.selectable:focus-visible,
618
- .ink-flow__node-default.selectable.selected,
619
- .ink-flow__node-default.selectable:focus,
620
- .ink-flow__node-default.selectable:focus-visible,
621
- .ink-flow__node-output.selectable.selected,
622
- .ink-flow__node-output.selectable:focus,
623
- .ink-flow__node-output.selectable:focus-visible,
624
- .ink-flow__node-group.selectable.selected,
625
- .ink-flow__node-group.selectable:focus,
626
- .ink-flow__node-group.selectable:focus-visible {
627
- box-shadow: var(
628
- --xy-node-boxshadow-selected,
629
- var(--xy-node-boxshadow-selected-default)
630
- );
631
- }
632
-
633
- .ink-flow__node-group {
634
- background-color: var(
635
- --xy-node-group-background-color,
636
- var(--xy-node-group-background-color-default)
637
- );
638
- }
639
-
640
- .ink-flow__nodesselection-rect,
641
- .ink-flow__selection {
642
- background: var(
643
- --xy-selection-background-color,
644
- var(--xy-selection-background-color-default)
645
- );
646
- border: var(--xy-selection-border, var(--xy-selection-border-default));
647
- }
648
-
649
- .ink-flow__nodesselection-rect:focus,
650
- .ink-flow__nodesselection-rect:focus-visible,
651
- .ink-flow__selection:focus,
652
- .ink-flow__selection:focus-visible {
653
- outline: none;
654
- }
655
-
656
- /* box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default)); */
657
-
658
- .ink-flow__controls-button:hover {
659
- background: var(
660
- --xy-controls-button-background-color-hover-props,
661
- var(
662
- --xy-controls-button-background-color-hover,
663
- var(--xy-controls-button-background-color-hover-default)
664
- )
665
- );
666
- color: var(
667
- --xy-controls-button-color-hover-props,
668
- var(
669
- --xy-controls-button-color-hover,
670
- var(--xy-controls-button-color-hover-default)
671
- )
672
- );
673
- }
674
-
675
- .ink-flow__controls-button:disabled {
676
- pointer-events: none;
677
- }
678
-
679
- .ink-flow__controls-button:disabled svg {
680
- fill-opacity: 0.4;
681
- }
682
-
683
- .ink-flow__controls-button:last-child {
684
- border-bottom: none;
685
- }
686
-
687
- .ink-flow {
688
- }
689
-
690
- .ink-flow__resize-control {
691
- position: absolute;
692
- }
693
-
694
- .ink-flow__resize-control.left,
695
- .ink-flow__resize-control.right {
696
- cursor: ew-resize;
697
- }
698
-
699
- .ink-flow__resize-control.top,
700
- .ink-flow__resize-control.bottom {
701
- cursor: ns-resize;
702
- }
703
-
704
- .ink-flow__resize-control.top.left,
705
- .ink-flow__resize-control.bottom.right {
706
- cursor: nwse-resize;
707
- }
708
-
709
- .ink-flow__resize-control.bottom.left,
710
- .ink-flow__resize-control.top.right {
711
- cursor: nesw-resize;
712
- }
713
-
714
- /* handle styles */
715
-
716
- .ink-flow__resize-control.handle {
717
- width: 6px;
718
- height: 6px;
719
- border: 1px solid #fff;
720
- border-radius: 1px;
721
- background-color: #3367d9;
722
- transform: translate(-50%, -50%);
723
- }
724
-
725
- .ink-flow__resize-control.handle.left {
726
- left: 0;
727
- top: 50%;
728
- }
729
-
730
- .ink-flow__resize-control.handle.right {
731
- left: 100%;
732
- top: 50%;
733
- }
734
-
735
- .ink-flow__resize-control.handle.top {
736
- left: 50%;
737
- top: 0;
738
- }
739
-
740
- .ink-flow__resize-control.handle.bottom {
741
- left: 50%;
742
- top: 100%;
743
- }
744
-
745
- .ink-flow__resize-control.handle.top.left {
746
- left: 0;
747
- }
748
-
749
- .ink-flow__resize-control.handle.bottom.left {
750
- left: 0;
751
- }
752
-
753
- .ink-flow__resize-control.handle.top.right {
754
- left: 100%;
755
- }
756
-
757
- .ink-flow__resize-control.handle.bottom.right {
758
- left: 100%;
759
- }
760
-
761
- /* line styles */
762
-
763
- .ink-flow__resize-control.line {
764
- border-color: #3367d9;
765
- border-width: 0;
766
- border-style: solid;
767
- }
768
-
769
- .ink-flow__resize-control.line.left,
770
- .ink-flow__resize-control.line.right {
771
- width: 1px;
772
- transform: translate(-50%, 0);
773
- top: 0;
774
- height: 100%;
775
- }
776
-
777
- .ink-flow__resize-control.line.left {
778
- left: 0;
779
- border-left-width: 1px;
780
- }
781
-
782
- .ink-flow__resize-control.line.right {
783
- left: 100%;
784
- border-right-width: 1px;
785
- }
786
-
787
- .ink-flow__resize-control.line.top,
788
- .ink-flow__resize-control.line.bottom {
789
- height: 1px;
790
- transform: translate(0, -50%);
791
- left: 0;
792
- width: 100%;
793
- }
794
-
795
- .ink-flow__resize-control.line.top {
796
- top: 0;
797
- border-top-width: 1px;
798
- }
799
-
800
- .ink-flow__resize-control.line.bottom {
801
- border-bottom-width: 1px;
802
- top: 100%;
803
- }
804
-
805
- .ink-flow__edge-textbg {
806
- fill: var(
807
- --xy-edge-label-background-color,
808
- var(--xy-edge-label-background-color-default)
809
- );
810
- }
811
-
812
- .ink-flow__edge-text {
813
- fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
814
- }