@tmagic/editor 1.5.22 → 1.6.0-beta.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.22",
+  "version": "1.6.0-beta.0",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,14 +58,14 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.2",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.5.22",
-    "@tmagic/form": "1.5.22",
-    "@tmagic/table": "1.5.22",
-    "@tmagic/utils": "1.5.22",
-    "@tmagic/stage": "1.5.22"
+    "@tmagic/design": "1.6.0-beta.0",
+    "@tmagic/form": "1.6.0-beta.0",
+    "@tmagic/stage": "1.6.0-beta.0",
+    "@tmagic/table": "1.6.0-beta.0",
+    "@tmagic/utils": "1.6.0-beta.0"
   },
   "devDependencies": {
-    "@types/events": "^3.0.0",
+    "@types/events": "^3.0.3",
     "@types/lodash-es": "^4.17.4",
     "@types/serialize-javascript": "^5.0.4",
     "@types/sortablejs": "^1.15.8",
@@ -74,9 +74,9 @@
   },
   "peerDependencies": {
     "monaco-editor": "^0.48.0",
-    "typescript": "*",
-    "vue": ">=3.5.0",
-    "@tmagic/core": "1.5.22"
+    "typescript": "^5.8.3",
+    "vue": "^3.5.17",
+    "@tmagic/core": "1.6.0-beta.0"
   },
   "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/editorProps.ts

@@ -3,9 +3,8 @@ import type { FormConfig, FormState } from '@tmagic/form';
 import StageCore, {
   CONTAINER_HIGHLIGHT_CLASS_NAME,
   ContainerHighlightType,
-  type CustomizeMoveableOptionsCallbackConfig,
+  type CustomizeMoveableOptions,
   type GuidesOptions,
-  type MoveableOptions,
   RenderType,
   type UpdateDragEl,
 } from '@tmagic/stage';
@@ -56,7 +55,7 @@ export interface EditorProps {
   datasourceConfigs?: Record<string, FormConfig>;
   datasourceEventMethodList?: Record<string, { events: EventOption[]; methods: EventOption[] }>;
   /** 画布中组件选中框的移动范围 */
-  moveableOptions?: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions);
+  moveableOptions?: CustomizeMoveableOptions;
   /** 编辑器初始化时默认选中的组件ID */
   defaultSelected?: Id;
   /** 拖入画布中容器时，识别到容器后给容器根dom加上的class */

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/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/hooks/index.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

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

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

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';
@@ -233,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) {
@@ -344,6 +347,60 @@ 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();
+
+      await (typeof Worker === 'undefined' ? collectIdle(value.items, true) : depService.collectByWorker(value));
+
+      const dsl = cloneDeep(toRaw(value));
+      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({})));
@@ -370,11 +427,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/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,

package/src/layouts/workspace/viewer/Stage.vue

@@ -43,20 +43,9 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  computed,
-  markRaw,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  toRaw,
-  useTemplateRef,
-  watch,
-  watchEffect,
-} from 'vue';
-import { cloneDeep } from 'lodash-es';
-
-import type { MApp, MContainer } from '@tmagic/core';
+import { computed, markRaw, nextTick, onBeforeUnmount, onMounted, useTemplateRef, watch, watchEffect } from 'vue';
+
+import type { MContainer } from '@tmagic/core';
 import StageCore, { getOffset, Runtime } from '@tmagic/stage';
 import { calcValueByFontsize, getIdFromEl } from '@tmagic/utils';
 
@@ -130,12 +119,6 @@ watchEffect(() => {
 
   stage.on('runtime-ready', (rt) => {
     runtime = rt;
-    // toRaw返回的值是一个引用而非快照，需要cloneDeep
-    root.value && runtime?.updateRootConfig?.(cloneDeep(toRaw(root.value)));
-    page.value?.id && runtime?.updatePageId?.(page.value.id);
-    setTimeout(() => {
-      node.value && stage?.select(toRaw(node.value.id));
-    });
   });
 });
 
@@ -184,14 +167,6 @@ watch(page, (page) => {
   }
 });
 
