@tmagic/editor 1.1.0-beta.9 → 1.1.2

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -24,11 +24,13 @@
             @dragend="dragendHandler"
             @drag="dragHandler"
           >
-            <m-icon :icon="item.icon"></m-icon>
+            <slot name="component-list-item" :component="item">
+              <MIcon :icon="item.icon"></MIcon>
 
-            <el-tooltip effect="dark" placement="bottom" :content="item.text">
-              <span>{{ item.text }}</span>
-            </el-tooltip>
+              <el-tooltip effect="dark" placement="bottom" :content="item.text">
+                <span>{{ item.text }}</span>
+              </el-tooltip>
+            </slot>
           </div>
         </el-collapse-item>
       </template>
@@ -36,8 +38,8 @@
   </el-scrollbar>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, ref } from 'vue';
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue';
 import serialize from 'serialize-javascript';
 
 import type StageCore from '@tmagic/stage';
@@ -46,89 +48,75 @@ import { removeClassNameByClassName } from '@tmagic/utils';
 import MIcon from '../../components/Icon.vue';
 import type { ComponentGroup, ComponentItem, Services, StageOptions } from '../../type';
 
-export default defineComponent({
-  name: 'ui-component-panel',
-
-  components: { MIcon },
-
-  setup() {
-    const searchText = ref('');
-    const services = inject<Services>('services');
-    const stageOptions = inject<StageOptions>('stageOptions');
-
-    const stage = computed(() => services?.editorService.get<StageCore>('stage'));
-    const list = computed(() =>
-      services?.componentListService.getList().map((group: ComponentGroup) => ({
-        ...group,
-        items: group.items.filter((item: ComponentItem) => item.text.includes(searchText.value)),
-      })),
+const searchText = ref('');
+const services = inject<Services>('services');
+const stageOptions = inject<StageOptions>('stageOptions');
+
+const stage = computed(() => services?.editorService.get<StageCore>('stage'));
+const list = computed(() =>
+  services?.componentListService.getList().map((group: ComponentGroup) => ({
+    ...group,
+    items: group.items.filter((item: ComponentItem) => item.text.includes(searchText.value)),
+  })),
+);
+const collapseValue = computed(() =>
+  Array(list.value?.length)
+    .fill(1)
+    .map((x, i) => i),
+);
+
+let timeout: NodeJS.Timeout | undefined;
+let clientX: number;
+let clientY: number;
+
+const appendComponent = ({ text, type, data = {} }: ComponentItem): void => {
+  services?.editorService.add({
+    name: text,
+    type,
+    ...data,
+  });
+};
+
+const dragstartHandler = ({ text, type, data = {} }: ComponentItem, e: DragEvent) => {
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData(
+      'data',
+      serialize({
+        name: text,
+        type,
+        ...data,
+      }).replace(/"(\w+)":\s/g, '$1: '),
     );
-    const collapseValue = computed(() =>
-      Array(list.value?.length)
-        .fill(1)
-        .map((x, i) => i),
-    );
-
-    let timeout: NodeJS.Timeout | undefined;
-    let clientX: number;
-    let clientY: number;
-
-    return {
-      searchText,
-      collapseValue,
-      list,
-
-      appendComponent({ text, type, data = {} }: ComponentItem): void {
-        services?.editorService.add({
-          name: text,
-          type,
-          ...data,
-        });
-      },
-
-      dragstartHandler({ text, type, data = {} }: ComponentItem, e: DragEvent) {
-        if (e.dataTransfer) {
-          e.dataTransfer.effectAllowed = 'move';
-          e.dataTransfer.setData(
-            'data',
-            serialize({
-              name: text,
-              type,
-              ...data,
-            }).replace(/"(\w+)":\s/g, '$1: '),
-          );
-        }
-      },
-
-      dragendHandler() {
-        if (timeout) {
-          globalThis.clearTimeout(timeout);
-          timeout = undefined;
-        }
-        const doc = stage.value?.renderer.contentWindow?.document;
-        if (doc && stageOptions) {
-          removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
-        }
-        clientX = 0;
-        clientY = 0;
-      },
-
-      dragHandler(e: DragEvent) {
-        if (e.clientX !== clientX || e.clientY !== clientY) {
-          clientX = e.clientX;
-          clientY = e.clientY;
-          if (timeout) {
-            globalThis.clearTimeout(timeout);
-            timeout = undefined;
-          }
-          return;
-        }
-
-        if (timeout || !stage.value) return;
-
-        timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
-      },
-    };
-  },
-});
+  }
+};
+
+const dragendHandler = () => {
+  if (timeout) {
+    globalThis.clearTimeout(timeout);
+    timeout = undefined;
+  }
+  const doc = stage.value?.renderer.contentWindow?.document;
+  if (doc && stageOptions) {
+    removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
+  }
+  clientX = 0;
+  clientY = 0;
+};
+
+const dragHandler = (e: DragEvent) => {
+  if (e.clientX !== clientX || e.clientY !== clientY) {
+    clientX = e.clientX;
+    clientY = e.clientY;
+    if (timeout) {
+      globalThis.clearTimeout(timeout);
+      timeout = undefined;
+    }
+    return;
+  }
+
+  if (timeout || !stage.value) return;
+
+  timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
+};
 </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/sidebar/Sidebar.vue

