@tmagic/editor 1.1.0-beta.10 → 1.1.0-beta.13

package/src/index.ts

@@ -44,6 +44,8 @@ export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPa
 export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
 export { default as PropsPanel } from './layouts/PropsPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
+export { default as ContentMenu } from './components/ContentMenu.vue';
+export { default as Icon } from './components/Icon.vue';
 
 const defaultInstallOpt: InstallOptions = {
   // @todo, 自定义图片上传方法等编辑器依赖的外部选项

package/src/layouts/NavMenu.vue

@@ -1,41 +1,174 @@
 <template>
   <div class="m-editor-nav-menu" :style="{ height: `${height}px` }">
     <div v-for="key in keys" :class="`menu-${key}`" :key="key" :style="`width: ${columnWidth?.[key]}px`">
-      <tool-button :data="item" v-for="(item, index) in data[key]" :key="index"></tool-button>
+      <tool-button :data="item" v-for="(item, index) in buttons[key]" :key="index"></tool-button>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, PropType } from 'vue';
+<script lang="ts" setup>
+import { computed, inject, markRaw } from 'vue';
+import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
+
+import { NodeType } from '@tmagic/schema';
 
 import ToolButton from '../components/ToolButton.vue';
-import { GetColumnWidth, MenuBarData, Services } from '../type';
+import { ColumnLayout, GetColumnWidth, MenuBarData, MenuButton, MenuComponent, MenuItem, Services } from '../type';
 
