jch-config-editor 0.1.13 → 0.1.14
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/config-editor.es.js
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import { jsxs as h, jsx as e, Fragment as
|
|
2
|
-
import Ce, { useState as ee, useRef as ue, useEffect as he, useMemo as
|
|
3
|
-
import { Typography as
|
|
4
|
-
import { UploadOutlined as
|
|
5
|
-
import { create as
|
|
6
|
-
import { produce as
|
|
1
|
+
import { jsxs as h, jsx as e, Fragment as Ae } from "react/jsx-runtime";
|
|
2
|
+
import Ce, { useState as ee, useRef as ue, useEffect as he, useMemo as Pt, useCallback as V } from "react";
|
|
3
|
+
import { Typography as Tt, Upload as Rt, Button as Z, Collapse as Ne, List as Le, Empty as pe, Tag as ye, Image as Bt, Space as be, Tooltip as Ye, Modal as st, Form as w, Input as re, InputNumber as te, Switch as Qe, message as $e, Divider as De, Select as Ie, Tabs as _t, ConfigProvider as Vt, Layout as ft } from "antd";
|
|
4
|
+
import { UploadOutlined as gt, EditOutlined as pt, DeleteOutlined as ct, UndoOutlined as Zt, RedoOutlined as Jt, CopyOutlined as zt, GroupOutlined as bt, UngroupOutlined as Kt, AlignLeftOutlined as Qt, AlignRightOutlined as en, VerticalAlignTopOutlined as tn, VerticalAlignBottomOutlined as nn, ColumnWidthOutlined as ln, ColumnHeightOutlined as rn, SettingOutlined as an, ExperimentOutlined as on, ZoomInOutlined as sn, ZoomOutOutlined as cn, CloseOutlined as dn, SelectOutlined as un, DragOutlined as hn, EyeOutlined as mn, PlusOutlined as Ot, ArrowUpOutlined as At, ArrowDownOutlined as jt, DownloadOutlined as fn } from "@ant-design/icons";
|
|
5
|
+
import { create as gn } from "zustand";
|
|
6
|
+
import { produce as pn } from "immer";
|
|
7
7
|
import { nanoid as H } from "nanoid";
|
|
8
|
-
import { TransformWrapper as
|
|
9
|
-
function
|
|
8
|
+
import { TransformWrapper as yn, TransformComponent as vn } from "react-zoom-pan-pinch";
|
|
9
|
+
function bn(l) {
|
|
10
10
|
return l && l.__esModule && Object.prototype.hasOwnProperty.call(l, "default") ? l.default : l;
|
|
11
11
|
}
|
|
12
|
-
var
|
|
13
|
-
function
|
|
14
|
-
return
|
|
12
|
+
var Ge = {}, ut = { exports: {} }, xt;
|
|
13
|
+
function yt() {
|
|
14
|
+
return xt || (xt = 1, (function(l) {
|
|
15
15
|
function f(t) {
|
|
16
16
|
return t && t.__esModule ? t : {
|
|
17
17
|
default: t
|
|
18
18
|
};
|
|
19
19
|
}
|
|
20
20
|
l.exports = f, l.exports.__esModule = !0, l.exports.default = l.exports;
|
|
21
|
-
})(
|
|
21
|
+
})(ut)), ut.exports;
|
|
22
22
|
}
|
|
23
|
-
var
|
|
24
|
-
function
|
|
25
|
-
if (
|
|
26
|
-
|
|
23
|
+
var qe = {}, wt;
|
|
24
|
+
function xn() {
|
|
25
|
+
if (wt) return qe;
|
|
26
|
+
wt = 1, Object.defineProperty(qe, "__esModule", {
|
|
27
27
|
value: !0
|
|
28
|
-
}),
|
|
28
|
+
}), qe.default = void 0;
|
|
29
29
|
const l = {
|
|
30
30
|
// Options
|
|
31
31
|
items_per_page: "条/页",
|
|
@@ -41,26 +41,26 @@ function bn() {
|
|
|
41
41
|
next_3: "向后 3 页",
|
|
42
42
|
page_size: "页码"
|
|
43
43
|
};
|
|
44
|
-
return
|
|
44
|
+
return qe.default = l, qe;
|
|
45
45
|
}
|
|
46
|
-
var
|
|
47
|
-
function
|
|
48
|
-
return
|
|
46
|
+
var Be = {}, Ve = {}, Ze = {}, Je = {}, St;
|
|
47
|
+
function wn() {
|
|
48
|
+
return St || (St = 1, Object.defineProperty(Je, "__esModule", {
|
|
49
49
|
value: !0
|
|
50
|
-
}),
|
|
50
|
+
}), Je.commonLocale = void 0, Je.commonLocale = {
|
|
51
51
|
yearFormat: "YYYY",
|
|
52
52
|
dayFormat: "D",
|
|
53
53
|
cellMeridiemFormat: "A",
|
|
54
54
|
monthBeforeYear: !0
|
|
55
|
-
}),
|
|
55
|
+
}), Je;
|
|
56
56
|
}
|
|
57
|
-
var
|
|
58
|
-
function
|
|
59
|
-
if (
|
|
60
|
-
|
|
57
|
+
var Ct;
|
|
58
|
+
function Sn() {
|
|
59
|
+
if (Ct) return Ze;
|
|
60
|
+
Ct = 1, Object.defineProperty(Ze, "__esModule", {
|
|
61
61
|
value: !0
|
|
62
|
-
}),
|
|
63
|
-
var l =
|
|
62
|
+
}), Ze.default = void 0;
|
|
63
|
+
var l = wn();
|
|
64
64
|
function f(p) {
|
|
65
65
|
"@babel/helpers - typeof";
|
|
66
66
|
return f = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(d) {
|
|
@@ -135,29 +135,29 @@ function wn() {
|
|
|
135
135
|
cellDateFormat: "D",
|
|
136
136
|
monthBeforeYear: !1
|
|
137
137
|
});
|
|
138
|
-
return
|
|
138
|
+
return Ze.default = i, Ze;
|
|
139
139
|
}
|
|
140
|
-
var
|
|
141
|
-
function
|
|
142
|
-
if (
|
|
143
|
-
|
|
140
|
+
var Ke = {}, Nt;
|
|
141
|
+
function Wt() {
|
|
142
|
+
if (Nt) return Ke;
|
|
143
|
+
Nt = 1, Object.defineProperty(Ke, "__esModule", {
|
|
144
144
|
value: !0
|
|
145
|
-
}),
|
|
145
|
+
}), Ke.default = void 0;
|
|
146
146
|
const l = {
|
|
147
147
|
placeholder: "请选择时间",
|
|
148
148
|
rangePlaceholder: ["开始时间", "结束时间"]
|
|
149
149
|
};
|
|
150
|
-
return
|
|
150
|
+
return Ke.default = l, Ke;
|
|
151
151
|
}
|
|
152
|
-
var
|
|
153
|
-
function
|
|
154
|
-
if (
|
|
155
|
-
|
|
156
|
-
var l =
|
|
157
|
-
Object.defineProperty(
|
|
152
|
+
var It;
|
|
153
|
+
function Ft() {
|
|
154
|
+
if (It) return Ve;
|
|
155
|
+
It = 1;
|
|
156
|
+
var l = yt().default;
|
|
157
|
+
Object.defineProperty(Ve, "__esModule", {
|
|
158
158
|
value: !0
|
|
159
|
-
}),
|
|
160
|
-
var f = l(
|
|
159
|
+
}), Ve.default = void 0;
|
|
160
|
+
var f = l(Sn()), t = l(/* @__PURE__ */ Wt());
|
|
161
161
|
const r = {
|
|
162
162
|
lang: {
|
|
163
163
|
placeholder: "请选择日期",
|
|
@@ -176,28 +176,28 @@ function Wt() {
|
|
|
176
176
|
...t.default
|
|
177
177
|
}
|
|
178
178
|
};
|
|
179
|
-
return r.lang.ok = "确定",
|
|
180
|
-
}
|
|
181
|
-
var It;
|
|
182
|
-
function Sn() {
|
|
183
|
-
if (It) return Ge;
|
|
184
|
-
It = 1;
|
|
185
|
-
var l = gt().default;
|
|
186
|
-
Object.defineProperty(Ge, "__esModule", {
|
|
187
|
-
value: !0
|
|
188
|
-
}), Ge.default = void 0;
|
|
189
|
-
var f = l(/* @__PURE__ */ Wt());
|
|
190
|
-
return Ge.default = f.default, Ge;
|
|
179
|
+
return r.lang.ok = "确定", Ve.default = r, Ve;
|
|
191
180
|
}
|
|
192
181
|
var kt;
|
|
193
182
|
function Cn() {
|
|
194
|
-
if (kt) return
|
|
183
|
+
if (kt) return Be;
|
|
195
184
|
kt = 1;
|
|
196
|
-
var l =
|
|
197
|
-
Object.defineProperty(
|
|
185
|
+
var l = yt().default;
|
|
186
|
+
Object.defineProperty(Be, "__esModule", {
|
|
198
187
|
value: !0
|
|
199
|
-
}),
|
|
200
|
-
var f = l(
|
|
188
|
+
}), Be.default = void 0;
|
|
189
|
+
var f = l(/* @__PURE__ */ Ft());
|
|
190
|
+
return Be.default = f.default, Be;
|
|
191
|
+
}
|
|
192
|
+
var Et;
|
|
193
|
+
function Nn() {
|
|
194
|
+
if (Et) return Ge;
|
|
195
|
+
Et = 1;
|
|
196
|
+
var l = yt().default;
|
|
197
|
+
Object.defineProperty(Ge, "__esModule", {
|
|
198
|
+
value: !0
|
|
199
|
+
}), Ge.default = void 0;
|
|
200
|
+
var f = l(xn()), t = l(/* @__PURE__ */ Cn()), r = l(/* @__PURE__ */ Ft()), c = l(/* @__PURE__ */ Wt());
|
|
201
201
|
const n = "${label}不是一个有效的${type}", a = {
|
|
202
202
|
locale: "zh-cn",
|
|
203
203
|
Pagination: f.default,
|
|
@@ -338,17 +338,17 @@ function Cn() {
|
|
|
338
338
|
gradientColor: "渐变色"
|
|
339
339
|
}
|
|
340
340
|
};
|
|
341
|
-
return
|
|
341
|
+
return Ge.default = a, Ge;
|
|
342
342
|
}
|
|
343
|
-
var
|
|
344
|
-
function
|
|
345
|
-
return
|
|
343
|
+
var ht, Mt;
|
|
344
|
+
function In() {
|
|
345
|
+
return Mt || (Mt = 1, ht = /* @__PURE__ */ Nn()), ht;
|
|
346
346
|
}
|
|
347
|
-
var
|
|
348
|
-
const
|
|
349
|
-
const i = typeof c == "function" ?
|
|
347
|
+
var kn = /* @__PURE__ */ In();
|
|
348
|
+
const En = /* @__PURE__ */ bn(kn), Mn = (l) => (f, t, r) => (r.setState = (c, n, ...a) => {
|
|
349
|
+
const i = typeof c == "function" ? pn(c) : c;
|
|
350
350
|
return f(i, n, ...a);
|
|
351
|
-
}, l(r.setState, t, r)),
|
|
351
|
+
}, l(r.setState, t, r)), Dn = Mn, Dt = {
|
|
352
352
|
nodes: [],
|
|
353
353
|
materials: [],
|
|
354
354
|
selectedNodeId: null,
|
|
@@ -381,9 +381,9 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
381
381
|
targetId: f,
|
|
382
382
|
payload: t,
|
|
383
383
|
timestamp: Date.now()
|
|
384
|
-
}),
|
|
385
|
-
|
|
386
|
-
...
|
|
384
|
+
}), Oe = gn()(
|
|
385
|
+
Dn((l, f) => ({
|
|
386
|
+
...Dt,
|
|
387
387
|
// ========== 节点操作 ==========
|
|
388
388
|
addNode: (t, r = !0) => {
|
|
389
389
|
l((c) => {
|
|
@@ -585,11 +585,11 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
585
585
|
},
|
|
586
586
|
importScheme: (t) => {
|
|
587
587
|
l((r) => {
|
|
588
|
-
r.nodes = t.nodes || [], r.materials = t.materials || [], r.viewport = t.viewport ||
|
|
588
|
+
r.nodes = t.nodes || [], r.materials = t.materials || [], r.viewport = t.viewport || Dt.viewport, r.selectedNodeId = null, r.selectedStatusId = null, r.history = { past: [], future: [] };
|
|
589
589
|
});
|
|
590
590
|
}
|
|
591
591
|
}))
|
|
592
|
-
),
|
|
592
|
+
), Ln = [
|
|
593
593
|
// 基础形状
|
|
594
594
|
{
|
|
595
595
|
id: H(),
|
|
@@ -662,13 +662,13 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
662
662
|
lineType: "solid"
|
|
663
663
|
}
|
|
664
664
|
}
|
|
665
|
-
],
|
|
665
|
+
], Ut = (l) => ({
|
|
666
666
|
id: H(),
|
|
667
667
|
name: "默认状态",
|
|
668
668
|
expression: "return true;",
|
|
669
669
|
material: { ...l, id: H() },
|
|
670
670
|
bindCodes: []
|
|
671
|
-
}),
|
|
671
|
+
}), Yn = (l, f, t) => {
|
|
672
672
|
if (t?.type === "CUSTOM" && t.config?.nodes) {
|
|
673
673
|
const r = t.config.nodes.map((d) => ({
|
|
674
674
|
...d,
|
|
@@ -727,7 +727,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
727
727
|
padding: 8
|
|
728
728
|
},
|
|
729
729
|
contentInfo: {
|
|
730
|
-
statusList: t ? [
|
|
730
|
+
statusList: t ? [Ut(t)] : [],
|
|
731
731
|
currentStatusId: void 0
|
|
732
732
|
},
|
|
733
733
|
controlInfo: {
|
|
@@ -737,7 +737,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
737
737
|
isSelectable: !0
|
|
738
738
|
}
|
|
739
739
|
};
|
|
740
|
-
}, { Panel:
|
|
740
|
+
}, { Panel: ze } = Ne, { Text: it } = Tt, $n = () => {
|
|
741
741
|
const {
|
|
742
742
|
materials: l,
|
|
743
743
|
addMaterial: f,
|
|
@@ -748,21 +748,21 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
748
748
|
lineDrawing: a,
|
|
749
749
|
startLineDrawing: i,
|
|
750
750
|
cancelLineDrawing: p
|
|
751
|
-
} =
|
|
751
|
+
} = Oe(), [d, m] = ee([
|
|
752
752
|
"basic",
|
|
753
753
|
"device",
|
|
754
754
|
"text",
|
|
755
755
|
"line"
|
|
756
756
|
]), S = (g) => {
|
|
757
|
-
const
|
|
758
|
-
return
|
|
759
|
-
const
|
|
757
|
+
const U = new FileReader();
|
|
758
|
+
return U.onload = (j) => {
|
|
759
|
+
const T = j.target?.result;
|
|
760
760
|
f({
|
|
761
761
|
name: g.name.replace(".svg", ""),
|
|
762
762
|
type: "IMAGE",
|
|
763
|
-
src:
|
|
763
|
+
src: T
|
|
764
764
|
});
|
|
765
|
-
},
|
|
765
|
+
}, U.readAsDataURL(g), !1;
|
|
766
766
|
}, u = {
|
|
767
767
|
basic: l.filter(
|
|
768
768
|
(g) => ["矩形", "圆形", "圆角矩形"].includes(g.name)
|
|
@@ -776,37 +776,37 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
776
776
|
custom: l.filter(
|
|
777
777
|
(g) => g.type === "CUSTOM" && !g.config?.nodes || g.type === "IMAGE" && !["矩形", "圆形", "圆角矩形", "阀门", "泵", "罐体"].includes(g.name)
|
|
778
778
|
)
|
|
779
|
-
}, E = (g,
|
|
780
|
-
g.dataTransfer.effectAllowed = "copy", g.dataTransfer.setData("application/json", JSON.stringify(
|
|
781
|
-
const
|
|
779
|
+
}, E = (g, U) => {
|
|
780
|
+
g.dataTransfer.effectAllowed = "copy", g.dataTransfer.setData("application/json", JSON.stringify(U));
|
|
781
|
+
const j = g.currentTarget.querySelector(
|
|
782
782
|
".material-preview"
|
|
783
783
|
);
|
|
784
|
-
|
|
785
|
-
},
|
|
784
|
+
j && g.dataTransfer.setDragImage(j, 20, 20);
|
|
785
|
+
}, b = (g) => {
|
|
786
786
|
g.type === "LINE" && i(g);
|
|
787
|
-
},
|
|
788
|
-
const
|
|
787
|
+
}, k = (g, U = !1) => {
|
|
788
|
+
const j = U === !0, T = n === "line-draw" && j && a.material?.id === g.id;
|
|
789
789
|
return /* @__PURE__ */ e(
|
|
790
|
-
|
|
790
|
+
Le.Item,
|
|
791
791
|
{
|
|
792
|
-
draggable: !
|
|
793
|
-
onDragStart: (
|
|
794
|
-
onClick: () =>
|
|
792
|
+
draggable: !j,
|
|
793
|
+
onDragStart: (Y) => E(Y, g),
|
|
794
|
+
onClick: () => j && b(g),
|
|
795
795
|
className: `
|
|
796
796
|
rounded-lg transition-all duration-200 select-none
|
|
797
|
-
${
|
|
797
|
+
${j ? "cursor-pointer" : "cursor-move"}
|
|
798
798
|
hover:bg-gray-100
|
|
799
|
-
${
|
|
799
|
+
${T ? "bg-blue-50 ring-2 ring-blue-400" : ""}
|
|
800
800
|
`,
|
|
801
801
|
actions: [
|
|
802
|
-
|
|
802
|
+
j ? /* @__PURE__ */ e(
|
|
803
803
|
Z,
|
|
804
804
|
{
|
|
805
805
|
type: "text",
|
|
806
806
|
size: "small",
|
|
807
|
-
icon: /* @__PURE__ */ e(
|
|
808
|
-
onClick: (
|
|
809
|
-
|
|
807
|
+
icon: /* @__PURE__ */ e(pt, {}),
|
|
808
|
+
onClick: (Y) => {
|
|
809
|
+
Y.stopPropagation(), b(g);
|
|
810
810
|
},
|
|
811
811
|
children: "绘制"
|
|
812
812
|
},
|
|
@@ -818,17 +818,17 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
818
818
|
type: "text",
|
|
819
819
|
size: "small",
|
|
820
820
|
danger: !0,
|
|
821
|
-
icon: /* @__PURE__ */ e(
|
|
822
|
-
onClick: (
|
|
823
|
-
|
|
821
|
+
icon: /* @__PURE__ */ e(ct, {}),
|
|
822
|
+
onClick: (Y) => {
|
|
823
|
+
Y.stopPropagation(), t(g.id);
|
|
824
824
|
}
|
|
825
825
|
},
|
|
826
826
|
"delete"
|
|
827
827
|
)
|
|
828
828
|
].filter(Boolean),
|
|
829
|
-
children: /* @__PURE__ */ h("div", { className: `flex items-center gap-3 w-full py-2 ${
|
|
829
|
+
children: /* @__PURE__ */ h("div", { className: `flex items-center gap-3 w-full py-2 ${j ? "" : "pointer-events-none"}`, children: [
|
|
830
830
|
/* @__PURE__ */ e("div", { className: "material-preview w-12 h-12 flex items-center justify-center bg-white rounded border border-gray-200", children: g.type === "IMAGE" && g.src ? /* @__PURE__ */ e(
|
|
831
|
-
|
|
831
|
+
Bt,
|
|
832
832
|
{
|
|
833
833
|
src: g.src,
|
|
834
834
|
alt: g.name,
|
|
@@ -838,10 +838,10 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
838
838
|
}
|
|
839
839
|
) : g.type === "TEXT" ? /* @__PURE__ */ e("span", { className: "text-xs text-gray-500", children: "T" }) : g.type === "LINE" ? /* @__PURE__ */ e("div", { className: "w-8 h-0.5 bg-gray-400" }) : g.type === "CUSTOM" && g.config?.nodes ? /* @__PURE__ */ e("span", { className: "text-xs text-blue-500 font-bold", children: "G" }) : /* @__PURE__ */ e("span", { className: "text-xs text-gray-500", children: "?" }) }),
|
|
840
840
|
/* @__PURE__ */ h("div", { className: "flex-1 min-w-0", children: [
|
|
841
|
-
/* @__PURE__ */ e(
|
|
841
|
+
/* @__PURE__ */ e(it, { strong: !0, className: "block truncate", children: g.name }),
|
|
842
842
|
/* @__PURE__ */ h("div", { className: "flex items-center gap-1", children: [
|
|
843
|
-
/* @__PURE__ */ e(
|
|
844
|
-
|
|
843
|
+
/* @__PURE__ */ e(it, { type: "secondary", className: "text-xs", children: g.type }),
|
|
844
|
+
T && /* @__PURE__ */ e(ye, { color: "blue", className: "text-xs", children: "绘制中" })
|
|
845
845
|
] })
|
|
846
846
|
] })
|
|
847
847
|
] })
|
|
@@ -852,15 +852,15 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
852
852
|
return /* @__PURE__ */ h("div", { className: "h-full flex flex-col bg-white border-r border-gray-200", children: [
|
|
853
853
|
/* @__PURE__ */ h("div", { className: "p-4 border-b border-gray-200", children: [
|
|
854
854
|
/* @__PURE__ */ e("h3", { className: "text-lg font-semibold text-gray-800", children: "物料库" }),
|
|
855
|
-
/* @__PURE__ */ e(
|
|
855
|
+
/* @__PURE__ */ e(it, { type: "secondary", className: "text-sm", children: "拖拽物料到画布创建节点" })
|
|
856
856
|
] }),
|
|
857
857
|
/* @__PURE__ */ e("div", { className: "p-3 border-b border-gray-200", children: /* @__PURE__ */ e(
|
|
858
|
-
|
|
858
|
+
Rt,
|
|
859
859
|
{
|
|
860
860
|
accept: ".svg",
|
|
861
861
|
beforeUpload: S,
|
|
862
862
|
showUploadList: !1,
|
|
863
|
-
children: /* @__PURE__ */ e(Z, { icon: /* @__PURE__ */ e(
|
|
863
|
+
children: /* @__PURE__ */ e(Z, { icon: /* @__PURE__ */ e(gt, {}), block: !0, type: "dashed", children: "上传 SVG" })
|
|
864
864
|
}
|
|
865
865
|
) }),
|
|
866
866
|
/* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto p-2", children: /* @__PURE__ */ h(
|
|
@@ -871,11 +871,11 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
871
871
|
ghost: !0,
|
|
872
872
|
expandIconPosition: "end",
|
|
873
873
|
children: [
|
|
874
|
-
/* @__PURE__ */ e(
|
|
875
|
-
|
|
874
|
+
/* @__PURE__ */ e(ze, { header: "基础形状", children: /* @__PURE__ */ e(
|
|
875
|
+
Le,
|
|
876
876
|
{
|
|
877
877
|
dataSource: u.basic,
|
|
878
|
-
renderItem: (g) =>
|
|
878
|
+
renderItem: (g) => k(g, !1),
|
|
879
879
|
locale: {
|
|
880
880
|
emptyText: /* @__PURE__ */ e(
|
|
881
881
|
pe,
|
|
@@ -887,11 +887,11 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
887
887
|
}
|
|
888
888
|
}
|
|
889
889
|
) }, "basic"),
|
|
890
|
-
/* @__PURE__ */ e(
|
|
891
|
-
|
|
890
|
+
/* @__PURE__ */ e(ze, { header: "设备图标", children: /* @__PURE__ */ e(
|
|
891
|
+
Le,
|
|
892
892
|
{
|
|
893
893
|
dataSource: u.device,
|
|
894
|
-
renderItem: (g) =>
|
|
894
|
+
renderItem: (g) => k(g, !1),
|
|
895
895
|
locale: {
|
|
896
896
|
emptyText: /* @__PURE__ */ e(
|
|
897
897
|
pe,
|
|
@@ -903,11 +903,11 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
903
903
|
}
|
|
904
904
|
}
|
|
905
905
|
) }, "device"),
|
|
906
|
-
/* @__PURE__ */ e(
|
|
907
|
-
|
|
906
|
+
/* @__PURE__ */ e(ze, { header: "文本", children: /* @__PURE__ */ e(
|
|
907
|
+
Le,
|
|
908
908
|
{
|
|
909
909
|
dataSource: u.text,
|
|
910
|
-
renderItem: (g) =>
|
|
910
|
+
renderItem: (g) => k(g, !1),
|
|
911
911
|
locale: {
|
|
912
912
|
emptyText: /* @__PURE__ */ e(
|
|
913
913
|
pe,
|
|
@@ -920,7 +920,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
920
920
|
}
|
|
921
921
|
) }, "text"),
|
|
922
922
|
/* @__PURE__ */ h(
|
|
923
|
-
|
|
923
|
+
ze,
|
|
924
924
|
{
|
|
925
925
|
header: /* @__PURE__ */ h("div", { className: "flex items-center justify-between", children: [
|
|
926
926
|
/* @__PURE__ */ e("span", { children: "线条" }),
|
|
@@ -928,10 +928,10 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
928
928
|
] }),
|
|
929
929
|
children: [
|
|
930
930
|
/* @__PURE__ */ e(
|
|
931
|
-
|
|
931
|
+
Le,
|
|
932
932
|
{
|
|
933
933
|
dataSource: u.line,
|
|
934
|
-
renderItem: (g) =>
|
|
934
|
+
renderItem: (g) => k(g, !0),
|
|
935
935
|
locale: {
|
|
936
936
|
emptyText: /* @__PURE__ */ e(
|
|
937
937
|
pe,
|
|
@@ -951,11 +951,11 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
951
951
|
},
|
|
952
952
|
"line"
|
|
953
953
|
),
|
|
954
|
-
u.group.length > 0 && /* @__PURE__ */ e(
|
|
955
|
-
|
|
954
|
+
u.group.length > 0 && /* @__PURE__ */ e(ze, { header: "群组", children: /* @__PURE__ */ e(
|
|
955
|
+
Le,
|
|
956
956
|
{
|
|
957
957
|
dataSource: u.group,
|
|
958
|
-
renderItem: (g) =>
|
|
958
|
+
renderItem: (g) => k(g, !1),
|
|
959
959
|
locale: {
|
|
960
960
|
emptyText: /* @__PURE__ */ e(
|
|
961
961
|
pe,
|
|
@@ -967,11 +967,11 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
967
967
|
}
|
|
968
968
|
}
|
|
969
969
|
) }, "group"),
|
|
970
|
-
u.custom.length > 0 && /* @__PURE__ */ e(
|
|
971
|
-
|
|
970
|
+
u.custom.length > 0 && /* @__PURE__ */ e(ze, { header: "自定义", children: /* @__PURE__ */ e(
|
|
971
|
+
Le,
|
|
972
972
|
{
|
|
973
973
|
dataSource: u.custom,
|
|
974
|
-
renderItem: (g) =>
|
|
974
|
+
renderItem: (g) => k(g, !1),
|
|
975
975
|
locale: {
|
|
976
976
|
emptyText: /* @__PURE__ */ e(
|
|
977
977
|
pe,
|
|
@@ -986,9 +986,9 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
986
986
|
]
|
|
987
987
|
}
|
|
988
988
|
) }),
|
|
989
|
-
/* @__PURE__ */ e("div", { className: "p-3 border-t border-gray-200 bg-gray-50", children: /* @__PURE__ */ e(
|
|
989
|
+
/* @__PURE__ */ e("div", { className: "p-3 border-t border-gray-200 bg-gray-50", children: /* @__PURE__ */ e(it, { type: "secondary", className: "text-xs", children: n === "line-draw" ? /* @__PURE__ */ e(Ae, { children: "💡 提示:点击绘制线段,可连续绘制多段线,双击结束绘制,ESC 取消" }) : /* @__PURE__ */ e(Ae, { children: "💡 提示:拖拽物料到画布创建节点,点击线条物料进入绘制模式" }) }) })
|
|
990
990
|
] });
|
|
991
|
-
}, { Text:
|
|
991
|
+
}, { Text: Lt } = Tt, Xn = (l, f) => {
|
|
992
992
|
try {
|
|
993
993
|
const t = f && Array.isArray(f) ? f.map((n, a) => n.paramsName) : ["A"], c = new Function(...t, l.expression)(...f.map((n) => n.value));
|
|
994
994
|
return console.log(
|
|
@@ -1000,16 +1000,16 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1000
1000
|
} catch (t) {
|
|
1001
1001
|
return console.warn(`状态表达式执行失败 [${l.name}]:`, t), !1;
|
|
1002
1002
|
}
|
|
1003
|
-
},
|
|
1003
|
+
}, Pn = (l, f) => {
|
|
1004
1004
|
for (const t of l) {
|
|
1005
1005
|
console.log(t, "status");
|
|
1006
1006
|
let r = [];
|
|
1007
1007
|
if (Array.isArray(f) ? (console.log(t.bindCodes, "bindCodes"), r = f.filter(
|
|
1008
1008
|
(c) => t.bindCodes?.includes(c.paramsCode)
|
|
1009
|
-
)) : r = f,
|
|
1009
|
+
)) : r = f, Xn(t, r))
|
|
1010
1010
|
return t;
|
|
1011
1011
|
}
|
|
1012
|
-
},
|
|
1012
|
+
}, Tn = (l, f) => {
|
|
1013
1013
|
if (!f || !l)
|
|
1014
1014
|
return { value: void 0 };
|
|
1015
1015
|
if (Array.isArray(l)) {
|
|
@@ -1025,12 +1025,12 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1025
1025
|
unit: l.unit
|
|
1026
1026
|
};
|
|
1027
1027
|
return { value: void 0 };
|
|
1028
|
-
},
|
|
1028
|
+
}, Rn = (l, f) => {
|
|
1029
1029
|
if (l == null || l === "") return "";
|
|
1030
1030
|
if (f === -1) return String(l);
|
|
1031
1031
|
const t = Number(l);
|
|
1032
1032
|
return isNaN(t) ? String(l) : t.toFixed(f ?? 2);
|
|
1033
|
-
},
|
|
1033
|
+
}, _n = (l, f, t, r) => {
|
|
1034
1034
|
switch (l.type) {
|
|
1035
1035
|
case "IMAGE":
|
|
1036
1036
|
const c = l, n = c.backgroundColor, a = c.fillColor;
|
|
@@ -1061,10 +1061,10 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1061
1061
|
valueSourceCode: S,
|
|
1062
1062
|
unit: u,
|
|
1063
1063
|
decimals: E,
|
|
1064
|
-
labelStyle:
|
|
1065
|
-
valueStyle:
|
|
1064
|
+
labelStyle: b,
|
|
1065
|
+
valueStyle: k,
|
|
1066
1066
|
customStyle: g
|
|
1067
|
-
} = p.content || {}, { value:
|
|
1067
|
+
} = p.content || {}, { value: U, unit: j } = S ? Tn(f, S) : { value: void 0, unit: void 0 }, Y = Rn(U !== void 0 ? U : m, E), $ = u || j || "";
|
|
1068
1068
|
return /* @__PURE__ */ h(
|
|
1069
1069
|
"div",
|
|
1070
1070
|
{
|
|
@@ -1072,30 +1072,30 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1072
1072
|
style: { ...g },
|
|
1073
1073
|
children: [
|
|
1074
1074
|
d && /* @__PURE__ */ e(
|
|
1075
|
-
|
|
1075
|
+
Lt,
|
|
1076
1076
|
{
|
|
1077
1077
|
style: {
|
|
1078
1078
|
fontSize: 14,
|
|
1079
1079
|
fontWeight: "bold",
|
|
1080
1080
|
color: "#262626",
|
|
1081
1081
|
textAlign: "left",
|
|
1082
|
-
...
|
|
1082
|
+
...b
|
|
1083
1083
|
},
|
|
1084
1084
|
children: d
|
|
1085
1085
|
}
|
|
1086
1086
|
),
|
|
1087
|
-
|
|
1088
|
-
|
|
1087
|
+
Y && /* @__PURE__ */ h(
|
|
1088
|
+
Lt,
|
|
1089
1089
|
{
|
|
1090
1090
|
style: {
|
|
1091
1091
|
fontSize: 14,
|
|
1092
1092
|
color: "#1890ff",
|
|
1093
1093
|
textAlign: "left",
|
|
1094
|
-
...
|
|
1094
|
+
...k
|
|
1095
1095
|
},
|
|
1096
1096
|
children: [
|
|
1097
|
-
|
|
1098
|
-
|
|
1097
|
+
Y,
|
|
1098
|
+
$ ? ` ${$}` : ""
|
|
1099
1099
|
]
|
|
1100
1100
|
}
|
|
1101
1101
|
)
|
|
@@ -1107,32 +1107,32 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1107
1107
|
thickness: ne = 2,
|
|
1108
1108
|
color: we = "#d9d9d9",
|
|
1109
1109
|
dashed: ie = !1,
|
|
1110
|
-
lineType:
|
|
1110
|
+
lineType: W = ie ? "dashed" : "solid",
|
|
1111
1111
|
lineWeight: K = ne,
|
|
1112
1112
|
// 起点和终点的相对坐标
|
|
1113
1113
|
startX: G = 0,
|
|
1114
|
-
startY:
|
|
1114
|
+
startY: R = 0,
|
|
1115
1115
|
endX: s = 100,
|
|
1116
1116
|
endY: q = 0
|
|
1117
|
-
} = xe.config || {},
|
|
1118
|
-
const
|
|
1119
|
-
switch (
|
|
1117
|
+
} = xe.config || {}, X = ((We) => {
|
|
1118
|
+
const F = Math.max(K, 1);
|
|
1119
|
+
switch (We) {
|
|
1120
1120
|
case "solid":
|
|
1121
1121
|
return "";
|
|
1122
1122
|
case "dashed":
|
|
1123
|
-
return `${
|
|
1123
|
+
return `${F * 8},${F * 4}`;
|
|
1124
1124
|
case "center":
|
|
1125
|
-
return `${
|
|
1125
|
+
return `${F * 12},${F * 3},${F * 2},${F * 3}`;
|
|
1126
1126
|
case "phantom":
|
|
1127
|
-
return `${
|
|
1127
|
+
return `${F * 12},${F * 3},${F * 2},${F * 3},${F * 2},${F * 3}`;
|
|
1128
1128
|
case "dot":
|
|
1129
|
-
return `${
|
|
1129
|
+
return `${F},${F * 3}`;
|
|
1130
1130
|
case "dash-dot":
|
|
1131
|
-
return `${
|
|
1131
|
+
return `${F * 8},${F * 3},${F},${F * 3}`;
|
|
1132
1132
|
default:
|
|
1133
1133
|
return "";
|
|
1134
1134
|
}
|
|
1135
|
-
})(
|
|
1135
|
+
})(W), D = t ? "#1890ff" : we;
|
|
1136
1136
|
return /* @__PURE__ */ e("div", { className: "w-full h-full relative", style: { overflow: "visible" }, children: /* @__PURE__ */ h(
|
|
1137
1137
|
"svg",
|
|
1138
1138
|
{
|
|
@@ -1145,7 +1145,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1145
1145
|
"line",
|
|
1146
1146
|
{
|
|
1147
1147
|
x1: G,
|
|
1148
|
-
y1:
|
|
1148
|
+
y1: R,
|
|
1149
1149
|
x2: s,
|
|
1150
1150
|
y2: q,
|
|
1151
1151
|
stroke: "transparent",
|
|
@@ -1159,12 +1159,12 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1159
1159
|
"line",
|
|
1160
1160
|
{
|
|
1161
1161
|
x1: G,
|
|
1162
|
-
y1:
|
|
1162
|
+
y1: R,
|
|
1163
1163
|
x2: s,
|
|
1164
1164
|
y2: q,
|
|
1165
|
-
stroke:
|
|
1165
|
+
stroke: D,
|
|
1166
1166
|
strokeWidth: K,
|
|
1167
|
-
strokeDasharray:
|
|
1167
|
+
strokeDasharray: X,
|
|
1168
1168
|
strokeLinecap: "round",
|
|
1169
1169
|
strokeLinejoin: "round",
|
|
1170
1170
|
style: { pointerEvents: "none" }
|
|
@@ -1179,7 +1179,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1179
1179
|
default:
|
|
1180
1180
|
return /* @__PURE__ */ e("div", { className: "w-full h-full flex items-center justify-center bg-gray-100", children: /* @__PURE__ */ e("span", { className: "text-gray-400 text-xs", children: "未知类型" }) });
|
|
1181
1181
|
}
|
|
1182
|
-
},
|
|
1182
|
+
}, zn = ({
|
|
1183
1183
|
node: l,
|
|
1184
1184
|
isSelected: f = !1,
|
|
1185
1185
|
onClick: t,
|
|
@@ -1188,219 +1188,219 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1188
1188
|
onUpdateNode: n,
|
|
1189
1189
|
scale: a = 1
|
|
1190
1190
|
}) => {
|
|
1191
|
-
const { normalStyle: i, contentInfo: p, controlInfo: d } = l, { statusList: m } = p, { isClickable: S, isDraggable: u, isResizable: E } = d,
|
|
1191
|
+
const { normalStyle: i, contentInfo: p, controlInfo: d } = l, { statusList: m } = p, { isClickable: S, isDraggable: u, isResizable: E } = d, b = ue(t);
|
|
1192
1192
|
he(() => {
|
|
1193
|
-
|
|
1193
|
+
b.current = t;
|
|
1194
1194
|
}, [t]);
|
|
1195
|
-
const [
|
|
1195
|
+
const [k, g] = ee(null), U = ue(null), j = ue(null), T = ue(null), Y = ue(null), [$, xe] = ee(null), [ne, we] = ee(null), ie = ue(null), W = Pt(() => {
|
|
1196
1196
|
if (m.length === 0) return;
|
|
1197
|
-
const
|
|
1198
|
-
return
|
|
1199
|
-
}, [m, c]), K =
|
|
1200
|
-
const
|
|
1201
|
-
if (!
|
|
1202
|
-
const
|
|
1203
|
-
return
|
|
1204
|
-
}, [a]),
|
|
1205
|
-
|
|
1206
|
-
mouseX:
|
|
1207
|
-
mouseY:
|
|
1208
|
-
startX:
|
|
1209
|
-
startY:
|
|
1210
|
-
endX:
|
|
1211
|
-
endY:
|
|
1197
|
+
const I = Pn(m, c);
|
|
1198
|
+
return I || m[0];
|
|
1199
|
+
}, [m, c]), K = W?.material, G = K?.type === "LINE", R = G ? K.config : null, s = i.scale ?? 1, q = (i.width || 100) * s, x = (i.height || 100) * s, X = V(() => {
|
|
1200
|
+
const I = Y.current?.closest('[data-canvas="true"]');
|
|
1201
|
+
if (!I) return a;
|
|
1202
|
+
const O = I.getBoundingClientRect(), _ = parseFloat(I.style.width);
|
|
1203
|
+
return _ ? O.width / _ : a;
|
|
1204
|
+
}, [a]), D = V((I, O) => {
|
|
1205
|
+
I.stopPropagation(), I.preventDefault(), U.current = {
|
|
1206
|
+
mouseX: I.clientX,
|
|
1207
|
+
mouseY: I.clientY,
|
|
1208
|
+
startX: R?.startX || 0,
|
|
1209
|
+
startY: R?.startY || 0,
|
|
1210
|
+
endX: R?.endX || 0,
|
|
1211
|
+
endY: R?.endY || 0,
|
|
1212
1212
|
nodeX: i.x || 0,
|
|
1213
1213
|
nodeY: i.y || 0
|
|
1214
|
-
}, g(
|
|
1215
|
-
}, [
|
|
1214
|
+
}, g(O);
|
|
1215
|
+
}, [R, i.x, i.y]);
|
|
1216
1216
|
he(() => {
|
|
1217
|
-
if (!
|
|
1218
|
-
const
|
|
1219
|
-
const
|
|
1220
|
-
if (!
|
|
1221
|
-
const me =
|
|
1222
|
-
let Q =
|
|
1223
|
-
|
|
1224
|
-
const
|
|
1225
|
-
|
|
1217
|
+
if (!k || !G || !R || !n) return;
|
|
1218
|
+
const I = (_) => {
|
|
1219
|
+
const L = U.current;
|
|
1220
|
+
if (!L || !Y.current) return;
|
|
1221
|
+
const me = X(), fe = (_.clientX - L.mouseX) / me, ae = (_.clientY - L.mouseY) / me;
|
|
1222
|
+
let Q = L.startX, oe = L.startY, se = L.endX, ce = L.endY, Xe = L.nodeX, Pe = L.nodeY;
|
|
1223
|
+
k === "start" ? (Q = L.startX + fe, oe = L.startY + ae, Q < 0 && (Xe = L.nodeX + Q, se = L.endX - Q, Q = 0), oe < 0 && (Pe = L.nodeY + oe, ce = L.endY - oe, oe = 0)) : (se = L.endX + fe, ce = L.endY + ae, se < 0 && (Xe = L.nodeX + se, Q = L.startX - se, se = 0), ce < 0 && (Pe = L.nodeY + ce, oe = L.startY - ce, ce = 0));
|
|
1224
|
+
const nt = Math.max((R.lineWeight || 2) * 2, 4), lt = Math.max(Q, se), rt = Math.max(oe, ce), Fe = Math.max(lt, nt), Te = Math.max(rt, nt);
|
|
1225
|
+
j.current = {
|
|
1226
1226
|
nodeX: Xe,
|
|
1227
1227
|
nodeY: Pe,
|
|
1228
|
-
width:
|
|
1228
|
+
width: Fe,
|
|
1229
1229
|
height: Te,
|
|
1230
1230
|
startX: Q,
|
|
1231
1231
|
startY: oe,
|
|
1232
1232
|
endX: se,
|
|
1233
1233
|
endY: ce
|
|
1234
1234
|
};
|
|
1235
|
-
const ge =
|
|
1236
|
-
ge.style.left = `${Xe}px`, ge.style.top = `${Pe}px`, ge.style.width = `${
|
|
1237
|
-
|
|
1235
|
+
const ge = Y.current;
|
|
1236
|
+
ge.style.left = `${Xe}px`, ge.style.top = `${Pe}px`, ge.style.width = `${Fe}px`, ge.style.height = `${Te}px`, ge.querySelectorAll("svg line").forEach((ke) => {
|
|
1237
|
+
ke.setAttribute("x1", String(Q)), ke.setAttribute("y1", String(oe)), ke.setAttribute("x2", String(se)), ke.setAttribute("y2", String(ce));
|
|
1238
1238
|
});
|
|
1239
|
-
const
|
|
1240
|
-
|
|
1241
|
-
},
|
|
1242
|
-
const
|
|
1243
|
-
|
|
1239
|
+
const Ue = ge.querySelector('[data-handle="start"]'), He = ge.querySelector('[data-handle="end"]');
|
|
1240
|
+
Ue && (Ue.style.left = `${Q - 6}px`, Ue.style.top = `${oe - 6}px`), He && (He.style.left = `${se - 6}px`, He.style.top = `${ce - 6}px`);
|
|
1241
|
+
}, O = () => {
|
|
1242
|
+
const _ = j.current;
|
|
1243
|
+
_ && n(l.id, {
|
|
1244
1244
|
normalStyle: {
|
|
1245
1245
|
...i,
|
|
1246
|
-
x:
|
|
1247
|
-
y:
|
|
1248
|
-
width:
|
|
1249
|
-
height:
|
|
1246
|
+
x: _.nodeX,
|
|
1247
|
+
y: _.nodeY,
|
|
1248
|
+
width: _.width,
|
|
1249
|
+
height: _.height
|
|
1250
1250
|
},
|
|
1251
1251
|
contentInfo: {
|
|
1252
1252
|
...p,
|
|
1253
|
-
statusList: m.map((
|
|
1254
|
-
...
|
|
1255
|
-
material:
|
|
1256
|
-
...
|
|
1253
|
+
statusList: m.map((L) => ({
|
|
1254
|
+
...L,
|
|
1255
|
+
material: L.material.type === "LINE" ? {
|
|
1256
|
+
...L.material,
|
|
1257
1257
|
config: {
|
|
1258
|
-
...
|
|
1259
|
-
startX:
|
|
1260
|
-
startY:
|
|
1261
|
-
endX:
|
|
1262
|
-
endY:
|
|
1258
|
+
...R,
|
|
1259
|
+
startX: _.startX,
|
|
1260
|
+
startY: _.startY,
|
|
1261
|
+
endX: _.endX,
|
|
1262
|
+
endY: _.endY
|
|
1263
1263
|
}
|
|
1264
|
-
} :
|
|
1264
|
+
} : L.material
|
|
1265
1265
|
}))
|
|
1266
1266
|
}
|
|
1267
|
-
}), g(null),
|
|
1267
|
+
}), g(null), U.current = null, j.current = null;
|
|
1268
1268
|
};
|
|
1269
|
-
return window.addEventListener("mousemove",
|
|
1270
|
-
window.removeEventListener("mousemove",
|
|
1269
|
+
return window.addEventListener("mousemove", I), window.addEventListener("mouseup", O), () => {
|
|
1270
|
+
window.removeEventListener("mousemove", I), window.removeEventListener("mouseup", O);
|
|
1271
1271
|
};
|
|
1272
|
-
}, [
|
|
1273
|
-
if (
|
|
1274
|
-
const
|
|
1275
|
-
if (
|
|
1276
|
-
const
|
|
1277
|
-
let ae =
|
|
1278
|
-
switch (
|
|
1272
|
+
}, [k, G, R, l.id, i, p, m, n, X]), he(() => {
|
|
1273
|
+
if (!$ || !n) return;
|
|
1274
|
+
const I = (_) => {
|
|
1275
|
+
if (!Y.current) return;
|
|
1276
|
+
const L = X(), me = (_.clientX - $.startX) / L, fe = (_.clientY - $.startY) / L;
|
|
1277
|
+
let ae = $.startWidth, Q = $.startHeight, oe = $.startNodeX, se = $.startNodeY;
|
|
1278
|
+
switch ($.corner) {
|
|
1279
1279
|
case "se":
|
|
1280
|
-
ae = Math.max(20,
|
|
1280
|
+
ae = Math.max(20, $.startWidth + me), Q = Math.max(20, $.startHeight + fe);
|
|
1281
1281
|
break;
|
|
1282
1282
|
case "sw":
|
|
1283
|
-
ae = Math.max(20,
|
|
1283
|
+
ae = Math.max(20, $.startWidth - me), Q = Math.max(20, $.startHeight + fe), oe = $.startNodeX + ($.startWidth - ae);
|
|
1284
1284
|
break;
|
|
1285
1285
|
case "ne":
|
|
1286
|
-
ae = Math.max(20,
|
|
1286
|
+
ae = Math.max(20, $.startWidth + me), Q = Math.max(20, $.startHeight - fe), se = $.startNodeY + ($.startHeight - Q);
|
|
1287
1287
|
break;
|
|
1288
1288
|
case "nw":
|
|
1289
|
-
ae = Math.max(20,
|
|
1289
|
+
ae = Math.max(20, $.startWidth - me), Q = Math.max(20, $.startHeight - fe), oe = $.startNodeX + ($.startWidth - ae), se = $.startNodeY + ($.startHeight - Q);
|
|
1290
1290
|
break;
|
|
1291
1291
|
}
|
|
1292
|
-
|
|
1293
|
-
const ce =
|
|
1292
|
+
T.current = { x: oe, y: se, width: ae, height: Q };
|
|
1293
|
+
const ce = Y.current;
|
|
1294
1294
|
ce.style.left = `${oe}px`, ce.style.top = `${se}px`, ce.style.width = `${ae}px`, ce.style.height = `${Q}px`;
|
|
1295
|
-
},
|
|
1296
|
-
const
|
|
1297
|
-
|
|
1295
|
+
}, O = () => {
|
|
1296
|
+
const _ = T.current;
|
|
1297
|
+
_ && n(l.id, {
|
|
1298
1298
|
normalStyle: {
|
|
1299
1299
|
...i,
|
|
1300
|
-
x:
|
|
1301
|
-
y:
|
|
1302
|
-
width:
|
|
1303
|
-
height:
|
|
1300
|
+
x: _.x,
|
|
1301
|
+
y: _.y,
|
|
1302
|
+
width: _.width,
|
|
1303
|
+
height: _.height
|
|
1304
1304
|
}
|
|
1305
|
-
}), xe(null),
|
|
1305
|
+
}), xe(null), T.current = null;
|
|
1306
1306
|
};
|
|
1307
|
-
return window.addEventListener("mousemove",
|
|
1308
|
-
window.removeEventListener("mousemove",
|
|
1307
|
+
return window.addEventListener("mousemove", I), window.addEventListener("mouseup", O), () => {
|
|
1308
|
+
window.removeEventListener("mousemove", I), window.removeEventListener("mouseup", O);
|
|
1309
1309
|
};
|
|
1310
|
-
}, [
|
|
1311
|
-
const J = V((
|
|
1312
|
-
|
|
1313
|
-
corner:
|
|
1314
|
-
startX:
|
|
1315
|
-
startY:
|
|
1310
|
+
}, [$, n, l.id, i, X]);
|
|
1311
|
+
const J = V((I, O) => {
|
|
1312
|
+
I.stopPropagation(), I.preventDefault(), xe({
|
|
1313
|
+
corner: O,
|
|
1314
|
+
startX: I.clientX,
|
|
1315
|
+
startY: I.clientY,
|
|
1316
1316
|
startWidth: i.width || 100,
|
|
1317
1317
|
startHeight: i.height || 100,
|
|
1318
1318
|
startNodeX: i.x || 0,
|
|
1319
1319
|
startNodeY: i.y || 0
|
|
1320
1320
|
});
|
|
1321
|
-
}, [i.width, i.height, i.x, i.y]),
|
|
1322
|
-
|
|
1323
|
-
const
|
|
1324
|
-
|
|
1325
|
-
startX:
|
|
1326
|
-
startY:
|
|
1321
|
+
}, [i.width, i.height, i.x, i.y]), We = V((I) => {
|
|
1322
|
+
I.stopPropagation(), I.preventDefault();
|
|
1323
|
+
const O = Y.current?.getBoundingClientRect();
|
|
1324
|
+
O && we({
|
|
1325
|
+
startX: I.clientX,
|
|
1326
|
+
startY: I.clientY,
|
|
1327
1327
|
startAngle: i.rotate || 0,
|
|
1328
|
-
centerX:
|
|
1329
|
-
centerY:
|
|
1328
|
+
centerX: O.left + O.width / 2,
|
|
1329
|
+
centerY: O.top + O.height / 2
|
|
1330
1330
|
});
|
|
1331
1331
|
}, [i.rotate]);
|
|
1332
1332
|
he(() => {
|
|
1333
1333
|
if (!ne) return;
|
|
1334
|
-
const
|
|
1335
|
-
const
|
|
1336
|
-
let ae = (Math.atan2(me,
|
|
1337
|
-
if (ae < 0 && (ae += 360), ie.current = ae,
|
|
1334
|
+
const I = (_) => {
|
|
1335
|
+
const L = _.clientX - ne.centerX, me = _.clientY - ne.centerY;
|
|
1336
|
+
let ae = (Math.atan2(me, L) * (180 / Math.PI) + 90) % 360;
|
|
1337
|
+
if (ae < 0 && (ae += 360), ie.current = ae, Y.current) {
|
|
1338
1338
|
const Q = i.transform || "";
|
|
1339
|
-
|
|
1339
|
+
Y.current.style.transform = `rotate(${ae}deg) ${Q}`.trim();
|
|
1340
1340
|
}
|
|
1341
|
-
},
|
|
1342
|
-
const
|
|
1341
|
+
}, O = () => {
|
|
1342
|
+
const _ = ie.current ?? ne.startAngle;
|
|
1343
1343
|
ie.current = null, n && n(l.id, {
|
|
1344
1344
|
normalStyle: {
|
|
1345
1345
|
...i,
|
|
1346
|
-
rotate: Math.round(
|
|
1346
|
+
rotate: Math.round(_)
|
|
1347
1347
|
}
|
|
1348
1348
|
}), we(null);
|
|
1349
1349
|
};
|
|
1350
|
-
return window.addEventListener("mousemove",
|
|
1351
|
-
window.removeEventListener("mousemove",
|
|
1350
|
+
return window.addEventListener("mousemove", I), window.addEventListener("mouseup", O), () => {
|
|
1351
|
+
window.removeEventListener("mousemove", I), window.removeEventListener("mouseup", O);
|
|
1352
1352
|
};
|
|
1353
1353
|
}, [ne, n, l.id, i]);
|
|
1354
|
-
const
|
|
1354
|
+
const F = l.type === "group", dt = {
|
|
1355
1355
|
position: "absolute",
|
|
1356
1356
|
left: i.x || 0,
|
|
1357
1357
|
top: i.y || 0,
|
|
1358
1358
|
width: q,
|
|
1359
1359
|
height: x,
|
|
1360
1360
|
// 群组节点不显示背景和边框,只作为容器
|
|
1361
|
-
background:
|
|
1362
|
-
backgroundImage:
|
|
1361
|
+
background: F ? "transparent" : i.background || "transparent",
|
|
1362
|
+
backgroundImage: F ? void 0 : i.backgroundImage ? `url(${i.backgroundImage})` : void 0,
|
|
1363
1363
|
backgroundSize: "cover",
|
|
1364
1364
|
backgroundPosition: "center",
|
|
1365
1365
|
padding: Array.isArray(i.padding) ? i.padding.join("px ") + "px" : i.padding,
|
|
1366
1366
|
margin: Array.isArray(i.margin) ? i.margin.join("px ") + "px" : i.margin,
|
|
1367
|
-
borderRadius:
|
|
1367
|
+
borderRadius: F ? void 0 : i.borderRadius,
|
|
1368
1368
|
// 线条物料选中时不显示边框,而是通过高亮线条颜色来表示
|
|
1369
1369
|
// 群组节点选中时显示边框,平时不显示
|
|
1370
|
-
border: f && !G ? "2px solid #1890ff" : G ||
|
|
1370
|
+
border: f && !G ? "2px solid #1890ff" : G || F ? "none" : i.border || "1px dashed transparent",
|
|
1371
1371
|
// 线条节点需要捕获点击事件,但由内部 SVG 的透明线处理具体点击区域
|
|
1372
1372
|
pointerEvents: "auto",
|
|
1373
1373
|
opacity: i.opacity ?? 1,
|
|
1374
1374
|
transform: `rotate(${ie.current ?? (i.rotate || 0)}deg) ${i.transform || ""}`.trim(),
|
|
1375
1375
|
transformOrigin: "center center",
|
|
1376
1376
|
zIndex: f ? 1e3 : i.zIndex ?? 1,
|
|
1377
|
-
cursor: u && !
|
|
1377
|
+
cursor: u && !k ? "move" : S ? "pointer" : "default",
|
|
1378
1378
|
boxSizing: "border-box",
|
|
1379
1379
|
// 选中、线条和群组节点使用 visible overflow,避免裁剪手柄
|
|
1380
|
-
overflow: f || G ||
|
|
1381
|
-
},
|
|
1380
|
+
overflow: f || G || F ? "visible" : "hidden"
|
|
1381
|
+
}, et = R ? { x: R.startX || 0, y: R.startY || 0 } : { x: 0, y: 0 }, tt = R ? { x: R.endX || 0, y: R.endY || 0 } : { x: 0, y: 0 };
|
|
1382
1382
|
return /* @__PURE__ */ h(
|
|
1383
1383
|
"div",
|
|
1384
1384
|
{
|
|
1385
|
-
ref:
|
|
1385
|
+
ref: Y,
|
|
1386
1386
|
"data-node-id": l.id,
|
|
1387
|
-
style:
|
|
1388
|
-
onClick: (
|
|
1387
|
+
style: dt,
|
|
1388
|
+
onClick: (I) => {
|
|
1389
1389
|
console.log("NodeRenderer onClick", l.id, "isClickable:", S);
|
|
1390
|
-
const
|
|
1391
|
-
S &&
|
|
1390
|
+
const O = b.current;
|
|
1391
|
+
S && O && !k && !$ && !ne && (I.stopPropagation(), O(I));
|
|
1392
1392
|
},
|
|
1393
|
-
onMouseDown: (
|
|
1394
|
-
u && r && !
|
|
1393
|
+
onMouseDown: (I) => {
|
|
1394
|
+
u && r && !k && r(I);
|
|
1395
1395
|
},
|
|
1396
1396
|
children: [
|
|
1397
|
-
f && !G && !
|
|
1397
|
+
f && !G && !F && /* @__PURE__ */ h(Ae, { children: [
|
|
1398
1398
|
/* @__PURE__ */ e(
|
|
1399
1399
|
"div",
|
|
1400
1400
|
{
|
|
1401
1401
|
className: "absolute top-0 left-0 w-3 h-3 bg-blue-500 border-2 border-white rounded-full",
|
|
1402
1402
|
style: { zIndex: 9999, pointerEvents: "auto", cursor: "nw-resize", marginTop: "-6px", marginLeft: "-6px" },
|
|
1403
|
-
onMouseDown: (
|
|
1403
|
+
onMouseDown: (I) => J(I, "nw"),
|
|
1404
1404
|
title: "拖拽调整大小"
|
|
1405
1405
|
}
|
|
1406
1406
|
),
|
|
@@ -1409,7 +1409,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1409
1409
|
{
|
|
1410
1410
|
className: "absolute top-0 right-0 w-3 h-3 bg-blue-500 border-2 border-white rounded-full",
|
|
1411
1411
|
style: { zIndex: 9999, pointerEvents: "auto", cursor: "ne-resize", marginTop: "-6px", marginRight: "-6px" },
|
|
1412
|
-
onMouseDown: (
|
|
1412
|
+
onMouseDown: (I) => J(I, "ne"),
|
|
1413
1413
|
title: "拖拽调整大小"
|
|
1414
1414
|
}
|
|
1415
1415
|
),
|
|
@@ -1418,7 +1418,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1418
1418
|
{
|
|
1419
1419
|
className: "absolute bottom-0 left-0 w-3 h-3 bg-blue-500 border-2 border-white rounded-full",
|
|
1420
1420
|
style: { zIndex: 9999, pointerEvents: "auto", cursor: "sw-resize", marginBottom: "-6px", marginLeft: "-6px" },
|
|
1421
|
-
onMouseDown: (
|
|
1421
|
+
onMouseDown: (I) => J(I, "sw"),
|
|
1422
1422
|
title: "拖拽调整大小"
|
|
1423
1423
|
}
|
|
1424
1424
|
),
|
|
@@ -1427,7 +1427,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1427
1427
|
{
|
|
1428
1428
|
className: "absolute bottom-0 right-0 w-3 h-3 bg-blue-500 border-2 border-white rounded-full",
|
|
1429
1429
|
style: { zIndex: 9999, pointerEvents: "auto", cursor: "se-resize", marginBottom: "-6px", marginRight: "-6px" },
|
|
1430
|
-
onMouseDown: (
|
|
1430
|
+
onMouseDown: (I) => J(I, "se"),
|
|
1431
1431
|
title: "拖拽调整大小"
|
|
1432
1432
|
}
|
|
1433
1433
|
),
|
|
@@ -1436,7 +1436,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1436
1436
|
{
|
|
1437
1437
|
className: "absolute top-0 left-1/2 w-4 h-4 bg-green-500 border-2 border-white rounded-full",
|
|
1438
1438
|
style: { zIndex: 9999, pointerEvents: "auto", cursor: "grab", marginTop: "-20px", transform: "translateX(-50%)", boxShadow: "0 0 4px rgba(0,0,0,0.3)" },
|
|
1439
|
-
onMouseDown: (
|
|
1439
|
+
onMouseDown: (I) => We(I),
|
|
1440
1440
|
title: "拖拽旋转"
|
|
1441
1441
|
}
|
|
1442
1442
|
),
|
|
@@ -1450,21 +1450,21 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1450
1450
|
/* @__PURE__ */ h("div", { className: "absolute -top-6 left-0 bg-blue-500 text-white text-xs px-2 py-0.5 rounded whitespace-nowrap", children: [
|
|
1451
1451
|
l.name,
|
|
1452
1452
|
" ",
|
|
1453
|
-
|
|
1453
|
+
W ? `(${W.name})` : ""
|
|
1454
1454
|
] })
|
|
1455
1455
|
] }),
|
|
1456
|
-
f && G &&
|
|
1456
|
+
f && G && R && n && /* @__PURE__ */ h(Ae, { children: [
|
|
1457
1457
|
/* @__PURE__ */ e(
|
|
1458
1458
|
"div",
|
|
1459
1459
|
{
|
|
1460
1460
|
"data-handle": "start",
|
|
1461
1461
|
className: "absolute w-3 h-3 bg-blue-500 border-2 border-white rounded-full cursor-move z-50",
|
|
1462
1462
|
style: {
|
|
1463
|
-
left:
|
|
1464
|
-
top:
|
|
1463
|
+
left: et.x - 6,
|
|
1464
|
+
top: et.y - 6,
|
|
1465
1465
|
boxShadow: "0 0 4px rgba(0,0,0,0.3)"
|
|
1466
1466
|
},
|
|
1467
|
-
onMouseDown: (
|
|
1467
|
+
onMouseDown: (I) => D(I, "start"),
|
|
1468
1468
|
title: "拖拽调整起点"
|
|
1469
1469
|
}
|
|
1470
1470
|
),
|
|
@@ -1474,37 +1474,37 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1474
1474
|
"data-handle": "end",
|
|
1475
1475
|
className: "absolute w-3 h-3 bg-blue-500 border-2 border-white rounded-full cursor-move z-50",
|
|
1476
1476
|
style: {
|
|
1477
|
-
left:
|
|
1478
|
-
top:
|
|
1477
|
+
left: tt.x - 6,
|
|
1478
|
+
top: tt.y - 6,
|
|
1479
1479
|
boxShadow: "0 0 4px rgba(0,0,0,0.3)"
|
|
1480
1480
|
},
|
|
1481
|
-
onMouseDown: (
|
|
1481
|
+
onMouseDown: (I) => D(I, "end"),
|
|
1482
1482
|
title: "拖拽调整终点"
|
|
1483
1483
|
}
|
|
1484
1484
|
),
|
|
1485
1485
|
/* @__PURE__ */ e("div", { className: "absolute -top-6 left-0 bg-blue-500 text-white text-xs px-2 py-0.5 rounded whitespace-nowrap", children: l.name })
|
|
1486
1486
|
] }),
|
|
1487
|
-
/* @__PURE__ */ e("div", { className: "w-full h-full relative", children: K ? /* @__PURE__ */ e("div", { className: "w-full h-full", children:
|
|
1487
|
+
/* @__PURE__ */ e("div", { className: "w-full h-full relative", children: K ? /* @__PURE__ */ e("div", { className: "w-full h-full", children: _n(K, c, f) }) : F ? null : (
|
|
1488
1488
|
// 只有非群组节点才显示"无状态"
|
|
1489
1489
|
/* @__PURE__ */ e("div", { className: "w-full h-full flex items-center justify-center text-gray-300 text-xs", children: "无状态" })
|
|
1490
1490
|
) }),
|
|
1491
|
-
l.type === "group" && l.children && /* @__PURE__ */ e("div", { className: "absolute inset-0 pointer-events-none", children: l.children.map((
|
|
1492
|
-
|
|
1491
|
+
l.type === "group" && l.children && /* @__PURE__ */ e("div", { className: "absolute inset-0 pointer-events-none", children: l.children.map((I) => /* @__PURE__ */ e("div", { className: "pointer-events-auto", children: /* @__PURE__ */ e(
|
|
1492
|
+
Ht,
|
|
1493
1493
|
{
|
|
1494
|
-
node:
|
|
1494
|
+
node: I,
|
|
1495
1495
|
isSelected: !1,
|
|
1496
1496
|
data: c,
|
|
1497
1497
|
onUpdateNode: n,
|
|
1498
1498
|
scale: a
|
|
1499
1499
|
}
|
|
1500
|
-
) },
|
|
1500
|
+
) }, I.id)) })
|
|
1501
1501
|
]
|
|
1502
1502
|
}
|
|
1503
1503
|
);
|
|
1504
|
-
},
|
|
1504
|
+
}, Ht = Ce.memo(zn, (l, f) => {
|
|
1505
1505
|
const t = l.node, r = f.node, c = t.id === r.id && t.normalStyle.x === r.normalStyle.x && t.normalStyle.y === r.normalStyle.y && t.normalStyle.width === r.normalStyle.width && t.normalStyle.height === r.normalStyle.height, n = t.contentInfo === r.contentInfo, a = l.isSelected === f.isSelected && l.scale === f.scale;
|
|
1506
1506
|
return c && n && a;
|
|
1507
|
-
}),
|
|
1507
|
+
}), On = [
|
|
1508
1508
|
"#1890ff",
|
|
1509
1509
|
"#52c41a",
|
|
1510
1510
|
"#faad14",
|
|
@@ -1521,7 +1521,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1521
1521
|
"#000000",
|
|
1522
1522
|
"#ff4d4f",
|
|
1523
1523
|
"#73d13d"
|
|
1524
|
-
],
|
|
1524
|
+
], je = ({
|
|
1525
1525
|
value: l = "#1890ff",
|
|
1526
1526
|
onChange: f,
|
|
1527
1527
|
onChangeComplete: t
|
|
@@ -1568,7 +1568,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1568
1568
|
border: "1px solid #f0f0f0"
|
|
1569
1569
|
},
|
|
1570
1570
|
children: [
|
|
1571
|
-
/* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(8, 1fr)", gap: 4 }, children:
|
|
1571
|
+
/* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(8, 1fr)", gap: 4 }, children: On.map((d) => /* @__PURE__ */ e(
|
|
1572
1572
|
"div",
|
|
1573
1573
|
{
|
|
1574
1574
|
onClick: () => {
|
|
@@ -1605,7 +1605,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1605
1605
|
}
|
|
1606
1606
|
)
|
|
1607
1607
|
] });
|
|
1608
|
-
}, { TextArea:
|
|
1608
|
+
}, { TextArea: An } = re, jn = ({ defaultTestData: l }) => {
|
|
1609
1609
|
const f = ue(null), t = ue(null), r = ue(null), {
|
|
1610
1610
|
nodes: c,
|
|
1611
1611
|
selectedNodeId: n,
|
|
@@ -1617,57 +1617,57 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1617
1617
|
setCanvasConfig: S,
|
|
1618
1618
|
addNode: u,
|
|
1619
1619
|
selectNode: E,
|
|
1620
|
-
updateNode:
|
|
1621
|
-
removeNode:
|
|
1620
|
+
updateNode: b,
|
|
1621
|
+
removeNode: k,
|
|
1622
1622
|
undo: g,
|
|
1623
|
-
redo:
|
|
1624
|
-
setMode:
|
|
1625
|
-
startLineDrawing:
|
|
1626
|
-
endLineDrawing:
|
|
1627
|
-
cancelLineDrawing:
|
|
1628
|
-
} =
|
|
1623
|
+
redo: U,
|
|
1624
|
+
setMode: j,
|
|
1625
|
+
startLineDrawing: T,
|
|
1626
|
+
endLineDrawing: Y,
|
|
1627
|
+
cancelLineDrawing: $
|
|
1628
|
+
} = Oe();
|
|
1629
1629
|
console.log("selectedNodeId", n);
|
|
1630
1630
|
const [xe, ne] = ee(!1), [, we] = ee({}), ie = ue(a);
|
|
1631
1631
|
he(() => {
|
|
1632
1632
|
ie.current = a;
|
|
1633
1633
|
}, [a]);
|
|
1634
|
-
const
|
|
1634
|
+
const W = ue(!1), K = ue({ x: 0, y: 0 }), G = ue({ x: 0, y: 0, newX: 0, newY: 0 }), R = ue(null), [s, q] = ee({ start: null, end: null, isDrawing: !1 }), [x, X] = ee({ start: null, end: null }), [D, J] = ee([]);
|
|
1635
1635
|
ue(!1);
|
|
1636
|
-
const [
|
|
1636
|
+
const [We, F] = ee(!1), [dt, et] = ee(
|
|
1637
1637
|
JSON.stringify(l, null, 2)
|
|
1638
|
-
), [
|
|
1638
|
+
), [tt, I] = ee(!1), [O, _] = ee(!1), L = V((o, v) => {
|
|
1639
1639
|
if (!t.current) return { x: 0, y: 0 };
|
|
1640
|
-
const N = t.current.getBoundingClientRect(),
|
|
1641
|
-
return { x: Math.round(
|
|
1642
|
-
}, [d.width, d.height]), me = V((o,
|
|
1643
|
-
(o,
|
|
1640
|
+
const N = t.current.getBoundingClientRect(), C = o - N.left, y = v - N.top, M = N.width / d.width, A = N.height / d.height, P = C / M, B = y / A;
|
|
1641
|
+
return { x: Math.round(P), y: Math.round(B) };
|
|
1642
|
+
}, [d.width, d.height]), me = V((o, v) => L(o, v), [L]), fe = V(
|
|
1643
|
+
(o, v, N = !0) => {
|
|
1644
1644
|
if (!i.material) return;
|
|
1645
|
-
const
|
|
1646
|
-
...
|
|
1645
|
+
const C = i.material, y = C.config || {}, M = y.lineWeight || y.thickness || 2, A = Math.min(o.x, v.x), P = Math.min(o.y, v.y), B = Math.round(o.x - A), z = Math.round(o.y - P), le = Math.round(v.x - A), de = Math.round(v.y - P), ve = Math.max(M * 2, 4), _e = Math.max(Math.abs(o.x - v.x), ve), Ee = Math.max(Math.abs(o.y - v.y), ve), at = {
|
|
1646
|
+
...C,
|
|
1647
1647
|
id: H(),
|
|
1648
1648
|
config: {
|
|
1649
|
-
color:
|
|
1650
|
-
lineWeight:
|
|
1651
|
-
thickness:
|
|
1652
|
-
lineType:
|
|
1649
|
+
color: y.color,
|
|
1650
|
+
lineWeight: M,
|
|
1651
|
+
thickness: M,
|
|
1652
|
+
lineType: y.lineType,
|
|
1653
1653
|
startX: B,
|
|
1654
|
-
startY:
|
|
1654
|
+
startY: z,
|
|
1655
1655
|
endX: le,
|
|
1656
1656
|
endY: de
|
|
1657
1657
|
}
|
|
1658
|
-
},
|
|
1658
|
+
}, qt = {
|
|
1659
1659
|
id: H(),
|
|
1660
|
-
name: `${
|
|
1660
|
+
name: `${C.name}_${Date.now()}`,
|
|
1661
1661
|
type: "normal",
|
|
1662
1662
|
normalStyle: {
|
|
1663
|
-
width:
|
|
1664
|
-
height:
|
|
1665
|
-
x:
|
|
1666
|
-
y:
|
|
1663
|
+
width: _e,
|
|
1664
|
+
height: Ee,
|
|
1665
|
+
x: A,
|
|
1666
|
+
y: P,
|
|
1667
1667
|
background: "transparent"
|
|
1668
1668
|
},
|
|
1669
1669
|
contentInfo: {
|
|
1670
|
-
statusList: [
|
|
1670
|
+
statusList: [Ut(at)],
|
|
1671
1671
|
currentStatusId: void 0
|
|
1672
1672
|
},
|
|
1673
1673
|
controlInfo: {
|
|
@@ -1677,17 +1677,17 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1677
1677
|
isSelectable: !0
|
|
1678
1678
|
}
|
|
1679
1679
|
};
|
|
1680
|
-
if (u(
|
|
1681
|
-
const
|
|
1680
|
+
if (u(qt, !1), N) {
|
|
1681
|
+
const vt = { x: v.x, y: v.y };
|
|
1682
1682
|
q({
|
|
1683
|
-
start:
|
|
1684
|
-
end: { ...
|
|
1683
|
+
start: vt,
|
|
1684
|
+
end: { ...vt },
|
|
1685
1685
|
isDrawing: !0
|
|
1686
1686
|
});
|
|
1687
1687
|
} else
|
|
1688
|
-
q({ start: null, end: null, isDrawing: !1 }),
|
|
1688
|
+
q({ start: null, end: null, isDrawing: !1 }), Y();
|
|
1689
1689
|
},
|
|
1690
|
-
[i.material, u,
|
|
1690
|
+
[i.material, u, Y]
|
|
1691
1691
|
), ae = V(() => {
|
|
1692
1692
|
const o = f.current?.state;
|
|
1693
1693
|
o && m({
|
|
@@ -1697,7 +1697,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1697
1697
|
});
|
|
1698
1698
|
}, [m]), Q = V(
|
|
1699
1699
|
(o) => {
|
|
1700
|
-
|
|
1700
|
+
W.current || a !== "box-select" && (o.target === t.current || o.target.dataset?.canvas === "true") && (E(null), J([]));
|
|
1701
1701
|
},
|
|
1702
1702
|
[E, a]
|
|
1703
1703
|
), oe = V(
|
|
@@ -1705,25 +1705,25 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1705
1705
|
if (o.button === 0) {
|
|
1706
1706
|
if (a === "line-draw" && i.material) {
|
|
1707
1707
|
o.stopPropagation();
|
|
1708
|
-
const
|
|
1709
|
-
s.isDrawing ? s.start && fe(s.start,
|
|
1708
|
+
const v = L(o.clientX, o.clientY);
|
|
1709
|
+
s.isDrawing ? s.start && fe(s.start, v, !0) : q({ start: v, end: v, isDrawing: !0 });
|
|
1710
1710
|
return;
|
|
1711
1711
|
}
|
|
1712
|
-
if (a === "box-select" && !
|
|
1713
|
-
const
|
|
1714
|
-
|
|
1712
|
+
if (a === "box-select" && !O) {
|
|
1713
|
+
const v = me(o.clientX, o.clientY);
|
|
1714
|
+
X({ start: v, end: v }), J([]), o.preventDefault(), o.stopPropagation();
|
|
1715
1715
|
}
|
|
1716
1716
|
}
|
|
1717
1717
|
},
|
|
1718
|
-
[a, i.material, s.isDrawing, s.start,
|
|
1718
|
+
[a, i.material, s.isDrawing, s.start, O, fe, L, me]
|
|
1719
1719
|
), se = V(
|
|
1720
1720
|
(o) => {
|
|
1721
1721
|
if (!(a !== "line-draw" || !i.material) && s.isDrawing && s.start) {
|
|
1722
|
-
const
|
|
1723
|
-
fe(s.start,
|
|
1722
|
+
const v = L(o.clientX, o.clientY);
|
|
1723
|
+
fe(s.start, v, !1);
|
|
1724
1724
|
}
|
|
1725
1725
|
},
|
|
1726
|
-
[a, i.material, s.isDrawing, s.start, fe,
|
|
1726
|
+
[a, i.material, s.isDrawing, s.start, fe, L]
|
|
1727
1727
|
), ce = V((o) => {
|
|
1728
1728
|
o.preventDefault(), o.dataTransfer.dropEffect = "copy", ne(!0);
|
|
1729
1729
|
}, []), Xe = V((o) => {
|
|
@@ -1732,93 +1732,93 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1732
1732
|
(o) => {
|
|
1733
1733
|
if (o.preventDefault(), ne(!1), !(!t.current || a !== "select"))
|
|
1734
1734
|
try {
|
|
1735
|
-
const
|
|
1736
|
-
if (!
|
|
1737
|
-
const N = JSON.parse(
|
|
1738
|
-
u(
|
|
1739
|
-
} catch (
|
|
1740
|
-
console.error("Failed to parse dropped material:",
|
|
1735
|
+
const v = o.dataTransfer.getData("application/json");
|
|
1736
|
+
if (!v) return;
|
|
1737
|
+
const N = JSON.parse(v), C = L(o.clientX, o.clientY), y = C.x - 50, M = C.y - 50, A = Yn(y, M, N);
|
|
1738
|
+
u(A), J([A.id]);
|
|
1739
|
+
} catch (v) {
|
|
1740
|
+
console.error("Failed to parse dropped material:", v);
|
|
1741
1741
|
}
|
|
1742
1742
|
},
|
|
1743
|
-
[a, u,
|
|
1744
|
-
),
|
|
1745
|
-
(o,
|
|
1746
|
-
a !== "select" && a !== "box-select" || !
|
|
1747
|
-
x:
|
|
1748
|
-
y:
|
|
1749
|
-
newX:
|
|
1750
|
-
newY:
|
|
1751
|
-
},
|
|
1743
|
+
[a, u, L]
|
|
1744
|
+
), nt = V(
|
|
1745
|
+
(o, v) => {
|
|
1746
|
+
a !== "select" && a !== "box-select" || !v.controlInfo.isDraggable || (o.stopPropagation(), E(v.id), W.current = !0, K.current = { x: o.clientX, y: o.clientY }, G.current = {
|
|
1747
|
+
x: v.normalStyle.x || 0,
|
|
1748
|
+
y: v.normalStyle.y || 0,
|
|
1749
|
+
newX: v.normalStyle.x || 0,
|
|
1750
|
+
newY: v.normalStyle.y || 0
|
|
1751
|
+
}, R.current = v, o.preventDefault());
|
|
1752
1752
|
},
|
|
1753
1753
|
[a, E]
|
|
1754
1754
|
);
|
|
1755
1755
|
he(() => {
|
|
1756
|
-
const o = (
|
|
1757
|
-
if (
|
|
1756
|
+
const o = (y) => {
|
|
1757
|
+
if (W.current && n && R.current) {
|
|
1758
1758
|
if (!t.current) return;
|
|
1759
|
-
const
|
|
1759
|
+
const M = t.current.getBoundingClientRect(), A = M.width / d.width, P = M.height / d.height, B = y.clientX - K.current.x, z = y.clientY - K.current.y, le = B / A, de = z / P, ve = G.current.x + le, _e = G.current.y + de, Ee = document.querySelector(
|
|
1760
1760
|
`[data-node-id="${n}"]`
|
|
1761
1761
|
);
|
|
1762
|
-
|
|
1762
|
+
Ee && (Ee.style.left = `${ve}px`, Ee.style.top = `${_e}px`), G.current.newX = ve, G.current.newY = _e;
|
|
1763
1763
|
}
|
|
1764
1764
|
if (a === "box-select" && x.start) {
|
|
1765
|
-
const
|
|
1766
|
-
|
|
1765
|
+
const M = me(y.clientX, y.clientY);
|
|
1766
|
+
X((A) => ({ ...A, end: M }));
|
|
1767
1767
|
}
|
|
1768
1768
|
if (a === "line-draw" && s.isDrawing) {
|
|
1769
|
-
const
|
|
1770
|
-
q((
|
|
1769
|
+
const M = L(y.clientX, y.clientY);
|
|
1770
|
+
q((A) => ({ ...A, end: M }));
|
|
1771
1771
|
}
|
|
1772
|
-
},
|
|
1773
|
-
if (
|
|
1774
|
-
const
|
|
1775
|
-
|
|
1772
|
+
}, v = () => {
|
|
1773
|
+
if (W.current && n && R.current) {
|
|
1774
|
+
const y = Oe.getState(), M = G.current.newX ?? G.current.x, A = G.current.newY ?? G.current.y;
|
|
1775
|
+
y.updateNode(n, {
|
|
1776
1776
|
normalStyle: {
|
|
1777
|
-
...
|
|
1778
|
-
x:
|
|
1779
|
-
y:
|
|
1777
|
+
...R.current.normalStyle,
|
|
1778
|
+
x: M,
|
|
1779
|
+
y: A
|
|
1780
1780
|
}
|
|
1781
1781
|
});
|
|
1782
1782
|
}
|
|
1783
|
-
if (
|
|
1784
|
-
const
|
|
1785
|
-
const le =
|
|
1786
|
-
return
|
|
1787
|
-
}).map((
|
|
1788
|
-
J(B),
|
|
1783
|
+
if (W.current = !1, R.current = null, we({}), a === "box-select" && x.start && x.end) {
|
|
1784
|
+
const y = Math.min(x.start.x, x.end.x), M = Math.max(x.start.x, x.end.x), A = Math.min(x.start.y, x.end.y), P = Math.max(x.start.y, x.end.y), B = c.filter((z) => {
|
|
1785
|
+
const le = z.normalStyle.x || 0, de = z.normalStyle.y || 0, ve = z.normalStyle.width || 0, _e = z.normalStyle.height || 0, Ee = le + ve / 2, at = de + _e / 2;
|
|
1786
|
+
return Ee >= y && Ee <= M && at >= A && at <= P;
|
|
1787
|
+
}).map((z) => z.id);
|
|
1788
|
+
J(B), X({ start: null, end: null });
|
|
1789
1789
|
}
|
|
1790
|
-
}, N = (
|
|
1791
|
-
|
|
1792
|
-
},
|
|
1793
|
-
|
|
1790
|
+
}, N = (y) => {
|
|
1791
|
+
y.key === "Escape" && a === "line-draw" && (q({ start: null, end: null, isDrawing: !1 }), $()), y.key === "Delete" && (n ? k(n) : D.length > 0 && (D.forEach((M) => k(M)), J([]))), y.ctrlKey && y.key === "z" && (y.preventDefault(), g()), y.ctrlKey && y.key === "y" && (y.preventDefault(), U()), y.key === " " && !O && (y.preventDefault(), _(!0));
|
|
1792
|
+
}, C = (y) => {
|
|
1793
|
+
y.key === " " && O && _(!1);
|
|
1794
1794
|
};
|
|
1795
|
-
return window.addEventListener("mousemove", o), window.addEventListener("mouseup",
|
|
1796
|
-
window.removeEventListener("mousemove", o), window.removeEventListener("mouseup",
|
|
1795
|
+
return window.addEventListener("mousemove", o), window.addEventListener("mouseup", v), window.addEventListener("keydown", N), window.addEventListener("keyup", C), () => {
|
|
1796
|
+
window.removeEventListener("mousemove", o), window.removeEventListener("mouseup", v), window.removeEventListener("keydown", N), window.removeEventListener("keyup", C);
|
|
1797
1797
|
};
|
|
1798
1798
|
}, [
|
|
1799
1799
|
n,
|
|
1800
1800
|
x,
|
|
1801
1801
|
a,
|
|
1802
1802
|
s.isDrawing,
|
|
1803
|
-
|
|
1803
|
+
D,
|
|
1804
1804
|
c,
|
|
1805
1805
|
d.width,
|
|
1806
1806
|
d.height,
|
|
1807
|
-
|
|
1807
|
+
k,
|
|
1808
1808
|
g,
|
|
1809
|
-
|
|
1810
|
-
|
|
1809
|
+
O,
|
|
1810
|
+
U,
|
|
1811
|
+
$,
|
|
1811
1812
|
L,
|
|
1812
|
-
D,
|
|
1813
1813
|
me,
|
|
1814
1814
|
J
|
|
1815
1815
|
]);
|
|
1816
|
-
const
|
|
1817
|
-
const o =
|
|
1816
|
+
const lt = V(() => {
|
|
1817
|
+
const o = D.length > 0 ? D.map((N) => c.find((C) => C.id === N)).filter(Boolean) : n ? [c.find((N) => N.id === n)].filter(Boolean) : [];
|
|
1818
1818
|
if (o.length === 0) return;
|
|
1819
|
-
const
|
|
1819
|
+
const v = [];
|
|
1820
1820
|
o.forEach((N) => {
|
|
1821
|
-
const
|
|
1821
|
+
const C = {
|
|
1822
1822
|
...N,
|
|
1823
1823
|
id: H(),
|
|
1824
1824
|
name: `${N.name}_副本`,
|
|
@@ -1828,50 +1828,50 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1828
1828
|
y: (N.normalStyle.y || 0) + 20
|
|
1829
1829
|
}
|
|
1830
1830
|
};
|
|
1831
|
-
u(
|
|
1832
|
-
}),
|
|
1833
|
-
}, [n,
|
|
1834
|
-
if (
|
|
1831
|
+
u(C), v.push(C.id);
|
|
1832
|
+
}), v.length === 1 ? E(v[0]) : J(v);
|
|
1833
|
+
}, [n, D, c, u, E, J]), rt = V(() => {
|
|
1834
|
+
if (D.length < 2) return;
|
|
1835
1835
|
const o = [];
|
|
1836
|
-
for (let
|
|
1837
|
-
const B =
|
|
1838
|
-
if (
|
|
1839
|
-
if (
|
|
1840
|
-
|
|
1836
|
+
for (let P = 0; P < D.length; P++) {
|
|
1837
|
+
const B = D[P], z = c.find((le) => le.id === B);
|
|
1838
|
+
if (z) {
|
|
1839
|
+
if (z?.type === "group") {
|
|
1840
|
+
z.children.forEach((de) => o.push({
|
|
1841
1841
|
...de,
|
|
1842
1842
|
normalStyle: {
|
|
1843
1843
|
...de.normalStyle,
|
|
1844
|
-
x: (
|
|
1845
|
-
y: (
|
|
1844
|
+
x: (z.normalStyle.x || 0) + (de.normalStyle.x || 0),
|
|
1845
|
+
y: (z.normalStyle.y || 0) + (de.normalStyle.y || 0)
|
|
1846
1846
|
}
|
|
1847
|
-
})),
|
|
1847
|
+
})), k(B);
|
|
1848
1848
|
continue;
|
|
1849
1849
|
}
|
|
1850
|
-
o.push(
|
|
1850
|
+
o.push(z);
|
|
1851
1851
|
}
|
|
1852
1852
|
}
|
|
1853
1853
|
if (o.length < 2) return;
|
|
1854
|
-
let
|
|
1855
|
-
o.forEach((
|
|
1856
|
-
const B =
|
|
1857
|
-
|
|
1854
|
+
let v = 1 / 0, N = 1 / 0, C = -1 / 0, y = -1 / 0;
|
|
1855
|
+
o.forEach((P) => {
|
|
1856
|
+
const B = P.normalStyle.x || 0, z = P.normalStyle.y || 0, le = P.normalStyle.width || 0, de = P.normalStyle.height || 0;
|
|
1857
|
+
v = Math.min(v, B), N = Math.min(N, z), C = Math.max(C, B + le), y = Math.max(y, z + de);
|
|
1858
1858
|
});
|
|
1859
|
-
const
|
|
1860
|
-
...
|
|
1859
|
+
const M = o.map((P) => ({
|
|
1860
|
+
...P,
|
|
1861
1861
|
normalStyle: {
|
|
1862
|
-
...
|
|
1863
|
-
x: (
|
|
1864
|
-
y: (
|
|
1862
|
+
...P.normalStyle,
|
|
1863
|
+
x: (P.normalStyle.x || 0) - v,
|
|
1864
|
+
y: (P.normalStyle.y || 0) - N
|
|
1865
1865
|
}
|
|
1866
|
-
})),
|
|
1866
|
+
})), A = {
|
|
1867
1867
|
id: H(),
|
|
1868
1868
|
name: `群组_${Date.now()}`,
|
|
1869
1869
|
type: "group",
|
|
1870
1870
|
normalStyle: {
|
|
1871
|
-
x:
|
|
1871
|
+
x: v,
|
|
1872
1872
|
y: N,
|
|
1873
|
-
width:
|
|
1874
|
-
height:
|
|
1873
|
+
width: C - v,
|
|
1874
|
+
height: y - N,
|
|
1875
1875
|
background: "transparent"
|
|
1876
1876
|
},
|
|
1877
1877
|
contentInfo: {
|
|
@@ -1884,239 +1884,253 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
1884
1884
|
isResizable: !0,
|
|
1885
1885
|
isSelectable: !0
|
|
1886
1886
|
},
|
|
1887
|
-
children:
|
|
1887
|
+
children: M
|
|
1888
1888
|
};
|
|
1889
|
-
|
|
1890
|
-
}, [
|
|
1891
|
-
const o =
|
|
1892
|
-
o.length !== 0 && (o.forEach((
|
|
1893
|
-
if (!
|
|
1894
|
-
const N =
|
|
1895
|
-
...
|
|
1889
|
+
D.forEach((P) => k(P)), u(A), J([]), E(A.id);
|
|
1890
|
+
}, [D, c, k, u, E]), Fe = V(() => {
|
|
1891
|
+
const o = D.length > 0 ? D.map((v) => c.find((N) => N.id === v)).filter((v) => !!v && v.type === "group") : n ? [c.find((v) => v.id === n)].filter((v) => !!v && v.type === "group") : [];
|
|
1892
|
+
o.length !== 0 && (o.forEach((v) => {
|
|
1893
|
+
if (!v.children || v.children.length === 0) return;
|
|
1894
|
+
const N = v.children.map((C) => ({
|
|
1895
|
+
...C,
|
|
1896
1896
|
normalStyle: {
|
|
1897
|
-
...
|
|
1898
|
-
x: (
|
|
1899
|
-
y: (
|
|
1897
|
+
...C.normalStyle,
|
|
1898
|
+
x: (v.normalStyle.x || 0) + (C.normalStyle.x || 0),
|
|
1899
|
+
y: (v.normalStyle.y || 0) + (C.normalStyle.y || 0)
|
|
1900
1900
|
}
|
|
1901
1901
|
}));
|
|
1902
|
-
|
|
1902
|
+
k(v.id), N.forEach((C) => u(C));
|
|
1903
1903
|
}), J([]), E(null));
|
|
1904
|
-
}, [n,
|
|
1904
|
+
}, [n, D, c, k, u, E, J]), Te = V(
|
|
1905
1905
|
(o) => {
|
|
1906
|
-
if (
|
|
1907
|
-
const
|
|
1908
|
-
if (
|
|
1909
|
-
let N = 1 / 0,
|
|
1910
|
-
|
|
1911
|
-
const
|
|
1912
|
-
N = Math.min(N,
|
|
1906
|
+
if (D.length < 2) return;
|
|
1907
|
+
const v = D.map((B) => c.find((z) => z.id === B)).filter((B) => !!B && B.type !== "group");
|
|
1908
|
+
if (v.length < 2) return;
|
|
1909
|
+
let N = 1 / 0, C = -1 / 0, y = 1 / 0, M = -1 / 0;
|
|
1910
|
+
v.forEach((B) => {
|
|
1911
|
+
const z = B.normalStyle.x || 0, le = B.normalStyle.y || 0;
|
|
1912
|
+
N = Math.min(N, z), C = Math.max(C, z), y = Math.min(y, le), M = Math.max(M, le);
|
|
1913
1913
|
});
|
|
1914
|
-
const
|
|
1914
|
+
const A = [...v].sort((B, z) => o === "horizontal" ? (B.normalStyle.x || 0) - (z.normalStyle.x || 0) : (B.normalStyle.y || 0) - (z.normalStyle.y || 0)), P = A.length;
|
|
1915
1915
|
if (o === "horizontal") {
|
|
1916
|
-
const
|
|
1917
|
-
|
|
1918
|
-
const ve = N +
|
|
1919
|
-
|
|
1916
|
+
const z = (C - N) / (P - 1);
|
|
1917
|
+
A.forEach((le, de) => {
|
|
1918
|
+
const ve = N + z * de;
|
|
1919
|
+
b(le.id, {
|
|
1920
1920
|
normalStyle: { ...le.normalStyle, x: ve }
|
|
1921
1921
|
});
|
|
1922
1922
|
});
|
|
1923
1923
|
} else {
|
|
1924
|
-
const
|
|
1925
|
-
|
|
1926
|
-
const ve =
|
|
1927
|
-
|
|
1924
|
+
const z = (M - y) / (P - 1);
|
|
1925
|
+
A.forEach((le, de) => {
|
|
1926
|
+
const ve = y + z * de;
|
|
1927
|
+
b(le.id, {
|
|
1928
1928
|
normalStyle: { ...le.normalStyle, y: ve }
|
|
1929
1929
|
});
|
|
1930
1930
|
});
|
|
1931
1931
|
}
|
|
1932
1932
|
},
|
|
1933
|
-
[
|
|
1934
|
-
), ge =
|
|
1933
|
+
[D, c, b]
|
|
1934
|
+
), ge = (o) => {
|
|
1935
|
+
const v = o.contentInfo.statusList.find(
|
|
1936
|
+
(N) => N.material.type === "LINE"
|
|
1937
|
+
);
|
|
1938
|
+
return v ? v.material.config : null;
|
|
1939
|
+
}, Re = V(
|
|
1935
1940
|
(o) => {
|
|
1936
|
-
if (
|
|
1937
|
-
const
|
|
1941
|
+
if (D.length < 2) return;
|
|
1942
|
+
const v = Oe.getState(), N = D.map((y) => c.find((M) => M.id === y)).filter((y) => !!y);
|
|
1938
1943
|
if (N.length < 2) return;
|
|
1939
|
-
let
|
|
1944
|
+
let C = 0;
|
|
1940
1945
|
switch (o) {
|
|
1941
1946
|
case "left":
|
|
1942
|
-
|
|
1947
|
+
C = Math.min(...N.map((y) => {
|
|
1948
|
+
const M = ge(y);
|
|
1949
|
+
return M ? (y.normalStyle.x || 0) + (M.startX || 0) : y.normalStyle.x || 0;
|
|
1950
|
+
}));
|
|
1943
1951
|
break;
|
|
1944
1952
|
case "right":
|
|
1945
|
-
|
|
1946
|
-
|
|
1947
|
-
|
|
1953
|
+
C = Math.max(...N.map((y) => {
|
|
1954
|
+
const M = ge(y);
|
|
1955
|
+
return M ? (y.normalStyle.x || 0) + (M.endX || 0) : (y.normalStyle.x || 0) + (y.normalStyle.width || 0);
|
|
1956
|
+
}));
|
|
1948
1957
|
break;
|
|
1949
1958
|
case "top":
|
|
1950
|
-
|
|
1959
|
+
C = Math.min(...N.map((y) => {
|
|
1960
|
+
const M = ge(y);
|
|
1961
|
+
return M ? (y.normalStyle.y || 0) + (M.startY || 0) : y.normalStyle.y || 0;
|
|
1962
|
+
}));
|
|
1951
1963
|
break;
|
|
1952
1964
|
case "bottom":
|
|
1953
|
-
|
|
1954
|
-
|
|
1955
|
-
|
|
1965
|
+
C = Math.max(...N.map((y) => {
|
|
1966
|
+
const M = ge(y);
|
|
1967
|
+
return M ? (y.normalStyle.y || 0) + (M.endY || 0) : (y.normalStyle.y || 0) + (y.normalStyle.height || 0);
|
|
1968
|
+
}));
|
|
1956
1969
|
break;
|
|
1957
1970
|
}
|
|
1958
|
-
N.forEach((
|
|
1959
|
-
let
|
|
1971
|
+
N.forEach((y) => {
|
|
1972
|
+
let M = y.normalStyle.x || 0, A = y.normalStyle.y || 0;
|
|
1973
|
+
const P = ge(y);
|
|
1960
1974
|
switch (o) {
|
|
1961
1975
|
case "left":
|
|
1962
|
-
P =
|
|
1976
|
+
P ? M = C - (P.startX || 0) : M = C;
|
|
1963
1977
|
break;
|
|
1964
1978
|
case "right":
|
|
1965
|
-
P =
|
|
1979
|
+
P ? M = C - (P.endX || 0) : M = C - (y.normalStyle.width || 0);
|
|
1966
1980
|
break;
|
|
1967
1981
|
case "top":
|
|
1968
|
-
|
|
1982
|
+
P ? A = C - (P.startY || 0) : A = C;
|
|
1969
1983
|
break;
|
|
1970
1984
|
case "bottom":
|
|
1971
|
-
|
|
1985
|
+
P ? A = C - (P.endY || 0) : A = C - (y.normalStyle.height || 0);
|
|
1972
1986
|
break;
|
|
1973
1987
|
}
|
|
1974
|
-
|
|
1975
|
-
normalStyle: { ...
|
|
1988
|
+
v.updateNode(y.id, {
|
|
1989
|
+
normalStyle: { ...y.normalStyle, x: M, y: A }
|
|
1976
1990
|
});
|
|
1977
1991
|
});
|
|
1978
1992
|
},
|
|
1979
|
-
[
|
|
1980
|
-
),
|
|
1993
|
+
[D, c]
|
|
1994
|
+
), Ue = [
|
|
1981
1995
|
{
|
|
1982
|
-
icon: /* @__PURE__ */ e(
|
|
1996
|
+
icon: /* @__PURE__ */ e(un, {}),
|
|
1983
1997
|
title: "选择模式",
|
|
1984
1998
|
active: a === "select",
|
|
1985
1999
|
onClick: () => {
|
|
1986
|
-
|
|
2000
|
+
j("select");
|
|
1987
2001
|
}
|
|
1988
2002
|
},
|
|
1989
2003
|
{
|
|
1990
|
-
icon: /* @__PURE__ */ e(
|
|
2004
|
+
icon: /* @__PURE__ */ e(bt, {}),
|
|
1991
2005
|
title: "框选模式",
|
|
1992
2006
|
active: a === "box-select",
|
|
1993
2007
|
onClick: () => {
|
|
1994
|
-
|
|
2008
|
+
j("box-select"), J([]);
|
|
1995
2009
|
}
|
|
1996
2010
|
},
|
|
1997
2011
|
{
|
|
1998
|
-
icon: /* @__PURE__ */ e(
|
|
2012
|
+
icon: /* @__PURE__ */ e(hn, {}),
|
|
1999
2013
|
title: "拖拽模式",
|
|
2000
2014
|
active: a === "drag",
|
|
2001
2015
|
onClick: () => {
|
|
2002
|
-
|
|
2016
|
+
j("drag");
|
|
2003
2017
|
}
|
|
2004
2018
|
},
|
|
2005
2019
|
{
|
|
2006
|
-
icon: /* @__PURE__ */ e(
|
|
2020
|
+
icon: /* @__PURE__ */ e(pt, {}),
|
|
2007
2021
|
title: "线条绘制",
|
|
2008
2022
|
active: a === "line-draw",
|
|
2009
2023
|
onClick: () => {
|
|
2010
|
-
|
|
2024
|
+
j("line-draw");
|
|
2011
2025
|
}
|
|
2012
2026
|
},
|
|
2013
2027
|
{
|
|
2014
|
-
icon: /* @__PURE__ */ e(
|
|
2028
|
+
icon: /* @__PURE__ */ e(mn, {}),
|
|
2015
2029
|
title: "预览模式",
|
|
2016
2030
|
active: a === "preview",
|
|
2017
2031
|
onClick: () => {
|
|
2018
|
-
|
|
2032
|
+
j("preview");
|
|
2019
2033
|
}
|
|
2020
2034
|
}
|
|
2021
|
-
],
|
|
2035
|
+
], He = Pt(
|
|
2022
2036
|
() => [
|
|
2023
|
-
{ icon: /* @__PURE__ */ e(
|
|
2024
|
-
{ icon: /* @__PURE__ */ e(
|
|
2037
|
+
{ icon: /* @__PURE__ */ e(Zt, {}), title: "撤销 (Ctrl+Z)", onClick: g },
|
|
2038
|
+
{ icon: /* @__PURE__ */ e(Jt, {}), title: "重做 (Ctrl+Y)", onClick: U },
|
|
2025
2039
|
{
|
|
2026
|
-
icon: /* @__PURE__ */ e(
|
|
2040
|
+
icon: /* @__PURE__ */ e(zt, {}),
|
|
2027
2041
|
title: "复制节点",
|
|
2028
|
-
disabled: !n &&
|
|
2029
|
-
onClick:
|
|
2042
|
+
disabled: !n && D.length === 0,
|
|
2043
|
+
onClick: lt
|
|
2030
2044
|
},
|
|
2031
2045
|
{
|
|
2032
|
-
icon: /* @__PURE__ */ e(
|
|
2046
|
+
icon: /* @__PURE__ */ e(bt, {}),
|
|
2033
2047
|
title: "组合选中节点",
|
|
2034
|
-
disabled:
|
|
2035
|
-
onClick:
|
|
2048
|
+
disabled: D.length < 2,
|
|
2049
|
+
onClick: rt
|
|
2036
2050
|
},
|
|
2037
2051
|
{
|
|
2038
|
-
icon: /* @__PURE__ */ e(
|
|
2052
|
+
icon: /* @__PURE__ */ e(Kt, {}),
|
|
2039
2053
|
title: "解除组合",
|
|
2040
|
-
disabled: !n &&
|
|
2041
|
-
onClick:
|
|
2054
|
+
disabled: !n && D.length === 0,
|
|
2055
|
+
onClick: Fe
|
|
2042
2056
|
},
|
|
2043
2057
|
{
|
|
2044
|
-
icon: /* @__PURE__ */ e(
|
|
2058
|
+
icon: /* @__PURE__ */ e(Qt, {}),
|
|
2045
2059
|
title: "左对齐",
|
|
2046
|
-
disabled:
|
|
2047
|
-
onClick: () =>
|
|
2060
|
+
disabled: D.length < 2,
|
|
2061
|
+
onClick: () => Re("left")
|
|
2048
2062
|
},
|
|
2049
2063
|
{
|
|
2050
|
-
icon: /* @__PURE__ */ e(
|
|
2064
|
+
icon: /* @__PURE__ */ e(en, {}),
|
|
2051
2065
|
title: "右对齐",
|
|
2052
|
-
disabled:
|
|
2053
|
-
onClick: () =>
|
|
2066
|
+
disabled: D.length < 2,
|
|
2067
|
+
onClick: () => Re("right")
|
|
2054
2068
|
},
|
|
2055
2069
|
{
|
|
2056
|
-
icon: /* @__PURE__ */ e(
|
|
2070
|
+
icon: /* @__PURE__ */ e(tn, {}),
|
|
2057
2071
|
title: "上对齐",
|
|
2058
|
-
disabled:
|
|
2059
|
-
onClick: () =>
|
|
2072
|
+
disabled: D.length < 2,
|
|
2073
|
+
onClick: () => Re("top")
|
|
2060
2074
|
},
|
|
2061
2075
|
{
|
|
2062
|
-
icon: /* @__PURE__ */ e(
|
|
2076
|
+
icon: /* @__PURE__ */ e(nn, {}),
|
|
2063
2077
|
title: "下对齐",
|
|
2064
|
-
disabled:
|
|
2065
|
-
onClick: () =>
|
|
2078
|
+
disabled: D.length < 2,
|
|
2079
|
+
onClick: () => Re("bottom")
|
|
2066
2080
|
},
|
|
2067
2081
|
{
|
|
2068
|
-
icon: /* @__PURE__ */ e(
|
|
2082
|
+
icon: /* @__PURE__ */ e(ln, {}),
|
|
2069
2083
|
title: "水平分布",
|
|
2070
|
-
disabled:
|
|
2084
|
+
disabled: D.length < 2,
|
|
2071
2085
|
onClick: () => Te("horizontal")
|
|
2072
2086
|
},
|
|
2073
2087
|
{
|
|
2074
|
-
icon: /* @__PURE__ */ e(
|
|
2088
|
+
icon: /* @__PURE__ */ e(rn, {}),
|
|
2075
2089
|
title: "垂直分布",
|
|
2076
|
-
disabled:
|
|
2090
|
+
disabled: D.length < 2,
|
|
2077
2091
|
onClick: () => Te("vertical")
|
|
2078
2092
|
},
|
|
2079
2093
|
{
|
|
2080
|
-
icon: /* @__PURE__ */ e(
|
|
2094
|
+
icon: /* @__PURE__ */ e(an, {}),
|
|
2081
2095
|
title: "画布配置",
|
|
2082
|
-
onClick: () =>
|
|
2096
|
+
onClick: () => I(!0)
|
|
2083
2097
|
},
|
|
2084
2098
|
{
|
|
2085
|
-
icon: /* @__PURE__ */ e(
|
|
2099
|
+
icon: /* @__PURE__ */ e(on, {}),
|
|
2086
2100
|
title: "数据模拟",
|
|
2087
2101
|
type: "primary",
|
|
2088
|
-
onClick: () =>
|
|
2102
|
+
onClick: () => F(!0)
|
|
2089
2103
|
},
|
|
2090
2104
|
{
|
|
2091
|
-
icon: /* @__PURE__ */ e(
|
|
2105
|
+
icon: /* @__PURE__ */ e(ct, {}),
|
|
2092
2106
|
title: "删除选中 (Delete)",
|
|
2093
|
-
disabled: !n &&
|
|
2107
|
+
disabled: !n && D.length === 0,
|
|
2094
2108
|
onClick: () => {
|
|
2095
|
-
n ?
|
|
2109
|
+
n ? k(n) : D.length > 0 && (D.forEach((o) => k(o)), J([]));
|
|
2096
2110
|
}
|
|
2097
2111
|
}
|
|
2098
2112
|
],
|
|
2099
2113
|
[
|
|
2100
2114
|
g,
|
|
2101
|
-
|
|
2115
|
+
U,
|
|
2102
2116
|
a,
|
|
2103
|
-
|
|
2117
|
+
j,
|
|
2104
2118
|
J,
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2119
|
+
D,
|
|
2120
|
+
rt,
|
|
2121
|
+
Fe,
|
|
2122
|
+
lt,
|
|
2123
|
+
Re,
|
|
2110
2124
|
Te,
|
|
2111
|
-
|
|
2112
|
-
|
|
2125
|
+
I,
|
|
2126
|
+
F,
|
|
2113
2127
|
n,
|
|
2114
|
-
|
|
2128
|
+
k
|
|
2115
2129
|
]
|
|
2116
|
-
),
|
|
2130
|
+
), ke = V(
|
|
2117
2131
|
(o) => {
|
|
2118
|
-
o.preventDefault(), (o.key === "ArrowLeft" || o.key === "ArrowRight" || o.key === "ArrowUp" || o.key === "ArrowDown") &&
|
|
2119
|
-
N &&
|
|
2132
|
+
o.preventDefault(), (o.key === "ArrowLeft" || o.key === "ArrowRight" || o.key === "ArrowUp" || o.key === "ArrowDown") && D.map((N) => c.find((C) => C.id === N)).forEach((N) => {
|
|
2133
|
+
N && b(N.id, {
|
|
2120
2134
|
normalStyle: {
|
|
2121
2135
|
...N.normalStyle,
|
|
2122
2136
|
x: (N.normalStyle.x || 0) - 2 * (o.key === "ArrowLeft" ? 1 : o.key === "ArrowRight" ? -1 : 0),
|
|
@@ -2125,13 +2139,13 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2125
2139
|
});
|
|
2126
2140
|
});
|
|
2127
2141
|
},
|
|
2128
|
-
[
|
|
2142
|
+
[D, c, b]
|
|
2129
2143
|
);
|
|
2130
|
-
return he(() => (document.addEventListener("keydown",
|
|
2131
|
-
document.removeEventListener("keydown",
|
|
2132
|
-
}), [
|
|
2144
|
+
return he(() => (document.addEventListener("keydown", ke), () => {
|
|
2145
|
+
document.removeEventListener("keydown", ke);
|
|
2146
|
+
}), [ke]), /* @__PURE__ */ h("div", { className: "flex-1 flex flex-col h-full bg-gray-100", children: [
|
|
2133
2147
|
/* @__PURE__ */ h("div", { className: "h-12 bg-white border-b border-gray-200 flex items-center justify-between px-4", children: [
|
|
2134
|
-
/* @__PURE__ */ e(be, { children:
|
|
2148
|
+
/* @__PURE__ */ e(be, { children: Ue.map((o) => /* @__PURE__ */ e(Ye, { title: o.title, children: /* @__PURE__ */ e(
|
|
2135
2149
|
Z,
|
|
2136
2150
|
{
|
|
2137
2151
|
type: o.active ? "primary" : "default",
|
|
@@ -2139,7 +2153,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2139
2153
|
onClick: o.onClick
|
|
2140
2154
|
}
|
|
2141
2155
|
) }, o.title)) }),
|
|
2142
|
-
/* @__PURE__ */ e(be, { children:
|
|
2156
|
+
/* @__PURE__ */ e(be, { children: He.map((o) => /* @__PURE__ */ e(Ye, { title: o.title, children: /* @__PURE__ */ e(
|
|
2143
2157
|
Z,
|
|
2144
2158
|
{
|
|
2145
2159
|
type: o.active ? "primary" : o.type || "default",
|
|
@@ -2150,7 +2164,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2150
2164
|
) }, o.title)) })
|
|
2151
2165
|
] }),
|
|
2152
2166
|
/* @__PURE__ */ e("div", { ref: r, className: "flex-1 relative", children: /* @__PURE__ */ e(
|
|
2153
|
-
|
|
2167
|
+
yn,
|
|
2154
2168
|
{
|
|
2155
2169
|
ref: f,
|
|
2156
2170
|
initialScale: 1,
|
|
@@ -2161,22 +2175,22 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2161
2175
|
onTransformed: ae,
|
|
2162
2176
|
limitToBounds: !1,
|
|
2163
2177
|
centerZoomedOut: !1,
|
|
2164
|
-
panning: { disabled: !
|
|
2178
|
+
panning: { disabled: !O && (a === "select" || a === "line-draw" || a === "box-select"), velocityDisabled: !0 },
|
|
2165
2179
|
wheel: { disabled: !1, step: 0.1 },
|
|
2166
2180
|
pinch: { disabled: !1 },
|
|
2167
2181
|
doubleClick: { disabled: !0 },
|
|
2168
|
-
children: ({ zoomIn: o, zoomOut:
|
|
2182
|
+
children: ({ zoomIn: o, zoomOut: v, resetTransform: N }) => /* @__PURE__ */ h(Ae, { children: [
|
|
2169
2183
|
/* @__PURE__ */ e("div", { className: "absolute bottom-4 right-4 z-10 bg-white rounded-lg shadow-lg p-2", children: /* @__PURE__ */ h(be, { direction: "vertical", children: [
|
|
2170
|
-
/* @__PURE__ */ e(
|
|
2171
|
-
/* @__PURE__ */ e(
|
|
2172
|
-
/* @__PURE__ */ e(
|
|
2184
|
+
/* @__PURE__ */ e(Ye, { title: "放大", children: /* @__PURE__ */ e(Z, { icon: /* @__PURE__ */ e(sn, {}), onClick: () => o() }) }),
|
|
2185
|
+
/* @__PURE__ */ e(Ye, { title: "缩小", children: /* @__PURE__ */ e(Z, { icon: /* @__PURE__ */ e(cn, {}), onClick: () => v() }) }),
|
|
2186
|
+
/* @__PURE__ */ e(Ye, { title: "重置视图", children: /* @__PURE__ */ e(Z, { onClick: () => N(), children: "100%" }) }),
|
|
2173
2187
|
/* @__PURE__ */ h("div", { className: "text-center text-xs text-gray-500", children: [
|
|
2174
2188
|
Math.round(p.scale * 100),
|
|
2175
2189
|
"%"
|
|
2176
2190
|
] })
|
|
2177
2191
|
] }) }),
|
|
2178
2192
|
/* @__PURE__ */ e(
|
|
2179
|
-
|
|
2193
|
+
vn,
|
|
2180
2194
|
{
|
|
2181
2195
|
wrapperStyle: { width: "100%", height: "100%", position: "relative" },
|
|
2182
2196
|
contentStyle: {
|
|
@@ -2191,7 +2205,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2191
2205
|
{
|
|
2192
2206
|
ref: t,
|
|
2193
2207
|
"data-canvas": "true",
|
|
2194
|
-
className: `relative ${xe ? "ring-4 ring-blue-400 ring-opacity-50" : ""} ${a === "line-draw" ? "cursor-crosshair" : ""} ${
|
|
2208
|
+
className: `relative ${xe ? "ring-4 ring-blue-400 ring-opacity-50" : ""} ${a === "line-draw" ? "cursor-crosshair" : ""} ${O ? "cursor-grab" : ""}`,
|
|
2195
2209
|
style: {
|
|
2196
2210
|
width: d.width,
|
|
2197
2211
|
height: d.height,
|
|
@@ -2212,20 +2226,20 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2212
2226
|
/* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("pattern", { id: "grid", width: "20", height: "20", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ e("path", { d: "M 20 0 L 0 0 0 20", fill: "none", stroke: "#f0f0f0", strokeWidth: "1" }) }) }),
|
|
2213
2227
|
/* @__PURE__ */ e("rect", { width: "100%", height: "100%", fill: "url(#grid)" })
|
|
2214
2228
|
] }),
|
|
2215
|
-
c.map((
|
|
2216
|
-
|
|
2229
|
+
c.map((C) => /* @__PURE__ */ e(
|
|
2230
|
+
Ht,
|
|
2217
2231
|
{
|
|
2218
|
-
node:
|
|
2219
|
-
isSelected: n ===
|
|
2232
|
+
node: C,
|
|
2233
|
+
isSelected: n === C.id || D.includes(C.id),
|
|
2220
2234
|
data: l,
|
|
2221
|
-
onClick: (
|
|
2222
|
-
console.log("Node onClick:",
|
|
2235
|
+
onClick: (y) => {
|
|
2236
|
+
console.log("Node onClick:", C.id, "mode:", ie.current), ie.current !== "line-draw" && (y.shiftKey ? (E(C.id), J([...D, C.id])) : (E(C.id), J([C.id])));
|
|
2223
2237
|
},
|
|
2224
|
-
onMouseDown: (
|
|
2225
|
-
onUpdateNode: (
|
|
2238
|
+
onMouseDown: (y) => nt(y, C),
|
|
2239
|
+
onUpdateNode: (y, M) => b(y, M),
|
|
2226
2240
|
scale: p.scale
|
|
2227
2241
|
},
|
|
2228
|
-
`${
|
|
2242
|
+
`${C.id}`
|
|
2229
2243
|
)),
|
|
2230
2244
|
a === "line-draw" && s.isDrawing && s.start && s.end && /* @__PURE__ */ e("svg", { className: "absolute top-0 left-0 pointer-events-none", width: d.width, height: d.height, children: /* @__PURE__ */ e(
|
|
2231
2245
|
"line",
|
|
@@ -2263,17 +2277,17 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2263
2277
|
}
|
|
2264
2278
|
) }),
|
|
2265
2279
|
/* @__PURE__ */ e(
|
|
2266
|
-
|
|
2280
|
+
st,
|
|
2267
2281
|
{
|
|
2268
2282
|
title: "数据模拟",
|
|
2269
|
-
open:
|
|
2270
|
-
onCancel: () =>
|
|
2283
|
+
open: We,
|
|
2284
|
+
onCancel: () => F(!1),
|
|
2271
2285
|
footer: null,
|
|
2272
2286
|
children: /* @__PURE__ */ e(w, { layout: "vertical", children: /* @__PURE__ */ e(w.Item, { label: "测试数据 (JSON)", children: /* @__PURE__ */ e(
|
|
2273
|
-
|
|
2287
|
+
An,
|
|
2274
2288
|
{
|
|
2275
|
-
value:
|
|
2276
|
-
onChange: (o) =>
|
|
2289
|
+
value: dt,
|
|
2290
|
+
onChange: (o) => et(o.target.value),
|
|
2277
2291
|
rows: 10,
|
|
2278
2292
|
placeholder: "输入 JSON 格式的测试数据"
|
|
2279
2293
|
}
|
|
@@ -2281,11 +2295,11 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2281
2295
|
}
|
|
2282
2296
|
),
|
|
2283
2297
|
/* @__PURE__ */ e(
|
|
2284
|
-
|
|
2298
|
+
st,
|
|
2285
2299
|
{
|
|
2286
2300
|
title: "画布配置",
|
|
2287
|
-
open:
|
|
2288
|
-
onCancel: () =>
|
|
2301
|
+
open: tt,
|
|
2302
|
+
onCancel: () => I(!1),
|
|
2289
2303
|
footer: null,
|
|
2290
2304
|
children: /* @__PURE__ */ h(w, { layout: "vertical", children: [
|
|
2291
2305
|
/* @__PURE__ */ e(w.Item, { label: "宽度", children: /* @__PURE__ */ e(
|
|
@@ -2309,7 +2323,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2309
2323
|
}
|
|
2310
2324
|
) }),
|
|
2311
2325
|
/* @__PURE__ */ e(w.Item, { label: "显示网格", children: /* @__PURE__ */ e(
|
|
2312
|
-
|
|
2326
|
+
Qe,
|
|
2313
2327
|
{
|
|
2314
2328
|
checked: d.showGrid !== !1,
|
|
2315
2329
|
onChange: (o) => S({ showGrid: o })
|
|
@@ -2317,7 +2331,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2317
2331
|
) }),
|
|
2318
2332
|
/* @__PURE__ */ e(w.Item, { label: "背景色", children: /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
|
|
2319
2333
|
/* @__PURE__ */ e(
|
|
2320
|
-
|
|
2334
|
+
je,
|
|
2321
2335
|
{
|
|
2322
2336
|
value: d.background || "#ffffff",
|
|
2323
2337
|
onChange: (o) => S({ background: o.toHexString() })
|
|
@@ -2335,20 +2349,20 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2335
2349
|
/* @__PURE__ */ h(w.Item, { label: "背景图片", children: [
|
|
2336
2350
|
/* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
|
|
2337
2351
|
/* @__PURE__ */ e(
|
|
2338
|
-
|
|
2352
|
+
Rt,
|
|
2339
2353
|
{
|
|
2340
2354
|
accept: "image/*",
|
|
2341
2355
|
showUploadList: !1,
|
|
2342
2356
|
beforeUpload: (o) => {
|
|
2343
2357
|
if (!o.type.startsWith("image/"))
|
|
2344
|
-
return
|
|
2358
|
+
return $e.error("只能上传图片文件!"), !1;
|
|
2345
2359
|
const N = new FileReader();
|
|
2346
|
-
return N.onload = (
|
|
2347
|
-
const
|
|
2348
|
-
S({ backgroundImage:
|
|
2360
|
+
return N.onload = (C) => {
|
|
2361
|
+
const y = C.target?.result;
|
|
2362
|
+
S({ backgroundImage: y }), $e.success("背景图片上传成功");
|
|
2349
2363
|
}, N.readAsDataURL(o), !1;
|
|
2350
2364
|
},
|
|
2351
|
-
children: /* @__PURE__ */ e(Z, { icon: /* @__PURE__ */ e(
|
|
2365
|
+
children: /* @__PURE__ */ e(Z, { icon: /* @__PURE__ */ e(gt, {}), children: "上传图片" })
|
|
2352
2366
|
}
|
|
2353
2367
|
),
|
|
2354
2368
|
/* @__PURE__ */ e(
|
|
@@ -2363,7 +2377,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2363
2377
|
d.backgroundImage && /* @__PURE__ */ e(
|
|
2364
2378
|
Z,
|
|
2365
2379
|
{
|
|
2366
|
-
icon: /* @__PURE__ */ e(
|
|
2380
|
+
icon: /* @__PURE__ */ e(dn, {}),
|
|
2367
2381
|
onClick: () => S({ backgroundImage: void 0 }),
|
|
2368
2382
|
danger: !0,
|
|
2369
2383
|
size: "small"
|
|
@@ -2383,7 +2397,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2383
2397
|
}
|
|
2384
2398
|
)
|
|
2385
2399
|
] });
|
|
2386
|
-
}, { Option:
|
|
2400
|
+
}, { Option: ot } = Ie, Wn = ({
|
|
2387
2401
|
material: l,
|
|
2388
2402
|
onSave: f,
|
|
2389
2403
|
bindCodes: t = [],
|
|
@@ -2418,13 +2432,13 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2418
2432
|
});
|
|
2419
2433
|
}, [l.id]);
|
|
2420
2434
|
const p = (u, E) => {
|
|
2421
|
-
i((
|
|
2435
|
+
i((b) => ({ ...b, [u]: E }));
|
|
2422
2436
|
}, d = (u) => {
|
|
2423
|
-
const E = r.find((
|
|
2424
|
-
i((
|
|
2425
|
-
...
|
|
2437
|
+
const E = r.find((k) => k.paramsCode === u), b = E?.unit || "";
|
|
2438
|
+
i((k) => ({
|
|
2439
|
+
...k,
|
|
2426
2440
|
valueSourceCode: u,
|
|
2427
|
-
unit:
|
|
2441
|
+
unit: b,
|
|
2428
2442
|
value: String(E?.value || "")
|
|
2429
2443
|
})), setTimeout(() => {
|
|
2430
2444
|
f({
|
|
@@ -2432,7 +2446,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2432
2446
|
...n,
|
|
2433
2447
|
valueSourceCode: u,
|
|
2434
2448
|
value: String(E?.value || ""),
|
|
2435
|
-
unit:
|
|
2449
|
+
unit: b
|
|
2436
2450
|
}
|
|
2437
2451
|
});
|
|
2438
2452
|
}, 0);
|
|
@@ -2461,7 +2475,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2461
2475
|
(u) => t.includes(u.paramsCode)
|
|
2462
2476
|
);
|
|
2463
2477
|
return /* @__PURE__ */ h("div", { className: "space-y-4", children: [
|
|
2464
|
-
/* @__PURE__ */ e(
|
|
2478
|
+
/* @__PURE__ */ e(De, { style: { marginTop: 0 }, children: "文本内容" }),
|
|
2465
2479
|
/* @__PURE__ */ h(w, { layout: "vertical", children: [
|
|
2466
2480
|
/* @__PURE__ */ e(w.Item, { label: "标签文本 (label)", children: /* @__PURE__ */ e(
|
|
2467
2481
|
re,
|
|
@@ -2541,7 +2555,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2541
2555
|
}
|
|
2542
2556
|
)
|
|
2543
2557
|
] }),
|
|
2544
|
-
/* @__PURE__ */ e(
|
|
2558
|
+
/* @__PURE__ */ e(De, { children: "标签样式" }),
|
|
2545
2559
|
/* @__PURE__ */ h(w, { layout: "vertical", children: [
|
|
2546
2560
|
/* @__PURE__ */ h(be, { children: [
|
|
2547
2561
|
/* @__PURE__ */ e(w.Item, { label: "字体大小", children: /* @__PURE__ */ e(
|
|
@@ -2563,15 +2577,15 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2563
2577
|
},
|
|
2564
2578
|
style: { width: 100 },
|
|
2565
2579
|
children: [
|
|
2566
|
-
/* @__PURE__ */ e(
|
|
2567
|
-
/* @__PURE__ */ e(
|
|
2580
|
+
/* @__PURE__ */ e(ot, { value: "normal", children: "正常" }),
|
|
2581
|
+
/* @__PURE__ */ e(ot, { value: "bold", children: "粗体" })
|
|
2568
2582
|
]
|
|
2569
2583
|
}
|
|
2570
2584
|
) })
|
|
2571
2585
|
] }),
|
|
2572
2586
|
/* @__PURE__ */ e(w.Item, { label: "文字颜色", children: /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
|
|
2573
2587
|
/* @__PURE__ */ e(
|
|
2574
|
-
|
|
2588
|
+
je,
|
|
2575
2589
|
{
|
|
2576
2590
|
value: a.labelColor || "#262626",
|
|
2577
2591
|
onChange: (u) => {
|
|
@@ -2613,7 +2627,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2613
2627
|
)
|
|
2614
2628
|
] }) })
|
|
2615
2629
|
] }),
|
|
2616
|
-
/* @__PURE__ */ e(
|
|
2630
|
+
/* @__PURE__ */ e(De, { children: "值样式" }),
|
|
2617
2631
|
/* @__PURE__ */ h(w, { layout: "vertical", children: [
|
|
2618
2632
|
/* @__PURE__ */ h(be, { children: [
|
|
2619
2633
|
/* @__PURE__ */ e(w.Item, { label: "字体大小", children: /* @__PURE__ */ e(
|
|
@@ -2635,15 +2649,15 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2635
2649
|
},
|
|
2636
2650
|
style: { width: 100 },
|
|
2637
2651
|
children: [
|
|
2638
|
-
/* @__PURE__ */ e(
|
|
2639
|
-
/* @__PURE__ */ e(
|
|
2652
|
+
/* @__PURE__ */ e(ot, { value: "normal", children: "正常" }),
|
|
2653
|
+
/* @__PURE__ */ e(ot, { value: "bold", children: "粗体" })
|
|
2640
2654
|
]
|
|
2641
2655
|
}
|
|
2642
2656
|
) })
|
|
2643
2657
|
] }),
|
|
2644
2658
|
/* @__PURE__ */ e(w.Item, { label: "文字颜色", children: /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
|
|
2645
2659
|
/* @__PURE__ */ e(
|
|
2646
|
-
|
|
2660
|
+
je,
|
|
2647
2661
|
{
|
|
2648
2662
|
value: a.valueColor || "#1890ff",
|
|
2649
2663
|
onChange: (u) => {
|
|
@@ -2686,7 +2700,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2686
2700
|
] }) })
|
|
2687
2701
|
] })
|
|
2688
2702
|
] });
|
|
2689
|
-
},
|
|
2703
|
+
}, Fn = ({
|
|
2690
2704
|
material: l,
|
|
2691
2705
|
onSave: f
|
|
2692
2706
|
}) => {
|
|
@@ -2714,7 +2728,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2714
2728
|
});
|
|
2715
2729
|
};
|
|
2716
2730
|
return /* @__PURE__ */ h("div", { className: "space-y-4", children: [
|
|
2717
|
-
/* @__PURE__ */ e(
|
|
2731
|
+
/* @__PURE__ */ e(De, { style: { marginTop: 0 }, children: "图片属性" }),
|
|
2718
2732
|
/* @__PURE__ */ h(w, { layout: "vertical", children: [
|
|
2719
2733
|
/* @__PURE__ */ e(w.Item, { label: "图片名称", children: /* @__PURE__ */ e(
|
|
2720
2734
|
re,
|
|
@@ -2736,7 +2750,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2736
2750
|
) }),
|
|
2737
2751
|
/* @__PURE__ */ e(w.Item, { label: "填充颜色(基本形状)", children: /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
|
|
2738
2752
|
/* @__PURE__ */ e(
|
|
2739
|
-
|
|
2753
|
+
je,
|
|
2740
2754
|
{
|
|
2741
2755
|
value: r.fillColor || "#1890ff",
|
|
2742
2756
|
onChange: (i) => {
|
|
@@ -2762,7 +2776,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2762
2776
|
] }) }),
|
|
2763
2777
|
/* @__PURE__ */ e(w.Item, { label: "背景颜色", children: /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
|
|
2764
2778
|
/* @__PURE__ */ e(
|
|
2765
|
-
|
|
2779
|
+
je,
|
|
2766
2780
|
{
|
|
2767
2781
|
value: r.backgroundColor || "#1890ff",
|
|
2768
2782
|
onChange: (i) => {
|
|
@@ -2788,7 +2802,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2788
2802
|
] }) })
|
|
2789
2803
|
] })
|
|
2790
2804
|
] });
|
|
2791
|
-
}, { Option:
|
|
2805
|
+
}, { Option: Un } = Ie, Hn = ({
|
|
2792
2806
|
material: l,
|
|
2793
2807
|
onSave: f
|
|
2794
2808
|
}) => {
|
|
@@ -2836,7 +2850,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2836
2850
|
{ value: "dash-dot", label: "画点线", desc: "长划-点交替" }
|
|
2837
2851
|
];
|
|
2838
2852
|
return /* @__PURE__ */ h("div", { className: "space-y-4", children: [
|
|
2839
|
-
/* @__PURE__ */ e(
|
|
2853
|
+
/* @__PURE__ */ e(De, { style: { marginTop: 0 }, children: "起止位置(相对节点)" }),
|
|
2840
2854
|
/* @__PURE__ */ h(w, { layout: "vertical", children: [
|
|
2841
2855
|
/* @__PURE__ */ h("div", { className: "grid grid-cols-2 gap-2", children: [
|
|
2842
2856
|
/* @__PURE__ */ e(w.Item, { label: "起点 X", className: "mb-2", children: /* @__PURE__ */ e(
|
|
@@ -2916,14 +2930,14 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2916
2930
|
)
|
|
2917
2931
|
] }) })
|
|
2918
2932
|
] }),
|
|
2919
|
-
/* @__PURE__ */ e(
|
|
2933
|
+
/* @__PURE__ */ e(De, { children: "线条属性" }),
|
|
2920
2934
|
/* @__PURE__ */ h(w, { layout: "vertical", children: [
|
|
2921
2935
|
/* @__PURE__ */ e(w.Item, { label: "线型", help: "选择线条样式", children: /* @__PURE__ */ e(
|
|
2922
2936
|
Ie,
|
|
2923
2937
|
{
|
|
2924
2938
|
value: r.lineType,
|
|
2925
2939
|
onChange: (i) => n({ lineType: i }),
|
|
2926
|
-
children: a.map((i) => /* @__PURE__ */ e(
|
|
2940
|
+
children: a.map((i) => /* @__PURE__ */ e(Un, { value: i.value, children: /* @__PURE__ */ h("div", { className: "flex flex-col", children: [
|
|
2927
2941
|
/* @__PURE__ */ e("span", { children: i.label }),
|
|
2928
2942
|
/* @__PURE__ */ e("span", { className: "text-xs text-gray-400", children: i.desc })
|
|
2929
2943
|
] }) }, i.value))
|
|
@@ -2941,7 +2955,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2941
2955
|
) }),
|
|
2942
2956
|
/* @__PURE__ */ e(w.Item, { label: "颜色", children: /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
|
|
2943
2957
|
/* @__PURE__ */ e(
|
|
2944
|
-
|
|
2958
|
+
je,
|
|
2945
2959
|
{
|
|
2946
2960
|
value: r.color || "#d9d9d9",
|
|
2947
2961
|
onChange: (i) => n({ color: i.toHexString() })
|
|
@@ -2959,7 +2973,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2959
2973
|
] }) })
|
|
2960
2974
|
] })
|
|
2961
2975
|
] });
|
|
2962
|
-
},
|
|
2976
|
+
}, Gt = ({
|
|
2963
2977
|
material: l,
|
|
2964
2978
|
onSave: f,
|
|
2965
2979
|
bindCodes: t,
|
|
@@ -2968,7 +2982,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2968
2982
|
switch (l.type) {
|
|
2969
2983
|
case "TEXT":
|
|
2970
2984
|
return /* @__PURE__ */ e(
|
|
2971
|
-
|
|
2985
|
+
Wn,
|
|
2972
2986
|
{
|
|
2973
2987
|
material: l,
|
|
2974
2988
|
onSave: f,
|
|
@@ -2977,13 +2991,13 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
2977
2991
|
}
|
|
2978
2992
|
);
|
|
2979
2993
|
case "IMAGE":
|
|
2980
|
-
return /* @__PURE__ */ e(
|
|
2994
|
+
return /* @__PURE__ */ e(Fn, { material: l, onSave: f });
|
|
2981
2995
|
case "LINE":
|
|
2982
|
-
return /* @__PURE__ */ e(
|
|
2996
|
+
return /* @__PURE__ */ e(Hn, { material: l, onSave: f });
|
|
2983
2997
|
default:
|
|
2984
2998
|
return /* @__PURE__ */ e("div", { className: "text-center text-gray-400 py-8", children: "暂不支持编辑此类型的物料" });
|
|
2985
2999
|
}
|
|
2986
|
-
}, { Panel:
|
|
3000
|
+
}, { Panel: Yt } = Ne, { TextArea: Gn } = re, qn = ({
|
|
2987
3001
|
node: l,
|
|
2988
3002
|
updateNode: f,
|
|
2989
3003
|
materials: t
|
|
@@ -3011,24 +3025,24 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3011
3025
|
};
|
|
3012
3026
|
c(m, [...S.contentInfo.statusList, u]);
|
|
3013
3027
|
}, a = (m, S) => {
|
|
3014
|
-
const u = l.children?.find((
|
|
3028
|
+
const u = l.children?.find((b) => b.id === m);
|
|
3015
3029
|
if (!u) return;
|
|
3016
|
-
const E = u.contentInfo.statusList.filter((
|
|
3030
|
+
const E = u.contentInfo.statusList.filter((b) => b.id !== S);
|
|
3017
3031
|
c(m, E);
|
|
3018
3032
|
}, i = (m, S, u) => {
|
|
3019
|
-
const E = l.children?.find((
|
|
3033
|
+
const E = l.children?.find((k) => k.id === m);
|
|
3020
3034
|
if (!E) return;
|
|
3021
|
-
const
|
|
3022
|
-
c(m,
|
|
3035
|
+
const b = E.contentInfo.statusList.map((k) => k.id === S ? { ...k, ...u } : k);
|
|
3036
|
+
c(m, b);
|
|
3023
3037
|
}, p = (m, S, u) => {
|
|
3024
3038
|
const E = l.children?.find((g) => g.id === m);
|
|
3025
3039
|
if (!E) return;
|
|
3026
|
-
const
|
|
3027
|
-
if (
|
|
3028
|
-
const
|
|
3029
|
-
u === "up" &&
|
|
3040
|
+
const b = E.contentInfo.statusList.findIndex((g) => g.id === S);
|
|
3041
|
+
if (b === -1) return;
|
|
3042
|
+
const k = [...E.contentInfo.statusList];
|
|
3043
|
+
u === "up" && b > 0 ? [k[b], k[b - 1]] = [k[b - 1], k[b]] : u === "down" && b < k.length - 1 && ([k[b], k[b + 1]] = [k[b + 1], k[b]]), c(m, k);
|
|
3030
3044
|
}, d = (m, S, u) => {
|
|
3031
|
-
const E = t.find((
|
|
3045
|
+
const E = t.find((b) => b.id === u);
|
|
3032
3046
|
E && i(m, S, {
|
|
3033
3047
|
material: { ...E, id: H() }
|
|
3034
3048
|
});
|
|
@@ -3039,7 +3053,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3039
3053
|
":为每个子节点配置多个状态和绑定"
|
|
3040
3054
|
] }) }),
|
|
3041
3055
|
/* @__PURE__ */ e(Ne, { ghost: !0, children: l.children?.map((m, S) => /* @__PURE__ */ e(
|
|
3042
|
-
|
|
3056
|
+
Yt,
|
|
3043
3057
|
{
|
|
3044
3058
|
header: /* @__PURE__ */ h("div", { className: "flex items-center justify-between w-full pr-4", children: [
|
|
3045
3059
|
/* @__PURE__ */ h("span", { className: "font-medium text-sm", children: [
|
|
@@ -3059,30 +3073,30 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3059
3073
|
{
|
|
3060
3074
|
type: "primary",
|
|
3061
3075
|
size: "small",
|
|
3062
|
-
icon: /* @__PURE__ */ e(
|
|
3076
|
+
icon: /* @__PURE__ */ e(Ot, {}),
|
|
3063
3077
|
onClick: () => n(m.id),
|
|
3064
3078
|
children: "添加状态"
|
|
3065
3079
|
}
|
|
3066
3080
|
)
|
|
3067
3081
|
] }),
|
|
3068
3082
|
m.contentInfo.statusList.length === 0 ? /* @__PURE__ */ e("div", { className: "text-center text-gray-400 py-4 bg-gray-50 rounded-lg", children: "暂无状态,点击上方按钮添加" }) : /* @__PURE__ */ e(Ne, { ghost: !0, children: m.contentInfo.statusList.map((u, E) => /* @__PURE__ */ e(
|
|
3069
|
-
|
|
3083
|
+
Yt,
|
|
3070
3084
|
{
|
|
3071
3085
|
header: /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
|
|
3072
3086
|
/* @__PURE__ */ e("span", { className: "text-xs text-gray-400 w-5", children: E + 1 }),
|
|
3073
3087
|
/* @__PURE__ */ e("span", { className: "font-medium", children: u.name }),
|
|
3074
3088
|
/* @__PURE__ */ e(ye, { color: "default", className: "text-xs", children: u.material.type })
|
|
3075
3089
|
] }),
|
|
3076
|
-
extra: /* @__PURE__ */ h(be, { size: "small", onClick: (
|
|
3090
|
+
extra: /* @__PURE__ */ h(be, { size: "small", onClick: (b) => b.stopPropagation(), children: [
|
|
3077
3091
|
/* @__PURE__ */ e(
|
|
3078
3092
|
Z,
|
|
3079
3093
|
{
|
|
3080
3094
|
type: "text",
|
|
3081
3095
|
size: "small",
|
|
3082
|
-
icon: /* @__PURE__ */ e(
|
|
3096
|
+
icon: /* @__PURE__ */ e(At, {}),
|
|
3083
3097
|
disabled: E === 0,
|
|
3084
|
-
onClick: (
|
|
3085
|
-
|
|
3098
|
+
onClick: (b) => {
|
|
3099
|
+
b.stopPropagation(), p(m.id, u.id, "up");
|
|
3086
3100
|
}
|
|
3087
3101
|
}
|
|
3088
3102
|
),
|
|
@@ -3091,10 +3105,10 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3091
3105
|
{
|
|
3092
3106
|
type: "text",
|
|
3093
3107
|
size: "small",
|
|
3094
|
-
icon: /* @__PURE__ */ e(
|
|
3108
|
+
icon: /* @__PURE__ */ e(jt, {}),
|
|
3095
3109
|
disabled: E === m.contentInfo.statusList.length - 1,
|
|
3096
|
-
onClick: (
|
|
3097
|
-
|
|
3110
|
+
onClick: (b) => {
|
|
3111
|
+
b.stopPropagation(), p(m.id, u.id, "down");
|
|
3098
3112
|
}
|
|
3099
3113
|
}
|
|
3100
3114
|
),
|
|
@@ -3104,9 +3118,9 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3104
3118
|
type: "text",
|
|
3105
3119
|
size: "small",
|
|
3106
3120
|
danger: !0,
|
|
3107
|
-
icon: /* @__PURE__ */ e(
|
|
3108
|
-
onClick: (
|
|
3109
|
-
|
|
3121
|
+
icon: /* @__PURE__ */ e(ct, {}),
|
|
3122
|
+
onClick: (b) => {
|
|
3123
|
+
b.stopPropagation(), a(m.id, u.id);
|
|
3110
3124
|
}
|
|
3111
3125
|
}
|
|
3112
3126
|
)
|
|
@@ -3116,7 +3130,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3116
3130
|
re,
|
|
3117
3131
|
{
|
|
3118
3132
|
value: u.name,
|
|
3119
|
-
onChange: (
|
|
3133
|
+
onChange: (b) => i(m.id, u.id, { name: b.target.value }),
|
|
3120
3134
|
placeholder: "输入状态名称"
|
|
3121
3135
|
}
|
|
3122
3136
|
) }),
|
|
@@ -3126,10 +3140,10 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3126
3140
|
label: "执行表达式",
|
|
3127
3141
|
help: "返回 true 时激活此状态,可使用 data 变量访问绑定数据",
|
|
3128
3142
|
children: /* @__PURE__ */ e(
|
|
3129
|
-
|
|
3143
|
+
Gn,
|
|
3130
3144
|
{
|
|
3131
3145
|
value: u.expression,
|
|
3132
|
-
onChange: (
|
|
3146
|
+
onChange: (b) => i(m.id, u.id, { expression: b.target.value }),
|
|
3133
3147
|
rows: 3,
|
|
3134
3148
|
placeholder: "return true;"
|
|
3135
3149
|
}
|
|
@@ -3141,7 +3155,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3141
3155
|
{
|
|
3142
3156
|
mode: "tags",
|
|
3143
3157
|
value: u.bindCodes || [],
|
|
3144
|
-
onChange: (
|
|
3158
|
+
onChange: (b) => i(m.id, u.id, { bindCodes: b }),
|
|
3145
3159
|
placeholder: "输入数据源 code",
|
|
3146
3160
|
tokenSeparators: [",", " "]
|
|
3147
3161
|
}
|
|
@@ -3155,27 +3169,27 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3155
3169
|
placeholder: "选择新物料",
|
|
3156
3170
|
style: { width: 150 },
|
|
3157
3171
|
value: void 0,
|
|
3158
|
-
onChange: (
|
|
3159
|
-
options: r.map((
|
|
3160
|
-
value:
|
|
3161
|
-
label: `${
|
|
3172
|
+
onChange: (b) => b && d(m.id, u.id, b),
|
|
3173
|
+
options: r.map((b) => ({
|
|
3174
|
+
value: b.id,
|
|
3175
|
+
label: `${b.name} (${b.type})`
|
|
3162
3176
|
}))
|
|
3163
3177
|
}
|
|
3164
3178
|
)
|
|
3165
3179
|
] }) }),
|
|
3166
|
-
/* @__PURE__ */ e(
|
|
3180
|
+
/* @__PURE__ */ e(De, { style: { margin: "12px 0" } }),
|
|
3167
3181
|
/* @__PURE__ */ h("div", { className: "bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
|
|
3168
3182
|
/* @__PURE__ */ h("div", { className: "flex items-center justify-between mb-2", children: [
|
|
3169
3183
|
/* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "物料属性" }),
|
|
3170
3184
|
/* @__PURE__ */ e(ye, { children: u.material.name })
|
|
3171
3185
|
] }),
|
|
3172
3186
|
/* @__PURE__ */ e(
|
|
3173
|
-
|
|
3187
|
+
Gt,
|
|
3174
3188
|
{
|
|
3175
3189
|
material: u.material,
|
|
3176
|
-
onSave: (
|
|
3177
|
-
const
|
|
3178
|
-
i(m.id, u.id, { material:
|
|
3190
|
+
onSave: (b) => {
|
|
3191
|
+
const k = { ...u.material, ...b };
|
|
3192
|
+
i(m.id, u.id, { material: k });
|
|
3179
3193
|
}
|
|
3180
3194
|
}
|
|
3181
3195
|
)
|
|
@@ -3189,7 +3203,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3189
3203
|
m.id
|
|
3190
3204
|
)) })
|
|
3191
3205
|
] });
|
|
3192
|
-
}, { Panel:
|
|
3206
|
+
}, { Panel: Me } = Ne, { TabPane: mt } = _t, { TextArea: Bn } = re, Vn = ({
|
|
3193
3207
|
defaultTestData: l
|
|
3194
3208
|
}) => {
|
|
3195
3209
|
const {
|
|
@@ -3202,12 +3216,12 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3202
3216
|
materials: i,
|
|
3203
3217
|
selectedStatusId: p,
|
|
3204
3218
|
selectStatus: d
|
|
3205
|
-
} =
|
|
3219
|
+
} = Oe(), [m] = w.useForm(), [S, u] = ee("basic"), [E, b] = ee(!1), [k, g] = ee(null), [U, j] = ee({}), T = Ce.useMemo(() => f.find((s) => s.id === t), [f, t]), Y = T?.contentInfo.statusList || [], $ = (s) => {
|
|
3206
3220
|
t && (s.normalStyle && c(t, s.normalStyle), s.name !== void 0 && r(t, { name: s.name }), s.controlInfo && n(t, s.controlInfo));
|
|
3207
3221
|
};
|
|
3208
|
-
console.log(t, "selectedNodeId",
|
|
3209
|
-
|
|
3210
|
-
name:
|
|
3222
|
+
console.log(t, "selectedNodeId", T), he(() => {
|
|
3223
|
+
T && T && (m.setFieldsValue({
|
|
3224
|
+
name: T.name,
|
|
3211
3225
|
normalStyle: {
|
|
3212
3226
|
width: 100,
|
|
3213
3227
|
height: 100,
|
|
@@ -3217,100 +3231,100 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3217
3231
|
background: "transparent",
|
|
3218
3232
|
borderRadius: 0,
|
|
3219
3233
|
opacity: 1,
|
|
3220
|
-
...
|
|
3234
|
+
...T.normalStyle
|
|
3221
3235
|
},
|
|
3222
3236
|
controlInfo: {
|
|
3223
3237
|
isDraggable: !0,
|
|
3224
3238
|
isClickable: !0,
|
|
3225
3239
|
isResizable: !0,
|
|
3226
3240
|
isSelectable: !0,
|
|
3227
|
-
...
|
|
3241
|
+
...T.controlInfo
|
|
3228
3242
|
}
|
|
3229
3243
|
}), d(null));
|
|
3230
|
-
}, [
|
|
3244
|
+
}, [T, d, m]);
|
|
3231
3245
|
const xe = () => {
|
|
3232
|
-
!t || !
|
|
3246
|
+
!t || !T || (g("new"), b(!0));
|
|
3233
3247
|
}, ne = (s) => {
|
|
3234
|
-
if (!t || !
|
|
3248
|
+
if (!t || !T) return;
|
|
3235
3249
|
const q = {
|
|
3236
3250
|
id: H(),
|
|
3237
|
-
name: `${s.name}_状态${
|
|
3238
|
-
expression:
|
|
3251
|
+
name: `${s.name}_状态${Y.length + 1}`,
|
|
3252
|
+
expression: Y.length === 0 ? "return true;" : "return false;",
|
|
3239
3253
|
material: { ...s, id: H() },
|
|
3240
3254
|
bindCodes: []
|
|
3241
3255
|
};
|
|
3242
|
-
if (
|
|
3243
|
-
const x = [
|
|
3256
|
+
if (k === "new") {
|
|
3257
|
+
const x = [...Y, q];
|
|
3244
3258
|
a(t, { statusList: x });
|
|
3245
|
-
} else if (
|
|
3246
|
-
const x =
|
|
3259
|
+
} else if (k) {
|
|
3260
|
+
const x = Y.map((X) => X.id === k ? { ...X, material: { ...s, id: H() } } : X);
|
|
3247
3261
|
a(t, { statusList: x });
|
|
3248
3262
|
}
|
|
3249
|
-
|
|
3263
|
+
b(!1), g(null);
|
|
3250
3264
|
}, we = (s) => {
|
|
3251
|
-
if (!t || !
|
|
3252
|
-
const q =
|
|
3265
|
+
if (!t || !T) return;
|
|
3266
|
+
const q = T.contentInfo.statusList?.filter((x) => x.id !== s) || [];
|
|
3253
3267
|
a(t, { statusList: q }), p === s && d(null);
|
|
3254
3268
|
}, ie = (s, q) => {
|
|
3255
|
-
if (!t || !
|
|
3256
|
-
const x =
|
|
3269
|
+
if (!t || !T) return;
|
|
3270
|
+
const x = T.contentInfo.statusList?.map((X) => X.id === s ? { ...X, ...q } : X) || [];
|
|
3257
3271
|
a(t, { statusList: x });
|
|
3258
|
-
},
|
|
3259
|
-
if (!t || !
|
|
3272
|
+
}, W = (s) => {
|
|
3273
|
+
if (!t || !T) return;
|
|
3260
3274
|
const q = {
|
|
3261
3275
|
...s,
|
|
3262
3276
|
id: H(),
|
|
3263
3277
|
name: `${s.name}_复制`,
|
|
3264
3278
|
expression: "return false;"
|
|
3265
|
-
}, x = [
|
|
3279
|
+
}, x = [...Y, q];
|
|
3266
3280
|
a(t, { statusList: x });
|
|
3267
3281
|
}, K = (s, q) => {
|
|
3268
|
-
if (!t || !
|
|
3269
|
-
const x =
|
|
3282
|
+
if (!t || !T) return;
|
|
3283
|
+
const x = Y.findIndex((D) => D.id === s);
|
|
3270
3284
|
if (x === -1) return;
|
|
3271
|
-
const
|
|
3272
|
-
q === "up" && x > 0 ? [
|
|
3273
|
-
|
|
3274
|
-
|
|
3275
|
-
] : q === "down" && x <
|
|
3276
|
-
|
|
3277
|
-
|
|
3278
|
-
]), a(t, { statusList:
|
|
3285
|
+
const X = [...Y];
|
|
3286
|
+
q === "up" && x > 0 ? [X[x], X[x - 1]] = [
|
|
3287
|
+
X[x - 1],
|
|
3288
|
+
X[x]
|
|
3289
|
+
] : q === "down" && x < X.length - 1 && ([X[x], X[x + 1]] = [
|
|
3290
|
+
X[x + 1],
|
|
3291
|
+
X[x]
|
|
3292
|
+
]), a(t, { statusList: X });
|
|
3279
3293
|
}, G = (s) => {
|
|
3280
|
-
g(s),
|
|
3281
|
-
},
|
|
3282
|
-
if (!t || !
|
|
3283
|
-
const x =
|
|
3284
|
-
...
|
|
3285
|
-
material: { ...
|
|
3286
|
-
} :
|
|
3294
|
+
g(s), b(!0);
|
|
3295
|
+
}, R = (s, q) => {
|
|
3296
|
+
if (!t || !T) return;
|
|
3297
|
+
const x = Y.map((X) => X.id === s ? {
|
|
3298
|
+
...X,
|
|
3299
|
+
material: { ...X.material, ...q }
|
|
3300
|
+
} : X);
|
|
3287
3301
|
a(t, { statusList: x });
|
|
3288
3302
|
};
|
|
3289
|
-
return
|
|
3303
|
+
return T ? /* @__PURE__ */ h("div", { className: "h-full flex flex-col bg-white border-l border-gray-200", children: [
|
|
3290
3304
|
/* @__PURE__ */ h("div", { className: "p-4 border-b border-gray-200", children: [
|
|
3291
3305
|
/* @__PURE__ */ e("h3", { className: "text-lg font-semibold text-gray-800", children: "属性面板" }),
|
|
3292
3306
|
/* @__PURE__ */ e("p", { className: "text-sm text-gray-500", children: "编辑选中节点的属性" })
|
|
3293
3307
|
] }),
|
|
3294
|
-
/* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ h(
|
|
3295
|
-
/* @__PURE__ */ e(
|
|
3308
|
+
/* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ h(_t, { activeKey: S, onChange: u, children: [
|
|
3309
|
+
/* @__PURE__ */ e(mt, { tab: "基础", children: /* @__PURE__ */ h(
|
|
3296
3310
|
w,
|
|
3297
3311
|
{
|
|
3298
3312
|
form: m,
|
|
3299
3313
|
layout: "vertical",
|
|
3300
|
-
onValuesChange:
|
|
3301
|
-
initialValues: { name:
|
|
3314
|
+
onValuesChange: $,
|
|
3315
|
+
initialValues: { name: T.name },
|
|
3302
3316
|
children: [
|
|
3303
3317
|
/* @__PURE__ */ e(w.Item, { label: "节点名称", name: "name", children: /* @__PURE__ */ e(re, { placeholder: "输入节点名称" }) }),
|
|
3304
3318
|
/* @__PURE__ */ h(Ne, { ghost: !0, defaultActiveKey: ["position", "size", "style"], children: [
|
|
3305
|
-
/* @__PURE__ */ e(
|
|
3319
|
+
/* @__PURE__ */ e(Me, { header: "位置", children: /* @__PURE__ */ h(be, { children: [
|
|
3306
3320
|
/* @__PURE__ */ e(w.Item, { label: "X", name: ["normalStyle", "x"], children: /* @__PURE__ */ e(te, {}) }),
|
|
3307
3321
|
/* @__PURE__ */ e(w.Item, { label: "Y", name: ["normalStyle", "y"], children: /* @__PURE__ */ e(te, {}) })
|
|
3308
3322
|
] }) }, "position"),
|
|
3309
|
-
/* @__PURE__ */ e(
|
|
3323
|
+
/* @__PURE__ */ e(Me, { header: "尺寸", children: /* @__PURE__ */ h(be, { children: [
|
|
3310
3324
|
/* @__PURE__ */ e(w.Item, { label: "宽度", name: ["normalStyle", "width"], children: /* @__PURE__ */ e(te, { min: 10 }) }),
|
|
3311
3325
|
/* @__PURE__ */ e(w.Item, { label: "高度", name: ["normalStyle", "height"], children: /* @__PURE__ */ e(te, { min: 10 }) })
|
|
3312
3326
|
] }) }, "size"),
|
|
3313
|
-
/* @__PURE__ */ h(
|
|
3327
|
+
/* @__PURE__ */ h(Me, { header: "样式", children: [
|
|
3314
3328
|
/* @__PURE__ */ e(w.Item, { label: "背景色", name: ["normalStyle", "background"], children: /* @__PURE__ */ e(re, { placeholder: "transparent, #fff, url(...)" }) }),
|
|
3315
3329
|
/* @__PURE__ */ e(w.Item, { label: "内边距", name: ["normalStyle", "padding"], children: /* @__PURE__ */ e(te, { min: 0 }) }),
|
|
3316
3330
|
/* @__PURE__ */ e(w.Item, { label: "圆角", name: ["normalStyle", "borderRadius"], children: /* @__PURE__ */ e(te, { min: 0 }) }),
|
|
@@ -3339,10 +3353,10 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3339
3353
|
]
|
|
3340
3354
|
}
|
|
3341
3355
|
) }, "basic"),
|
|
3342
|
-
/* @__PURE__ */ e(
|
|
3343
|
-
|
|
3356
|
+
/* @__PURE__ */ e(mt, { tab: "状态", children: T.type === "group" && T.children ? /* @__PURE__ */ e(
|
|
3357
|
+
qn,
|
|
3344
3358
|
{
|
|
3345
|
-
node:
|
|
3359
|
+
node: T,
|
|
3346
3360
|
updateNode: r,
|
|
3347
3361
|
materials: i
|
|
3348
3362
|
}
|
|
@@ -3350,26 +3364,26 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3350
3364
|
/* @__PURE__ */ h("div", { className: "flex items-center justify-between mb-2", children: [
|
|
3351
3365
|
/* @__PURE__ */ h("span", { className: "font-medium", children: [
|
|
3352
3366
|
"状态列表",
|
|
3353
|
-
/* @__PURE__ */ e(ye, { color: "blue", className: "ml-2", children:
|
|
3367
|
+
/* @__PURE__ */ e(ye, { color: "blue", className: "ml-2", children: Y.length })
|
|
3354
3368
|
] }),
|
|
3355
3369
|
/* @__PURE__ */ e(
|
|
3356
3370
|
Z,
|
|
3357
3371
|
{
|
|
3358
3372
|
type: "primary",
|
|
3359
3373
|
size: "small",
|
|
3360
|
-
icon: /* @__PURE__ */ e(
|
|
3374
|
+
icon: /* @__PURE__ */ e(Ot, {}),
|
|
3361
3375
|
onClick: xe,
|
|
3362
3376
|
children: "添加状态"
|
|
3363
3377
|
}
|
|
3364
3378
|
)
|
|
3365
3379
|
] }),
|
|
3366
3380
|
/* @__PURE__ */ e("p", { className: "text-xs text-gray-500 mb-3", children: "节点根据状态表达式计算结果显示对应物料,第一个返回 true 的状态为当前状态" }),
|
|
3367
|
-
|
|
3381
|
+
Y.length > 0 && /* @__PURE__ */ e("div", { className: "mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg", children: /* @__PURE__ */ e("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ h("div", { children: [
|
|
3368
3382
|
/* @__PURE__ */ e("span", { className: "text-sm text-gray-600", children: "当前状态:" }),
|
|
3369
3383
|
/* @__PURE__ */ e("span", { className: "ml-2 text-sm font-medium text-blue-600", children: "由表达式自动计算" })
|
|
3370
3384
|
] }) }) }),
|
|
3371
|
-
|
|
3372
|
-
|
|
3385
|
+
Y.length === 0 ? /* @__PURE__ */ e("div", { className: "text-center text-gray-400 py-4 bg-gray-50 rounded-lg", children: "暂无状态,点击上方按钮添加" }) : /* @__PURE__ */ e(Ne, { ghost: !0, defaultActiveKey: Y[0]?.id + t, children: Y.map((s, q) => /* @__PURE__ */ e(
|
|
3386
|
+
Me,
|
|
3373
3387
|
{
|
|
3374
3388
|
header: /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
|
|
3375
3389
|
/* @__PURE__ */ e("span", { className: "text-xs text-gray-400 w-5", children: q + 1 }),
|
|
@@ -3382,7 +3396,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3382
3396
|
{
|
|
3383
3397
|
type: "text",
|
|
3384
3398
|
size: "small",
|
|
3385
|
-
icon: /* @__PURE__ */ e(
|
|
3399
|
+
icon: /* @__PURE__ */ e(At, {}),
|
|
3386
3400
|
disabled: q === 0,
|
|
3387
3401
|
onClick: (x) => {
|
|
3388
3402
|
x.stopPropagation(), K(s.id, "up");
|
|
@@ -3394,8 +3408,8 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3394
3408
|
{
|
|
3395
3409
|
type: "text",
|
|
3396
3410
|
size: "small",
|
|
3397
|
-
icon: /* @__PURE__ */ e(
|
|
3398
|
-
disabled: q ===
|
|
3411
|
+
icon: /* @__PURE__ */ e(jt, {}),
|
|
3412
|
+
disabled: q === Y.length - 1,
|
|
3399
3413
|
onClick: (x) => {
|
|
3400
3414
|
x.stopPropagation(), K(s.id, "down");
|
|
3401
3415
|
}
|
|
@@ -3406,9 +3420,9 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3406
3420
|
{
|
|
3407
3421
|
type: "text",
|
|
3408
3422
|
size: "small",
|
|
3409
|
-
icon: /* @__PURE__ */ e(
|
|
3423
|
+
icon: /* @__PURE__ */ e(zt, {}),
|
|
3410
3424
|
onClick: (x) => {
|
|
3411
|
-
x.stopPropagation(),
|
|
3425
|
+
x.stopPropagation(), W(s);
|
|
3412
3426
|
}
|
|
3413
3427
|
}
|
|
3414
3428
|
),
|
|
@@ -3418,7 +3432,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3418
3432
|
type: "text",
|
|
3419
3433
|
size: "small",
|
|
3420
3434
|
danger: !0,
|
|
3421
|
-
icon: /* @__PURE__ */ e(
|
|
3435
|
+
icon: /* @__PURE__ */ e(ct, {}),
|
|
3422
3436
|
onClick: (x) => {
|
|
3423
3437
|
x.stopPropagation(), we(s.id);
|
|
3424
3438
|
}
|
|
@@ -3440,17 +3454,17 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3440
3454
|
label: "执行表达式",
|
|
3441
3455
|
help: "返回 true 时激活此状态,可使用 data 变量访问绑定数据",
|
|
3442
3456
|
children: /* @__PURE__ */ e(
|
|
3443
|
-
|
|
3457
|
+
Bn,
|
|
3444
3458
|
{
|
|
3445
|
-
value:
|
|
3446
|
-
onChange: (x) =>
|
|
3447
|
-
...
|
|
3459
|
+
value: U[s.id] ?? s.expression,
|
|
3460
|
+
onChange: (x) => j((X) => ({
|
|
3461
|
+
...X,
|
|
3448
3462
|
[s.id]: x.target.value
|
|
3449
3463
|
})),
|
|
3450
3464
|
onBlur: (x) => {
|
|
3451
|
-
ie(s.id, { expression: x.target.value }),
|
|
3452
|
-
const
|
|
3453
|
-
return delete
|
|
3465
|
+
ie(s.id, { expression: x.target.value }), j((X) => {
|
|
3466
|
+
const D = { ...X };
|
|
3467
|
+
return delete D[s.id], D;
|
|
3454
3468
|
});
|
|
3455
3469
|
},
|
|
3456
3470
|
rows: 3,
|
|
@@ -3477,23 +3491,23 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3477
3491
|
{
|
|
3478
3492
|
type: "link",
|
|
3479
3493
|
size: "small",
|
|
3480
|
-
icon: /* @__PURE__ */ e(
|
|
3494
|
+
icon: /* @__PURE__ */ e(pt, {}),
|
|
3481
3495
|
onClick: () => G(s.id),
|
|
3482
3496
|
children: "更换物料"
|
|
3483
3497
|
}
|
|
3484
3498
|
)
|
|
3485
3499
|
] }) }),
|
|
3486
|
-
/* @__PURE__ */ e(
|
|
3500
|
+
/* @__PURE__ */ e(De, { style: { margin: "12px 0" } }),
|
|
3487
3501
|
/* @__PURE__ */ h("div", { className: "bg-gray-50 rounded-lg p-3 border border-gray-200", children: [
|
|
3488
3502
|
/* @__PURE__ */ h("div", { className: "flex items-center justify-between mb-2", children: [
|
|
3489
3503
|
/* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "物料属性" }),
|
|
3490
3504
|
/* @__PURE__ */ e(ye, { children: s.material.name })
|
|
3491
3505
|
] }),
|
|
3492
3506
|
/* @__PURE__ */ e(
|
|
3493
|
-
|
|
3507
|
+
Gt,
|
|
3494
3508
|
{
|
|
3495
3509
|
material: s.material,
|
|
3496
|
-
onSave: (x) =>
|
|
3510
|
+
onSave: (x) => R(s.id, x),
|
|
3497
3511
|
bindCodes: s.bindCodes || [],
|
|
3498
3512
|
dataOptions: l || []
|
|
3499
3513
|
}
|
|
@@ -3504,12 +3518,12 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3504
3518
|
s.id + t
|
|
3505
3519
|
)) })
|
|
3506
3520
|
] }) }, "status"),
|
|
3507
|
-
/* @__PURE__ */ e(
|
|
3521
|
+
/* @__PURE__ */ e(mt, { tab: "控制", children: /* @__PURE__ */ h(
|
|
3508
3522
|
w,
|
|
3509
3523
|
{
|
|
3510
3524
|
form: m,
|
|
3511
3525
|
layout: "vertical",
|
|
3512
|
-
onValuesChange:
|
|
3526
|
+
onValuesChange: $,
|
|
3513
3527
|
children: [
|
|
3514
3528
|
/* @__PURE__ */ e(
|
|
3515
3529
|
w.Item,
|
|
@@ -3517,7 +3531,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3517
3531
|
label: "可拖拽",
|
|
3518
3532
|
name: ["controlInfo", "isDraggable"],
|
|
3519
3533
|
valuePropName: "checked",
|
|
3520
|
-
children: /* @__PURE__ */ e(
|
|
3534
|
+
children: /* @__PURE__ */ e(Qe, {})
|
|
3521
3535
|
}
|
|
3522
3536
|
),
|
|
3523
3537
|
/* @__PURE__ */ e(
|
|
@@ -3526,7 +3540,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3526
3540
|
label: "可点击",
|
|
3527
3541
|
name: ["controlInfo", "isClickable"],
|
|
3528
3542
|
valuePropName: "checked",
|
|
3529
|
-
children: /* @__PURE__ */ e(
|
|
3543
|
+
children: /* @__PURE__ */ e(Qe, {})
|
|
3530
3544
|
}
|
|
3531
3545
|
),
|
|
3532
3546
|
/* @__PURE__ */ e(
|
|
@@ -3535,7 +3549,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3535
3549
|
label: "可调整大小",
|
|
3536
3550
|
name: ["controlInfo", "isResizable"],
|
|
3537
3551
|
valuePropName: "checked",
|
|
3538
|
-
children: /* @__PURE__ */ e(
|
|
3552
|
+
children: /* @__PURE__ */ e(Qe, {})
|
|
3539
3553
|
}
|
|
3540
3554
|
),
|
|
3541
3555
|
/* @__PURE__ */ e(
|
|
@@ -3544,7 +3558,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3544
3558
|
label: "可选中",
|
|
3545
3559
|
name: ["controlInfo", "isSelectable"],
|
|
3546
3560
|
valuePropName: "checked",
|
|
3547
|
-
children: /* @__PURE__ */ e(
|
|
3561
|
+
children: /* @__PURE__ */ e(Qe, {})
|
|
3548
3562
|
}
|
|
3549
3563
|
)
|
|
3550
3564
|
]
|
|
@@ -3554,44 +3568,44 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3554
3568
|
/* @__PURE__ */ e("div", { className: "p-3 border-t border-gray-200 bg-gray-50", children: /* @__PURE__ */ h("div", { className: "text-xs text-gray-500", children: [
|
|
3555
3569
|
/* @__PURE__ */ h("div", { children: [
|
|
3556
3570
|
"节点 ID: ",
|
|
3557
|
-
|
|
3571
|
+
T.id.slice(0, 8),
|
|
3558
3572
|
"..."
|
|
3559
3573
|
] }),
|
|
3560
3574
|
/* @__PURE__ */ h("div", { children: [
|
|
3561
3575
|
"状态数: ",
|
|
3562
|
-
|
|
3576
|
+
Y.length
|
|
3563
3577
|
] })
|
|
3564
3578
|
] }) }),
|
|
3565
3579
|
/* @__PURE__ */ e(
|
|
3566
|
-
|
|
3580
|
+
st,
|
|
3567
3581
|
{
|
|
3568
3582
|
title: "选择物料",
|
|
3569
3583
|
open: E,
|
|
3570
3584
|
onCancel: () => {
|
|
3571
|
-
|
|
3585
|
+
b(!1), g(null);
|
|
3572
3586
|
},
|
|
3573
3587
|
footer: null,
|
|
3574
3588
|
width: 600,
|
|
3575
3589
|
children: /* @__PURE__ */ e("div", { className: "max-h-[400px] overflow-y-auto", children: /* @__PURE__ */ h(Ne, { ghost: !0, defaultActiveKey: ["basic", "device", "text", "line"], children: [
|
|
3576
|
-
/* @__PURE__ */ e(
|
|
3577
|
-
|
|
3590
|
+
/* @__PURE__ */ e(Me, { header: "基础形状", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-4 gap-2", children: i.filter((s) => ["矩形", "圆形", "圆角矩形"].includes(s.name)).map((s) => /* @__PURE__ */ e(
|
|
3591
|
+
$t,
|
|
3578
3592
|
{
|
|
3579
3593
|
material: s,
|
|
3580
3594
|
onClick: () => ne(s)
|
|
3581
3595
|
},
|
|
3582
3596
|
s.id
|
|
3583
3597
|
)) }) }, "basic"),
|
|
3584
|
-
/* @__PURE__ */ e(
|
|
3598
|
+
/* @__PURE__ */ e(Me, { header: "设备图标", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-4 gap-2", children: i.filter(
|
|
3585
3599
|
(s) => ["阀门", "泵", "罐体"].includes(s.name) || s.type === "IMAGE" && !["矩形", "圆形", "圆角矩形"].includes(s.name)
|
|
3586
3600
|
).map((s) => /* @__PURE__ */ e(
|
|
3587
|
-
|
|
3601
|
+
$t,
|
|
3588
3602
|
{
|
|
3589
3603
|
material: s,
|
|
3590
3604
|
onClick: () => ne(s)
|
|
3591
3605
|
},
|
|
3592
3606
|
s.id
|
|
3593
3607
|
)) }) }, "device"),
|
|
3594
|
-
/* @__PURE__ */ e(
|
|
3608
|
+
/* @__PURE__ */ e(Me, { header: "文本", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-4 gap-2", children: i.filter((s) => s.type === "TEXT").map((s) => /* @__PURE__ */ h(
|
|
3595
3609
|
"div",
|
|
3596
3610
|
{
|
|
3597
3611
|
className: "border rounded-lg p-2 cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all text-center",
|
|
@@ -3603,7 +3617,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3603
3617
|
},
|
|
3604
3618
|
s.id
|
|
3605
3619
|
)) }) }, "text"),
|
|
3606
|
-
/* @__PURE__ */ e(
|
|
3620
|
+
/* @__PURE__ */ e(Me, { header: "线条", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-4 gap-2", children: i.filter((s) => s.type === "LINE").map((s) => /* @__PURE__ */ h(
|
|
3607
3621
|
"div",
|
|
3608
3622
|
{
|
|
3609
3623
|
className: "border rounded-lg p-2 cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all text-center",
|
|
@@ -3619,7 +3633,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3619
3633
|
}
|
|
3620
3634
|
)
|
|
3621
3635
|
] }) : /* @__PURE__ */ e("div", { className: "h-full flex items-center justify-center bg-white border-l border-gray-200", children: /* @__PURE__ */ e(pe, { description: "请选择一个节点" }) });
|
|
3622
|
-
},
|
|
3636
|
+
}, $t = ({ material: l, onClick: f }) => {
|
|
3623
3637
|
const t = l.type === "IMAGE" ? l.src : void 0;
|
|
3624
3638
|
return /* @__PURE__ */ h(
|
|
3625
3639
|
"div",
|
|
@@ -3632,9 +3646,9 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3632
3646
|
]
|
|
3633
3647
|
}
|
|
3634
3648
|
);
|
|
3635
|
-
},
|
|
3636
|
-
configEditor:
|
|
3637
|
-
}, { Header:
|
|
3649
|
+
}, Zn = "ConfigEditor-module__configEditor__dinNG", Jn = {
|
|
3650
|
+
configEditor: Zn
|
|
3651
|
+
}, { Header: Kn, Sider: Xt, Content: Qn } = ft, sl = ({
|
|
3638
3652
|
initialScheme: l,
|
|
3639
3653
|
onChange: f,
|
|
3640
3654
|
readonly: t = !1,
|
|
@@ -3646,7 +3660,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3646
3660
|
showPropertyPanel: p = !0,
|
|
3647
3661
|
customMaterials: d
|
|
3648
3662
|
}) => {
|
|
3649
|
-
const [m, S] = Ce.useState(!1), [u, E] = Ce.useState(""), [
|
|
3663
|
+
const [m, S] = Ce.useState(!1), [u, E] = Ce.useState(""), [b, k] = Ce.useState([
|
|
3650
3664
|
{
|
|
3651
3665
|
paramsCode: "001",
|
|
3652
3666
|
paramsName: "通频速度有效值",
|
|
@@ -3659,70 +3673,70 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3659
3673
|
value: 1.5,
|
|
3660
3674
|
paramsUnit: "m/s²"
|
|
3661
3675
|
}
|
|
3662
|
-
]), { exportScheme: g, importScheme:
|
|
3676
|
+
]), { exportScheme: g, importScheme: U, nodes: j, materials: T, addMaterial: Y } = Oe();
|
|
3663
3677
|
Ce.useRef(null);
|
|
3664
|
-
const
|
|
3678
|
+
const $ = Ce.useRef(!1);
|
|
3665
3679
|
he(() => {
|
|
3666
|
-
|
|
3680
|
+
$.current || ($.current = !0, T.length === 0 && Ln.forEach((W) => Y(W)), d && d.length > 0 && d.forEach((W) => Y(W)), l && U(l));
|
|
3667
3681
|
}, []), he(() => {
|
|
3668
3682
|
if (f) {
|
|
3669
|
-
const
|
|
3670
|
-
f(
|
|
3683
|
+
const W = g();
|
|
3684
|
+
f(W);
|
|
3671
3685
|
}
|
|
3672
|
-
}, [
|
|
3686
|
+
}, [j, f]);
|
|
3673
3687
|
const xe = V(() => {
|
|
3674
|
-
const
|
|
3675
|
-
s.setAttribute("href", G), s.setAttribute("download",
|
|
3688
|
+
const W = g(), K = JSON.stringify(W, null, 2), G = "data:application/json;charset=utf-8," + encodeURIComponent(K), R = `scheme_${Date.now()}.json`, s = document.createElement("a");
|
|
3689
|
+
s.setAttribute("href", G), s.setAttribute("download", R), s.click(), $e.success("导出成功!");
|
|
3676
3690
|
}, [g]), ne = V(() => {
|
|
3677
3691
|
try {
|
|
3678
|
-
const
|
|
3679
|
-
|
|
3692
|
+
const W = JSON.parse(u);
|
|
3693
|
+
U(W), S(!1), E(""), $e.success("导入成功!");
|
|
3680
3694
|
} catch {
|
|
3681
|
-
|
|
3695
|
+
$e.error("JSON 格式错误,请检查输入");
|
|
3682
3696
|
}
|
|
3683
|
-
}, [u,
|
|
3684
|
-
(
|
|
3697
|
+
}, [u, U]), we = V(
|
|
3698
|
+
(W) => {
|
|
3685
3699
|
const K = new FileReader();
|
|
3686
3700
|
return K.onload = (G) => {
|
|
3687
3701
|
try {
|
|
3688
|
-
const
|
|
3689
|
-
|
|
3702
|
+
const R = G.target?.result, s = JSON.parse(R);
|
|
3703
|
+
U(s), $e.success("导入成功!"), S(!1);
|
|
3690
3704
|
} catch {
|
|
3691
|
-
|
|
3705
|
+
$e.error("文件格式错误");
|
|
3692
3706
|
}
|
|
3693
|
-
}, K.readAsText(
|
|
3707
|
+
}, K.readAsText(W), !1;
|
|
3694
3708
|
},
|
|
3695
|
-
[
|
|
3709
|
+
[U]
|
|
3696
3710
|
), ie = V(() => g(), [g]);
|
|
3697
3711
|
return Ce.useImperativeHandle(
|
|
3698
3712
|
Ce.useRef?.(),
|
|
3699
3713
|
() => ({
|
|
3700
3714
|
getScheme: ie,
|
|
3701
3715
|
exportScheme: g,
|
|
3702
|
-
importScheme:
|
|
3716
|
+
importScheme: U
|
|
3703
3717
|
}),
|
|
3704
|
-
[ie, g,
|
|
3705
|
-
), /* @__PURE__ */ e(
|
|
3706
|
-
|
|
3718
|
+
[ie, g, U]
|
|
3719
|
+
), /* @__PURE__ */ e(Vt, { locale: En, children: /* @__PURE__ */ e("div", { className: Jn.configEditor, style: n, children: /* @__PURE__ */ h(
|
|
3720
|
+
ft,
|
|
3707
3721
|
{
|
|
3708
3722
|
className: `h-full w-full overflow-hidden ${c}`,
|
|
3709
3723
|
children: [
|
|
3710
|
-
a && /* @__PURE__ */ h(
|
|
3724
|
+
a && /* @__PURE__ */ h(Kn, { className: "bg-white border-b border-gray-200 px-4 flex items-center justify-between flex-shrink-0", children: [
|
|
3711
3725
|
/* @__PURE__ */ h("div", { className: "flex items-center gap-4", children: [
|
|
3712
3726
|
/* @__PURE__ */ e("div", { className: "text-xl font-bold text-blue-600", children: "组态编辑器" }),
|
|
3713
3727
|
/* @__PURE__ */ h("div", { className: "text-sm text-gray-500", children: [
|
|
3714
|
-
|
|
3728
|
+
j.length,
|
|
3715
3729
|
" 个节点"
|
|
3716
3730
|
] })
|
|
3717
3731
|
] }),
|
|
3718
3732
|
/* @__PURE__ */ h(be, { children: [
|
|
3719
3733
|
r,
|
|
3720
|
-
!t && /* @__PURE__ */ h(
|
|
3721
|
-
/* @__PURE__ */ e(
|
|
3722
|
-
/* @__PURE__ */ e(
|
|
3734
|
+
!t && /* @__PURE__ */ h(Ae, { children: [
|
|
3735
|
+
/* @__PURE__ */ e(Ye, { title: "导出 JSON", children: /* @__PURE__ */ e(Z, { icon: /* @__PURE__ */ e(fn, {}), onClick: xe, children: "导出" }) }),
|
|
3736
|
+
/* @__PURE__ */ e(Ye, { title: "导入 JSON", children: /* @__PURE__ */ e(
|
|
3723
3737
|
Z,
|
|
3724
3738
|
{
|
|
3725
|
-
icon: /* @__PURE__ */ e(
|
|
3739
|
+
icon: /* @__PURE__ */ e(gt, {}),
|
|
3726
3740
|
onClick: () => S(!0),
|
|
3727
3741
|
children: "导入"
|
|
3728
3742
|
}
|
|
@@ -3730,13 +3744,13 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3730
3744
|
] })
|
|
3731
3745
|
] })
|
|
3732
3746
|
] }),
|
|
3733
|
-
/* @__PURE__ */ h(
|
|
3734
|
-
i && !t && /* @__PURE__ */ e(
|
|
3735
|
-
/* @__PURE__ */ e(
|
|
3736
|
-
p && !t && /* @__PURE__ */ e(
|
|
3747
|
+
/* @__PURE__ */ h(ft, { children: [
|
|
3748
|
+
i && !t && /* @__PURE__ */ e(Xt, { width: 280, className: "bg-white", theme: "light", children: /* @__PURE__ */ e($n, {}) }),
|
|
3749
|
+
/* @__PURE__ */ e(Qn, { className: "bg-gray-100 relative", children: /* @__PURE__ */ e(jn, { defaultTestData: b }) }),
|
|
3750
|
+
p && !t && /* @__PURE__ */ e(Xt, { width: 360, className: "bg-white", theme: "light", children: /* @__PURE__ */ e(Vn, { defaultTestData: b }) })
|
|
3737
3751
|
] }),
|
|
3738
3752
|
/* @__PURE__ */ e(
|
|
3739
|
-
|
|
3753
|
+
st,
|
|
3740
3754
|
{
|
|
3741
3755
|
title: "导入组态方案",
|
|
3742
3756
|
open: m,
|
|
@@ -3753,8 +3767,8 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3753
3767
|
{
|
|
3754
3768
|
type: "file",
|
|
3755
3769
|
accept: ".json",
|
|
3756
|
-
onChange: (
|
|
3757
|
-
const K =
|
|
3770
|
+
onChange: (W) => {
|
|
3771
|
+
const K = W.target.files?.[0];
|
|
3758
3772
|
K && we(K);
|
|
3759
3773
|
},
|
|
3760
3774
|
className: `block w-full text-sm text-gray-500
|
|
@@ -3773,7 +3787,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3773
3787
|
"textarea",
|
|
3774
3788
|
{
|
|
3775
3789
|
value: u,
|
|
3776
|
-
onChange: (
|
|
3790
|
+
onChange: (W) => E(W.target.value),
|
|
3777
3791
|
placeholder: "粘贴 JSON 内容...",
|
|
3778
3792
|
className: "w-full h-48 p-3 border border-gray-300 rounded-lg font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
3779
3793
|
}
|
|
@@ -3787,14 +3801,14 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
|
|
|
3787
3801
|
) }) });
|
|
3788
3802
|
};
|
|
3789
3803
|
export {
|
|
3790
|
-
|
|
3791
|
-
|
|
3792
|
-
|
|
3793
|
-
|
|
3794
|
-
|
|
3795
|
-
|
|
3796
|
-
|
|
3797
|
-
|
|
3798
|
-
|
|
3804
|
+
jn as Canvas,
|
|
3805
|
+
sl as ConfigEditor,
|
|
3806
|
+
$n as MaterialPanel,
|
|
3807
|
+
Ht as NodeRenderer,
|
|
3808
|
+
Vn as PropertyPanel,
|
|
3809
|
+
Yn as createDefaultNode,
|
|
3810
|
+
Ut as createDefaultStatus,
|
|
3811
|
+
Ln as initMaterials,
|
|
3812
|
+
Oe as useEditorStore
|
|
3799
3813
|
};
|
|
3800
3814
|
//# sourceMappingURL=config-editor.es.js.map
|