@tmagic/editor 1.1.0-beta.1 → 1.1.0-beta.12

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,12 +62,13 @@ 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 { NodeType } from '@tmagic/schema';
+import type { Id, MNode, MPage } from '@tmagic/schema';
+import { MContainer, NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 
-import type { EditorService } from '@editor/services/editor';
-import type { Services } from '@editor/type';
+import type { EditorService } from '../../services/editor';
+import type { Services } from '../../type';
+import { Layout } from '../../type';
 
 import LayerMenu from './LayerMenu.vue';
 
@@ -104,8 +107,16 @@ const useDrop = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorServi
     return false;
   },
 
-  handleDragEnd() {
+  async handleDragEnd(e: any) {
     if (!tree.value) return;
+    const { data: node } = e;
+    const parent = editorService?.getParentById(node.id, false) as MContainer;
+    const layout = await editorService?.getLayout(parent);
+    node.style.position = layout;
+    if (layout === Layout.RELATIVE) {
+      node.style.top = 0;
+      node.style.left = 0;
+    }
     const { data } = tree.value;
     const [page] = data as [MPage];
     editorService?.update(page);
@@ -113,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 {
@@ -144,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

@@ -21,7 +21,7 @@
 <script lang="ts">
 import { defineComponent, PropType, ref, watch } from 'vue';
 
-import { SideBarData } from '@editor/type';
+import { SideBarData } from '../../type';
 
 import TabPane from './TabPane.vue';
 

package/src/layouts/sidebar/TabPane.vue

@@ -29,8 +29,8 @@
 import { computed, defineComponent, PropType } from 'vue';
 import { Coin, Files } from '@element-plus/icons-vue';
 
-import MIcon from '@editor/components/Icon.vue';
-import { SideComponent, SideItem } from '@editor/type';
+import MIcon from '../../components/Icon.vue';
+import { SideComponent, SideItem } from '../../type';
 
 import ComponentListPanel from './ComponentListPanel.vue';
 import LayerPanel from './LayerPanel.vue';

package/src/layouts/workspace/PageBar.vue

@@ -1,211 +1,82 @@
 <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">
-      <el-icon><plus></plus></el-icon>
-    </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>
-    <div v-if="root" class="m-editor-page-bar-items" ref="itemsContainer" :style="`width: ${itemsContainerWidth}px`">
-      <div
-        v-for="item in root.items"
-        :key="item.key"
-        class="m-editor-page-bar-item"
-        :class="{ active: page?.id === item.id }"
-        @click="switchPage(item)"
-      >
-        <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>
-            </el-tooltip>
+  <PageBarScrollContainer>
+    <div
+      v-for="item in (root && root.items) || []"
+      class="m-editor-page-bar-item"
+      :key="item.key"
+      :class="{ active: page?.id === item.id }"
+      @click="switchPage(item)"
+    >
+      <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 || item.id }}</span>
+          </el-tooltip>
+        </slot>
+      </div>
+
+      <el-popover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
+        <div>
+          <slot name="page-bar-popover" :page="item">
+            <tool-button
+              :data="{
+                type: 'button',
+                text: '复制',
+                icon: DocumentCopy,
+                handler: () => copy(item),
+              }"
+            ></tool-button>
+            <tool-button
+              :data="{
+                type: 'button',
+                text: '删除',
+                icon: Delete,
+                handler: () => remove(item),
+              }"
+            ></tool-button>
           </slot>
         </div>
-
-        <el-popover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
-          <div>
-            <slot name="page-bar-popover" :page="item">
-              <tool-button
-                :data="{
-                  type: 'button',
-                  text: '复制',
-                  icon: DocumentCopy,
-                  handler: () => copy(item),
-                }"
-              ></tool-button>
-              <tool-button
-                :data="{
-                  type: 'button',
-                  text: '删除',
-                  icon: Delete,
-                  handler: () => remove(item),
-                }"
-              ></tool-button>
-            </slot>
-          </div>
-          <template #reference>
-            <el-icon class="m-editor-page-bar-menu-icon">
-              <caret-bottom></caret-bottom>
-            </el-icon>
-          </template>
-        </el-popover>
-      </div>
+        <template #reference>
+          <el-icon class="m-editor-page-bar-menu-icon">
+            <caret-bottom></caret-bottom>
+          </el-icon>
+        </template>
+      </el-popover>
     </div>
