@tmagic/editor 1.0.0-beta.1 → 1.0.0-beta.12

package/dist/types/src/Editor.vue.d.ts

@@ -3,7 +3,7 @@ import type { FormConfig } from '@tmagic/form';
 import type { MApp, MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import type { MoveableOptions } from '@tmagic/stage';
-import type { ComponentGroup, MenuBarData, Services, SideBarData } from './type';
+import type { ComponentGroup, MenuBarData, Services, SideBarData, StageRect } from './type';
 declare const _default: DefineComponent<{
     /** 页面初始值 */
     modelValue: {
@@ -60,8 +60,8 @@ declare const _default: DefineComponent<{
     canSelect: {
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
     };
-    stageStyle: {
-        type: PropType<Record<string, string | number>>;
+    stageRect: {
+        type: PropType<StageRect>;
     };
 }, Services, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("props-panel-mounted" | "update:modelValue")[], "props-panel-mounted" | "update:modelValue", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     /** 页面初始值 */
@@ -119,8 +119,8 @@ declare const _default: DefineComponent<{
     canSelect: {
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
     };
-    stageStyle: {
-        type: PropType<Record<string, string | number>>;
+    stageRect: {
+        type: PropType<StageRect>;
     };
 }>> & {
     "onProps-panel-mounted"?: ((...args: any[]) => any) | undefined;

package/dist/types/src/components/ScrollViewer.vue.d.ts

@@ -0,0 +1,23 @@
+import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+declare const _default: DefineComponent<{
+    width: NumberConstructor;
+    height: NumberConstructor;
+    zoom: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    container: Ref<HTMLDivElement | undefined>;
+    el: Ref<HTMLDivElement | undefined>;
+    style: ComputedRef<string>;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    width: NumberConstructor;
+    height: NumberConstructor;
+    zoom: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    zoom: number;
+}>;
+export default _default;

package/dist/types/src/layouts/CodeEditor.vue.d.ts

@@ -1,4 +1,5 @@
 import type { DefineComponent, Ref, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+import * as monaco from 'monaco-editor';
 declare const _default: DefineComponent<{
     initValues: {
         type: (StringConstructor | ObjectConstructor)[];
@@ -18,10 +19,10 @@ declare const _default: DefineComponent<{
     values: Ref<string>;
     loading: Ref<boolean>;
     codeEditor: Ref<HTMLDivElement | undefined>;
-    getEditor(): any;
-    setEditorValue: (v: any, m: any) => any;
+    getEditor(): monaco.editor.IStandaloneCodeEditor | monaco.editor.IStandaloneDiffEditor | null;
+    setEditorValue: (v: string | any, m: string | any) => void | undefined;
     focus(): void;
-}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("inited" | "save")[], "save" | "inited", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("initd" | "save")[], "save" | "initd", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     initValues: {
         type: (StringConstructor | ObjectConstructor)[];
     };
@@ -37,7 +38,7 @@ declare const _default: DefineComponent<{
         default: () => string;
     };
 }>> & {
-    onInited?: ((...args: any[]) => any) | undefined;
+    onInitd?: ((...args: any[]) => any) | undefined;
     onSave?: ((...args: any[]) => any) | undefined;
 }, {
     type: string;

package/dist/types/src/layouts/NavMenu.vue.d.ts

@@ -1,5 +1,5 @@
 import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
-import { MenuBarData } from '../type';
+import { GetColumnWidth, MenuBarData } from '../type';
 declare const _default: DefineComponent<{
     data: {
         type: PropType<MenuBarData>;
@@ -10,6 +10,7 @@ declare const _default: DefineComponent<{
     };
 }, {
     keys: ComputedRef<(keyof MenuBarData)[]>;
+    columnWidth: ComputedRef<GetColumnWidth | undefined>;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     data: {
         type: PropType<MenuBarData>;

package/dist/types/src/layouts/sidebar/ComponentListPanel.vue.d.ts

@@ -7,6 +7,6 @@ declare const _default: DefineComponent<{}, {
         items: ComponentItem[];
         title: string;
     }[] | undefined>;
-    appendComponent({ text, type, ...config }: ComponentItem): void;
+    appendComponent({ text, type, data }: ComponentItem): void;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/types/src/layouts/sidebar/LayerPanel.vue.d.ts

@@ -2,10 +2,14 @@ import type { Translator } from 'element-plus';
 import type { Nullable } from 'element-plus/es/utils';
 import type { default } from 'element-plus/es/components/tree/src/model/node';
 import type { TreeOptionProps, TreeKey, LoadFunction, FilterNodeMethodFunction, TreeNodeData, FakeNode, TreeNodeLoadedDefaultProps, TreeData } from 'element-plus/es/components/tree/src/tree.type';
+import type { DebouncedFunc } from 'lodash';
 import type { DefineComponent, ComputedRef, ComponentInternalInstance, ExtractPropTypes, PropType, Component, ComputedOptions, MethodOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, Slot, ComponentPublicInstance, ComponentOptionsBase, ComponentOptionsMixin, DebuggerEvent, nextTick, WatchOptions, WatchStopHandle, ShallowUnwrapRef, ComponentCustomProperties, EmitsOptions, Ref } from 'vue';
-import type { MNode } from '@tmagic/schema';
+import type { Id, MNode } from '@tmagic/schema';
 declare const _default: DefineComponent<{}, {
     clickHandler(data: MNode): void;
+    highlightHandler: DebouncedFunc<(data: MNode) => void>;
+    toogleClickFlag: () => void;
+    canHighlight: ComputedRef<boolean>;
     menuStyle: Ref<{
         position: string;
         left: string;
@@ -16,10 +20,13 @@ declare const _default: DefineComponent<{}, {
     filterText: Ref<string>;
     filterNode: (value: string, data: MNode) => boolean;
     filterTextChangeHandler(val: string): void;
-    values: ComputedRef<MNode[]>;
-    loadItems: (node: any, resolve: Function) => any;
     allowDrop: (draggingNode: any, dropNode: any, type: string) => boolean;
     handleDragEnd(): void;
+    values: ComputedRef<MNode[]>;
+    loadItems: (node: any, resolve: Function) => any;
+    highlightNode: Ref<MNode | undefined>;
+    clickNode: Ref<MNode | undefined>;
+    expandedKeys: ComputedRef<Id[]>;
     tree: Ref<({
         $: ComponentInternalInstance;
         $data: {};

package/dist/types/src/layouts/workspace/PageBar.vue.d.ts

@@ -1,11 +1,16 @@
-import type { DefineComponent, ComputedRef, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
-import type { MNode, MPage } from '@tmagic/schema';
+import type { DefineComponent, Ref, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, ComputedRef } from 'vue';
+import type { MNode, MApp,  MPage } from '@tmagic/schema';
 declare const _default: DefineComponent<{}, {
-    root: ComputedRef<MNode | undefined>;
+    root: ComputedRef<MApp | undefined>;
     page: ComputedRef<MNode | undefined>;
     switchPage(page: MPage): void;
     addPage(): void;
     copy(node: MPage): void;
     remove(node: MPage): void;
+    pageBar: Ref<HTMLDivElement | undefined>;
+    itemsContainer: Ref<HTMLDivElement | undefined>;
+    canScroll: Ref<boolean>;
+    itemsContainerWidth: ComputedRef<number>;
+    scroll: (type: "left" | "right" | "start" | "end") => void;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/types/src/layouts/workspace/Stage.vue.d.ts

@@ -1,27 +1,12 @@
 import type { DefineComponent, Ref, ComponentInternalInstance, ExtractPropTypes, VNodeProps, AllowedComponentProps, ComponentCustomProps, Slot, ComponentPublicInstance, ComponentOptionsBase, ComputedRef, ComponentOptionsMixin, EmitsOptions, DebuggerEvent, nextTick, WatchOptions, WatchStopHandle, ShallowUnwrapRef, ComponentCustomProperties, PropType } from 'vue';
-import type { MApp, MNode, MPage } from '@tmagic/schema';
 import type { MoveableOptions } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
+import type { StageRect } from '../../type';
 declare const _default: DefineComponent<{
     render: {
         type: PropType<() => HTMLDivElement>;
     };
     runtimeUrl: StringConstructor;
-    root: {
-        type: PropType<MApp>;
-    };
-    page: {
-        type: PropType<MPage>;
-    };
-    node: {
-        type: PropType<MNode>;
-    };
-    uiSelectMode: {
-        type: BooleanConstructor;
-    };
-    zoom: {
-        type: NumberConstructor;
-    };
     canSelect: {
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
         default: (el: HTMLElement) => boolean;
@@ -33,7 +18,6 @@ declare const _default: DefineComponent<{
         };
     };
 }, {
-    stageContainer: Ref<HTMLDivElement | undefined>;
     menu: Ref<({
         $: ComponentInternalInstance;
         $data: {};
@@ -108,29 +92,85 @@ declare const _default: DefineComponent<{
         top: string;
     }>;
     contextmenuHandler(e: MouseEvent): void;
-    stageStyle: ComputedRef<{
-        transform: string;
-    }>;
-}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("select" | "update" | "sort")[], "sort" | "select" | "update", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    stageWrap: Ref<({
+        $: ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            zoom: number;
+        }> & Omit<Readonly<ExtractPropTypes<{
+            width: NumberConstructor;
+            height: NumberConstructor;
+            zoom: {
+                type: NumberConstructor;
+                default: number;
+            };
+        }>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, "zoom">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: Slot | undefined;
+        }>;
+        $root: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: ComponentOptionsBase<Readonly<ExtractPropTypes<{
+            width: NumberConstructor;
+            height: NumberConstructor;
+            zoom: {
+                type: NumberConstructor;
+                default: number;
+            };
+        }>>, {
+            container: Ref<HTMLDivElement | undefined>;
+            el: Ref<HTMLDivElement | undefined>;
+            style: ComputedRef<string>;
+        }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, {
+            zoom: number;
+        }> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch(source: string | Function, cb: Function, options?: WatchOptions<boolean> | undefined): WatchStopHandle;
+    } & Readonly<ExtractPropTypes<{
+        width: NumberConstructor;
+        height: NumberConstructor;
+        zoom: {
+            type: NumberConstructor;
+            default: number;
+        };
+    }>> & ShallowUnwrapRef<{
+        container: Ref<HTMLDivElement | undefined>;
+        el: Ref<HTMLDivElement | undefined>;
+        style: ComputedRef<string>;
+    }> & {} & {} & ComponentCustomProperties) | undefined>;
+    stageContainer: Ref<HTMLDivElement | undefined>;
+    stageRect: ComputedRef<StageRect | undefined>;
+    zoom: ComputedRef<number | undefined>;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     render: {
         type: PropType<() => HTMLDivElement>;
     };
     runtimeUrl: StringConstructor;
-    root: {
-        type: PropType<MApp>;
-    };
-    page: {
-        type: PropType<MPage>;
-    };
-    node: {
-        type: PropType<MNode>;
-    };
-    uiSelectMode: {
-        type: BooleanConstructor;
-    };
-    zoom: {
-        type: NumberConstructor;
-    };
     canSelect: {
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
         default: (el: HTMLElement) => boolean;
@@ -141,12 +181,7 @@ declare const _default: DefineComponent<{
             container: HTMLElement | null | undefined;
         };
     };
-}>> & {
-    onSelect?: ((...args: any[]) => any) | undefined;
-    onUpdate?: ((...args: any[]) => any) | undefined;
-    onSort?: ((...args: any[]) => any) | undefined;
-}, {
-    uiSelectMode: boolean;
+}>>, {
     canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
     moveableOptions: MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions);
 }>;

package/dist/types/src/layouts/workspace/Workspace.vue.d.ts

@@ -1,6 +1,6 @@
-import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
-import type { MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
-import type { MoveableOptions, SortEventData } from '@tmagic/stage';
+import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+import type { MPage } from '@tmagic/schema';
+import type { MoveableOptions } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
 declare const _default: DefineComponent<{
     runtimeUrl: StringConstructor;
@@ -14,14 +14,8 @@ declare const _default: DefineComponent<{
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
     };
 }, {
-    uiSelectMode: ComputedRef<boolean | undefined>;
-    root: ComputedRef<MApp | undefined>;
+    workspace: Ref<HTMLDivElement | undefined>;
     page: ComputedRef<MPage | undefined>;
-    zoom: ComputedRef<number | undefined>;
-    node: ComputedRef<MNode | undefined>;
-    selectHandler(el: HTMLElement): void;
-    updateNodeHandler(node: MComponent | MContainer | MPage): void;
-    sortNodeHandler(ev: SortEventData): void;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     runtimeUrl: StringConstructor;
     render: {

package/dist/types/src/services/BaseService.d.ts

@@ -50,7 +50,10 @@ import { EventEmitter } from 'events';
 export default class extends EventEmitter {
     private pluginOptionsList;
     private middleware;
-    constructor(methods: string[]);
+    private taskList;
+    private doingTask;
+    constructor(methods?: string[], serialMethods?: string[]);
     use(options: Record<string, Function>): void;
     usePlugin(options: Record<string, Function>): void;
+    private doTask;
 }

package/dist/types/src/services/editor.d.ts

@@ -9,7 +9,7 @@ declare class Editor extends BaseService {
     constructor();
     /**
      * 设置当前指点节点配置
-     * @param name 'root' | 'page' | 'parent' | 'node'
+     * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode'
      * @param value MNode
      * @returns MNode
      */
@@ -43,11 +43,17 @@ declare class Editor extends BaseService {
      */
     getLayout(node: MNode): Promise<Layout>;
     /**
-     * 选中指点节点（将指点节点设置成当前选中状态）
-     * @param config 指点节点配置或者ID
+     * 选中指定节点（将指定节点设置成当前选中状态）
+     * @param config 指定节点配置或者ID
      * @returns 当前选中的节点配置
      */
-    select(config: MNode | Id): Promise<MNode>;
+    select(config: MNode | Id): Promise<MNode> | never;
+    /**
+     * 高亮指定节点
+     * @param config 指定节点配置或者ID
+     * @returns 当前高亮的节点配置
+     */
+    highlight(config: MNode | Id): void;
     /**
      * 向指点容器添加组件节点
      * @param addConfig 将要添加的组件节点配置
@@ -116,6 +122,7 @@ declare class Editor extends BaseService {
     private pushHistoryState;
     private changeHistoryState;
     private toggleFixedPosition;
+    private selectedConfigExceptionHandler;
 }
 export declare type EditorService = Editor;
 declare const _default: Editor;

package/dist/types/src/services/props.d.ts

@@ -29,7 +29,7 @@ declare class Props extends BaseService {
      * @param type 组件类型
      * @returns 组件初始值
      */
-    getPropsValue(type: string): Promise<MComponent>;
+    getPropsValue(type: string, defaultValue?: {}): Promise<MComponent>;
 }
 export declare type PropsService = Props;
 declare const _default: Props;

package/dist/types/src/services/ui.d.ts

@@ -1,11 +1,16 @@
-import { UiState } from '../type';
+import type { UiState } from '../type';
 import BaseService from './BaseService';
 declare const state: {
     uiSelectMode: boolean;
     showSrc: boolean;
     zoom: number;
-    stageStyle: {
-        [x: string]: string | number;
+    stageContainerRect: {
+        width: number;
+        height: number;
+    };
+    stageRect: {
+        width: number;
+        height: number;
     };
     columnWidth: {
         left: number;
@@ -20,6 +25,8 @@ declare class Ui extends BaseService {
     set<T = any>(name: keyof UiState, value: T): void;
     get<T>(name: keyof typeof state): T;
     private setColumnWidth;
+    private setStageRect;
+    private calcZoom;
 }
 export declare type UiService = Ui;
 declare const _default: Ui;

package/dist/types/src/type.d.ts

@@ -1,7 +1,7 @@
-import { Component } from 'vue';
-import { FormConfig } from '@tmagic/form';
-import { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
-import StageCore from '@tmagic/stage';
+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 { ComponentListService } from './services/componentList';
 import type { EditorService } from './services/editor';
 import type { EventsService } from './services/events';
@@ -26,6 +26,7 @@ export interface StoreState {
     page: MPage | null;
     parent: MContainer | null;
     node: MNode | null;
+    highlightNode: MNode | null;
     stage: StageCore | null;
     modifiedNodeIds: Map<Id, Id>;
 }
@@ -46,6 +47,10 @@ export interface GetColumnWidth {
     center: number;
     right: number;
 }
+export interface StageRect {
+    width: number;
+    height: number;
+}
 export interface UiState {
     /** 当前点击画布是否触发选中，true: 不触发，false: 触发，默认为false */
     uiSelectMode: boolean;
@@ -53,8 +58,10 @@ export interface UiState {
     showSrc: boolean;
     /** 画布显示放大倍数，默认为 1 */
     zoom: number;
-    /** 画布顶层div的样式，可用于改变画布的大小 */
-    stageStyle: Record<string, string | number>;
+    /** 画布容器的宽高 */
+    stageContainerRect: StageRect;
+    /** 画布顶层div的宽高，可用于改变画布的大小 */
+    stageRect: StageRect;
     /** 编辑器列布局每一列的宽度，分为左中右三列 */
     columnWidth: GetColumnWidth;
     /** 是否显示画布参考线，true: 显示，false: 不显示，默认为true */
@@ -162,7 +169,9 @@ export interface ComponentItem {
     type: string;
     /** element-plus icon class */
     icon?: string | Component;
-    [key: string]: any;
+    data?: {
+        [key: string]: any;
+    };
 }
 export interface ComponentGroup {
     /** 显示文案 */
@@ -170,6 +179,10 @@ export interface ComponentGroup {
     /** 组内列表 */
     items: ComponentItem[];
 }
+export interface UpdateData {
+    id: Id;
+    [key: string]: any;
+}
 export declare enum LayerOffset {
     TOP = "top",
     BOTTOM = "bottom"
@@ -181,3 +194,6 @@ export declare enum Layout {
     RELATIVE = "relative",
     ABSOLUTE = "absolute"
 }
+export declare enum Keys {
+    ESCAPE = "Space"
+}

package/dist/types/src/utils/editor.d.ts

@@ -1,4 +1,5 @@
-import { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type StageCore from '@tmagic/stage';
 import { Layout } from '../type';
 export declare const COPY_STORAGE_KEY = "$MagicEditorCopyData";
 export declare const generateId: (type: string | number) => string;
@@ -38,8 +39,7 @@ export declare const setNewItemId: (config: MNode, parent?: MPage | undefined) =
 export declare const isFixed: (node: MNode) => boolean;
 export declare const getNodeIndex: (node: MNode, parent: MContainer) => number;
 export declare const toRelative: (node: MNode) => MNode;
-export declare const initPosition: (node: MNode, layout: Layout) => MNode;
+export declare const initPosition: (node: MNode, layout: Layout, parentNode: MNode, stage: StageCore) => MNode;
 export declare const setLayout: (node: MNode, layout: Layout) => MNode;
 export declare const change2Fixed: (node: MNode, root: MApp) => MNode;
 export declare const Fixed2Other: (node: MNode, root: MApp, getLayout: (node: MNode) => Promise<Layout>) => Promise<MNode>;
-export declare const defaults: (object: any, source: any) => any;

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

@@ -0,0 +1,35 @@
+interface ScrollViewerOptions {
+    container: HTMLDivElement;
+    target: HTMLDivElement;
+    zoom: number;
+}
+export declare class ScrollViewer {
+    private enter;
+    private targetEnter;
+    private keydown;
+    private container;
+    private target;
+    private zoom;
+    private scrollLeft;
+    private scrollTop;
+    private x;
+    private y;
+    private resizeObserver;
+    constructor(options: ScrollViewerOptions);
+    destroy(): void;
+    setZoom(zoom: number): void;
+    private scroll;
+    private removeHandler;
+    private wheelHandler;
+    private mouseEnterHandler;
+    private mouseLeaveHandler;
+    private targetMouseEnterHandler;
+    private targetMouseLeaveHandler;
+    private mousedownHandler;
+    private mouseupHandler;
+    private mousemoveHandler;
+    private keydownHandler;
+    private keyupHandler;
+    private setScrollOffset;
+}
+export {};

package/package.json

@@ -1,14 +1,15 @@
 {
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.12",
   "name": "@tmagic/editor",
-  "main": "dist/magic-editor.umd.js",
-  "module": "dist/magic-editor.es.js",
+  "sideEffects": false,
+  "main": "dist/tmagic-editor.umd.js",
+  "module": "dist/tmagic-editor.es.js",
   "style": "dist/style.css",
   "types": "dist/types/src/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/magic-editor.es.js",
-      "require": "./dist/magic-editor.umd.js"
+      "import": "./dist/tmagic-editor.es.js",
+      "require": "./dist/tmagic-editor.umd.js"
     },
     "./dist/style.css": {
       "import": "./dist/style.css",
@@ -25,17 +26,28 @@
     "type": "git",
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
+  "homepage": "https://tencent.github.io/tmagic-editor/docs/",
+  "keywords": [
+    "editor",
+    "drag",
+    "resize",
+    "vue",
+    "vue3",
+    "typescript"
+  ],
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "^1.0.0-beta.1",
-    "@tmagic/form": "^1.0.0-beta.1",
-    "@tmagic/schema": "^1.0.0-beta.1",
-    "@tmagic/stage": "^1.0.0-beta.1",
-    "@tmagic/utils": "^1.0.0-beta.1",
+    "@tmagic/core": "^1.0.0-beta.12",
+    "@tmagic/form": "^1.0.0-beta.12",
+    "@tmagic/schema": "^1.0.0-beta.12",
+    "@tmagic/stage": "^1.0.0-beta.12",
+    "@tmagic/utils": "^1.0.0-beta.12",
     "color": "^3.1.3",
-    "element-plus": "^2.0.2",
+    "element-plus": "^2.1.7",
     "events": "^3.3.0",
+    "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",
+    "monaco-editor": "^0.32.1",
     "serialize-javascript": "^6.0.0",
     "vue": "^3.2.0"
   },
@@ -53,5 +65,6 @@
     "vite": "^2.3.7",
     "vite-plugin-dts": "^0.9.6",
     "vue-tsc": "^0.0.24"
-  }
+  },
+  "gitHead": "ae00dd242d593ac8f57ffcd34e10e99399c7d00b"
 }

package/src/Editor.vue

@@ -55,7 +55,7 @@ import eventsService from '@editor/services/events';
 import historyService from '@editor/services/history';
 import propsService from '@editor/services/props';
 import uiService from '@editor/services/ui';
-import type { ComponentGroup, MenuBarData, Services, SideBarData } from '@editor/type';
+import type { ComponentGroup, MenuBarData, Services, SideBarData, StageRect } from '@editor/type';
 
 export default defineComponent({
   name: 'm-editor',
@@ -133,8 +133,8 @@ export default defineComponent({
       type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
     },
 
-    stageStyle: {
-      type: [String, Object] as PropType<Record<string, string | number>>,
+    stageRect: {
+      type: [String, Object] as PropType<StageRect>,
     },
   },
 
@@ -208,8 +208,8 @@ export default defineComponent({
     );
 
     watch(
-      () => props.stageStyle,
-      (stageStyle) => uiService.set('stageStyle', stageStyle),
+      () => props.stageRect,
+      (stageRect) => stageRect && uiService.set('stageRect', stageRect),
       {
         immediate: true,
       },