@tmagic/editor 1.1.0-beta.7 → 1.1.0

package/src/services/ui.ts

@@ -64,16 +64,6 @@ class Ui extends BaseService {
         center: 'auto',
       });
     });
-
-    const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
-    if (columnWidthCacheData) {
-      try {
-        const columnWidthCache = JSON.parse(columnWidthCacheData);
-        this.setColumnWidth(columnWidthCache);
-      } catch (e) {
-        console.error(e);
-      }
-    }
   }
 
   public set<T = any>(name: keyof UiState, value: T) {
@@ -98,21 +88,49 @@ class Ui extends BaseService {
     }
 
     (state as any)[name] = value;
-
-    if (name === 'stageContainerRect') {
-      state.zoom = this.calcZoom();
-    }
   }
 
   public get<T>(name: keyof typeof state): T {
     return (state as any)[name];
   }
 
+  public initColumnWidth() {
+    const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
+    if (columnWidthCacheData) {
+      try {
+        const columnWidthCache = JSON.parse(columnWidthCacheData);
+        this.setColumnWidth(columnWidthCache);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
+
   public 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() {
+    const { stageRect, stageContainerRect } = state;
+    const { height, width } = stageContainerRect;
+    if (!width || !height) return 1;
+
+    // 30为标尺的大小
+    const stageWidth = stageRect.width + 30;
+    const stageHeight = stageRect.height + 30;
+
+    if (width > stageWidth && height > stageHeight) {
+      return 1;
+    }
+    // 60/80是为了不要让画布太过去贴住四周（这样好看些）
+    return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
+  }
+
+  public destroy() {
+    this.removeAllListeners();
+  }
+
   private setColumnWidth({ left, center, right }: SetColumnWidth) {
     const columnWidth = {
       ...toRaw(this.get<GetColumnWidth>('columnWidth')),
@@ -150,22 +168,6 @@ class Ui extends BaseService {
     };
     state.zoom = this.calcZoom();
   }
-
-  private calcZoom() {
-    const { stageRect, stageContainerRect } = state;
-    const { height, width } = stageContainerRect;
-    if (!width || !height) return 1;
-
-    // 30为标尺的大小
-    const stageWidth = stageRect.width + 30;
-    const stageHeight = stageRect.height + 30;
-
-    if (width > stageWidth && height > stageHeight) {
-      return 1;
-    }
-    // 60/80是为了不要让画布太过去贴住四周（这样好看些）
-    return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
-  }
 }
 
 export type UiService = Ui;

package/src/theme/component-list-panel.scss

@@ -86,6 +86,11 @@
         }
       }
 
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+
       span {
         font-size: 12px;
         text-align: center;

package/src/theme/nav-menu.scss

@@ -69,5 +69,11 @@
     .menu-item-text {
       color: $--nav-color;
     }
+
+    &.rule {
+      .el-icon {
+        transform: rotate(-90deg);
+      }
+    }
   }
 }

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/editor.ts

@@ -88,10 +88,10 @@ export const getRelativeStyle = (style: Record<string, any> = {}): Record<string
   left: 0,
 });
 
