@vtj/designer 0.7.0

package/types/framework/designer.d.ts

@@ -0,0 +1,57 @@
+import { type Ref, type ShallowRef } from 'vue';
+import { type Context } from '@vtj/renderer';
+import { type Dependencie, type DropPosition, type MaterialDescription, type MaterialSlot, NodeModel, BlockModel } from '@vtj/core';
+import { type Engine } from './engine';
+export declare function createSlotsPicker(slots: MaterialSlot[]): Promise<MaterialSlot>;
+export interface VtjElement extends HTMLElement {
+    __vtj__?: string;
+    __context__?: Context;
+}
+export interface DesignHelper {
+    model: NodeModel | BlockModel;
+    el: VtjElement;
+    rect: DOMRect;
+    type?: DropPosition;
+    path?: Array<NodeModel | BlockModel>;
+}
+export declare class Designer {
+    engine: Engine;
+    contentWindow: Window;
+    dependencies: Ref<Dependencie[]>;
+    private proxied;
+    document: Document | null;
+    hover: ShallowRef<DesignHelper | null>;
+    dropping: ShallowRef<DesignHelper | null>;
+    selected: ShallowRef<DesignHelper | null>;
+    dragging: MaterialDescription | null;
+    constructor(engine: Engine, contentWindow: Window, dependencies: Ref<Dependencie[]>);
+    private bind;
+    private bindEvents;
+    private unbindEvents;
+    private onMouseOver;
+    private onViewChange;
+    private onLeave;
+    private onActiveChange;
+    getDropSlot(to: NodeModel | null): Promise<MaterialSlot | null | undefined>;
+    private onDrop;
+    private onSelected;
+    private onDragOver;
+    private isVtjElement;
+    private findVtjElement;
+    private getNodeByElement;
+    private getDropType;
+    private getNodePath;
+    private setDslFrom;
+    private createNodeDsl;
+    private getElmenetByModel;
+    private findPathByNode;
+    getHelper(e: DragEvent | MouseEvent): DesignHelper | null;
+    cleanHelper(): void;
+    updateRect(): Promise<void>;
+    setDragging(desc: MaterialDescription | null): void;
+    setHover(model: NodeModel | BlockModel | null): Promise<void>;
+    setSelected(model: NodeModel | BlockModel | null): Promise<void>;
+    setDropping(model: NodeModel | BlockModel | null, type?: DropPosition): Promise<void>;
+    allowDrop(target: NodeModel | BlockModel, type?: DropPosition): Promise<boolean>;
+    dispose(): void;
+}

package/types/framework/engine.d.ts

@@ -0,0 +1,51 @@
+import { type ShallowReactive, type InjectionKey, type MaybeRef, type App, type Ref } from 'vue';
+import { Base, ProjectModel, BlockModel, HistoryModel, type Service, type Emitter, type ProjectSchema } from '@vtj/core';
+import { type Context, Provider, type ProvideAdapter } from '@vtj/renderer';
+import { type SkeletonWrapperInstance } from '../wrappers';
+import { Simulator } from './simulator';
+import { Assets } from './assets';
+export declare const engineKey: InjectionKey<ShallowReactive<Engine>>;
+export interface EngineOptions {
+    container: MaybeRef<HTMLElement | undefined>;
+    service: Service;
+    project?: Partial<ProjectSchema>;
+    dependencies?: Record<string, () => Promise<any>>;
+    materials?: Record<string, () => Promise<any>>;
+    globals?: Record<string, any>;
+    adapter?: ProvideAdapter;
+}
+export declare class Engine extends Base {
+    app?: App;
+    skeleton?: SkeletonWrapperInstance | null;
+    container: MaybeRef<HTMLElement | undefined>;
+    service: Service;
+    assets: Assets;
+    simulator: Simulator;
+    emitter: Emitter;
+    project: Ref<ProjectModel | null>;
+    current: Ref<BlockModel | null>;
+    context: Ref<Context | null>;
+    isEmptyCurrent: Ref<boolean>;
+    history: Ref<HistoryModel | null>;
+    provider: Provider;
+    constructor(options: EngineOptions);
+    private init;
+    private render;
+    private bindEvents;
+    private activeFile;
+    private changeFile;
+    private changeCurrentFile;
+    private updateCurrent;
+    private saveProject;
+    private saveBlockFile;
+    private saveMaterials;
+    private saveCurrentFile;
+    private initHistory;
+    private saveHistory;
+    private loadHistory;
+    private publish;
+    private publishCurrent;
+    dispose(): void;
+    openFile(fileId?: string): Promise<void>;
+}
+export declare function useEngine(): ShallowReactive<Engine>;

