JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-09-25 18:32:09 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
roymondchen 2022-04-07 14:42:29 +08:00 committed by jia000
parent 97fa34bbc6
commit 9746bab435
3 changed files with 12 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/editor/src/layouts/workspace/Stage.vue
View File

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

24
packages/editor/src/layouts/workspace/Workspace.vue
View File

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

5
packages/editor/src/type.ts
View File

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