-const getMiddleTop = (style: Record<string, any> = {}, parentNode: MNode, stage: StageCore) => {
-  let height = style.height || 0;
+const getMiddleTop = (node: MNode, parentNode: MNode, stage: StageCore | null) => {
+  let height = node.style?.height || 0;
 
-  if (!stage || typeof style.top !== 'undefined' || !parentNode.style) return style.top;
+  if (!stage || typeof node.style?.top !== 'undefined' || !parentNode.style) return node.style?.top;
 
   if (!isNumber(height)) {
     height = 0;
@@ -103,20 +103,15 @@ const getMiddleTop = (style: Record<string, any> = {}, parentNode: MNode, stage:
     const { scrollTop = 0, wrapperHeight } = stage.mask;
     return (wrapperHeight - height) / 2 + scrollTop;
   }
+
   return (parentHeight - height) / 2;
 };
 
-export const getInitPositionStyle = (
-  style: Record<string, any> = {},
-  layout: Layout,
-  parentNode: MNode,
-  stage: StageCore,
-) => {
+export const getInitPositionStyle = (style: Record<string, any> = {}, layout: Layout) => {
   if (layout === Layout.ABSOLUTE) {
     return {
       ...style,
       position: 'absolute',
-      top: getMiddleTop(style, parentNode, stage),
     };
   }
 
@@ -230,3 +225,15 @@ export const fixNodeLeft = (config: MNode, parent: MContainer, doc?: Document) =
 
   return config.style.left;
 };
+
+export const fixNodePosition = (config: MNode, parent: MContainer, stage: StageCore | null) => {
+  if (config.style?.position !== 'absolute') {
+    return config.style;
+  }
+
+  return {
+    ...(config.style || {}),
+    top: getMiddleTop(config, parent, stage),
+    left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document),
+  };
+};

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, Layout, PastePosition } from '../type';
-import { fixNodeLeft, generatePageNameByApp, getInitPositionStyle, getNodeIndex } from '../utils/editor';
+import { AddMNode, PastePosition } from '../type';
+import { generatePageNameByApp, getInitPositionStyle } from '../utils/editor';
 
 /**
  * 粘贴前置操作：返回分配了新id以及校准了坐标的配置
@@ -17,7 +16,7 @@ import { fixNodeLeft, generatePageNameByApp, getInitPositionStyle, getNodeIndex
  * @param config 待粘贴的元素配置(复制时保存的那份配置)
  * @returns
  */
-export const beforePaste = async (position: PastePosition, config: MNode[]) => {
+export const beforePaste = async (position: PastePosition, config: MNode[]): Promise<MNode[]> => {
   if (!config[0]?.style) return config;
   const curNode = editorService.get<MContainer>('node');
   // 将数组中第一个元素的坐标作为参照点
@@ -43,7 +42,7 @@ export const beforePaste = async (position: PastePosition, config: MNode[]) => {
         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;
@@ -69,54 +68,6 @@ export const beforePaste = async (position: PastePosition, config: MNode[]) => {
   return pasteConfigs;
 };
 
-/**
- * 新增元素前置操作，实现了在编辑器中新增元素节点，并返回新增元素信息以供stage更新
- * @param addNode 待添加元素的配置
- * @param parent 父级容器（可选）
- * @returns 新增的元素，父级元素，布局方式，是否为根页面
- */
-export const beforeAdd = async (
-  addNode: AddMNode,
-  parent?: MContainer | null,
-): Promise<{ parentNode: MContainer; newNode: MNode; layout: Layout; isPage: boolean }> => {
-  // 加入inputEvent是为给业务扩展时可以获取到更多的信息，只有在使用拖拽添加组件时才有改对象
-  const { type, inputEvent, ...config } = addNode;
-  const curNode = editorService.get<MContainer>('node');
-
-  let parentNode: MContainer | undefined;
-  const isPage = type === NodeType.PAGE;
-
-  if (isPage) {
-    parentNode = editorService.get<MApp>('root');
-    // 由于支持中间件扩展，在parent参数为undefined时，parent会变成next函数
-  } else if (parent && typeof parent !== 'function') {
-    parentNode = parent;
-  } else if (curNode.items) {
-    parentNode = curNode;
-  } else {
-    parentNode = editorService.getParentById(curNode.id, false);
-  }
-
-  if (!parentNode) throw new Error('未找到父元素');
-
-  const layout = await editorService.getLayout(toRaw(parentNode), addNode as MNode);
-  const newNode = { ...toRaw(await propsService.getPropsValue(type, config)) };
-  newNode.style = getInitPositionStyle(newNode.style, layout, parentNode, editorService.get<StageCore>('stage'));
-
-  if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) {
-    throw new Error('app下不能添加组件');
-  }
-  // 新增节点添加到配置中
-  parentNode?.items?.push(newNode);
-  // 返回新增信息以供stage更新
-  return {
-    parentNode,
-    newNode,
-    layout,
-    isPage,
-  };
-};
-
 /**
  * 将元素粘贴到容器内时，将相对于画布坐标转换为相对于容器的坐标
  * @param position PastePosition 粘贴时相对于画布的坐标
@@ -135,76 +86,24 @@ export const getPositionInContainer = (position: PastePosition = {}, id: Id) =>
   };
 };
 
-/**
- * 将新增元素事件通知到stage以更新渲染
- * @param parentNode 父元素
- * @param newNode 当前新增元素
- * @param layout 布局方式
- */
-export const notifyAddToStage = async (parentNode: MContainer, newNode: MNode, layout: Layout) => {
-  const stage = editorService.get<StageCore | null>('stage');
-  const root = editorService.get<MApp>('root');
-
-  await stage?.add({ config: cloneDeep(newNode), parent: cloneDeep(parentNode), root: cloneDeep(root) });
+export const getAddParent = (node: MNode) => {
+  const curNode = editorService.get<MContainer>('node');
 
-  if (layout === Layout.ABSOLUTE) {
-    const fixedLeft = fixNodeLeft(newNode, parentNode, stage?.renderer.contentWindow?.document);
-    if (typeof fixedLeft !== 'undefined' && newNode.style) {
-      newNode.style.left = fixedLeft;
-      await stage?.update({ config: cloneDeep(newNode), root: cloneDeep(root) });
-    }
+  let parentNode;
+  if (isPage(node)) {
+    parentNode = editorService.get<MApp>('root');
+  } else if (curNode.items) {
+    parentNode = curNode;
+  } else {
+    parentNode = editorService.getParentById(curNode.id, false);
   }
+  return parentNode;
 };
 
-/**
- * 删除前置操作：实现了在编辑器中删除元素节点，并返回父级元素信息以供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 getDefaultConfig = async (addNode: AddMNode, parentNode: MContainer) => {
+  const { type, inputEvent, ...config } = addNode;
+  const layout = await editorService.getLayout(toRaw(parentNode), addNode as MNode);
+  const newNode = { ...toRaw(await propsService.getPropsValue(type, config)) };
+  newNode.style = getInitPositionStyle(newNode.style, layout);
+  return newNode;
 };

package/src/utils/props.ts

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