@tmagic/editor 1.3.12 → 1.3.14

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.12",
+  "version": "1.3.14",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -42,14 +42,14 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.3.1",
-    "@tmagic/core": "1.3.12",
-    "@tmagic/dep": "1.3.12",
-    "@tmagic/design": "1.3.12",
-    "@tmagic/form": "1.3.12",
-    "@tmagic/schema": "1.3.12",
-    "@tmagic/stage": "1.3.12",
-    "@tmagic/table": "1.3.12",
-    "@tmagic/utils": "1.3.12",
+    "@tmagic/core": "1.3.14",
+    "@tmagic/dep": "1.3.14",
+    "@tmagic/design": "1.3.14",
+    "@tmagic/form": "1.3.14",
+    "@tmagic/schema": "1.3.14",
+    "@tmagic/stage": "1.3.14",
+    "@tmagic/table": "1.3.14",
+    "@tmagic/utils": "1.3.14",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "emmet-monaco-es": "^5.3.0",
@@ -63,8 +63,8 @@
     "vue": "^3.3.8"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.12",
-    "@tmagic/form": "1.3.12",
+    "@tmagic/design": "1.3.14",
+    "@tmagic/form": "1.3.14",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.8"
   },

package/src/components/ToolButton.vue

@@ -39,7 +39,12 @@
       </template>
     </TMagicDropdown>
 
-    <component v-else-if="data.type === 'component'" v-bind="data.props || {}" :is="data.component"></component>
+    <component
+      v-else-if="data.type === 'component'"
+      v-bind="data.props || {}"
+      v-on="(data as MenuComponent).listeners || {}"
+      :is="data.component"
+    ></component>
   </div>
 </template>
 

package/src/fields/CodeSelect.vue

@@ -12,7 +12,8 @@ import { isEmpty } from 'lodash-es';
 
 import { TMagicCard } from '@tmagic/design';
 import type { FieldProps } from '@tmagic/form';
-import { HookType } from '@tmagic/schema';
+import { FormState } from '@tmagic/form';
+import { HookCodeType, HookType } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
 
@@ -38,13 +39,40 @@ const codeConfig = computed(() => ({
   name: 'hookData',
   enableToggleMode: false,
   expandAll: true,
-  titleKey: 'codeId',
+  title: (mForm: FormState, { model, index }: any) => {
+    if (model.codeType === HookCodeType.DATA_SOURCE_METHOD) {
+      if (Array.isArray(model.codeId)) {
+        const ds = services?.dataSourceService.getDataSourceById(model.codeId[0]);
+        return `${ds?.title} / ${model.codeId[1]}`;
+      }
+
+      return Array.isArray(model.codeId) ? model.codeId.join('/') : index;
+    }
+    return model.codeId || index;
+  },
   items: [
     {
-      type: 'code-select-col',
-      name: 'codeId',
-      labelWidth: 0,
-      disabled: () => !services?.codeBlockService.getEditStatus(),
+      type: 'row',
+      items: [
+        {
+          type: 'select',
+          name: 'codeType',
+          span: 8,
+          options: [
+            { value: HookCodeType.CODE, text: '代码块' },
+            { value: HookCodeType.DATA_SOURCE_METHOD, text: '数据源方法' },
+          ],
+          defaultValue: 'code',
+        },
+        {
+          type: (mForm: FormState, { model }: any) =>
+            model.codeType === HookCodeType.DATA_SOURCE_METHOD ? 'data-source-method-select' : 'code-select-col',
+          name: 'codeId',
+          span: 16,
+          labelWidth: 0,
+          disabled: () => !services?.codeBlockService.getEditStatus(),
+        },
+      ],
     },
   ],
 }));

package/src/fields/CodeSelectCol.vue

@@ -17,6 +17,7 @@
     <CodeParams
       v-if="paramsConfig.length"
       name="params"
+      :key="model[name]"
       :model="model"
       :size="size"
       :params-config="paramsConfig"
