dishui 0.0.57 → 0.0.59
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/dist/components/pro/Flow/Flow.js +460 -436
- package/dist/components/pro/Flow/Flow.js.map +1 -1
- package/dist/components/pro/Flow/FlowCanvas.js +921 -903
- package/dist/components/pro/Flow/FlowCanvas.js.map +1 -1
- package/dist/components/pro/Flow/nodes/nodeUtils.d.ts +2 -2
- package/dist/components/pro/Flow/nodes/nodeUtils.js +12 -12
- package/dist/components/pro/Flow/nodes/nodeUtils.js.map +1 -1
- package/package.json +1 -1
|
@@ -7,9 +7,9 @@ import { FlowAIProvider as xe } from "./context/FlowAIContext.js";
|
|
|
7
7
|
import { generateId as Q } from "./nodes/nodeUtils.js";
|
|
8
8
|
import { normalizeEdgeHandles as Se } from "./edges/edgePaths.js";
|
|
9
9
|
import Ce from "./FlowCanvas.js";
|
|
10
|
-
import { downloadDataURL as
|
|
11
|
-
import Ne, { FlowZoomControls as
|
|
12
|
-
import { MediaStampContent as
|
|
10
|
+
import { downloadDataURL as Me, safeFileBaseName as Pe } from "./hooks/useFlowImportExport.js";
|
|
11
|
+
import Ne, { FlowZoomControls as ke } from "./panels/FlowToolbar.js";
|
|
12
|
+
import { MediaStampContent as De, ShapePaletteContent as ze, SvgStampContent as Ee } from "./panels/ShapePalette.js";
|
|
13
13
|
import { InspectorPanelContent as Ae } from "./panels/InspectorPanel.js";
|
|
14
14
|
import { OutlinePanelContent as Te } from "./panels/OutlinePanel.js";
|
|
15
15
|
import { AIPanelContent as Re } from "./panels/AIPanel.js";
|
|
@@ -26,94 +26,118 @@ import { usePdfExport as Ze } from "./hooks/usePdfExport.js";
|
|
|
26
26
|
import { useKeyboardShortcuts as $e } from "./hooks/useKeyboardShortcuts.js";
|
|
27
27
|
import { useMindMap as Je } from "./hooks/useMindMap.js";
|
|
28
28
|
/* empty css */
|
|
29
|
-
import { forwardRef as Oe, useCallback as
|
|
30
|
-
import { jsx as
|
|
29
|
+
import { forwardRef as Oe, useCallback as D, useEffect as X, useImperativeHandle as _e, useMemo as le, useRef as R, useState as j } from "react";
|
|
30
|
+
import { jsx as a, jsxs as O } from "react/jsx-runtime";
|
|
31
31
|
import { EditorView as Be } from "@codemirror/view";
|
|
32
|
-
function Ve(
|
|
32
|
+
function Ve(s) {
|
|
33
33
|
let m = !1;
|
|
34
|
-
const
|
|
35
|
-
for (const [
|
|
36
|
-
const
|
|
37
|
-
if (
|
|
38
|
-
const
|
|
39
|
-
return
|
|
40
|
-
...
|
|
34
|
+
const d = { ...s.canvases };
|
|
35
|
+
for (const [I, f] of Object.entries(d)) {
|
|
36
|
+
const i = f.nodes.map((t) => {
|
|
37
|
+
if (t.type !== "shapeSvg") return t;
|
|
38
|
+
const g = t.data.labelPlacement, u = g === "above" ? "top" : g === "center" ? "middle" : g === "below" ? "bottom" : t.data.labelPlacement;
|
|
39
|
+
return u === t.data.labelPlacement ? t : (m = !0, {
|
|
40
|
+
...t,
|
|
41
41
|
data: {
|
|
42
|
-
...
|
|
43
|
-
labelPlacement:
|
|
42
|
+
...t.data,
|
|
43
|
+
labelPlacement: u
|
|
44
44
|
}
|
|
45
45
|
});
|
|
46
|
-
})
|
|
47
|
-
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
46
|
+
});
|
|
47
|
+
let l = !1;
|
|
48
|
+
const o = i.map((t) => {
|
|
49
|
+
if (!t.data.isMindMapNode) return t;
|
|
50
|
+
const g = t.data.fill === "#ffffff" || t.data.fill === "#eef2ff" ? "theme:base-100" : t.data.fill, u = t.data.stroke === "#6366f1" ? "theme:base-content" : t.data.stroke === "#4f46e5" ? "theme:primary" : t.data.stroke;
|
|
51
|
+
return g === t.data.fill && u === t.data.stroke ? t : (l = !0, {
|
|
52
|
+
...t,
|
|
53
|
+
data: {
|
|
54
|
+
...t.data,
|
|
55
|
+
fill: g,
|
|
56
|
+
stroke: u
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
}), h = /* @__PURE__ */ new Map();
|
|
60
|
+
for (const t of o) h.set(t.id, t);
|
|
61
|
+
let c = !1;
|
|
62
|
+
const v = Se(f.edges, h).map((t) => {
|
|
63
|
+
if (t.data.strokeColor !== "#94a3b8") return t;
|
|
64
|
+
const g = h.get(t.source), u = h.get(t.target);
|
|
65
|
+
return !g?.data.isMindMapNode || !u?.data.isMindMapNode ? t : (c = !0, {
|
|
66
|
+
...t,
|
|
67
|
+
data: {
|
|
68
|
+
...t.data,
|
|
69
|
+
strokeColor: "theme:base-content"
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
});
|
|
73
|
+
(l || c) && (m = !0), (o !== i || v !== f.edges) && (d[I] = {
|
|
74
|
+
...f,
|
|
75
|
+
nodes: o,
|
|
76
|
+
edges: v
|
|
77
|
+
});
|
|
54
78
|
}
|
|
55
79
|
return m ? {
|
|
56
|
-
...
|
|
57
|
-
canvases:
|
|
58
|
-
} :
|
|
80
|
+
...s,
|
|
81
|
+
canvases: d
|
|
82
|
+
} : s;
|
|
59
83
|
}
|
|
60
|
-
var
|
|
84
|
+
var ce = {
|
|
61
85
|
nodeIds: /* @__PURE__ */ new Set(),
|
|
62
86
|
edgeIds: /* @__PURE__ */ new Set(),
|
|
63
87
|
lineIds: /* @__PURE__ */ new Set()
|
|
64
88
|
};
|
|
65
|
-
function je({ onUndo:
|
|
66
|
-
const { selection:
|
|
67
|
-
const { nodeIds:
|
|
68
|
-
|
|
69
|
-
const e =
|
|
89
|
+
function je({ onUndo: s, onRedo: m, groupRef: d, geoGroupRef: I, ungroupRef: f }) {
|
|
90
|
+
const { selection: i, setSelection: l, currentCanvas: o, setDoc: h, currentCanvasId: c } = ee(), { viewport: v } = Y(), { copy: t, cut: g, paste: u, duplicate: y } = ae(), b = D(() => {
|
|
91
|
+
const { nodeIds: r, edgeIds: p, lineIds: S } = i;
|
|
92
|
+
r.size === 0 && p.size === 0 && S.size === 0 || r.size > 1 && !window.confirm(`确定要删除选中的 ${r.size} 个节点吗?`) || (h((k) => {
|
|
93
|
+
const e = k.canvases[c];
|
|
70
94
|
return e ? {
|
|
71
|
-
...
|
|
95
|
+
...k,
|
|
72
96
|
canvases: {
|
|
73
|
-
...
|
|
74
|
-
[
|
|
97
|
+
...k.canvases,
|
|
98
|
+
[c]: {
|
|
75
99
|
...e,
|
|
76
|
-
nodes: e.nodes.filter((n) => !
|
|
100
|
+
nodes: e.nodes.filter((n) => !r.has(n.id)).map((n) => n.parentId && r.has(n.parentId) ? {
|
|
77
101
|
...n,
|
|
78
102
|
parentId: void 0
|
|
79
103
|
} : n),
|
|
80
|
-
edges: e.edges.filter((n) => !p.has(n.id) && !
|
|
81
|
-
lines: e.lines.filter((n) => !
|
|
104
|
+
edges: e.edges.filter((n) => !p.has(n.id) && !r.has(n.source) && !r.has(n.target)),
|
|
105
|
+
lines: e.lines.filter((n) => !S.has(n.id)).map((n) => n.parentId && r.has(n.parentId) ? {
|
|
82
106
|
...n,
|
|
83
107
|
parentId: void 0
|
|
84
108
|
} : n)
|
|
85
109
|
}
|
|
86
110
|
}
|
|
87
|
-
} :
|
|
88
|
-
}),
|
|
111
|
+
} : k;
|
|
112
|
+
}), l(ce));
|
|
89
113
|
}, [
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
]),
|
|
95
|
-
|
|
96
|
-
nodeIds: new Set(
|
|
97
|
-
edgeIds: new Set(
|
|
98
|
-
lineIds: new Set(
|
|
114
|
+
i,
|
|
115
|
+
h,
|
|
116
|
+
c,
|
|
117
|
+
l
|
|
118
|
+
]), w = D(() => {
|
|
119
|
+
l({
|
|
120
|
+
nodeIds: new Set(o.nodes.map((r) => r.id)),
|
|
121
|
+
edgeIds: new Set(o.edges.map((r) => r.id)),
|
|
122
|
+
lineIds: new Set(o.lines.map((r) => r.id))
|
|
99
123
|
});
|
|
100
|
-
}, [
|
|
101
|
-
const p =
|
|
102
|
-
if (p.size +
|
|
103
|
-
const
|
|
104
|
-
let
|
|
105
|
-
for (const
|
|
106
|
-
|
|
107
|
-
for (const
|
|
108
|
-
|
|
109
|
-
const U =
|
|
124
|
+
}, [o, l]), C = D((r) => {
|
|
125
|
+
const p = i.nodeIds, S = i.lineIds;
|
|
126
|
+
if (p.size + S.size < 2) return;
|
|
127
|
+
const k = o.nodes.filter((N) => p.has(N.id)), e = o.lines.filter((N) => S.has(N.id)), n = 20;
|
|
128
|
+
let x = 1 / 0, W = 1 / 0, T = -1 / 0, H = -1 / 0;
|
|
129
|
+
for (const N of k)
|
|
130
|
+
x = Math.min(x, N.position.x), W = Math.min(W, N.position.y), T = Math.max(T, N.position.x + N.width), H = Math.max(H, N.position.y + N.height);
|
|
131
|
+
for (const N of e) for (const z of N.points)
|
|
132
|
+
x = Math.min(x, z.x), W = Math.min(W, z.y), T = Math.max(T, z.x), H = Math.max(H, z.y);
|
|
133
|
+
const U = r === "geometryGroup", Z = Q("group"), P = {
|
|
110
134
|
id: Z,
|
|
111
|
-
type:
|
|
135
|
+
type: r,
|
|
112
136
|
position: {
|
|
113
|
-
x:
|
|
137
|
+
x: x - n,
|
|
114
138
|
y: W - n
|
|
115
139
|
},
|
|
116
|
-
width: T -
|
|
140
|
+
width: T - x + n * 2,
|
|
117
141
|
height: H - W + n * 2,
|
|
118
142
|
data: {
|
|
119
143
|
...se,
|
|
@@ -125,94 +149,94 @@ function je({ onUndo: o, onRedo: m, groupRef: l, geoGroupRef: g, ungroupRef: d }
|
|
|
125
149
|
isGroup: !0
|
|
126
150
|
}
|
|
127
151
|
};
|
|
128
|
-
|
|
129
|
-
const z =
|
|
152
|
+
h((N) => {
|
|
153
|
+
const z = N.canvases[c];
|
|
130
154
|
return z ? {
|
|
131
|
-
...
|
|
155
|
+
...N,
|
|
132
156
|
canvases: {
|
|
133
|
-
...
|
|
134
|
-
[
|
|
157
|
+
...N.canvases,
|
|
158
|
+
[c]: {
|
|
135
159
|
...z,
|
|
136
160
|
nodes: U ? [P, ...z.nodes] : [P, ...z.nodes.map((J) => p.has(J.id) ? {
|
|
137
161
|
...J,
|
|
138
162
|
parentId: Z
|
|
139
163
|
} : J)],
|
|
140
|
-
lines: U ? z.lines : z.lines.map((J) =>
|
|
164
|
+
lines: U ? z.lines : z.lines.map((J) => S.has(J.id) ? {
|
|
141
165
|
...J,
|
|
142
166
|
parentId: Z
|
|
143
167
|
} : J)
|
|
144
168
|
}
|
|
145
169
|
}
|
|
146
|
-
} :
|
|
147
|
-
}),
|
|
170
|
+
} : N;
|
|
171
|
+
}), l({
|
|
148
172
|
nodeIds: /* @__PURE__ */ new Set([Z]),
|
|
149
173
|
edgeIds: /* @__PURE__ */ new Set(),
|
|
150
174
|
lineIds: /* @__PURE__ */ new Set()
|
|
151
175
|
});
|
|
152
176
|
}, [
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
]), G =
|
|
159
|
-
const
|
|
160
|
-
if (
|
|
161
|
-
const p = /* @__PURE__ */ new Set(),
|
|
162
|
-
for (const e of
|
|
177
|
+
i,
|
|
178
|
+
o,
|
|
179
|
+
h,
|
|
180
|
+
c,
|
|
181
|
+
l
|
|
182
|
+
]), G = D(() => C("flowGroup"), [C]), L = D(() => C("geometryGroup"), [C]), K = D(() => {
|
|
183
|
+
const r = i.nodeIds;
|
|
184
|
+
if (r.size === 0) return;
|
|
185
|
+
const p = /* @__PURE__ */ new Set(), S = /* @__PURE__ */ new Set(), k = /* @__PURE__ */ new Set();
|
|
186
|
+
for (const e of o.nodes) r.has(e.id) && (e.type === "flowGroup" || e.type === "geometryGroup" || e.data.isGroup) && p.add(e.id);
|
|
163
187
|
if (p.size !== 0) {
|
|
164
|
-
for (const e of
|
|
165
|
-
for (const e of
|
|
166
|
-
|
|
167
|
-
const n = e.canvases[
|
|
188
|
+
for (const e of o.nodes) e.parentId && p.has(e.parentId) && S.add(e.id);
|
|
189
|
+
for (const e of o.lines) e.parentId && p.has(e.parentId) && k.add(e.id);
|
|
190
|
+
h((e) => {
|
|
191
|
+
const n = e.canvases[c];
|
|
168
192
|
return n ? {
|
|
169
193
|
...e,
|
|
170
194
|
canvases: {
|
|
171
195
|
...e.canvases,
|
|
172
|
-
[
|
|
196
|
+
[c]: {
|
|
173
197
|
...n,
|
|
174
|
-
nodes: n.nodes.filter((
|
|
175
|
-
...
|
|
198
|
+
nodes: n.nodes.filter((x) => !p.has(x.id)).map((x) => S.has(x.id) ? {
|
|
199
|
+
...x,
|
|
176
200
|
parentId: void 0
|
|
177
|
-
} :
|
|
178
|
-
lines: n.lines.map((
|
|
179
|
-
...
|
|
201
|
+
} : x),
|
|
202
|
+
lines: n.lines.map((x) => k.has(x.id) ? {
|
|
203
|
+
...x,
|
|
180
204
|
parentId: void 0
|
|
181
|
-
} :
|
|
205
|
+
} : x)
|
|
182
206
|
}
|
|
183
207
|
}
|
|
184
208
|
} : e;
|
|
185
|
-
}),
|
|
186
|
-
nodeIds:
|
|
209
|
+
}), l({
|
|
210
|
+
nodeIds: S,
|
|
187
211
|
edgeIds: /* @__PURE__ */ new Set(),
|
|
188
|
-
lineIds:
|
|
212
|
+
lineIds: k
|
|
189
213
|
});
|
|
190
214
|
}
|
|
191
215
|
}, [
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
216
|
+
i,
|
|
217
|
+
o,
|
|
218
|
+
h,
|
|
219
|
+
c,
|
|
220
|
+
l
|
|
197
221
|
]);
|
|
198
|
-
|
|
199
|
-
const
|
|
200
|
-
const p =
|
|
201
|
-
p.size === 0 &&
|
|
202
|
-
const e =
|
|
203
|
-
if (!e) return
|
|
204
|
-
const n = e.nodes.map((P) => P.zIndex ?? 0),
|
|
222
|
+
d.current = G, I.current = L, f.current = K;
|
|
223
|
+
const M = D((r) => {
|
|
224
|
+
const p = i.nodeIds, S = i.lineIds;
|
|
225
|
+
p.size === 0 && S.size === 0 || h((k) => {
|
|
226
|
+
const e = k.canvases[c];
|
|
227
|
+
if (!e) return k;
|
|
228
|
+
const n = e.nodes.map((P) => P.zIndex ?? 0), x = n.length > 0 ? Math.max(...n) : 0, W = n.length > 0 ? Math.min(...n) : 0, T = e.lines.map((P) => P.zIndex ?? 0), H = T.length > 0 ? Math.max(...T) : 0, U = T.length > 0 ? Math.min(...T) : 0, Z = (P, N, z) => r === "front" ? N + 1 : r === "back" ? z - 1 : r === "up" ? P + 1 : P - 1;
|
|
205
229
|
return {
|
|
206
|
-
...
|
|
230
|
+
...k,
|
|
207
231
|
canvases: {
|
|
208
|
-
...
|
|
209
|
-
[
|
|
232
|
+
...k.canvases,
|
|
233
|
+
[c]: {
|
|
210
234
|
...e,
|
|
211
235
|
nodes: e.nodes.map((P) => p.has(P.id) ? {
|
|
212
236
|
...P,
|
|
213
|
-
zIndex: Z(P.zIndex ?? 0,
|
|
237
|
+
zIndex: Z(P.zIndex ?? 0, x, W)
|
|
214
238
|
} : P),
|
|
215
|
-
lines: e.lines.map((P) =>
|
|
239
|
+
lines: e.lines.map((P) => S.has(P.id) ? {
|
|
216
240
|
...P,
|
|
217
241
|
zIndex: Z(P.zIndex ?? 0, H, U)
|
|
218
242
|
} : P)
|
|
@@ -221,36 +245,36 @@ function je({ onUndo: o, onRedo: m, groupRef: l, geoGroupRef: g, ungroupRef: d }
|
|
|
221
245
|
};
|
|
222
246
|
});
|
|
223
247
|
}, [
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
248
|
+
i,
|
|
249
|
+
h,
|
|
250
|
+
c
|
|
227
251
|
]);
|
|
228
252
|
return X(() => {
|
|
229
|
-
const
|
|
230
|
-
const
|
|
231
|
-
if (
|
|
232
|
-
const
|
|
233
|
-
if (!
|
|
234
|
-
p.preventDefault(),
|
|
253
|
+
const r = (p) => {
|
|
254
|
+
const S = p.target;
|
|
255
|
+
if (S?.tagName === "INPUT" || S?.tagName === "TEXTAREA" || S?.isContentEditable) return;
|
|
256
|
+
const k = Array.from(p.clipboardData?.items ?? []).find((x) => x.type.startsWith("image/"));
|
|
257
|
+
if (!k) {
|
|
258
|
+
p.preventDefault(), u();
|
|
235
259
|
return;
|
|
236
260
|
}
|
|
237
|
-
const e =
|
|
261
|
+
const e = k.getAsFile();
|
|
238
262
|
if (!e) return;
|
|
239
263
|
p.preventDefault();
|
|
240
264
|
const n = new FileReader();
|
|
241
265
|
n.onload = () => {
|
|
242
266
|
if (typeof n.result != "string") return;
|
|
243
|
-
const
|
|
244
|
-
if (
|
|
245
|
-
|
|
246
|
-
const _ = E.canvases[
|
|
267
|
+
const x = i.nodeIds.size === 1 ? o.nodes.find((E) => i.nodeIds.has(E.id) && E.type === "mediaNode" && E.data.mediaKind === "image") : void 0;
|
|
268
|
+
if (x) {
|
|
269
|
+
h((E) => {
|
|
270
|
+
const _ = E.canvases[c];
|
|
247
271
|
return _ ? {
|
|
248
272
|
...E,
|
|
249
273
|
canvases: {
|
|
250
274
|
...E.canvases,
|
|
251
|
-
[
|
|
275
|
+
[c]: {
|
|
252
276
|
..._,
|
|
253
|
-
nodes: _.nodes.map((V) => V.id ===
|
|
277
|
+
nodes: _.nodes.map((V) => V.id === x.id ? {
|
|
254
278
|
...V,
|
|
255
279
|
data: {
|
|
256
280
|
...V.data,
|
|
@@ -263,12 +287,12 @@ function je({ onUndo: o, onRedo: m, groupRef: l, geoGroupRef: g, ungroupRef: d }
|
|
|
263
287
|
});
|
|
264
288
|
return;
|
|
265
289
|
}
|
|
266
|
-
const W = Q("node"), T = 320, H = 220, U = window.innerWidth, Z = window.innerHeight, P = (U / 2 -
|
|
290
|
+
const W = Q("node"), T = 320, H = 220, U = window.innerWidth, Z = window.innerHeight, P = (U / 2 - v.x) / v.zoom, N = (Z / 2 - v.y) / v.zoom, z = Math.max(0, ...o.nodes.map((E) => E.zIndex ?? 0)), J = {
|
|
267
291
|
id: W,
|
|
268
292
|
type: "mediaNode",
|
|
269
293
|
position: {
|
|
270
294
|
x: P - T / 2,
|
|
271
|
-
y:
|
|
295
|
+
y: N - H / 2
|
|
272
296
|
},
|
|
273
297
|
width: T,
|
|
274
298
|
height: H,
|
|
@@ -286,157 +310,157 @@ function je({ onUndo: o, onRedo: m, groupRef: l, geoGroupRef: g, ungroupRef: d }
|
|
|
286
310
|
mediaContent: n.result
|
|
287
311
|
}
|
|
288
312
|
};
|
|
289
|
-
|
|
290
|
-
const _ = E.canvases[
|
|
313
|
+
h((E) => {
|
|
314
|
+
const _ = E.canvases[c];
|
|
291
315
|
return _ ? {
|
|
292
316
|
...E,
|
|
293
317
|
canvases: {
|
|
294
318
|
...E.canvases,
|
|
295
|
-
[
|
|
319
|
+
[c]: {
|
|
296
320
|
..._,
|
|
297
321
|
nodes: [..._.nodes, J]
|
|
298
322
|
}
|
|
299
323
|
}
|
|
300
324
|
} : E;
|
|
301
|
-
}),
|
|
325
|
+
}), l({
|
|
302
326
|
nodeIds: /* @__PURE__ */ new Set([W]),
|
|
303
327
|
edgeIds: /* @__PURE__ */ new Set(),
|
|
304
328
|
lineIds: /* @__PURE__ */ new Set()
|
|
305
329
|
});
|
|
306
330
|
}, n.readAsDataURL(e);
|
|
307
331
|
};
|
|
308
|
-
return window.addEventListener("paste",
|
|
332
|
+
return window.addEventListener("paste", r), () => window.removeEventListener("paste", r);
|
|
309
333
|
}, [
|
|
310
|
-
|
|
311
|
-
a,
|
|
312
|
-
I,
|
|
313
|
-
s,
|
|
314
|
-
u,
|
|
334
|
+
o,
|
|
315
335
|
c,
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
336
|
+
u,
|
|
337
|
+
i,
|
|
338
|
+
h,
|
|
339
|
+
l,
|
|
340
|
+
v
|
|
341
|
+
]), $e(le(() => ({
|
|
342
|
+
undo: s,
|
|
319
343
|
redo: m,
|
|
320
|
-
copy:
|
|
321
|
-
cut:
|
|
322
|
-
paste:
|
|
323
|
-
duplicate:
|
|
324
|
-
deleteSelected:
|
|
325
|
-
selectAll:
|
|
344
|
+
copy: t,
|
|
345
|
+
cut: g,
|
|
346
|
+
paste: u,
|
|
347
|
+
duplicate: y,
|
|
348
|
+
deleteSelected: b,
|
|
349
|
+
selectAll: w,
|
|
326
350
|
group: G,
|
|
327
351
|
geoGroup: L,
|
|
328
352
|
ungroup: K,
|
|
329
|
-
bringToFront: () =>
|
|
330
|
-
bringForward: () =>
|
|
331
|
-
sendBackward: () =>
|
|
332
|
-
sendToBack: () =>
|
|
353
|
+
bringToFront: () => M("front"),
|
|
354
|
+
bringForward: () => M("up"),
|
|
355
|
+
sendBackward: () => M("down"),
|
|
356
|
+
sendToBack: () => M("back")
|
|
333
357
|
}), [
|
|
334
|
-
|
|
358
|
+
s,
|
|
335
359
|
m,
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
v,
|
|
360
|
+
t,
|
|
361
|
+
g,
|
|
362
|
+
u,
|
|
340
363
|
y,
|
|
341
|
-
|
|
364
|
+
b,
|
|
365
|
+
w,
|
|
342
366
|
G,
|
|
343
367
|
L,
|
|
344
368
|
K,
|
|
345
|
-
|
|
369
|
+
M
|
|
346
370
|
])), Je(), null;
|
|
347
371
|
}
|
|
348
|
-
function Xe({ pixiRef:
|
|
349
|
-
return m.current = Ze(
|
|
372
|
+
function Xe({ pixiRef: s, exportPdfRef: m }) {
|
|
373
|
+
return m.current = Ze(s), null;
|
|
350
374
|
}
|
|
351
|
-
var
|
|
352
|
-
const [
|
|
353
|
-
|
|
354
|
-
const z = R(
|
|
355
|
-
z.current =
|
|
375
|
+
var Kt = Oe(function({ initialDocument: m, onChange: d, width: I, height: f, readOnly: i = !1, onBack: l, onExportPNG: o, onPublish: h, showMiniMap: c = !0, showGrid: v = !0, gridSize: t = 20, className: g, showAI: u = !0, showAIConfig: y = !0, aiConfig: b }, w) {
|
|
376
|
+
const [C, G] = j(() => Ve(m ?? ve())), [L, K] = j(ce), M = R(null), r = R(null), p = R(null), S = R(null), k = Ue(S), { wrappedSetDoc: e, undo: n, redo: x, canUndo: W, canRedo: T } = He(C, G), H = R(null), U = R(null), Z = R(null), P = R(null), N = R(d);
|
|
377
|
+
N.current = d;
|
|
378
|
+
const z = R(C);
|
|
379
|
+
z.current = C, _e(w, () => ({
|
|
356
380
|
exportPNG: async (F) => {
|
|
357
|
-
const A =
|
|
381
|
+
const A = M.current;
|
|
358
382
|
return !A || A.destroyed ? null : A.exportPNG(F);
|
|
359
383
|
},
|
|
360
384
|
getDocument: () => z.current
|
|
361
385
|
}), []);
|
|
362
|
-
const J =
|
|
386
|
+
const J = D((F) => {
|
|
363
387
|
e((A) => {
|
|
364
388
|
const B = typeof F == "function" ? F(A) : F;
|
|
365
|
-
return
|
|
389
|
+
return i ? B.canvases === A.canvases && B.title === A.title ? B : A : (queueMicrotask(() => N.current?.(B)), B);
|
|
366
390
|
});
|
|
367
|
-
}, [e,
|
|
368
|
-
|
|
369
|
-
}, [
|
|
370
|
-
|
|
371
|
-
}, [
|
|
372
|
-
|
|
373
|
-
}, []), ue =
|
|
374
|
-
if (
|
|
375
|
-
const F =
|
|
391
|
+
}, [e, i]), E = D(() => {
|
|
392
|
+
i || n();
|
|
393
|
+
}, [i, n]), _ = D(() => {
|
|
394
|
+
i || x();
|
|
395
|
+
}, [i, x]), V = D((F) => {
|
|
396
|
+
M.current = F, r.current && !p.current && (p.current = new We(r.current));
|
|
397
|
+
}, []), ue = D(async () => {
|
|
398
|
+
if (o) return void o();
|
|
399
|
+
const F = M.current;
|
|
376
400
|
if (!F || F.destroyed) return;
|
|
377
401
|
const A = await F.exportPNG(16777215);
|
|
378
|
-
A &&
|
|
379
|
-
}, [
|
|
402
|
+
A && Me(A, `${Pe(z.current.title)}.png`);
|
|
403
|
+
}, [o]), fe = D(async () => {
|
|
380
404
|
await P.current?.();
|
|
381
405
|
}, []);
|
|
382
406
|
X(() => {
|
|
383
407
|
let F = !1, A = null;
|
|
384
408
|
const B = () => {
|
|
385
|
-
const $ =
|
|
386
|
-
if (!$ || $.destroyed || !
|
|
409
|
+
const $ = M.current, ne = p.current;
|
|
410
|
+
if (!$ || $.destroyed || !ne) return;
|
|
387
411
|
const me = {
|
|
388
412
|
x: $.world.position.x,
|
|
389
413
|
y: $.world.position.y,
|
|
390
414
|
zoom: $.world.scale.x
|
|
391
|
-
}, he =
|
|
392
|
-
oe &&
|
|
393
|
-
},
|
|
415
|
+
}, he = C.stack[C.stack.length - 1] ?? "root", oe = C.canvases[he];
|
|
416
|
+
oe && ne.update(oe.nodes, me, $.app.screen.width, $.app.screen.height);
|
|
417
|
+
}, te = () => {
|
|
394
418
|
if (F) return;
|
|
395
|
-
const $ =
|
|
396
|
-
$ && !$.destroyed && p.current ? ($.app.ticker.add(B), A = $) : requestAnimationFrame(
|
|
419
|
+
const $ = M.current;
|
|
420
|
+
$ && !$.destroyed && p.current ? ($.app.ticker.add(B), A = $) : requestAnimationFrame(te);
|
|
397
421
|
};
|
|
398
|
-
return
|
|
422
|
+
return te(), () => {
|
|
399
423
|
F = !0, A && !A.destroyed && A.app.ticker.remove(B);
|
|
400
424
|
};
|
|
401
|
-
}, [
|
|
425
|
+
}, [C]);
|
|
402
426
|
const pe = {
|
|
403
|
-
width:
|
|
404
|
-
height:
|
|
427
|
+
width: I ?? "100%",
|
|
428
|
+
height: f ?? "100%"
|
|
405
429
|
};
|
|
406
|
-
return /* @__PURE__ */
|
|
407
|
-
ref:
|
|
408
|
-
className: `flow-container ${
|
|
430
|
+
return /* @__PURE__ */ a("div", {
|
|
431
|
+
ref: S,
|
|
432
|
+
className: `flow-container ${g ?? ""}`,
|
|
409
433
|
style: pe,
|
|
410
|
-
children: /* @__PURE__ */
|
|
411
|
-
doc:
|
|
434
|
+
children: /* @__PURE__ */ a(ye, {
|
|
435
|
+
doc: C,
|
|
412
436
|
setDoc: J,
|
|
413
437
|
selection: L,
|
|
414
438
|
setSelection: K,
|
|
415
|
-
children: /* @__PURE__ */
|
|
416
|
-
showMiniMap:
|
|
417
|
-
showGrid:
|
|
418
|
-
gridSize:
|
|
419
|
-
showAI:
|
|
420
|
-
readOnly:
|
|
439
|
+
children: /* @__PURE__ */ a(be, {
|
|
440
|
+
showMiniMap: c,
|
|
441
|
+
showGrid: v,
|
|
442
|
+
gridSize: t,
|
|
443
|
+
showAI: u,
|
|
444
|
+
readOnly: i,
|
|
421
445
|
children: /* @__PURE__ */ O(xe, {
|
|
422
|
-
initialConfig:
|
|
423
|
-
showAIConfig:
|
|
446
|
+
initialConfig: b,
|
|
447
|
+
showAIConfig: y,
|
|
424
448
|
children: [
|
|
425
|
-
/* @__PURE__ */
|
|
449
|
+
/* @__PURE__ */ a(je, {
|
|
426
450
|
onUndo: E,
|
|
427
451
|
onRedo: _,
|
|
428
452
|
groupRef: H,
|
|
429
453
|
geoGroupRef: U,
|
|
430
454
|
ungroupRef: Z
|
|
431
455
|
}),
|
|
432
|
-
/* @__PURE__ */
|
|
433
|
-
pixiRef:
|
|
456
|
+
/* @__PURE__ */ a(Xe, {
|
|
457
|
+
pixiRef: M,
|
|
434
458
|
exportPdfRef: P
|
|
435
459
|
}),
|
|
436
|
-
/* @__PURE__ */ O(
|
|
437
|
-
compact:
|
|
438
|
-
toolbar:
|
|
439
|
-
onBack:
|
|
460
|
+
/* @__PURE__ */ O(et, {
|
|
461
|
+
compact: k,
|
|
462
|
+
toolbar: i ? null : /* @__PURE__ */ a(Ne, {
|
|
463
|
+
onBack: l,
|
|
440
464
|
onUndo: E,
|
|
441
465
|
onRedo: _,
|
|
442
466
|
canUndo: W,
|
|
@@ -446,19 +470,19 @@ var Wn = Oe(function({ initialDocument: m, onChange: l, width: g, height: d, rea
|
|
|
446
470
|
onUngroup: () => Z.current?.(),
|
|
447
471
|
onExportPNG: ue,
|
|
448
472
|
onExportPDF: fe,
|
|
449
|
-
onPublish:
|
|
473
|
+
onPublish: h
|
|
450
474
|
}),
|
|
451
475
|
children: [
|
|
452
|
-
/* @__PURE__ */
|
|
453
|
-
/* @__PURE__ */
|
|
454
|
-
/* @__PURE__ */ O(Ye, { children: [!
|
|
455
|
-
!
|
|
456
|
-
/* @__PURE__ */
|
|
457
|
-
canvasRef:
|
|
458
|
-
pixiRef:
|
|
476
|
+
/* @__PURE__ */ a(Ce, { onPixiReady: V }),
|
|
477
|
+
/* @__PURE__ */ a(Fe, {}),
|
|
478
|
+
/* @__PURE__ */ O(Ye, { children: [!i && /* @__PURE__ */ a(ke, {}), /* @__PURE__ */ a(Ge, {})] }),
|
|
479
|
+
!i && /* @__PURE__ */ a(it, {}),
|
|
480
|
+
/* @__PURE__ */ a(tt, {
|
|
481
|
+
canvasRef: r,
|
|
482
|
+
pixiRef: M,
|
|
459
483
|
miniMapRef: p
|
|
460
484
|
}),
|
|
461
|
-
/* @__PURE__ */
|
|
485
|
+
/* @__PURE__ */ a(Le, {})
|
|
462
486
|
]
|
|
463
487
|
})
|
|
464
488
|
]
|
|
@@ -467,12 +491,12 @@ var Wn = Oe(function({ initialDocument: m, onChange: l, width: g, height: d, rea
|
|
|
467
491
|
})
|
|
468
492
|
});
|
|
469
493
|
});
|
|
470
|
-
function Ye({ children:
|
|
494
|
+
function Ye({ children: s }) {
|
|
471
495
|
const { presentation: m } = Y();
|
|
472
|
-
return /* @__PURE__ */
|
|
496
|
+
return /* @__PURE__ */ a("div", {
|
|
473
497
|
className: "flow-overlay",
|
|
474
498
|
style: { display: m ? "none" : void 0 },
|
|
475
|
-
children:
|
|
499
|
+
children: s
|
|
476
500
|
});
|
|
477
501
|
}
|
|
478
502
|
var qe = [
|
|
@@ -519,22 +543,22 @@ var qe = [
|
|
|
519
543
|
showKey: "showAI"
|
|
520
544
|
}
|
|
521
545
|
];
|
|
522
|
-
function ie(
|
|
523
|
-
switch (
|
|
546
|
+
function ie(s) {
|
|
547
|
+
switch (s) {
|
|
524
548
|
case "shapes":
|
|
525
|
-
return /* @__PURE__ */
|
|
549
|
+
return /* @__PURE__ */ a(ze, {});
|
|
526
550
|
case "icons":
|
|
527
|
-
return /* @__PURE__ */
|
|
551
|
+
return /* @__PURE__ */ a(Ee, {});
|
|
528
552
|
case "media":
|
|
529
|
-
return /* @__PURE__ */
|
|
553
|
+
return /* @__PURE__ */ a(De, {});
|
|
530
554
|
case "inspector":
|
|
531
|
-
return /* @__PURE__ */
|
|
555
|
+
return /* @__PURE__ */ a(Ae, {});
|
|
532
556
|
case "outline":
|
|
533
|
-
return /* @__PURE__ */
|
|
557
|
+
return /* @__PURE__ */ a(Te, {});
|
|
534
558
|
case "json":
|
|
535
|
-
return /* @__PURE__ */
|
|
559
|
+
return /* @__PURE__ */ a(st, {});
|
|
536
560
|
case "ai":
|
|
537
|
-
return /* @__PURE__ */
|
|
561
|
+
return /* @__PURE__ */ a(Re, {});
|
|
538
562
|
default:
|
|
539
563
|
return null;
|
|
540
564
|
}
|
|
@@ -544,75 +568,75 @@ var Qe = /* @__PURE__ */ new Set([
|
|
|
544
568
|
"icons",
|
|
545
569
|
"media"
|
|
546
570
|
]);
|
|
547
|
-
function
|
|
548
|
-
const
|
|
571
|
+
function et({ children: s, toolbar: m, compact: d }) {
|
|
572
|
+
const I = Y(), { panelDocks: f, setPanelDock: i, presentation: l, readOnly: o } = I, { setShowPalette: h, setShowInspector: c, setShowOutline: v, setShowJson: t, setShowAI: g } = I, u = o ? [] : qe.filter((e) => !e.showKey || I[e.showKey]), y = (e) => ({
|
|
549
573
|
id: e.id,
|
|
550
574
|
label: e.label,
|
|
551
575
|
icon: e.icon,
|
|
552
576
|
content: ie(e.id)
|
|
553
|
-
}), [
|
|
577
|
+
}), [b, w] = j(null), C = R(null);
|
|
554
578
|
X(() => {
|
|
555
|
-
if (!
|
|
556
|
-
|
|
579
|
+
if (!d) {
|
|
580
|
+
C.current = null;
|
|
557
581
|
return;
|
|
558
582
|
}
|
|
559
|
-
const e =
|
|
560
|
-
|
|
583
|
+
const e = I.pendingPlacement, n = e ? `${e.type}:${e.data?.svgId ?? ""}:${e.data?.mediaKind ?? ""}` : null, x = C.current;
|
|
584
|
+
C.current = n, n && n !== x && b && Qe.has(b) && w(null);
|
|
561
585
|
}, [
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
586
|
+
I.pendingPlacement,
|
|
587
|
+
d,
|
|
588
|
+
b
|
|
565
589
|
]);
|
|
566
|
-
const [G, L] = j(null), K =
|
|
567
|
-
e === "inspector" ?
|
|
590
|
+
const [G, L] = j(null), K = D((e, n) => i(e, n), [i]), M = D((e) => {
|
|
591
|
+
e === "inspector" ? c(!1) : e === "outline" ? v(!1) : e === "json" ? t(!1) : e === "ai" ? g(!1) : h(!1);
|
|
568
592
|
}, [
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
593
|
+
c,
|
|
594
|
+
v,
|
|
595
|
+
t,
|
|
596
|
+
g,
|
|
597
|
+
h
|
|
574
598
|
]);
|
|
575
|
-
if (
|
|
576
|
-
const e =
|
|
599
|
+
if (d && !l) {
|
|
600
|
+
const e = u.find((n) => n.id === b) ?? null;
|
|
577
601
|
return /* @__PURE__ */ O("div", {
|
|
578
602
|
className: "flow-workspace",
|
|
579
603
|
children: [
|
|
580
604
|
m,
|
|
581
|
-
|
|
605
|
+
u.length > 0 && /* @__PURE__ */ a("div", {
|
|
582
606
|
className: "flow-mobile-panel-bar",
|
|
583
|
-
children: /* @__PURE__ */
|
|
607
|
+
children: /* @__PURE__ */ a(ge, {
|
|
584
608
|
placeholder: "选择面板…",
|
|
585
|
-
options:
|
|
609
|
+
options: u.map((n) => ({
|
|
586
610
|
value: n.id,
|
|
587
611
|
label: n.label
|
|
588
612
|
})),
|
|
589
|
-
value:
|
|
590
|
-
onChange: (n) =>
|
|
613
|
+
value: b ?? void 0,
|
|
614
|
+
onChange: (n) => w(String(n))
|
|
591
615
|
})
|
|
592
616
|
}),
|
|
593
617
|
/* @__PURE__ */ O("div", {
|
|
594
618
|
className: "flow-workspace-main",
|
|
595
|
-
children: [/* @__PURE__ */
|
|
619
|
+
children: [/* @__PURE__ */ a("div", {
|
|
596
620
|
className: "flow-stage",
|
|
597
|
-
children:
|
|
621
|
+
children: s
|
|
598
622
|
}), e && /* @__PURE__ */ O("div", {
|
|
599
623
|
className: "flow-mobile-panel",
|
|
600
624
|
children: [/* @__PURE__ */ O("div", {
|
|
601
625
|
className: "flow-mobile-panel-header",
|
|
602
626
|
children: [/* @__PURE__ */ O("span", {
|
|
603
627
|
className: "flow-mobile-panel-title",
|
|
604
|
-
children: [e.icon && /* @__PURE__ */
|
|
628
|
+
children: [e.icon && /* @__PURE__ */ a("span", {
|
|
605
629
|
className: "flow-panel-tab-icon",
|
|
606
630
|
children: e.icon
|
|
607
631
|
}), e.label]
|
|
608
|
-
}), /* @__PURE__ */
|
|
632
|
+
}), /* @__PURE__ */ a("button", {
|
|
609
633
|
type: "button",
|
|
610
634
|
className: "flow-mobile-panel-close",
|
|
611
635
|
"aria-label": "关闭面板",
|
|
612
|
-
onClick: () =>
|
|
636
|
+
onClick: () => w(null),
|
|
613
637
|
children: "✕"
|
|
614
638
|
})]
|
|
615
|
-
}), /* @__PURE__ */
|
|
639
|
+
}), /* @__PURE__ */ a("div", {
|
|
616
640
|
className: "flow-mobile-panel-body",
|
|
617
641
|
children: ie(e.id)
|
|
618
642
|
})]
|
|
@@ -621,36 +645,36 @@ function en({ children: o, toolbar: m, compact: l }) {
|
|
|
621
645
|
]
|
|
622
646
|
});
|
|
623
647
|
}
|
|
624
|
-
const
|
|
648
|
+
const r = (e) => f[e] ?? "left", p = u.filter((e) => r(e.id) === "left").map(y), S = u.filter((e) => r(e.id) === "right").map(y), k = u.filter((e) => r(e.id) === "float");
|
|
625
649
|
return /* @__PURE__ */ O("div", {
|
|
626
650
|
className: "flow-workspace",
|
|
627
|
-
children: [!
|
|
651
|
+
children: [!l && m, /* @__PURE__ */ O("div", {
|
|
628
652
|
className: "flow-workspace-main",
|
|
629
653
|
children: [
|
|
630
|
-
!
|
|
654
|
+
!l && p.length > 0 && /* @__PURE__ */ a(q, {
|
|
631
655
|
tabs: p,
|
|
632
656
|
defaultTab: p[0]?.id,
|
|
633
657
|
resizeEdge: "right",
|
|
634
658
|
defaultWidth: 220,
|
|
635
659
|
dock: "left",
|
|
636
660
|
onDock: K,
|
|
637
|
-
onClose:
|
|
661
|
+
onClose: M
|
|
638
662
|
}),
|
|
639
|
-
/* @__PURE__ */
|
|
663
|
+
/* @__PURE__ */ a("div", {
|
|
640
664
|
className: "flow-stage",
|
|
641
|
-
children:
|
|
665
|
+
children: s
|
|
642
666
|
}),
|
|
643
|
-
!
|
|
644
|
-
tabs:
|
|
645
|
-
defaultTab:
|
|
667
|
+
!l && S.length > 0 && /* @__PURE__ */ a(q, {
|
|
668
|
+
tabs: S,
|
|
669
|
+
defaultTab: S[0]?.id,
|
|
646
670
|
resizeEdge: "left",
|
|
647
671
|
defaultWidth: 220,
|
|
648
672
|
dock: "right",
|
|
649
673
|
onDock: K,
|
|
650
|
-
onClose:
|
|
674
|
+
onClose: M
|
|
651
675
|
}),
|
|
652
|
-
!
|
|
653
|
-
tabs: [
|
|
676
|
+
!l && k.map((e, n) => /* @__PURE__ */ a(q, {
|
|
677
|
+
tabs: [y(e)],
|
|
654
678
|
resizeEdge: "right",
|
|
655
679
|
defaultWidth: 220,
|
|
656
680
|
dock: "float",
|
|
@@ -659,59 +683,59 @@ function en({ children: o, toolbar: m, compact: l }) {
|
|
|
659
683
|
left: 24 + n * 30
|
|
660
684
|
},
|
|
661
685
|
onDock: K,
|
|
662
|
-
onClose:
|
|
686
|
+
onClose: M,
|
|
663
687
|
onDragHintChange: L
|
|
664
688
|
}, e.id)),
|
|
665
|
-
!
|
|
689
|
+
!l && G && /* @__PURE__ */ a("div", {
|
|
666
690
|
className: `flow-dock-dropzone flow-dock-dropzone--${G}`,
|
|
667
|
-
children: /* @__PURE__ */
|
|
691
|
+
children: /* @__PURE__ */ a("span", { children: G === "left" ? "⇤ 停靠左侧" : "停靠右侧 ⇥" })
|
|
668
692
|
})
|
|
669
693
|
]
|
|
670
694
|
})]
|
|
671
695
|
});
|
|
672
696
|
}
|
|
673
|
-
function
|
|
674
|
-
const { showMiniMap:
|
|
675
|
-
const
|
|
676
|
-
if (!
|
|
677
|
-
const
|
|
678
|
-
if (
|
|
679
|
-
const { width:
|
|
680
|
-
if (!
|
|
681
|
-
const
|
|
682
|
-
|
|
683
|
-
x: p / 2 -
|
|
684
|
-
y:
|
|
685
|
-
zoom:
|
|
697
|
+
function tt({ canvasRef: s, pixiRef: m, miniMapRef: d }) {
|
|
698
|
+
const { showMiniMap: I, setViewport: f, presentation: i } = Y(), l = R(!1), o = D((t, g) => {
|
|
699
|
+
const u = s.current, y = m.current, b = d.current;
|
|
700
|
+
if (!u || !y || y.destroyed || !b) return;
|
|
701
|
+
const w = u.getBoundingClientRect();
|
|
702
|
+
if (w.width === 0 || w.height === 0) return;
|
|
703
|
+
const { width: C, height: G } = b.size, L = (t - w.left) / w.width * C, K = (g - w.top) / w.height * G, M = b.minimapToWorld(L, K);
|
|
704
|
+
if (!M) return;
|
|
705
|
+
const r = y.world.scale.x || 1, p = y.app.screen.width, S = y.app.screen.height;
|
|
706
|
+
f({
|
|
707
|
+
x: p / 2 - M.x * r,
|
|
708
|
+
y: S / 2 - M.y * r,
|
|
709
|
+
zoom: r
|
|
686
710
|
});
|
|
687
711
|
}, [
|
|
688
|
-
|
|
712
|
+
s,
|
|
689
713
|
m,
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
]),
|
|
693
|
-
|
|
694
|
-
}, [
|
|
695
|
-
|
|
696
|
-
}, [
|
|
697
|
-
|
|
714
|
+
d,
|
|
715
|
+
f
|
|
716
|
+
]), h = D((t) => {
|
|
717
|
+
t.preventDefault(), t.currentTarget.setPointerCapture(t.pointerId), l.current = !0, o(t.clientX, t.clientY);
|
|
718
|
+
}, [o]), c = D((t) => {
|
|
719
|
+
l.current && o(t.clientX, t.clientY);
|
|
720
|
+
}, [o]), v = D((t) => {
|
|
721
|
+
l.current = !1;
|
|
698
722
|
try {
|
|
699
|
-
|
|
723
|
+
t.currentTarget.releasePointerCapture(t.pointerId);
|
|
700
724
|
} catch {
|
|
701
725
|
}
|
|
702
726
|
}, []);
|
|
703
|
-
return /* @__PURE__ */
|
|
727
|
+
return /* @__PURE__ */ a("div", {
|
|
704
728
|
className: "flow-minimap",
|
|
705
729
|
style: {
|
|
706
|
-
display:
|
|
730
|
+
display: I && !i ? void 0 : "none",
|
|
707
731
|
cursor: "pointer"
|
|
708
732
|
},
|
|
709
|
-
onPointerDown:
|
|
710
|
-
onPointerMove:
|
|
711
|
-
onPointerUp:
|
|
733
|
+
onPointerDown: h,
|
|
734
|
+
onPointerMove: c,
|
|
735
|
+
onPointerUp: v,
|
|
712
736
|
title: "点击或拖动以移动画布",
|
|
713
|
-
children: /* @__PURE__ */
|
|
714
|
-
ref:
|
|
737
|
+
children: /* @__PURE__ */ a("canvas", {
|
|
738
|
+
ref: s,
|
|
715
739
|
width: 180,
|
|
716
740
|
height: 120,
|
|
717
741
|
style: {
|
|
@@ -722,96 +746,96 @@ function nn({ canvasRef: o, pixiRef: m, miniMapRef: l }) {
|
|
|
722
746
|
})
|
|
723
747
|
});
|
|
724
748
|
}
|
|
725
|
-
function
|
|
726
|
-
const
|
|
727
|
-
if (
|
|
728
|
-
let
|
|
729
|
-
for (let
|
|
730
|
-
if (o
|
|
731
|
-
if (
|
|
732
|
-
|
|
749
|
+
function nt(s, m) {
|
|
750
|
+
const d = `"id": "${m}"`, I = s.indexOf(d);
|
|
751
|
+
if (I === -1) return null;
|
|
752
|
+
let f = 0, i = -1;
|
|
753
|
+
for (let o = I; o >= 0; o--)
|
|
754
|
+
if (s[o] === "}" && f++, s[o] === "{") {
|
|
755
|
+
if (f === 0) {
|
|
756
|
+
i = o;
|
|
733
757
|
break;
|
|
734
758
|
}
|
|
735
|
-
|
|
759
|
+
f--;
|
|
736
760
|
}
|
|
737
|
-
if (
|
|
738
|
-
|
|
739
|
-
let
|
|
740
|
-
for (let
|
|
741
|
-
if (o
|
|
742
|
-
|
|
761
|
+
if (i === -1) return null;
|
|
762
|
+
f = 0;
|
|
763
|
+
let l = -1;
|
|
764
|
+
for (let o = i; o < s.length; o++)
|
|
765
|
+
if (s[o] === "{" && f++, s[o] === "}" && (f--, f === 0)) {
|
|
766
|
+
l = o;
|
|
743
767
|
break;
|
|
744
768
|
}
|
|
745
|
-
return
|
|
746
|
-
startLine:
|
|
769
|
+
return l === -1 ? null : {
|
|
770
|
+
startLine: s.slice(0, i).split(`
|
|
747
771
|
`).length,
|
|
748
|
-
endLine:
|
|
772
|
+
endLine: s.slice(0, l + 1).split(`
|
|
749
773
|
`).length
|
|
750
774
|
};
|
|
751
775
|
}
|
|
752
|
-
function re(
|
|
753
|
-
|
|
776
|
+
function re(s) {
|
|
777
|
+
s.querySelectorAll(".cm-line.flow-json-hl").forEach((m) => m.classList.remove("flow-json-hl"));
|
|
754
778
|
}
|
|
755
|
-
function
|
|
756
|
-
const
|
|
757
|
-
if (
|
|
758
|
-
for (let
|
|
759
|
-
const
|
|
760
|
-
|
|
779
|
+
function ot(s, m, d) {
|
|
780
|
+
const I = s.getView();
|
|
781
|
+
if (I)
|
|
782
|
+
for (let f = m; f <= d; f++) try {
|
|
783
|
+
const i = I.state.doc.line(f), l = I.domAtPos(i.from), o = l.node instanceof HTMLElement ? l.node.closest(".cm-line") : l.node.parentElement?.closest(".cm-line");
|
|
784
|
+
o && o.classList.add("flow-json-hl");
|
|
761
785
|
} catch {
|
|
762
786
|
}
|
|
763
787
|
}
|
|
764
|
-
function
|
|
765
|
-
const { setDoc:
|
|
788
|
+
function st() {
|
|
789
|
+
const { setDoc: s, currentCanvasId: m, selection: d, currentCanvas: I } = ee(), [f, i] = j(""), [l, o] = j(null), h = R(!1), c = R(null), v = R(null), t = le(() => d.nodeIds.size + d.edgeIds.size + d.lineIds.size !== 1 ? null : d.nodeIds.size === 1 ? [...d.nodeIds][0] : d.edgeIds.size === 1 ? [...d.edgeIds][0] : d.lineIds.size === 1 ? [...d.lineIds][0] : null, [d]);
|
|
766
790
|
X(() => {
|
|
767
|
-
if (
|
|
768
|
-
|
|
791
|
+
if (h.current) {
|
|
792
|
+
h.current = !1;
|
|
769
793
|
return;
|
|
770
794
|
}
|
|
771
|
-
|
|
772
|
-
}, [
|
|
773
|
-
const
|
|
774
|
-
if (
|
|
775
|
-
const
|
|
776
|
-
const
|
|
777
|
-
if (!
|
|
778
|
-
const
|
|
779
|
-
if (!
|
|
780
|
-
const G =
|
|
795
|
+
i(JSON.stringify(I, null, 2)), o(null);
|
|
796
|
+
}, [I]), X(() => {
|
|
797
|
+
const y = v.current;
|
|
798
|
+
if (y && re(y), !t) return;
|
|
799
|
+
const b = setTimeout(() => {
|
|
800
|
+
const w = nt(f, t);
|
|
801
|
+
if (!w || !v.current) return;
|
|
802
|
+
const C = c.current?.getView();
|
|
803
|
+
if (!C) return;
|
|
804
|
+
const G = v.current, L = C.scrollDOM;
|
|
781
805
|
L.style.scrollBehavior = "smooth";
|
|
782
|
-
const K =
|
|
783
|
-
|
|
806
|
+
const K = C.state.doc.line(w.startLine);
|
|
807
|
+
C.dispatch({ effects: Be.scrollIntoView(K.from, {
|
|
784
808
|
y: "start",
|
|
785
809
|
yMargin: 0
|
|
786
810
|
}) });
|
|
787
|
-
const
|
|
788
|
-
L.style.scrollBehavior = "", re(G),
|
|
811
|
+
const M = () => {
|
|
812
|
+
L.style.scrollBehavior = "", re(G), ot(c.current, w.startLine, w.endLine);
|
|
789
813
|
};
|
|
790
|
-
let
|
|
814
|
+
let r;
|
|
791
815
|
const p = () => {
|
|
792
|
-
clearTimeout(
|
|
816
|
+
clearTimeout(r), r = setTimeout(M, 100);
|
|
793
817
|
};
|
|
794
|
-
L.addEventListener("scroll", p),
|
|
795
|
-
L.removeEventListener("scroll", p),
|
|
818
|
+
L.addEventListener("scroll", p), r = setTimeout(() => {
|
|
819
|
+
L.removeEventListener("scroll", p), M();
|
|
796
820
|
}, 800);
|
|
797
821
|
}, 120);
|
|
798
|
-
return () => clearTimeout(
|
|
799
|
-
}, [
|
|
800
|
-
const
|
|
801
|
-
|
|
822
|
+
return () => clearTimeout(b);
|
|
823
|
+
}, [t, f]);
|
|
824
|
+
const g = D((y) => {
|
|
825
|
+
i(y);
|
|
802
826
|
try {
|
|
803
|
-
const
|
|
804
|
-
|
|
805
|
-
...
|
|
827
|
+
const b = JSON.parse(y);
|
|
828
|
+
b && Array.isArray(b.nodes) && Array.isArray(b.edges) && Array.isArray(b.lines) ? (o(null), h.current = !0, s((w) => ({
|
|
829
|
+
...w,
|
|
806
830
|
canvases: {
|
|
807
|
-
...
|
|
808
|
-
[m]:
|
|
831
|
+
...w.canvases,
|
|
832
|
+
[m]: b
|
|
809
833
|
}
|
|
810
|
-
}))) :
|
|
811
|
-
} catch (
|
|
812
|
-
|
|
834
|
+
}))) : o("JSON must have nodes, edges, lines arrays");
|
|
835
|
+
} catch (b) {
|
|
836
|
+
o(b.message?.slice(0, 60) ?? "Invalid JSON");
|
|
813
837
|
}
|
|
814
|
-
}, [
|
|
838
|
+
}, [s, m]), u = t ? d.nodeIds.has(t) ? "Node" : d.edgeIds.has(t) ? "Edge" : "Line" : null;
|
|
815
839
|
return /* @__PURE__ */ O("div", {
|
|
816
840
|
style: {
|
|
817
841
|
display: "flex",
|
|
@@ -820,32 +844,32 @@ function sn() {
|
|
|
820
844
|
minHeight: 0
|
|
821
845
|
},
|
|
822
846
|
children: [
|
|
823
|
-
/* @__PURE__ */
|
|
847
|
+
/* @__PURE__ */ a("div", {
|
|
824
848
|
className: "flow-json-header",
|
|
825
|
-
children: /* @__PURE__ */
|
|
849
|
+
children: /* @__PURE__ */ a("span", {
|
|
826
850
|
className: "flow-json-scope",
|
|
827
|
-
children:
|
|
851
|
+
children: u ? `${u}: ${t.slice(0, 8)}` : "Canvas"
|
|
828
852
|
})
|
|
829
853
|
}),
|
|
830
|
-
|
|
854
|
+
l && /* @__PURE__ */ a("div", {
|
|
831
855
|
style: {
|
|
832
856
|
fontSize: 11,
|
|
833
857
|
color: "oklch(var(--er))",
|
|
834
858
|
padding: "4px 0",
|
|
835
859
|
flexShrink: 0
|
|
836
860
|
},
|
|
837
|
-
children:
|
|
861
|
+
children: l
|
|
838
862
|
}),
|
|
839
|
-
/* @__PURE__ */
|
|
840
|
-
ref:
|
|
863
|
+
/* @__PURE__ */ a("div", {
|
|
864
|
+
ref: v,
|
|
841
865
|
style: {
|
|
842
866
|
flex: 1,
|
|
843
867
|
minHeight: 0
|
|
844
868
|
},
|
|
845
|
-
children: /* @__PURE__ */
|
|
846
|
-
ref:
|
|
847
|
-
value:
|
|
848
|
-
onChange:
|
|
869
|
+
children: /* @__PURE__ */ a(we, {
|
|
870
|
+
ref: c,
|
|
871
|
+
value: f,
|
|
872
|
+
onChange: g,
|
|
849
873
|
language: "json",
|
|
850
874
|
lineNumbers: !1,
|
|
851
875
|
height: "100%",
|
|
@@ -855,112 +879,112 @@ function sn() {
|
|
|
855
879
|
]
|
|
856
880
|
});
|
|
857
881
|
}
|
|
858
|
-
function
|
|
859
|
-
const { contextMenu:
|
|
860
|
-
if (!
|
|
861
|
-
const
|
|
862
|
-
if (!
|
|
882
|
+
function it() {
|
|
883
|
+
const { contextMenu: s, setContextMenu: m } = Y(), { doc: d, setDoc: I, currentCanvasId: f, pushCanvas: i, setSelection: l } = ee(), { duplicate: o } = ae();
|
|
884
|
+
if (!s) return null;
|
|
885
|
+
const h = d.canvases[f];
|
|
886
|
+
if (!h)
|
|
863
887
|
return m(null), null;
|
|
864
|
-
const
|
|
865
|
-
return
|
|
888
|
+
const c = s.nodeId ? h.nodes.find((t) => t.id === s.nodeId) : null, v = [];
|
|
889
|
+
return c && (v.push({
|
|
866
890
|
label: "Duplicate",
|
|
867
891
|
icon: "⧉",
|
|
868
892
|
action: () => {
|
|
869
|
-
|
|
893
|
+
o(24, 24, { nodeIds: /* @__PURE__ */ new Set([c.id]) });
|
|
870
894
|
}
|
|
871
|
-
}),
|
|
895
|
+
}), v.push({
|
|
872
896
|
label: "---",
|
|
873
897
|
action: () => {
|
|
874
898
|
}
|
|
875
|
-
}),
|
|
899
|
+
}), c.data.childCanvasId ? (v.push({
|
|
876
900
|
label: "Enter Sub-canvas",
|
|
877
901
|
icon: "↓",
|
|
878
902
|
action: () => {
|
|
879
|
-
|
|
903
|
+
i(c.data.childCanvasId), l({
|
|
880
904
|
nodeIds: /* @__PURE__ */ new Set(),
|
|
881
905
|
edgeIds: /* @__PURE__ */ new Set(),
|
|
882
906
|
lineIds: /* @__PURE__ */ new Set()
|
|
883
907
|
});
|
|
884
908
|
}
|
|
885
|
-
}),
|
|
909
|
+
}), v.push({
|
|
886
910
|
label: "---",
|
|
887
911
|
action: () => {
|
|
888
912
|
}
|
|
889
|
-
}),
|
|
913
|
+
}), v.push({
|
|
890
914
|
label: "Delete Sub-canvas",
|
|
891
915
|
icon: "🗑",
|
|
892
916
|
danger: !0,
|
|
893
917
|
action: () => {
|
|
894
|
-
const
|
|
895
|
-
|
|
896
|
-
const
|
|
897
|
-
de(
|
|
898
|
-
const
|
|
899
|
-
if (!
|
|
900
|
-
|
|
901
|
-
...
|
|
902
|
-
nodes:
|
|
903
|
-
...
|
|
918
|
+
const t = c.data.childCanvasId;
|
|
919
|
+
I((g) => {
|
|
920
|
+
const u = { ...g.canvases };
|
|
921
|
+
de(u, t);
|
|
922
|
+
const y = u[f];
|
|
923
|
+
if (!y) return g;
|
|
924
|
+
u[f] = {
|
|
925
|
+
...y,
|
|
926
|
+
nodes: y.nodes.map((w) => w.id === c.id ? {
|
|
927
|
+
...w,
|
|
904
928
|
data: {
|
|
905
|
-
...
|
|
929
|
+
...w.data,
|
|
906
930
|
childCanvasId: void 0
|
|
907
931
|
}
|
|
908
|
-
} :
|
|
932
|
+
} : w)
|
|
909
933
|
};
|
|
910
|
-
const
|
|
911
|
-
return
|
|
912
|
-
...
|
|
913
|
-
canvases:
|
|
914
|
-
stack:
|
|
934
|
+
const b = g.stack.filter((w) => u[w]);
|
|
935
|
+
return b.length === 0 && b.push(Ie), {
|
|
936
|
+
...g,
|
|
937
|
+
canvases: u,
|
|
938
|
+
stack: b
|
|
915
939
|
};
|
|
916
940
|
});
|
|
917
941
|
}
|
|
918
|
-
})) :
|
|
942
|
+
})) : v.push({
|
|
919
943
|
label: "Create Sub-canvas",
|
|
920
944
|
icon: "⊞",
|
|
921
945
|
action: () => {
|
|
922
|
-
const
|
|
923
|
-
|
|
924
|
-
const
|
|
925
|
-
return
|
|
926
|
-
...
|
|
946
|
+
const t = Q("canvas");
|
|
947
|
+
I((g) => {
|
|
948
|
+
const u = g.canvases[f];
|
|
949
|
+
return u ? {
|
|
950
|
+
...g,
|
|
927
951
|
canvases: {
|
|
928
|
-
...
|
|
929
|
-
[
|
|
930
|
-
...
|
|
931
|
-
nodes:
|
|
932
|
-
...
|
|
952
|
+
...g.canvases,
|
|
953
|
+
[f]: {
|
|
954
|
+
...u,
|
|
955
|
+
nodes: u.nodes.map((y) => y.id === c.id ? {
|
|
956
|
+
...y,
|
|
933
957
|
data: {
|
|
934
|
-
...
|
|
935
|
-
childCanvasId:
|
|
958
|
+
...y.data,
|
|
959
|
+
childCanvasId: t
|
|
936
960
|
}
|
|
937
|
-
} :
|
|
961
|
+
} : y)
|
|
938
962
|
},
|
|
939
|
-
[
|
|
963
|
+
[t]: {
|
|
940
964
|
nodes: [],
|
|
941
965
|
edges: [],
|
|
942
966
|
lines: []
|
|
943
967
|
}
|
|
944
968
|
}
|
|
945
|
-
} :
|
|
946
|
-
}),
|
|
969
|
+
} : g;
|
|
970
|
+
}), i(t);
|
|
947
971
|
}
|
|
948
|
-
})),
|
|
949
|
-
x:
|
|
950
|
-
y:
|
|
951
|
-
items:
|
|
972
|
+
})), v.length === 0 ? null : /* @__PURE__ */ a(Ke, {
|
|
973
|
+
x: s.x,
|
|
974
|
+
y: s.y,
|
|
975
|
+
items: v,
|
|
952
976
|
onClose: () => m(null)
|
|
953
977
|
});
|
|
954
978
|
}
|
|
955
|
-
function de(
|
|
956
|
-
const
|
|
957
|
-
if (
|
|
958
|
-
for (const
|
|
959
|
-
delete
|
|
979
|
+
function de(s, m) {
|
|
980
|
+
const d = s[m];
|
|
981
|
+
if (d) {
|
|
982
|
+
for (const I of d.nodes) I.data.childCanvasId && de(s, I.data.childCanvasId);
|
|
983
|
+
delete s[m];
|
|
960
984
|
}
|
|
961
985
|
}
|
|
962
986
|
export {
|
|
963
|
-
|
|
987
|
+
Kt as default
|
|
964
988
|
};
|
|
965
989
|
|
|
966
990
|
//# sourceMappingURL=Flow.js.map
|