package/types/framework/index.d.ts

@@ -0,0 +1,6 @@
+export * from './types';
+export * from './engine';
+export * from './assets';
+export * from './simulator';
+export * from './renderer';
+export * from './designer';

package/types/framework/renderer.d.ts

@@ -0,0 +1,21 @@
+import { type BlockSchema, type NodeSchema, type BlockModel, type Service } from '@vtj/core';
+import { type SimulatorEnv } from './simulator';
+import { type Context } from '@vtj/renderer';
+import { type Designer } from './designer';
+export declare class Renderer {
+    env: SimulatorEnv;
+    service: Service;
+    designer: Designer | null;
+    private app;
+    private dsl;
+    private nodeChange;
+    private blockChange;
+    context: Context | null;
+    constructor(env: SimulatorEnv, service: Service, designer?: Designer | null);
+    private install;
+    render(block: BlockModel): void;
+    dispose(): void;
+    updateChild(node: NodeSchema, parent: BlockSchema | NodeSchema): void;
+    private __onNodeChange;
+    private __onBlockChange;
+}

package/types/framework/simulator.d.ts

@@ -0,0 +1,39 @@
+import { type Ref, type ShallowRef } from 'vue';
+import { type Dependencie, type Material, Base } from '@vtj/core';
+import { Renderer } from './renderer';
+import { Designer } from './designer';
+import { type Engine } from './engine';
+declare global {
+    interface Window {
+        __simulator__: Simulator;
+        Vue?: any;
+        VueRouter?: any;
+        ElementPlus?: any;
+    }
+}
+export interface SimulatorEnv {
+    window: Window;
+    Vue: any;
+    library: Record<string, any>;
+    materials: Record<string, any>;
+    components: Record<string, any>;
+    apis: Record<string, any>;
+    container: HTMLElement;
+    globals: Record<string, any>;
+}
+export interface SimulatorOptions {
+    engine: Engine;
+}
+export declare class Simulator extends Base {
+    contentWindow: Window | null;
+    renderer: Renderer | null;
+    designer: ShallowRef<Designer | null>;
+    engine: Engine;
+    constructor(options: SimulatorOptions);
+    init(iframe: Ref<HTMLIFrameElement | undefined>, deps: Ref<Dependencie[]>): void;
+    private setup;
+    emitReady(libraryExports?: string[], materialExports?: string[], materialMapLibrary?: Record<string, string>): Promise<void>;
+    createEnv(libraryExports?: string[], materialMapLibrary?: Record<string, string>, materials?: Material[]): SimulatorEnv;
+    refresh(): void;
+    dispose(): void;
+}

package/types/framework/types.d.ts

@@ -0,0 +1,119 @@
+import { type VNode, type DefineComponent } from 'vue';
+import { type BlockPropDataType } from '@vtj/core';
+export type VueComponent = Record<string, any> | VNode | DefineComponent<any, any, any, any>;
+/**
+ * 器件分组
+ */
+export declare enum WidgetGroup {
+    Block = "block",
+    Node = "node"
+}
+/**
+ * 区域类型
+ */
+export declare enum RegionType {
+    Brand = "Brand",
+    Toolbar = "Toolbar",
+    Actions = "Actions",
+    Apps = "Apps",
+    Workspace = "Workspace",
+    Settings = "Settings",
+    Status = "Status",
+    Preview = "Preview"
+}
+/**
+ * 基础器件
+ */
+export interface Widget {
+    /**
+     * 器件名称
+     */
+    name: string;
+    /**
+     * 放置区域
+     */
+    region: keyof typeof RegionType;
+    /**
+     * Vue组件
+     */
+    component: VueComponent;
+    /**
+     * 组件默认参数
+     */
+    props?: Record<string, any>;
+    /**
+     * 不可见，停用
+     */
+    invisible?: boolean;
+    /**
+     * 分组名称
+     */
+    group?: string;
+}
+/**
+ * App类型器件
+ */
+export interface AppWidget extends Widget {
+    /**
+     * 标识app
+     */
+    type: 'app';
+    /**
+     *  应用图标
+     */
+    icon: VueComponent;
+    /**
+     * 应用名称
+     */
+    label?: string;
+    /**
+     * 应用打开方式
+     */
+    openType?: 'panel' | 'link' | 'dialog';
+    /**
+     * 链接url，openType 为 link 时有效
+     */
+    url?: string;
+}
+/**
+ * 选项卡类型器件
+ */
+export interface TabWidget extends Widget {
+    /**
+     * 标识tab
+     */
+    type: 'tab';
+    /**
+     * tab名称
+     */
+    label: string;
+    /**
+     * tab图标
+     */
+    icon?: VueComponent;
+    /**
+     * 能关闭的
+     */
+    closable?: boolean;
+}
+/**
+ * 设置器配置
+ */
+export interface Setter {
+    /**
+     * 设置器名称
+     */
+    name: string;
+    /**
+     * 设置器组件
+     */
+    component: VueComponent;
+    /**
+     * 设置器数据类型
+     */
+    type: BlockPropDataType;
+    /**
+     * 设计器参数
+     */
+    props?: Record<string, any>;
+}

