@tmagic/editor 1.2.0-beta.9 → 1.2.0

package/types/type.d.ts

@@ -1,8 +1,8 @@
 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';
 import type { EditorService } from './services/editor';
@@ -11,6 +11,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 declare type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> | MNode;
 export declare type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
 export interface InstallOptions {
@@ -32,11 +33,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 {
     root: MApp | null;
@@ -128,18 +130,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);
@@ -147,8 +148,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[];
 }
 export interface MenuComponent {
@@ -163,16 +164,22 @@ export interface MenuComponent {
     /** 是否显示，默认为true */
     className?: string;
     display?: boolean | ((data?: Services) => Promise<boolean> | boolean);
+    [key: string]: any;
 }
 /**
  * '/': 分隔符
  * '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 declare type MenuItem = '/' | 'delete' | 'undo' | 'redo' | 'zoom' | 'zoom-in' | 'zoom-out' | 'guides' | 'rule' | MenuButton | MenuComponent | string;
+export declare type MenuItem = '/' | 'delete' | 'undo' | 'redo' | 'zoom' | 'zoom-in' | 'zoom-out' | 'guides' | 'rule' | 'scale-to-original' | 'scale-to-fit' | MenuButton | MenuComponent | string;
 /** 工具栏 */
 export interface MenuBarData {
     /** 顶部工具栏左边项 */
@@ -185,12 +192,13 @@ 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 declare type SideItem = 'component-list' | 'layer' | 'code-block' | SideComponent;
 /** 工具栏 */
@@ -207,8 +215,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;
     };
@@ -245,26 +254,13 @@ export interface ScrollViewerEvent {
     scrollHeight: number;
     scrollWidth: number;
 }
-export interface CodeBlockDSL {
-    [id: string]: CodeBlockContent;
-}
-export interface CodeBlockContent {
-    /** 代码块名称 */
-    name: string;
-    /** 代码块内容 */
-    content: string;
-    /** 代码块与组件的绑定关系 */
-    comps?: CodeRelation;
-    /** 扩展字段 */
-    [propName: string]: any;
-}
 export declare type CodeState = {
     /** 是否展示代码块编辑区 */
     isShowCodeEditor: boolean;
     /** 代码块DSL数据源 */
     codeDsl: CodeBlockDSL | null;
     /** 当前选中的代码块id */
-    id: string;
+    id: Id;
     /** 代码块是否可编辑 */
     editable: boolean;
     /** 代码编辑面板的展示模式 */
@@ -272,11 +268,21 @@ export declare type CodeState = {
     /** list模式下左侧展示的代码列表 */
     combineIds: string[];
     /** 为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除） */
-    undeletableList: string[];
+    undeletableList: Id[];
+    /** 代码块和组件的绑定关系 */
+    relations: CodeRelation;
+};
+export declare type HookData = {
+    /** 代码块id */
+    codeId: Id;
+    /** 参数 */
+    params?: object;
 };
 export declare type CodeRelation = {
-    /** 组件id:['created'] */
-    [compId: string | number]: string[];
+    [codeId: Id]: {
+        /** 组件id:['created'] */
+        [compId: Id]: string[];
+    };
 };
 export declare enum CodeEditorMode {
     /** 左侧菜单，右侧代码 */
@@ -284,26 +290,27 @@ export declare 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 CombineInfo {
+    /** 组件id */
+    compId: Id;
+    /** 组件名称 */
+    compName: string;
 }
 export interface ListState {
     /** 代码块列表 */
-    codeList: CodeDslList[];
-}
-export interface ListRelationState extends ListState {
-    /** 与代码块绑定的组件id信息 */
-    bindComps: {
-        /** 代码块id : 组件信息 */
-        [id: string]: MNode[];
-    };
+    codeList: CodeDslItem[];
 }
 export declare enum CodeDeleteErrorType {
     /** 代码块存在于不可删除列表中 */
@@ -311,11 +318,21 @@ export declare enum CodeDeleteErrorType {
     /** 代码块存在绑定关系 */
     BIND = "bind"
 }
-export declare enum CodeSelectOp {
-    /** 增加 */
-    ADD = "add",
-    /** 删除 */
-    DELETE = "delete",
-    /** 单选修改 */
-    CHANGE = "change"
+export declare 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/types/utils/editor.d.ts

@@ -45,3 +45,4 @@ export declare const fixNodeLeft: (config: MNode, parent: MContainer, doc?: Docu
 export declare const fixNodePosition: (config: MNode, parent: MContainer, stage: StageCore | null) => {
     [key: string]: any;
 } | undefined;
+export declare const serializeConfig: (config: any) => string;

package/types/utils/index.d.ts

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

package/types/utils/props.d.ts

@@ -41,8 +41,8 @@ export declare const fillConfig: (config?: FormConfig) => {
         items: {
             name: string;
             text: string;
-            type: string;
             labelWidth: string;
+            type: string;
         }[];
         labelWidth?: undefined;
     })[];

package/types/utils/scroll-viewer.d.ts

@@ -4,6 +4,10 @@ interface ScrollViewerOptions {
     container: HTMLDivElement;
     target: HTMLDivElement;
     zoom: number;
+    correctionScrollSize?: {
+        width: number;
+        height: number;
+    };
 }
 export declare class ScrollViewer extends EventEmitter {
     private container;
@@ -17,6 +21,7 @@ export declare class ScrollViewer extends EventEmitter {
     private height;
     private translateXCorrectionValue;
     private translateYCorrectionValue;
+    private correctionScrollSize;
     private resizeObserver;
     constructor(options: ScrollViewerOptions);
     destroy(): void;