@tmagic/editor 1.4.6 → 1.4.8

package/src/services/events.ts

@@ -1,93 +0,0 @@
-/*
- * 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 } from 'lodash-es';
-
-import { DEFAULT_EVENTS, DEFAULT_METHODS, EventOption } from '@tmagic/core';
-import { toLine } from '@tmagic/utils';
-
-import type { ComponentGroup } from '@editor/type';
-
-import BaseService from './BaseService';
-
-let eventMap: Record<string, EventOption[]> = reactive({});
-let methodMap: Record<string, EventOption[]> = reactive({});
-
-class Events extends BaseService {
-  constructor() {
-    super([]);
-  }
-
-  public init(componentGroupList: ComponentGroup[]) {
-    componentGroupList.forEach((group) => {
-      group.items.forEach((element) => {
-        const type = toLine(element.type);
-        if (!this.getEvent(type)) {
-          this.setEvent(type, DEFAULT_EVENTS);
-        }
-        if (!this.getMethod(type)) {
-          this.setMethod(type, DEFAULT_METHODS);
-        }
-      });
-    });
-  }
-
-  public setEvents(events: Record<string, EventOption[]>) {
-    Object.keys(events).forEach((type: string) => {
-      this.setEvent(toLine(type), events[type] || []);
-    });
-  }
-
-  public setEvent(type: string, events: EventOption[]) {
-    eventMap[toLine(type)] = [...DEFAULT_EVENTS, ...events];
-  }
-
-  public getEvent(type: string): EventOption[] {
-    return cloneDeep(eventMap[toLine(type)] || DEFAULT_EVENTS);
-  }
-
-  public setMethods(methods: Record<string, EventOption[]>) {
-    Object.keys(methods).forEach((type: string) => {
-      this.setMethod(toLine(type), methods[type] || []);
-    });
-  }
-
-  public setMethod(type: string, method: EventOption[]) {
-    methodMap[toLine(type)] = [...DEFAULT_METHODS, ...method];
-  }
-
-  public getMethod(type: string) {
-    return cloneDeep(methodMap[toLine(type)] || DEFAULT_METHODS);
-  }
-
-  public resetState() {
-    eventMap = reactive({});
-    methodMap = reactive({});
-  }
-
-  public destroy() {
-    this.resetState();
-    this.removeAllListeners();
-    this.removeAllPlugins();
-  }
-}
-
-export type EventsService = Events;
-
-export default new Events();

package/src/services/history.ts

@@ -1,126 +0,0 @@
-/*
- * 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 type { MPage, MPageFragment } from '@tmagic/schema';
-
-import type { HistoryState, StepValue } from '@editor/type';
-import { UndoRedo } from '@editor/utils/undo-redo';
-
-import BaseService from './BaseService';
-
-class History extends BaseService {
-  public state = reactive<HistoryState>({
-    pageSteps: {},
-    pageId: undefined,
-    canRedo: false,
-    canUndo: false,
-  });
-
-  constructor() {
-    super([]);
-
-    this.on('change', this.setCanUndoRedo);
-  }
-
-  public reset() {
-    this.state.pageSteps = {};
-    this.resetPage();
-  }
-
-  public resetPage() {
-    this.state.pageId = undefined;
-    this.state.canRedo = false;
-    this.state.canUndo = false;
-  }
-
-  public changePage(page: MPage | MPageFragment): void {
-    if (!page) return;
-
-    this.state.pageId = page.id;
-
-    if (!this.state.pageSteps[this.state.pageId]) {
-      const undoRedo = new UndoRedo<StepValue>();
-
-      undoRedo.pushElement({
-        data: page,
-        modifiedNodeIds: new Map(),
-        nodeId: page.id,
-      });
-
-      this.state.pageSteps[this.state.pageId] = undoRedo;
-    }
-
-    this.setCanUndoRedo();
-
-    this.emit('page-change', this.state.pageSteps[this.state.pageId]);
-  }
-
-  public resetState(): void {
-    this.state.pageId = undefined;
-    this.state.pageSteps = {};
-    this.state.canRedo = false;
-    this.state.canUndo = false;
-  }
-
-  public push(state: StepValue): StepValue | null {
-    const undoRedo = this.getUndoRedo();
-    if (!undoRedo) return null;
-    undoRedo.pushElement(state);
-    this.emit('change', state);
-    return state;
-  }
-
-  public undo(): StepValue | null {
-    const undoRedo = this.getUndoRedo();
-    if (!undoRedo) return null;
-    const state = undoRedo.undo();
-    this.emit('change', state);
-    return state;
-  }
-
-  public redo(): StepValue | null {
-    const undoRedo = this.getUndoRedo();
-    if (!undoRedo) return null;
-    const state = undoRedo.redo();
-    this.emit('change', state);
-    return state;
-  }
-
-  public destroy(): void {
-    this.resetState();
-    this.removeAllListeners();
-    this.removeAllPlugins();
-  }
-
-  private getUndoRedo() {
-    if (!this.state.pageId) return null;
-    return this.state.pageSteps[this.state.pageId];
-  }
-
-  private setCanUndoRedo(): void {
-    const undoRedo = this.getUndoRedo();
-    this.state.canRedo = undoRedo?.canRedo() || false;
-    this.state.canUndo = undoRedo?.canUndo() || false;
-  }
-}
-
-export type HistoryService = History;
-
-export default new History();

package/src/services/keybinding.ts

@@ -1,220 +0,0 @@
-import KeyController, { KeyControllerEvent } from 'keycon';
-
-import { isPage, isPageFragment } from '@tmagic/utils';
-
-import { KeyBindingCacheItem, KeyBindingCommand, KeyBindingItem } from '@editor/type';
-
-import BaseService from './BaseService';
-import editorService from './editor';
-import uiService from './ui';
-
-class Keybinding extends BaseService {
-  public ctrlKey = /mac os x/.test(navigator.userAgent.toLowerCase()) ? 'meta' : 'ctrl';
-
-  private controllers = new Map<string, KeyController>();
-
-  private bindingList: KeyBindingCacheItem[] = [];
-
-  private commands: Record<KeyBindingCommand | string, (e: KeyboardEvent) => void | Promise<void>> = {
-    [KeyBindingCommand.DELETE_NODE]: () => {
-      const nodes = editorService.get('nodes');
-
-      if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
-      editorService.remove(nodes);
-    },
-    [KeyBindingCommand.COPY_NODE]: () => {
-      const nodes = editorService.get('nodes');
-      nodes && editorService.copy(nodes);
-    },
-    [KeyBindingCommand.CUT_NODE]: () => {
-      const nodes = editorService.get('nodes');
-
-      if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
-      editorService.copy(nodes);
-      editorService.remove(nodes);
-    },
-    [KeyBindingCommand.PASTE_NODE]: () => {
-      const nodes = editorService.get('nodes');
-      nodes && editorService.paste({ offsetX: 10, offsetY: 10 });
-    },
-    [KeyBindingCommand.UNDO]: () => {
-      editorService.undo();
-    },
-    [KeyBindingCommand.REDO]: () => {
-      editorService.redo();
-    },
-    [KeyBindingCommand.ZOOM_IN]: () => {
-      uiService.zoom(0.1);
-    },
-    [KeyBindingCommand.ZOOM_OUT]: () => {
-      uiService.zoom(-0.1);
-    },
-    [KeyBindingCommand.ZOOM_RESET]: () => {
-      uiService.set('zoom', 1);
-    },
-    [KeyBindingCommand.ZOOM_FIT]: async () => {
-      uiService.set('zoom', await uiService.calcZoom());
-    },
-    [KeyBindingCommand.MOVE_UP_1]: () => {
-      editorService.move(0, -1);
-    },
-    [KeyBindingCommand.MOVE_DOWN_1]: () => {
-      editorService.move(0, 1);
-    },
-    [KeyBindingCommand.MOVE_LEFT_1]: () => {
-      editorService.move(-1, 0);
-    },
-    [KeyBindingCommand.MOVE_RIGHT_1]: () => {
-      editorService.move(1, 0);
-    },
-    [KeyBindingCommand.MOVE_UP_10]: () => {
-      editorService.move(0, -10);
-    },
-    [KeyBindingCommand.MOVE_DOWN_10]: () => {
-      editorService.move(0, 10);
-    },
-    [KeyBindingCommand.MOVE_LEFT_10]: () => {
-      editorService.move(-10, 0);
-    },
-    [KeyBindingCommand.MOVE_RIGHT_10]: () => {
-      editorService.move(10, 0);
-    },
-    [KeyBindingCommand.SWITCH_NODE]: () => {
-      editorService.selectNextNode();
-    },
-  };
-
-  public registerCommand(command: string, handler: (e: KeyboardEvent) => void | Promise<void>) {
-    this.commands[command] = handler;
-  }
-
-  /**
-   * @deprecated
-   */
-  public registeCommand(command: string, handler: (e: KeyboardEvent) => void | Promise<void>) {
-    this.registerCommand(command, handler);
-  }
-
-  public unregisterCommand(command: string) {
-    delete this.commands[command];
-  }
-
-  /**
-   * @deprecated
-   */
-  public unregisteCommand(command: string) {
-    this.unregisterCommand(command);
-  }
-
-  public registerEl(name: string, el?: HTMLElement) {
-    if (name !== 'global' && !el) {
-      throw new Error('只有name为global可以不传el');
-    }
-
-    const keycon = new KeyController(el);
-    this.controllers.set(name, keycon);
-    this.bind(name);
-  }
-
-  /**
-   * @deprecated
-   */
-  public registeEl(name: string, el?: HTMLElement) {
-    this.registerEl(name, el);
-  }
-
-  public unregisterEl(name: string) {
-    this.controllers.get(name)?.destroy();
-    this.controllers.delete(name);
-    this.bindingList.forEach((item) => {
-      item.bound = false;
-    });
-  }
-
-  /**
-   * @deprecated
-   */
-  public unregisteEl(name: string) {
-    this.unregisterEl(name);
-  }
-
-  public register(maps: KeyBindingItem[]) {
-    for (const keybindingItem of maps) {
-      const { command, keybinding, when } = keybindingItem;
-
-      for (const [type = '', eventType = 'keydown'] of when) {
-        const cacheItem: KeyBindingCacheItem = { type, command, keybinding, eventType, bound: false };
-
-        this.bindingList.push(cacheItem);
-      }
-    }
-
-    this.bind();
-  }
-
-  /**
-   * @deprecated
-   */
-  public registe(map: KeyBindingItem[]) {
-    this.register(map);
-  }
-
-  public reset() {
-    this.controllers.forEach((keycon) => {
-      keycon.destroy();
-    });
-    this.controllers.clear();
-    this.bindingList = [];
-  }
-
-  public destroy() {
-    this.reset();
-  }
-
-  private bind(name?: string) {
-    for (const item of this.bindingList) {
-      const { type, eventType, command, keybinding, bound } = item;
-
-      if (name && name !== type) {
-        continue;
-      }
-
-      if (bound) {
-        continue;
-      }
-
-      const keycon = this.controllers.get(type);
-      if (!keycon) {
-        continue;
-      }
-
-      const handler = (e: KeyControllerEvent) => {
-        e.inputEvent.preventDefault();
-
-        this.commands[command]?.(e.inputEvent);
-      };
-      this.getKeyconKeys(keybinding).forEach((keys) => {
-        if (keys[0]) {
-          keycon[eventType](keys, handler);
-        } else {
-          keycon[eventType](handler);
-        }
-      });
-
-      item.bound = true;
-    }
-  }
-
-  private getKeyconKeys(keybinding: string | string[] = '') {
-    const splitKey = (key: string) => key.split('+').map((k) => (k === 'ctrl' ? this.ctrlKey : k));
-
-    if (Array.isArray(keybinding)) {
-      return keybinding.map((key) => splitKey(key));
-    }
-    return [splitKey(keybinding)];
-  }
-}
-
-export type KeybindingService = Keybinding;
-
-export default new Keybinding();