package/types/index.d.ts

@@ -0,0 +1,7 @@
+export { version as VTJ_DESIGNER_VERSION } from './version';
+export * from './constants';
+export * from './components';
+export * from './framework';
+export * from './managers';
+export * from './wrappers';
+export * from './utils';

package/types/managers/built-in/deps.d.ts

@@ -0,0 +1,2 @@
+import type { Dependencie } from '@vtj/core';
+export declare const builtInDeps: Dependencie[];

package/types/managers/built-in/index.d.ts

@@ -0,0 +1,4 @@
+export * from './widgets';
+export * from './deps';
+export * from './materials';
+export * from './setters';

package/types/managers/built-in/materials.d.ts

@@ -0,0 +1,2 @@
+import type { Material } from '@vtj/core';
+export declare const builtInMaterials: Material[];

package/types/managers/built-in/setters.d.ts

@@ -0,0 +1,3 @@
+import { type Setter } from '../../framework';
+export declare const defaultSetter: Setter;
+export declare const builtInSetters: Array<Setter>;

package/types/managers/built-in/widgets.d.ts

@@ -0,0 +1,2 @@
+import { type Widget, type AppWidget, type TabWidget } from '../../framework';
+export declare const builtInWidgets: Array<AppWidget | TabWidget | Widget>;

package/types/managers/deps.d.ts

@@ -0,0 +1,33 @@
+import type { Dependencie } from '@vtj/core';
+declare class DepsManager {
+    private deps;
+    constructor(deps?: Dependencie[]);
+    /**
+     * 获取内置依赖
+     * @returns
+     */
+    get(): Dependencie[];
+    /**
+     * 重置内置依赖
+     * @param deps
+     */
+    set(deps: Dependencie[]): void;
+    /**
+     * 增加依赖项
+     * @param dep
+     */
+    add(dep: Dependencie): void;
+    /**
+     * 项目与内置依赖进行合并，返回合并最终结果
+     * @param projectDeps
+     * @returns
+     */
+    merge(projectDeps: Dependencie[]): Dependencie[];
+    /**
+     * 删除内置依赖项
+     * @param name
+     */
+    remove(name: string): void;
+}
+export declare const depsManager: DepsManager;
+export {};

package/types/managers/index.d.ts

@@ -0,0 +1,4 @@
+export * from './built-in';
+export * from './widget';
+export * from './deps';
+export * from './setter';

package/types/managers/setter.d.ts

@@ -0,0 +1,29 @@
+import { type BlockPropDataType } from '@vtj/core';
+import { type Setter } from '../framework';
+declare class SetterManager {
+    private setters;
+    defaultSetter: Setter;
+    constructor();
+    private createSetters;
+    /**
+     * 注册一个设置器
+     * @param widget
+     */
+    register(setter: Setter): void;
+    /**
+     * 根据名称获取设置器
+     * @param name
+     * @returns
+     */
+    get(name: string): Setter;
+    /**
+     * 修改设置器
+     * @param name
+     * @param widget
+     * @returns
+     */
+    set(name: string, setter: Partial<Setter>): void;
+    getByType(type: BlockPropDataType): string[];
+}
+export declare const setterManager: SetterManager;
+export {};

