fx-epic-designer/dist/core/src/components/designer/hooks/useDesigner.js

基于vue3的设计器,可视化开发页面表单

import { ref as x, reactive as k, watchEffect as v } from "vue";
/* empty css                                           */
import "vuedraggable";
import { deepClone as D, findSchemaById as H, getMatchedById as I, deepEqual as B, deepCompareAndModify as C, findSchemaInfoById as g, generateNewSchema as b } from "../../../../../utils/src/common/data.js";
import { usePageManager as w } from "../../../../../utils/src/manager/pageManager.js";
import { pluginManager as L } from "../../../../../utils/src/manager/pluginManager.js";
import { useRevoke as T } from "../../../../../utils/src/manager/revoke.js";
import { useMagicKeys as z } from "@vueuse/core";
let c = {
  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 J(r, f) {
  const N = x(!1), d = w(), t = d.pageSchema, n = k({
    disabledHover: !1,
    hoverNode: null,
    matched: [],
    selectedNode: null
  }), a = T(t, n, i);
  v(() => {
    r.defaultSchema ? c = r.defaultSchema : r.formMode && (c.schemas = L.formSchema), d.setDefaultComponentIds(c.schemas);
  }), d.setDesignMode();
  function u() {
    var h;
    const s = g(
      t.schemas,
      ((h = n.selectedNode) == null ? void 0 : h.id) ?? "root"
    );
    if (!s) return !1;
    const { index: e, schema: o, list: l } = s, p = b(o);
    l.splice(e + 1, 0, p), i(p), a.push("复制组件");
  }
  function m() {
    var l;
    if (!((l = n.selectedNode) != null && l.id) || n.selectedNode.id === t.schemas[0].id)
      return;
    const s = g(t.schemas, n.selectedNode.id);
    if (!s) return !1;
    let { index: e, list: o } = s;
    o.splice(e, 1), e === o.length && e--, i(o[e]), a.push("删除组件");
  }
  function i(s = n.selectedNode) {
    const o = H(t.schemas, (s == null ? void 0 : s.id) ?? "") || t.schemas[0];
    n.matched = I(t.schemas, o.id ?? ""), n.selectedNode = o;
  }
  function y(s = null) {
    var e;
    if (!s || n.disabledHover)
      return n.hoverNode = null, !1;
    if ((s == null ? void 0 : s.id) === ((e = n.hoverNode) == null ? void 0 : e.id))
      return !1;
    n.hoverNode = s;
  }
  function S() {
    B(t.schemas, c.schemas) && t.script === c.script || (C(t.schemas, c.schemas), t.script = c.script, i(t.schemas[0]), a.push("重置操作"), f("reset", t));
  }
  function E() {
    t.schemas = D(c.schemas), i(t.schemas[0]), a.push("初始化");
  }
  function M(s = document) {
    const e = z({ target: s });
    s.addEventListener(
      "keydown",
      (o) => {
        o.ctrlKey && o.key === "s" && o.preventDefault();
      },
      { capture: !0 }
    ), v(() => {
      const o = document.activeElement;
      o instanceof HTMLInputElement || o instanceof HTMLTextAreaElement || ((e.Delete.value || e.Backspace.value) && n.selectedNode && m(), e["ctrl+c"].value && n.selectedNode && u(), e["ctrl+z"].value && !e.shift.value && a.undo(), (e["ctrl+shift+z"].value || e["ctrl+y"].value) && a.redo(), e["ctrl+s"].value && f("save", t), e.Escape.value && i(t.schemas[0]));
    });
  }
  return E(), {
    handleCopy: u,
    handleDelete: m,
    pageManager: d,
    pageSchema: t,
    ready: N,
    reset: S,
    revoke: a,
    setHoverNode: y,
    setSelectedNode: i,
    setupHotkeys: M,
    state: n
  };
}
export {
  J as useDesigner
};