@@ -33,7 +34,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="">
+<script lang="ts" setup>
 import { computed, inject, ref, watch } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 import { isEmpty, map } from 'lodash-es';

package/src/fields/UISelect.vue

@@ -106,16 +106,19 @@ const deleteHandler = () => {
 const selectNode = async (id: Id) => {
   await services?.editorService.select(id);
   services?.editorService.get('stage')?.select(id);
+  services?.stageOverlayService.get('stage')?.select(id);
 };
 
 const highlight = throttle((id: Id) => {
   services?.editorService.highlight(id);
   services?.editorService.get('stage')?.highlight(id);
+  services?.stageOverlayService.get('stage')?.highlight(id);
 }, 150);
 
 const unhightlight = () => {
   services?.editorService.set('highlightNode', null);
   services?.editorService.get('stage')?.clearHighlight();
+  services?.stageOverlayService.get('stage')?.clearHighlight();
 };
 </script>
 

package/src/hooks/use-float-box.ts

@@ -1,124 +1,40 @@
-import { computed, ComputedRef, inject, nextTick, ref, watch } from 'vue';
-import Moveable from 'moveable';
+import { computed, ComputedRef, ref, watch } from 'vue';
 
-import { type Services } from '@editor/type';
+interface State {
+  status: boolean;
+  top: number;
+  left: number;
+}
 
 export const useFloatBox = (slideKeys: ComputedRef<string[]>) => {
-  const services = inject<Services>('services');
-  const moveable = ref<Moveable>();
-  const floatBox = ref<HTMLElement[]>();
-
-  const floatBoxStates = computed(() => services?.uiService.get('floatBox'));
-
-  const curKey = ref('');
-  const target = computed(() =>
-    floatBox.value
-      ? floatBox.value.find((item) => item.classList.contains(`m-editor-float-box-${curKey.value}`))
-      : undefined,
+  const floatBoxStates = ref<{
+    [key in (typeof slideKeys.value)[number]]: State;
+  }>(
+    slideKeys.value.reduce(
+      (total, cur) => ({
+        ...total,
+        [cur]: {
+          status: false,
+          top: 0,
+          left: 0,
+        },
+      }),
+      {},
+    ),
   );
 
   const showingBoxKeys = computed(() =>
-    [...(floatBoxStates.value?.keys() ?? [])].filter((key) => floatBoxStates.value?.get(key)?.status),
+    Object.keys(floatBoxStates.value).filter((key) => floatBoxStates.value[key].status),
   );
-
   const isDraging = ref(false);
 
-  const showFloatBox = async (key: string) => {
-    const curBoxStatus = floatBoxStates.value?.get(curKey.value)?.status;
-    if (curKey.value === key && curBoxStatus) return;
-    curKey.value = key;
-    setSlideState(key, {
-      zIndex: getMaxZIndex() + 1,
-      status: true,
-    });
-
-    await nextTick();
-    if (moveable.value) {
-      moveable.value.target = target.value;
-      moveable.value.dragTarget = getDragTarget();
-      moveable.value.updateRect();
-    } else {
-      initFloatBoxMoveable();
-    }
-  };
-
-  const setSlideState = (key: string, data: Record<string, string | number | boolean>) => {
-    const slideState = floatBoxStates.value?.get(key);
-    if (!slideState) return;
-    floatBoxStates.value?.set(key, {
-      ...slideState,
-      ...data,
-    });
-  };
-
-  const getDragTarget = (key?: string) => `.m-editor-float-box-header-${key ?? curKey.value}`;
-
-  const closeFloatBox = (key: string) => {
-    setSlideState(key, {
-      status: false,
-    });
-
-    // 如果只有一个，关掉后需要销毁moveable实例
-    if (!floatBoxStates.value?.values) return;
-    const keys = [...floatBoxStates.value?.keys()];
-    const values = [...floatBoxStates.value?.values()];
-    const lastFloatBoxLen = values.filter((state) => state.status).length;
-    if (lastFloatBoxLen === 0) {
-      moveable.value?.destroy();
-      moveable.value = undefined;
-      return;
-    }
-
-    // 如果关掉的 box 是最大的，需要选中下面的一层
-    if (key === curKey.value) {
-      // 查找显示的最大 zIndex 对应的 index
-      const zIndexList = values.filter((item) => item.status).map((item) => item.zIndex);
-      const maxZIndex = Math.max(...zIndexList);
-      const key = keys.find((key) => floatBoxStates.value?.get(key)?.zIndex === maxZIndex);
-      if (!key) return;
-      showFloatBox(key);
-    }
-  };
-
-  const getMaxZIndex = () => {
-    if (!floatBoxStates.value?.values()) return 0;
-    const list = [...floatBoxStates.value?.values()].map((state) => state.zIndex);
-    return Math.max(...list) ?? 0;
-  };
-
-  const initFloatBoxMoveable = () => {
-    const dragTarget = getDragTarget();
-    moveable.value = new Moveable(document.body, {
-      target: target.value,
-      draggable: true,
-      resizable: true,
-      edge: true,
-      keepRatio: false,
-      origin: false,
-      snappable: true,
-      dragTarget,
-      dragTargetSelf: false,
-      linePadding: 10,
-      controlPadding: 10,
-      elementGuidelines: [...(floatBoxStates.value?.keys() ?? [])].map((key) => getDragTarget(key)),
-      bounds: { left: 0, top: 0, right: 0, bottom: 0, position: 'css' },
-    });
-    moveable.value.on('drag', (e) => {
-      e.target.style.transform = e.transform;
-    });
-    moveable.value.on('resize', (e) => {
-      e.target.style.width = `${e.width}px`;
-      e.target.style.height = `${e.height}px`;
-      e.target.style.transform = e.drag.transform;
-    });
-  };
-
+  const dragstartHandler = () => (isDraging.value = true);
   const dragendHandler = (key: string, e: DragEvent) => {
-    setSlideState(key, {
+    floatBoxStates.value[key] = {
       left: e.clientX,
       top: e.clientY,
-    });
-    showFloatBox(key);
+      status: true,
+    };
     isDraging.value = false;
   };
 
@@ -127,13 +43,17 @@ export const useFloatBox = (slideKeys: ComputedRef<string[]>) => {
     e.preventDefault();
   });
 
-  const dragstartHandler = () => (isDraging.value = true);
-
-  // 监听 slide 长度变化，更新 ui serice map
   watch(
     () => slideKeys.value,
     () => {
-      services?.uiService.setFloatBox(slideKeys.value);
+      for (const key in slideKeys.value) {
+        if (floatBoxStates.value[key]) continue;
+        floatBoxStates.value[key] = {
+          status: false,
+          top: 0,
+          left: 0,
+        };
+      }
     },
     {
       deep: true,
@@ -142,12 +62,9 @@ export const useFloatBox = (slideKeys: ComputedRef<string[]>) => {
   );
 
   return {
-    showFloatBox,
-    closeFloatBox,
     dragstartHandler,
     dragendHandler,
     floatBoxStates,
-    floatBox,
     showingBoxKeys,
   };
 };

package/src/layouts/page-bar/PageBar.vue

@@ -123,7 +123,7 @@ watch(
 
 watch(active, (active) => {
   if (active === NodeType.PAGE) {
-    if (!activePage.value) {
+    if (!activePage.value && !pageList.value.length) {
       editorService?.selectRoot();
       return;
     }
@@ -132,11 +132,12 @@ watch(active, (active) => {
   }
 
   if (active === NodeType.PAGE_FRAGMENT) {
-    if (!activePageFragment.value) {
+    // 之前没有选中过页面片并且当前没有页面片
+    if (!activePageFragment.value && !pageFragmentList.value.length) {
       editorService?.selectRoot();
       return;
     }
-    switchPage(activePageFragment.value);
+    switchPage(activePageFragment.value || pageFragmentList.value[0].id);
   }
 });
 

package/src/layouts/sidebar/Sidebar.vue

@@ -4,7 +4,7 @@
       <div
         class="m-editor-sidebar-header-item"
         v-for="(config, index) in sideBarItems"
-        v-show="!floatBoxStates?.get(config.$key)?.status"
+        v-show="!floatBoxStates[config.$key]?.status"
         draggable="true"
         :key="config.$key ?? index"
         :class="{ 'is-active': activeTabName === config.text }"
@@ -23,7 +23,7 @@
       v-show="activeTabName === config.text"
     >
       <component
-        v-if="config && !floatBoxStates?.get(config.$key)?.status"
+        v-if="config && !floatBoxStates[config.$key]?.status"
         :is="config.component"
         v-bind="config.props || {}"
         v-on="config?.listeners || {}"
@@ -96,43 +96,37 @@
   </div>
 
   <Teleport to="body">
-    <div class="m-editor-float-box-list">
-      <div
-        v-for="(config, index) in sideBarItems"
+    <template v-for="(config, index) in sideBarItems">
+      <FloatingBox
         :key="config.$key ?? index"
-        ref="floatBox"
-        :class="['m-editor-float-box', `m-editor-float-box-${config.$key}`]"
-        :style="{
-          left: `${floatBoxStates?.get(config.$key)?.left}px`,
-          top: `${floatBoxStates?.get(config.$key)?.top}px`,
-          zIndex: floatBoxStates?.get(config.$key)?.zIndex,
+        v-if="floatBoxStates[config.$key]?.status"
+        v-model:visible="floatBoxStates[config.$key].status"
+        :title="config.text"
+        :position="{
+          left: floatBoxStates[config.$key].left,
+          top: floatBoxStates[config.$key].top,
         }"
-        v-show="floatBoxStates?.get(config.$key)?.status"
       >
-        <div
-          :class="['m-editor-float-box-header', `m-editor-float-box-header-${config.$key}`]"
-          @click="showFloatBox(config.$key)"
-        >
-          <div>{{ config.text }}</div>
-          <MIcon class="m-editor-float-box-close" :icon="Close" @click.stop="closeFloatBox(config.$key)"></MIcon>
-        </div>
-        <div class="m-editor-float-box-body">
-          <component
-            v-if="config && floatBoxStates?.get(config.$key)?.status"
-            :is="config.boxComponentConfig?.component || config.component"
-            v-bind="config.boxComponentConfig?.props || config.props || {}"
-            v-on="config?.listeners || {}"
-          />
-        </div>
-      </div>
-    </div>
+        <template #body>
+          <div class="m-editor-slide-list-box">
+            <component
+              v-if="config && floatBoxStates[config.$key].status"
+              :is="config.boxComponentConfig?.component || config.component"
+              v-bind="config.boxComponentConfig?.props || config.props || {}"
+              v-on="config?.listeners || {}"
+            />
+          </div>
+        </template>
+      </FloatingBox>
+    </template>
   </Teleport>
 </template>
 
 <script setup lang="ts">
 import { computed, inject, ref, watch } from 'vue';
-import { Close, Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
+import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
+import FloatingBox from '@editor/components/FloatingBox.vue';
 import MIcon from '@editor/components/Icon.vue';
 import { useFloatBox } from '@editor/hooks/use-float-box';
 import type {
@@ -200,11 +194,6 @@ const getItemConfig = (data: SideItem): SideComponent => {
       text: '代码编辑',
       component: CodeBlockListPanel,
       slots: {},
-      boxComponentConfig: {
-        props: {
-          slideType: 'box',
-        },
-      },
     },
     'data-source': {
       $key: 'data-source',
@@ -213,11 +202,6 @@ const getItemConfig = (data: SideItem): SideComponent => {
       text: '数据源',
       component: DataSourceListPanel,
       slots: {},
-      boxComponentConfig: {
-        props: {
-          slideType: 'box',
-        },
-      },
     },
   };
 
@@ -235,8 +219,7 @@ watch(
 
 const slideKeys = computed(() => sideBarItems.value.map((sideBarItem) => sideBarItem.$key));
 
-const { showFloatBox, closeFloatBox, dragstartHandler, dragendHandler, floatBoxStates, floatBox, showingBoxKeys } =
-  useFloatBox(slideKeys);
+const { dragstartHandler, dragendHandler, floatBoxStates, showingBoxKeys } = useFloatBox(slideKeys);
 
 watch(
   () => showingBoxKeys.value.length,

package/src/layouts/sidebar/layer/LayerPanel.vue

@@ -14,7 +14,7 @@
       @node-dragstart="handleDragStart"
       @node-dragleave="handleDragLeave"
       @node-dragend="handleDragEnd"
-      @node-contextmenu="nodeContentmenuHandler"
+      @node-contextmenu="nodeContentMenuHandler"
       @node-mouseenter="mouseenterHandler"
       @node-click="nodeClickHandler"
     >
@@ -113,7 +113,7 @@ const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useD
 const {
   menu,
   nodeClickHandler,
-  nodeContentmenuHandler,
+  nodeContentMenuHandler,
   highlightHandler: mouseenterHandler,
 } = useClick(services, isCtrlKeyDown, nodeStatusMap);
 </script>

package/src/layouts/sidebar/layer/use-click.ts

@@ -26,6 +26,7 @@ export const useClick = (
     } else {
       await services?.editorService.select(data);
       services?.editorService.get('stage')?.select(data.id);
+      services?.stageOverlayService.get('stage')?.select(data.id);
     }
   };
 
@@ -50,6 +51,7 @@ export const useClick = (
 
     await services?.editorService.multiSelect(newNodes);
     services?.editorService.get('stage')?.multiSelect(newNodes);
+    services?.stageOverlayService.get('stage')?.multiSelect(newNodes);
   };
 
   const throttleTime = 300;
@@ -62,6 +64,7 @@ export const useClick = (
   const highlight = (data: TreeNodeData) => {
     services?.editorService?.highlight(data);
     services?.editorService?.get('stage')?.highlight(data.id);
+    services?.stageOverlayService?.get('stage')?.highlight(data.id);
   };
 
   const nodeClickHandler = (event: MouseEvent, data: TreeNodeData) => {
@@ -91,7 +94,7 @@ export const useClick = (
 
     nodeClickHandler,
 
-    nodeContentmenuHandler(event: MouseEvent, data: TreeNodeData) {
+    nodeContentMenuHandler(event: MouseEvent, data: TreeNodeData) {
       event.preventDefault();
 
       const nodes = services?.editorService.get('nodes') || [];

package/src/layouts/sidebar/layer/use-node-status.ts

@@ -1,7 +1,7 @@
 import { computed, ref, watch } from 'vue';
 
 import type { Id, MNode, MPage, MPageFragment } from '@tmagic/schema';
-import { getNodePath } from '@tmagic/utils';
+import { getNodePath, isPage, isPageFragment } from '@tmagic/utils';
 
 import { LayerNodeStatus, Services } from '@editor/type';
 import { traverseNode } from '@editor/utils';
@@ -48,13 +48,14 @@ export const useNodeStatus = (services: Services | undefined) => {
 
   // 切换页面或者新增页面，重新生成节点状态
   watch(
-    page,
-    (page) => {
-      if (!page) {
+    () => page.value?.id,
+    (pageId) => {
+      if (!pageId) {
         return;
       }
+
       // 生成节点状态
-      nodeStatusMaps.value.set(page.id, createPageNodeStatus(page, nodeStatusMaps.value.get(page.id)));
+      nodeStatusMaps.value.set(pageId, createPageNodeStatus(page.value!, nodeStatusMaps.value.get(pageId)));
     },
     {
       immediate: true,
@@ -85,6 +86,8 @@ export const useNodeStatus = (services: Services | undefined) => {
 
   services?.editorService.on('add', (newNodes: MNode[]) => {
     newNodes.forEach((node) => {
+      if (isPage(node) || isPageFragment(node)) return;
+
       traverseNode(node, (node: MNode) => {
         nodeStatusMap.value?.set(node.id, {
           visible: true,

package/src/services/editor.ts

@@ -892,6 +892,8 @@ class Editor extends BaseService {
     this.addModifiedNodeId(parent.id);
 
     this.pushHistoryState();
+
+    this.emit('drag-to', { index, targetIndex, config, parent, targetParent });
   }
 
   /**

package/src/services/stageOverlay.ts

@@ -51,6 +51,8 @@ class StageOverlay extends BaseService {
     editorService.on('update', this.updateHandler);
     editorService.on('add', this.addHandler);
     editorService.on('remove', this.removeHandler);
+    editorService.on('drag-to', this.updateHandler);
+    editorService.on('move-layer', this.updateHandler);
   }
 
   public closeOverlay() {
@@ -67,6 +69,8 @@ class StageOverlay extends BaseService {
     editorService.off('update', this.updateHandler);
     editorService.off('add', this.addHandler);
     editorService.off('remove', this.removeHandler);
+    editorService.off('drag-to', this.updateHandler);
+    editorService.off('move-layer', this.updateHandler);
   }
 
   public updateOverlay() {
@@ -99,13 +103,6 @@ class StageOverlay extends BaseService {
         }
 
         const wrapDiv = this.get('wrapDiv');
-        const sourceEl = this.get('sourceEl');
-
-        wrapDiv.style.cssText = `
-            width: ${sourceEl?.scrollWidth}px;
-            height: ${sourceEl?.scrollHeight}px;
-            background-color: #fff;
-          `;
 
         await this.render();
 
@@ -141,12 +138,19 @@ class StageOverlay extends BaseService {
     this.createContentEl();
 
     const contentEl = this.get('contentEl');
+    const sourceEl = this.get('sourceEl');
     const wrapDiv = this.get('wrapDiv');
     const subStage = this.get('stage');
     const stageOptions = this.get('stageOptions');
 
     if (!contentEl) return;
 
+    wrapDiv.style.cssText = `
+      width: ${sourceEl?.scrollWidth}px;
+      height: ${sourceEl?.scrollHeight}px;
+      background-color: #fff;
+    `;
+
     Array.from(wrapDiv.children).forEach((element) => {
       element.remove();
     });
@@ -162,19 +166,37 @@ class StageOverlay extends BaseService {
   }
 
   private updateHandler = () => {
-    this.render();
-    this.updateOverlay();
+    setTimeout(() => {
+      this.render();
+      this.updateOverlay();
+
+      this.updateSelectStatus();
+    });
   };
 
   private addHandler = () => {
     this.render();
     this.updateOverlay();
+
+    this.updateSelectStatus();
   };
 
   private removeHandler = () => {
     this.render();
     this.updateOverlay();
+
+    this.updateSelectStatus();
   };
+
+  private updateSelectStatus() {
+    const subStage = this.get('stage');
+    const nodes = editorService.get('nodes');
+    if (nodes.length > 1) {
+      subStage?.multiSelect(nodes.map((n) => n.id));
+    } else {
+      subStage?.select(nodes[0].id);
+    }
+  }
 }
 
 export type StageOverlayService = StageOverlay;

package/src/theme/sidebar.scss

@@ -70,3 +70,14 @@
     }
   }
 }
+
+.m-editor-slide-list-box {
+  min-width: 270px;
+  min-height: 500px;
+  max-height: 1024px;
+  > div {
+    &:first-child {
+      width: 100%;
+    }
+  }
+}