package/types/managers/widget.d.ts

@@ -0,0 +1,36 @@
+import { type Widget, RegionType } from '../framework';
+/**
+ * Widget管理类
+ */
+declare class WidgetManager {
+    private widgets;
+    constructor();
+    private createWidgets;
+    /**
+     * 注册一个器件
+     * @param widget
+     */
+    register(widget: Widget): void;
+    /**
+     * 根据名称获取器件配置
+     * @param name
+     * @returns
+     */
+    get(name: string): Widget;
+    /**
+     * 修改器件
+     * @param name
+     * @param widget
+     * @returns
+     */
+    set(name: string, widget: Partial<Widget>): void;
+    /**
+     * 根据区域名称获取区域内的器件配置
+     * @param region
+     * @param group
+     * @returns
+     */
+    getWidgets(region?: keyof typeof RegionType, group?: string): Widget[];
+}
+export declare const widgetManager: WidgetManager;
+export {};

package/types/utils.d.ts

@@ -0,0 +1,6 @@
+import { NotificationHandle, MessageBoxData, MessageHandler } from 'element-plus';
+import { type JSExpression, type JSFunction } from '@vtj/core';
+export declare function notify(message: string, title?: string): NotificationHandle;
+export declare function confirm(message: string): Promise<boolean | MessageBoxData>;
+export declare function message(message: string, type?: 'success' | 'warning'): MessageHandler;
+export declare function expressionValidate(str: JSExpression | JSFunction, self: any, thisRequired?: boolean): boolean;

package/types/version.d.ts

@@ -0,0 +1,8 @@
+/**!
+ * Copyright (c) 2024, VTJ.PRO All rights reserved.
+ * @name @vtj/designer
+ * @author CHC chenhuachun1549@dingtalk.com
+ * @version 0.7.0
+ * @license <a href="https://vtj.pro/license.html">MIT License</a>
+ */
+export declare const version = "0.7.0";

package/types/wrappers/index.d.ts

@@ -0,0 +1,4 @@
+export * from './skeleton';
+export * from './region';
+export * from './widget';
+export * from './setter';

package/types/wrappers/region.d.ts

