@xbeeant/form-engine-designer 0.0.1

package/README.md

@@ -0,0 +1,69 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      ...tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      ...tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      ...tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/es/Canvas.js

@@ -0,0 +1,636 @@
+import { jsxs as F, jsx as s, Fragment as Ee } from "react/jsx-runtime";
+import { isLayoutNode as Oe, isDataField as Se } from "@xbeeant/form-engine";
+import { NexusField as Ie } from "./react/src/components/NexusField.js";
+import { NexusForm as ke } from "./react/src/components/NexusForm.js";
+import { NexusFormProvider as Fe } from "./react/src/components/NexusFormProvider.js";
+import { GridContext as Ae } from "./react/src/contexts/GridContext.js";
+import { useForm as pe } from "./react/src/hooks/useForm.js";
+import { Tag as _e, Typography as de, Button as J, Space as je, Modal as Ke, Empty as Re } from "antd";
+import { memo as Le, useMemo as ie, useState as ue, useEffect as re, useCallback as w } from "react";
+import { useDesigner as ze } from "./DesignerContext.js";
+import { getPropertiesOf as ee, getNodeLabel as Je, getNodeAtProperties as M, moveNodeInSchema as B, removeNodeFromSchema as fe, generateKey as G } from "./schemaUtils.js";
+const he = "application/json";
+function le(e, t) {
+  return !e || e.length !== t.length ? !1 : e.every((r, o) => r === t[o]);
+}
+function Me(e, t) {
+  return e === null && t === null ? !0 : e === null || t === null ? !1 : e.type === t.type && le(e.path, t.path);
+}
+const Pe = {
+  tabPane: "tabs",
+  collapsePanel: "collapse",
+  step: "steps"
+}, be = {
+  tabs: "tabPane",
+  collapse: "collapsePanel",
+  steps: "step"
+}, xe = {
+  tabPane: "标签页",
+  collapsePanel: "折叠面板",
+  step: "步骤"
+};
+function De(e, t) {
+  if (t.length === 0)
+    return;
+  const r = M(e.properties, t);
+  return r ? r.type : void 0;
+}
+function ge(e, t, r, o, p) {
+  const P = De(e, t), d = Pe[o];
+  if (d)
+    return P === d ? r : null;
+  const f = P ? be[P] : void 0;
+  return f ? () => ({
+    type: f,
+    title: xe[f],
+    properties: {
+      [p ?? G({})]: r()
+    }
+  }) : r;
+}
+function ye(e, t, r) {
+  const o = M(e.properties, t);
+  if (!o)
+    return null;
+  const p = De(e, r), P = o.type, d = Pe[P];
+  if (d)
+    return p === d ? { node: o, wrapped: !1 } : null;
+  const f = p ? be[p] : void 0;
+  return f ? {
+    wrapped: !0,
+    node: {
+      type: f,
+      title: xe[f],
+      properties: {
+        [t[t.length - 1]]: o
+      }
+    }
+  } : { node: o, wrapped: !1 };
+}
+function $e(e, t) {
+  return e.length <= t.length ? t.slice(0, e.length).every((r, o) => r === e[o]) : !1;
+}
+function me(e, t) {
+  if ($e(e, t))
+    return !1;
+  const r = e.slice(0, -1);
+  return !(r.length === t.length && r.every((o, p) => o === t[p]));
+}
+function ve(e, t) {
+  if (!e || e.type === "inside")
+    return null;
+  const r = we(t, e.path);
+  if (r === -1)
+    return null;
+  const o = e.path.slice(0, -1);
+  return e.type === "before" ? { toParentPath: o, insertIndex: r } : { toParentPath: o, insertIndex: r + 1 };
+}
+function qe(e, t, r) {
+  return e.category === "widget" ? t.find((o) => o.widget === e.widget) : r.find((o) => o.layoutType === e.layoutType);
+}
+function We(e) {
+  return ["checkbox", "switch"].includes(e) ? "boolean" : ["number", "slider"].includes(e) ? "number" : ["checkboxes", "multiSelect"].includes(e) ? "array" : e === "object" ? "object" : "string";
+}
+function we(e, t) {
+  const r = t.slice(0, -1), o = t[t.length - 1], p = r.length === 0 ? e : M(e, r) && ee(M(e, r));
+  return p ? Object.keys(p).indexOf(o) : -1;
+}
+function oe(e, t) {
+  if (t.length === 0)
+    return e.properties;
+  const r = M(e.properties, t);
+  return r ? ee(r) : void 0;
+}
+function Ye(e, t) {
+  const r = e.currentTarget.getBoundingClientRect();
+  return { type: e.clientY - r.top < r.height / 2 ? "before" : "after", path: t };
+}
+function U(e) {
+  return JSON.stringify(e);
+}
+const Be = Le(
+  function e({
+    node: t,
+    pathKey: r,
+    depth: o,
+    parentDataPath: p,
+    isSelected: P,
+    dropTargetType: d,
+    selectedPathKey: f,
+    dropTarget: N,
+    actions: h
+  }) {
+    const a = ie(() => JSON.parse(r), [r]), T = ee(t), C = T !== void 0, V = Je(t, a[a.length - 1]), O = t.widget || t.type, A = Oe(t), $ = A ? p : p ? `${p}.${a[a.length - 1]}` : a[a.length - 1], j = T ? Object.entries(T) : [], H = Se(t);
+    return /* @__PURE__ */ F(
+      "div",
+      {
+        className: "mb-1.5 relative",
+        style: { marginLeft: o },
+        children: [
+          d === "before" && /* @__PURE__ */ s("div", { className: "drop-indicator-line relative h-1 pointer-events-none z-10 -mt-0.5" }),
+          /* @__PURE__ */ F(
+            "div",
+            {
+              className: `relative rounded border bg-white transition-all ${P ? "border-[#1677ff] bg-[#e6f4ff] shadow-[0_0_0_2px_rgba(22,119,255,0.1)]" : "border-[#e8e8e8] hover:border-[#1677ff]"}`,
+              children: [
+                /* @__PURE__ */ F(
+                  "div",
+                  {
+                    className: "flex items-center gap-1.5 px-2 py-1.5 cursor-grab",
+                    draggable: !0,
+                    onDragStart: (c) => h.onDragStart(c, a),
+                    onDragOver: (c) => h.onDragOver(c, a),
+                    onDragLeave: (c) => {
+                      c.stopPropagation();
+                    },
+                    onDrop: (c) => h.onNodeDrop(c, a),
+                    onClick: (c) => {
+                      c.stopPropagation(), h.onSelect(a);
+                    },
+                    children: [
+                      /* @__PURE__ */ s(
+                        _e,
+                        {
+                          color: C || A ? "blue" : void 0,
+                          className: "m-0! shrink-0",
+                          children: O
+                        }
+                      ),
+                      /* @__PURE__ */ s(de.Text, { className: "flex-1 overflow-hidden text-ellipsis whitespace-nowrap", children: V }),
+                      /* @__PURE__ */ s(de.Text, { className: "text-[#bfbfbf] text-[11px] font-mono shrink-0", children: a[a.length - 1] }),
+                      P && /* @__PURE__ */ F("span", { className: "inline-flex gap-1", children: [
+                        /* @__PURE__ */ s(
+                          J,
+                          {
+                            size: "small",
+                            onClick: (c) => {
+                              c.stopPropagation(), h.onReorder(a, "up");
+                            },
+                            children: "↑"
+                          }
+                        ),
+                        /* @__PURE__ */ s(
+                          J,
+                          {
+                            size: "small",
+                            onClick: (c) => {
+                              c.stopPropagation(), h.onReorder(a, "down");
+                            },
+                            children: "↓"
+                          }
+                        ),
+                        /* @__PURE__ */ s(
+                          J,
+                          {
+                            size: "small",
+                            danger: !0,
+                            onClick: (c) => {
+                              c.stopPropagation(), h.onDelete(a);
+                            },
+                            children: "×"
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ),
+                H && /* @__PURE__ */ s("div", { className: "px-2 pb-2", children: /* @__PURE__ */ s(
+                  Ie,
+                  {
+                    dataPath: $,
+                    layoutKey: a[a.length - 1]
+                  }
+                ) }),
+                !H && C && (() => {
+                  const c = t.type === "grid", K = t.type === "flex";
+                  let R, L = null;
+                  if (c) {
+                    const g = Math.max(1, t.column ?? 2), S = t.gap ?? 12;
+                    R = {
+                      display: "grid",
+                      gridTemplateColumns: `repeat(${g}, 1fr)`,
+                      gap: `${S}px`
+                    }, L = { column: g };
+                  } else if (K) {
+                    const g = t.gap ?? 8, S = t.direction ?? "row", b = t.align ?? "flex-start", _ = t.justify ?? "flex-start", W = t.wrap ?? !1;
+                    R = {
+                      display: "flex",
+                      flexDirection: S === "column" ? "column" : "row",
+                      alignItems: b,
+                      justifyContent: _,
+                      flexWrap: W ? "wrap" : "nowrap",
+                      gap: `${g}px`
+                    };
+                  }
+                  const Q = /* @__PURE__ */ F(Ee, { children: [
+                    j.map(([g, S]) => {
+                      const b = U([...a, g]), _ = f === b, W = N && (N.type === "before" || N.type === "after") && Ge(N) === b ? N.type : null;
+                      return /* @__PURE__ */ s(
+                        e,
+                        {
+                          node: S,
+                          pathKey: b,
+                          depth: o + 1,
+                          parentDataPath: $,
+                          isSelected: _,
+                          dropTargetType: W,
+                          selectedPathKey: f,
+                          dropTarget: N,
+                          actions: h
+                        },
+                        b
+                      );
+                    }),
+                    j.length === 0 && /* @__PURE__ */ s("div", { className: "text-[#bfbfbf] text-xs text-center py-2", children: "拖拽组件到此处" })
+                  ] }), q = /* @__PURE__ */ s(
+                    "div",
+                    {
+                      className: "mx-2 mb-2 p-2 border border-dashed rounded min-h-8 bg-[rgba(250,250,250,0.6)] border-[#d9d9d9]",
+                      style: R,
+                      onClick: (g) => {
+                        g.stopPropagation();
+                      },
+                      onDragOver: h.onContainerDragOver,
+                      onDrop: (g) => h.onContainerDrop(g, a),
+                      children: Q
+                    }
+                  );
+                  return L ? /* @__PURE__ */ s(Ae.Provider, { value: L, children: q }) : q;
+                })()
+              ]
+            }
+          ),
+          d === "after" && /* @__PURE__ */ s("div", { className: "drop-indicator-line relative h-1 pointer-events-none z-10 -mb-0.5" })
+        ]
+      },
+      r
+    );
+  },
+  (e, t) => e.node === t.node && e.pathKey === t.pathKey && e.depth === t.depth && e.parentDataPath === t.parentDataPath && e.isSelected === t.isSelected && e.dropTargetType === t.dropTargetType && e.actions === t.actions
+);
+function Ge(e) {
+  return e === null || e.type === "inside" ? null : U(e.path);
+}
+function it() {
+  const {
+    schema: e,
+    selectedPath: t,
+    mode: r,
+    selectNode: o,
+    addNode: p,
+    removeNode: P,
+    setSchema: d,
+    registerUI: f,
+    widgetCatalog: N,
+    layoutCatalog: h
+  } = ze(), [a] = pe(), [T] = pe(), C = a._getEngine(), V = T._getEngine(), [O, A] = ue(null), [$, j] = ue(null);
+  re(() => {
+    f?.(C), f?.(V);
+  }, [f, C, V]), re(() => {
+    if (r === "preview")
+      return;
+    const n = C.getFormData();
+    C.init(
+      e,
+      Object.keys(n).length > 0 ? n : void 0
+    );
+  }, [C, e, r]);
+  const H = ie(
+    () => ({
+      displayType: e.displayType ?? "row",
+      labelWidth: e.labelWidth,
+      colon: e.colon,
+      label: e.label ?? !0,
+      readOnly: e.readOnly ?? !1,
+      column: e.column
+    }),
+    [e]
+  );
+  re(() => {
+    const n = () => A(null);
+    return window.addEventListener("dragend", n), () => window.removeEventListener("dragend", n);
+  }, []);
+  const c = w(
+    (n) => {
+      if (n.length === 0)
+        return e.properties;
+      const i = M(e.properties, n);
+      return i ? ee(i) : void 0;
+    },
+    [e]
+  ), K = w(
+    (n, i) => {
+      if (n.preventDefault(), n.stopPropagation(), A(null), !i)
+        return;
+      const m = n.dataTransfer.getData(he);
+      if (!m)
+        return;
+      let E;
+      try {
+        E = JSON.parse(m);
+      } catch {
+        return;
+      }
+      if (E.source === "canvas") {
+        const l = E.fromPath;
+        if (i.type === "inside") {
+          if (!me(l, i.path))
+            return;
+          const y = ye(e, l, i.path);
+          if (!y)
+            return;
+          if (!y.wrapped)
+            d(B(e, l, i.path));
+          else {
+            let D = structuredClone(e);
+            const z = oe(D, i.path);
+            if (!z)
+              return;
+            const Ce = G(z);
+            z[Ce] = y.node, D = fe(D, l), d(D);
+          }
+          o(null);
+          return;
+        }
+        if (!me(l, i.path))
+          return;
+        const v = ve(i, e.properties);
+        if (!v)
+          return;
+        const Y = l.slice(0, -1), Te = Y.length === v.toParentPath.length && Y.every((y, D) => y === v.toParentPath[D]);
+        let Z = v.insertIndex;
+        if (Te) {
+          const y = we(e.properties, l);
+          y !== -1 && y < Z && (Z -= 1);
+        }
+        const ne = ye(e, l, v.toParentPath);
+        if (!ne)
+          return;
+        if (!ne.wrapped)
+          d(
+            B(
+              e,
+              l,
+              v.toParentPath,
+              Z
+            )
+          );
+        else {
+          let y = structuredClone(e);
+          const D = oe(y, v.toParentPath);
+          if (!D)
+            return;
+          const z = G(D);
+          D[z] = ne.node, y = fe(y, l), d(
+            B(
+              y,
+              [...v.toParentPath, z],
+              v.toParentPath,
+              Z
+            )
+          );
+        }
+        o(null);
+        return;
+      }
+      let I, x, u;
+      if (E.source === "fieldDef") {
+        const l = E.fieldDef;
+        I = l.widget, u = l.id, x = () => ({
+          type: We(l.widget),
+          widget: l.widget,
+          title: l.name,
+          // 锁定标记：禁止在设计器中修改 key 和 title
+          _lockedKey: !0,
+          _lockedTitle: !0
+        });
+      } else {
+        const l = qe(
+          E.catalogItem,
+          N,
+          h
+        );
+        if (!l)
+          return;
+        I = l.widget || l.layoutType || "field", x = () => l.createNode();
+      }
+      if (i.type === "inside") {
+        const l = c(i.path);
+        if (!l)
+          return;
+        const v = ge(
+          e,
+          i.path,
+          x,
+          I,
+          u
+        );
+        if (!v)
+          return;
+        const Y = u ?? G(l);
+        if (u && Y in l)
+          return;
+        p(i.path, Y, v());
+        return;
+      }
+      const k = ve(i, e.properties);
+      if (!k)
+        return;
+      const ae = ge(
+        e,
+        k.toParentPath,
+        x,
+        I,
+        u
+      );
+      if (!ae)
+        return;
+      const ce = structuredClone(e), X = oe(ce, k.toParentPath);
+      if (!X)
+        return;
+      const te = u ?? G(X);
+      if (u && te in X)
+        return;
+      X[te] = ae();
+      const Ne = [...k.toParentPath, te];
+      d(
+        B(
+          ce,
+          Ne,
+          k.toParentPath,
+          k.insertIndex
+        )
+      );
+    },
+    [
+      e,
+      N,
+      h,
+      p,
+      c,
+      d,
+      o
+    ]
+  ), R = w(
+    (n, i) => {
+      n.stopPropagation();
+      const m = { source: "canvas", fromPath: i };
+      n.dataTransfer.setData(he, JSON.stringify(m)), n.dataTransfer.effectAllowed = "move";
+    },
+    []
+  ), L = w(
+    (n, i) => {
+      n.preventDefault(), n.stopPropagation();
+      const m = n.currentTarget.getBoundingClientRect(), x = { type: n.clientY - m.top < m.height / 2 ? "before" : "after", path: i };
+      n.dataTransfer.dropEffect = n.dataTransfer.effectAllowed === "copy" ? "copy" : "move", A((u) => Me(u, x) ? u : x);
+    },
+    []
+  ), Q = w(
+    (n, i) => {
+      n.stopPropagation();
+      const m = Ye(n, i);
+      K(n, m);
+    },
+    [K]
+  ), q = w(
+    (n) => {
+      P(n);
+    },
+    [P]
+  ), g = w(
+    (n) => {
+      o(n);
+    },
+    [o]
+  ), S = w(
+    (n, i) => {
+      const m = n.slice(0, -1), E = n[n.length - 1], I = c(m);
+      if (!I)
+        return;
+      const x = Object.keys(I), u = x.indexOf(E);
+      if (u < 0 || i === "up" && u === 0 || i === "down" && u === x.length - 1)
+        return;
+      const k = i === "up" ? u - 1 : u + 1;
+      d(B(e, n, m, k)), o(n);
+    },
+    [c, e, d, o]
+  ), b = w((n) => {
+    n.preventDefault(), n.dataTransfer.dropEffect = n.dataTransfer.effectAllowed === "copy" ? "copy" : "move", A((i) => i === null ? i : null);
+  }, []), _ = w(
+    (n, i) => {
+      n.stopPropagation(), K(n, { type: "inside", path: i });
+    },
+    [K]
+  ), W = ie(
+    () => ({
+      onSelect: g,
+      onDelete: q,
+      onReorder: S,
+      onDragStart: R,
+      onDragOver: L,
+      onNodeDrop: Q,
+      onContainerDragOver: b,
+      onContainerDrop: _
+    }),
+    [
+      g,
+      q,
+      S,
+      R,
+      L,
+      Q,
+      b,
+      _
+    ]
+  );
+  if (r === "preview")
+    return /* @__PURE__ */ F("div", { className: "flex-1 overflow-y-auto p-4 bg-[#f5f5f5] min-h-full border border-transparent box-border", children: [
+      /* @__PURE__ */ s(ke, { form: T, schema: e }),
+      /* @__PURE__ */ s("div", { style: { marginTop: 16, textAlign: "center" }, children: /* @__PURE__ */ F(je, { children: [
+        /* @__PURE__ */ s(
+          J,
+          {
+            type: "primary",
+            onClick: async () => {
+              try {
+                if ((await T.validateFields()).size > 0)
+                  return;
+                const i = T.getValues();
+                j(i);
+              } catch {
+              }
+            },
+            children: "提交"
+          }
+        ),
+        /* @__PURE__ */ s(J, { onClick: () => T.resetFields(), children: "重置" })
+      ] }) }),
+      /* @__PURE__ */ s(
+        Ke,
+        {
+          title: "表单数据",
+          open: $ !== null,
+          onCancel: () => j(null),
+          footer: [
+            /* @__PURE__ */ s(J, { onClick: () => j(null), children: "关闭" }, "close")
+          ],
+          width: 600,
+          children: /* @__PURE__ */ s(
+            "pre",
+            {
+              style: {
+                maxHeight: 400,
+                overflow: "auto",
+                background: "#f5f5f5",
+                padding: 12,
+                borderRadius: 6,
+                fontSize: 13,
+                margin: 0
+              },
+              children: JSON.stringify($, null, 2)
+            }
+          )
+        }
+      )
+    ] });
+  const se = Object.entries(e.properties);
+  return /* @__PURE__ */ s(
+    Fe,
+    {
+      form: a,
+      engine: C,
+      config: H,
+      children: /* @__PURE__ */ s(
+        "div",
+        {
+          className: "flex-1 overflow-y-auto p-4 bg-[#f5f5f5] min-h-full border border-transparent box-border",
+          onClick: () => o(null),
+          onDragOver: b,
+          onDrop: (n) => _(n, []),
+          children: /* @__PURE__ */ F("div", { children: [
+            se.map(([n, i]) => /* @__PURE__ */ s(
+              Be,
+              {
+                node: i,
+                pathKey: U([n]),
+                depth: 0,
+                parentDataPath: "",
+                isSelected: le(t, [n]),
+                dropTargetType: O && (O.type === "before" || O.type === "after") && le(O.path, [n]) ? O.type : null,
+                selectedPathKey: t ? U(t) : null,
+                dropTarget: O,
+                actions: W
+              },
+              U([n])
+            )),
+            se.length === 0 && /* @__PURE__ */ s(Re, { description: "拖拽组件到此处开始设计" })
+          ] })
+        }
+      )
+    }
+  );
+}
+export {
+  it as Canvas
+};
+//# sourceMappingURL=Canvas.js.map