@tmagic/editor 1.1.2 → 1.1.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.2",
+  "version": "1.1.4",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -45,11 +45,11 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.1.2",
-    "@tmagic/form": "1.1.2",
-    "@tmagic/schema": "1.1.2",
-    "@tmagic/stage": "1.1.2",
-    "@tmagic/utils": "1.1.2",
+    "@tmagic/core": "1.1.4",
+    "@tmagic/form": "1.1.4",
+    "@tmagic/schema": "1.1.4",
+    "@tmagic/stage": "1.1.4",
+    "@tmagic/utils": "1.1.4",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.6",
@@ -62,7 +62,7 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.1.2",
+    "@tmagic/form": "1.1.4",
     "element-plus": "^2.2.6",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"

package/src/layouts/NavMenu.vue

@@ -123,7 +123,7 @@ const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => {
         className: 'scale-to-fit',
         icon: markRaw(FullScreen),
         tooltip: `缩放以适应(${ctrl}+0)`,
-        handler: () => uiService?.set('zoom', uiService.calcZoom()),
+        handler: async () => uiService?.set('zoom', await uiService.calcZoom()),
       });
       break;
     case 'rule':

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -15,8 +15,8 @@
         <el-collapse-item v-if="group.items && group.items.length" :key="index" :name="index">
           <template #title><i class="el-icon-s-grid"></i>{{ group.title }}</template>
           <div
-            class="component-item"
             v-for="item in group.items"
+            class="component-item"
             draggable="true"
             :key="item.type"
             @click="appendComponent(item)"

package/src/layouts/workspace/PageBarScrollContainer.vue

@@ -6,27 +6,33 @@
       class="m-editor-page-bar-item m-editor-page-bar-item-icon"
       @click="addPage"
     >
-      <el-icon><plus></plus></el-icon>
+      <Icon :icon="Plus"></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>
+      <Icon :icon="ArrowLeftBold"></Icon>
     </div>
