@tmagic/editor 1.2.0-beta.2 → 1.2.0-beta.21

package/src/layouts/workspace/Breadcrumb.vue

@@ -0,0 +1,32 @@
+<template>
+  <div v-if="nodes.length === 1" class="m-editor-breadcrumb">
+    <template v-for="(item, index) in path" :key="item.id">
+      <TMagicButton text :disabled="item.id === node?.id" @click="select(item)">{{ item.name }}</TMagicButton
+      ><span v-if="index < path.length - 1">/</span>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts" name="MEditorBreadcrumb">
+import { computed, inject } from 'vue';
+
+import { TMagicButton } from '@tmagic/design';
+import type { MApp, MNode } from '@tmagic/schema';
+import type StageCore from '@tmagic/stage';
+import { getNodePath } from '@tmagic/utils';
+
+import type { Services } from '../../type';
+
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+
+const node = computed(() => editorService?.get<MNode>('node'));
+const nodes = computed(() => editorService?.get<MNode[]>('nodes') || []);
+const root = computed(() => editorService?.get<MApp>('root'));
+const path = computed(() => getNodePath(node.value?.id || '', root.value?.items || []));
+
+const select = async (node: MNode) => {
+  await editorService?.select(node);
+  editorService?.get<StageCore>('stage')?.select(node.id);
+};
+</script>

package/src/layouts/workspace/PageBar.vue

@@ -9,47 +9,48 @@
     >
       <div class="m-editor-page-bar-title">
         <slot name="page-bar-title" :page="item">
-          <el-tooltip effect="dark" placement="top-start" :content="item.name">
+          <TMagicTooltip effect="dark" placement="top-start" :content="item.name">
             <span>{{ item.name || item.id }}</span>
-          </el-tooltip>
+          </TMagicTooltip>
         </slot>
       </div>
 
-      <el-popover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
+      <TMagicPopover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
         <div>
           <slot name="page-bar-popover" :page="item">
-            <tool-button
+            <ToolButton
               :data="{
                 type: 'button',
                 text: '复制',
                 icon: DocumentCopy,
                 handler: () => copy(item),
               }"
-            ></tool-button>
-            <tool-button
+            ></ToolButton>
+            <ToolButton
               :data="{
                 type: 'button',
                 text: '删除',
                 icon: Delete,
                 handler: () => remove(item),
               }"
-            ></tool-button>
+            ></ToolButton>
           </slot>
         </div>
         <template #reference>
-          <el-icon class="m-editor-page-bar-menu-icon">
+          <TMagicIcon class="m-editor-page-bar-menu-icon">
             <CaretBottom></CaretBottom>
-          </el-icon>
+          </TMagicIcon>
         </template>
-      </el-popover>
+      </TMagicPopover>
     </div>
   </PageBarScrollContainer>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorPageBar">
 import { computed, inject } from 'vue';
 import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
+import { TMagicIcon, TMagicPopover, TMagicTooltip } from '@tmagic/design';
 import type { MApp, MPage } from '@tmagic/schema';
 
 import ToolButton from '../../components/ToolButton.vue';

package/src/layouts/workspace/PageBarScrollContainer.vue

@@ -26,7 +26,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="MEditorPageBarScrollContainer">
 import { computed, inject, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
 import { ArrowLeftBold, ArrowRightBold, Plus } from '@element-plus/icons-vue';
 

package/src/layouts/workspace/Stage.vue

@@ -1,5 +1,5 @@
 <template>
-  <scroll-viewer
+  <ScrollViewer
     class="m-editor-stage"
     ref="stageWrap"
     :width="stageRect?.width"
@@ -7,6 +7,10 @@
     :wrap-width="stageContainerRect?.width"
     :wrap-height="stageContainerRect?.height"
     :zoom="zoom"
+    :correction-scroll-size="{
+      width: 60,
+      height: 50,
+    }"
   >
     <div
       class="m-editor-stage-container"
@@ -16,25 +20,29 @@
       @drop="dropHandler"
       @dragover="dragoverHandler"
     ></div>
-    <teleport to="body">
-      <viewer-menu ref="menu" :is-multi-select="isMultiSelect"></viewer-menu>
-    </teleport>
-  </scroll-viewer>
+    <Teleport to="body">
+      <ViewerMenu ref="menu" :is-multi-select="isMultiSelect" :stage-content-menu="stageContentMenu"></ViewerMenu>
+    </Teleport>
+  </ScrollViewer>
 </template>
 
