refactor(editor): stage组件直接响应stageCore的事件

packages/editor/src/layouts/workspace/Stage.vue

@@ -110,9 +110,7 @@ export default defineComponent({
     },
   },
 
-  emits: ['select', 'update', 'sort', 'highlight'],
-
-  setup(props, { emit }) {
+  setup(props) {
     const services = inject<Services>('services');
 
     const stageWrap = ref<InstanceType<typeof ScrollViewer>>();
@@ -156,19 +154,19 @@ export default defineComponent({
       stage?.mount(stageContainer.value);
 
       stage?.on('select', (el: HTMLElement) => {
-        emit('select', el);
+        services?.editorService.select(el.id);
       });
 
       stage?.on('highlight', (el: HTMLElement) => {
-        emit('highlight', el);
+        services?.editorService.highlight(el.id);
       });
 
       stage?.on('update', (ev: UpdateEventData) => {
-        emit('update', { id: ev.el.id, style: ev.style });
+        services?.editorService.update({ id: ev.el.id, style: ev.style });
       });
 
       stage?.on('sort', (ev: SortEventData) => {
-        emit('sort', ev);
+        services?.editorService.sort(ev.src, ev.dist);
       });
 
       stage?.on('changeGuides', () => {

packages/editor/src/layouts/workspace/Workspace.vue

@@ -6,10 +6,6 @@
       :render="render"
       :moveable-options="moveableOptions"
       :can-select="canSelect"
-      @select="selectHandler"
-      @highlight="highlightHandler"
-      @update="updateNodeHandler"
-      @sort="sortNodeHandler"
     ></magic-stage>
 
     <slot name="workspace-content"></slot>
@@ -24,8 +20,8 @@
 <script lang="ts">
 import { computed, defineComponent, inject, PropType } from 'vue';
 
-import type { MComponent, MContainer, MPage } from '@tmagic/schema';
-import type { MoveableOptions, SortEventData } from '@tmagic/stage';
+import type { MPage } from '@tmagic/schema';
+import type { MoveableOptions } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
 
 import type { Services } from '@editor/type';
@@ -62,22 +58,6 @@ export default defineComponent({
 
     return {
       page: computed(() => services?.editorService.get<MPage>('page')),
-
-      selectHandler(el: HTMLElement) {
-        services?.editorService.select(el.id);
-      },
-
-      updateNodeHandler(node: MComponent | MContainer | MPage) {
-        services?.editorService.update(node);
-      },
-
-      sortNodeHandler(ev: SortEventData) {
-        services?.editorService.sort(ev.src, ev.dist);
-      },
-
-      highlightHandler(el: HTMLElement) {
-        services?.editorService.highlight(el.id);
-      },
     };
   },
 });

packages/editor/src/type.ts

@@ -230,6 +230,11 @@ export interface ComponentGroup {
   items: ComponentItem[];
 }
 
+export interface UpdateData {
+  id: Id;
+  [key: string]: any;
+}
+
 export enum LayerOffset {
   TOP = 'top',
   BOTTOM = 'bottom',