/// import EventEmitter from 'eventemitter3'; import { Viewport } from 'pixi-viewport'; import { Application, Container, DisplayObject, Graphics, Point } from 'pixi.js'; import { GraphicQueryStore } from '../core/GraphicStore'; import { GraphicData, GraphicState, GraphicTemplate, GraphicTransform, JlGraphic } from '../core/JlGraphic'; import { AbsorbablePosition } from '../graphic'; import { AppWsMsgBroker, GraphicQuery, ICreateOnNotFound, type AppStateSubscription, type MessageCliOption } from '../message'; import { OperationRecord } from '../operation/JlOperation'; import { AnimationManager, IMouseToolOptions } from '../plugins'; import { GraphicCopyPlugin } from '../plugins/CopyPlugin'; import { AppDragEvent, InteractionPlugin } from '../plugins/InteractionPlugin'; import { JlGraphicAppKeyboardPlugin, KeyListener } from '../plugins/KeyboardPlugin'; import { ContextMenu, ContextMenuPlugin } from '../ui/ContextMenu'; import { MenuItemOptions } from '../ui/Menu'; export declare const AppConsts: { viewportname: string; canvasname: string; AssistantAppendsName: string; assistantElementColor: string; }; /** * 画布属性 */ export interface ICanvasProperties { width: number; height: number; backgroundColor: string; viewportTransform: GraphicTransform; } export declare class CanvasData implements ICanvasProperties { width: number; height: number; backgroundColor: string; viewportTransform: GraphicTransform; constructor(properties?: ICanvasProperties); copyFrom(properties: ICanvasProperties): boolean; clone(): CanvasData; } export interface IJlCanvas extends Container { /** * 获取画布属性 */ get properties(): ICanvasProperties; /** * 获取所属场景 */ get scene(): IGraphicScene; /** * 更新画布属性 * @param properties */ update(properties: ICanvasProperties): void; /** * 添加辅助附加元素 * @param appends */ addAssistantAppends(...appends: DisplayObject[]): void; /** * 移除辅助附加元素 * @param appends */ removeAssistantAppends(...appends: DisplayObject[]): void; /** * 保存画布及视口缩放数据 */ saveData(): ICanvasProperties; } export declare class JlCanvas extends Container implements IJlCanvas { __JlCanvas: boolean; type: string; scene: IGraphicScene; _properties: CanvasData; bg: Graphics; nonInteractiveContainer: Container; assistantAppendContainer: Container; constructor(scene: IGraphicScene, properties?: CanvasData); /** * 图形重绘(数据/状态变化时触发) */ repaint(): void; get width(): number; get height(): number; get backgroundColor(): string; doRepaint(): void; get properties(): CanvasData; saveData(): CanvasData; update(properties: ICanvasProperties): void; addChild(...children: U): U[0]; removeChild(...children: U): U[0]; /** * 添加无交互Child */ addNonInteractiveChild(...obj: DisplayObject[]): void; removeGraphic(...obj: DisplayObject[]): void; /** * 移除无交互Child */ removeNonInteractiveChild(...obj: DisplayObject[]): void; addAssistantAppends(...appends: DisplayObject[]): void; removeAssistantAppends(...appends: DisplayObject[]): void; /** * 暂停所有可交互对象 */ pauseInteractiveChildren(): void; /** * 恢复所有可交互对象 */ resumeInteractiveChildren(): void; } /** * 选中改变事件 */ export declare class SelectedChangeEvent { graphic: JlGraphic; select: boolean; constructor(graphic: JlGraphic, select: boolean); } /** * 应用事件 */ export interface GraphicAppEvents extends GlobalMixins.GraphicAppEvents { graphicstored: [graphic: JlGraphic]; graphicdeleted: [graphic: JlGraphic]; postdataloaded: []; loadfinish: []; 'interaction-plugin-resume': [plugin: InteractionPlugin]; 'interaction-plugin-pause': [plugin: InteractionPlugin]; 'options-update': [options: GraphicAppOptions]; graphicselectedchange: [graphic: JlGraphic, selected: boolean]; graphicchildselectedchange: [child: DisplayObject, selected: boolean]; graphicselected: [graphics: JlGraphic[]]; 'viewport-scaled': [vp: Viewport]; drag_op_start: [event: AppDragEvent]; drag_op_move: [event: AppDragEvent]; drag_op_end: [event: AppDragEvent]; 'pre-menu-handle': [menu: MenuItemOptions]; 'post-menu-handle': [menu: MenuItemOptions]; 'websocket-connect-state-change': [connected: boolean]; 'websocket-error': [err: Error]; destroy: [app: IGraphicApp]; } /** * 图形数据存储 */ export interface IGraphicStorage { /** * 画布属性 */ canvasProperty?: ICanvasProperties; /** * 图形数据 */ datas: GraphicData[]; } /** * 图形App构造参数 */ export interface IGraphicAppConfig { /** * 数据加载 * @returns */ dataLoader?: () => Promise; /** * 最大保存的操作记录数,默认100,越大越占用内存资源 */ maxOperationRecords?: number; /** * 拖拽触发移动门槛 */ threshold?: number; /** * 通用鼠标工具选项 */ mouseToolOptions?: IMouseToolOptions; /** * 可吸附位置列表 */ absorbablePositions?: AbsorbablePosition[]; /** * 超出屏幕显示范围是否剪裁,默认true */ cullable?: boolean; /** * 是否支持删除操作 */ isSupportDeletion?: (g: JlGraphic) => boolean; /** * 辅助元素颜色,默认蓝色 */ assistantElementColor?: string; } /** * 图形添加到容器选项 */ export interface IInteractiveGraphicOptions { /** * 包含添加到可交互容器的图形类型,和Excludes同时只能存在一个 */ interactiveGraphicTypeIncludes?: string[]; /** * 不包含添加到可交互容器的图形类型,和Includes同时只能存在一个 */ interactiveGraphicTypeExcludes?: string[]; } export type GraphicAppOptions = IGraphicAppConfig & IInteractiveGraphicOptions; /** * 图形场景接口 */ export interface IGraphicScene extends EventEmitter { /** * 获取图形应用对象 */ get app(): GraphicApp; /** * 获取pixijs应用对象 */ get pixi(): Application; /** * 获取视口对象 */ get viewport(): Viewport; /** * 获取画布对象 */ get canvas(): IJlCanvas; /** * 获取dom */ get dom(): HTMLElement | undefined; /** * 获取图形查询仓库 */ get queryStore(): GraphicQueryStore; /** * 获取选中的图形对象 */ get selectedGraphics(): JlGraphic[]; /** * 获取动画管理器 */ get animationManager(): AnimationManager; /** * 获取配置选项 */ get appOptions(): GraphicAppOptions; /** * 设置配置选项 * @param options */ setOptions(options: GraphicAppOptions): void; /** * 注册菜单 * @param menu */ registerMenu(menu: ContextMenu): void; /** * 将屏幕点转换为画布坐标 * @param p 屏幕坐标 */ toCanvasCoordinates(p: Point): Point; /** * 加载/重新加载数据(若已经加载过,则不会重新加载) */ reload(): Promise; /** * 强制重新加载,无论是否已经加载过 */ forceReload(): Promise; /** * 绑定到dom * @param dom */ bindDom(dom: HTMLElement): void; /** * 从dom节点移除 */ unbindDom(): void; /** * 注册图形模板 * @param graphicTemplates */ registerGraphicTemplates(...graphicTemplates: GraphicTemplate[]): void; /** * 处理图形状态 * @param graphicStates */ handleGraphicStates(graphicStates: GraphicState[], queryer?: GraphicQuery, createOnNotFound?: ICreateOnNotFound): void; /** * 根据类型获取图形模板 * @param type */ getGraphicTemplatesByType(type: string): GT; /** * 添加图形 * @param graphics */ addGraphics(...graphics: JlGraphic[]): void; /** * 删除图形 * @param graphics */ deleteGraphics(...graphics: JlGraphic[]): JlGraphic[]; /** * 检测并构建关系 */ detectRelations(): void; /** * 注册交互插件 * @param plugins */ registerInteractionPlugin(...plugins: InteractionPlugin[]): void; /** * 暂停交互插件 */ pauseAppInteractionPlugins(): void; /** * 根据name获取交互插件 * @param name */ interactionPlugin