-<script lang="ts" setup>
-import { computed, inject, markRaw, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
+<script lang="ts" setup name="MEditorStage">
+import { computed, inject, markRaw, nextTick, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import StageCore, { calcValueByFontsize, getOffset, Runtime } from '@tmagic/stage';
 
 import ScrollViewer from '../../components/ScrollViewer.vue';
-import { Layout, Services, StageOptions, StageRect } from '../../type';
+import { Layout, MenuButton, MenuComponent, Services, StageOptions, StageRect } from '../../type';
 import { useStage } from '../../utils/stage';
 
 import ViewerMenu from './ViewerMenu.vue';
 
+defineProps<{
+  stageContentMenu: (MenuButton | MenuComponent)[];
+}>();
+
 let stage: StageCore | null = null;
 let runtime: Runtime | null = null;
 
@@ -54,7 +62,7 @@ const zoom = computed(() => services?.uiService.get<number>('zoom') || 1);
 const node = computed(() => services?.editorService.get<MNode>('node'));
 
 watchEffect(() => {
-  if (stage) return;
+  if (stage || !page.value) return;
 
   if (!stageContainer.value) return;
   if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value) return;
@@ -88,6 +96,15 @@ watch(root, (root) => {
   }
 });
 
+watch(page, (page) => {
+  if (runtime && page) {
+    runtime.updatePageId?.(page.id);
+    nextTick(() => {
+      stage?.select(page.id);
+    });
+  }
+});
+
 const resizeObserver = new ResizeObserver((entries) => {
   for (const { contentRect } of entries) {
     services?.uiService.set('stageContainerRect', {

package/src/layouts/workspace/ViewerMenu.vue

@@ -2,9 +2,9 @@
   <content-menu :menu-data="menuData" ref="menu"></content-menu>
 </template>
 
-<script lang="ts" setup>
-import { computed, inject, markRaw, reactive, ref, watch } from 'vue';
-import { Bottom, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
+<script lang="ts" setup name="MEditorViewerMenu">
+import { computed, inject, markRaw, ref, watch } from 'vue';
+import { Bottom, CopyDocument, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
 
 import { MNode, NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
@@ -15,7 +15,10 @@ import storageService from '../../services/storage';
 import { LayerOffset, Layout, MenuButton, MenuComponent, Services } from '../../type';
 import { COPY_STORAGE_KEY } from '../../utils/editor';
 
-const props = withDefaults(defineProps<{ isMultiSelect?: boolean }>(), { isMultiSelect: false });
+const props = withDefaults(
+  defineProps<{ isMultiSelect?: boolean; stageContentMenu: (MenuButton | MenuComponent)[] }>(),
+  { isMultiSelect: false },
+);
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;
@@ -28,9 +31,7 @@ const nodes = computed(() => editorService?.get<MNode[]>('nodes'));
 const parent = computed(() => editorService?.get('parent'));
 const stage = computed(() => editorService?.get<StageCore>('stage'));
 
-const stageContentMenu = inject<(MenuButton | MenuComponent)[]>('stageContentMenu', []);
-
-const menuData = reactive<(MenuButton | MenuComponent)[]>([
+const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
   {
     type: 'button',
     text: '水平居中',
@@ -43,7 +44,7 @@ const menuData = reactive<(MenuButton | MenuComponent)[]>([
   {
     type: 'button',
     text: '复制',
-    icon: markRaw(DocumentCopy),
+    icon: markRaw(CopyDocument),
     handler: () => {
       nodes.value && editorService?.copy(nodes.value);
       canPaste.value = true;
@@ -52,6 +53,7 @@ const menuData = reactive<(MenuButton | MenuComponent)[]>([
   {
     type: 'button',
     text: '粘贴',
+    icon: markRaw(DocumentCopy),
     display: () => canPaste.value,
     handler: () => {
       const rect = menu.value?.$el.getBoundingClientRect();
@@ -130,7 +132,7 @@ const menuData = reactive<(MenuButton | MenuComponent)[]>([
       editorService?.get<StageCore>('stage').clearGuides();
     },
   },
-  ...stageContentMenu,
+  ...props.stageContentMenu,
 ]);
 
 watch(

package/src/layouts/workspace/Workspace.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="m-editor-workspace" tabindex="-1" ref="workspace">
+    <Breadcrumb></Breadcrumb>
+
     <slot name="stage">
-      <MagicStage :key="page?.id"></MagicStage>
+      <MagicStage v-if="page" :stage-content-menu="stageContentMenu"></MagicStage>
     </slot>
 
     <slot name="workspace-content"></slot>
@@ -13,18 +15,23 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorWorkspace">
 import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
 import KeyController from 'keycon';
 
 import type { MNode, MPage } from '@tmagic/schema';
 import { isPage } from '@tmagic/utils';
 
-import type { Services } from '../../type';
+import type { MenuButton, MenuComponent, Services } from '../../type';
 
+import Breadcrumb from './Breadcrumb.vue';
 import PageBar from './PageBar.vue';
 import MagicStage from './Stage.vue';
 
+defineProps<{
+  stageContentMenu: (MenuButton | MenuComponent)[];
+}>();
+
 const services = inject<Services>('services');
 const workspace = ref<HTMLDivElement>();
 const nodes = computed(() => services?.editorService.get<MNode[]>('nodes'));

package/src/services/BaseService.ts

@@ -77,7 +77,7 @@ const doAction = async (
  *
  *   editorService.usePlugin({
  *     beforeAdd(value) { return [value] },
- *     afterAdd(value, result) {},
+ *     afterAdd(result, value) { return result },
  *   });
  *
  *   editorService.add(); 最终会变成  () => {
@@ -169,6 +169,11 @@ export default class extends EventEmitter {
     });
   }
 
+  public removeAllPlugins() {
+    this.pluginOptionsList = {};
+    this.middleware = {};
+  }
+
   private async doTask() {
     this.doingTask = true;
     let task = this.taskList.shift();