@tmagic/editor 1.0.0-beta.1

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

@@ -0,0 +1,27 @@
+import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+import { SideBarData, SideComponent } from '../../type';
+declare const _default: DefineComponent<{
+    data: {
+        type: PropType<SideBarData>;
+        default: () => {
+            type: string;
+            status: string;
+            items: string[];
+        };
+    };
+}, {
+    activeTabName: Ref<string>;
+    items: ComputedRef<SideComponent[] | Record<string, any>[]>;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    data: {
+        type: PropType<SideBarData>;
+        default: () => {
+            type: string;
+            status: string;
+            items: string[];
+        };
+    };
+}>>, {
+    data: SideBarData;
+}>;
+export default _default;

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

@@ -0,0 +1,11 @@
+import type { DefineComponent, ComputedRef, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+import type { MNode, MPage } from '@tmagic/schema';
+declare const _default: DefineComponent<{}, {
+    root: ComputedRef<MNode | undefined>;
+    page: ComputedRef<MNode | undefined>;
+    switchPage(page: MPage): void;
+    addPage(): void;
+    copy(node: MPage): void;
+    remove(node: MPage): void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}>;
+export default _default;

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

@@ -0,0 +1,153 @@
+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';
+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;
+    };
+    moveableOptions: {
+        type: PropType<MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions)>;
+        default: () => (core?: StageCore | undefined) => {
+            container: HTMLElement | null | undefined;
+        };
+    };
+}, {
+    stageContainer: Ref<HTMLDivElement | undefined>;
+    menu: Ref<({
+        $: ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{}> & Omit<Readonly<ExtractPropTypes<{}>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>;
+        $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) | ((event: string, ...args: any[]) => void);
+        $el: any;
+        $options: ComponentOptionsBase<Readonly<ExtractPropTypes<{}>>, {
+            menu: Ref<HTMLDivElement | undefined>;
+            canPaste: Ref<boolean>;
+            canDelete: ComputedRef<boolean>;
+            canMoveZPos: ComputedRef<boolean>;
+            canCenter: Ref<boolean>;
+            center(): void;
+            copy(): void;
+            paste(): void;
+            remove(): void;
+            top(): void;
+            bottom(): void;
+            topItem(): void;
+            bottomItem(): void;
+            clearGuides(): void;
+        }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, {}> & {
+            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<{}>> & ShallowUnwrapRef<{
+        menu: Ref<HTMLDivElement | undefined>;
+        canPaste: Ref<boolean>;
+        canDelete: ComputedRef<boolean>;
+        canMoveZPos: ComputedRef<boolean>;
+        canCenter: Ref<boolean>;
+        center(): void;
+        copy(): void;
+        paste(): void;
+        remove(): void;
+        top(): void;
+        bottom(): void;
+        topItem(): void;
+        bottomItem(): void;
+        clearGuides(): void;
+    }> & {} & {} & ComponentCustomProperties) | undefined>;
+    menuStyle: Ref<{
+        display: string;
+        left: string;
+        top: string;
+    }>;
+    contextmenuHandler(e: MouseEvent): void;
+    stageStyle: ComputedRef<{
+        transform: string;
+    }>;
+}, 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;
+    };
+    moveableOptions: {
+        type: PropType<MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions)>;
+        default: () => (core?: StageCore | undefined) => {
+            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);
+}>;
+export default _default;

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

@@ -0,0 +1,18 @@
+import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+declare const _default: DefineComponent<{}, {
+    menu: Ref<HTMLDivElement | undefined>;
+    canPaste: Ref<boolean>;
+    canDelete: ComputedRef<boolean>;
+    canMoveZPos: ComputedRef<boolean>;
+    canCenter: Ref<boolean>;
+    center(): void;
+    copy(): void;
+    paste(): void;
+    remove(): void;
+    top(): void;
+    bottom(): void;
+    topItem(): void;
+    bottomItem(): void;
+    clearGuides(): void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}>;
+export default _default;

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

@@ -0,0 +1,37 @@
+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 StageCore from '@tmagic/stage';
+declare const _default: DefineComponent<{
+    runtimeUrl: StringConstructor;
+    render: {
+        type: PropType<() => HTMLDivElement>;
+    };
+    moveableOptions: {
+        type: PropType<MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions)>;
+    };
+    canSelect: {
+        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;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    runtimeUrl: StringConstructor;
+    render: {
+        type: PropType<() => HTMLDivElement>;
+    };
+    moveableOptions: {
+        type: PropType<MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions)>;
+    };
+    canSelect: {
+        type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
+    };
+}>>, {}>;
+export default _default;

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