@@ -0,0 +1,15 @@
+import { DefineComponent, Ref, ComponentOptionsMixin, PublicProps, ExtractPropTypes, type PropType } from 'vue';
+export declare const RegionWrapper: DefineComponent<{
+    region: {
+        type: PropType<"Brand" | "Toolbar" | "Actions" | "Apps" | "Workspace" | "Settings" | "Status" | "Preview">;
+        required: true;
+    };
+}, {
+    regionRef: Ref<any>;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<{
+    region: {
+        type: PropType<"Brand" | "Toolbar" | "Actions" | "Apps" | "Workspace" | "Settings" | "Status" | "Preview">;
+        required: true;
+    };
+}>>, {}, {}>;
+export type RegionWrapperInstance = InstanceType<typeof RegionWrapper>;

package/types/wrappers/setter.d.ts

@@ -0,0 +1,90 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ExtractPropTypes, type PropType } from 'vue';
+import { type MaterialSetter } from '@vtj/core';
+import { type Context } from '@vtj/renderer';
+import { BlockModel } from '@vtj/core';
+import { type Setter } from '../framework';
+export declare const SetterWrapper: DefineComponent<{
+    context: {
+        type: PropType<Context | null>;
+    };
+    current: {
+        type: PropType<BlockModel | null>;
+    };
+    name: StringConstructor;
+    label: StringConstructor;
+    title: StringConstructor;
+    value: {
+        type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    setters: {
+        type: PropType<string | MaterialSetter | (string | MaterialSetter)[]>;
+        required: true;
+        default(): never[];
+    };
+    options: {
+        type: ArrayConstructor;
+        default(): never[];
+    };
+    variable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    removable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, unknown, unknown, {
+    computedSetters(): {
+        component: any;
+        name: string;
+        label: string;
+        props: Record<string, any>;
+    }[];
+    computedOptions(): unknown[];
+    defaultSetter(): string;
+}, {
+    getSetter(name: string | Setter): Setter;
+    changeValue(val: any): void;
+    onRemove(name: string): void;
+}, ComponentOptionsMixin, ComponentOptionsMixin, ("change" | "remove")[], "change" | "remove", PublicProps, Readonly<ExtractPropTypes<{
+    context: {
+        type: PropType<Context | null>;
+    };
+    current: {
+        type: PropType<BlockModel | null>;
+    };
+    name: StringConstructor;
+    label: StringConstructor;
+    title: StringConstructor;
+    value: {
+        type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    setters: {
+        type: PropType<string | MaterialSetter | (string | MaterialSetter)[]>;
+        required: true;
+        default(): never[];
+    };
+    options: {
+        type: ArrayConstructor;
+        default(): never[];
+    };
+    variable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    removable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onRemove?: ((...args: any[]) => any) | undefined;
+}, {
+    value: string | number | boolean | Record<string, any> | unknown[];
+    options: unknown[];
+    setters: string | MaterialSetter | (string | MaterialSetter)[];
+    removable: boolean;
+    variable: boolean;
+}, {}>;

package/types/wrappers/skeleton.d.ts

@@ -0,0 +1,78 @@
+import { DefineComponent, Ref, ShallowReactive, CreateComponentPublicInstance, ExtractPropTypes, PropType, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, PublicProps } from 'vue';
+import { Engine, Widget, RegionType } from '../framework';
+import { type RegionWrapperInstance } from './region';
+import { type WidgetWrapperInstance } from './widget';
+export declare const SkeletonWrapper: DefineComponent<{}, {
+    skeletonRef: Ref<any>;
+    engine: ShallowReactive<Engine>;
+    widgets: Ref<Record<string, CreateComponentPublicInstance<Readonly<ExtractPropTypes<{
+        region: {
+            type: PropType<RegionType>;
+            required: true;
+        };
+        widget: {
+            type: PropType<Widget>;
+            required: true;
+        };
+    }>>, {
+        widgetRef: Ref<any>;
+    }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<ExtractPropTypes<{
+        region: {
+            type: PropType<RegionType>;
+            required: true;
+        };
+        widget: {
+            type: PropType<Widget>;
+            required: true;
+        };
+    }>>, {}, true, {}, {}, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<ExtractPropTypes<{
+        region: {
+            type: PropType<RegionType>;
+            required: true;
+        };
+        widget: {
+            type: PropType<Widget>;
+            required: true;
+        };
+    }>>, {
+        widgetRef: Ref<any>;
+    }, {}, {}, {}, {}>>>;
+}, {}, {}, {
+    /**
+     * 获取区域wrapper组件实例
+     * @param region
+     * @returns
+     */
+    getRegion(region: keyof typeof RegionType): RegionWrapperInstance;
+    /**
+     * 切换应用区域折叠或展开
+     */
+    toggleCollapse(value?: boolean): void;
+    /**
+     * 控制设置区域隐藏或显示
+     * @param val
+     */
+    settable(val: boolean): void;
+    /**
+     * 获取区域内的 widget wrapper 实例数组
+     * @param region
+     * @returns
+     */
+    getWidgets(region: keyof typeof RegionType): WidgetWrapperInstance[];
+    /**
+     * 根据widget 名称获取 widget wrapper 实例
+     * @param name
+     * @returns
+     */
+    getWidget(name: string): WidgetWrapperInstance | undefined;
+    openPreview(_id: string): void;
+    closePreview(): void;
+}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<{}>>, {}, {}>;
+export type SkeletonWrapperInstance = InstanceType<typeof SkeletonWrapper>;

package/types/wrappers/widget.d.ts

@@ -0,0 +1,24 @@
+import { DefineComponent, Ref, ComponentOptionsMixin, PublicProps, ExtractPropTypes, type PropType } from 'vue';
+import { type Widget, RegionType } from '../framework';
+export declare const WidgetWrapper: DefineComponent<{
+    region: {
+        type: PropType<RegionType>;
+        required: true;
+    };
+    widget: {
+        type: PropType<Widget>;
+        required: true;
+    };
+}, {
+    widgetRef: Ref<any>;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<{
+    region: {
+        type: PropType<RegionType>;
+        required: true;
+    };
+    widget: {
+        type: PropType<Widget>;
+        required: true;
+    };
+}>>, {}, {}>;
+export type WidgetWrapperInstance = InstanceType<typeof WidgetWrapper>;