(name: string): P; /** * 更新选中图形对象 * @param graphics */ updateSelected(...graphics: JlGraphic[]): void; /** * 选中所有图形 */ selectAllGraphics(): void; /** * 使所选图形居中 * @param group */ makeGraphicCenterShow(...group: JlGraphic[]): void; /** * 销毁 */ destroy(): void; /** * 订阅websocket消息 */ subscribe(sub: AppStateSubscription): void; /** * 取消websocket订阅 */ unsubscribe(destination: string): void; } declare abstract class GraphicSceneBase extends EventEmitter implements IGraphicScene { private graphicStore; _options: GraphicAppOptions; pixi: Application; viewport: Viewport; canvas: JlCanvas; _loaded: boolean; _dom?: HTMLElement; _viewportResizer?: NodeJS.Timeout; graphicTemplateMap: Map; interactionPluginMap: Map; graphicCopyPlugin: GraphicCopyPlugin; animationManager: AnimationManager; menuPlugin: ContextMenuPlugin; private debounceEmitFunc; wsMsgBroker: AppWsMsgBroker; constructor(options: GraphicAppOptions); get appOptions(): GraphicAppOptions; abstract get app(): GraphicApp; get dom(): HTMLElement | undefined; get queryStore(): GraphicQueryStore; get selectedGraphics(): JlGraphic[]; private load; /** * 重新加载数据 */ reload(): Promise; forceReload(): Promise; /** * 更新选项 * @param options */ setOptions(options: GraphicAppOptions): void; toCanvasCoordinates(p: Point): Point; /** * 注册菜单 * @param menu */ registerMenu(menu: ContextMenu): void; /** * 注册图形对象模板 * @param graphicTemplates */ registerGraphicTemplates(...graphicTemplates: GraphicTemplate[]): void; getGraphicTemplatesByType(type: string): GT; private updateViewport; /** * 暂停 */ private pause; /** * 恢复 */ private resume; bindDom(dom: HTMLElement): void; unbindDom(): void; /** * 加载图形,GraphicApp默认添加到无交互容器,DrawApp默认添加到交互容器,如需定制,提供选项配置 * @param protos * @param options 添加到可交互/不可交互容器选项配置 */ loadGraphic(protos: GraphicData[]): Promise; /** * 添加图形前处理 * @param graphic */ beforeGraphicStore(graphic: JlGraphic): void; /** * 执行添加图形对象 * @param graphic */ private doAddGraphics; private doDeleteGraphics; /** * 存储图形 * @param graphics 图形对象 */ addGraphics(...graphics: JlGraphic[]): void; /** * 删除图形 * @param graphics 图形对象 */ deleteGraphics(...graphics: JlGraphic[]): JlGraphic[]; /** * 检测并构建关系 */ detectRelations(): void; /** * 全选 */ selectAllGraphics(filter?: (g: JlGraphic) => boolean): void; /** * 更新选中 */ updateSelected(...graphics: JlGraphic[]): void; private doEmitAppGraphicSelected; /** * 更新画布 * @param param */ updateCanvas(param: ICanvasProperties): void; /** * 使图形居中显示(所有图形的外包围盒) */ makeGraphicCenterShow(...group: JlGraphic[]): void; /** * 注册交互插件,会替换旧的 */ registerInteractionPlugin(...plugins: InteractionPlugin[]): void; /** * 根据名称获取交互插件 * @param name * @returns */ interactionPlugin

(name: string): P; /** * 停止应用交互插件 */ pauseAppInteractionPlugins(): void; private doPauseInteractionPlugin; /** * 移除交互插件 */ removeInteractionPlugin(plugin: InteractionPlugin): void; private checkWsMsgCli; /** * 订阅websocket消息 */ subscribe(sub: AppStateSubscription): void; /** * 取消websocket订阅 */ unsubscribe(destination: string): void; /** * 处理图形状态 * @param graphicStates */ handleGraphicStates(graphicStates: GraphicState[], queryer?: GraphicQuery, createOnNotFound?: ICreateOnNotFound): void; /** * 销毁 */ destroy(): void; } /** * 图形应用接口 */ export interface IGraphicApp extends IGraphicScene { get opRecord(): OperationRecord; /** * 实例化一个场景 * @param code 场景标识 * @returns */ initScene(code: string, options: GraphicAppOptions): IGraphicScene; /** * 获取场景 * @param code * @returns */ getScene(code: string): IGraphicScene; /** * 切换场景 * @param dom */ switchScene(code: string, dom: HTMLElement): void; /** * 移除指定code场景 * @param code */ removeScene(code: string): void; /** * 添加图形并记录 * @param graphics */ addGraphicAndRecord(...graphics: JlGraphic[]): void; /** * 删除图形并记录 * @param graphics */ deleteGraphicAndRecord(...graphics: JlGraphic[]): void; /** * 启动websocket消息客户端 */ enableWsMassaging(options: MessageCliOption): void; /** * 添加键盘监听器,如果是相同的按键,新注册的会覆盖旧的,当移除新的时,旧的自动生效 * @param keyListeners */ addKeyboardListener(...keyListeners: KeyListener[]): void; /** * 移除键盘监听器 * @param keyListeners */ removeKeyboardListener(...keyListeners: KeyListener[]): void; } /** * 图形app基类 */ export declare class GraphicApp extends GraphicSceneBase implements IGraphicApp { /** * 场景列表 */ scenes: Map; opRecord: OperationRecord; keyboardPlugin: JlGraphicAppKeyboardPlugin; constructor(options: GraphicAppOptions); get app(): GraphicApp; setOptions(options: GraphicAppOptions): void; addGraphicAndRecord(...graphics: JlGraphic[]): void; deleteGraphicAndRecord(...graphics: JlGraphic[]): void; /** * 实例化一个场景 * @param code 场景标识 * @returns */ initScene(code: string, options: GraphicAppOptions): IGraphicScene; /** * 获取场景 * @param code * @returns */ getScene(code: string): IGraphicScene; switchScene(code: string, dom: HTMLElement): void; removeScene(code: string): void; /** * 启动websocket消息客户端 */ enableWsMassaging(options: MessageCliOption): void; /** * 添加键盘监听器,如果是相同的按键,新注册的会覆盖旧的,当移除新的时,旧的自动生效 * @param keyListeners */ addKeyboardListener(...keyListeners: KeyListener[]): void; /** * 移除键盘监听器 * @param keyListeners */ removeKeyboardListener(...keyListeners: KeyListener[]): void; /** * 销毁 */ destroy(): void; } /** * 场景 */ export default class JlScene extends GraphicSceneBase { code: string; app: GraphicApp; constructor(app: GraphicApp, code: string, options: GraphicAppOptions); } export {};