@tmagic/editor 1.1.0-beta.8 → 1.1.1

package/src/type.ts

@@ -21,7 +21,7 @@ import type { Component } from 'vue';
 import type { FormConfig } from '@tmagic/form';
 import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import type { MoveableOptions } from '@tmagic/stage';
+import type { ContainerHighlightType, MoveableOptions } from '@tmagic/stage';
 
 import type { ComponentListService } from './services/componentList';
 import type { EditorService } from './services/editor';
@@ -53,6 +53,7 @@ export interface StageOptions {
   autoScrollIntoView: boolean;
   containerHighlightClassName: string;
   containerHighlightDuration: number;
+  containerHighlightType: ContainerHighlightType;
   render: () => HTMLDivElement;
   moveableOptions: MoveableOptions | ((core?: StageCore) => MoveableOptions);
   canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
@@ -81,16 +82,22 @@ export interface ComponentGroupState {
   list: ComponentGroup[];
 }
 
+export enum ColumnLayout {
+  LEFT = 'left',
+  CENTER = 'center',
+  RIGHT = 'right',
+}
+
 export interface SetColumnWidth {
-  left?: number;
-  center?: number | 'auto';
-  right?: number;
+  [ColumnLayout.LEFT]?: number;
+  [ColumnLayout.CENTER]?: number | 'auto';
+  [ColumnLayout.RIGHT]?: number;
 }
 
 export interface GetColumnWidth {
-  left: number;
-  center: number;
-  right: number;
+  [ColumnLayout.LEFT]: number;
+  [ColumnLayout.CENTER]: number;
+  [ColumnLayout.RIGHT]: number;
 }
 
 export interface StageRect {
@@ -173,6 +180,7 @@ export interface MenuButton {
   /** type为button/dropdown时点击运行的方法 */
   handler?: (data: Services, event: MouseEvent) => Promise<any> | any;
   /** type为dropdown时，下拉的菜单列表， 或者有子菜单时 */
+  className?: string;
   items?: MenuButton[];
 }
 
@@ -186,6 +194,7 @@ export interface MenuComponent {
   listeners?: Record<string, Function>;
   slots?: Record<string, any>;
   /** 是否显示，默认为true */
+  className?: string;
   display?: boolean | ((data?: Services) => Promise<boolean> | boolean);
 }
 
@@ -208,16 +217,17 @@ export type MenuItem =
   | 'guides'
   | 'rule'
   | MenuButton
-  | MenuComponent;
+  | MenuComponent
+  | string;
 
 /** 工具栏 */
 export interface MenuBarData {
   /** 顶部工具栏左边项 */
-  left?: MenuItem[];
+  [ColumnLayout.LEFT]?: MenuItem[];
   /** 顶部工具栏中间项 */
-  center?: MenuItem[];
+  [ColumnLayout.CENTER]?: MenuItem[];
   /** 顶部工具栏右边项 */
-  right?: MenuItem[];
+  [ColumnLayout.RIGHT]?: MenuItem[];
 }
 
 export interface SideComponent extends MenuComponent {
@@ -286,3 +296,10 @@ export enum Keys {
 
 export const H_GUIDE_LINE_STORAGE_KEY = '$MagicStageHorizontalGuidelinesData';
 export const V_GUIDE_LINE_STORAGE_KEY = '$MagicStageVerticalGuidelinesData';
+
+export interface ScrollViewerEvent {
+  scrollLeft: number;
+  scrollTop: number;
+  scrollHeight: number;
+  scrollWidth: number;
+}

package/src/utils/index.ts

@@ -20,3 +20,4 @@ export * from './config';
 export * from './props';
 export * from './logger';
 export * from './editor';
+export * from './stage';

package/src/utils/operator.ts

@@ -1,15 +1,14 @@
 import { toRaw } from 'vue';
-import { cloneDeep, isEmpty } from 'lodash-es';
+import { isEmpty } from 'lodash-es';
 
-import { Id, MApp, MContainer, MNode, NodeType } from '@tmagic/schema';
+import { Id, MApp, MContainer, MNode } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 import { isPage } from '@tmagic/utils';
 
 import editorService from '../services/editor';
-import historyService from '../services/history';
 import propsService from '../services/props';
 import { AddMNode, PastePosition } from '../type';
-import { generatePageNameByApp, getInitPositionStyle, getNodeIndex } from '../utils/editor';
+import { generatePageNameByApp, getInitPositionStyle } from '../utils/editor';
 
 /**
  * 粘贴前置操作：返回分配了新id以及校准了坐标的配置
@@ -43,7 +42,7 @@ export const beforePaste = async (position: PastePosition, config: MNode[]): Pro
         pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
       }
 
-      const pasteConfig = await propsService.setNewItemId(configItem, editorService.get('root'));
+      const pasteConfig = await propsService.setNewItemId(configItem);
 
       if (pasteConfig.style) {
         const { left, top } = pasteConfig.style;
@@ -87,64 +86,11 @@ export const getPositionInContainer = (position: PastePosition = {}, id: Id) =>
   };
 };
 
-/**
- * 删除前置操作：实现了在编辑器中删除元素节点，并返回父级元素信息以供stage更新
- * @param node 待删除的节点
- * @returns 父级元素，root根元素
- */
-export const beforeRemove = async (node: MNode): Promise<MContainer | void> => {
-  if (!node?.id) return;
-
-  const stage = editorService.get<StageCore | null>('stage');
-  const root = editorService.get<MApp | null>('root');
-
-  if (!root) throw new Error('没有root');
-
-  const { parent, node: curNode } = editorService.getNodeInfo(node.id, false);
-
-  if (!parent || !curNode) throw new Error('找不要删除的节点');
-
-  const index = getNodeIndex(curNode, parent);
-
-  if (typeof index !== 'number' || index === -1) throw new Error('找不要删除的节点');
-  // 从配置中删除元素
-  parent.items?.splice(index, 1);
-
-  // 通知stage更新
-  stage?.remove({ id: node.id, root: cloneDeep(root) });
-
-  if (node.type === NodeType.PAGE) {
-    editorService.state.pageLength -= 1;
-
-    if (root.items[0]) {
-      await editorService.select(root.items[0]);
-      stage?.select(root.items[0].id);
-    } else {
-      editorService.set('node', null);
-      editorService.set('nodes', []);
-      editorService.set('parent', null);
-      editorService.set('page', null);
-      editorService.set('stage', null);
-      editorService.set('highlightNode', null);
-      editorService.resetModifiedNodeId();
-      historyService.reset();
-
-      editorService.emit('remove', node);
-
-      return;
-    }
-  } else {
-    await editorService.select(parent);
-    stage?.select(parent.id);
-  }
-  return parent;
-};
-
-export const getAddParent = (addNode: AddMNode | MNode[]) => {
+export const getAddParent = (node: MNode) => {
   const curNode = editorService.get<MContainer>('node');
 
   let parentNode;
-  if (!Array.isArray(addNode) && isPage(addNode as MNode)) {
+  if (isPage(node)) {
     parentNode = editorService.get<MApp>('root');
   } else if (curNode.items) {
     parentNode = curNode;

package/src/utils/props.ts

@@ -234,6 +234,3 @@ export const fillConfig = (config: FormConfig = []) => [
     ],
   },
 ];
-
-// 默认组件属性表单配置
-export const DEFAULT_CONFIG: FormConfig = fillConfig([]);

package/src/utils/scroll-viewer.ts

@@ -1,4 +1,4 @@
-import { Keys } from '../type';
+import { EventEmitter } from 'events';
 
 interface ScrollViewerOptions {
   container: HTMLDivElement;
@@ -6,10 +6,7 @@ interface ScrollViewerOptions {
   zoom: number;
 }
 
-export class ScrollViewer {
-  private enter = false;
-  private targetEnter = false;
-  private keydown = false;
+export class ScrollViewer extends EventEmitter {
   private container: HTMLDivElement;
   private target: HTMLDivElement;
   private zoom = 1;
@@ -17,200 +14,135 @@ export class ScrollViewer {
   private scrollLeft = 0;
   private scrollTop = 0;
 
-  private x = 0;
-  private y = 0;
+  private scrollHeight = 0;
+  private scrollWidth = 0;
 
-  private resizeObserver = new ResizeObserver((entries) => {
-    for (const { contentRect } of entries) {
-      const { width, height } = contentRect;
-      const targetRect = this.target.getBoundingClientRect();
-      const targetWidth = targetRect.width * this.zoom;
-      const targetMarginTop = Number(this.target.style.marginTop) || 0;
-      const targetHeight = (targetRect.height + targetMarginTop) * this.zoom;
+  private width = 0;
+  private height = 0;
 
-      if (targetWidth < width) {
-        (this.target as any)._left = 0;
-      }
-      if (targetHeight < height) {
-        (this.target as any)._top = 0;
-      }
+  private translateXCorrectionValue = 0;
+  private translateYCorrectionValue = 0;
 
-      this.scroll();
-    }
+  private resizeObserver = new ResizeObserver(() => {
+    this.setSize();
+    this.setScrollSize();
   });
 
   constructor(options: ScrollViewerOptions) {
+    super();
+
     this.container = options.container;
     this.target = options.target;
     this.zoom = options.zoom;
 
-    globalThis.addEventListener('keydown', this.keydownHandler);
-    globalThis.addEventListener('keyup', this.keyupHandler);
-
-    this.container.addEventListener('mouseenter', this.mouseEnterHandler);
-    this.container.addEventListener('mouseleave', this.mouseLeaveHandler);
-    this.target.addEventListener('mouseenter', this.targetMouseEnterHandler);
-    this.target.addEventListener('mouseleave', this.targetMouseLeaveHandler);
-
-    this.container.addEventListener('wheel', this.wheelHandler);
+    this.container.addEventListener('wheel', this.wheelHandler, false);
 
+    this.setSize();
+    this.setScrollSize();
     this.resizeObserver.observe(this.container);
   }
 
   public destroy() {
     this.resizeObserver.disconnect();
-
-    this.container.removeEventListener('mouseenter', this.mouseEnterHandler);
-    this.container.removeEventListener('mouseleave', this.mouseLeaveHandler);
-    this.target.removeEventListener('mouseenter', this.targetMouseEnterHandler);
-    this.target.removeEventListener('mouseleave', this.targetMouseLeaveHandler);
-    globalThis.removeEventListener('keydown', this.keydownHandler);
-    globalThis.removeEventListener('keyup', this.keyupHandler);
+    this.container.removeEventListener('wheel', this.wheelHandler, false);
+    this.removeAllListeners();
   }
 
   public setZoom(zoom: number) {
     this.zoom = zoom;
+    this.setScrollSize();
   }
 
-  private scroll() {
-    const scrollLeft = (this.target as any)._left;
-    const scrollTop = (this.target as any)._top;
+  public scrollTo({ left, top }: { left?: number; top?: number }) {
+    if (typeof left !== 'undefined') {
+      this.scrollLeft = left;
+    }
 
-    this.target.style.transform = `translate(${scrollLeft}px, ${scrollTop}px)`;
-  }
+    if (typeof top !== 'undefined') {
+      this.scrollTop = top;
+    }
 
-  private removeHandler() {
-    this.target.style.cursor = '';
-    this.target.removeEventListener('mousedown', this.mousedownHandler);
-    document.removeEventListener('mousemove', this.mousemoveHandler);
-    document.removeEventListener('mouseup', this.mouseupHandler);
+    const translateX = -this.scrollLeft + this.translateXCorrectionValue;
+    const translateY = -this.scrollTop + this.translateYCorrectionValue;
+    this.target.style.transform = `translate(${translateX}px, ${translateY}px)`;
   }
 
   private wheelHandler = (event: WheelEvent) => {
-    if (this.targetEnter) return;
-
     const { deltaX, deltaY, currentTarget } = event;
 
     if (currentTarget !== this.container) return;
 
-    this.setScrollOffset(deltaX, deltaY);
-    this.scroll();
-    this.scrollLeft = (this.target as any)._left;
-    this.scrollTop = (this.target as any)._top;
-  };
-
-  private mouseEnterHandler = () => {
-    this.enter = true;
-  };
-
-  private mouseLeaveHandler = () => {
-    this.enter = false;
-  };
-
-  private targetMouseEnterHandler = () => {
-    this.targetEnter = true;
-  };
-
-  private targetMouseLeaveHandler = () => {
-    this.targetEnter = false;
-  };
-
-  private mousedownHandler = (event: MouseEvent) => {
-    if (!this.keydown) return;
-
-    event.stopImmediatePropagation();
-    event.stopPropagation();
-
-    this.target.style.cursor = 'grabbing';
-
-    this.x = event.clientX;
-    this.y = event.clientY;
-
-    document.addEventListener('mousemove', this.mousemoveHandler);
-    document.addEventListener('mouseup', this.mouseupHandler);
-  };
-
-  private mouseupHandler = () => {
-    this.x = 0;
-    this.y = 0;
-
-    this.scrollLeft = (this.target as any)._left;
-    this.scrollTop = (this.target as any)._top;
-    this.removeHandler();
-  };
-
-  private mousemoveHandler = (event: MouseEvent) => {
-    event.stopImmediatePropagation();
-    event.stopPropagation();
-
-    const deltaX = event.clientX - this.x;
-    const deltaY = event.clientY - this.y;
-
-    this.setScrollOffset(deltaX, deltaY);
-    this.scroll();
-  };
-
-  private keydownHandler = (event: KeyboardEvent) => {
-    if (event.code === Keys.ESCAPE && this.enter) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      event.stopPropagation();
+    let top: number | undefined;
+    if (this.scrollHeight > this.height) {
+      top = this.scrollTop + this.getPos(deltaY, this.scrollTop, this.scrollHeight, this.height);
     }
 
-    if (event.code !== Keys.ESCAPE || !this.enter || this.keydown) {
-      return;
+    let left: number | undefined;
+    if (this.scrollWidth > this.width) {
+      left = this.scrollLeft + this.getPos(deltaX, this.scrollLeft, this.scrollWidth, this.width);
     }
 
-    this.keydown = true;
-
-    this.target.style.cursor = 'grab';
-    this.container.addEventListener('mousedown', this.mousedownHandler);
+    this.scrollTo({ left, top });
+    this.emit('scroll', {
+      scrollLeft: this.scrollLeft,
+      scrollTop: this.scrollTop,
+      scrollHeight: this.scrollHeight,
+      scrollWidth: this.scrollWidth,
+    });
   };
 
-  private keyupHandler = (event: KeyboardEvent) => {
-    if (event.code !== Keys.ESCAPE || !this.keydown) {
-      return;
+  private getPos(delta: number, scrollPos: number, scrollSize: number, size: number) {
+    let pos = 0;
+    if (delta < 0) {
+      if (scrollPos > 0) {
+        pos = Math.max(delta, -scrollPos);
+      }
+    } else {
+      const leftPos = scrollSize - size - scrollPos;
+      if (leftPos > 0) {
+        pos = Math.min(delta, leftPos);
+      }
     }
+    return pos;
+  }
 
-    event.preventDefault();
-    event.stopImmediatePropagation();
-    event.stopPropagation();
-
-    this.keydown = false;
-
-    event.preventDefault();
-
-    this.removeHandler();
-  };
-
-  private setScrollOffset(deltaX: number, deltaY: number) {
-    const { width, height } = this.container.getBoundingClientRect();
+  private setScrollSize = () => {
     const targetRect = this.target.getBoundingClientRect();
-
-    const targetWidth = targetRect.width * this.zoom;
-    const targetHeight = targetRect.height * this.zoom;
-
-    let y = 0;
-
-    if (targetHeight > height) {
-      if (deltaY > 0) {
-        y = this.scrollTop + Math.min(targetHeight - height - this.scrollTop, deltaY);
-      } else {
-        y = this.scrollTop + Math.max(-(targetHeight - height + this.scrollTop), deltaY);
-      }
+    this.scrollWidth = targetRect.width * this.zoom + 100;
+    const targetMarginTop = Number(this.target.style.marginTop) || 0;
+    this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + 100;
+
+    let left: number | undefined;
+    let top: number | undefined;
+    if (this.scrollWidth < this.width) {
+      left = 0;
+      this.translateXCorrectionValue = 0;
+    } else {
+      this.translateXCorrectionValue = (this.scrollWidth - this.width) / 2;
     }
-
-    let x = 0;
-
-    if (targetWidth > width) {
-      if (deltaX > 0) {
-        x = this.scrollLeft + Math.min(targetWidth - width - this.scrollLeft, deltaX);
-      } else {
-        x = this.scrollLeft + Math.max(-(targetWidth - width + this.scrollLeft), deltaX);
-      }
+    if (this.scrollHeight < this.height) {
+      top = 0;
+      this.translateYCorrectionValue = 0;
+    } else {
+      this.translateYCorrectionValue = (this.scrollHeight - this.height) / 2;
     }
 
-    (this.target as any)._left = x;
-    (this.target as any)._top = y;
-  }
+    this.scrollTo({
+      left,
+      top,
+    });
+
+    this.emit('scroll', {
+      scrollLeft: this.scrollLeft,
+      scrollTop: this.scrollTop,
+      scrollHeight: this.scrollHeight,
+      scrollWidth: this.scrollWidth,
+    });
+  };
+
+  private setSize = () => {
+    const { width, height } = this.container.getBoundingClientRect();
+    this.width = width;
+    this.height = height;
+  };
 }

package/src/utils/stage.ts

@@ -0,0 +1,91 @@
+import { computed } from 'vue';
+
+import { MApp, MPage } from '@tmagic/schema';
+import StageCore, { GuidesType, SortEventData, UpdateEventData } from '@tmagic/stage';
+
+import editorService from '../services/editor';
+import uiService from '../services/ui';
+import { H_GUIDE_LINE_STORAGE_KEY, StageOptions, V_GUIDE_LINE_STORAGE_KEY } from '../type';
+
+import { getGuideLineFromCache } from './editor';
+
+const root = computed(() => editorService.get<MApp>('root'));
+const page = computed(() => editorService.get<MPage>('page'));
+const zoom = computed(() => uiService.get<number>('zoom') || 1);
+const uiSelectMode = computed(() => uiService.get<boolean>('uiSelectMode'));
+
+const getGuideLineKey = (key: string) => `${key}_${root.value?.id}_${page.value?.id}`;
+
+export const useStage = (stageOptions: StageOptions) => {
+  const 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.mask.setGuides([
+    getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
+    getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY)),
+  ]);
+
+  stage.on('select', (el: HTMLElement) => {
+    editorService.select(el.id);
+  });
+
+  stage.on('highlight', (el: HTMLElement) => {
+    editorService.highlight(el.id);
+  });
+
+  stage.on('multiSelect', (els: HTMLElement[]) => {
+    editorService.multiSelect(els.map((el) => el.id));
+  });
+
+  stage.on('update', (ev: UpdateEventData) => {
+    if (ev.parentEl) {
+      for (const data of ev.data) {
+        editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
+      }
+      return;
+    }
+
+    editorService.update(ev.data.map((data) => ({ id: data.el.id, style: data.style })));
+  });
+
+  stage.on('sort', (ev: SortEventData) => {
+    editorService.sort(ev.src, ev.dist);
+  });
+
+  stage.on('changeGuides', (e) => {
+    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);
+    }
+  });
+
+  return stage;
+};

package/types/Editor.vue.d.ts

@@ -2,8 +2,8 @@ import { PropType } from 'vue';
 import type { FormConfig } from '@tmagic/form';
 import type { MApp, MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import { MoveableOptions } from '@tmagic/stage';
-import type { ComponentGroup, MenuBarData, MenuItem, Services, SideBarData, StageRect } from './type';
+import { ContainerHighlightType, MoveableOptions } from '@tmagic/stage';
+import type { ComponentGroup, MenuBarData, MenuButton, MenuComponent, Services, SideBarData, StageRect } from './type';
 declare const _default: import("vue").DefineComponent<{
     /** 页面初始值 */
     modelValue: {
@@ -21,11 +21,11 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<SideBarData>;
     };
     layerContentMenu: {
-        type: PropType<MenuItem[]>;
+        type: PropType<(MenuButton | MenuComponent)[]>;
         default: () => never[];
     };
     stageContentMenu: {
-        type: PropType<MenuItem[]>;
+        type: PropType<(MenuButton | MenuComponent)[]>;
         default: () => never[];
     };
     /** 顶部工具栏配置 */
@@ -83,6 +83,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    containerHighlightType: {
+        type: PropType<ContainerHighlightType>;
+        default: ContainerHighlightType;
+    };
     stageRect: {
         type: PropType<StageRect>;
     };
@@ -110,11 +114,11 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<SideBarData>;
     };
     layerContentMenu: {
-        type: PropType<MenuItem[]>;
+        type: PropType<(MenuButton | MenuComponent)[]>;
         default: () => never[];
     };
     stageContentMenu: {
-        type: PropType<MenuItem[]>;
+        type: PropType<(MenuButton | MenuComponent)[]>;
         default: () => never[];
     };
     /** 顶部工具栏配置 */
@@ -172,6 +176,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    containerHighlightType: {
+        type: PropType<ContainerHighlightType>;
+        default: ContainerHighlightType;
+    };
     stageRect: {
         type: PropType<StageRect>;
     };
@@ -188,8 +196,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     menu: MenuBarData;
     codeOptions: Record<string, any>;
-    layerContentMenu: MenuItem[];
-    stageContentMenu: MenuItem[];
+    layerContentMenu: (MenuButton | MenuComponent)[];
+    stageContentMenu: (MenuButton | MenuComponent)[];
     modelValue: MApp;
     componentGroupList: ComponentGroup[];
     autoScrollIntoView: boolean;
@@ -200,5 +208,6 @@ declare const _default: import("vue").DefineComponent<{
     isContainer: (el: HTMLElement) => boolean | Promise<boolean>;
     containerHighlightClassName: string;
     containerHighlightDuration: number;
+    containerHighlightType: ContainerHighlightType;
 }>;
 export default _default;