-    <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('right')">
-      <el-icon><arrow-right-bold></arrow-right-bold></el-icon>
-    </div>
-  </div>
+  </PageBarScrollContainer>
 </template>
 
-<script lang="ts">
-import {
-  computed,
-  ComputedRef,
-  defineComponent,
-  inject,
-  markRaw,
-  onMounted,
-  onUnmounted,
-  ref,
-  toRaw,
-  watch,
-} from 'vue';
-import { ArrowLeftBold, ArrowRightBold, CaretBottom, Delete, DocumentCopy, Plus } from '@element-plus/icons-vue';
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
+import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
 import type { MApp, MPage } from '@tmagic/schema';
-import { NodeType } from '@tmagic/schema';
-
-import ToolButton from '@editor/components/ToolButton.vue';
-import type { Services } from '@editor/type';
-import { generatePageNameByApp } from '@editor/utils/editor';
-
-const useScroll = (root: ComputedRef<MApp | undefined>) => {
-  const pageBar = ref<HTMLDivElement>();
-  const itemsContainer = ref<HTMLDivElement>();
-
-  const pageBarWidth = ref(0);
-  const canScroll = ref(false);
-
-  const itemsContainerWidth = computed(() => pageBarWidth.value - 105);
-
-  let translateLeft = 0;
-  const resizeObserver = new ResizeObserver((entries) => {
-    for (const { contentRect } of entries) {
-      const { width } = contentRect;
-      pageBarWidth.value = width || 0;
-
-      setCanScroll();
-    }
-  });
-
-  const setCanScroll = () => {
-    if (itemsContainer.value) {
-      canScroll.value = itemsContainer.value.scrollWidth > pageBarWidth.value - 105;
-    }
-  };
-
-  const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
-    if (!itemsContainer.value) return;
 
-    const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+import ToolButton from '../../components/ToolButton.vue';
+import type { Services } from '../../type';
 
-    if (type === 'left') {
-      translateLeft += 100;
+import PageBarScrollContainer from './PageBarScrollContainer.vue';
 
-      if (translateLeft > 0) {
-        translateLeft = 0;
-      }
-    } else if (type === 'right') {
-      translateLeft -= 100;
+const services = inject<Services>('services');
+const editorService = services?.editorService;
 
-      if (-translateLeft > maxScrollLeft) {
-        translateLeft = -maxScrollLeft;
-      }
-    } else if (type === 'start') {
-      translateLeft = 0;
-    } else if (type === 'end') {
-      translateLeft = -maxScrollLeft;
-    }
+const root = computed(() => editorService?.get<MApp>('root'));
 
-    itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
-  };
+const page = computed(() => editorService?.get('page'));
 
-  onMounted(() => {
-    pageBar.value && resizeObserver.observe(pageBar.value);
-  });
+const switchPage = (page: MPage) => {
+  editorService?.select(page);
+};
 
