@tmagic/editor 1.4.8 → 1.4.9

package/src/services/props.ts

@@ -0,0 +1,286 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { reactive } from 'vue';
+import { cloneDeep, mergeWith } from 'lodash-es';
+import { Writable } from 'type-fest';
+
+import { Target, type TargetOptions, Watcher } from '@tmagic/dep';
+import type { FormConfig } from '@tmagic/form';
+import type { Id, MComponent, MNode } from '@tmagic/schema';
+import { getNodePath, getValueByKeyPath, guid, setValueByKeyPath, toLine } from '@tmagic/utils';
+
+import editorService from '@editor/services/editor';
+import type {
+  AsyncHookPlugin,
+  PropsFormConfigFunction,
+  PropsFormValueFunction,
+  PropsState,
+  SyncHookPlugin,
+} from '@editor/type';
+import { fillConfig } from '@editor/utils/props';
+
+import BaseService from './BaseService';
+
+const canUsePluginMethods = {
+  async: [
+    'setPropsConfig',
+    'getPropsConfig',
+    'setPropsValue',
+    'getPropsValue',
+    'fillConfig',
+    'getDefaultPropsValue',
+  ] as const,
+  sync: ['createId', 'setNewItemId'] as const,
+};
+
+type AsyncMethodName = Writable<(typeof canUsePluginMethods)['async']>;
+type SyncMethodName = Writable<(typeof canUsePluginMethods)['sync']>;
+
+class Props extends BaseService {
+  private state = reactive<PropsState>({
+    propsConfigMap: {},
+    propsValueMap: {},
+    relateIdMap: {},
+  });
+
+  constructor() {
+    super([
+      ...canUsePluginMethods.async.map((methodName) => ({ name: methodName, isAsync: true })),
+      ...canUsePluginMethods.sync.map((methodName) => ({ name: methodName, isAsync: false })),
+    ]);
+  }
+
+  public setPropsConfigs(configs: Record<string, FormConfig | PropsFormConfigFunction>) {
+    Object.keys(configs).forEach((type: string) => {
+      this.setPropsConfig(toLine(type), configs[type]);
+    });
+    this.emit('props-configs-change');
+  }
+
+  public async fillConfig(config: FormConfig, labelWidth?: string) {
+    return fillConfig(config, typeof labelWidth !== 'function' ? labelWidth : '80px');
+  }
+
+  public async setPropsConfig(type: string, config: FormConfig | PropsFormConfigFunction) {
+    let c = config;
+    if (typeof config === 'function') {
+      c = config({ editorService });
+    }
+
+    this.state.propsConfigMap[toLine(type)] = await this.fillConfig(Array.isArray(c) ? c : [c]);
+  }
+
+  /**
+   * 获取指点类型的组件属性表单配置
+   * @param type 组件类型
+   * @returns 组件属性表单配置
+   */
+  public async getPropsConfig(type: string): Promise<FormConfig> {
+    if (type === 'area') {
+      return await this.getPropsConfig('button');
+    }
+
+    return cloneDeep(this.state.propsConfigMap[toLine(type)] || (await this.fillConfig([])));
+  }
+
+  public setPropsValues(values: Record<string, Partial<MNode> | PropsFormValueFunction>) {
+    Object.keys(values).forEach((type: string) => {
+      this.setPropsValue(toLine(type), values[type]);
+    });
+  }
+
+  /**
+   * 为指点类型组件设置组件初始值
+   * @param type 组件类型
+   * @param value 组件初始值
+   */
+  public async setPropsValue(type: string, value: Partial<MNode> | PropsFormValueFunction) {
+    let v = value;
+    if (typeof value === 'function') {
+      v = value({ editorService });
+    }
+    this.state.propsValueMap[toLine(type)] = v;
+  }
+
+  /**
+   * 获取指定类型的组件初始值
+   * @param type 组件类型
+   * @returns 组件初始值
+   */
+  public async getPropsValue(componentType: string, { inputEvent, ...defaultValue }: Record<string, any> = {}) {
+    const type = toLine(componentType);
+
+    if (type === 'area') {
+      const value = (await this.getPropsValue('button')) as MComponent;
+      value.className = 'action-area';
+      value.text = '';
+      if (value.style) {
+        value.style.backgroundColor = 'rgba(255, 255, 255, 0)';
+      }
+      return value;
+    }
+
+    const id = this.createId(type);
+    const defaultPropsValue = this.getDefaultPropsValue(type);
+    const data = this.setNewItemId(
+      cloneDeep({
+        type,
+        ...defaultValue,
+      } as any),
+    );
+
+    return {
+      id,
+      ...defaultPropsValue,
+      ...mergeWith({}, cloneDeep(this.state.propsValueMap[type] || {}), data),
+    };
+  }
+
+  public createId(type: string | number): string {
+    return `${type}_${guid()}`;
+  }
+
+  /**
+   * 将组件与组件的子元素配置中的id都设置成一个新的ID
+   * 如果没有相同ID并且force为false则保持不变
+   * @param {Object} config 组件配置
+   * @param {Boolean} force 是否强制设置新的ID
+   */
+  /* eslint no-param-reassign: ["error", { "props": false }] */
+  public setNewItemId(config: MNode, force = true) {
+    if (force || editorService.getNodeById(config.id)) {
+      const newId = this.createId(config.type || 'component');
+      this.setRelateId(config.id, newId);
+      config.id = newId;
+    }
+
+    if (config.items && Array.isArray(config.items)) {
+      for (const item of config.items) {
+        this.setNewItemId(item);
+      }
+    }
+
+    return config;
+  }
+
+  /**
+   * 获取默认属性配置
+   * @param type 组件类型
+   * @returns Object
+   */
+  public getDefaultPropsValue(type: string) {
+    return ['page', 'container'].includes(type)
+      ? {
+          type,
+          layout: 'absolute',
+          style: {},
+          name: type,
+          items: [],
+        }
+      : {
+          type,
+          style: {},
+          name: type,
+        };
+  }
+
+  public resetState() {
+    this.state.propsConfigMap = {};
+    this.state.propsValueMap = {};
+  }
+
+  /**
+   * 替换关联ID
+   * @param originConfigs 原组件配置
+   * @param targetConfigs 待替换的组件配置
+   */
+  public replaceRelateId(originConfigs: MNode[], targetConfigs: MNode[], collectorOptions: TargetOptions) {
+    const relateIdMap = this.getRelateIdMap();
+
+    if (Object.keys(relateIdMap).length === 0) return;
+
+    const target = new Target({
+      ...collectorOptions,
+    });
+
+    const coperWatcher = new Watcher();
+
+    coperWatcher.addTarget(target);
+    coperWatcher.collect(originConfigs, {}, true, collectorOptions.type);
+
+    originConfigs.forEach((config: MNode) => {
+      const newId = relateIdMap[config.id];
+      const path = getNodePath(newId, targetConfigs);
+      const targetConfig = path[path.length - 1];
+
+      if (!targetConfig) return;
+
+      target.deps[config.id]?.keys?.forEach((fullKey) => {
+        const relateOriginId = getValueByKeyPath(fullKey, config);
+        const relateTargetId = relateIdMap[relateOriginId];
+        if (!relateTargetId) return;
+        setValueByKeyPath(fullKey, relateTargetId, targetConfig);
+      });
+
+      // 递归items
+      if (config.items && Array.isArray(config.items)) {
+        this.replaceRelateId(config.items, targetConfigs, collectorOptions);
+      }
+    });
+  }
+
+  /**
+   * 清除setNewItemId前后映射关系
+   */
+  public clearRelateId() {
+    this.state.relateIdMap = {};
+  }
+
+  public destroy() {
+    this.resetState();
+    this.removeAllListeners();
+    this.removeAllPlugins();
+  }
+
+  public usePlugin(options: AsyncHookPlugin<AsyncMethodName, Props> & SyncHookPlugin<SyncMethodName, Props>): void {
+    super.usePlugin(options);
+  }
+
+  /**
+   * 获取setNewItemId前后映射关系
+   * @param oldId 原组件ID
+   * @returns 新旧ID映射
+   */
+  private getRelateIdMap() {
+    return this.state.relateIdMap;
+  }
+
+  /**
+   * 记录setNewItemId前后映射关系
+   * @param oldId 原组件ID
+   * @param newId 分配的新ID
+   */
+  private setRelateId(oldId: Id, newId: Id) {
+    this.state.relateIdMap[oldId] = newId;
+  }
+}
+
+export type PropsService = Props;
+
+export default new Props();