@@ -0,0 +1,56 @@
+/// <reference types="node" />
+import { EventEmitter } from 'events';
+/**
+ * 提供两种方式对Class进行扩展
+ * 方法1：
+ * 给Class中的每个方法都添加before after两个钩子
+ * 给Class添加一个usePlugin方法，use方法可以传入一个包含before或者after方法的对象
+ *
+ * 例如：
+ *   Class EditorService extends BaseService {
+ *     constructor() {
+ *       super(['add']);
+ *     }
+ *     add(value) { return result; }
+ *   };
+ *
+ *   const editorService = new EditorService();
+ *
+ *   editorService.usePlugin({
+ *     beforeAdd(value) { return [value] },
+ *     afterAdd(value, result) {},
+ *   });
+ *
+ *   editorService.add(); 最终会变成  () => {
+ *    editorService.beforeAdd();
+ *    editorService.add();
+ *    editorService.afterAdd();
+ *   }
+ *
+ * 调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after最后一个参数则是原方法的return值;
+ * 如需终止后续方法调用可以return new Error();
+ *
+ * 方法2：
+ * 给Class中的每个方法都添加中间件
+ * 给Class添加一个use方法，use方法可以传入一个包含源对象方法名作为key值的对象
+ *
+ * 例如：
+ *   Class EditorService extends BaseService {
+ *     constructor() {
+ *       super(['add']);
+ *     }
+ *     add(value) { return result; }
+ *   };
+ *
+ *  const editorService = new EditorService();
+ *  editorService.use({
+ *    add(value, next) { console.log(value); next() },
+ *  });
+ */
+export default class extends EventEmitter {
+    private pluginOptionsList;
+    private middleware;
+    constructor(methods: string[]);
+    use(options: Record<string, Function>): void;
+    usePlugin(options: Record<string, Function>): void;
+}

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

@@ -0,0 +1,122 @@
+import type { Id, MContainer, MNode } from '@tmagic/schema';
+import { StepValue } from '../services/history';
+import type { AddMNode, EditorNodeInfo, StoreState } from '../type';
+import { LayerOffset, Layout } from '../type';
+import BaseService from './BaseService';
+declare class Editor extends BaseService {
+    private isHistoryStateChange;
+    private state;
+    constructor();
+    /**
+     * 设置当前指点节点配置
+     * @param name 'root' | 'page' | 'parent' | 'node'
+     * @param value MNode
+     * @returns MNode
+     */
+    set<T = MNode>(name: keyof StoreState, value: T): void;
+    /**
+     * 获取当前指点节点配置
+     * @param name  'root' | 'page' | 'parent' | 'node'
+     * @returns MNode
+     */
+    get<T = MNode>(name: keyof StoreState): T;
+    /**
+     * 根据id获取组件、组件的父组件以及组件所属的页面节点
+     * @param {number | string} id 组件id
+     * @returns {EditorNodeInfo}
+     */
+    getNodeInfo(id: Id): EditorNodeInfo;
+    /**
+     * 根据ID获取指点节点配置
+     * @param id 组件ID
+     * @returns 组件节点配置
+     */
+    getNodeById(id: Id): MNode | undefined;
+    /**
+     * 根据ID获取指点节点的父节点配置
+     * @param id 组件ID
+     * @returns 指点组件的父节点配置
+     */
+    getParentById(id: Id): MContainer | undefined;
+    /**
+     * 只有容器拥有布局
+     */
+    getLayout(node: MNode): Promise<Layout>;
+    /**
+     * 选中指点节点（将指点节点设置成当前选中状态）
+     * @param config 指点节点配置或者ID
+     * @returns 当前选中的节点配置
+     */
+    select(config: MNode | Id): Promise<MNode>;
+    /**
+     * 向指点容器添加组件节点
+     * @param addConfig 将要添加的组件节点配置
+     * @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
+     * @returns 添加后的节点
+     */
+    add({ type, ...config }: AddMNode, parent?: MContainer | null): Promise<MNode>;
+    /**
+     * 删除组件
+     * @param {Object} node
+     * @return {Object} 删除的组件配置
+     */
+    remove(node: MNode): Promise<MNode | void>;
+    /**
+     * 更新节点
+     * @param config 新的节点配置，配置中需要有id信息
+     * @returns 更新后的节点配置
+     */
+    update(config: MNode): Promise<MNode>;
+    /**
+     * 将id为id1的组件移动到id为id2的组件位置上，例如：[1,2,3,4] -> sort(1,3) -> [2,1,3,4]
+     * @param id1 组件ID
+     * @param id2 组件ID
+     * @returns void
+     */
+    sort(id1: Id, id2: Id): Promise<void>;
+    /**
+     * 将组将节点配置转化成string，然后存储到localStorage中
+     * @param config 组件节点配置
+     * @returns 组件节点配置
+     */
+    copy(config: MNode): Promise<void>;
+    /**
+     * 从localStorage中获取节点，然后添加到当前容器中
+     * @param position 如果设置，指定组件位置
+     * @returns 添加后的组件节点配置
+     */
+    paste(position?: {
+        left?: number;
+        top?: number;
+    }): Promise<MNode | void>;
+    /**
+     * 将指点节点设置居中
+     * @param config 组件节点配置
+     * @returns 当前组件节点配置
+     */
+    alignCenter(config: MNode): Promise<MNode | void>;
+    /**
+     * 移动当前选中节点位置
+     * @param offset 偏移量
+     */
+    moveLayer(offset: number | LayerOffset): Promise<void>;
+    /**
+     * 撤销当前操作
+     * @returns 上一次数据
+     */
+    undo(): Promise<StepValue | null>;
+    /**
+     * 恢复到下一步
+     * @returns 下一步数据
+     */
+    redo(): Promise<StepValue | null>;
+    destroy(): void;
+    resetModifiedNodeId(): void;
+    private addModifiedNodeId;
+    private pushHistoryState;
+    private changeHistoryState;
+    private toggleFixedPosition;
+}
+export declare type EditorService = Editor;
+declare const _default: Editor;
+export default _default;

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

