@tmagic/editor 1.5.21 → 1.5.24

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.21",
+  "version": "1.5.24",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -50,33 +50,33 @@
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "deep-object-diff": "^1.1.9",
-    "emmet-monaco-es": "^5.3.0",
+    "emmet-monaco-es": "^5.5.0",
     "events": "^3.3.0",
-    "gesto": "^1.19.1",
+    "gesto": "^1.19.4",
     "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",
     "moveable": "^0.53.0",
-    "serialize-javascript": "^6.0.0",
-    "sortablejs": "^1.15.2",
-    "@tmagic/design": "1.5.21",
-    "@tmagic/form": "1.5.21",
-    "@tmagic/stage": "1.5.21",
-    "@tmagic/utils": "1.5.21",
-    "@tmagic/table": "1.5.21"
+    "serialize-javascript": "^6.0.2",
+    "sortablejs": "^1.15.6",
+    "@tmagic/form": "1.5.24",
+    "@tmagic/stage": "1.5.24",
+    "@tmagic/utils": "1.5.24",
+    "@tmagic/design": "1.5.24",
+    "@tmagic/table": "1.5.24"
   },
   "devDependencies": {
-    "@types/events": "^3.0.0",
+    "@types/events": "^3.0.3",
     "@types/lodash-es": "^4.17.4",
-    "@types/serialize-javascript": "^5.0.1",
+    "@types/serialize-javascript": "^5.0.4",
     "@types/sortablejs": "^1.15.8",
     "@vue/test-utils": "^2.4.6",
     "type-fest": "^4.10.3"
   },
   "peerDependencies": {
     "monaco-editor": "^0.48.0",
-    "typescript": "*",
-    "vue": ">=3.5.0",
-    "@tmagic/core": "1.5.21"
+    "typescript": "^5.8.3",
+    "vue": "^3.5.17",
+    "@tmagic/core": "1.5.24"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Editor.vue

@@ -97,6 +97,7 @@
           :extend-state="extendFormState"
           :disabled-show-src="disabledShowSrc"
           @mounted="propsPanelMountedHandler"
+          @unmounted="propsPanelUnmountedHandler"
           @form-error="propsPanelFormErrorHandler"
           @submit-error="propsPanelSubmitErrorHandler"
         >
@@ -163,6 +164,7 @@ defineOptions({
 
 const emit = defineEmits<{
   'props-panel-mounted': [instance: InstanceType<typeof FormPanel>];
+  'props-panel-unmounted': [];
   'update:modelValue': [value: MApp | null];
   'props-form-error': [e: any];
   'props-submit-error': [e: any];
@@ -235,6 +237,9 @@ provide<EventBus>('eventBus', new EventEmitter());
 const propsPanelMountedHandler = (e: InstanceType<typeof FormPanel>) => {
   emit('props-panel-mounted', e);
 };
+const propsPanelUnmountedHandler = () => {
+  emit('props-panel-unmounted');
+};
 
 const propsPanelSubmitErrorHandler = (e: any) => {
   emit('props-submit-error', e);

package/src/components/CodeBlockEditor.vue

@@ -32,20 +32,20 @@
   </FloatingBox>
 
   <Teleport to="body">
-    <TMagicDialog title="查看修改" v-model="difVisible" fullscreen>
+    <TMagicDialog title="查看修改" v-model="difVisible" fullscreen destroy-on-close>
       <div style="display: flex; margin-bottom: 10px">
         <div style="flex: 1"><TMagicTag size="small" type="info">修改前</TMagicTag></div>
         <div style="flex: 1"><TMagicTag size="small" type="success">修改后</TMagicTag></div>
       </div>
 
       <CodeEditor
-        v-if="difVisible"
         ref="magicVsEditor"
         type="diff"
         language="json"
+        :disabled-full-screen="true"
         :initValues="content.content"
         :modifiedValues="formBox?.form?.values.content"
-        :style="`height: ${windowRect.height - 150}px`"
+        :height="`${windowRect.height - 150}px`"
       ></CodeEditor>
 
       <template #footer>

package/src/editorProps.ts

@@ -81,6 +81,10 @@ export interface EditorProps {
   disabledStageOverlay?: boolean;
   /** 禁用属性配置面板右下角显示源码的按钮 */
   disabledShowSrc?: boolean;
+  /** 禁用数据源 */
+  disabledDataSource?: boolean;
+  /** 禁用代码块 */
+  disabledCodeBlock?: boolean;
   /** 已选组件、代码编辑、数据源缩进配置 */
   treeIndent?: number;
   /** 已选组件、代码编辑、数据源子节点缩进增量配置 */
@@ -111,6 +115,8 @@ export const defaultEditorProps = {
   containerHighlightDuration: 800,
   containerHighlightType: ContainerHighlightType.DEFAULT,
   disabledShowSrc: false,
+  disabledDataSource: false,
+  disabledCodeBlock: false,
   componentGroupList: () => [],
   datasourceList: () => [],
   menu: () => ({ left: [], right: [] }),

package/src/fields/DataSourceFieldSelect/Index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="m-fields-data-source-field-select">
     <FieldSelect
-      v-if="showDataSourceFieldSelect || !config.fieldConfig"
+      v-if="!disabledDataSource && (showDataSourceFieldSelect || !config.fieldConfig)"
       :model-value="model[name]"
       :disabled="disabled"
       :size="size"
@@ -26,7 +26,11 @@
       @change="onChangeHandler"
     ></component>
 
-    <TMagicTooltip v-if="config.fieldConfig" :disabled="showDataSourceFieldSelect" content="选择数据源">
+    <TMagicTooltip
+      v-if="config.fieldConfig && !disabledDataSource"
+      :disabled="showDataSourceFieldSelect"
+      content="选择数据源"
+    >
       <TMagicButton
         style="margin-left: 5px"
         :type="showDataSourceFieldSelect ? 'primary' : 'default'"
@@ -83,10 +87,11 @@ watch(
   },
 );
 
-const { dataSourceService } = useServices();
+const { dataSourceService, propsService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');
 
 const dataSources = computed(() => dataSourceService.get('dataSources') || []);
+const disabledDataSource = computed(() => propsService.getDisabledDataSource());
 
 const type = computed((): string => {
   let type = props.config.fieldConfig?.type;

package/src/fields/DataSourceFields.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="m-editor-data-source-fields">
-    <MagicTable :data="model[name]" :columns="fieldColumns"></MagicTable>
+    <MagicTable :data="model[name]" :columns="fieldColumns" :border="true"></MagicTable>
 
     <div class="m-editor-data-source-fields-footer">
       <TMagicButton size="small" :disabled="disabled" plain @click="newFromJsonHandler()">快速添加</TMagicButton>

package/src/fields/DataSourceInput.vue

@@ -1,6 +1,14 @@
 <template>
+  <TMagicInput
+    v-if="disabledDataSource"
+    v-model="state"
+    :disabled="disabled"
+    :size="size"
+    :clearable="true"
+    @change="changeHandler"
+  ></TMagicInput>
   <component
-    v-if="disabled || isFocused"
+    v-else-if="disabled || isFocused"
     :is="getDesignConfig('components')?.autocomplete.component || 'el-autocomplete'"
     class="tmagic-design-auto-complete"
     ref="autocomplete"
@@ -52,7 +60,7 @@ import { computed, nextTick, ref, useTemplateRef, watch } from 'vue';
 import { Coin } from '@element-plus/icons-vue';
 
 import type { DataSchema, DataSourceSchema } from '@tmagic/core';
-import { getDesignConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
+import { getDesignConfig, TMagicAutocomplete, TMagicInput, TMagicTag } from '@tmagic/design';
 import type { DataSourceInputConfig, FieldProps } from '@tmagic/form';
 import { getKeysArray, isNumber } from '@tmagic/utils';
 
@@ -72,7 +80,7 @@ const emit = defineEmits<{
   change: [value: string];
 }>();
 
-const { dataSourceService } = useServices();
+const { dataSourceService, propsService } = useServices();
 
 const autocompleteRef = useTemplateRef<InstanceType<typeof TMagicAutocomplete>>('autocomplete');
 const isFocused = ref(false);
@@ -81,6 +89,7 @@ const displayState = ref<{ value: string; type: 'var' | 'text' }[]>([]);
 
 const input = computed<HTMLInputElement>(() => autocompleteRef.value?.inputRef?.input);
 const dataSources = computed(() => dataSourceService.get('dataSources'));
+const disabledDataSource = computed(() => propsService.getDisabledDataSource());
 
 const setDisplayState = () => {
   displayState.value = getDisplayField(dataSources.value, state.value);

package/src/fields/DataSourceMethods.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="m-editor-data-source-methods">
-    <MagicTable :data="model[name]" :columns="methodColumns"></MagicTable>
+    <MagicTable :data="model[name]" :columns="methodColumns" :border="true"></MagicTable>
 
     <div class="m-editor-data-source-methods-footer">
       <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="createCodeHandler"

package/src/fields/EventSelect.vue

@@ -85,7 +85,7 @@ const emit = defineEmits<{
   change: [v: any, eventData?: ContainerChangeEventData];
 }>();
 
-const { editorService, dataSourceService, eventsService, codeBlockService } = useServices();
+const { editorService, dataSourceService, eventsService, codeBlockService, propsService } = useServices();
 
 // 事件名称下拉框表单配置
 const eventNameConfig = computed(() => {
@@ -173,24 +173,39 @@ const actionTypeConfig = computed(() => {
     text: '联动类型',
     type: 'select',
     defaultValue: ActionType.COMP,
-    options: () => [
-      {
-        text: '组件',
-        label: '组件',
-        value: ActionType.COMP,
-      },
-      {
-        text: '代码',
-        label: '代码',
-        disabled: !Object.keys(codeBlockService.getCodeDsl() || {}).length,
-        value: ActionType.CODE,
-      },
-      {
-        text: '数据源',
-        label: '数据源',
-        value: ActionType.DATA_SOURCE,
-      },
-    ],
+    options: () => {
+      const o: {
+        text: string;
+        label: string;
+        value: string;
+        disabled?: boolean;
+      }[] = [
+        {
+          text: '组件',
+          label: '组件',
+          value: ActionType.COMP,
+        },
+      ];
+
+      if (!propsService.getDisabledCodeBlock()) {
+        o.push({
+          text: '代码',
+          label: '代码',
+          disabled: !Object.keys(codeBlockService.getCodeDsl() || {}).length,
+          value: ActionType.CODE,
+        });
+      }
+
+      if (!propsService.getDisabledDataSource()) {
+        o.push({
+          text: '数据源',
+          label: '数据源',
+          value: ActionType.DATA_SOURCE,
+        });
+      }
+
+      return o;
+    },
   };
   return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
 });

package/src/fields/StyleSetter/pro/Position.vue

@@ -12,6 +12,14 @@ const emit = defineEmits<{
   change: [v: string | StyleSchema, eventData: ContainerChangeEventData];
 }>();
 
+const positionText: Record<string, string> = {
+  static: '不定位',
+  relative: '相对定位',
+  absolute: '绝对定位',
+  fixed: '固定定位',
+  sticky: '粘性定位',
+};
+
 const config = {
   items: [
     {
@@ -21,9 +29,9 @@ const config = {
       type: 'data-source-field-select',
       fieldConfig: {
         type: 'select',
-        options: ['static', 'relative', 'absolute', 'fixed', 'sticky'].map((item) => ({
+        options: Object.keys(positionText).map((item) => ({
           value: item,
-          text: item,
+          text: `${item}(${positionText[item]})`,
         })),
       },
     },

package/src/hooks/use-filter.ts

@@ -32,10 +32,12 @@ export const useFilter = (
         const visible = filterIsMatch(text, node);
         if (visible && parents.length) {
           parents.forEach((parent) => {
-            updateStatus(nodeStatusMap.value!, parent.id, {
-              visible,
-              expand: true,
-            });
+            if (text || text.length) {
+              updateStatus(nodeStatusMap.value!, parent.id, {
+                visible,
+                expand: true,
+              });
+            }
           });
         }
 

package/src/hooks/use-stage.ts

@@ -45,6 +45,7 @@ export const useStage = (stageOptions: StageOptions) => {
     updateDragEl: stageOptions.updateDragEl,
     guidesOptions: stageOptions.guidesOptions,
     disabledMultiSelect: stageOptions.disabledMultiSelect,
+    disabledRule: stageOptions.disabledRule,
   });
 
   watch(

package/src/index.ts

@@ -112,6 +112,9 @@ export { default as StyleSetter } from './fields/StyleSetter/Index.vue';
 const defaultInstallOpt: EditorInstallOptions = {
   // eslint-disable-next-line no-eval
   parseDSL: (dsl: string) => eval(dsl),
+  customCreateMonacoEditor: (monaco, codeEditorEl, options) => monaco.editor.create(codeEditorEl, options),
+  customCreateMonacoDiffEditor: (monaco, codeEditorEl, options) =>
+    monaco.editor.createDiffEditor(codeEditorEl, options),
 };
 
 export default {

package/src/initService.ts

@@ -1,4 +1,4 @@
-import { onBeforeUnmount, reactive, toRaw, watch } from 'vue';
+import { nextTick, onBeforeUnmount, reactive, toRaw, watch } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type TMagicCore from '@tmagic/core';
@@ -21,9 +21,11 @@ import {
   NODE_CONDS_KEY,
   NodeType,
   Target,
+  updateNode,
 } from '@tmagic/core';
 import { ChangeRecord } from '@tmagic/form';
-import { getNodes, isPage, isValueIncludeDataSource } from '@tmagic/utils';
+import StageCore from '@tmagic/stage';
+import { getDepNodeIds, getNodes, isPage, isValueIncludeDataSource } from '@tmagic/utils';
 
 import PropsPanel from './layouts/PropsPanel.vue';
 import { isIncludeDataSource } from './utils/editor';
@@ -197,6 +199,22 @@ export const initServiceState = (
     },
   );
 
+  watch(
+    () => props.disabledCodeBlock,
+    (disabledCodeBlock) => propsService.setDisabledCodeBlock(disabledCodeBlock ?? false),
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    () => props.disabledDataSource,
+    (disabledDataSource) => propsService.setDisabledDataSource(disabledDataSource ?? false),
+    {
+      immediate: true,
+    },
+  );
+
   onBeforeUnmount(() => {
     editorService.resetState();
     historyService.resetState();
@@ -217,14 +235,15 @@ export const initServiceEvents = (
 ) => {
   let getTMagicAppPrimise: Promise<TMagicCore | undefined> | null = null;
 
-  const getTMagicApp = (): Promise<TMagicCore | undefined> => {
-    const renderer = editorService.get('stage')?.renderer;
+  const getTMagicApp = async (): Promise<TMagicCore | undefined> => {
+    const stage = await getStage();
+    const { renderer } = stage;
     if (!renderer) {
-      return Promise.resolve(void 0);
+      return void 0;
     }
 
     if (renderer.runtime) {
-      return Promise.resolve(renderer.runtime.getApp?.());
+      return renderer.runtime.getApp?.();
     }
 
     if (getTMagicAppPrimise) {
@@ -328,6 +347,61 @@ export const initServiceEvents = (
     },
   );
 
+  const getStage = (): Promise<StageCore> => {
+    const stage = editorService.get('stage');
+    if (stage) {
+      return Promise.resolve(stage);
+    }
+
+    return new Promise<StageCore>((resolve) => {
+      const unWatch = watch(
+        () => editorService.get('stage'),
+        (stage) => {
+          if (stage) {
+            resolve(stage);
+            nextTick(() => {
+              unWatch();
+            });
+          }
+        },
+      );
+    });
+  };
+
+  const updateStageDsl = async (value: MApp | null) => {
+    const stage = await getStage();
+
+    const runtime = await stage.renderer?.getRuntime();
+    const app = await getTMagicApp();
+
+    if (!app?.dataSourceManager) {
+      runtime?.updateRootConfig?.(cloneDeep(toRaw(value))!);
+    }
+
+    const page = editorService.get('page');
+    const node = editorService.get('node');
+    page?.id && runtime?.updatePageId?.(page.id);
+    setTimeout(() => {
+      node && stage?.select(toRaw(node.id));
+    });
+
+    if (value) {
+      depService.clearIdleTasks();
+
+      const dsl = cloneDeep(toRaw(value));
+
+      await (typeof Worker === 'undefined' ? collectIdle(dsl.items, true) : depService.collectByWorker(dsl));
+
+      if (dsl.dataSources && dsl.dataSourceDeps && app?.dataSourceManager) {
+        for (const node of getNodes(getDepNodeIds(dsl.dataSourceDeps), dsl.items)) {
+          updateNode(app.dataSourceManager.compiledNode(node), dsl);
+        }
+      }
+
+      runtime?.updateRootConfig?.(dsl);
+    }
+  };
+
   const initDataSourceDepTarget = (ds: DataSourceSchema) => {
     depService.addTarget(createDataSourceTarget(ds, reactive({})));
     depService.addTarget(createDataSourceMethodTarget(ds, reactive({})));
@@ -354,11 +428,7 @@ export const initServiceEvents = (
     }
 
     if (Array.isArray(value.items)) {
-      depService.clearIdleTasks();
-
-      (typeof Worker === 'undefined' ? collectIdle(value.items, true) : depService.collectByWorker(value)).then(() => {
-        updateStageNodes(value.items);
-      });
+      updateStageDsl(value);
     } else {
       depService.clear();
       delete value.dataSourceDeps;

package/src/layouts/CodeEditor.vue

@@ -5,7 +5,12 @@
         :class="`magic-code-editor-wrapper${fullScreen ? ' full-screen' : ''}`"
         :style="!fullScreen && height ? `height: ${height}` : '100%'"
       >
-        <TMagicButton class="magic-code-editor-full-screen-icon" circle size="small" @click="fullScreenHandler"
+        <TMagicButton
+          v-if="!disabledFullScreen"
+          class="magic-code-editor-full-screen-icon"
+          circle
+          size="small"
+          @click="fullScreenHandler"
           ><MIcon :icon="FullScreen"></MIcon
         ></TMagicButton>
         <div ref="codeEditor" class="magic-code-editor-content"></div>
@@ -15,7 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
+import { nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
 import { FullScreen } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 import serialize from 'serialize-javascript';
@@ -36,12 +41,11 @@ const props = withDefaults(
     modifiedValues?: any;
     type?: 'diff';
     language?: string;
-    options?: {
-      [key: string]: any;
-    };
+    options?: monaco.editor.IStandaloneEditorConstructionOptions;
     height?: string;
     autoSave?: boolean;
     parse?: boolean;
+    disabledFullScreen?: boolean;
   }>(),
   {
     initValues: '',
@@ -51,6 +55,7 @@ const props = withDefaults(
       tabSize: 2,
     }),
     parse: false,
+    disabledFullScreen: false,
   },
 );
 
@@ -124,6 +129,10 @@ const getEditorValue = () =>
 const init = async () => {
   if (!codeEditorEl.value) return;
 
+  if (codeEditorEl.value.clientHeight === 0) {
+    await nextTick();
+  }
+
   const options = {
     value: values.value,
     language: props.language,
@@ -132,15 +141,13 @@ const init = async () => {
   };
 
   if (props.type === 'diff') {
-    vsDiffEditor = monaco.editor.createDiffEditor(codeEditorEl.value, options);
+    vsDiffEditor = getEditorConfig('customCreateMonacoDiffEditor')(monaco, codeEditorEl.value, options);
   } else {
-    vsEditor = monaco.editor.create(codeEditorEl.value, options);
+    vsEditor = getEditorConfig('customCreateMonacoEditor')(monaco, codeEditorEl.value, options);
   }
 
   setEditorValue(props.initValues, props.modifiedValues);
 
-  loading.value = false;
-
   emit('initd', vsEditor);
 
   codeEditorEl.value.addEventListener('keydown', (e) => {
@@ -179,14 +186,33 @@ watch(
   },
 );
 
+watch(
+  () => props.options,
+  (v) => {
+    vsEditor?.updateOptions(v);
+    vsDiffEditor?.updateOptions(v);
+  },
+  {
+    deep: true,
+  },
+);
+
 onMounted(async () => {
   loading.value = true;
 
-  init();
+  await init();
+
+  loading.value = false;
 });
 
 onBeforeUnmount(() => {
   resizeObserver.disconnect();
+
+  vsEditor?.dispose();
+  vsDiffEditor?.dispose();
+
+  vsEditor = null;
+  vsDiffEditor = null;
 });
 
 const fullScreen = ref(false);

package/src/layouts/page-bar/PageBarScrollContainer.vue

@@ -78,6 +78,7 @@ const resizeObserver = new ResizeObserver(() => {
 
 onMounted(() => {
   pageBarEl.value && resizeObserver.observe(pageBarEl.value);
+  itemsContainerEl.value && resizeObserver.observe(itemsContainerEl.value);
 });
 
 onBeforeUnmount(() => {
@@ -136,7 +137,7 @@ watch(
         let beforeDragList: Id[] = [];
         const options = {
           ...{
-            dataIdAttr: 'page-id', // 获取排序后的数据
+            dataIdAttr: 'data-page-id', // 获取排序后的数据
             onStart: async (event: SortableEvent) => {
               if (typeof props.pageBarSortOptions?.beforeStart === 'function') {
                 await props.pageBarSortOptions.beforeStart(event, sortable);

package/src/layouts/props-panel/FormPanel.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, getCurrentInstance, inject, onMounted, ref, useTemplateRef, watchEffect } from 'vue';
+import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, useTemplateRef, watchEffect } from 'vue';
 import { Document as DocumentIcon } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
@@ -78,6 +78,7 @@ const emit = defineEmits<{
   'submit-error': [e: any];
   'form-error': [e: any];
   mounted: [internalInstance: any];
+  unmounted: [];
 }>();
 
 const services = useServices();
@@ -104,6 +105,10 @@ onMounted(() => {
   emit('mounted', internalInstance?.proxy);
 });
 
+onUnmounted(() => {
+  emit('unmounted');
+});
+
 const submit = async (v: FormValue, eventData: ContainerChangeEventData) => {
   try {
     const values = await configFormRef.value?.submitForm();

package/src/layouts/props-panel/PropsPanel.vue

@@ -13,6 +13,7 @@
       @submit-error="errorHandler"
       @form-error="errorHandler"
       @mounted="mountedHandler"
+      @unmounted="unmountedHandler"
     ></FormPanel>
 
     <Resizer v-if="showStylePanel" @change="widthChange"></Resizer>
@@ -89,6 +90,7 @@ const emit = defineEmits<{
   'submit-error': [e: any];
   'form-error': [e: any];
   mounted: [internalInstance: InstanceType<typeof FormPanel>];
+  unmounted: [];
 }>();
 
 const { editorService, uiService, propsService, storageService } = useServices();
@@ -165,6 +167,10 @@ const mountedHandler = () => {
   }
 };
 
+const unmountedHandler = () => {
+  emit('unmounted');
+};
+
 const propsPanelEl = useTemplateRef('propsPanel');
 const propsPanelWidth = ref(
   storageService.getItem(PROPS_PANEL_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) || 300,