@vtj/designer
Version:
VTJ 是一款基于 Vue3 + Typescript 的低代码页面可视化设计器。内置低代码引擎、渲染器和代码生成器,面向前端开发者,开箱即用。 无缝嵌入本地开发工程,不改变前端开发流程和编码习惯。
68 lines (67 loc) • 2.5 kB
TypeScript
import { Ref, ShallowRef } from 'vue';
import { Context } from '@vtj/renderer';
import { Dependencie, DropPosition, MaterialDescription, MaterialSlot, NodeModel, BlockModel } from '@vtj/core';
import { Engine } from './engine';
import { DevTools } from './devtools';
export declare function createSlotsPicker(name: string, 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[]>;
devtools: DevTools;
private proxied;
document: Document | null;
hover: ShallowRef<DesignHelper | null>;
dropping: ShallowRef<DesignHelper | null>;
selected: Ref<DesignHelper | null>;
dragging: MaterialDescription | null;
draggingNode: NodeModel | null;
lines: ShallowRef<DOMRect[]>;
outlineEnabled: Ref<boolean>;
constructor(engine: Engine, contentWindow: Window, dependencies: Ref<Dependencie[]>, devtools: DevTools);
private bind;
private bindEvents;
private unbindEvents;
private onMouseOver;
private onViewChange;
private onLeave;
private onActiveChange;
getDropSlot(to: NodeModel | null): Promise<MaterialSlot | null | undefined>;
getVueInstance(helper: DesignHelper, id?: string): any;
private onDrop;
private onSelected;
private onDragOver;
private onDragStart;
private onDragEnd;
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>;
updateLines(): Promise<void>;
setDragging(desc: MaterialDescription | null): void;
setDraggingNode(node: NodeModel | 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;
}