@tmagic/editor 1.1.0-beta.7 → 1.1.0

package/types/services/props.d.ts

@@ -1,16 +1,47 @@
 import type { FormConfig } from '@tmagic/form';
-import type { MNode, MPage } from '@tmagic/schema';
+import type { MNode } from '@tmagic/schema';
 import BaseService from './BaseService';
 declare class Props extends BaseService {
     private state;
     constructor();
     setPropsConfigs(configs: Record<string, FormConfig>): void;
+    fillConfig(config: FormConfig): Promise<{
+        type: string;
+        items: ({
+            title: string;
+            labelWidth: string;
+            items: (import("@tmagic/form").ChildConfig & {
+                [key: string]: any;
+            })[];
+        } | {
+            title: string;
+            items: {
+                type: string;
+                name: string;
+                items: ({
+                    name: string;
+                    label: string;
+                    type: string;
+                    options: (mForm: import("@tmagic/form").FormState, { formValue }: any) => {
+                        text: string;
+                        value: string;
+                    }[];
+                } | {
+                    name: string;
+                    label: string;
+                    type: string;
+                    options?: undefined;
+                })[];
+            }[];
+            labelWidth?: undefined;
+        })[];
+    }[]>;
     /**
      * 为指定类型组件设置组件属性表单配置
      * @param type 组件类型
      * @param config 组件属性表单配置
      */
-    setPropsConfig(type: string, config: FormConfig): void;
+    setPropsConfig(type: string, config: FormConfig): Promise<void>;
     /**
      * 获取指点类型的组件属性表单配置
      * @param type 组件类型
@@ -30,18 +61,12 @@ declare class Props extends BaseService {
      * @returns 组件初始值
      */
     getPropsValue(type: string, { inputEvent, ...defaultValue }?: Record<string, any>): Promise<any>;
-    /**
-     * 生成指定位数的GUID，无【-】格式
-     * @param digit 位数，默认值8
-     * @returns
-     */
-    guid(digit?: number): string;
     createId(type: string | number): Promise<string>;
     /**
      * 将组件与组件的子元素配置中的id都设置成一个新的ID
      * @param {Object} config 组件配置
      */
-    setNewItemId(config: MNode, parent?: MPage): Promise<MNode>;
+    setNewItemId(config: MNode): Promise<MNode>;
     /**
      * 获取默认属性配置
      * @param type 组件类型
@@ -60,6 +85,13 @@ declare class Props extends BaseService {
         layout?: undefined;
         items?: undefined;
     }>;
+    destroy(): void;
+    /**
+     * 生成指定位数的GUID，无【-】格式
+     * @param digit 位数，默认值8
+     * @returns
+     */
+    private guid;
 }
 export declare type PropsService = Props;
 declare const _default: Props;

package/types/services/storage.d.ts

@@ -49,6 +49,7 @@ export declare class WebStorage extends BaseService {
      * 设置存储项，支持storageService.usePlugin
      */
     setItem(key: string, value: any, options?: Options): Promise<void>;
+    destroy(): void;
     private getValueAndProtocol;
 }
 export declare type StorageService = WebStorage;

package/types/services/ui.d.ts

@@ -25,10 +25,12 @@ declare class Ui extends BaseService {
     constructor();
     set<T = any>(name: keyof UiState, value: T): void;
     get<T>(name: keyof typeof state): T;
+    initColumnWidth(): void;
     zoom(zoom: number): void;
+    calcZoom(): number;
+    destroy(): void;
     private setColumnWidth;
     private setStageRect;
-    private calcZoom;
 }
 export declare type UiService = Ui;
 declare const _default: Ui;

package/types/type.d.ts

@@ -2,7 +2,7 @@ import type { Component } from 'vue';
 import type { FormConfig } from '@tmagic/form';
 import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import type { MoveableOptions } from '@tmagic/stage';
+import type { ContainerHighlightType, MoveableOptions } from '@tmagic/stage';
 import type { ComponentListService } from './services/componentList';
 import type { EditorService } from './services/editor';
 import type { EventsService } from './services/events';
