JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-11-19 14:06:36 +08:00
Code Issues Projects Releases Wiki Activity

feat(editor, stage): 初始化加载runtime loading

Browse Source
This commit is contained in:
roymondchen 2023-12-15 14:09:44 +08:00
parent 978391fe90
commit 7305f878f3
6 changed files with 14 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/editor/src/hooks/use-stage.ts
View File

@ -51,6 +51,10 @@ export const useStage = (stageOptions: StageOptions) => {
getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY)), getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY)),
]); ]);
stage.on('page-el-update', () => {
editorService.set('stageLoading', false);
});
stage.on('select', (el: HTMLElement) => { stage.on('select', (el: HTMLElement) => {
if (`${editorService.get('node')?.id}` === el.id && editorService.get('nodes').length === 1) return; if (`${editorService.get('node')?.id}` === el.id && editorService.get('nodes').length === 1) return;
editorService.select(el.id); editorService.select(el.id);

3
packages/editor/src/layouts/Framework.vue
View File

@ -11,6 +11,8 @@
</slot> </slot>
<SplitView <SplitView
v-loading="stageLoading"
element-loading-text="Runtime 加载中..."
v-else v-else
ref="splitView" ref="splitView"
class="m-editor-content" class="m-editor-content"
@ -77,6 +79,7 @@ const splitView = ref<InstanceType<typeof SplitView>>();
const root = computed(() => editorService?.get('root')); const root = computed(() => editorService?.get('root'));
const pageLength = computed(() => editorService?.get('pageLength') || 0); const pageLength = computed(() => editorService?.get('pageLength') || 0);
const stageLoading = computed(() => editorService?.get('stageLoading') || false);
const showSrc = computed(() => uiService?.get('showSrc')); const showSrc = computed(() => uiService?.get('showSrc'));
const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData'; const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';

1
packages/editor/src/layouts/workspace/viewer/Stage.vue
View File

@ -108,6 +108,7 @@ watch(zoom, (zoom) => {
watch(page, (page) => { watch(page, (page) => {
if (runtime && page) { if (runtime && page) {
services?.editorService.set('stageLoading', true);
runtime.updatePageId?.(page.id); runtime.updatePageId?.(page.id);
nextTick(() => { nextTick(() => {
stage?.select(page.id); stage?.select(page.id);

3
packages/editor/src/services/editor.ts
View File

@ -54,6 +54,7 @@ class Editor extends BaseService {
node: null, node: null,
nodes: [], nodes: [],
stage: null, stage: null,
stageLoading: true,
highlightNode: null, highlightNode: null,
modifiedNodeIds: new Map(), modifiedNodeIds: new Map(),
pageLength: 0, pageLength: 0,
@ -111,8 +112,10 @@ class Editor extends BaseService {
if (value && isObject(value) && !(value instanceof StageCore) && !(value instanceof Map)) { if (value && isObject(value) && !(value instanceof StageCore) && !(value instanceof Map)) {
this.state.pageLength = value.items?.length || 0; this.state.pageLength = value.items?.length || 0;
this.state.stageLoading = this.state.pageLength !== 0;
} else { } else {
this.state.pageLength = 0; this.state.pageLength = 0;
this.state.stageLoading = false;
} }
this.emit('root-change', value, preValue); this.emit('root-change', value, preValue);

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

@ -141,6 +141,7 @@ export interface StoreState {
highlightNode: MNode | null; highlightNode: MNode | null;
nodes: MNode[]; nodes: MNode[];
stage: StageCore | null; stage: StageCore | null;
stageLoading: boolean;
modifiedNodeIds: Map<Id, Id>; modifiedNodeIds: Map<Id, Id>;
pageLength: number; pageLength: number;
} }

2
packages/stage/src/StageCore.ts
View File

@ -279,6 +279,8 @@ export default class StageCore extends EventEmitter {
this.renderer.on('page-el-update', (el: HTMLElement) => { this.renderer.on('page-el-update', (el: HTMLElement) => {
this.mask?.observe(el); this.mask?.observe(el);
this.observePageResize(el); this.observePageResize(el);
this.emit('page-el-update', el);
}); });
} }