@tmagic/editor 1.4.6 → 1.4.8

package/src/services/stageOverlay.ts

@@ -1,212 +0,0 @@
-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

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

package/src/services/ui.ts

@@ -1,156 +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 { Writable } from 'type-fest';
-
-import { convertToNumber } from '@tmagic/utils';
-
-import editorService from '@editor/services/editor';
-import type { AsyncHookPlugin, StageRect, UiState } from '@editor/type';
-
-import BaseService from './BaseService';
-
-const state = reactive<UiState>({
-  uiSelectMode: false,
-  showSrc: false,
-  zoom: 1,
-  stageContainerRect: {
-    width: 0,
-    height: 0,
-  },
-  stageRect: {
-    width: 375,
-    height: 817,
-  },
-  columnWidth: {
-    left: 0,
-    right: 0,
-    center: 0,
-  },
-  showGuides: true,
-  showRule: true,
-  propsPanelSize: 'small',
-  showAddPageButton: true,
-  hideSlideBar: false,
-  sideBarItems: [],
-  navMenuRect: {
-    left: 0,
-    top: 0,
-    width: 0,
-    height: 0,
-  },
-  frameworkRect: {
-    width: 0,
-    height: 0,
-    left: 0,
-    top: 0,
-  },
-});
-
-const canUsePluginMethods = {
-  async: ['zoom', 'calcZoom'] as const,
-  sync: [] as const,
-};
-
-type AsyncMethodName = Writable<(typeof canUsePluginMethods)['async']>;
-
-class Ui extends BaseService {
-  constructor() {
-    super(canUsePluginMethods.async.map((methodName) => ({ name: methodName, isAsync: true })));
-  }
-
-  public set<K extends keyof UiState, T extends UiState[K]>(name: K, value: T) {
-    const mask = editorService.get('stage')?.mask;
-
-    if (name === 'stageRect') {
-      this.setStageRect(value as unknown as StageRect);
-      return;
-    }
-
-    if (name === 'showGuides') {
-      mask?.showGuides(value as unknown as boolean);
-    }
-
-    if (name === 'showRule') {
-      mask?.showRule(value as unknown as boolean);
-    }
-
-    state[name] = value;
-  }
-
-  public get<K extends keyof UiState>(name: K) {
-    return state[name];
-  }
-
-  public async zoom(zoom: number) {
-    this.set('zoom', (this.get('zoom') * 100 + zoom * 100) / 100);
-    if (this.get('zoom') < 0.1) this.set('zoom', 0.1);
-  }
-
-  public async calcZoom() {
-    const { stageRect, stageContainerRect } = state;
-    const { height, width } = stageContainerRect;
-    if (!width || !height) return 1;
-
-    let stageWidth: number = convertToNumber(stageRect.width, width);
-    let stageHeight: number = convertToNumber(stageRect.height, height);
-
-    // 30为标尺的大小
-    stageWidth = stageWidth + 30;
-    stageHeight = stageHeight + 30;
-
-    if (width > stageWidth && height > stageHeight) {
-      return 1;
-    }
-    // 60/80是为了不要让画布太过去贴住四周（这样好看些）
-    return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
-  }
-
-  public resetState() {
-    this.set('showSrc', false);
-    this.set('uiSelectMode', false);
-    this.set('zoom', 1);
-    this.set('stageContainerRect', {
-      width: 0,
-      height: 0,
-    });
-  }
-
-  public destroy() {
-    this.resetState();
-    this.removeAllListeners();
-    this.removeAllPlugins();
-  }
-
-  public usePlugin(options: AsyncHookPlugin<AsyncMethodName, Ui>): void {
-    super.usePlugin(options);
-  }
-
-  private async setStageRect(value: StageRect) {
-    state.stageRect = {
-      ...state.stageRect,
-      ...value,
-    };
-    state.zoom = await this.calcZoom();
-  }
-}
-
-export type UiService = Ui;
-
-export default new Ui();

package/src/shims-vue.d.ts

