@tmagic/editor 1.4.8 → 1.4.9

package/src/services/events.ts

@@ -0,0 +1,93 @@
+/*
+ * 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

@@ -0,0 +1,126 @@
+/*
+ * 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

@@ -0,0 +1,220 @@
+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();