@@ -0,0 +1,16 @@
+import { EventOption } from '@tmagic/core';
+import type { ComponentGroup } from '../type';
+import BaseService from './BaseService';
+declare class Events extends BaseService {
+    constructor();
+    init(componentGroupList: ComponentGroup[]): void;
+    setEvents(events: Record<string, EventOption[]>): void;
+    setEvent(type: string, events: EventOption[]): void;
+    getEvent(type: string): EventOption[];
+    setMethods(methods: Record<string, EventOption[]>): void;
+    setMethod(type: string, method: EventOption[]): void;
+    getMethod(type: string): EventOption[];
+}
+export declare type EventsService = Events;
+declare const _default: Events;
+export default _default;

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

@@ -0,0 +1,51 @@
+import { Id, MPage } from '@tmagic/schema';
+import { UndoRedo } from '../utils/undo-redo';
+import BaseService from './BaseService';
+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;
+}
+declare class History extends BaseService {
+    state: {
+        pageId?: Id | undefined;
+        pageSteps: {
+            [x: string]: {
+                pushElement: (element: StepValue) => void;
+                canUndo: () => boolean;
+                undo: () => StepValue | null;
+                canRedo: () => boolean;
+                redo: () => StepValue | null;
+                getCurrentElement: () => StepValue | null;
+            };
+            [x: number]: {
+                pushElement: (element: StepValue) => void;
+                canUndo: () => boolean;
+                undo: () => StepValue | null;
+                canRedo: () => boolean;
+                redo: () => StepValue | null;
+                getCurrentElement: () => StepValue | null;
+            };
+        };
+        canRedo: boolean;
+        canUndo: boolean;
+    };
+    constructor();
+    changePage(page: MPage): void;
+    empty(): void;
+    push(state: StepValue): StepValue | null;
+    undo(): StepValue | null;
+    redo(): StepValue | null;
+    destroy(): void;
+    private getUndoRedo;
+    private setCanUndoRedo;
+}
+export declare type HistoryService = History;
+declare const _default: History;
+export default _default;

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

@@ -0,0 +1,36 @@
+import type { FormConfig } from '@tmagic/form';
+import type { MComponent, MNode } from '@tmagic/schema';
+import BaseService from './BaseService';
+declare class Props extends BaseService {
+    private state;
+    constructor();
+    setPropsConfigs(configs: Record<string, FormConfig>): void;
+    /**
+     * 为指定类型组件设置组件属性表单配置
+     * @param type 组件类型
+     * @param config 组件属性表单配置
+     */
+    setPropsConfig(type: string, config: FormConfig): void;
+    /**
+     * 获取指点类型的组件属性表单配置
+     * @param type 组件类型
+     * @returns 组件属性表单配置
+     */
+    getPropsConfig(type: string): Promise<FormConfig>;
+    setPropsValues(values: Record<string, MNode>): void;
+    /**
+     * 为指点类型组件设置组件初始值
+     * @param type 组件类型
+     * @param value 组件初始值
+     */
+    setPropsValue(type: string, value: MNode): void;
+    /**
+     * 获取指定类型的组件初始值
+     * @param type 组件类型
+     * @returns 组件初始值
+     */
+    getPropsValue(type: string): Promise<MComponent>;
+}
+export declare type PropsService = Props;
+declare const _default: Props;
+export default _default;

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

@@ -0,0 +1,26 @@
+import { UiState } from '../type';
+import BaseService from './BaseService';
+declare const state: {
+    uiSelectMode: boolean;
+    showSrc: boolean;
+    zoom: number;
+    stageStyle: {
+        [x: string]: string | number;
+    };
+    columnWidth: {
+        left: number;
+        center: number;
+        right: number;
+    };
+    showGuides: boolean;
+    showRule: boolean;
+};
+declare class Ui extends BaseService {
+    constructor();
+    set<T = any>(name: keyof UiState, value: T): void;
+    get<T>(name: keyof typeof state): T;
+    private setColumnWidth;
+}
+export declare type UiService = Ui;
+declare const _default: Ui;
+export default _default;

package/dist/types/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}