package/src/services/stageOverlay.ts

@@ -0,0 +1,212 @@
+import { reactive } from 'vue';
+import type { Writable } from 'type-fest';
+
+import StageCore from '@tmagic/stage';
+
+import { useStage } from '@editor/hooks/use-stage';
+import BaseService from '@editor/services//BaseService';
+import editorService from '@editor/services//editor';
+import type { StageOptions, StageOverlayState, SyncHookPlugin } from '@editor/type';
+
+const canUsePluginMethods = {
+  async: [],
+  sync: ['openOverlay', 'closeOverlay', 'updateOverlay', 'createStage'] as const,
+};
+
+type SyncMethodName = Writable<(typeof canUsePluginMethods)['sync']>;
+
+class StageOverlay extends BaseService {
+  private state: StageOverlayState = reactive({
+    wrapDiv: document.createElement('div'),
+    sourceEl: null,
+    contentEl: null,
+    stage: null,
+    stageOptions: null,
+    wrapWidth: 0,
+    wrapHeight: 0,
+    stageOverlayVisible: false,
+  });
+
+  constructor() {
+    super(canUsePluginMethods.sync.map((methodName) => ({ name: methodName, isAsync: false })));
+
+    this.get('wrapDiv').classList.add('tmagic-editor-sub-stage-wrap');
+  }
+
+  public get<K extends keyof StageOverlayState>(name: K): StageOverlayState[K] {
+    return this.state[name];
+  }
+
+  public set<K extends keyof StageOverlayState, T extends StageOverlayState[K]>(name: K, value: T) {
+    this.state[name] = value;
+  }
+
+  public openOverlay(el: HTMLElement | null) {
+    const stageOptions = this.get('stageOptions');
+    if (!el || !stageOptions) return;
+
+    this.set('sourceEl', el);
+
+    this.createContentEl();
+
+    this.set('stageOverlayVisible', true);
+
+    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() {
+    this.set('stageOverlayVisible', false);
+    const subStage = this.get('stage');
+    const wrapDiv = this.get('wrapDiv');
+    subStage?.destroy();
+    wrapDiv.remove();
+
+    this.set('stage', null);
+    this.set('sourceEl', null);
+    this.set('contentEl', null);
+
+    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() {
+    const sourceEl = this.get('sourceEl');
+
+    if (!sourceEl) return;
+
+    const { scrollWidth, scrollHeight } = sourceEl;
+
+    this.set('wrapWidth', scrollWidth);
+    this.set('wrapHeight', scrollHeight);
+  }
+
+  public createStage(stageOptions: StageOptions = {}) {
+    return useStage({
+      ...stageOptions,
+      zoom: 1,
+      runtimeUrl: '',
+      autoScrollIntoView: false,
+      render: async (stage: StageCore) => {
+        this.copyDocumentElement();
+
+        const rootEls = stage.renderer.getDocument()?.body.children;
+        if (rootEls) {
+          Array.from(rootEls).forEach((element) => {
+            if (['SCRIPT', 'STYLE'].includes(element.tagName)) {
+              return;
+            }
+            element.remove();
+          });
+        }
+
+        const wrapDiv = this.get('wrapDiv');
+
+        await this.render();
+
+        return wrapDiv;
+      },
+    });
+  }
+
+  public usePlugin(options: SyncHookPlugin<SyncMethodName, StageOverlay>): void {
+    super.usePlugin(options);
+  }
+
+  private createContentEl() {
+    const sourceEl = this.get('sourceEl');
+    if (!sourceEl) return;
+
+    const contentEl = sourceEl.cloneNode(true) as HTMLElement;
+    this.set('contentEl', contentEl);
+
+    contentEl.style.position = 'static';
+    contentEl.style.overflow = 'visible';
+  }
+
+  private copyDocumentElement() {
+    const subStage = this.get('stage');
+    const stage = editorService.get('stage');
+
+    const doc = subStage?.renderer.getDocument();
+    const documentElement = stage?.renderer.getDocument()?.documentElement;
+
+    if (doc && documentElement) {
+      doc.replaceChild(documentElement.cloneNode(true), doc.documentElement);
+    }
+  }
+
+  private async render() {
+    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();
+    });
+    wrapDiv.appendChild(contentEl);
+
+    setTimeout(() => {
+      subStage?.renderer.contentWindow?.magic.onPageElUpdate(wrapDiv);
+    });
+
+    if (await stageOptions?.canSelect?.(contentEl)) {
+      subStage?.select(contentEl.id);
+    }
+  }
+
+  private updateHandler = () => {
+    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;
+
+export default new StageOverlay();

package/src/services/storage.ts

@@ -0,0 +1,155 @@
+import serialize from 'serialize-javascript';
+import type { Writable } from 'type-fest';
+
+import type { SyncHookPlugin } from '@editor/type';
+import { getConfig } from '@editor/utils/config';
+
+import BaseService from './BaseService';
+
+interface Options {
+  namespace?: string;
+  protocol?: Protocol;
+}
+
+export enum Protocol {
+  OBJECT = 'object',
+  JSON = 'json',
+  STRING = 'string',
+  NUMBER = 'number',
+  BOOLEAN = 'boolean',
+}
+
+const canUsePluginMethods = {
+  async: [],
+  sync: ['getStorage', 'getNamespace', 'clear', 'getItem', 'removeItem', 'setItem'] as const,
+};
+
+type SyncMethodName = Writable<(typeof canUsePluginMethods)['sync']>;
+
+/**
+ * 数据存储服务
+ */
+export class WebStorage extends BaseService {
+  private storage: Storage = globalThis.localStorage;
+  private namespace = 'tmagic';
+
+  constructor() {
+    super(canUsePluginMethods.sync.map((methodName) => ({ name: methodName, isAsync: false })));
+  }
+
+  /**
+   * 获取数据存储对象，可以通过
+   * const storageService = new StorageService();
+   * storageService.usePlugin({
+   *    // 替换存储对象为 sessionStorage
+   *    async afterGetStorage(): Promise<Storage> {
+   *      return window.sessionStorage;
+   *    },
+   * });
+   */
+  public getStorage(): Storage {
+    return this.storage;
+  }
+
+  public getNamespace(): string {
+    return this.namespace;
+  }
+
+  /**
+   * 清理，支持storageService.usePlugin
+   */
+  public clear(): void {
+    const storage = this.getStorage();
+    storage.clear();
+  }
+  /**
+   * 获取存储项，支持storageService.usePlugin
+   */
+  public getItem(key: string, options: Options = {}): any {
+    const storage = this.getStorage();
+    const namespace = 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:
+        return getConfig('parseDSL')(`(${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 key(index: number): string | null {
+    const storage = this.getStorage();
+    return storage.key(index);
+  }
+
+  /**
+   * 移除存储项，支持storageService.usePlugin
+   */
+  public removeItem(key: string, options: Options = {}): void {
+    const storage = this.getStorage();
+    const namespace = this.getNamespace();
+    storage.removeItem(`${options.namespace || namespace}:${key}`);
+  }
+
+  /**
+   * 设置存储项，支持storageService.usePlugin
+   */
+  public setItem(key: string, value: any, options: Options = {}): void {
+    const storage = this.getStorage();
+    const namespace = 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);
+  }
+
+  public destroy() {
+    this.removeAllListeners();
+    this.removeAllPlugins();
+  }
+
+  public usePlugin(options: SyncHookPlugin<SyncMethodName, WebStorage>): void {
+    super.usePlugin(options);
+  }
+
+  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();