snowy-designer/dist/core/src/components/designer/hooks/useDesigner.js

基于Epic-Designer-Pro版本的设计器,可视化开发页面表单

import { ref as B, reactive as K, watchEffect as y } from "vue";
import { useClipboard as P } from "../../../../../hooks/src/common/clipboard.js";
import { useMagicKeys as z } from "@vueuse/core";
import "../../../../../hooks/src/store/index.js";
/* empty css                                           */
import "radix-vue";
import "clsx";
import "tailwind-merge";
import "lucide-vue-next";
import "../../../../../ui-kit/base-ui/src/shadch-ui/button/index.js";
import "../../../../../ui-kit/base-ui/src/shadch-ui/toast/index.js";
import "vuedraggable";
import { findSchemas as A, deepClone as J, getMatchedById as k, deepEqual as q, deepCompareAndModify as F, findSchemaInfoById as R } from "../../../../../utils/src/common/data.js";
import { usePageManager as j } from "../../../../../utils/src/manager/pageManager.js";
import { pluginManager as m } from "../../../../../utils/src/manager/pluginManager.js";
import { useRevoke as G } from "../../../../../utils/src/manager/revoke.js";
import "monaco-editor";
import "../../../../../utils/src/request/index.js";
let a = {
  schemas: [
    {
      componentProps: {
        style: {
          padding: "16px"
        }
      },
      id: "root",
      label: "页面",
      type: "page",
      children: []
    }
  ],
  script: `const { defineExpose, find } = epic;

function test (){
    console.log('test')
}

// 通过defineExpose暴露的函数或者属性
defineExpose({
 test
})`
};
function de(c, p) {
  const b = B(!1), d = j(), n = d.pageSchema, o = K({
    disabledHover: !1,
    hoverNode: null,
    matched: [],
    selectedNode: null,
    selectedNodeConfig: null
  }), l = G(n, o, r), { copy: M, cut: S, duplicate: x, paste: C } = P(
    n,
    r,
    (e) => l.push(e)
  ), E = {
    desktop: {},
    mobile: {
      mode: "mobile",
      width: "390px"
    },
    tablet: {
      mode: "tablet",
      width: "780px"
    }
  };
  y(() => {
    c.defaultSchema ? a = c.defaultSchema : c.formMode && (a.schemas = m.formSchema);
    const e = c.canvasMode ?? "desktop";
    n.canvas = {
      mode: e,
      ...E[e]
    }, h(), d.setDefaultComponentIds(a.schemas);
  }), d.setDesignMode();
  function h() {
    if (!c.formMode || !c.tableJson) return;
    const e = c.tableJson.find(
      (s) => s.tableType === "parent"
    );
    if (!e) return;
    const t = A(
      n.schemas,
      (s) => s.type === "form"
    );
    t.length === 1 && (t[0].componentProps.name = e.tableName);
  }
  function v() {
    var e;
    return x((e = o.selectedNode) == null ? void 0 : e.id);
  }
  function g() {
    return S(o.selectedNode);
  }
  function N() {
    var i;
    if (!((i = o.selectedNode) != null && i.id) || o.selectedNode.id === n.schemas[0].id)
      return;
    const e = R(n.schemas, o.selectedNode.id);
    if (!e) return !1;
    let { index: t, list: s } = e;
    s.splice(t, 1), t === s.length && t--, r(s[t]), l.push("删除组件");
  }
  function r(e = d.pageSchema.schemas[0]) {
    var s, i;
    const t = m.getComponentConfingByType(
      e.type
    );
    if ((s = e.status) != null && s.lock || (i = t == null ? void 0 : t.editConstraints) != null && i.locked) {
      const u = k(
        d.pageSchema.schemas,
        e.id
      ), w = u.length - 2;
      for (let f = w; f >= 0; f--)
        if (!D(u[f])) {
          e = u[f];
          break;
        }
    }
    o.selectedNode = e, o.selectedNodeConfig = t, o.matched = e.id ? k(d.pageSchema.schemas, e.id) : [];
  }
  function D(e) {
    var t;
    return ((t = e.status) == null ? void 0 : t.lock) || m.getLocked(e.type);
  }
  function H(e = null) {
    var t;
    if (!e || o.disabledHover)
      return o.hoverNode = null, !1;
    if ((e == null ? void 0 : e.id) === ((t = o.hoverNode) == null ? void 0 : t.id))
      return !1;
    o.hoverNode = e;
  }
  function I() {
    q(n.schemas, a.schemas) && n.script === a.script || (F(n.schemas, a.schemas), n.script = a.script, r(n.schemas[0]), h(), l.push("重置操作"), p("reset", n));
  }
  function T() {
    n.schemas = J(a.schemas), r(n.schemas[0]), l.push("初始化");
  }
  function L(e = document) {
    const t = z({ target: e });
    e.addEventListener(
      "keydown",
      (s) => {
        s.ctrlKey && s.key === "s" && s.preventDefault(), s.ctrlKey && s.key === "d" && s.preventDefault();
      },
      { capture: !0 }
    ), y(() => {
      var i;
      const s = document.activeElement;
      if (!(s instanceof HTMLInputElement || s instanceof HTMLTextAreaElement)) {
        if ((t.Delete.value || t.Backspace.value) && o.selectedNode && N(), t["ctrl+c"].value && o.selectedNode && M(o.selectedNode), t["ctrl+v"].value)
          return C((i = o.selectedNode) == null ? void 0 : i.id);
        t["ctrl+d"].value && o.selectedNode && v(), t["ctrl+x"].value && o.selectedNode && g(), t["ctrl+z"].value && !t.shift.value && l.undo(), (t["ctrl+shift+z"].value || t["ctrl+y"].value) && l.redo(), t["ctrl+s"].value && p("save", n), t.Escape.value && r(n.schemas[0]);
      }
    });
  }
  return T(), {
    handleCut: g,
    handleDelete: N,
    handleDuplicate: v,
    pageManager: d,
    pageSchema: n,
    ready: b,
    reset: I,
    revoke: l,
    setHoverNode: H,
    setSelectedNode: r,
    setupHotkeys: L,
    state: o
  };
}
export {
  de as useDesigner
};