@tmagic/editor 1.4.4 → 1.4.5

package/dist/style.css

@@ -198,7 +198,7 @@
   line-height: 15px;
   height: auto;
   padding: 8px;
-  color: white;
+  color: rgb(255, 255, 255);
   box-sizing: border-box;
   cursor: pointer;
 }
@@ -216,7 +216,7 @@
   color: rgba(255, 255, 255, 0.6);
 }
 .m-editor-sidebar .m-editor-sidebar-header i:hover {
-  color: white;
+  color: rgb(255, 255, 255);
 }
 .m-editor-sidebar .m-editor-sidebar-header .magic-editor-tab-panel-title {
   font-size: 12px;

package/dist/tmagic-editor.js

@@ -8,13 +8,13 @@ import * as monaco from 'monaco-editor';
 import { MContainer, MForm, filterFunction, createValues, MFormBox, MCascader, MSelect, MPanel } from '@tmagic/form';
 import { HookCodeType, HookType, NodeType, ActionType } from '@tmagic/schema';
 import { MagicTable } from '@tmagic/table';
-import { toLine, guid, isPage, isPageFragment, isPop, getNodePath, isNumber, getValueByKeyPath, setValueByKeyPath, convertToNumber, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, getNodes } from '@tmagic/utils';
+import { toLine, guid, isPage, isPageFragment, isPop, getNodePath, isNumber, calcValueByFontsize, getValueByKeyPath, setValueByKeyPath, convertToNumber, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, getNodes } from '@tmagic/utils';
 import VanillaMoveable from 'moveable';
 import { Watcher, DepTargetType, createRelatedCompTarget, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
 export { DepTargetType } from '@tmagic/dep';
 import { EventEmitter } from 'events';
 import Gesto from 'gesto';
-import StageCore, { GuidesType, getOffset, calcValueByFontsize, RenderType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
+import StageCore, { GuidesType, getOffset, RenderType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import KeyController from 'keycon';
 
@@ -621,7 +621,6 @@ const fillConfig$1 = (config) => [
       },
       {
         title: "事件配置",
-        display: false,
         items: [
           {
             name: "events",
@@ -772,6 +771,33 @@ const getDisplayField = (dataSources, key) => {
   }
   return displayState;
 };
+const getCascaderOptionsFromFields = (fields = [], dataSourceFieldType = ["any"]) => {
+  const child = [];
+  fields.forEach((field) => {
+    if (!dataSourceFieldType.length) {
+      dataSourceFieldType.push("any");
+    }
+    const children = getCascaderOptionsFromFields(field.fields, dataSourceFieldType);
+    const item = {
+      label: field.title || field.name,
+      value: field.name,
+      children
+    };
+    const fieldType = field.type || "any";
+    if (dataSourceFieldType.includes("any") || dataSourceFieldType.includes(fieldType)) {
+      child.push(item);
+      return;
+    }
+    if (!dataSourceFieldType.includes(fieldType) && !["array", "object", "any"].includes(fieldType)) {
+      return;
+    }
+    if (!children.length && ["object", "array", "any"].includes(field.type || "")) {
+      return;
+    }
+    child.push(item);
+  });
+  return child;
+};
 
 const compose = (middleware, isAsync) => {
   if (!Array.isArray(middleware))
@@ -1634,11 +1660,13 @@ const getMiddleTop = (node, parentNode, stage) => {
     height = 0;
   }
   const { height: parentHeight } = parentNode.style;
+  const { scrollTop = 0, wrapperHeight } = stage.mask;
+  const wrapperHeightDeal = calcValueByFontsize(stage.renderer.getDocument(), wrapperHeight);
+  const scrollTopDeal = calcValueByFontsize(stage.renderer.getDocument(), scrollTop);
   if (isPage(parentNode)) {
-    const { scrollTop = 0, wrapperHeight } = stage.mask;
-    return (wrapperHeight - height) / 2 + scrollTop;
+    return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
   }
-  return (parentHeight - height) / 2;
+  return (Math.min(parentHeight, wrapperHeightDeal) - height) / 2;
 };
 const getInitPositionStyle = (style = {}, layout) => {
   if (layout === Layout.ABSOLUTE) {
@@ -1739,8 +1767,12 @@ const fixNodeLeft = (config, parent, doc) => {
   const el = doc.getElementById(`${config.id}`);
   const parentEl = doc.getElementById(`${parent.id}`);
   const left = Number(config.style?.left) || 0;
-  if (el && parentEl && el.offsetWidth + left > parentEl.offsetWidth) {
-    return parentEl.offsetWidth - el.offsetWidth;
+  if (el && parentEl) {
+    const calcParentOffsetWidth = calcValueByFontsize(doc, parentEl.offsetWidth);
+    const calcElOffsetWidth = calcValueByFontsize(doc, el.offsetWidth);
+    if (calcElOffsetWidth + left > calcParentOffsetWidth) {
+      return calcParentOffsetWidth - calcElOffsetWidth;
+    }
   }
   return config.style.left;
 };
@@ -2827,7 +2859,7 @@ class Editor extends BaseService {
       const el = doc.getElementById(`${node.id}`);
       const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
       if (parentEl && el) {
-        node.style.left = (parentEl.clientWidth - el.clientWidth) / 2;
+        node.style.left = calcValueByFontsize(doc, (parentEl.clientWidth - el.clientWidth) / 2);
         node.style.right = "";
       }
     } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
@@ -4355,33 +4387,6 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       return value[0].replace(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, "");
     });
     const dataSources = computed(() => services?.dataSourceService.get("dataSources"));
-    const getOptionChildren = (fields = [], dataSourceFieldType = ["any"]) => {
-      const child = [];
-      fields.forEach((field) => {
-        if (!dataSourceFieldType.length) {
-          dataSourceFieldType.push("any");
-        }
-        const children = getOptionChildren(field.fields, dataSourceFieldType);
-        const item = {
-          label: field.title || field.name,
-          value: field.name,
-          children
-        };
-        const fieldType = field.type || "any";
-        if (dataSourceFieldType.includes("any") || dataSourceFieldType.includes(fieldType)) {
-          child.push(item);
-          return;
-        }
-        if (!dataSourceFieldType.includes(fieldType) && !["array", "object", "any"].includes(fieldType)) {
-          return;
-        }
-        if (!children.length && ["object", "array", "any"].includes(field.type || "")) {
-          return;
-        }
-        child.push(item);
-      });
-      return child;
-    };
     const cascaderConfig = computed(() => {
       const valueIsKey = props.config.value === "key";
       return {
@@ -4392,7 +4397,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
           const options = dataSources.value?.map((ds) => ({
             label: ds.title || ds.id,
             value: valueIsKey ? ds.id : `${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
-            children: getOptionChildren(ds.fields, props.config.dataSourceFieldType)
+            children: getCascaderOptionsFromFields(ds.fields, props.config.dataSourceFieldType)
           })) || [];
           return options.filter((option) => option.children.length);
         }
@@ -4444,7 +4449,6 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$q, [
         (openBlock(), createBlock(resolveDynamicComponent(tagName.value), {
-          style: { "width": "100%" },
           config: showDataSourceFieldSelect.value || !_ctx.config.fieldConfig ? cascaderConfig.value : _ctx.config.fieldConfig,
           model: _ctx.model,
           name: _ctx.name,
@@ -5631,24 +5635,41 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     const eventsService = services?.eventsService;
     const codeBlockService = services?.codeBlockService;
     const eventNameConfig = computed(() => {
+      const fieldType = props.config.src === "component" ? "select" : "cascader";
       const defaultEventNameConfig = {
         name: "name",
         text: "事件",
-        type: "select",
+        type: fieldType,
         labelWidth: "40px",
+        checkStrictly: true,
+        valueSeparator: ".",
         options: (mForm, { formValue }) => {
           let events = [];
           if (!eventsService || !dataSourceService)
             return events;
           if (props.config.src === "component") {
             events = eventsService.getEvent(formValue.type);
-          } else if (props.config.src === "datasource") {
+            return events.map((option) => ({
+              text: option.label,
+              value: option.value
+            }));
+          }
+          if (props.config.src === "datasource") {
             events = dataSourceService.getFormEvent(formValue.type);
+            const dataSource = dataSourceService.getDataSourceById(formValue.id);
+            const fields = dataSource?.fields || [];
+            if (fields.length > 0) {
+              return [
+                ...events,
+                {
+                  label: "数据变化",
+                  value: DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX,
+                  children: getCascaderOptionsFromFields(fields)
+                }
+              ];
+            }
+            return events;
           }
-          return events.map((option) => ({
-            text: option.label,
-            value: option.value
-          }));
         }
       };
       return { ...defaultEventNameConfig, ...props.config.eventNameConfig };
@@ -8614,8 +8635,8 @@ const usePasteMenu = (menu) => ({
       const stage = services?.editorService?.get("stage");
       const rect = menu.value.$el.getBoundingClientRect();
       const parentRect = stage?.container?.getBoundingClientRect();
-      const initialLeft = (rect.left || 0) - (parentRect?.left || 0);
-      const initialTop = (rect.top || 0) - (parentRect?.top || 0);
+      const initialLeft = calcValueByFontsize(stage?.renderer.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) / services.uiService.get("zoom");
+      const initialTop = calcValueByFontsize(stage?.renderer.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) / services.uiService.get("zoom");
       services?.editorService?.paste({ left: initialLeft, top: initialTop });
     } else {
       services?.editorService?.paste();
@@ -9612,7 +9633,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               class: "m-editor-sidebar-content",
               key: config.$key ?? index
             }, [
-              config && !unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({ key: 0 }, config.props || {}, toHandlers(config?.listeners || {})), createSlots({ _: 2 }, [
+              config && !unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({
+                key: 0,
+                ref_for: true
+              }, config.props || {}, toHandlers(config?.listeners || {})), createSlots({ _: 2 }, [
                 config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
                   name: "component-list-panel-header",
                   fn: withCtx(() => [
@@ -9745,7 +9769,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               }, {
                 body: withCtx(() => [
                   createElementVNode("div", _hoisted_5$1, [
-                    config && unref(floatBoxStates)[config.$key].status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({ key: 0 }, config.props || {}, toHandlers(config?.listeners || {})), null, 16)) : createCommentVNode("", true)
+                    config && unref(floatBoxStates)[config.$key].status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({
+                      key: 0,
+                      ref_for: true
+                    }, config.props || {}, toHandlers(config?.listeners || {})), null, 16)) : createCommentVNode("", true)
                   ])
                 ]),
                 _: 2
@@ -10566,17 +10593,17 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           position = "absolute";
           top = e.clientY - containerRect.top + scrollTop;
           left = e.clientX - containerRect.left + scrollLeft;
-          if (parentEl && doc) {
+          if (parentEl) {
             const { left: parentLeft, top: parentTop } = getOffset(parentEl);
-            left = left - calcValueByFontsize(doc, parentLeft) * zoom.value;
-            top = top - calcValueByFontsize(doc, parentTop) * zoom.value;
+            left = left - parentLeft * zoom.value;
+            top = top - parentTop * zoom.value;
           }
         }
         config.data.style = {
           ...style,
           position,
-          top: top / zoom.value,
-          left: left / zoom.value
+          top: calcValueByFontsize(doc, top / zoom.value),
+          left: calcValueByFontsize(doc, left / zoom.value)
         };
         config.data.inputEvent = e;
         services?.editorService.add(config.data, parent);
@@ -11906,4 +11933,4 @@ const index = {
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$J as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$O as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$L as DataSourceFieldSelect, _sfc_main$M as DataSourceFields, _sfc_main$K as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$U as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$y as LayoutContainer, _sfc_main$B as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$z as Resizer, SideItemKey, _sfc_main$y as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFloatBox, useStage, useWindowRect, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$J as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$O as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$L as DataSourceFieldSelect, _sfc_main$M as DataSourceFields, _sfc_main$K as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$U as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$y as LayoutContainer, _sfc_main$B as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$z as Resizer, SideItemKey, _sfc_main$y as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFloatBox, useStage, useWindowRect, warn };

package/dist/tmagic-editor.umd.cjs

@@ -626,7 +626,6 @@
         },
         {
           title: "事件配置",
-          display: false,
           items: [
             {
               name: "events",
@@ -777,6 +776,33 @@
     }
     return displayState;
   };
+  const getCascaderOptionsFromFields = (fields = [], dataSourceFieldType = ["any"]) => {
+    const child = [];
+    fields.forEach((field) => {
+      if (!dataSourceFieldType.length) {
+        dataSourceFieldType.push("any");
+      }
+      const children = getCascaderOptionsFromFields(field.fields, dataSourceFieldType);
+      const item = {
+        label: field.title || field.name,
+        value: field.name,
+        children
+      };
+      const fieldType = field.type || "any";
+      if (dataSourceFieldType.includes("any") || dataSourceFieldType.includes(fieldType)) {
+        child.push(item);
+        return;
+      }
+      if (!dataSourceFieldType.includes(fieldType) && !["array", "object", "any"].includes(fieldType)) {
+        return;
+      }
+      if (!children.length && ["object", "array", "any"].includes(field.type || "")) {
+        return;
+      }
+      child.push(item);
+    });
+    return child;
+  };
 
   const compose = (middleware, isAsync) => {
     if (!Array.isArray(middleware))
@@ -1639,11 +1665,13 @@
       height = 0;
     }
     const { height: parentHeight } = parentNode.style;
+    const { scrollTop = 0, wrapperHeight } = stage.mask;
+    const wrapperHeightDeal = utils.calcValueByFontsize(stage.renderer.getDocument(), wrapperHeight);
+    const scrollTopDeal = utils.calcValueByFontsize(stage.renderer.getDocument(), scrollTop);
     if (utils.isPage(parentNode)) {
-      const { scrollTop = 0, wrapperHeight } = stage.mask;
-      return (wrapperHeight - height) / 2 + scrollTop;
+      return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
     }
-    return (parentHeight - height) / 2;
+    return (Math.min(parentHeight, wrapperHeightDeal) - height) / 2;
   };
   const getInitPositionStyle = (style = {}, layout) => {
     if (layout === Layout.ABSOLUTE) {
@@ -1744,8 +1772,12 @@
     const el = doc.getElementById(`${config.id}`);
     const parentEl = doc.getElementById(`${parent.id}`);
     const left = Number(config.style?.left) || 0;
-    if (el && parentEl && el.offsetWidth + left > parentEl.offsetWidth) {
-      return parentEl.offsetWidth - el.offsetWidth;
+    if (el && parentEl) {
+      const calcParentOffsetWidth = utils.calcValueByFontsize(doc, parentEl.offsetWidth);
+      const calcElOffsetWidth = utils.calcValueByFontsize(doc, el.offsetWidth);
+      if (calcElOffsetWidth + left > calcParentOffsetWidth) {
+        return calcParentOffsetWidth - calcElOffsetWidth;
+      }
     }
     return config.style.left;
   };
@@ -2832,7 +2864,7 @@
         const el = doc.getElementById(`${node.id}`);
         const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
         if (parentEl && el) {
-          node.style.left = (parentEl.clientWidth - el.clientWidth) / 2;
+          node.style.left = utils.calcValueByFontsize(doc, (parentEl.clientWidth - el.clientWidth) / 2);
           node.style.right = "";
         }
       } else if (parent.style && utils.isNumber(parent.style?.width) && utils.isNumber(node.style?.width)) {
@@ -4360,33 +4392,6 @@
         return value[0].replace(utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, "");
       });
       const dataSources = vue.computed(() => services?.dataSourceService.get("dataSources"));
-      const getOptionChildren = (fields = [], dataSourceFieldType = ["any"]) => {
-        const child = [];
-        fields.forEach((field) => {
-          if (!dataSourceFieldType.length) {
-            dataSourceFieldType.push("any");
-          }
-          const children = getOptionChildren(field.fields, dataSourceFieldType);
-          const item = {
-            label: field.title || field.name,
-            value: field.name,
-            children
-          };
-          const fieldType = field.type || "any";
-          if (dataSourceFieldType.includes("any") || dataSourceFieldType.includes(fieldType)) {
-            child.push(item);
-            return;
-          }
-          if (!dataSourceFieldType.includes(fieldType) && !["array", "object", "any"].includes(fieldType)) {
-            return;
-          }
-          if (!children.length && ["object", "array", "any"].includes(field.type || "")) {
-            return;
-          }
-          child.push(item);
-        });
-        return child;
-      };
       const cascaderConfig = vue.computed(() => {
         const valueIsKey = props.config.value === "key";
         return {
@@ -4397,7 +4402,7 @@
             const options = dataSources.value?.map((ds) => ({
               label: ds.title || ds.id,
               value: valueIsKey ? ds.id : `${utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
-              children: getOptionChildren(ds.fields, props.config.dataSourceFieldType)
+              children: getCascaderOptionsFromFields(ds.fields, props.config.dataSourceFieldType)
             })) || [];
             return options.filter((option) => option.children.length);
           }
@@ -4449,7 +4454,6 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
           (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
-            style: { "width": "100%" },
             config: showDataSourceFieldSelect.value || !_ctx.config.fieldConfig ? cascaderConfig.value : _ctx.config.fieldConfig,
             model: _ctx.model,
             name: _ctx.name,
@@ -5636,24 +5640,41 @@
       const eventsService = services?.eventsService;
       const codeBlockService = services?.codeBlockService;
       const eventNameConfig = vue.computed(() => {
+        const fieldType = props.config.src === "component" ? "select" : "cascader";
         const defaultEventNameConfig = {
           name: "name",
           text: "事件",
-          type: "select",
+          type: fieldType,
           labelWidth: "40px",
+          checkStrictly: true,
+          valueSeparator: ".",
           options: (mForm, { formValue }) => {
             let events = [];
             if (!eventsService || !dataSourceService)
               return events;
             if (props.config.src === "component") {
               events = eventsService.getEvent(formValue.type);
-            } else if (props.config.src === "datasource") {
+              return events.map((option) => ({
+                text: option.label,
+                value: option.value
+              }));
+            }
+            if (props.config.src === "datasource") {
               events = dataSourceService.getFormEvent(formValue.type);
+              const dataSource = dataSourceService.getDataSourceById(formValue.id);
+              const fields = dataSource?.fields || [];
+              if (fields.length > 0) {
+                return [
+                  ...events,
+                  {
+                    label: "数据变化",
+                    value: utils.DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX,
+                    children: getCascaderOptionsFromFields(fields)
+                  }
+                ];
+              }
+              return events;
             }
-            return events.map((option) => ({
-              text: option.label,
-              value: option.value
-            }));
           }
         };
         return { ...defaultEventNameConfig, ...props.config.eventNameConfig };
@@ -8619,8 +8640,8 @@
         const stage = services?.editorService?.get("stage");
         const rect = menu.value.$el.getBoundingClientRect();
         const parentRect = stage?.container?.getBoundingClientRect();
-        const initialLeft = (rect.left || 0) - (parentRect?.left || 0);
-        const initialTop = (rect.top || 0) - (parentRect?.top || 0);
+        const initialLeft = utils.calcValueByFontsize(stage?.renderer.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) / services.uiService.get("zoom");
+        const initialTop = utils.calcValueByFontsize(stage?.renderer.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) / services.uiService.get("zoom");
         services?.editorService?.paste({ left: initialLeft, top: initialTop });
       } else {
         services?.editorService?.paste();
@@ -9617,7 +9638,10 @@
                 class: "m-editor-sidebar-content",
                 key: config.$key ?? index
               }, [
-                config && !vue.unref(floatBoxStates)[config.$key]?.status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({ key: 0 }, config.props || {}, vue.toHandlers(config?.listeners || {})), vue.createSlots({ _: 2 }, [
+                config && !vue.unref(floatBoxStates)[config.$key]?.status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({
+                  key: 0,
+                  ref_for: true
+                }, config.props || {}, vue.toHandlers(config?.listeners || {})), vue.createSlots({ _: 2 }, [
                   config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
                     name: "component-list-panel-header",
                     fn: vue.withCtx(() => [
@@ -9750,7 +9774,10 @@
                 }, {
                   body: vue.withCtx(() => [
                     vue.createElementVNode("div", _hoisted_5$1, [
-                      config && vue.unref(floatBoxStates)[config.$key].status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({ key: 0 }, config.props || {}, vue.toHandlers(config?.listeners || {})), null, 16)) : vue.createCommentVNode("", true)
+                      config && vue.unref(floatBoxStates)[config.$key].status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({
+                        key: 0,
+                        ref_for: true
+                      }, config.props || {}, vue.toHandlers(config?.listeners || {})), null, 16)) : vue.createCommentVNode("", true)
                     ])
                   ]),
                   _: 2
@@ -10571,17 +10598,17 @@
             position = "absolute";
             top = e.clientY - containerRect.top + scrollTop;
             left = e.clientX - containerRect.left + scrollLeft;
-            if (parentEl && doc) {
+            if (parentEl) {
               const { left: parentLeft, top: parentTop } = StageCore.getOffset(parentEl);
-              left = left - StageCore.calcValueByFontsize(doc, parentLeft) * zoom.value;
-              top = top - StageCore.calcValueByFontsize(doc, parentTop) * zoom.value;
+              left = left - parentLeft * zoom.value;
+              top = top - parentTop * zoom.value;
             }
           }
           config.data.style = {
             ...style,
             position,
-            top: top / zoom.value,
-            left: left / zoom.value
+            top: utils.calcValueByFontsize(doc, top / zoom.value),
+            left: utils.calcValueByFontsize(doc, left / zoom.value)
           };
           config.data.inputEvent = e;
           services?.editorService.add(config.data, parent);
@@ -11911,7 +11938,7 @@
     }
   };
 
-  Object.defineProperty(exports, 'DepTargetType', {
+  Object.defineProperty(exports, "DepTargetType", {
     enumerable: true,
     get: () => dep.DepTargetType
   });
@@ -11975,6 +12002,7 @@
   exports.generatePageName = generatePageName;
   exports.generatePageNameByApp = generatePageNameByApp;
   exports.getAddParent = getAddParent;
+  exports.getCascaderOptionsFromFields = getCascaderOptionsFromFields;
   exports.getConfig = getConfig;
   exports.getDefaultConfig = getDefaultConfig;
   exports.getDisplayField = getDisplayField;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.4",
+  "version": "1.4.5",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -40,16 +40,7 @@
     "typescript"
   ],
   "dependencies": {
-    "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.3.1",
-    "@tmagic/core": "1.4.4",
-    "@tmagic/dep": "1.4.4",
-    "@tmagic/design": "1.4.4",
-    "@tmagic/form": "1.4.4",
-    "@tmagic/schema": "1.4.4",
-    "@tmagic/stage": "1.4.4",
-    "@tmagic/table": "1.4.4",
-    "@tmagic/utils": "1.4.4",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "emmet-monaco-es": "^5.3.0",
@@ -57,37 +48,41 @@
     "gesto": "^1.19.1",
     "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",
-    "monaco-editor": "^0.47.0",
-    "moveable": "^0.51.1",
+    "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
-    "vue": "^3.4.21"
+    "@tmagic/dep": "1.4.5",
+    "@tmagic/table": "1.4.5"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.4.4",
-    "@tmagic/form": "1.4.4",
-    "monaco-editor": "^0.47.0",
-    "vue": "^3.4.21"
+    "monaco-editor": "^0.48.0",
+    "vue": "^3.4.27",
+    "@tmagic/design": "1.4.5",
+    "@tmagic/form": "1.4.5",
+    "@tmagic/schema": "1.4.5",
+    "@tmagic/stage": "1.4.5",
+    "@tmagic/utils": "1.4.5",
+    "@tmagic/core": "1.4.5"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^18.19.0",
     "@types/serialize-javascript": "^5.0.1",
-    "@vitejs/plugin-vue": "^4.5.2",
-    "@vue/compiler-sfc": "^3.4.21",
-    "@vue/test-utils": "^2.4.4",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/compiler-sfc": "^3.4.27",
+    "@vue/test-utils": "^2.4.6",
     "rimraf": "^3.0.2",
-    "sass": "^1.35.1",
+    "sass": "^1.77.0",
     "tsc-alias": "^1.8.5",
     "type-fest": "^4.10.3",
     "typescript": "^5.4.2",
-    "vite": "^5.1.6",
-    "vue-tsc": "^2.0.6"
+    "vite": "^5.2.11",
+    "vue-tsc": "^2.0.16"
   },
   "scripts": {
     "build": "npm run build:type && vite build",
     "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "clear:type": "rimraf ./types",
-    "type:check": "vue-tsc --noEmit"
+    "check:type": "vue-tsc --noEmit --project tsconfig.build.json"
   }
 }