@tmagic/editor 1.0.0-beta.8 → 1.0.0-rc.10

package/src/layouts/sidebar/Sidebar.vue

@@ -1,36 +1,26 @@
 <template>
-  <el-tabs v-if="data.type === 'tabs'" class="m-editor-sidebar" v-model="activeTabName" type="card" tab-position="left">
-    <el-tab-pane v-for="item in items" :key="item.text" :name="item.text">
-      <template #label>
-        <span>
-          <m-icon v-if="item.icon" :icon="item.icon"></m-icon>
-          <div v-if="item.text" class="magic-editor-tab-panel-title">{{ item.text }}</div>
-        </span>
-      </template>
-
-      <component :is="item.component" v-bind="item.props || {}" v-on="item.listeners || {}">
-        <template #layer-node-content="{ data, node }" v-if="item.slots?.layerNodeContent">
-          <component :is="item.slots.layerNodeContent" :data="data" :node="node" />
-        </template>
-      </component>
-    </el-tab-pane>
+  <el-tabs
+    v-if="data.type === 'tabs' && data.items.length"
+    class="m-editor-sidebar"
+    v-model="activeTabName"
+    type="card"
+    tab-position="left"
+  >
+    <tab-pane v-for="(item, index) in data.items" :key="index" :data="item"></tab-pane>
   </el-tabs>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from 'vue';
-import { Coin, Files } from '@element-plus/icons';
+import { defineComponent, PropType, ref, watch } from 'vue';
 
-import MIcon from '@editor/components/Icon.vue';
-import { SideBarData, SideComponent } from '@editor/type';
+import { SideBarData } from '@editor/type';
 
