@tmagic/editor 1.3.0-alpha.18 → 1.3.0-alpha.19

package/dist/tmagic-editor.umd.cjs

@@ -402,13 +402,17 @@
     __name: "CodeBlockEditor",
     props: {
       content: {},
-      disabled: { type: Boolean }
+      disabled: { type: Boolean },
+      isDataSource: { type: Boolean }
     },
     emits: ["submit"],
     setup(__props, { expose: __expose, emit }) {
+      const props = __props;
       const services = vue.inject("services");
       const columnWidth = vue.computed(() => services?.uiService.get("columnWidth"));
-      const size = vue.computed(() => columnWidth.value ? columnWidth.value.center + columnWidth.value.right : 600);
+      const size = vue.computed(
+        () => columnWidth.value ? columnWidth.value.center + columnWidth.value.right - (props.isDataSource ? 100 : 0) : 600
+      );
       const codeEditorHeight = vue.ref("600px");
       const defaultParamColConfig = {
         type: "row",
@@ -445,16 +449,26 @@
           name: "name"
         },
         {
-          text: "注释",
+          text: "描述",
           name: "desc"
         },
+        {
+          text: "执行时机",
+          name: "timing",
+          type: "select",
+          options: [
+            { text: "初始化前", value: "beforeInit" },
+            { text: "初始化后", value: "afterInit" }
+          ],
+          display: () => props.isDataSource
+        },
         {
           type: "table",
           border: true,
           text: "参数",
           enableFullscreen: false,
+          enableToggleMode: false,
           name: "params",
-          maxHeight: "300px",
           dropSort: false,
           items: [
             {
@@ -464,7 +478,7 @@
             },
             {
               type: "text",
-              label: "注释",
+              label: "描述",
               name: "extra"
             },
             services?.codeBlockService.getParamsColConfig() || defaultParamColConfig
@@ -496,7 +510,7 @@
       const openHandler = () => {
         setTimeout(() => {
           if (fomDrawer.value) {
-            const height = fomDrawer.value?.bodyHeight - 468;
+            const height = fomDrawer.value?.bodyHeight - 348 - (props.isDataSource ? 50 : 0);
             codeEditorHeight.value = `${height > 100 ? height : 600}px`;
           }
         });
@@ -511,6 +525,7 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(form.MFormDrawer), {
+          class: "m-editor-code-block-editor",
           ref_key: "fomDrawer",
           ref: fomDrawer,
           "label-width": "80px",
@@ -833,6 +848,10 @@
           label: "属性描述",
           prop: "desc"
         },
+        {
+          label: "默认值",
+          prop: "defaultValue"
+        },
         {
           label: "操作",
           fixed: "right",
@@ -908,7 +927,8 @@
         },
         {
           name: "description",
-          text: "描述"
+          text: "描述",
+          type: "textarea"
         },
         {
           name: "defaultValue",
@@ -947,9 +967,10 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.createVNode(vue.unref(form.MFormDialog), {
+          vue.createVNode(vue.unref(form.MFormDrawer), {
             ref_key: "addDialog",
             ref: addDialog,
+            "label-width": "80px",
             title: filedTitle.value,
             config: dataSourceFieldsConfig,
             values: fieldValues.value,
@@ -1379,9 +1400,13 @@
           prop: "name"
         },
         {
-          label: "注释",
+          label: "描述",
           prop: "desc"
         },
+        {
+          label: "执行时机",
+          prop: "timing"
+        },
         {
           label: "参数",
           prop: "params",
@@ -1443,6 +1468,7 @@
             ref: codeBlockEditor,
             disabled: _ctx.disabled,
             content: vue.unref(codeConfig),
+            "is-data-source": true,
             onSubmit: submitCodeHandler
           }, null, 8, ["disabled", "content"])) : vue.createCommentVNode("", true)
         ]);
@@ -3541,78 +3567,6 @@
   }
   const propsService = new Props();
 
-  const beforePaste = async (position, config) => {
-    if (!config[0]?.style)
-      return config;
-    const curNode = editorService.get("node");
-    const { left: referenceLeft, top: referenceTop } = config[0].style;
-    const pasteConfigs = await Promise.all(
-      config.map(async (configItem) => {
-        const { offsetX = 0, offsetY = 0, ...positionClone } = position;
-        let pastePosition = positionClone;
-        if (!lodashEs.isEmpty(pastePosition) && curNode?.items) {
-          pastePosition = getPositionInContainer(pastePosition, curNode.id);
-        }
-        if (pastePosition.left && configItem.style?.left) {
-          pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
-        }
-        if (pastePosition.top && configItem.style?.top) {
-          pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
-        }
-        const pasteConfig = await propsService.setNewItemId(configItem);
-        if (pasteConfig.style) {
-          const { left, top } = pasteConfig.style;
-          if (typeof left === "number" || !!left && !isNaN(Number(left))) {
-            pasteConfig.style.left = Number(left) + offsetX;
-          }
-          if (typeof top === "number" || !!top && !isNaN(Number(top))) {
-            pasteConfig.style.top = Number(top) + offsetY;
-          }
-          pasteConfig.style = {
-            ...pasteConfig.style,
-            ...pastePosition
-          };
-        }
-        const root = editorService.get("root");
-        if (utils.isPage(pasteConfig) && root) {
-          pasteConfig.name = generatePageNameByApp(root);
-        }
-        return pasteConfig;
-      })
-    );
-    return pasteConfigs;
-  };
-  const getPositionInContainer = (position = {}, id) => {
-    let { left = 0, top = 0 } = position;
-    const parentEl = editorService.get("stage")?.renderer?.contentWindow?.document.getElementById(`${id}`);
-    const parentElRect = parentEl?.getBoundingClientRect();
-    left = left - (parentElRect?.left || 0);
-    top = top - (parentElRect?.top || 0);
-    return {
-      left,
-      top
-    };
-  };
-  const getAddParent = (node) => {
-    const curNode = editorService.get("node");
-    let parentNode;
-    if (utils.isPage(node)) {
-      parentNode = editorService.get("root");
-    } else if (curNode?.items) {
-      parentNode = curNode;
-    } else if (curNode?.id) {
-      parentNode = editorService.getParentById(curNode.id, false);
-    }
-    return parentNode;
-  };
-  const getDefaultConfig = async (addNode, parentNode) => {
-    const { type, inputEvent, ...config } = addNode;
-    const layout = await editorService.getLayout(vue.toRaw(parentNode), addNode);
-    const newNode = { ...vue.toRaw(await propsService.getPropsValue(type, config)) };
-    newNode.style = getInitPositionStyle(newNode.style, layout);
-    return newNode;
-  };
-
   let Editor$1 = class Editor extends BaseService {
     state = vue.reactive({
       root: null,
@@ -4328,169 +4282,76 @@
   };
   const editorService = new Editor$1();
 
-  const state = vue.reactive({
-    uiSelectMode: false,
-    showSrc: false,
-    zoom: 1,
-    stageContainerRect: {
-      width: 0,
-      height: 0
-    },
-    stageRect: {
-      width: 375,
-      height: 817
-    },
-    columnWidth: {
-      left: 0,
-      right: 0,
-      center: 0
-    },
-    showGuides: true,
-    showRule: true,
-    propsPanelSize: "small",
-    showAddPageButton: true
-  });
-  class Ui extends BaseService {
-    constructor() {
-      super(["zoom", "calcZoom"]);
-    }
-    set(name, value) {
-      const mask = editorService.get("stage")?.mask;
-      if (name === "stageRect") {
-        this.setStageRect(value);
-        return;
-      }
-      if (name === "showGuides") {
-        mask?.showGuides(value);
-      }
-      if (name === "showRule") {
-        mask?.showRule(value);
-      }
-      state[name] = value;
-    }
-    get(name) {
-      return state[name];
-    }
-    async zoom(zoom) {
-      this.set("zoom", (this.get("zoom") * 100 + zoom * 100) / 100);
-      if (this.get("zoom") < 0.1)
-        this.set("zoom", 0.1);
-    }
-    async calcZoom() {
-      const { stageRect, stageContainerRect } = state;
-      const { height, width } = stageContainerRect;
-      if (!width || !height)
-        return 1;
-      const stageWidth = stageRect.width + 30;
-      const stageHeight = stageRect.height + 30;
-      if (width > stageWidth && height > stageHeight) {
-        return 1;
-      }
-      return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
-    }
-    resetState() {
-      this.set("showSrc", false);
-      this.set("uiSelectMode", false);
-      this.set("zoom", 1);
-      this.set("stageContainerRect", {
-        width: 0,
-        height: 0
-      });
-    }
-    destroy() {
-      this.resetState();
-      this.removeAllListeners();
-      this.removeAllPlugins();
-    }
-    async setStageRect(value) {
-      state.stageRect = {
-        ...state.stageRect,
-        ...value
-      };
-      state.zoom = await this.calcZoom();
-    }
-  }
-  const uiService = new Ui();
-
-  const root = vue.computed(() => editorService.get("root"));
-  const page = vue.computed(() => editorService.get("page"));
-  const zoom = vue.computed(() => uiService.get("zoom") || 1);
-  const uiSelectMode = vue.computed(() => uiService.get("uiSelectMode"));
-  const getGuideLineKey = (key) => `${key}_${root.value?.id}_${page.value?.id}`;
-  const useStage = (stageOptions) => {
-    const stage = new StageCore({
-      render: stageOptions.render,
-      runtimeUrl: stageOptions.runtimeUrl,
-      zoom: zoom.value,
-      autoScrollIntoView: stageOptions.autoScrollIntoView,
-      isContainer: stageOptions.isContainer,
-      containerHighlightClassName: stageOptions.containerHighlightClassName,
-      containerHighlightDuration: stageOptions.containerHighlightDuration,
-      containerHighlightType: stageOptions.containerHighlightType,
-      disabledDragStart: stageOptions.disabledDragStart,
-      canSelect: (el, event, stop) => {
-        const elCanSelect = stageOptions.canSelect(el);
-        if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
-          document.dispatchEvent(new CustomEvent("ui-select", { detail: el }));
-          return stop();
+  const beforePaste = async (position, config) => {
+    if (!config[0]?.style)
+      return config;
+    const curNode = editorService.get("node");
+    const { left: referenceLeft, top: referenceTop } = config[0].style;
+    const pasteConfigs = await Promise.all(
+      config.map(async (configItem) => {
+        const { offsetX = 0, offsetY = 0, ...positionClone } = position;
+        let pastePosition = positionClone;
+        if (!lodashEs.isEmpty(pastePosition) && curNode?.items) {
+          pastePosition = getPositionInContainer(pastePosition, curNode.id);
         }
-        return elCanSelect;
-      },
-      moveableOptions: stageOptions.moveableOptions,
-      updateDragEl: stageOptions.updateDragEl
-    });
-    stage.mask.setGuides([
-      getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
-      getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY))
-    ]);
-    stage.on("select", (el) => {
-      if (`${editorService.get("node")?.id}` === el.id && editorService.get("nodes").length === 1)
-        return;
-      editorService.select(el.id);
-    });
-    stage.on("highlight", (el) => {
-      editorService.highlight(el.id);
-    });
-    stage.on("multi-select", (els) => {
-      editorService.multiSelect(els.map((el) => el.id));
-    });
-    stage.on("update", (ev) => {
-      if (ev.parentEl) {
-        for (const data of ev.data) {
-          editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
+        if (pastePosition.left && configItem.style?.left) {
+          pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
         }
-        return;
-      }
-      editorService.update(ev.data.map((data) => ({ id: data.el.id, style: data.style })));
-    });
-    stage.on("sort", (ev) => {
-      editorService.sort(ev.src, ev.dist);
-    });
-    stage.on("remove", (ev) => {
-      const nodes = ev.data.map(({ el }) => editorService.getNodeById(el.id));
-      editorService.remove(nodes.filter((node) => Boolean(node)));
-    });
-    stage.on("select-parent", () => {
-      const parent = editorService.get("parent");
-      if (!parent)
-        throw new Error("父节点为空");
-      editorService.select(parent);
-      editorService.get("stage")?.select(parent.id);
-    });
-    stage.on("change-guides", (e) => {
-      uiService.set("showGuides", true);
-      if (!root.value || !page.value)
-        return;
-      const storageKey = getGuideLineKey(
-        e.type === StageCore.GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY
-      );
-      if (e.guides.length) {
-        globalThis.localStorage.setItem(storageKey, JSON.stringify(e.guides));
-      } else {
-        globalThis.localStorage.removeItem(storageKey);
-      }
-    });
-    return stage;
+        if (pastePosition.top && configItem.style?.top) {
+          pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
+        }
+        const pasteConfig = await propsService.setNewItemId(configItem);
+        if (pasteConfig.style) {
+          const { left, top } = pasteConfig.style;
+          if (typeof left === "number" || !!left && !isNaN(Number(left))) {
+            pasteConfig.style.left = Number(left) + offsetX;
+          }
+          if (typeof top === "number" || !!top && !isNaN(Number(top))) {
+            pasteConfig.style.top = Number(top) + offsetY;
+          }
+          pasteConfig.style = {
+            ...pasteConfig.style,
+            ...pastePosition
+          };
+        }
+        const root = editorService.get("root");
+        if (utils.isPage(pasteConfig) && root) {
+          pasteConfig.name = generatePageNameByApp(root);
+        }
+        return pasteConfig;
+      })
+    );
+    return pasteConfigs;
+  };
+  const getPositionInContainer = (position = {}, id) => {
+    let { left = 0, top = 0 } = position;
+    const parentEl = editorService.get("stage")?.renderer?.contentWindow?.document.getElementById(`${id}`);
+    const parentElRect = parentEl?.getBoundingClientRect();
+    left = left - (parentElRect?.left || 0);
+    top = top - (parentElRect?.top || 0);
+    return {
+      left,
+      top
+    };
+  };
+  const getAddParent = (node) => {
+    const curNode = editorService.get("node");
+    let parentNode;
+    if (utils.isPage(node)) {
+      parentNode = editorService.get("root");
+    } else if (curNode?.items) {
+      parentNode = curNode;
+    } else if (curNode?.id) {
+      parentNode = editorService.getParentById(curNode.id, false);
+    }
+    return parentNode;
+  };
+  const getDefaultConfig = async (addNode, parentNode) => {
+    const { type, inputEvent, ...config } = addNode;
+    const layout = await editorService.getLayout(vue.toRaw(parentNode), addNode);
+    const newNode = { ...vue.toRaw(await propsService.getPropsValue(type, config)) };
+    newNode.style = getInitPositionStyle(newNode.style, layout);
+    return newNode;
   };
 
   const _hoisted_1$h = { class: "m-editor-empty-panel" };
@@ -7220,6 +7081,171 @@
     }
   });
 
+  const state = vue.reactive({
+    uiSelectMode: false,
+    showSrc: false,
+    zoom: 1,
+    stageContainerRect: {
+      width: 0,
+      height: 0
+    },
+    stageRect: {
+      width: 375,
+      height: 817
+    },
+    columnWidth: {
+      left: 0,
+      right: 0,
+      center: 0
+    },
+    showGuides: true,
+    showRule: true,
+    propsPanelSize: "small",
+    showAddPageButton: true
+  });
+  class Ui extends BaseService {
+    constructor() {
+      super(["zoom", "calcZoom"]);
+    }
+    set(name, value) {
+      const mask = editorService.get("stage")?.mask;
+      if (name === "stageRect") {
+        this.setStageRect(value);
+        return;
+      }
+      if (name === "showGuides") {
+        mask?.showGuides(value);
+      }
+      if (name === "showRule") {
+        mask?.showRule(value);
+      }
+      state[name] = value;
+    }
+    get(name) {
+      return state[name];
+    }
+    async zoom(zoom) {
+      this.set("zoom", (this.get("zoom") * 100 + zoom * 100) / 100);
+      if (this.get("zoom") < 0.1)
+        this.set("zoom", 0.1);
+    }
+    async calcZoom() {
+      const { stageRect, stageContainerRect } = state;
+      const { height, width } = stageContainerRect;
+      if (!width || !height)
+        return 1;
+      const stageWidth = stageRect.width + 30;
+      const stageHeight = stageRect.height + 30;
+      if (width > stageWidth && height > stageHeight) {
+        return 1;
+      }
+      return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
+    }
+    resetState() {
+      this.set("showSrc", false);
+      this.set("uiSelectMode", false);
+      this.set("zoom", 1);
+      this.set("stageContainerRect", {
+        width: 0,
+        height: 0
+      });
+    }
+    destroy() {
+      this.resetState();
+      this.removeAllListeners();
+      this.removeAllPlugins();
+    }
+    async setStageRect(value) {
+      state.stageRect = {
+        ...state.stageRect,
+        ...value
+      };
+      state.zoom = await this.calcZoom();
+    }
+  }
+  const uiService = new Ui();
+
+  const root = vue.computed(() => editorService.get("root"));
+  const page = vue.computed(() => editorService.get("page"));
+  const zoom = vue.computed(() => uiService.get("zoom") || 1);
+  const uiSelectMode = vue.computed(() => uiService.get("uiSelectMode"));
+  const getGuideLineKey = (key) => `${key}_${root.value?.id}_${page.value?.id}`;
+  const useStage = (stageOptions) => {
+    const stage = new StageCore({
+      render: stageOptions.render,
+      runtimeUrl: stageOptions.runtimeUrl,
+      zoom: zoom.value,
+      autoScrollIntoView: stageOptions.autoScrollIntoView,
+      isContainer: stageOptions.isContainer,
+      containerHighlightClassName: stageOptions.containerHighlightClassName,
+      containerHighlightDuration: stageOptions.containerHighlightDuration,
+      containerHighlightType: stageOptions.containerHighlightType,
+      disabledDragStart: stageOptions.disabledDragStart,
+      canSelect: (el, event, stop) => {
+        const elCanSelect = stageOptions.canSelect(el);
+        if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
+          document.dispatchEvent(new CustomEvent("ui-select", { detail: el }));
+          return stop();
+        }
+        return elCanSelect;
+      },
+      moveableOptions: stageOptions.moveableOptions,
+      updateDragEl: stageOptions.updateDragEl
+    });
+    stage.mask.setGuides([
+      getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
+      getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY))
+    ]);
+    stage.on("select", (el) => {
+      if (`${editorService.get("node")?.id}` === el.id && editorService.get("nodes").length === 1)
+        return;
+      editorService.select(el.id);
+    });
+    stage.on("highlight", (el) => {
+      editorService.highlight(el.id);
+    });
+    stage.on("multi-select", (els) => {
+      editorService.multiSelect(els.map((el) => el.id));
+    });
+    stage.on("update", (ev) => {
+      if (ev.parentEl) {
+        for (const data of ev.data) {
+          editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
+        }
+        return;
+      }
+      editorService.update(ev.data.map((data) => ({ id: data.el.id, style: data.style })));
+    });
+    stage.on("sort", (ev) => {
+      editorService.sort(ev.src, ev.dist);
+    });
+    stage.on("remove", (ev) => {
+      const nodes = ev.data.map(({ el }) => editorService.getNodeById(el.id));
+      editorService.remove(nodes.filter((node) => Boolean(node)));
+    });
+    stage.on("select-parent", () => {
+      const parent = editorService.get("parent");
+      if (!parent)
+        throw new Error("父节点为空");
+      editorService.select(parent);
+      editorService.get("stage")?.select(parent.id);
+    });
+    stage.on("change-guides", (e) => {
+      uiService.set("showGuides", true);
+      if (!root.value || !page.value)
+        return;
+      const storageKey = getGuideLineKey(
+        e.type === StageCore.GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY
+      );
+      if (e.guides.length) {
+        globalThis.localStorage.setItem(storageKey, JSON.stringify(e.guides));
+      } else {
+        globalThis.localStorage.removeItem(storageKey);
+      }
+    });
+    return stage;
+  };
+
   const _hoisted_1$1 = {
     viewBox: "0 0 24 24",
     fill: "none",
@@ -9062,6 +9088,8 @@
   exports.storageService = storageService;
   exports.styleTabConfig = styleTabConfig;
   exports.uiService = uiService;
+  exports.useCodeBlockEdit = useCodeBlockEdit;
+  exports.useDataSourceMethod = useDataSourceMethod;
   exports.useStage = useStage;
   exports.warn = warn;