@tmagic/editor 1.0.0-beta.2 → 1.0.0-beta.5

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/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 { DefineComponent, Ref, ComponentInternalInstance, ExtractPropTypes, VNodeProps, AllowedComponentProps, ComponentCustomProps, Slot, ComponentPublicInstance, ComponentOptionsBase, ComputedRef, ComponentOptionsMixin, EmitsOptions, DebuggerEvent, WatchOptions, WatchStopHandle, ShallowUnwrapRef, ComponentCustomProperties, nextTick,  PropType } from 'vue';
 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;
-    }>;
+    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, ("select" | "update" | "sort")[], "sort" | "select" | "update", 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;
@@ -146,7 +186,6 @@ declare const _default: DefineComponent<{
     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,5 +1,5 @@
 import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
-import type { MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { MComponent, MContainer, MPage } from '@tmagic/schema';
 import type { MoveableOptions, SortEventData } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
 declare const _default: DefineComponent<{
@@ -14,11 +14,7 @@ declare const _default: DefineComponent<{
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
     };
 }, {
-    uiSelectMode: ComputedRef<boolean | undefined>;
-    root: ComputedRef<MApp | 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;

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';
@@ -46,6 +46,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 +57,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 */
@@ -181,3 +187,6 @@ export declare enum Layout {
     RELATIVE = "relative",
     ABSOLUTE = "absolute"
 }
+export declare enum Keys {
+    ESCAPE = "Space"
+}

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

@@ -42,4 +42,3 @@ export declare const initPosition: (node: MNode, layout: Layout) => 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,6 +1,7 @@
 {
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.5",
   "name": "@tmagic/editor",
+  "sideEffects": false,
   "main": "dist/tmagic-editor.umd.js",
   "module": "dist/tmagic-editor.es.js",
   "style": "dist/style.css",
@@ -27,15 +28,16 @@
   },
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "^1.0.0-beta.2",
-    "@tmagic/form": "^1.0.0-beta.2",
-    "@tmagic/schema": "^1.0.0-beta.2",
-    "@tmagic/stage": "^1.0.0-beta.2",
-    "@tmagic/utils": "^1.0.0-beta.2",
+    "@tmagic/core": "^1.0.0-beta.5",
+    "@tmagic/form": "^1.0.0-beta.5",
+    "@tmagic/schema": "^1.0.0-beta.5",
+    "@tmagic/stage": "^1.0.0-beta.5",
+    "@tmagic/utils": "^1.0.0-beta.5",
     "color": "^3.1.3",
     "element-plus": "^2.0.2",
     "events": "^3.3.0",
     "lodash-es": "^4.17.21",
+    "monaco-editor": "^0.32.1",
     "serialize-javascript": "^6.0.0",
     "vue": "^3.2.0"
   },

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,
       },

package/src/components/ScrollViewer.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="m-editor-scroll-viewer-container" ref="container">
+    <div ref="el" :style="style">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+
+import { ScrollViewer } from '@editor/utils/scroll-viewer';
+
+export default defineComponent({
+  name: 'm-editor-scroll-viewer',
+
+  props: {
+    width: Number,
+    height: Number,
+    zoom: {
+      type: Number,
+      default: 1,
+    },
+  },
+
+  setup(props) {
+    const container = ref<HTMLDivElement>();
+    const el = ref<HTMLDivElement>();
+    let scrollViewer: ScrollViewer;
+
+    onMounted(() => {
+      if (!container.value || !el.value) return;
+      scrollViewer = new ScrollViewer({
+        container: container.value,
+        target: el.value,
+        zoom: props.zoom,
+      });
+    });
+
+    onUnmounted(() => {
+      scrollViewer.destroy();
+    });
+
+    watch(
+      () => props.zoom,
+      () => {
+        scrollViewer.setZoom(props.zoom);
+      },
+    );
+
+    return {
+      container,
+      el,
+
+      style: computed(
+        () => `
+        width: ${props.width}px;
+        height: ${props.height}px;
+        position: absolute;
+        margin-top: 30px;
+      `,
+      ),
+    };
+  },
+});
+</script>