package/src/services/props.ts

@@ -1,265 +0,0 @@
-/*
- * 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 { DepTargetType } 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 depService from '@editor/services/dep';
-import editorService from '@editor/services/editor';
-import type { AsyncHookPlugin, 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>) {
-    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) {
-    this.state.propsConfigMap[toLine(type)] = await this.fillConfig(Array.isArray(config) ? config : [config]);
-  }
-
-  /**
-   * 获取指点类型的组件属性表单配置
-   * @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>>) {
-    Object.keys(values).forEach((type: string) => {
-      this.setPropsValue(toLine(type), values[type]);
-    });
-  }
-
-  /**
-   * 为指点类型组件设置组件初始值
-   * @param type 组件类型
-   * @param value 组件初始值
-   */
-  public async setPropsValue(type: string, value: Partial<MNode>) {
-    this.state.propsValueMap[toLine(type)] = value;
-  }
-
-  /**
-   * 获取指定类型的组件初始值
-   * @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[]) {
-    const relateIdMap = this.getRelateIdMap();
-    if (Object.keys(relateIdMap).length === 0) return;
-    depService.clearByType(DepTargetType.RELATED_COMP_WHEN_COPY);
-    depService.collect(originConfigs, true, DepTargetType.RELATED_COMP_WHEN_COPY);
-    const target = depService.getTarget(DepTargetType.RELATED_COMP_WHEN_COPY, DepTargetType.RELATED_COMP_WHEN_COPY);
-    if (!target) return;
-    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);
-      }
-    });
-  }
-
-  /**
-   * 清除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();