@tmagic/editor 1.2.0-beta.9 → 1.2.1

package/src/services/props.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ * 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.
@@ -91,7 +91,7 @@ class Props extends BaseService {
    * @param type 组件类型
    * @param value 组件初始值
    */
-  public setPropsValue(type: string, value: MNode) {
+  public async setPropsValue(type: string, value: MNode) {
     this.state.propsValueMap[type] = value;
   }
 
@@ -171,10 +171,15 @@ class Props extends BaseService {
         };
   }
 
-  public destroy() {
+  public resetState() {
     this.state.propsConfigMap = {};
     this.state.propsValueMap = {};
+  }
+
+  public destroy() {
+    this.resetState();
     this.removeAllListeners();
+    this.removeAllPlugins();
   }
 
   /**

package/src/services/storage.ts

@@ -109,6 +109,7 @@ export class WebStorage extends BaseService {
 
   public destroy() {
     this.removeAllListeners();
+    this.removeAllPlugins();
   }
 
   private getValueAndProtocol(value: string | null) {

package/src/services/ui.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ * 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.
@@ -18,8 +18,6 @@
 
 import { reactive } from 'vue';
 
-import type StageCore from '@tmagic/stage';
-
 import editorService from '../services/editor';
 import type { StageRect, UiState } from '../type';
 
@@ -53,8 +51,8 @@ class Ui extends BaseService {
     super(['zoom', 'calcZoom']);
   }
 
-  public set<T = any>(name: keyof UiState, value: T) {
-    const mask = editorService.get<StageCore>('stage')?.mask;
+  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);
@@ -69,16 +67,16 @@ class Ui extends BaseService {
       mask?.showRule(value as unknown as boolean);
     }
 
-    (state as any)[name] = value;
+    state[name] = value;
   }
 
-  public get<T>(name: keyof typeof state): T {
-    return (state as any)[name];
+  public get<K extends keyof UiState>(name: K) {
+    return state[name];
   }
 
   public async zoom(zoom: number) {
-    this.set('zoom', (this.get<number>('zoom') * 100 + zoom * 100) / 100);
-    if (this.get<number>('zoom') < 0.1) this.set('zoom', 0.1);
+    this.set('zoom', (this.get('zoom') * 100 + zoom * 100) / 100);
+    if (this.get('zoom') < 0.1) this.set('zoom', 0.1);
   }
 
   public async calcZoom() {
@@ -97,8 +95,20 @@ class Ui extends BaseService {
     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();
   }
 
   private async setStageRect(value: StageRect) {

package/src/theme/code-block.scss

@@ -1,8 +1,13 @@
 .m-editor-code-block-list {
+  height: 100%;
   margin-top: 5px;
+
   .el-tree-node__content {
     height: auto;
   }
+  .el-tree-node__label {
+    width: 100%;
+  }
   .code-header-wrapper {
     display: flex;
     align-items: center;
@@ -32,9 +37,7 @@
       display: flex;
       align-items: center;
       .right-tool {
-        position: absolute;
-        right: 15px;
-        padding-left: 5px;
+        width: fit-content !important;
         display: flex;
         align-items: center;
         .edit-icon {
@@ -47,7 +50,8 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         padding: 10px 15px;
-        margin-right: 60px;
+        width: 0 !important;
+        flex: 1;
       }
     }
     .code-comp-map-wrapper {
@@ -74,30 +78,34 @@
 
 .m-fields-code-select {
   width: 100%;
-  .el-card__body {
-    padding: 5px;
-  }
-  .tool-bar {
-    display: flex;
-    align-items: center;
-    justify-content: end;
-    height: 20px;
-    .tool-item {
-      display: flex;
-      align-items: center;
-    }
+  .edit-icon {
+    cursor: pointer;
+    margin-right: 5px;
   }
 }
+
+.el-dialog.is-fullscreen.code-editor-dialog {
+  overflow: hidden;
+}
+
 .code-editor-dialog {
-  .el-dialog__body {
+  .tmagic-design-card {
+    .t-card__header {
+      display: block;
+    }
+  }
+
+  .el-dialog__body,
+  .t-dialog__body {
     height: 90%;
     padding-top: 10px;
   }
-  .el-card {
+  .tmagic-design-card {
     height: 100%;
     background: #fff;
-    .el-card__body {
-      height: calc(100% - 80px);
+    .el-card__body,
+    .t-card__body {
+      height: 100%;
       background: #fff;
     }
   }
@@ -109,6 +117,9 @@
     .side-tree {
       height: 100%;
       overflow: auto;
+      .el-tree-node__label {
+        width: 100%;
+      }
 
       .list-container {
         width: 100%;
@@ -134,6 +145,7 @@
     display: flex;
     align-items: center;
     font-size: 16px;
+    margin-bottom: 10px;
     .code-name-label {
       margin-right: 10px;
     }
@@ -166,18 +178,29 @@
 
   .m-editor-wrapper {
     height: 100%;
+    &.fullScreen {
+      height: 100%;
+      width: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 100;
+    }
     .m-editor-container {
-      height: calc(100% - 70px);
+      height: calc(100% - 45px);
     }
     .m-editor-content-bottom {
-      height: 40px;
+      height: 45px;
       width: 100%;
       display: flex;
       justify-content: end;
       background: #fff;
+      position: absolute;
+      right: 20px;
+      bottom: 0;
       > button {
         height: 30px;
-        margin-top: 15px;
+        margin-top: 5px;
       }
     }
   }

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

@@ -1,4 +1,4 @@
-.ui-component-panel {
+.ui-component-panel.tmagic-design-collapse {
   height: 100%;
   border-top: 0 !important;
   margin-top: 48px;
@@ -19,14 +19,15 @@
     }
   }
 
-  .el-collapse-item {
+  .tmagic-design-collapse-item {
     > div:first-of-type {
       border-bottom: 1px solid $--border-color;
       margin-bottom: 10px;
     }
   }
 
-  .el-collapse-item__header {
+  .el-collapse-item__header,
+  .t-collapse-panel__header {
     background: $--sidebar-content-background-color;
     color: $--font-color;
     height: 25px;
@@ -40,11 +41,13 @@
     }
   }
 
-  .el-collapse-item__wrap {
+  .el-collapse-item__wrap,
+  .t-collapse-panel__body {
     background: $--sidebar-content-background-color;
     border-bottom: 0;
 
-    .el-collapse-item__content {
+    .el-collapse-item__content,
+    .t-collapse-panel__content {
       padding: 10px;
       display: flex;
       flex-wrap: wrap;

package/src/type.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ * 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.
@@ -19,9 +19,14 @@
 import type { Component } from 'vue';
 
 import type { FormConfig } from '@tmagic/form';
-import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import type { ContainerHighlightType, MoveableOptions } from '@tmagic/stage';
+import type {
+  ContainerHighlightType,
+  CustomizeMoveableOptionsCallbackConfig,
+  MoveableOptions,
+  UpdateDragEl,
+} from '@tmagic/stage';
 
 import type { CodeBlockService } from './services/codeBlock';
 import type { ComponentListService } from './services/componentList';
@@ -31,6 +36,7 @@ import type { HistoryService } from './services/history';
 import type { PropsService } from './services/props';
 import type { StorageService } from './services/storage';
 import type { UiService } from './services/ui';
+import type { UndoRedo } from './utils/undo-redo';
 
 export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> | MNode;
 export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
@@ -56,11 +62,12 @@ export interface StageOptions {
   containerHighlightClassName: string;
   containerHighlightDuration: number;
   containerHighlightType: ContainerHighlightType;
-  render: () => HTMLDivElement;
-  moveableOptions: MoveableOptions | ((core?: StageCore) => MoveableOptions);
+  disabledDragStart?: boolean;
+  render: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
+  moveableOptions: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions);
   canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
   isContainer: (el: HTMLElement) => boolean | Promise<boolean>;
-  updateDragEl: (el: HTMLDivElement) => void;
+  updateDragEl: UpdateDragEl;
 }
 
 export interface StoreState {
@@ -75,6 +82,8 @@ export interface StoreState {
   pageLength: number;
 }
 
+export type StoreStateKey = keyof StoreState;
+
 export interface PropsState {
   propsConfigMap: Record<string, FormConfig>;
   propsValueMap: Record<string, MNode>;
@@ -131,9 +140,9 @@ export interface UiState {
 }
 
 export interface EditorNodeInfo {
-  node?: MNode;
-  parent?: MContainer;
-  page?: MPage;
+  node: MNode | null;
+  parent: MContainer | null;
+  page: MPage | null;
 }
 
 export interface AddMNode {
@@ -164,18 +173,17 @@ export interface MenuButton {
    * 按钮类型
    * button: 只有文字不带边框的按钮
    * text: 纯文本
+   * divider: 分割线
    * dropdown: 下拉菜单
-   * divider: 分隔线
-   * zoom: 放大缩小
    */
-  type: 'button' | 'dropdown' | 'text' | 'divider' | 'zoom';
+  type: 'button' | 'text' | 'divider' | 'dropdown';
   /** 当type为divider时有效，分割线方向, 默认vertical */
   direction?: 'horizontal' | 'vertical';
   /** 展示的文案 */
   text?: string;
   /** 鼠标悬浮是显示的气泡中的文案 */
   tooltip?: string;
-  /** element-plus icon class */
+  /** Vue组件或url */
   icon?: string | Component<{}, {}, any>;
   /** 是否置灰，默认为false */
   disabled?: boolean | ((data?: Services) => boolean);
@@ -183,8 +191,8 @@ export interface MenuButton {
   display?: boolean | ((data?: Services) => boolean);
   /** type为button/dropdown时点击运行的方法 */
   handler?: (data: Services, event: MouseEvent) => Promise<any> | any;
-  /** type为dropdown时，下拉的菜单列表， 或者有子菜单时 */
   className?: string;
+  /** type为dropdown时，下拉的菜单列表， 或者有子菜单时 */
   items?: MenuButton[];
 }
 
@@ -200,6 +208,7 @@ export interface MenuComponent {
   /** 是否显示，默认为true */
   className?: string;
   display?: boolean | ((data?: Services) => Promise<boolean> | boolean);
+  [key: string]: any;
 }
 
 /**
@@ -207,8 +216,13 @@ export interface MenuComponent {
  * 'delete': 删除按钮
  * 'undo': 撤销按钮
  * 'redo': 恢复按钮
+ * 'zoom': 'zoom-in', 'zoom-out', 'scale-to-original', 'scale-to-fit' 的集合
  * 'zoom-in': 放大按钮
  * 'zoom-out': 缩小按钮
+ * 'guides': 显示隐藏参考线
+ * 'rule': 显示隐藏标尺
+ * 'scale-to-original': 缩放到实际大小
+ * 'scale-to-fit': 缩放以适应
  */
 export type MenuItem =
   | '/'
@@ -220,6 +234,8 @@ export type MenuItem =
   | 'zoom-out'
   | 'guides'
   | 'rule'
+  | 'scale-to-original'
+  | 'scale-to-fit'
   | MenuButton
   | MenuComponent
   | string;
@@ -237,13 +253,14 @@ export interface MenuBarData {
 export interface SideComponent extends MenuComponent {
   /** 显示文案 */
   text: string;
-  /** element-plus icon class */
+  /** vue组件或url */
   icon: Component<{}, {}, any>;
 }
 
 /**
  * component-list: 组件列表
  * layer: 已选组件树
+ * code-block: 代码块
  */
 export type SideItem = 'component-list' | 'layer' | 'code-block' | SideComponent;
 
@@ -262,8 +279,9 @@ export interface ComponentItem {
   text: string;
   /** 组件类型 */
   type: string;
-  /** element-plus icon class */
-  icon?: string | Component;
+  /** Vue组件或url */
+  icon?: string | Component<{}, {}, any>;
+  /** 新增组件时需要透传到组价节点上的数据 */
   data?: {
     [key: string]: any;
   };
@@ -308,72 +326,60 @@ export interface ScrollViewerEvent {
   scrollWidth: number;
 }
 
-export interface CodeBlockDSL {
-  [id: string]: CodeBlockContent;
-}
-
-export interface CodeBlockContent {
-  /** 代码块名称 */
-  name: string;
-  /** 代码块内容 */
-  content: string;
-  /** 代码块与组件的绑定关系 */
-  comps?: CodeRelation;
-  /** 扩展字段 */
-  [propName: string]: any;
-}
-
 export type CodeState = {
   /** 是否展示代码块编辑区 */
   isShowCodeEditor: boolean;
   /** 代码块DSL数据源 */
   codeDsl: CodeBlockDSL | null;
   /** 当前选中的代码块id */
-  id: string;
+  id: Id;
   /** 代码块是否可编辑 */
   editable: boolean;
-  /** 代码编辑面板的展示模式 */
-  mode: CodeEditorMode;
   /** list模式下左侧展示的代码列表 */
   combineIds: string[];
   /** 为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除） */
-  undeletableList: string[];
+  undeletableList: Id[];
+  /** 代码块和组件的绑定关系 */
+  relations: CodeRelation;
 };
 
-export type CodeRelation = {
-  /** 组件id:['created'] */
-  [compId: string | number]: string[];
+export type HookData = {
+  /** 代码块id */
+  codeId: Id;
+  /** 参数 */
+  params?: object;
 };
 
-export enum CodeEditorMode {
-  /** 左侧菜单，右侧代码 */
-  LIST = 'list',
-  /** 全屏代码 */
-  EDITOR = 'editor',
-}
+export type CodeRelation = {
+  [codeId: Id]: {
+    /** 组件id:['created'] */
+    [compId: Id]: string[];
+  };
+};
 
-export interface CodeDslList {
+export interface CodeDslItem {
   /** 代码块id */
-  id: string;
+  id: Id;
   /** 代码块名称 */
   name: string;
   /** 代码块函数内容 */
   codeBlockContent?: CodeBlockContent;
   /** 是否展示代码绑定关系 */
   showRelation?: boolean;
+  /** 代码块对应绑定的组件信息 */
+  combineInfo?: CombineInfo[];
 }
 
-export interface ListState {
-  /** 代码块列表 */
-  codeList: CodeDslList[];
+export interface CombineInfo {
+  /** 组件id */
+  compId: Id;
+  /** 组件名称 */
+  compName: string;
 }
 
-export interface ListRelationState extends ListState {
-  /** 与代码块绑定的组件id信息 */
-  bindComps: {
-    /** 代码块id : 组件信息 */
-    [id: string]: MNode[];
-  };
+export interface ListState {
+  /** 代码块列表 */
+  codeList: CodeDslItem[];
 }
 
 export enum CodeDeleteErrorType {
@@ -383,11 +389,26 @@ export enum CodeDeleteErrorType {
   BIND = 'bind',
 }
 
-export enum CodeSelectOp {
-  /** 增加 */
-  ADD = 'add',
-  /** 删除 */
-  DELETE = 'delete',
-  /** 单选修改 */
-  CHANGE = 'change',
+// 代码块草稿localStorage key
+export const CODE_DRAFT_STORAGE_KEY = 'magicCodeDraft';
+
+export interface CodeParamStatement {
+  /** 参数名称 */
+  name: string;
+  /** 参数类型 */
+  type?: string;
+  [key: string]: any;
+}
+
+export interface StepValue {
+  data: MPage;
+  modifiedNodeIds: Map<Id, Id>;
+  nodeId: Id;
+}
+
+export interface HistoryState {
+  pageId?: Id;
+  pageSteps: Record<Id, UndoRedo<StepValue>>;
+  canRedo: boolean;
+  canUndo: boolean;
 }

package/src/utils/config.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ * 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.

package/src/utils/editor.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ * 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.
@@ -16,13 +16,14 @@
  * limitations under the License.
  */
 
+import serialize from 'serialize-javascript';
+
 import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
 
 import { Layout } from '../type';
-
 export const COPY_STORAGE_KEY = '$MagicEditorCopyData';
 
 /**
@@ -109,10 +110,16 @@ const getMiddleTop = (node: MNode, parentNode: MNode, stage: StageCore | null) =
 
 export const getInitPositionStyle = (style: Record<string, any> = {}, layout: Layout) => {
   if (layout === Layout.ABSOLUTE) {
-    return {
+    const newStyle: Record<string, any> = {
       ...style,
       position: 'absolute',
     };
+
+    if (typeof newStyle.left === 'undefined' && typeof newStyle.right === 'undefined') {
+      newStyle.left = 0;
+    }
+
+    return newStyle;
   }
 
   if (layout === Layout.RELATIVE) {
@@ -237,3 +244,10 @@ export const fixNodePosition = (config: MNode, parent: MContainer, stage: StageC
     left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document),
   };
 };
+
+// 序列化配置
+export const serializeConfig = (config: any) =>
+  serialize(config, {
+    space: 2,
+    unsafe: true,
+  }).replace(/"(\w+)":\s/g, '$1: ');

package/src/utils/index.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ * 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.
@@ -21,3 +21,4 @@ export * from './props';
 export * from './logger';
 export * from './editor';
 export * from './stage';
+export * from './operator';

package/src/utils/logger.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ * 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.