@@ -29,6 +29,7 @@ export interface StageOptions {
     autoScrollIntoView: boolean;
     containerHighlightClassName: string;
     containerHighlightDuration: number;
+    containerHighlightType: ContainerHighlightType;
     render: () => HTMLDivElement;
     moveableOptions: MoveableOptions | ((core?: StageCore) => MoveableOptions);
     canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
@@ -53,15 +54,20 @@ export interface PropsState {
 export interface ComponentGroupState {
     list: ComponentGroup[];
 }
+export declare enum ColumnLayout {
+    LEFT = "left",
+    CENTER = "center",
+    RIGHT = "right"
+}
 export interface SetColumnWidth {
-    left?: number;
-    center?: number | 'auto';
-    right?: number;
+    [ColumnLayout.LEFT]?: number;
+    [ColumnLayout.CENTER]?: number | 'auto';
+    [ColumnLayout.RIGHT]?: number;
 }
 export interface GetColumnWidth {
-    left: number;
-    center: number;
-    right: number;
+    [ColumnLayout.LEFT]: number;
+    [ColumnLayout.CENTER]: number;
+    [ColumnLayout.RIGHT]: number;
 }
 export interface StageRect {
     width: number;
@@ -138,6 +144,7 @@ export interface MenuButton {
     /** type为button/dropdown时点击运行的方法 */
     handler?: (data: Services, event: MouseEvent) => Promise<any> | any;
     /** type为dropdown时，下拉的菜单列表， 或者有子菜单时 */
+    className?: string;
     items?: MenuButton[];
 }
 export interface MenuComponent {
@@ -150,6 +157,7 @@ export interface MenuComponent {
     listeners?: Record<string, Function>;
     slots?: Record<string, any>;
     /** 是否显示，默认为true */
+    className?: string;
     display?: boolean | ((data?: Services) => Promise<boolean> | boolean);
 }
 /**
@@ -160,15 +168,15 @@ export interface MenuComponent {
  * 'zoom-in': 放大按钮
  * 'zoom-out': 缩小按钮
  */
-export declare type MenuItem = '/' | 'delete' | 'undo' | 'redo' | 'zoom' | 'zoom-in' | 'zoom-out' | 'guides' | 'rule' | MenuButton | MenuComponent;
+export declare type MenuItem = '/' | 'delete' | 'undo' | 'redo' | 'zoom' | 'zoom-in' | 'zoom-out' | 'guides' | 'rule' | MenuButton | MenuComponent | string;
 /** 工具栏 */
 export interface MenuBarData {
     /** 顶部工具栏左边项 */
-    left?: MenuItem[];
+    [ColumnLayout.LEFT]?: MenuItem[];
     /** 顶部工具栏中间项 */
-    center?: MenuItem[];
+    [ColumnLayout.CENTER]?: MenuItem[];
     /** 顶部工具栏右边项 */
-    right?: MenuItem[];
+    [ColumnLayout.RIGHT]?: MenuItem[];
 }
 export interface SideComponent extends MenuComponent {
     /** 显示文案 */
@@ -227,3 +235,9 @@ export declare enum Keys {
 }
 export declare const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
 export declare const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";
+export interface ScrollViewerEvent {
+    scrollLeft: number;
+    scrollTop: number;
+    scrollHeight: number;
+    scrollWidth: number;
+}

package/types/utils/editor.d.ts

@@ -33,7 +33,7 @@ export declare const generatePageNameByApp: (app: MApp) => string;
 export declare const isFixed: (node: MNode) => boolean;
 export declare const getNodeIndex: (node: MNode, parent: MContainer | MApp) => number;
 export declare const getRelativeStyle: (style?: Record<string, any>) => Record<string, any>;
-export declare const getInitPositionStyle: (style: Record<string, any> | undefined, layout: Layout, parentNode: MNode, stage: StageCore) => Record<string, any>;
+export declare const getInitPositionStyle: (style: Record<string, any> | undefined, layout: Layout) => Record<string, any>;
 export declare const setLayout: (node: MNode, layout: Layout) => MNode;
 export declare const change2Fixed: (node: MNode, root: MApp) => {
     left: number;
@@ -42,3 +42,6 @@ export declare const change2Fixed: (node: MNode, root: MApp) => {
 export declare const Fixed2Other: (node: MNode, root: MApp, getLayout: (parent: MNode, node?: MNode) => Promise<Layout>) => Promise<Record<string, any>>;
 export declare const getGuideLineFromCache: (key: string) => number[];
 export declare const fixNodeLeft: (config: MNode, parent: MContainer, doc?: Document) => any;
+export declare const fixNodePosition: (config: MNode, parent: MContainer, stage: StageCore | null) => {
+    [key: string]: any;
+} | undefined;

package/types/utils/index.d.ts

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

package/types/utils/operator.d.ts

@@ -1,5 +1,5 @@
 import { Id, MContainer, MNode } from '@tmagic/schema';
-import { AddMNode, Layout, PastePosition } from '../type';
+import { AddMNode, PastePosition } from '../type';
 /**
  * 粘贴前置操作：返回分配了新id以及校准了坐标的配置
  * @param position 粘贴的坐标
@@ -7,18 +7,6 @@ import { AddMNode, Layout, PastePosition } from '../type';
  * @returns
  */
 export declare const beforePaste: (position: PastePosition, config: MNode[]) => Promise<MNode[]>;
-/**
- * 新增元素前置操作，实现了在编辑器中新增元素节点，并返回新增元素信息以供stage更新
- * @param addNode 待添加元素的配置
- * @param parent 父级容器（可选）
- * @returns 新增的元素，父级元素，布局方式，是否为根页面
- */
-export declare const beforeAdd: (addNode: AddMNode, parent?: MContainer | null) => Promise<{
-    parentNode: MContainer;
-    newNode: MNode;
-    layout: Layout;
-    isPage: boolean;
-}>;
 /**
  * 将元素粘贴到容器内时，将相对于画布坐标转换为相对于容器的坐标
  * @param position PastePosition 粘贴时相对于画布的坐标
@@ -29,16 +17,5 @@ export declare const getPositionInContainer: (position: PastePosition | undefine
     left: number;
     top: number;
 };
-/**
- * 将新增元素事件通知到stage以更新渲染
- * @param parentNode 父元素
- * @param newNode 当前新增元素
- * @param layout 布局方式
- */
-export declare const notifyAddToStage: (parentNode: MContainer, newNode: MNode, layout: Layout) => Promise<void>;
-/**
- * 删除前置操作：实现了在编辑器中删除元素节点，并返回父级元素信息以供stage更新
- * @param node 待删除的节点
- * @returns 父级元素，root根元素
- */
-export declare const beforeRemove: (node: MNode) => Promise<MContainer | void>;
+export declare const getAddParent: (node: MNode) => MContainer | undefined;
+export declare const getDefaultConfig: (addNode: AddMNode, parentNode: MContainer) => Promise<any>;

package/types/utils/props.d.ts

@@ -35,4 +35,3 @@ export declare const fillConfig: (config?: FormConfig) => {
         labelWidth?: undefined;
     })[];
 }[];
-export declare const DEFAULT_CONFIG: FormConfig;

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

@@ -1,35 +1,33 @@
+/// <reference types="node" />
+import { EventEmitter } from 'events';
 interface ScrollViewerOptions {
     container: HTMLDivElement;
     target: HTMLDivElement;
     zoom: number;
 }
-export declare class ScrollViewer {
-    private enter;
-    private targetEnter;
-    private keydown;
+export declare class ScrollViewer extends EventEmitter {
     private container;
     private target;
     private zoom;
     private scrollLeft;
     private scrollTop;
-    private x;
-    private y;
+    private scrollHeight;
+    private scrollWidth;
+    private width;
+    private height;
+    private translateXCorrectionValue;
+    private translateYCorrectionValue;
     private resizeObserver;
     constructor(options: ScrollViewerOptions);
     destroy(): void;
     setZoom(zoom: number): void;
-    private scroll;
-    private removeHandler;
+    scrollTo({ left, top }: {
+        left?: number;
+        top?: number;
+    }): void;
     private wheelHandler;
-    private mouseEnterHandler;
-    private mouseLeaveHandler;
-    private targetMouseEnterHandler;
-    private targetMouseLeaveHandler;
-    private mousedownHandler;
-    private mouseupHandler;
-    private mousemoveHandler;
-    private keydownHandler;
-    private keyupHandler;
-    private setScrollOffset;
+    private getPos;
+    private setScrollSize;
+    private setSize;
 }
 export {};

package/types/utils/stage.d.ts

@@ -0,0 +1,3 @@
+import StageCore from '@tmagic/stage';
+import { StageOptions } from '../type';
+export declare const useStage: (stageOptions: StageOptions) => StageCore;