@tmagic/editor 1.7.5-beta.1 → 1.7.6

package/dist/tmagic-editor.js

@@ -15,7 +15,7 @@ import { emmetHTML, emmetCSS } from 'emmet-monaco-es';
 import * as monaco from 'monaco-editor';
 import { HookCodeType, HookType, NODE_DISABLE_CODE_BLOCK_KEY, NODE_DISABLE_DATA_SOURCE_KEY, NODE_CONDS_RESULT_KEY, NODE_CONDS_KEY, Target, Watcher, NodeType, ActionType, DepTargetType, traverseTarget, createCodeBlockTarget, createDataSourceTarget, createDataSourceCondTarget, createDataSourceMethodTarget, updateNode } from '@tmagic/core';
 export { DepTargetType } from '@tmagic/core';
-import { isPage, isPageFragment, isPop, getNodePath, isNumber, getElById, calcValueByFontsize, isValueIncludeDataSource, toLine, guid, getValueByKeyPath, setValueByKeyPath, getNodeInfo, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, dataSourceTemplateRegExp, getKeysArray, getKeys, convertToNumber, getIdFromEl, traverseNode, getDefaultValueFromFields, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, removeClassName, addClassName, removeClassNameByClassName, getNodes, getDepNodeIds } from '@tmagic/utils';
+import { isPage, isPageFragment, isPop, getNodePath, isNumber, getElById, calcValueByFontsize, isValueIncludeDataSource, toLine, guid, getValueByKeyPath, setValueByKeyPath, getNodeInfo, dataSourceTemplateRegExp, getKeysArray, getKeys, convertToNumber, getIdFromEl, traverseNode, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, removeDataSourceFieldPrefix, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, removeClassName, addClassName, removeClassNameByClassName, getNodes, getDepNodeIds } from '@tmagic/utils';
 export * from '@tmagic/utils';
 import VanillaMoveable from 'moveable';
 import StageCore__default, { isFixed, GuidesType, getOffset, ContainerHighlightType, CONTAINER_HIGHLIGHT_CLASS_NAME, RenderType } from '@tmagic/stage';
@@ -89,9 +89,7 @@ const getEditorConfig = (key) => $TMAGIC_EDITOR[key];
 emmetHTML(monaco);
 emmetCSS(monaco, ["css", "scss"]);
 
-const _hoisted_1$_ = {
-  class: /* @__PURE__ */ normalizeClass(`magic-code-editor`)
-};
+const _hoisted_1$_ = { class: "magic-code-editor" };
 const _hoisted_2$o = {
   ref: "codeEditor",
   class: "magic-code-editor-content"
@@ -113,13 +111,15 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
     autoSave: { type: Boolean, default: true },
     parse: { type: Boolean, default: false },
     disabledFullScreen: { type: Boolean, default: false },
-    autosize: {}
+    autosize: {},
+    editorCustomType: {}
   },
   emits: ["initd", "save"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const autoHeight = ref("");
+    let cachedExtraHeight = null;
     const computeHeight = computed(() => {
       if (fullScreen.value) {
         return "100%";
@@ -132,6 +132,30 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
       }
       return "100%";
     });
+    const calculateExtraHeight = () => {
+      let extraHeight = 10;
+      if (vsEditor && codeEditorEl.value) {
+        try {
+          const editorElement = codeEditorEl.value.querySelector(".monaco-editor");
+          const scrollableElement = codeEditorEl.value.querySelector(".monaco-scrollable-element");
+          if (editorElement && scrollableElement) {
+            const editorRect = editorElement.getBoundingClientRect();
+            const scrollableRect = scrollableElement.getBoundingClientRect();
+            extraHeight = Math.max(editorRect.height - scrollableRect.height, 0);
+            if (extraHeight === 0) {
+              const editorOptions = vsEditor.getOptions();
+              const scrollBeyondLastLine = editorOptions.get(monaco.editor.EditorOption.scrollBeyondLastLine);
+              const padding = editorOptions.get(monaco.editor.EditorOption.padding);
+              const lineHeight = editorOptions.get(monaco.editor.EditorOption.lineHeight) || 20;
+              extraHeight = (scrollBeyondLastLine ? lineHeight : 0) + (padding?.top || 0) + (padding?.bottom || 0) + 10;
+            }
+          }
+        } catch (error) {
+          console.warn("Failed to calculate editor extra height:", error);
+        }
+      }
+      return extraHeight;
+    };
     const setAutoHeight = (v = "") => {
       let lines = Math.max(v.split("\n").length, props.autosize?.minRows || 1);
       if (v) {
@@ -144,7 +168,10 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
         const editorOptions = vsEditor.getOptions();
         lineHeight = editorOptions.get(monaco.editor.EditorOption.lineHeight) || 20;
       }
-      const newHeight = `${lines * lineHeight + 10}px`;
+      if (cachedExtraHeight === null) {
+        cachedExtraHeight = calculateExtraHeight();
+      }
+      const newHeight = `${lines * lineHeight + cachedExtraHeight}px`;
       if (autoHeight.value !== newHeight) {
         autoHeight.value = newHeight;
         nextTick(() => {
@@ -235,10 +262,12 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
       if (codeEditorEl.value.clientHeight === 0) {
         await nextTick();
       }
+      cachedExtraHeight = null;
       const options = {
         value: values.value,
         language: props.language,
         theme: "vs-dark",
+        editorCustomType: props.editorCustomType,
         ...props.options
       };
       if (props.type === "diff") {
@@ -303,6 +332,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
       vsDiffEditor?.dispose();
       vsEditor = null;
       vsDiffEditor = null;
+      cachedExtraHeight = null;
     });
     onUnmounted(() => {
       codeEditorEl.value?.removeEventListener("keydown", handleKeyDown);
@@ -412,8 +442,9 @@ const _sfc_main$1q = /* @__PURE__ */ defineComponent({
         },
         autosize: __props.config.autosize,
         parse: __props.config.parse,
+        "editor-custom-type": __props.config.mFormItemType,
         onSave: save
-      }, null, 8, ["height", "init-values", "language", "options", "autosize", "parse"]);
+      }, null, 8, ["height", "init-values", "language", "options", "autosize", "parse", "editor-custom-type"]);
     };
   }
 });
