619 lines
17 KiB
TypeScript
619 lines
17 KiB
TypeScript
/// <reference types="node" />
|
||
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;
|
||
gridBackground?: IGridBackground;
|
||
}
|
||
export interface IGridBackground {
|
||
hasGrid: boolean;
|
||
lineColor: string;
|
||
space: number;
|
||
}
|
||
export declare class CanvasData implements ICanvasProperties {
|
||
width: number;
|
||
height: number;
|
||
backgroundColor: string;
|
||
viewportTransform: GraphicTransform;
|
||
gridBackground: IGridBackground | undefined;
|
||
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;
|
||
gridBackgroundLine: Container<DisplayObject>;
|
||
nonInteractiveContainer: Container;
|
||
assistantAppendContainer: Container;
|
||
constructor(scene: IGraphicScene, properties?: CanvasData);
|
||
/**
|
||
* 图形重绘（数据/状态变化时触发）
|
||
*/
|
||
repaint(): void;
|
||
get width(): number;
|
||
get height(): number;
|
||
get backgroundColor(): string;
|
||
get gridBackground(): IGridBackground | undefined;
|
||
doRepaint(): void;
|
||
get properties(): CanvasData;
|
||
saveData(): CanvasData;
|
||
update(properties: ICanvasProperties): void;
|
||
addChild<U extends DisplayObject[]>(...children: U): U[0];
|
||
removeChild<U extends DisplayObject[]>(...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<IGraphicStorage>;
|
||
/**
|
||
* 最大保存的操作记录数，默认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<GraphicAppEvents> {
|
||
/**
|
||
* 获取图形应用对象
|
||
*/
|
||
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<void>;
|
||
/**
|
||
* 强制重新加载，无论是否已经加载过
|
||
*/
|
||
forceReload(): Promise<void>;
|
||
/**
|
||
* 绑定到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<GT extends GraphicTemplate>(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<P = 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;
|
||
/**
|
||
* 发布websocket消息
|
||
*/
|
||
publishMessage(destination: string, message: Uint8Array): void;
|
||
}
|
||
declare abstract class GraphicSceneBase extends EventEmitter<GraphicAppEvents> implements IGraphicScene {
|
||
private graphicStore;
|
||
_options: GraphicAppOptions;
|
||
pixi: Application;
|
||
viewport: Viewport;
|
||
canvas: JlCanvas;
|
||
_loaded: boolean;
|
||
_dom?: HTMLElement;
|
||
_viewportResizer?: NodeJS.Timeout;
|
||
graphicTemplateMap: Map<string, GraphicTemplate>;
|
||
interactionPluginMap: Map<string, InteractionPlugin>;
|
||
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<void>;
|
||
forceReload(): Promise<void>;
|
||
/**
|
||
* 更新选项
|
||
* @param options
|
||
*/
|
||
setOptions(options: GraphicAppOptions): void;
|
||
toCanvasCoordinates(p: Point): Point;
|
||
/**
|
||
* 注册菜单
|
||
* @param menu
|
||
*/
|
||
registerMenu(menu: ContextMenu): void;
|
||
/**
|
||
* 注册图形对象模板
|
||
* @param graphicTemplates
|
||
*/
|
||
registerGraphicTemplates(...graphicTemplates: GraphicTemplate[]): void;
|
||
getGraphicTemplatesByType<GT extends GraphicTemplate>(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<void>;
|
||
/**
|
||
* 添加图形前处理
|
||
* @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<P = InteractionPlugin>(name: string): P;
|
||
/**
|
||
* 停止应用交互插件
|
||
*/
|
||
pauseAppInteractionPlugins(): void;
|
||
private doPauseInteractionPlugin;
|
||
/**
|
||
* 移除交互插件
|
||
*/
|
||
removeInteractionPlugin(plugin: InteractionPlugin): void;
|
||
private checkWsMsgCli;
|
||
/**
|
||
* 订阅websocket消息
|
||
*/
|
||
subscribe(sub: AppStateSubscription): void;
|
||
/**
|
||
* 取消websocket订阅
|
||
*/
|
||
unsubscribe(destination: string): void;
|
||
/**
|
||
* 发布websocket消息
|
||
*/
|
||
publishMessage(destination: string, message: Uint8Array): 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<string, JlScene>;
|
||
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 {};
|