-import ComponentListPanel from './ComponentListPanel.vue';
-import LayerPanel from './LayerPanel.vue';
+import TabPane from './TabPane.vue';
 
 export default defineComponent({
-  name: 'm-sidebar',
+  components: { TabPane },
 
-  components: { MIcon },
+  name: 'm-sidebar',
 
   props: {
     data: {
@@ -51,35 +41,6 @@ export default defineComponent({
 
     return {
       activeTabName,
-
-      items: computed<SideComponent[] | Record<string, any>[]>(() =>
-        props.data?.items.map((item) => {
-          if (typeof item !== 'string') {
-            return item;
-          }
-
-          switch (item) {
-            case 'component-list':
-              return {
-                type: 'component',
-                icon: Coin,
-                text: '组件',
-                component: ComponentListPanel,
-                slots: {},
-              };
-            case 'layer':
-              return {
-                type: 'component',
-                icon: Files,
-                text: '已选组件',
-                component: LayerPanel,
-                slots: {},
-              };
-            default:
-              return {};
-          }
-        }),
-      ),
     };
   },
 });

package/src/layouts/sidebar/TabPane.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-tab-pane v-if="config" :name="config.text">
+    <template #label>
+      <div :key="config.text">
+        <m-icon v-if="config.icon" :icon="config.icon"></m-icon>
+        <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
+      </div>
+    </template>
+
+    <component :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
+      <template #layer-node-content="{ data, node }" v-if="config.slots?.layerNodeContent">
+        <component :is="config.slots?.layerNodeContent" :data="data" :node="node" />
+      </template>
+    </component>
+  </el-tab-pane>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue';
+import { Coin, Files } from '@element-plus/icons';
+
+import MIcon from '@editor/components/Icon.vue';
+import { SideComponent, SideItem } from '@editor/type';
+
+import ComponentListPanel from './ComponentListPanel.vue';
+import LayerPanel from './LayerPanel.vue';
+
+export default defineComponent({
+  components: { MIcon },
+
+  props: {
+    data: {
+      type: [Object, String] as PropType<SideItem>,
+    },
+  },
+
+  setup(props) {
+    return {
+      config: computed<SideComponent | undefined>(() => {
+        if (typeof props.data !== 'string') {
+          return props.data;
+        }
+
+        switch (props.data) {
+          case 'component-list':
+            return {
+              type: 'component',
+              icon: Coin,
+              text: '组件',
+              component: ComponentListPanel,
+              slots: {},
+            };
+          case 'layer':
+            return {
+              type: 'component',
+              icon: Files,
+              text: '已选组件',
+              component: LayerPanel,
+              slots: {},
+            };
+          default:
+            return undefined;
+        }
+      }),
+    };
+  },
+});
+</script>

package/src/layouts/workspace/PageBar.vue

@@ -1,9 +1,12 @@
 <template>
-  <div class="m-editor-page-bar">
-    <div class="m-editor-page-bar-item" @click="addPage">
-      <el-icon class="m-editor-page-bar-menu-add-icon"><plus></plus></el-icon>
+  <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>
-    <template v-if="root">
+    <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"
@@ -11,15 +14,33 @@
         :class="{ active: page?.id === item.id }"
         @click="switchPage(item)"
       >
-        <slot name="page-bar-title" :page="item">
-          <span>{{ item.name }}</span>
-        </slot>
+        <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>
+          </slot>
+        </div>
 
-        <el-popover placement="top" :width="160" trigger="hover">
+        <el-popover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
           <div>
             <slot name="page-bar-popover" :page="item">
-              <div class="magic-editor-content-menu-item" @click="() => copy(item)">复制</div>
-              <div class="magic-editor-content-menu-item" @click="() => remove(item)">删除</div>
+              <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>
@@ -29,28 +50,135 @@
           </template>
         </el-popover>
       </div>
-    </template>
+    </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 lang="ts">
-import { computed, defineComponent, inject, toRaw } from 'vue';
-import { CaretBottom, Plus } from '@element-plus/icons';
+import {
+  computed,
+  ComputedRef,
+  defineComponent,
+  inject,
+  markRaw,
+  onMounted,
+  onUnmounted,
+  ref,
+  toRaw,
+  watch,
+} from 'vue';
+import { ArrowLeftBold, ArrowRightBold, CaretBottom, Delete, DocumentCopy, Plus } from '@element-plus/icons';
 
-import type { MPage } from '@tmagic/schema';
+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;
+
+    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();
+  });
+
+  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: { CaretBottom, Plus },
+  components: { ArrowLeftBold, ArrowRightBold, CaretBottom, Plus, ToolButton },
 
   setup() {
     const services = inject<Services>('services');
     const editorService = services?.editorService;
 
+    const root = computed(() => editorService?.get<MApp>('root'));
+
     return {
-      root: computed(() => editorService?.get('root')),
+      Delete: markRaw(Delete),
+      DocumentCopy: markRaw(DocumentCopy),
+
+      ...useScroll(root),
+
+      root,
       page: computed(() => editorService?.get('page')),
 
       switchPage(page: MPage) {
@@ -60,7 +188,7 @@ export default defineComponent({
       addPage() {
         if (!editorService) return;
         const pageConfig = {
-          type: 'page',
+          type: NodeType.PAGE,
           name: generatePageNameByApp(toRaw(editorService.get('root'))),
         };
         editorService.add(pageConfig);

package/src/layouts/workspace/Stage.vue

@@ -9,11 +9,13 @@
     <div
       class="m-editor-stage-container"
       ref="stageContainer"
-      @contextmenu="contextmenuHandler"
       :style="`transform: scale(${zoom})`"
+      @contextmenu="contextmenuHandler"
+      @drop="dropHandler"
+      @dragover="dragoverHandler"
     ></div>
     <teleport to="body">
-      <viewer-menu ref="menu" :style="menuStyle"></viewer-menu>
+      <viewer-menu ref="menu"></viewer-menu>
     </teleport>
   </scroll-viewer>
 </template>
@@ -23,10 +25,9 @@ import {
   computed,
   defineComponent,
   inject,
-  nextTick,
+  markRaw,
   onMounted,
   onUnmounted,
-  PropType,
   ref,
   toRaw,
   watch,
@@ -35,53 +36,14 @@ import {
 import { cloneDeep } from 'lodash-es';
 
 import type { MApp, MNode, MPage } from '@tmagic/schema';
-import type { MoveableOptions, Runtime, SortEventData, UpdateEventData } from '@tmagic/stage';
+import type { Runtime, SortEventData, UpdateEventData } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
-import type { Services, StageRect } from '@editor/type';
+import { Layout, Services, StageOptions, StageRect } from '@editor/type';
 
 import ViewerMenu from './ViewerMenu.vue';
 
-const useMenu = () => {
-  const menu = ref<InstanceType<typeof ViewerMenu>>();
-  const menuStyle = ref({
-    display: 'none',
-    left: '0',
-    top: '0',
-  });
-
-  onMounted(() => {
-    document.addEventListener(
-      'click',
-      () => {
-        menuStyle.value.display = 'none';
-      },
-      true,
-    );
-  });
-
-  return {
-    menu,
-    menuStyle,
-
-    contextmenuHandler(e: MouseEvent) {
-      e.preventDefault();
-
-      const menuHeight = menu.value?.$el.clientHeight;
-      let top = e.clientY;
-      if (menuHeight + e.clientY > document.body.clientHeight) {
-        top = document.body.clientHeight - menuHeight;
-      }
-      menuStyle.value = {
-        display: 'block',
-        top: `${top}px`,
-        left: `${e.clientX}px`,
-      };
-    },
-  };
-};
-
 export default defineComponent({
   name: 'magic-stage',
 
@@ -90,39 +52,19 @@ export default defineComponent({
     ScrollViewer,
   },
 
-  props: {
-    render: {
-      type: Function as PropType<() => HTMLDivElement>,
-    },
-
-    runtimeUrl: String,
-
-    canSelect: {
-      type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
-      default: (el: HTMLElement) => Boolean(el.id),
-    },
-
-    moveableOptions: {
-      type: [Object, Function] as PropType<MoveableOptions | ((core?: StageCore) => MoveableOptions)>,
-      default: () => (core?: StageCore) => ({
-        container: core?.renderer?.contentWindow?.document.getElementById('app'),
-      }),
-    },
-  },
-
-  emits: ['select', 'update', 'sort'],
-
-  setup(props, { emit }) {
+  setup() {
     const services = inject<Services>('services');
+    const stageOptions = inject<StageOptions>('stageOptions');
 
     const stageWrap = ref<InstanceType<typeof ScrollViewer>>();
     const stageContainer = ref<HTMLDivElement>();
+    const menu = ref<InstanceType<typeof ViewerMenu>>();
 
     const stageRect = computed(() => services?.uiService.get<StageRect>('stageRect'));
     const uiSelectMode = computed(() => services?.uiService.get<boolean>('uiSelectMode'));
     const root = computed(() => services?.editorService.get<MApp>('root'));
     const page = computed(() => services?.editorService.get<MPage>('page'));
-    const zoom = computed(() => services?.uiService.get<number>('zoom'));
+    const zoom = computed(() => services?.uiService.get<number>('zoom') || 1);
     const node = computed(() => services?.editorService.get<MNode>('node'));
 
     let stage: StageCore | null = null;
@@ -132,37 +74,45 @@ export default defineComponent({
       if (stage) return;
 
       if (!stageContainer.value) return;
-      if (!(props.runtimeUrl || props.render) || !root.value) return;
+      if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value) return;
 
       stage = new StageCore({
-        render: props.render,
-        runtimeUrl: props.runtimeUrl,
+        render: stageOptions.render,
+        runtimeUrl: stageOptions.runtimeUrl,
         zoom: zoom.value,
-        canSelect: (el, stop) => {
-          const elCanSelect = props.canSelect(el);
+        autoScrollIntoView: stageOptions.autoScrollIntoView,
+        canSelect: (el, event, stop) => {
+          const elCanSelect = stageOptions.canSelect(el);
           // 在组件联动过程中不能再往下选择，返回并触发 ui-select
-          if (uiSelectMode.value && elCanSelect) {
+          if (uiSelectMode.value && elCanSelect && event.type === 'mousedown') {
             document.dispatchEvent(new CustomEvent('ui-select', { detail: el }));
             return stop();
           }
 
           return elCanSelect;
         },
-        moveableOptions: props.moveableOptions,
+        moveableOptions: stageOptions.moveableOptions,
+        updateDragEl: stageOptions.updateDragEl,
       });
 
-      services?.editorService.set('stage', stage);
+      services?.editorService.set('stage', markRaw(stage));
 
       stage?.mount(stageContainer.value);
 
-      stage?.on('select', (el: HTMLElement) => emit('select', el));
+      stage?.on('select', (el: HTMLElement) => {
+        services?.editorService.select(el.id);
+      });
+
+      stage?.on('highlight', (el: HTMLElement) => {
+        services?.editorService.highlight(el.id);
+      });
 
       stage?.on('update', (ev: UpdateEventData) => {
-        emit('update', { id: ev.el.id, style: ev.style });
+        services?.editorService.update({ id: ev.el.id, style: ev.style });
       });
 
       stage?.on('sort', (ev: SortEventData) => {
-        emit('sort', ev);
+        services?.editorService.sort(ev.src, ev.dist);
       });
 
       stage?.on('changeGuides', () => {
@@ -192,16 +142,6 @@ export default defineComponent({
       }
     });
 
-    watch(
-      () => node.value?.id,
-      (id) => {
-        nextTick(() => {
-          // 等待相关dom变更完成后，再select，适用大多数场景
-          id && stage?.select(id);
-        });
-      },
-    );
-
     const resizeObserver = new ResizeObserver((entries) => {
       for (const { contentRect } of entries) {
         services?.uiService.set('stageContainerRect', {
@@ -224,9 +164,43 @@ export default defineComponent({
     return {
       stageWrap,
       stageContainer,
+      menu,
       stageRect,
       zoom,
-      ...useMenu(),
+
+      contextmenuHandler(e: MouseEvent) {
+        e.preventDefault();
+        menu.value?.show(e);
+      },
+
+      dragoverHandler(e: DragEvent) {
+        e.preventDefault();
+        if (e.dataTransfer) {
+          e.dataTransfer.dropEffect = 'move';
+        }
+      },
+
+      async dropHandler(e: DragEvent) {
+        e.preventDefault();
+        if (e.dataTransfer && page.value && stageContainer.value && stage) {
+          // eslint-disable-next-line no-eval
+          const config = eval(`(${e.dataTransfer.getData('data')})`);
+          const layout = await services?.editorService.getLayout(page.value);
+
+          const containerRect = stageContainer.value.getBoundingClientRect();
+          const { scrollTop, scrollLeft } = stage.mask;
+          if (layout === Layout.ABSOLUTE) {
+            config.style = {
+              ...(config.style || {}),
+              position: 'absolute',
+              top: e.clientY - containerRect.top + scrollTop,
+              left: e.clientX - containerRect.left + scrollLeft,
+            };
+          }
+
+          services?.editorService.add(config, page.value);
+        }
+      },
     };
   },
 });