@tmagic/editor 1.2.0-beta.2 → 1.2.0-beta.21

package/src/services/props.ts

@@ -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

@@ -97,8 +97,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/breadcrumb.scss

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

package/src/theme/code-block.scss

@@ -3,6 +3,9 @@
   .el-tree-node__content {
     height: auto;
   }
+  .el-tree-node__label {
+    width: 100%;
+  }
   .code-header-wrapper {
     display: flex;
     align-items: center;
@@ -32,9 +35,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 +48,8 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         padding: 10px 15px;
-        margin-right: 60px;
+        width: 0 !important;
+        flex: 1;
       }
     }
     .code-comp-map-wrapper {
@@ -74,20 +76,12 @@
 
 .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;
-    }
-  }
 }
+
+.el-dialog.is-fullscreen.code-editor-dialog {
+  overflow: hidden;
+}
+
 .code-editor-dialog {
   .el-dialog__body {
     height: 90%;
@@ -97,7 +91,7 @@
     height: 100%;
     background: #fff;
     .el-card__body {
-      height: calc(100% - 80px);
+      height: 100%;
       background: #fff;
     }
   }
@@ -109,6 +103,9 @@
     .side-tree {
       height: 100%;
       overflow: auto;
+      .el-tree-node__label {
+        width: 100%;
+      }
 
       .list-container {
         width: 100%;
@@ -134,6 +131,7 @@
     display: flex;
     align-items: center;
     font-size: 16px;
+    margin-bottom: 10px;
     .code-name-label {
       margin-right: 10px;
     }
@@ -166,18 +164,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,11 +1,11 @@
 .ui-component-panel {
   height: 100%;
   border-top: 0 !important;
-  margin-top: 50px;
+  margin-top: 48px;
   background-color: $--sidebar-content-background-color;
 
   .search-input {
-    background: #f8fbff;
+    background: #fff;
     color: #bbbbbb;
     padding: 10px;
     position: absolute;
@@ -15,11 +15,7 @@
     z-index: 1;
 
     .el-input__prefix {
-      padding: 10px;
-    }
-
-    .el-input__suffix {
-      padding: 10px 5px;
+      padding: 7px;
     }
   }
 

package/src/theme/layer-panel.scss

@@ -10,10 +10,15 @@
     left: 0;
     z-index: 1;
 
-    .el-input__suffix {
-      padding: 10px 5px;
+    .el-input__prefix {
+      padding: 7px;
     }
   }
+
+  .magic-editor-layer-tree {
+    padding-top: 48px;
+  }
+
   .node-content {
     flex: 1;
     display: flex;

package/src/theme/theme.scss

@@ -13,3 +13,4 @@
 @import "./icon.scss";
 @import "./code-block.scss";
 @import "./layout.scss";
+@import "./breadcrumb.scss";

package/src/type.ts

@@ -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,11 @@ export interface StageOptions {
   containerHighlightClassName: string;
   containerHighlightDuration: number;
   containerHighlightType: ContainerHighlightType;
-  render: () => HTMLDivElement;
-  moveableOptions: MoveableOptions | ((core?: StageCore) => MoveableOptions);
+  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 {
@@ -164,18 +170,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 +188,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 +205,7 @@ export interface MenuComponent {
   /** 是否显示，默认为true */
   className?: string;
   display?: boolean | ((data?: Services) => Promise<boolean> | boolean);
+  [key: string]: any;
 }
 
 /**
@@ -207,8 +213,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 +231,8 @@ export type MenuItem =
   | 'zoom-out'
   | 'guides'
   | 'rule'
+  | 'scale-to-original'
+  | 'scale-to-fit'
   | MenuButton
   | MenuComponent
   | string;
@@ -237,13 +250,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 +276,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,28 +323,13 @@ 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;
   /** 代码编辑面板的展示模式 */
@@ -337,12 +337,23 @@ export type CodeState = {
   /** list模式下左侧展示的代码列表 */
   combineIds: string[];
   /** 为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除） */
-  undeletableList: string[];
+  undeletableList: Id[];
+  /** 代码块和组件的绑定关系 */
+  relations: CodeRelation;
+};
+
+export type HookData = {
+  /** 代码块id */
+  codeId: Id;
+  /** 参数 */
+  params?: object;
 };
 
 export type CodeRelation = {
-  /** 组件id:['created'] */
-  [compId: string | number]: string[];
+  [codeId: Id]: {
+    /** 组件id:['created'] */
+    [compId: Id]: string[];
+  };
 };
 
 export enum CodeEditorMode {
@@ -352,28 +363,29 @@ export enum CodeEditorMode {
   EDITOR = 'editor',
 }
 
-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 +395,25 @@ 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;
+}
+
+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/editor.ts

@@ -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';
 
 /**
@@ -237,3 +238,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

@@ -21,3 +21,4 @@ export * from './props';
 export * from './logger';
 export * from './editor';
 export * from './stage';
+export * from './operator';

package/src/utils/props.ts

@@ -226,14 +226,14 @@ export const fillConfig = (config: FormConfig = []) => [
           {
             name: 'created',
             text: 'created',
-            type: 'code-select',
             labelWidth: '100px',
+            type: 'code-select',
           },
           {
             name: 'mounted',
             text: 'mounted',
-            type: 'code-select',
             labelWidth: '100px',
+            type: 'code-select',
           },
         ],
       },

package/src/utils/scroll-viewer.ts

@@ -4,6 +4,10 @@ interface ScrollViewerOptions {
   container: HTMLDivElement;
   target: HTMLDivElement;
   zoom: number;
+  correctionScrollSize?: {
+    width: number;
+    height: number;
+  };
 }
 
 export class ScrollViewer extends EventEmitter {
@@ -23,6 +27,11 @@ export class ScrollViewer extends EventEmitter {
   private translateXCorrectionValue = 0;
   private translateYCorrectionValue = 0;
 
+  private correctionScrollSize = {
+    width: 0,
+    height: 0,
+  };
+
   private resizeObserver = new ResizeObserver(() => {
     this.setSize();
     this.setScrollSize();
@@ -35,6 +44,13 @@ export class ScrollViewer extends EventEmitter {
     this.target = options.target;
     this.zoom = options.zoom;
 
+    if (this.correctionScrollSize) {
+      this.correctionScrollSize = {
+        ...this.correctionScrollSize,
+        ...options.correctionScrollSize,
+      };
+    }
+
     this.container.addEventListener('wheel', this.wheelHandler, false);
 
     this.setSize();
@@ -109,9 +125,9 @@ export class ScrollViewer extends EventEmitter {
 
   private setScrollSize = () => {
     const targetRect = this.target.getBoundingClientRect();
-    this.scrollWidth = targetRect.width * this.zoom + 100;
+    this.scrollWidth = targetRect.width * this.zoom + this.correctionScrollSize.width;
     const targetMarginTop = Number(this.target.style.marginTop) || 0;
-    this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + 100;
+    this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + this.correctionScrollSize.height;
 
     let left: number | undefined;
     let top: number | undefined;

package/src/utils/stage.ts

@@ -46,6 +46,7 @@ export const useStage = (stageOptions: StageOptions) => {
   ]);
 
   stage.on('select', (el: HTMLElement) => {
+    if (`${editorService.get('node')?.id}` === el.id && editorService.get('nodes').length === 1) return;
     editorService.select(el.id);
   });
 
@@ -53,7 +54,7 @@ export const useStage = (stageOptions: StageOptions) => {
     editorService.highlight(el.id);
   });
 
-  stage.on('multiSelect', (els: HTMLElement[]) => {
+  stage.on('multi-select', (els: HTMLElement[]) => {
     editorService.multiSelect(els.map((el) => el.id));
   });
 
@@ -72,7 +73,13 @@ export const useStage = (stageOptions: StageOptions) => {
     editorService.sort(ev.src, ev.dist);
   });
 
-  stage.on('changeGuides', (e) => {
+  stage.on('select-parent', () => {
+    const parent = editorService.get('parent');
+    editorService.select(parent);
+    editorService.get<StageCore>('stage').select(parent.id);
+  });
+
+  stage.on('change-guides', (e) => {
     uiService.set('showGuides', true);
 
     if (!root.value || !page.value) return;