@@ -1221,6 +1252,23 @@ const isIncludeDataSource = (node, oldNode) => {
   }
   return isIncludeDataSource2;
 };
+const buildChangeRecords = (value, basePath) => {
+  const changeRecords = [];
+  const buildChangeRecords2 = (obj, basePath2) => {
+    Object.entries(obj).forEach(([key, value2]) => {
+      if (value2 !== void 0) {
+        const currentPath = basePath2 ? `${basePath2}.${key}` : key;
+        if (typeof value2 === "object" && value2 !== null && !Array.isArray(value2)) {
+          buildChangeRecords2(value2, currentPath);
+        } else {
+          changeRecords.push({ propPath: currentPath, value: value2 });
+        }
+      }
+    });
+  };
+  buildChangeRecords2(value, basePath);
+  return changeRecords;
+};
 
 const compose = (middleware, isAsync) => {
   if (!Array.isArray(middleware)) throw new TypeError("Middleware 必须是一个数组!");
@@ -3028,36 +3076,36 @@ const getDisplayField = (dataSources, key) => {
   return displayState;
 };
 const getCascaderOptionsFromFields = (fields = [], dataSourceFieldType = ["any"]) => {
-  const child = [];
-  fields.forEach((field) => {
-    if (!dataSourceFieldType.length) {
-      dataSourceFieldType.push("any");
-    }
-    let children = [];
-    if (field.type && ["any", "array", "object"].includes(field.type)) {
-      children = getCascaderOptionsFromFields(field.fields, dataSourceFieldType);
-    }
-    const item = {
-      label: `${field.title || field.name}(${field.type})`,
-      value: field.name,
-      children
-    };
+  const typeSet = new Set(dataSourceFieldType.length ? dataSourceFieldType : ["any"]);
+  const includesAny = typeSet.has("any");
+  const result = [];
+  for (const field of fields) {
     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;
+    const isContainerType = fieldType === "any" || fieldType === "array" || fieldType === "object";
+    const children = isContainerType ? getCascaderOptionsFromFields(field.fields, dataSourceFieldType) : [];
+    const matchesType = includesAny || typeSet.has(fieldType);
+    if (matchesType || isContainerType && children.length) {
+      result.push({
+        label: `${field.title || field.name}(${field.type})`,
+        value: field.name,
+        children
+      });
     }
-    child.push(item);
-  });
-  return child;
+  }
+  return result;
+};
+const getFieldType = (ds, fieldNames) => {
+  let fields = ds?.fields;
+  let type = "";
+  for (const fieldName of fieldNames) {
+    if (!fields?.length) return "";
+    const field = fields.find((f) => f.name === fieldName);
+    if (!field) return "";
+    type = field.type || "";
+    fields = field.fields;
+  }
+  return type;
 };
-const removeDataSourceFieldPrefix = (id) => id?.replace(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, "") || "";
 
 globalThis.requestIdleCallback = globalThis.requestIdleCallback || function(cb) {
   const start = Date.now();
@@ -3516,17 +3564,11 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
     const options = computed(() => {
       const [id, ...fieldNames] = [...props.config.parentFields || [], ...props.model.field];
       const ds = dataSourceService.getDataSourceById(id);
-      let fields = ds?.fields || [];
-      let type = "";
-      (fieldNames || []).forEach((fieldName) => {
-        const field = fields.find((f) => f.name === fieldName);
-        fields = field?.fields || [];
-        type = field?.type || "";
-      });
+      const type = getFieldType(ds, fieldNames);
       if (type === "array") {
         return arrayOptions;
       }
-      if (type === "boolean") {
+      if (type === "boolean" || type === "null") {
         return [
           { text: "是", value: "is" },
           { text: "不是", value: "not" }
@@ -4013,7 +4055,12 @@ const useStage = (stageOptions) => {
       }
       return;
     }
-    editorService.update(ev.data.map((data) => ({ id: getIdFromEl()(data.el) || "", style: data.style })));
+    ev.data.forEach((data) => {
+      const id = getIdFromEl()(data.el);
+      if (!id) return;
+      const { style = {} } = data;
+      editorService.update({ id, style }, { changeRecords: buildChangeRecords(style, "style") });
+    });
   });
   stage.on("sort", (ev) => {
     editorService.sort(ev.src, ev.dist);
@@ -4463,6 +4510,7 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
         name: "defaultValue",
         text: "默认值",
         parse: true,
+        mFormItemType: "data-source-field-defaultValue",
         type: (mForm, { model }) => {
           if (model.type === "number") return "number";
           if (model.type === "boolean") return "select";
@@ -6351,6 +6399,21 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
     const { dataSourceService } = useServices();
     const mForm = inject("mForm");
     const parentFields = computed(() => filterFunction(mForm, props.config.parentFields, props) || []);
+    const fieldOnChange = (_formState, v, { model }) => {
+      const [id, ...fieldNames] = [...parentFields.value, ...v];
+      const ds = dataSourceService.getDataSourceById(id);
+      const type = getFieldType(ds, fieldNames);
+      if (type === "number") {
+        model.value = Number(model.value);
+      } else if (type === "boolean") {
+        model.value = Boolean(model.value);
+      } else if (type === "null") {
+        model.value = null;
+      } else {
+        model.value = `${model.value}`;
+      }
+      return v;
+    };
     const config = computed(() => ({
       type: "groupList",
       name: props.name,
@@ -6381,14 +6444,16 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
               name: "field",
               value: "key",
               label: "字段",
-              checkStrictly: false
+              checkStrictly: false,
+              onChange: fieldOnChange
             } : {
               type: "data-source-field-select",
               name: "field",
               value: "key",
               label: "字段",
               checkStrictly: false,
-              dataSourceFieldType: ["string", "number", "boolean", "any"]
+              dataSourceFieldType: ["string", "number", "boolean", "any"],
+              onChange: fieldOnChange
             },
             {
               type: "cond-op-select",
@@ -6403,29 +6468,32 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
               items: [
                 {
                   name: "value",
-                  type: (mForm2, { model }) => {
+                  type: (_mForm, { model }) => {
                     const [id, ...fieldNames] = [...parentFields.value, ...model.field];
                     const ds = dataSourceService.getDataSourceById(id);
-                    let fields = ds?.fields || [];
-                    let type = "";
-                    (fieldNames || []).forEach((fieldName) => {
-                      const field = fields.find((f) => f.name === fieldName);
-                      fields = field?.fields || [];
-                      type = field?.type || "";
-                    });
+                    const type = getFieldType(ds, fieldNames);
                     if (type === "number") {
                       return "number";
                     }
                     if (type === "boolean") {
                       return "select";
                     }
+                    if (type === "null") {
+                      return "display";
+                    }
                     return "text";
                   },
                   options: [
                     { text: "true", value: true },
                     { text: "false", value: false }
                   ],
-                  display: (vm, { model }) => !["between", "not_between"].includes(model.op)
+                  display: (_mForm, { model }) => !["between", "not_between"].includes(model.op),
+                  displayText: (_mForm, { model }) => {
+                    if (model.value === null) {
+                      return "null";
+                    }
+                    return model.value;
+                  }
                 },
                 {
                   name: "range",
@@ -6969,8 +7037,9 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
         ])) : createCommentVNode("v-if", true),
         __props.config.advanced && showCode.value ? (openBlock(), createBlock(_sfc_main$1r, {
           key: 1,
-          "init-values": __props.model[__props.name],
+          "editor-custom-type": "m-fields-key-value",
           language: "javascript",
+          "init-values": __props.model[__props.name],
           options: {
             readOnly: __props.disabled
           },
@@ -9652,6 +9721,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
           showSrc.value ? renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
             createVNode(_sfc_main$1r, {
               class: "m-editor-content",
+              "editor-custom-type": "m-editor-content",
               "init-values": root.value,
               options: unref(codeOptions),
               onSave: saveCode
@@ -10032,6 +10102,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         showSrc.value ? (openBlock(), createBlock(_sfc_main$1r, {
           key: 1,
           class: "m-editor-props-panel-src-code",
+          "editor-custom-type": "m-editor-props-panel-src-code",
           height: `${unref(editorContentHeight)}px`,
           "init-values": __props.codeValueKey ? __props.values[__props.codeValueKey] : __props.values,
           options: unref(codeOptions),
@@ -16963,4 +17034,4 @@ const index = {
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$1f as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$1o as CodeSelect, _sfc_main$1m as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$1l as CondOpSelect, _sfc_main$p as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, _sfc_main$j as DataSourceAddButton, _sfc_main$i as DataSourceConfigPanel, _sfc_main$1h as DataSourceFieldSelect, _sfc_main$1j as DataSourceFields, _sfc_main$1g as DataSourceInput, _sfc_main$1d as DataSourceMethodSelect, _sfc_main$1e as DataSourceMethods, _sfc_main$1c as DataSourceMocks, _sfc_main$1b as DataSourceSelect, _sfc_main$1a as DisplayConds, DragType, _sfc_main$19 as EventSelect, Fixed2Other, _sfc_main$1k as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$1s as Icon, IdleTask, KeyBindingCommand, _sfc_main$17 as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$B as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, _sfc_main$16 as PageFragmentSelect, _sfc_main$r as PropsFormPanel, _sfc_main$q as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, _sfc_main$C as Resizer, ScrollViewer, SideItemKey, _sfc_main$B as SplitView, _sfc_main$E as StyleSetter, _sfc_main$1r as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$A as ToolButton, _sfc_main$m as Tree, _sfc_main$n as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, eqOptions, error, eventTabConfig, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isIncludeDataSource, log, moveItemsInContainer, numberOptions, propsService, removeDataSourceFieldPrefix, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlayService, storageService, styleTabConfig, uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus$1 as useNodeStatus, useServices, useStage, useWindowRect, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$1f as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$1o as CodeSelect, _sfc_main$1m as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$1l as CondOpSelect, _sfc_main$p as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, _sfc_main$j as DataSourceAddButton, _sfc_main$i as DataSourceConfigPanel, _sfc_main$1h as DataSourceFieldSelect, _sfc_main$1j as DataSourceFields, _sfc_main$1g as DataSourceInput, _sfc_main$1d as DataSourceMethodSelect, _sfc_main$1e as DataSourceMethods, _sfc_main$1c as DataSourceMocks, _sfc_main$1b as DataSourceSelect, _sfc_main$1a as DisplayConds, DragType, _sfc_main$19 as EventSelect, Fixed2Other, _sfc_main$1k as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$1s as Icon, IdleTask, KeyBindingCommand, _sfc_main$17 as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$B as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, _sfc_main$16 as PageFragmentSelect, _sfc_main$r as PropsFormPanel, _sfc_main$q as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, _sfc_main$C as Resizer, ScrollViewer, SideItemKey, _sfc_main$B as SplitView, _sfc_main$E as StyleSetter, _sfc_main$1r as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$A as ToolButton, _sfc_main$m as Tree, _sfc_main$n as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, buildChangeRecords, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, eqOptions, error, eventTabConfig, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFieldType, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isIncludeDataSource, log, moveItemsInContainer, numberOptions, propsService, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlayService, storageService, styleTabConfig, uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus$1 as useNodeStatus, useServices, useStage, useWindowRect, warn };