-    <div v-if="root" class="m-editor-page-bar-items" ref="itemsContainer" :style="`width: ${itemsContainerWidth}px`">
+    <div
+      v-if="pageLength"
+      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>
+      <Icon :icon="ArrowRightBold"></Icon>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
+import { computed, inject, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
 import { ArrowLeftBold, ArrowRightBold, Plus } from '@element-plus/icons-vue';
 
-import { MApp, NodeType } from '@tmagic/schema';
+import { NodeType } from '@tmagic/schema';
 
+import Icon from '../../components/Icon.vue';
 import type { Services } from '../../type';
 import { generatePageNameByApp } from '../../utils/editor';
 
@@ -34,31 +40,39 @@ 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 showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
 
-// 减去新增、左移、右移三个按钮的宽度
-const itemsContainerWidth = computed(() => pageBarWidth.value - 35 * 2 - (showAddPageButton.value ? 35 : 21));
+const itemsContainerWidth = ref(0);
 
-let translateLeft = 0;
-const resizeObserver = new ResizeObserver((entries) => {
-  for (const { contentRect } of entries) {
-    const { width } = contentRect;
-    pageBarWidth.value = width || 0;
+const setCanScroll = () => {
+  // 减去新增、左移、右移三个按钮的宽度
+  // 37 = icon width 16 + padding 10 * 2 + border-right 1
+  itemsContainerWidth.value = (pageBar.value?.clientWidth || 0) - 37 * 2 - (showAddPageButton.value ? 37 : 21);
 
-    setCanScroll();
-  }
+  nextTick(() => {
+    if (itemsContainer.value) {
+      canScroll.value = itemsContainer.value.scrollWidth - itemsContainerWidth.value > 1;
+    }
+  });
+};
+
+const resizeObserver = new ResizeObserver(() => {
+  setCanScroll();
 });
 
-const setCanScroll = () => {
-  if (itemsContainer.value) {
-    canScroll.value = itemsContainer.value.scrollWidth > itemsContainerWidth.value;
-  }
-};
+const pageBar = ref<HTMLDivElement>();
+onMounted(() => {
+  pageBar.value && resizeObserver.observe(pageBar.value);
+});
+
+onUnmounted(() => {
+  resizeObserver.disconnect();
+});
+
+let translateLeft = 0;
 
 const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
   if (!itemsContainer.value) return;
@@ -86,30 +100,19 @@ const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
   itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
 };
 
-onMounted(() => {
-  pageBar.value && resizeObserver.observe(pageBar.value);
-});
+const pageLength = computed(() => editorService?.get<number>('pageLength'));
 
-onUnmounted(() => {
-  resizeObserver.disconnect();
+watch(pageLength, (length = 0, preLength = 0) => {
+  setTimeout(() => {
+    setCanScroll();
+    if (length < preLength) {
+      scroll('start');
+    } else {
+      scroll('end');
+    }
+  });
 });
 
-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 = {

package/src/layouts/workspace/Workspace.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-workspace" tabindex="1" ref="workspace">
+  <div class="m-editor-workspace" tabindex="-1" ref="workspace">
     <slot name="stage">
       <MagicStage :key="page?.id"></MagicStage>
     </slot>
@@ -139,9 +139,9 @@ onMounted(() => {
       e.inputEvent.preventDefault();
       services?.uiService.zoom(-0.1);
     })
-    .keydown([ctrl, '0'], (e) => {
+    .keydown([ctrl, '0'], async (e) => {
       e.inputEvent.preventDefault();
-      services?.uiService.set('zoom', services.uiService.calcZoom());
+      services?.uiService.set('zoom', await services.uiService.calcZoom());
     })
     .keydown([ctrl, '1'], (e) => {
       e.inputEvent.preventDefault();

package/src/services/editor.ts

@@ -297,7 +297,7 @@ class Editor extends BaseService {
       throw new Error('app下不能添加组件');
     }
 
-    if (parent.id !== curNode.id) {
+    if (parent.id !== curNode.id && node.type !== NodeType.PAGE) {
       const index = parent.items.indexOf(curNode);
       parent?.items?.splice(index + 1, 0, node);
     } else {
@@ -629,12 +629,18 @@ class Editor extends BaseService {
     const brothers: MNode[] = parent?.items || [];
     const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
 
+    // 流式布局与绝对定位布局操作的相反的
+    const layout = await this.getLayout(parent, node);
+    const isRelative = layout === Layout.RELATIVE;
+
+    brothers.splice(index, 1);
+
     if (offset === LayerOffset.TOP) {
-      brothers.splice(brothers.length - 1, 0, brothers.splice(index, 1)[0]);
+      brothers.splice(isRelative ? 0 : brothers.length - 1, 0, node);
     } else if (offset === LayerOffset.BOTTOM) {
-      brothers.splice(0, 0, brothers.splice(index, 1)[0]);
+      brothers.splice(isRelative ? brothers.length - 1 : 0, 0, node);
     } else {
-      brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
+      brothers.splice(index + (isRelative ? -offset : offset), 0, node);
     }
 
     const grandparent = this.getParentById(parent.id);

package/src/services/ui.ts

@@ -59,7 +59,7 @@ const state = reactive<UiState>({
 
 class Ui extends BaseService {
   constructor() {
-    super([]);
+    super(['initColumnWidth', 'zoom', 'calcZoom']);
     globalThis.addEventListener('resize', () => {
       this.setColumnWidth({
         center: 'auto',
@@ -95,7 +95,7 @@ class Ui extends BaseService {
     return (state as any)[name];
   }
 
-  public initColumnWidth() {
+  public async initColumnWidth() {
     const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
     if (columnWidthCacheData) {
       try {
@@ -107,12 +107,12 @@ class Ui extends BaseService {
     }
   }
 
-  public zoom(zoom: number) {
+  public async zoom(zoom: number) {
     this.set('zoom', (this.get<number>('zoom') * 100 + zoom * 100) / 100);
     if (this.get<number>('zoom') < 0.1) this.set('zoom', 0.1);
   }
 
-  public calcZoom() {
+  public async calcZoom() {
     const { stageRect, stageContainerRect } = state;
     const { height, width } = stageContainerRect;
     if (!width || !height) return 1;
@@ -162,12 +162,12 @@ class Ui extends BaseService {
     state.columnWidth = columnWidth;
   }
 
-  private setStageRect(value: StageRect) {
+  private async setStageRect(value: StageRect) {
     state.stageRect = {
       ...state.stageRect,
       ...value,
     };
-    state.zoom = this.calcZoom();
+    state.zoom = await this.calcZoom();
   }
 }
 

package/src/utils/scroll-viewer.ts

@@ -40,6 +40,7 @@ export class ScrollViewer extends EventEmitter {
     this.setSize();
     this.setScrollSize();
     this.resizeObserver.observe(this.container);
+    this.resizeObserver.observe(this.target);
   }
 
   public destroy() {

package/types/layouts/workspace/PageBarScrollContainer.vue.d.ts

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 declare const _default: {
     new (...args: any[]): {
         $: import("vue").ComponentInternalInstance;
@@ -34,7 +35,7 @@ declare const _default: {
             errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
         };
         $forceUpdate: () => void;
-        $nextTick: typeof import("vue").nextTick;
+        $nextTick: typeof nextTick;
         $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{}>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
     __isFragment?: undefined;

package/types/services/ui.d.ts

@@ -26,9 +26,9 @@ declare class Ui extends BaseService {
     constructor();
     set<T = any>(name: keyof UiState, value: T): void;
     get<T>(name: keyof typeof state): T;
-    initColumnWidth(): void;
-    zoom(zoom: number): void;
-    calcZoom(): number;
+    initColumnWidth(): Promise<void>;
+    zoom(zoom: number): Promise<void>;
+    calcZoom(): Promise<number>;
     destroy(): void;
     private setColumnWidth;
     private setStageRect;