@@ -1,6 +0,0 @@
-declare module '*.vue' {
-  import { DefineComponent } from 'vue';
-
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
-}

package/src/theme/breadcrumb.scss

@@ -1,6 +0,0 @@
-.m-editor-breadcrumb {
-  position: absolute;
-  left: 5px;
-  top: 5px;
-  z-index: 10;
-}

package/src/theme/code-block.scss

@@ -1,6 +0,0 @@
-.m-fields-code-select {
-  width: 100%;
-  .el-card__header {
-    display: none;
-  }
-}

package/src/theme/code-editor.scss

@@ -1,38 +0,0 @@
-.m-container-vs-code {
-  .el-form-item {
-    margin-bottom: 0;
-  }
-}
-
-.magic-code-editor {
-  width: 100%;
-}
-
-.magic-code-editor-wrapper {
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  &.full-screen {
-    position: fixed;
-    z-index: 10000;
-    top: 0;
-    left: 0;
-  }
-
-  .magic-code-editor-content {
-    width: 100%;
-    height: 100%;
-
-    .margin {
-      margin: 0;
-    }
-  }
-
-  .magic-code-editor-full-screen-icon {
-    position: absolute;
-    top: 5px;
-    right: 0;
-    z-index: 11;
-  }
-}

package/src/theme/common/var.scss

@@ -1,14 +0,0 @@
-$--theme-color: #2882e0;
-
-$--font-color: #313a40;
-$--border-color: #d9dbdd;
-$--hover-color: #f3f5f9;
-
-$--nav-height: 35px;
-$--nav-color: #313a40;
-$--nav--background-color: #ffffff;
-
-$--sidebar-heder-background-color: $--theme-color;
-$--sidebar-content-background-color: #ffffff;
-
-$--page-bar-height: 32px;

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

@@ -1,95 +0,0 @@
-.ui-component-panel {
-  &.tmagic-design-collapse {
-    border-top: 0 !important;
-    margin-top: 48px;
-    background-color: $--sidebar-content-background-color;
-
-    .tmagic-design-collapse-item {
-      > div:first-of-type {
-        border-bottom: 1px solid $--border-color;
-        margin-bottom: 10px;
-      }
-    }
-
-    .el-collapse-item__header,
-    .t-collapse-panel__header {
-      background: $--sidebar-content-background-color;
-      color: $--font-color;
-      height: 25px;
-      line-height: 25px;
-      padding-left: 10px;
-      font-size: 12px;
-
-      i {
-        margin-right: 5px;
-        font-size: 14px;
-      }
-    }
-
-    .el-collapse-item__wrap,
-    .t-collapse-panel__body {
-      background: $--sidebar-content-background-color;
-      border-bottom: 0;
-
-      .el-collapse-item__content,
-      .t-collapse-panel__content {
-        padding: 10px;
-        display: flex;
-        flex-wrap: wrap;
-      }
-
-      .component-item {
-        display: flex;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        margin: 5px 10px;
-        box-sizing: border-box;
-        color: $--font-color;
-        flex-direction: column;
-        width: 42px;
-        cursor: pointer;
-
-        i {
-          font-size: 20px;
-          background: #fff;
-          height: 40px;
-          width: 40px;
-          line-height: 40px;
-          border-radius: 5px;
-          color: #909090;
-          border: 1px solid $--border-color;
-          display: flex;
-          justify-content: space-evenly;
-          align-items: center;
-          margin-bottom: 5px;
-
-          &:hover {
-            background: #2882e0;
-            color: #fff;
-            border-color: #4e8be1;
-          }
-        }
-
-        span {
-          font-size: 12px;
-          text-align: center;
-        }
-
-        .el-tooltip {
-          width: 50px;
-          height: 30px;
-          line-height: 15px;
-          display: block;
-          white-space: normal;
-          margin: 0;
-        }
-      }
-    }
-  }
-
-  .t-collapse {
-    margin-top: 0;
-    padding-top: 48px;
-    position: relative;
-  }
-}