-const rootChangeHandler = (root: MApp) => {
-  if (runtime && root) {
-    runtime.updateRootConfig?.(cloneDeep(toRaw(root)));
-  }
-};
-
-editorService.on('root-change', rootChangeHandler);
-
 const resizeObserver = new ResizeObserver((entries) => {
   for (const { contentRect } of entries) {
     uiService.set('stageContainerRect', {
@@ -210,10 +185,10 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   stage?.destroy();
+  stage = null;
   resizeObserver.disconnect();
   editorService.set('stage', null);
   keybindingService.unregisterEl('stage');
-  editorService.off('root-change', rootChangeHandler);
 });
 
 const parseDSL = getEditorConfig('parseDSL');

package/src/layouts/workspace/viewer/StageOverlay.vue

@@ -1,9 +1,19 @@
 <template>
-  <div v-if="stageOverlayVisible" class="m-editor-stage-overlay" @click="closeOverlayHandler">
-    <TMagicIcon class="m-editor-stage-overlay-close" :size="'20'" @click="closeOverlayHandler"
+  <div v-if="stageOverlayVisible" class="m-editor-stage-overlay">
+    <TMagicIcon class="m-editor-stage-overlay-close" :size="'30'" @click="closeOverlayHandler"
       ><CloseBold
     /></TMagicIcon>
-    <div ref="stageOverlay" class="m-editor-stage-overlay-container" :style="style" @click.stop></div>
+
+    <ScrollViewer
+      class="m-editor-stage"
+      :width="wrapWidth"
+      :height="wrapHeight"
+      :wrap-width="columnWidth.center"
+      :wrap-height="frameworkRect.height"
+      :zoom="zoom"
+    >
+      <div ref="stageOverlay" class="m-editor-stage-container" :style="style"></div>
+    </ScrollViewer>
   </div>
 </template>
 
@@ -13,10 +23,11 @@ import { CloseBold } from '@element-plus/icons-vue';
 
 import { TMagicIcon } from '@tmagic/design';
 
+import ScrollViewer from '@editor/components/ScrollViewer.vue';
 import { useServices } from '@editor/hooks/use-services';
 import type { StageOptions } from '@editor/type';
 
-const { stageOverlayService, editorService } = useServices();
+const { stageOverlayService, editorService, uiService } = useServices();
 
 const stageOptions = inject<StageOptions>('stageOptions');
 
@@ -26,10 +37,12 @@ const stageOverlayVisible = computed(() => stageOverlayService.get('stageOverlay
 const wrapWidth = computed(() => stageOverlayService.get('wrapWidth'));
 const wrapHeight = computed(() => stageOverlayService.get('wrapHeight'));
 const stage = computed(() => editorService.get('stage'));
+const zoom = computed(() => uiService.get('zoom'));
+const columnWidth = computed(() => uiService.get('columnWidth'));
+const frameworkRect = computed(() => uiService.get('frameworkRect'));
 
 const style = computed(() => ({
-  width: `${wrapWidth.value}px`,
-  height: `${wrapHeight.value}px`,
+  transform: `scale(${zoom.value})`,
 }));
 
 watch(stage, (stage) => {
@@ -43,6 +56,12 @@ watch(stage, (stage) => {
   }
 });
 
+watch(zoom, (zoom) => {
+  const stage = stageOverlayService.get('stage');
+  if (!stage || !zoom) return;
+  stage.setZoom(zoom);
+});
+
 watch(stageOverlayEl, (stageOverlay) => {
   const subStage = stageOverlayService.createStage(stageOptions);
   stageOverlayService.set('stage', subStage);

package/src/services/BaseService.ts

@@ -2,7 +2,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -199,24 +199,33 @@ export default class extends EventEmitter {
    * @deprecated 请使用usePlugin代替
    */
   public use(options: Record<string, Function>) {
-    Object.entries(options).forEach(([methodName, method]: [string, Function]) => {
+    for (const [methodName, method] of Object.entries(options)) {
       if (typeof method === 'function') this.middleware[methodName].push(method);
-    });
+    }
   }
 
   public usePlugin(options: Record<string, Function>) {
-    Object.entries(options).forEach(([methodName, method]: [string, Function]) => {
+    for (const [methodName, method] of Object.entries(options)) {
       if (typeof method === 'function') this.pluginOptionsList[methodName].push(method);
-    });
+    }
+  }
+
+  public removePlugin(options: Record<string, Function>) {
+    for (const [methodName, method] of Object.entries(options)) {
+      if (Array.isArray(this.pluginOptionsList[methodName])) {
+        this.pluginOptionsList[methodName] = this.pluginOptionsList[methodName].filter((item) => item !== method);
+      }
+    }
   }
 
   public removeAllPlugins() {
-    Object.keys(this.pluginOptionsList).forEach((key) => {
+    for (const key of Object.keys(this.pluginOptionsList)) {
       this.pluginOptionsList[key] = [];
-    });
-    Object.keys(this.middleware).forEach((key) => {
+    }
+
+    for (const key of Object.keys(this.middleware)) {
       this.middleware[key] = [];
-    });
+    }
   }
 
   private async doTask() {

package/src/services/codeBlock.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/src/services/componentList.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/src/services/dep.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/src/services/editor.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/src/services/events.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/src/services/history.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/src/services/keybinding.ts

@@ -145,6 +145,18 @@ class Keybinding extends BaseService {
       for (const [type = '', eventType = 'keydown'] of when) {
         const cacheItem: KeyBindingCacheItem = { type, command, keybinding, eventType, bound: false };
 
+        if (
+          this.bindingList.find(
+            (item) =>
+              item.command === command &&
+              item.eventType === eventType &&
+              item.type === type &&
+              item.keybinding === keybinding,
+          )
+        ) {
+          continue;
+        }
+
         this.bindingList.push(cacheItem);
       }
     }

package/src/services/props.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/src/services/stageOverlay.ts

@@ -97,9 +97,9 @@ class StageOverlay extends BaseService {
   public createStage(stageOptions: StageOptions = {}) {
     return useStage({
       ...stageOptions,
-      zoom: 1,
       runtimeUrl: '',
       autoScrollIntoView: false,
+      disabledRule: true,
       render: async (stage: StageCore) => {
         this.copyDocumentElement();
 

package/src/services/ui.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ * Copyright (C) 2025 Tencent.  All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.