@tmagic/editor 1.0.6 → 1.1.0-beta.10

package/src/services/props.ts

@@ -17,15 +17,15 @@
  */
 
 import { reactive } from 'vue';
-import { cloneDeep, mergeWith, random } from 'lodash-es';
+import { cloneDeep, mergeWith } from 'lodash-es';
 
 import type { FormConfig } from '@tmagic/form';
 import type { Id, MComponent, MNode, MPage } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 import { isPop, toLine } from '@tmagic/utils';
 
-import type { PropsState } from '@editor/type';
-import { DEFAULT_CONFIG, fillConfig, getDefaultPropsValue } from '@editor/utils/props';
+import type { PropsState } from '../type';
+import { DEFAULT_CONFIG, fillConfig } from '../utils/props';
 
 import BaseService from './BaseService';
 
@@ -36,7 +36,15 @@ class Props extends BaseService {
   });
 
   constructor() {
-    super(['setPropsConfig', 'getPropsConfig', 'setPropsValue', 'getPropsValue', 'createId', 'setNewItemId']);
+    super([
+      'setPropsConfig',
+      'getPropsConfig',
+      'setPropsValue',
+      'getPropsValue',
+      'createId',
+      'setNewItemId',
+      'getDefaultPropsValue',
+    ]);
   }
 
   public setPropsConfigs(configs: Record<string, FormConfig>) {
@@ -88,7 +96,7 @@ class Props extends BaseService {
    * @param type 组件类型
    * @returns 组件初始值
    */
-  public async getPropsValue(type: string, defaultValue: Record<string, any> = {}) {
+  public async getPropsValue(type: string, { inputEvent, ...defaultValue }: Record<string, any> = {}) {
     if (type === 'area') {
       const value = (await this.getPropsValue('button')) as MComponent;
       value.className = 'action-area';
@@ -99,18 +107,39 @@ class Props extends BaseService {
       return value;
     }
 
-    const data = cloneDeep(defaultValue as any);
-
-    await this.setNewItemId(data);
+    const [id, defaultPropsValue, data] = await Promise.all([
+      this.createId(type),
+      this.getDefaultPropsValue(type),
+      this.setNewItemId(
+        cloneDeep({
+          type,
+          ...defaultValue,
+        } as any),
+      ),
+    ]);
 
     return {
-      ...getDefaultPropsValue(type, await this.createId(type)),
-      ...mergeWith(cloneDeep(this.state.propsValueMap[type] || {}), data),
+      id,
+      ...defaultPropsValue,
+      ...mergeWith({}, cloneDeep(this.state.propsValueMap[type] || {}), data),
     };
   }
 
+  /**
+   * 生成指定位数的GUID，无【-】格式
+   * @param digit 位数，默认值8
+   * @returns
+   */
+  guid(digit = 8): string {
+    return 'x'.repeat(digit).replace(/[xy]/g, (c) => {
+      const r = (Math.random() * 16) | 0;
+      const v = c == 'x' ? r : (r & 0x3) | 0x8;
+      return v.toString(16);
+    });
+  }
+
   public async createId(type: string | number): Promise<string> {
-    return `${type}_${random(10000, false)}`;
+    return `${type}_${this.guid()}`;
   }
 
   /**
@@ -133,6 +162,29 @@ class Props extends BaseService {
         await this.setNewItemId(item, config as MPage);
       }
     }
+
+    return config;
+  }
+
+  /**
+   * 获取默认属性配置
+   * @param type 组件类型
+   * @returns Object
+   */
+  public async getDefaultPropsValue(type: string) {
+    return ['page', 'container'].includes(type)
+      ? {
+          type,
+          layout: 'absolute',
+          style: {},
+          name: type,
+          items: [],
+        }
+      : {
+          type,
+          style: {},
+          name: type,
+        };
   }
 }
 

package/src/services/storage.ts

@@ -0,0 +1,133 @@
+import serialize from 'serialize-javascript';
+
+import BaseService from './BaseService';
+
+interface Options {
+  namespace?: string;
+  protocol?: Protocol;
+}
+
+export enum Protocol {
+  OBJECT = 'object',
+  JSON = 'json',
+  STRING = 'string',
+  NUMBER = 'number',
+  BOOLEAN = 'boolean',
+}
+
+/**
+ * 数据存储服务
+ */
+export class WebStorage extends BaseService {
+  private storage: Storage = globalThis.localStorage;
+  private namespace = 'tmagic';
+
+  constructor() {
+    super(['getStorage', 'getNamespace', 'clear', 'getItem', 'removeItem', 'setItem']);
+  }
+
+  /**
+   * 获取数据存储对象，可以通过
+   * const storageService = new StorageService();
+   * storageService.usePlugin({
+   *    // 替换存储对象为 sessionStorage
+   *    async afterGetStorage(): Promise<Storage> {
+   *      return window.sessionStorage;
+   *    },
+   * });
+   */
+  public async getStorage(): Promise<Storage> {
+    return this.storage;
+  }
+
+  public async getNamespace(): Promise<string> {
+    return this.namespace;
+  }
+
+  /**
+   * 清理，支持storageService.usePlugin
+   */
+  public async clear(): Promise<void> {
+    const storage = await this.getStorage();
+    storage.clear();
+  }
+  /**
+   * 获取存储项，支持storageService.usePlugin
+   */
+  public async getItem(key: string, options: Options = {}): Promise<any> {
+    const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+    const { protocol = options.protocol, item } = this.getValueAndProtocol(
+      storage.getItem(`${options.namespace || namespace}:${key}`),
+    );
+
+    if (item === null) return null;
+
+    switch (protocol) {
+      case Protocol.OBJECT:
+        // eslint-disable-next-line no-eval
+        return eval(`(${item})`);
+      case Protocol.JSON:
+        return JSON.parse(item);
+      case Protocol.NUMBER:
+        return Number(item);
+      case Protocol.BOOLEAN:
+        return Boolean(item);
+      default:
+        return item;
+    }
+  }
+  /**
+   * 获取指定索引位置的key
+   */
+  public async key(index: number): Promise<string | null> {
+    const storage = await this.getStorage();
+    return storage.key(index);
+  }
+
+  /**
+   * 移除存储项，支持storageService.usePlugin
+   */
+  public async removeItem(key: string, options: Options = {}): Promise<void> {
+    const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+    storage.removeItem(`${options.namespace || namespace}:${key}`);
+  }
+
+  /**
+   * 设置存储项，支持storageService.usePlugin
+   */
+  public async setItem(key: string, value: any, options: Options = {}): Promise<void> {
+    const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+    let item = value;
+    const protocol = options.protocol ? `${options.protocol}:` : '';
+    if (typeof value === Protocol.STRING || typeof value === Protocol.NUMBER) {
+      item = `${protocol}${value}`;
+    } else {
+      item = `${protocol}${serialize(value)}`;
+    }
+    storage.setItem(`${options.namespace || namespace}:${key}`, item);
+  }
+
+  private getValueAndProtocol(value: string | null) {
+    let protocol = '';
+
+    if (value === null) {
+      return {
+        item: value,
+        protocol,
+      };
+    }
+
+    const item = value.replace(new RegExp(`^(${Object.values(Protocol).join('|')})(:)(.+)`), (_$0, $1, _$2, $3) => {
+      protocol = $1;
+      return $3;
+    });
+
+    return {
+      protocol,
+      item,
+    };
+  }
+}
+
+export type StorageService = WebStorage;
+export default new WebStorage();

package/src/services/ui.ts

@@ -20,8 +20,8 @@ import { reactive, toRaw } from 'vue';
 
 import type StageCore from '@tmagic/stage';
 
-import editorService from '@editor/services/editor';
-import type { GetColumnWidth, SetColumnWidth, StageRect, UiState } from '@editor/type';
+import editorService from '../services/editor';
+import type { GetColumnWidth, SetColumnWidth, StageRect, UiState } from '../type';
 
 import BaseService from './BaseService';
 
@@ -155,10 +155,16 @@ class Ui extends BaseService {
     const { stageRect, stageContainerRect } = state;
     const { height, width } = stageContainerRect;
     if (!width || !height) return 1;
-    if (width > stageRect.width && height > stageRect.height) {
+
+    // 30为标尺的大小
+    const stageWidth = stageRect.width + 30;
+    const stageHeight = stageRect.height + 30;
+
+    if (width > stageWidth && height > stageHeight) {
       return 1;
     }
-    return Math.min((width - 100) / stageRect.width || 1, (height - 100) / stageRect.height || 1);
+    // 60/80是为了不要让画布太过去贴住四周（这样好看些）
+    return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
   }
 }
 

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/framework.scss

@@ -35,7 +35,7 @@
       justify-content: center;
       align-items: center;
       flex-direction: column;
-      height: calc(100% - $--page-bar-height);
+      height: calc(100% - #{$--page-bar-height});
     }
 
     &-content {

package/src/theme/stage.scss

@@ -1,7 +1,7 @@
 .m-editor-stage {
   position: relative;
   width: 100%;
-  height: calc(100% - $--page-bar-height);
+  height: calc(100% - #{$--page-bar-height});
   overflow: hidden;
   display: flex;
   justify-content: center;
@@ -13,9 +13,9 @@
   height: 100%;
   z-index: 0;
   position: relative;
-  border: 1px solid $--border-color;
   transition: transform 0.3s;
   box-sizing: content-box;
+  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
 
   &::-webkit-scrollbar {
     width: 0 !important;

package/src/type.ts

@@ -21,14 +21,15 @@ 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 '@editor/services/componentList';
-import type { EditorService } from '@editor/services/editor';
-import type { EventsService } from '@editor/services/events';
-import type { HistoryService } from '@editor/services/history';
-import type { PropsService } from '@editor/services/props';
-import type { UiService } from '@editor/services/ui';
+import type { ComponentListService } from './services/componentList';
+import type { EditorService } from './services/editor';
+import type { EventsService } from './services/events';
+import type { HistoryService } from './services/history';
+import type { PropsService } from './services/props';
+import type { StorageService } from './services/storage';
+import type { UiService } from './services/ui';
 
 export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> | MNode;
 export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
@@ -40,6 +41,7 @@ export interface InstallOptions {
 export interface Services {
   editorService: EditorService;
   historyService: HistoryService;
+  storageService: StorageService;
   eventsService: EventsService;
   propsService: PropsService;
   componentListService: ComponentListService;
@@ -49,9 +51,13 @@ export interface Services {
 export interface StageOptions {
   runtimeUrl: string;
   autoScrollIntoView: boolean;
+  containerHighlightClassName: string;
+  containerHighlightDuration: number;
+  containerHighlightType: ContainerHighlightType;
   render: () => HTMLDivElement;
   moveableOptions: MoveableOptions | ((core?: StageCore) => MoveableOptions);
   canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
+  isContainer: (el: HTMLElement) => boolean | Promise<boolean>;
   updateDragEl: (el: HTMLDivElement) => void;
 }
 
@@ -61,6 +67,7 @@ export interface StoreState {
   parent: MContainer | null;
   node: MNode | null;
   highlightNode: MNode | null;
+  nodes: MNode[];
   stage: StageCore | null;
   modifiedNodeIds: Map<Id, Id>;
   pageLength: number;
@@ -122,9 +129,23 @@ export interface EditorNodeInfo {
 export interface AddMNode {
   type: string;
   name?: string;
+  inputEvent?: DragEvent;
   [key: string]: any;
 }
 
+export interface PastePosition {
+  left?: number;
+  top?: number;
+  /**
+   * 粘贴位置X方向偏移量
+   */
+  offsetX?: number;
+  /**
+   * 粘贴位置Y方向偏移量
+   */
+  offsetY?: number;
+}
+
 /**
  * 菜单按钮
  */

package/src/utils/config.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { InstallOptions } from '@editor/type';
+import { InstallOptions } from '../type';
 
 let $TMAGIC_EDITOR: InstallOptions = {} as any;
 

package/src/utils/editor.ts

@@ -21,7 +21,7 @@ import { NodeType } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
 
-import { Layout } from '@editor/type';
+import { Layout } from '../type';
 
 export const COPY_STORAGE_KEY = '$MagicEditorCopyData';
 
@@ -81,21 +81,17 @@ export const getNodeIndex = (node: MNode, parent: MContainer | MApp): number =>
   return items.findIndex((item: MNode) => `${item.id}` === `${node.id}`);
 };
 
-export const toRelative = (node: MNode) => {
-  node.style = {
-    ...(node.style || {}),
-    position: 'relative',
-    top: 0,
-    left: 0,
-  };
-  return node;
-};
+export const getRelativeStyle = (style: Record<string, any> = {}): Record<string, any> => ({
+  ...style,
+  position: 'relative',
+  top: 0,
+  left: 0,
+});
 
-const setTop2Middle = (node: MNode, parentNode: MNode, stage: StageCore) => {
-  const style = node.style || {};
-  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;
+  if (!stage || typeof node.style?.top !== 'undefined' || !parentNode.style) return node.style?.top;
 
   if (!isNumber(height)) {
     height = 0;
@@ -105,43 +101,40 @@ const setTop2Middle = (node: MNode, parentNode: MNode, stage: StageCore) => {
 
   if (isPage(parentNode)) {
     const { scrollTop = 0, wrapperHeight } = stage.mask;
-    style.top = (wrapperHeight - height) / 2 + scrollTop;
-  } else {
-    style.top = (parentHeight - height) / 2;
+    return (wrapperHeight - height) / 2 + scrollTop;
   }
 
-  return style;
+  return (parentHeight - height) / 2;
 };
 
-export const initPosition = (node: MNode, layout: Layout, parentNode: MNode, stage: StageCore) => {
+export const getInitPositionStyle = (style: Record<string, any> = {}, layout: Layout) => {
   if (layout === Layout.ABSOLUTE) {
-    node.style = {
+    return {
+      ...style,
       position: 'absolute',
-      ...setTop2Middle(node, parentNode, stage),
     };
-    return node;
   }
 
   if (layout === Layout.RELATIVE) {
-    return toRelative(node);
+    return getRelativeStyle(style);
   }
 
-  return node;
+  return style;
 };
 
 export const setLayout = (node: MNode, layout: Layout) => {
   node.items?.forEach((child: MNode) => {
     if (isPop(child)) return;
 
-    child.style = child.style || {};
+    const style = child.style || {};
 
     // 是 fixed 不做处理
-    if (child.style.position === 'fixed') return;
+    if (style.position === 'fixed') return;
 
     if (layout !== Layout.RELATIVE) {
-      child.style.position = 'absolute';
+      style.position = 'absolute';
     } else {
-      toRelative(child);
+      child.style = getRelativeStyle(style);
       child.style.right = 'auto';
       child.style.bottom = 'auto';
     }
@@ -161,11 +154,10 @@ export const change2Fixed = (node: MNode, root: MApp) => {
     offset.top = offset.top + globalThis.parseFloat(value.style?.top || 0);
   });
 
-  node.style = {
+  return {
     ...(node.style || {}),
     ...offset,
   };
-  return node;
 };
 
 export const Fixed2Other = async (
@@ -186,23 +178,23 @@ export const Fixed2Other = async (
     offset.left = offset.left - globalThis.parseFloat(value.style?.left || 0);
     offset.top = offset.top - globalThis.parseFloat(value.style?.top || 0);
   });
+  const style = node.style || {};
 
   const parent = path.pop();
   if (!parent) {
-    return toRelative(node);
+    return getRelativeStyle(style);
   }
 
   const layout = await getLayout(parent);
   if (layout !== Layout.RELATIVE) {
-    node.style = {
-      ...(node.style || {}),
+    return {
+      ...style,
       ...offset,
       position: 'absolute',
     };
-    return node;
   }
 
-  return toRelative(node);
+  return getRelativeStyle(style);
 };
 
 export const getGuideLineFromCache = (key: string): number[] => {
@@ -219,3 +211,29 @@ export const getGuideLineFromCache = (key: string): number[] => {
 
   return [];
 };
+
+export const fixNodeLeft = (config: MNode, parent: MContainer, doc?: Document) => {
+  if (!doc || !config.style || !isNumber(config.style.left)) return config.style?.left;
+
+  const el = doc.getElementById(`${config.id}`);
+  const parentEl = doc.getElementById(`${parent.id}`);
+
+  const left = Number(config.style?.left) || 0;
+  if (el && parentEl && el.offsetWidth + left > parentEl.offsetWidth) {
+    return parentEl.offsetWidth - el.offsetWidth;
+  }
+
+  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/operator.ts

@@ -0,0 +1,109 @@
+import { toRaw } from 'vue';
+import { isEmpty } from 'lodash-es';
+
+import { Id, MApp, MContainer, MNode } from '@tmagic/schema';
+import StageCore from '@tmagic/stage';
+import { isPage } from '@tmagic/utils';
+
+import editorService from '../services/editor';
+import propsService from '../services/props';
+import { AddMNode, PastePosition } from '../type';
+import { generatePageNameByApp, getInitPositionStyle } from '../utils/editor';
+
+/**
+ * 粘贴前置操作：返回分配了新id以及校准了坐标的配置
+ * @param position 粘贴的坐标
+ * @param config 待粘贴的元素配置(复制时保存的那份配置)
+ * @returns
+ */
+export const beforePaste = async (position: PastePosition, config: MNode[]): Promise<MNode[]> => {
+  if (!config[0]?.style) return config;
+  const curNode = editorService.get<MContainer>('node');
+  // 将数组中第一个元素的坐标作为参照点
+  const { left: referenceLeft, top: referenceTop } = config[0].style;
+  // 坐标校准后的粘贴数据
+  const pasteConfigs: MNode[] = await Promise.all(
+    config.map(async (configItem: MNode): Promise<MNode> => {
+      // 解构 position 对象，从 position 删除 offsetX、offsetY字段
+      const { offsetX = 0, offsetY = 0, ...positionClone } = position;
+      let pastePosition = positionClone;
+
+      if (!isEmpty(pastePosition) && curNode.items) {
+        // 如果没有传入粘贴坐标则可能为键盘操作，不再转换
+        // 如果粘贴时选中了容器，则将元素粘贴到容器内，坐标需要转换为相对于容器的坐标
+        pastePosition = getPositionInContainer(pastePosition, curNode.id);
+      }
+
+      // 将所有待粘贴元素坐标相对于多选第一个元素坐标重新计算，以保证多选粘贴后元素间距不变
+      if (pastePosition.left && configItem.style?.left) {
+        pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
+      }
+      if (pastePosition.top && configItem.style?.top) {
+        pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
+      }
+
+      const pasteConfig = await propsService.setNewItemId(configItem, editorService.get('root'));
+
+      if (pasteConfig.style) {
+        const { left, top } = pasteConfig.style;
+        // 判断能转换为数字时，做粘贴偏移量计算
+        if (typeof left === 'number' || (!!left && !isNaN(Number(left)))) {
+          pasteConfig.style.left = Number(left) + offsetX;
+        }
+        if (typeof top === 'number' || (!!top && !isNaN(Number(top)))) {
+          pasteConfig.style.top = Number(top) + offsetY;
+        }
+
+        pasteConfig.style = {
+          ...pasteConfig.style,
+          ...pastePosition,
+        };
+      }
+      if (isPage(pasteConfig)) {
+        pasteConfig.name = generatePageNameByApp(editorService.get('root'));
+      }
+      return pasteConfig as MNode;
+    }),
+  );
+  return pasteConfigs;
+};
+
+/**
+ * 将元素粘贴到容器内时，将相对于画布坐标转换为相对于容器的坐标
+ * @param position PastePosition 粘贴时相对于画布的坐标
+ * @param id 元素id
+ * @returns PastePosition 转换后的坐标
+ */
+export const getPositionInContainer = (position: PastePosition = {}, id: Id) => {
+  let { left = 0, top = 0 } = position;
+  const parentEl = editorService.get<StageCore>('stage')?.renderer?.contentWindow?.document.getElementById(`${id}`);
+  const parentElRect = parentEl?.getBoundingClientRect();
+  left = left - (parentElRect?.left || 0);
+  top = top - (parentElRect?.top || 0);
+  return {
+    left,
+    top,
+  };
+};
+
+export const getAddParent = (node: MNode) => {
+  const curNode = editorService.get<MContainer>('node');
+
+  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;
+};
+
+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;
+};