@tmagic/editor 1.5.3 → 1.5.4

package/src/layouts/CodeEditor.vue

@@ -93,7 +93,7 @@ let vsDiffEditor: monaco.editor.IStandaloneDiffEditor | null = null;
 
 const values = ref('');
 const loading = ref(false);
-const codeEditor = useTemplateRef<HTMLDivElement>('codeEditor');
+const codeEditorEl = useTemplateRef<HTMLDivElement>('codeEditor');
 
 const resizeObserver = new globalThis.ResizeObserver(
   throttle((): void => {
@@ -122,7 +122,7 @@ const getEditorValue = () =>
   (props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || '';
 
 const init = async () => {
-  if (!codeEditor.value) return;
+  if (!codeEditorEl.value) return;
 
   const options = {
     value: values.value,
@@ -132,9 +132,9 @@ const init = async () => {
   };
 
   if (props.type === 'diff') {
-    vsDiffEditor = monaco.editor.createDiffEditor(codeEditor.value, options);
+    vsDiffEditor = monaco.editor.createDiffEditor(codeEditorEl.value, options);
   } else {
-    vsEditor = monaco.editor.create(codeEditor.value, options);
+    vsEditor = monaco.editor.create(codeEditorEl.value, options);
   }
 
   setEditorValue(props.initValues, props.modifiedValues);
@@ -143,7 +143,7 @@ const init = async () => {
 
   emit('initd', vsEditor);
 
-  codeEditor.value.addEventListener('keydown', (e) => {
+  codeEditorEl.value.addEventListener('keydown', (e) => {
     if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
       e.preventDefault();
       e.stopPropagation();
@@ -163,7 +163,7 @@ const init = async () => {
     });
   }
 
-  resizeObserver.observe(codeEditor.value);
+  resizeObserver.observe(codeEditorEl.value);
 };
 
 watch(

package/src/layouts/Framework.vue

@@ -90,8 +90,8 @@ const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 const codeOptions = inject('codeOptions', {});
 const { editorService, uiService } = inject<Services>('services') || {};
 
-const content = useTemplateRef<HTMLDivElement>('content');
-const splitView = useTemplateRef<InstanceType<typeof SplitView>>('splitView');
+const contentEl = useTemplateRef<HTMLDivElement>('content');
+const splitViewRef = useTemplateRef<InstanceType<typeof SplitView>>('splitView');
 
 const root = computed(() => editorService?.get('root'));
 const page = computed(() => editorService?.get('page'));
@@ -115,7 +115,7 @@ const columnWidth = ref<Partial<GetColumnWidth>>({
 });
 
 watch(pageLength, () => {
-  splitView.value?.updateWidth();
+  splitViewRef.value?.updateWidth();
 });
 
 watch(
@@ -146,8 +146,8 @@ const resizerObserver = new ResizeObserver((entries) => {
 });
 
 onMounted(() => {
-  if (content.value) {
-    resizerObserver.observe(content.value);
+  if (contentEl.value) {
+    resizerObserver.observe(contentEl.value);
   }
 });
 

package/src/layouts/NavMenu.vue

@@ -179,8 +179,10 @@ const buttons = computed(() => {
   return data;
 });
 
+const navMenuEl = useTemplateRef<HTMLDivElement>('navMenu');
+
 const resizeObserver = new ResizeObserver(() => {
-  const rect = navMenu.value?.getBoundingClientRect();
+  const rect = navMenuEl.value?.getBoundingClientRect();
   if (rect) {
     uiService?.set('navMenuRect', {
       left: rect.left,
@@ -190,10 +192,11 @@ const resizeObserver = new ResizeObserver(() => {
     });
   }
 });
-const navMenu = useTemplateRef<HTMLDivElement>('navMenu');
+
 onMounted(() => {
-  navMenu.value && resizeObserver.observe(navMenu.value);
+  navMenuEl.value && resizeObserver.observe(navMenuEl.value);
 });
+
 onBeforeUnmount(() => {
   resizeObserver.disconnect();
 });

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

@@ -144,40 +144,40 @@ const remove = (node: MPage | MPageFragment) => {
   editorService?.remove(node);
 };
 
-const pageBarScrollContainer = useTemplateRef<InstanceType<typeof PageBarScrollContainer>>('pageBarScrollContainer');
-const pageBarItems = useTemplateRef<HTMLDivElement[]>('pageBarItems');
+const pageBarScrollContainerRef = useTemplateRef<InstanceType<typeof PageBarScrollContainer>>('pageBarScrollContainer');
+const pageBarItemEls = useTemplateRef<HTMLDivElement[]>('pageBarItems');
 watch(page, (page) => {
   if (
     !page ||
-    !pageBarScrollContainer.value?.itemsContainerWidth ||
-    !pageBarItems.value ||
-    pageBarItems.value.length < 2
+    !pageBarScrollContainerRef.value?.itemsContainerWidth ||
+    !pageBarItemEls.value ||
+    pageBarItemEls.value.length < 2
   ) {
     return;
   }
 
-  const firstItem = pageBarItems.value[0];
-  const lastItem = pageBarItems.value[pageBarItems.value.length - 1];
+  const firstItem = pageBarItemEls.value[0];
+  const lastItem = pageBarItemEls.value[pageBarItemEls.value.length - 1];
 
   if (page.id === firstItem.dataset.pageId) {
-    pageBarScrollContainer.value.scroll('start');
+    pageBarScrollContainerRef.value.scroll('start');
   } else if (page.id === lastItem.dataset.pageId) {
-    pageBarScrollContainer.value.scroll('end');
+    pageBarScrollContainerRef.value.scroll('end');
   } else {
-    const pageItem = pageBarItems.value.find((item) => item.dataset.pageId === page.id);
+    const pageItem = pageBarItemEls.value.find((item) => item.dataset.pageId === page.id);
     if (!pageItem) {
       return;
     }
 
     const pageItemRect = pageItem.getBoundingClientRect();
     const offsetLeft = pageItemRect.left - firstItem.getBoundingClientRect().left;
-    const { itemsContainerWidth } = pageBarScrollContainer.value;
+    const { itemsContainerWidth } = pageBarScrollContainerRef.value;
 
     const left = itemsContainerWidth - offsetLeft - pageItemRect.width;
 
-    const translateLeft = pageBarScrollContainer.value.getTranslateLeft();
+    const translateLeft = pageBarScrollContainerRef.value.getTranslateLeft();
     if (offsetLeft + translateLeft < 0 || offsetLeft + pageItemRect.width > itemsContainerWidth - translateLeft) {
-      pageBarScrollContainer.value.scrollTo(left);
+      pageBarScrollContainerRef.value.scrollTo(left);
     }
   }
 });

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

@@ -46,7 +46,7 @@ const services = inject<Services>('services');
 const editorService = services?.editorService;
 const uiService = services?.uiService;
 
-const itemsContainer = useTemplateRef<HTMLElement>('itemsContainer');
+const itemsContainerEl = useTemplateRef<HTMLElement>('itemsContainer');
 const canScroll = ref(false);
 
 const showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
@@ -54,19 +54,21 @@ const showPageListButton = computed(() => uiService?.get('showPageListButton'));
 
 const itemsContainerWidth = ref(0);
 
+const pageBarEl = useTemplateRef<HTMLDivElement>('pageBar');
+
 const setCanScroll = () => {
   // 减去新增、搜索、页面列表、左移、右移5个按钮的宽度
   // 37 = icon width 16 + padding 10 * 2 + border-right 1
   itemsContainerWidth.value =
-    (pageBar.value?.clientWidth || 0) -
+    (pageBarEl.value?.clientWidth || 0) -
     37 * 2 -
     37 -
     (showAddPageButton.value ? 37 : 21) -
     (showPageListButton.value ? 37 : 0);
 
   nextTick(() => {
-    if (itemsContainer.value) {
-      canScroll.value = itemsContainer.value.scrollWidth - itemsContainerWidth.value > 1;
+    if (itemsContainerEl.value) {
+      canScroll.value = itemsContainerEl.value.scrollWidth - itemsContainerWidth.value > 1;
     }
   });
 };
@@ -75,9 +77,8 @@ const resizeObserver = new ResizeObserver(() => {
   setCanScroll();
 });
 
-const pageBar = useTemplateRef<HTMLDivElement>('pageBar');
 onMounted(() => {
-  pageBar.value && resizeObserver.observe(pageBar.value);
+  pageBarEl.value && resizeObserver.observe(pageBarEl.value);
 });
 
 onBeforeUnmount(() => {
@@ -87,9 +88,9 @@ onBeforeUnmount(() => {
 let translateLeft = 0;
 
 const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
-  if (!itemsContainer.value || !canScroll.value) return;
+  if (!itemsContainerEl.value || !canScroll.value) return;
 
-  const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+  const maxScrollLeft = itemsContainerEl.value.scrollWidth - itemsContainerWidth.value;
 
   if (type === 'left') {
     scrollTo(translateLeft + 200);
@@ -103,8 +104,8 @@ const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
 };
 
 const scrollTo = (value: number) => {
-  if (!itemsContainer.value || !canScroll.value) return;
-  const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+  if (!itemsContainerEl.value || !canScroll.value) return;
+  const maxScrollLeft = itemsContainerEl.value.scrollWidth - itemsContainerWidth.value;
 
   if (value >= 0) {
     value = 0;
@@ -116,7 +117,7 @@ const scrollTo = (value: number) => {
 
   translateLeft = value;
 
-  itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
+  itemsContainerEl.value.style.transform = `translate(${translateLeft}px, 0px)`;
 };
 
 watch(

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

@@ -88,12 +88,12 @@ const propsPanelSize = computed(() => services?.uiService.get('propsPanelSize')
 const { height: editorContentHeight } = useEditorContentHeight();
 const stage = computed(() => services?.editorService.get('stage'));
 
-const configForm = useTemplateRef<InstanceType<typeof MForm>>('configForm');
+const configFormRef = useTemplateRef<InstanceType<typeof MForm>>('configForm');
 
 watchEffect(() => {
-  if (configForm.value) {
-    configForm.value.formState.stage = stage.value;
-    configForm.value.formState.services = services;
+  if (configFormRef.value) {
+    configFormRef.value.formState.stage = stage.value;
+    configFormRef.value.formState.services = services;
   }
 });
 
@@ -104,7 +104,7 @@ onMounted(() => {
 
 const submit = async (v: FormValue, eventData: ContainerChangeEventData) => {
   try {
-    const values = await configForm.value?.submitForm();
+    const values = await configFormRef.value?.submitForm();
     emit('submit', values, eventData);
   } catch (e: any) {
     emit('submit-error', e);
@@ -119,5 +119,5 @@ const saveCode = (values: any) => {
   emit('submit', props.codeValueKey ? { [props.codeValueKey]: values } : values);
 };
 
-defineExpose({ configForm, submit });
+defineExpose({ configForm: configFormRef, submit });
 </script>

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

@@ -148,8 +148,10 @@ const errorHandler = (e: any) => {
   emit('form-error', e);
 };
 
-const mountedHandler = (e: InstanceType<typeof FormPanel>) => {
-  emit('mounted', e);
+const mountedHandler = () => {
+  if (propertyFormPanelRef.value) {
+    emit('mounted', propertyFormPanelRef.value);
+  }
 };
 
 const propsPanelEl = useTemplateRef('propsPanel');

package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -89,10 +89,10 @@ const editable = computed(() => codeBlockService?.getEditStatus());
 const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } =
   useCodeBlockEdit(codeBlockService);
 
-const codeBlockList = useTemplateRef<InstanceType<typeof CodeBlockList>>('codeBlockList');
+const codeBlockListRef = useTemplateRef<InstanceType<typeof CodeBlockList>>('codeBlockList');
 
 const filterTextChangeHandler = (val: string) => {
-  codeBlockList.value?.filter(val);
+  codeBlockListRef.value?.filter(val);
 };
 
 eventBus?.on('edit-code', (id: string) => {
@@ -104,7 +104,7 @@ const {
   menuData: contentMenuData,
   contentMenuHideHandler,
 } = useContentMenu((id: string) => {
-  codeBlockList.value?.deleteCode(id);
+  codeBlockListRef.value?.deleteCode(id);
 });
 const menuData = computed<(MenuButton | MenuComponent)[]>(() => props.customContentMenu(contentMenuData, 'code-block'));
 </script>

package/src/layouts/sidebar/layer/LayerMenu.vue

@@ -27,7 +27,7 @@ const emit = defineEmits<{
 }>();
 
 const services = inject<Services>('services');
-const menu = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
+const menuRef = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
 const node = computed(() => services?.editorService.get('node'));
 const nodes = computed(() => services?.editorService.get('nodes'));
 const componentList = computed(() => services?.componentListService.getList() || []);
@@ -113,7 +113,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
 );
 
 const show = (e: MouseEvent) => {
-  menu.value?.show(e);
+  menuRef.value?.show(e);
 };
 
 defineExpose({

package/src/layouts/sidebar/layer/LayerPanel.vue

@@ -87,13 +87,13 @@ defineProps<{
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 
-const tree = useTemplateRef<InstanceType<typeof Tree>>('tree');
+const treeRef = useTemplateRef<InstanceType<typeof Tree>>('tree');
 
 const page = computed(() => editorService?.get('page'));
 const nodeData = computed<TreeNodeData[]>(() => (!page.value ? [] : [page.value]));
 
 const { nodeStatusMap } = useNodeStatus(services);
-const { isCtrlKeyDown } = useKeybinding(services, tree);
+const { isCtrlKeyDown } = useKeybinding(services, treeRef);
 
 const filterNodeMethod = (v: string, data: MNode): boolean => {
   let name = '';
@@ -121,10 +121,11 @@ const collapseAllHandler = () => {
 
 const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useDrag(services);
 
+// 右键菜单
+const menuRef = useTemplateRef<InstanceType<typeof LayerMenu>>('menu');
 const {
-  menu,
   nodeClickHandler,
   nodeContentMenuHandler,
   highlightHandler: mouseenterHandler,
-} = useClick(services, isCtrlKeyDown, nodeStatusMap);
+} = useClick(services, isCtrlKeyDown, nodeStatusMap, menuRef);
 </script>

package/src/layouts/sidebar/layer/use-click.ts

@@ -1,4 +1,4 @@
-import { computed, type ComputedRef, nextTick, type Ref, useTemplateRef } from 'vue';
+import { computed, type ComputedRef, nextTick, type Ref, type ShallowRef } from 'vue';
 import { throttle } from 'lodash-es';
 
 import { Id, MNode } from '@tmagic/core';
@@ -13,6 +13,7 @@ export const useClick = (
   services: Services | undefined,
   isCtrlKeyDown: Ref<boolean>,
   nodeStatusMap: ComputedRef<Map<Id, LayerNodeStatus> | undefined>,
+  menuRef: ShallowRef<InstanceType<typeof LayerMenu> | null>,
 ) => {
   const isMultiSelect = computed(() => isCtrlKeyDown.value && !services?.editorService.get('disabledMultiSelect'));
 
@@ -98,11 +99,8 @@ export const useClick = (
     });
   };
 
-  // 右键菜单
-  const menu = useTemplateRef<InstanceType<typeof LayerMenu>>('menu');
-
   return {
-    menu,
+    menuRef,
 
     nodeClickHandler,
 
@@ -114,7 +112,7 @@ export const useClick = (
         nodeClickHandler(event, data);
       }
 
-      menu.value?.show(event);
+      menuRef.value?.show(event);
     },
 
     highlightHandler,

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

@@ -39,8 +39,8 @@ const editorService = services?.editorService;
 
 const visible = ref(false);
 const buttonVisible = ref(false);
-const button = useTemplateRef<HTMLDivElement>('button');
-const box = useTemplateRef<InstanceType<typeof FloatingBox>>('box');
+const buttonEl = useTemplateRef<HTMLDivElement>('button');
+const boxRef = useTemplateRef<InstanceType<typeof FloatingBox>>('box');
 
 const stage = computed(() => editorService?.get('stage'));
 const page = computed(() => editorService?.get('page'));
@@ -99,14 +99,14 @@ const menuPosition = ref({
 });
 
 watch(visible, async (visible) => {
-  if (!button.value || !visible) {
+  if (!buttonEl.value || !visible) {
     return;
   }
 
   await nextTick();
 
-  const rect = button.value.getBoundingClientRect();
-  const height = box.value?.target?.clientHeight || 0;
+  const rect = buttonEl.value.getBoundingClientRect();
+  const height = boxRef.value?.target?.clientHeight || 0;
 
   menuPosition.value = {
     left: rect.left + rect.width + 5,

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

@@ -14,7 +14,7 @@
       width: 60,
       height: 50,
     }"
-    @click="stageWrap?.container?.focus()"
+    @click="stageWrapRef?.container?.focus()"
   >
     <div
       class="m-editor-stage-container"
@@ -95,9 +95,9 @@ const services = inject<Services>('services');
 
 const stageLoading = computed(() => services?.editorService.get('stageLoading') || false);
 
-const stageWrap = useTemplateRef<InstanceType<typeof ScrollViewer>>('stageWrap');
-const stageContainer = useTemplateRef<HTMLDivElement>('stageContainer');
-const menu = useTemplateRef<InstanceType<typeof ViewerMenu>>('menu');
+const stageWrapRef = useTemplateRef<InstanceType<typeof ScrollViewer>>('stageWrap');
+const stageContainerEl = useTemplateRef<HTMLDivElement>('stageContainer');
+const menuRef = useTemplateRef<InstanceType<typeof ViewerMenu>>('menu');
 
 const nodes = computed(() => services?.editorService.get('nodes') || []);
 const isMultiSelect = computed(() => nodes.value.length > 1);
@@ -111,18 +111,18 @@ const node = computed(() => services?.editorService.get('node'));
 watchEffect(() => {
   if (stage || !page.value) return;
 
-  if (!stageContainer.value) return;
+  if (!stageContainerEl.value) return;
   if (!(props.stageOptions?.runtimeUrl || props.stageOptions?.render) || !root.value) return;
 
   stage = useStage(props.stageOptions);
 
   stage.on('select', () => {
-    stageWrap.value?.container?.focus();
+    stageWrapRef.value?.container?.focus();
   });
 
   services?.editorService.set('stage', markRaw(stage));
 
-  stage.mount(stageContainer.value);
+  stage.mount(stageContainerEl.value);
 
   if (!node.value?.id) {
     return;
@@ -188,9 +188,9 @@ const resizeObserver = new ResizeObserver((entries) => {
 });
 
 onMounted(() => {
-  if (stageWrap.value?.container) {
-    resizeObserver.observe(stageWrap.value.container);
-    services?.keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrap.value.container);
+  if (stageWrapRef.value?.container) {
+    resizeObserver.observe(stageWrapRef.value.container);
+    services?.keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrapRef.value.container);
   }
 });
 
@@ -206,7 +206,7 @@ const parseDSL = getEditorConfig('parseDSL');
 
 const contextmenuHandler = (e: MouseEvent) => {
   e.preventDefault();
-  menu.value?.show(e);
+  menuRef.value?.show(e);
 };
 
 const dragoverHandler = (e: DragEvent) => {
@@ -239,10 +239,10 @@ const dropHandler = async (e: DragEvent) => {
     parent = services?.editorService.getNodeById(parentId, false) as MContainer;
   }
 
-  if (parent && stageContainer.value && stage) {
+  if (parent && stageContainerEl.value && stage) {
     const layout = await services?.editorService.getLayout(parent);
 
-    const containerRect = stageContainer.value.getBoundingClientRect();
+    const containerRect = stageContainerEl.value.getBoundingClientRect();
     const { scrollTop, scrollLeft } = stage.mask!;
     const { style = {} } = config.data;
 

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

@@ -19,7 +19,7 @@ const services = inject<Services>('services');
 
 const stageOptions = inject<StageOptions>('stageOptions');
 
-const stageOverlay = useTemplateRef<HTMLDivElement>('stageOverlay');
+const stageOverlayEl = useTemplateRef<HTMLDivElement>('stageOverlay');
 
 const stageOverlayVisible = computed(() => services?.stageOverlayService.get('stageOverlayVisible'));
 const wrapWidth = computed(() => services?.stageOverlayService.get('wrapWidth') || 0);
@@ -42,7 +42,7 @@ watch(stage, (stage) => {
   }
 });
 
-watch(stageOverlay, (stageOverlay) => {
+watch(stageOverlayEl, (stageOverlay) => {
   if (!services) return;
 
   const subStage = services.stageOverlayService.createStage(stageOptions);

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

@@ -31,7 +31,7 @@ const props = withDefaults(
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;
-const menu = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
+const menuRef = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
 const canCenter = ref(false);
 
 const node = computed(() => editorService?.get('node'));
@@ -52,7 +52,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         },
       },
       useCopyMenu(),
-      usePasteMenu(menu),
+      usePasteMenu(menuRef),
       {
         type: 'divider',
         direction: 'horizontal',
@@ -136,7 +136,7 @@ watch(
 );
 
 const show = (e: MouseEvent) => {
-  menu.value?.show(e);
+  menuRef.value?.show(e);
 };
 
 defineExpose({ show });

package/src/services/componentList.ts

@@ -16,14 +16,14 @@
  * limitations under the License.
  */
 
-import { reactive } from 'vue';
+import { shallowReactive } from 'vue';
 
 import type { ComponentGroup, ComponentGroupState } from '@editor/type';
 
 import BaseService from './BaseService';
 
 class ComponentList extends BaseService {
-  private state = reactive<ComponentGroupState>({
+  private state = shallowReactive<ComponentGroupState>({
     list: [],
   });
 

package/src/services/dep.ts

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { reactive } from 'vue';
+import { reactive, shallowReactive } from 'vue';
 
 import type { DepExtendedData, Id, MNode, Target, TargetNode } from '@tmagic/core';
 import { DepTargetType, Watcher } from '@tmagic/core';
@@ -29,6 +29,7 @@ export interface DepEvents {
   'add-target': [target: Target];
   'remove-target': [id: string | number];
   collected: [nodes: MNode[], deep: boolean];
+  'ds-collected': [nodes: MNode[], deep: boolean];
 }
 
 interface State {
@@ -40,7 +41,7 @@ type StateKey = keyof State;
 const idleTask = new IdleTask<{ node: TargetNode; deep: boolean; target: Target }>();
 
 class Dep extends BaseService {
-  private state = reactive<State>({
+  private state = shallowReactive<State>({
     collecting: false,
   });
 
@@ -96,6 +97,7 @@ class Dep extends BaseService {
     this.set('collecting', false);
 
     this.emit('collected', nodes, deep);
+    this.emit('ds-collected', nodes, deep);
   }
 
   public collectIdle(nodes: MNode[], depExtendedData: DepExtendedData = {}, deep = false, type?: DepTargetType) {
@@ -119,6 +121,9 @@ class Dep extends BaseService {
         this.set('collecting', false);
         resolve();
       });
+      idleTask.once('hight-level-finish', () => {
+        this.emit('ds-collected', nodes, deep);
+      });
     });
   }
 
@@ -185,6 +190,7 @@ class Dep extends BaseService {
         deep: false,
         target,
       },
+      target.type === DepTargetType.DATA_SOURCE,
     );
 
     if (deep && Array.isArray(node.items) && node.items.length) {

package/src/services/stageOverlay.ts

@@ -1,4 +1,4 @@
-import { reactive } from 'vue';
+import { shallowReactive } from 'vue';
 import type { Writable } from 'type-fest';
 
 import StageCore from '@tmagic/stage';
@@ -17,7 +17,7 @@ const canUsePluginMethods = {
 type SyncMethodName = Writable<(typeof canUsePluginMethods)['sync']>;
 
 class StageOverlay extends BaseService {
-  private state: StageOverlayState = reactive({
+  private state: StageOverlayState = shallowReactive({
     wrapDiv: document.createElement('div'),
     sourceEl: null,
     contentEl: null,

package/src/services/ui.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { reactive } from 'vue';
+import { shallowReactive } from 'vue';
 import type { Writable } from 'type-fest';
 
 import { convertToNumber } from '@tmagic/utils';
@@ -26,7 +26,7 @@ import type { AsyncHookPlugin, StageRect, UiState } from '@editor/type';
 
 import BaseService from './BaseService';
 
-const state = reactive<UiState>({
+const state = shallowReactive<UiState>({
   uiSelectMode: false,
   showSrc: false,
   showStylePanel: true,