UNPKG

@vtj/designer

Version:

VTJ 是一款基于 Vue3 + Typescript 的低代码页面可视化设计器。内置低代码引擎、渲染器和代码生成器,面向前端开发者,开箱即用。 无缝嵌入本地开发工程,不改变前端开发流程和编码习惯。

68 lines (67 loc) 2.5 kB
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; }