-  onUnmounted(() => {
-    resizeObserver.disconnect();
+const copy = (node: MPage) => {
+  node && editorService?.copy(node);
+  editorService?.paste({
+    left: 0,
+    top: 0,
   });
-
-  watch(
-    () => root.value?.items.length,
-    (length = 0, preLength = 0) => {
-      setTimeout(() => {
-        setCanScroll();
-        if (length < preLength) {
-          scroll('start');
-        } else {
-          scroll('end');
-        }
-      });
-    },
-  );
-
-  return {
-    pageBar,
-    itemsContainer,
-    canScroll,
-
-    itemsContainerWidth,
-
-    scroll,
-  };
 };
 
-export default defineComponent({
-  components: { ArrowLeftBold, ArrowRightBold, CaretBottom, Plus, ToolButton },
-
-  setup() {
-    const services = inject<Services>('services');
-    const editorService = services?.editorService;
-
-    const root = computed(() => editorService?.get<MApp>('root'));
-
-    return {
-      Delete: markRaw(Delete),
-      DocumentCopy: markRaw(DocumentCopy),
-
-      ...useScroll(root),
-
-      root,
-      page: computed(() => editorService?.get('page')),
-
-      switchPage(page: MPage) {
-        editorService?.select(page);
-      },
-
-      addPage() {
-        if (!editorService) return;
-        const pageConfig = {
-          type: NodeType.PAGE,
-          name: generatePageNameByApp(toRaw(editorService.get('root'))),
-        };
-        editorService.add(pageConfig);
-      },
-
-      copy(node: MPage) {
-        node && editorService?.copy(node);
-        editorService?.paste({
-          left: 0,
-          top: 0,
-        });
-      },
-
-      remove(node: MPage) {
-        editorService?.remove(node);
-      },
-    };
-  },
-});
+const remove = (node: MPage) => {
+  editorService?.remove(node);
+};
 </script>

package/src/layouts/workspace/PageBarScrollContainer.vue

@@ -0,0 +1,111 @@
+<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">
+      <el-icon><plus></plus></el-icon>
+    </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>
+    <div v-if="root" class="m-editor-page-bar-items" ref="itemsContainer" :style="`width: ${itemsContainerWidth}px`">
+      <slot></slot>
+    </div>
+    <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('right')">
+      <el-icon><arrow-right-bold></arrow-right-bold></el-icon>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
+import { ArrowLeftBold, ArrowRightBold, Plus } from '@element-plus/icons-vue';
+
+import { MApp, NodeType } from '@tmagic/schema';
+
+import type { Services } from '../../type';
+import { generatePageNameByApp } from '../../utils/editor';
+
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+
+const pageBar = ref<HTMLDivElement>();
+const itemsContainer = ref<HTMLDivElement>();
+const pageBarWidth = ref(0);
+const canScroll = ref(false);
+
+const itemsContainerWidth = computed(() => pageBarWidth.value - 105);
+
+let translateLeft = 0;
+const resizeObserver = new ResizeObserver((entries) => {
+  for (const { contentRect } of entries) {
+    const { width } = contentRect;
+    pageBarWidth.value = width || 0;
+
+    setCanScroll();
+  }
+});
+
+const setCanScroll = () => {
+  if (itemsContainer.value) {
+    canScroll.value = itemsContainer.value.scrollWidth > pageBarWidth.value - 105;
+  }
+};
+
+const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
+  if (!itemsContainer.value) return;
+
+  const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+
+  if (type === 'left') {
+    translateLeft += 100;
+
+    if (translateLeft > 0) {
+      translateLeft = 0;
+    }
+  } else if (type === 'right') {
+    translateLeft -= 100;
+
+    if (-translateLeft > maxScrollLeft) {
+      translateLeft = -maxScrollLeft;
+    }
+  } else if (type === 'start') {
+    translateLeft = 0;
+  } else if (type === 'end') {
+    translateLeft = -maxScrollLeft;
+  }
+
+  itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
+};
+
+onMounted(() => {
+  pageBar.value && resizeObserver.observe(pageBar.value);
+});
+
+onUnmounted(() => {
+  resizeObserver.disconnect();
+});
+
+const root = computed(() => editorService?.get<MApp>('root'));
+
+watch(
+  () => root.value?.items.length,
+  (length = 0, preLength = 0) => {
+    setTimeout(() => {
+      setCanScroll();
+      if (length < preLength) {
+        scroll('start');
+      } else {
+        scroll('end');
+      }
+    });
+  },
+);
+
+const addPage = () => {
+  if (!editorService) return;
+  const pageConfig = {
+    type: NodeType.PAGE,
+    name: generatePageNameByApp(toRaw(editorService.get('root'))),
+  };
+  editorService.add(pageConfig);
+};
+</script>