@@ -14,6 +14,10 @@
       <template #component-list-panel-header v-if="item === 'component-list'">
         <slot name="component-list-panel-header"></slot>
       </template>
+
+      <template #component-list-item="{ component }" v-if="item === 'component-list'">
+        <slot name="component-list-item" :component="component"></slot>
+      </template>
     </tab-pane>
   </el-tabs>
 </template>

package/src/layouts/sidebar/TabPane.vue

@@ -13,6 +13,18 @@
         <component v-else-if="config.slots?.componentListPanelHeader" :is="config.slots.componentListPanelHeader" />
       </template>
 
+      <template
+        #component-list-item="{ component }"
+        v-if="data === 'component-list' || config.slots?.componentListItem"
+      >
+        <slot v-if="data === 'component-list'" name="component-list-item" :component="component"></slot>
+        <component
+          v-else-if="config.slots?.componentListItem"
+          :is="config.slots.componentListItem"
+          :component="component"
+        />
+      </template>
+
       <template #layer-panel-header v-if="data === 'layer' || config.slots?.layerPanelHeader">
         <slot v-if="data === 'layer'" name="layer-panel-header"></slot>
         <component v-else-if="config.slots?.layerPanelHeader" :is="config.slots.layerPanelHeader" />

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>
@@ -38,7 +38,7 @@
         </div>
         <template #reference>
           <el-icon class="m-editor-page-bar-menu-icon">
-            <caret-bottom></caret-bottom>
+            <CaretBottom></CaretBottom>
           </el-icon>
         </template>
       </el-popover>

package/src/layouts/workspace/PageBarScrollContainer.vue

@@ -1,8 +1,14 @@
 <template>
   <div class="m-editor-page-bar" ref="pageBar">
-    <div id="m-editor-page-bar-add-icon" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="addPage">
+    <div
+      v-if="showAddPageButton"
+      id="m-editor-page-bar-add-icon"
+      class="m-editor-page-bar-item m-editor-page-bar-item-icon"
+      @click="addPage"
+    >
       <el-icon><plus></plus></el-icon>
     </div>
+    <div v-else style="width: 21px"></div>
     <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('left')">
       <el-icon><arrow-left-bold></arrow-left-bold></el-icon>
     </div>
@@ -26,13 +32,17 @@ import { generatePageNameByApp } from '../../utils/editor';
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;
+const uiService = services?.uiService;
 
 const pageBar = ref<HTMLDivElement>();
 const itemsContainer = ref<HTMLDivElement>();
 const pageBarWidth = ref(0);
 const canScroll = ref(false);
 
-const itemsContainerWidth = computed(() => pageBarWidth.value - 105);
+const showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
+
+// 减去新增、左移、右移三个按钮的宽度
+const itemsContainerWidth = computed(() => pageBarWidth.value - 35 * 2 - (showAddPageButton.value ? 35 : 21));
 
 let translateLeft = 0;
 const resizeObserver = new ResizeObserver((entries) => {
@@ -46,7 +56,7 @@ const resizeObserver = new ResizeObserver((entries) => {
 
 const setCanScroll = () => {
   if (itemsContainer.value) {
-    canScroll.value = itemsContainer.value.scrollWidth > pageBarWidth.value - 105;
+    canScroll.value = itemsContainer.value.scrollWidth > itemsContainerWidth.value;
   }
 };
 

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;
@@ -240,8 +158,8 @@ const dropHandler = async (e: DragEvent) => {
     config.style = {
       ...style,
       position,
-      top,
-      left,
+      top: top / zoom.value,
+      left: left / zoom.value,
     };
 
     config.inputEvent = e;

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: '水平居中',