-export default defineComponent({
-  name: 'nav-menu',
+const props = withDefaults(
+  defineProps<{
+    data?: MenuBarData;
+    height?: number;
+  }>(),
+  {
+    data: () => ({}),
+    height: 35,
+  },
+);
 
-  components: { ToolButton },
+const services = inject<Services>('services');
+const uiService = services?.uiService;
 
-  props: {
-    data: {
-      type: Object as PropType<MenuBarData>,
-      default: () => ({}),
-    },
+const columnWidth = computed(() => services?.uiService.get<GetColumnWidth>('columnWidth'));
+const keys = Object.values(ColumnLayout);
 
-    height: {
-      type: Number,
-    },
-  },
+const showGuides = computed((): boolean => uiService?.get<boolean>('showGuides') ?? true);
+const showRule = computed((): boolean => uiService?.get<boolean>('showRule') ?? true);
+const zoom = computed((): number => uiService?.get<number>('zoom') ?? 1);
 
-  setup(props) {
-    const services = inject<Services>('services');
+const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+const ctrl = isMac ? 'Command' : 'Ctrl';
 
-    return {
-      keys: computed(() => Object.keys(props.data) as Array<keyof MenuBarData>),
+const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => {
+  if (typeof item !== 'string') {
+    return [item];
+  }
+  const config: (MenuButton | MenuComponent)[] = [];
+  switch (item) {
+    case '/':
+      config.push({
+        type: 'divider',
+        className: 'divider',
+      });
+      break;
+    case 'zoom':
+      config.push(
+        ...getConfig('zoom-out'),
+        ...getConfig(`${parseInt(`${zoom.value * 100}`, 10)}%`),
+        ...getConfig('zoom-in'),
+        ...getConfig('scale-to-original'),
+        ...getConfig('scale-to-fit'),
+      );
+      break;
+    case 'delete':
+      config.push({
+        type: 'button',
+        className: 'delete',
+        icon: markRaw(Delete),
+        tooltip: `刪除(Delete)`,
+        disabled: () => services?.editorService.get('node')?.type === NodeType.PAGE,
+        handler: () => services?.editorService.remove(services?.editorService.get('node')),
+      });
+      break;
+    case 'undo':
+      config.push({
+        type: 'button',
+        className: 'undo',
+        icon: markRaw(Back),
+        tooltip: `后退(${ctrl}+z)`,
+        disabled: () => !services?.historyService.state.canUndo,
+        handler: () => services?.editorService.undo(),
+      });
+      break;
+    case 'redo':
+      config.push({
+        type: 'button',
+        className: 'redo',
+        icon: markRaw(Right),
+        tooltip: `前进(${ctrl}+Shift+z)`,
+        disabled: () => !services?.historyService.state.canRedo,
+        handler: () => services?.editorService.redo(),
+      });
+      break;
+    case 'zoom-in':
+      config.push({
+        type: 'button',
+        className: 'zoom-in',
+        icon: markRaw(ZoomIn),
+        tooltip: `放大(${ctrl}+=)`,
+        handler: () => uiService?.zoom(0.1),
+      });
+      break;
+    case 'zoom-out':
+      config.push({
+        type: 'button',
+        className: 'zoom-out',
+        icon: markRaw(ZoomOut),
+        tooltip: `縮小(${ctrl}+-)`,
+        handler: () => uiService?.zoom(-0.1),
+      });
+      break;
+    case 'scale-to-original':
+      config.push({
+        type: 'button',
+        className: 'scale-to-original',
+        icon: markRaw(ScaleToOriginal),
+        tooltip: `缩放到实际大小(${ctrl}+1)`,
+        handler: () => uiService?.set('zoom', 1),
+      });
+      break;
+    case 'scale-to-fit':
+      config.push({
+        type: 'button',
+        className: 'scale-to-fit',
+        icon: markRaw(FullScreen),
+        tooltip: `缩放以适应(${ctrl}+0)`,
+        handler: () => uiService?.set('zoom', uiService.calcZoom()),
+      });
+      break;
+    case 'rule':
+      config.push({
+        type: 'button',
+        className: 'rule',
+        icon: markRaw(Memo),
+        tooltip: showRule.value ? '隐藏标尺' : '显示标尺',
+        handler: () => uiService?.set('showRule', !showRule.value),
+      });
+      break;
+    case 'guides':
+      config.push({
+        type: 'button',
+        className: 'guides',
+        icon: markRaw(Grid),
+        tooltip: showGuides.value ? '隐藏参考线' : '显示参考线',
+        handler: () => uiService?.set('showGuides', !showGuides.value),
+      });
+      break;
+    default:
+      config.push({
+        type: 'text',
+        text: item,
+      });
+  }
+  return config;
+};
 
-      columnWidth: computed(() => services?.uiService.get<GetColumnWidth>('columnWidth')),
-    };
-  },
+const buttons = computed(() => {
+  const data: {
+    [ColumnLayout.LEFT]: (MenuButton | MenuComponent)[];
+    [ColumnLayout.CENTER]: (MenuButton | MenuComponent)[];
+    [ColumnLayout.RIGHT]: (MenuButton | MenuComponent)[];
+  } = {
+    [ColumnLayout.LEFT]: [],
+    [ColumnLayout.CENTER]: [],
+    [ColumnLayout.RIGHT]: [],
+  };
+  keys.forEach((key) => {
+    const items = props.data[key] || [];
+    items.forEach((item) => {
+      data[key].push(...getConfig(item));
+    });
+  });
+  return data;
 });
 </script>

package/src/layouts/sidebar/LayerMenu.vue

@@ -9,7 +9,7 @@ import { Delete, DocumentCopy, Files, Plus } from '@element-plus/icons-vue';
 import { NodeType } from '@tmagic/schema';
 
 import ContentMenu from '../../components/ContentMenu.vue';
-import type { ComponentGroup, MenuButton, MenuItem, Services } from '../../type';
+import type { ComponentGroup, MenuButton, MenuComponent, Services } from '../../type';
 
 export default defineComponent({
   components: { ContentMenu },
@@ -22,7 +22,7 @@ export default defineComponent({
     const isPage = computed(() => node.value?.type === NodeType.PAGE);
     const componentList = computed(() => services?.componentListService.getList() || []);
 
-    const layerContentMenu = inject<MenuItem[]>('layerContentMenu', []);
+    const layerContentMenu = inject<(MenuComponent | MenuButton)[]>('layerContentMenu', []);
 
     const createMenuItems = (group: ComponentGroup): MenuButton[] =>
       group.items.map((component) => ({
@@ -77,7 +77,7 @@ export default defineComponent({
 
     return {
       menu,
-      menuData: computed<MenuItem[]>(() => [
+      menuData: computed<(MenuButton | MenuComponent)[]>(() => [
         {
           type: 'button',
           text: '新增',

package/src/layouts/sidebar/LayerPanel.vue

@@ -15,6 +15,7 @@
       v-if="values.length"
       ref="tree"
       node-key="id"
+      empty-text="页面空荡荡的"
       draggable
       :default-expanded-keys="expandedKeys"
       :load="loadItems"
@@ -29,7 +30,8 @@
       @node-click="clickHandler"
       @node-contextmenu="contextmenu"
       @node-drag-end="handleDragEnd"
-      empty-text="页面空荡荡的"
+      @node-collapse="handleCollapse"
+      @node-expand="handleExpand"
     >
       <template #default="{ node, data }">
         <div
@@ -60,7 +62,7 @@ import { computed, defineComponent, inject, Ref, ref, watchEffect } from 'vue';
 import type { ElTree } from 'element-plus';
 import { throttle } from 'lodash-es';
 
-import type { MNode, MPage } from '@tmagic/schema';
+import type { Id, MNode, MPage } from '@tmagic/schema';
 import { MContainer, NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 
@@ -122,22 +124,41 @@ const useDrop = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorServi
 });
 
 const useStatus = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorService?: EditorService) => {
-  const highlightNode = ref<MNode>();
   const node = ref<MNode>();
   const page = computed(() => editorService?.get('page'));
+  const expandedKeys = new Map<Id, Id>();
+
+  const expandNodes = () => {
+    expandedKeys.forEach((key) => {
+      if (!tree.value) return;
+      tree.value.getNode(key)?.expand();
+    });
+  };
 
   watchEffect(() => {
     if (!tree.value) return;
-    node.value = editorService?.get('node');
-    node.value && tree.value.setCurrentKey(node.value.id, true);
+    if (!editorService) return;
+    node.value = editorService.get('node');
+
+    if (!node.value) return;
 
-    const parent = editorService?.get('parent');
+    tree.value.setCurrentKey(node.value.id, true);
+
+    const parent = editorService.get('parent');
     if (!parent?.id) return;
 
     const treeNode = tree.value.getNode(parent.id);
     treeNode?.updateChildren();
 
-    highlightNode.value = editorService?.get('highlightNode');
+    setTimeout(() => {
+      tree.value &&
+        Object.entries(tree.value.store.nodesMap).forEach(([id, node]) => {
+          if (node.expanded && node.data.items) {
+            expandedKeys.set(id, id);
+          }
+        });
+      expandNodes();
+    });
   });
 
   return {
@@ -153,9 +174,19 @@ const useStatus = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorSer
       resolve([]);
     },
 
-    highlightNode,
+    highlightNode: computed(() => editorService?.get('highlightNode')),
     clickNode: node,
     expandedKeys: computed(() => (node.value ? [node.value.id] : [])),
+
+    handleCollapse: (data: MNode) => {
+      expandedKeys.delete(data.id);
+    },
+
+    handleExpand: (data: MNode) => {
+      const parent = editorService?.getParentById(data.id);
+      if (!parent?.id) return;
+      expandedKeys.set(parent.id, parent.id);
+    },
   };
 };
 

package/src/layouts/workspace/PageBar.vue

@@ -10,7 +10,7 @@
       <div class="m-editor-page-bar-title">
         <slot name="page-bar-title" :page="item">
           <el-tooltip effect="dark" placement="top-start" :content="item.name">
-            <span>{{ item.name }}</span>
+            <span>{{ item.name || item.id }}</span>
           </el-tooltip>
         </slot>
       </div>

package/src/layouts/workspace/Stage.vue

@@ -4,12 +4,14 @@
     ref="stageWrap"
     :width="stageRect?.width"
     :height="stageRect?.height"
+    :wrap-width="stageContainerRect?.width"
+    :wrap-height="stageContainerRect?.height"
     :zoom="zoom"
   >
     <div
       class="m-editor-stage-container"
       ref="stageContainer"
-      :style="`transform: scale(${zoom})`"
+      :style="`transform: scale(${zoom});`"
       @contextmenu="contextmenuHandler"
       @drop="dropHandler"
       @dragover="dragoverHandler"
@@ -25,25 +27,11 @@ import { computed, inject, markRaw, onMounted, onUnmounted, ref, toRaw, watch, w
 import { cloneDeep } from 'lodash-es';
 
 import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
-import StageCore, {
-  calcValueByFontsize,
-  getOffset,
-  GuidesType,
-  Runtime,
-  SortEventData,
-  UpdateEventData,
-} from '@tmagic/stage';
+import StageCore, { calcValueByFontsize, getOffset, Runtime } from '@tmagic/stage';
 
 import ScrollViewer from '../../components/ScrollViewer.vue';
-import {
-  H_GUIDE_LINE_STORAGE_KEY,
-  Layout,
-  Services,
-  StageOptions,
-  StageRect,
-  V_GUIDE_LINE_STORAGE_KEY,
-} from '../../type';
-import { getGuideLineFromCache } from '../../utils';
+import { Layout, Services, StageOptions, StageRect } from '../../type';
+import { useStage } from '../../utils/stage';
 
 import ViewerMenu from './ViewerMenu.vue';
 
@@ -59,94 +47,24 @@ const menu = ref<InstanceType<typeof ViewerMenu>>();
 
 const isMultiSelect = computed(() => services?.editorService.get('nodes')?.length > 1);
 const stageRect = computed(() => services?.uiService.get<StageRect>('stageRect'));
-const uiSelectMode = computed(() => services?.uiService.get<boolean>('uiSelectMode'));
+const stageContainerRect = computed(() => services?.uiService.get<StageRect>('stageContainerRect'));
 const root = computed(() => services?.editorService.get<MApp>('root'));
 const page = computed(() => services?.editorService.get<MPage>('page'));
 const zoom = computed(() => services?.uiService.get<number>('zoom') || 1);
 const node = computed(() => services?.editorService.get<MNode>('node'));
 
-const getGuideLineKey = (key: string) => `${key}_${root.value?.id}_${page.value?.id}`;
-
 watchEffect(() => {
   if (stage) return;
 
   if (!stageContainer.value) return;
   if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value) return;
 
-  stage = new StageCore({
-    render: stageOptions.render,
-    runtimeUrl: stageOptions.runtimeUrl,
-    zoom: zoom.value,
-    autoScrollIntoView: stageOptions.autoScrollIntoView,
-    isContainer: stageOptions.isContainer,
-    containerHighlightClassName: stageOptions.containerHighlightClassName,
-    containerHighlightDuration: stageOptions.containerHighlightDuration,
-    containerHighlightType: stageOptions.containerHighlightType,
-    canSelect: (el, event, stop) => {
-      const elCanSelect = stageOptions.canSelect(el);
-      // 在组件联动过程中不能再往下选择，返回并触发 ui-select
-      if (uiSelectMode.value && elCanSelect && event.type === 'mousedown') {
-        document.dispatchEvent(new CustomEvent('ui-select', { detail: el }));
-        return stop();
-      }
-
-      return elCanSelect;
-    },
-    moveableOptions: stageOptions.moveableOptions,
-    updateDragEl: stageOptions.updateDragEl,
-  });
+  stage = useStage(stageOptions);
 
   services?.editorService.set('stage', markRaw(stage));
 
   stage?.mount(stageContainer.value);
 
-  stage.mask.setGuides([
-    getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
-    getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY)),
-  ]);
-
-  stage?.on('select', (el: HTMLElement) => {
-    services?.editorService.select(el.id);
-  });
-
-  stage?.on('highlight', (el: HTMLElement) => {
-    services?.editorService.highlight(el.id);
-  });
-
-  stage?.on('multiSelect', (els: HTMLElement[]) => {
-    services?.editorService.multiSelect(els.map((el) => el.id));
-  });
-
-  stage?.on('update', (ev: UpdateEventData) => {
-    if (ev.parentEl) {
-      for (const data of ev.data) {
-        services?.editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
-      }
-      return;
-    }
-
-    services?.editorService.update(ev.data.map((data) => ({ id: data.el.id, style: data.style })));
-  });
-
-  stage?.on('sort', (ev: SortEventData) => {
-    services?.editorService.sort(ev.src, ev.dist);
-  });
-
-  stage?.on('changeGuides', (e) => {
-    services?.uiService.set('showGuides', true);
-
-    if (!root.value || !page.value) return;
-
-    const storageKey = getGuideLineKey(
-      e.type === GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY,
-    );
-    if (e.guides.length) {
-      globalThis.localStorage.setItem(storageKey, JSON.stringify(e.guides));
-    } else {
-      globalThis.localStorage.removeItem(storageKey);
-    }
-  });
-
   if (!node.value?.id) return;
   stage?.on('runtime-ready', (rt) => {
     runtime = rt;

package/src/layouts/workspace/ViewerMenu.vue

@@ -12,7 +12,7 @@ import { isPage } from '@tmagic/utils';
 
 import ContentMenu from '../../components/ContentMenu.vue';
 import storageService from '../../services/storage';
-import { LayerOffset, Layout, MenuItem, Services } from '../../type';
+import { LayerOffset, Layout, MenuButton, MenuComponent, Services } from '../../type';
 import { COPY_STORAGE_KEY } from '../../utils/editor';
 
 const props = withDefaults(defineProps<{ isMultiSelect?: boolean }>(), { isMultiSelect: false });
@@ -28,9 +28,9 @@ const nodes = computed(() => editorService?.get<MNode[]>('nodes'));
 const parent = computed(() => editorService?.get('parent'));
 const stage = computed(() => editorService?.get<StageCore>('stage'));
 
-const stageContentMenu = inject<MenuItem[]>('stageContentMenu', []);
+const stageContentMenu = inject<(MenuButton | MenuComponent)[]>('stageContentMenu', []);
 
-const menuData = reactive<MenuItem[]>([
+const menuData = reactive<(MenuButton | MenuComponent)[]>([
   {
     type: 'button',
     text: '水平居中',