框架同步

graphic-pixi

@@ -1 +1 @@
-Subproject commit 460a6237e3095df4f7f666d4415f84abddc416e3
+Subproject commit 6ac8af13ebb029b428cc45e5ca70f5da01f50029

src/jl-graphic/app/JlGraphicApp.ts

@@ -475,7 +475,8 @@ export interface IGraphicScene extends EventEmitter<GraphicAppEvents> {
    */
   handleGraphicStates(
     graphicStates: GraphicState[],
-    queryer?: GraphicQuery
+    queryer?: GraphicQuery,
+    createOnNotFound?: boolean
   ): void;
   /**
    * 根据类型获取图形模板
@@ -1092,7 +1093,8 @@ abstract class GraphicSceneBase
    */
   handleGraphicStates(
     graphicStates: GraphicState[],
-    queryer?: GraphicQuery
+    queryer?: GraphicQuery,
+    createOnNotFound?: boolean
   ): void {
     graphicStates.forEach((state) => {
       let g: JlGraphic | undefined;
@@ -1103,12 +1105,21 @@ abstract class GraphicSceneBase
       }
       try {
         if (!g) {
-          const template = this.getGraphicTemplatesByType(state.graphicType);
-          const g = template.new();
-          g.loadState(state);
-          this.addGraphics(g);
-        } else if (g.updateStates(state)) {
-          g.repaint();
+          // 未找到图形对象
+          if (createOnNotFound) {
+            const template = this.getGraphicTemplatesByType(state.graphicType);
+            const g = template.new();
+            g.loadState(state);
+            this.addGraphics(g);
+          }
+        } else {
+          // 找到
+          if (state.remove) {
+            this.deleteGraphics(g);
+            g.destroy({ children: true });
+          } else if (g.updateStates(state)) {
+            g.repaint();
+          }
         }
       } catch (err) {
         console.error('图形状态处理异常', g, state, err);

src/jl-graphic/core/JlGraphic.ts

@@ -502,6 +502,7 @@ export interface GraphicData {
 export interface GraphicState {
   get code(): string; // 业务标识
   get graphicType(): string; // 图形类型
+  remove?: boolean; // 是否移除图形
   /**
    * 克隆消息
    */

src/jl-graphic/message/MessageBroker.ts

@@ -146,6 +146,7 @@ export type GraphicStateMessageConvert = (
   message: Uint8Array
 ) => GraphicState[];
 
+// 根据状态查询图形对象查询器
 export type GraphicQuery = (
   state: GraphicState,
   store: GraphicQueryStore
@@ -168,6 +169,10 @@ export interface AppStateSubscription {
    * 根据状态查询图形对象,默认为根据code和type查询图形对象
    */
   graphicQueryer?: GraphicQuery;
+  /**
+   * 当未根据状态找到图形对象时是否创建新对象
+   */
+  createOnNotFound?: boolean;
   /**
    * 订阅消息处理
    */
@@ -196,7 +201,11 @@ class AppMessageHandler implements IMessageHandler {
     const sub = this.sub;
     if (sub.messageConverter) {
       const graphicStates = sub.messageConverter(data);
-      this.app.handleGraphicStates(graphicStates, sub.graphicQueryer);
+      this.app.handleGraphicStates(
+        graphicStates,
+        sub.graphicQueryer,
+        sub.createOnNotFound
+      );
     } else if (sub.messageHandle) {
       sub.messageHandle(data);
     }

src/jl-graphic/plugins/CommonMousePlugin.ts

@@ -24,6 +24,10 @@ export interface IMouseToolOptions {
    * 是否启用视口拖拽(默认右键),默认启用
    */
   viewportDrag?: boolean;
+  /**
+   * 是否启用左键视口拖拽
+   */
+  viewportDragLeft?: boolean;
   /**
    * 是否启用鼠标滚轮缩放,默认启用
    */
@@ -37,12 +41,14 @@ export interface IMouseToolOptions {
 class CompleteMouseToolOptions implements IMouseToolOptions {
   boxSelect: boolean;
   viewportDrag: boolean;
+  viewportDragLeft: boolean;
   wheelZoom: boolean;
   selectFilter?: GraphicSelectFilter | undefined;
   constructor() {
     this.boxSelect = true;
     this.viewportDrag = true;
     this.wheelZoom = true;
+    this.viewportDragLeft = false;
   }
   update(options: IMouseToolOptions) {
     if (options.boxSelect != undefined) {
@@ -51,6 +57,9 @@ class CompleteMouseToolOptions implements IMouseToolOptions {
     if (options.viewportDrag != undefined) {
       this.viewportDrag = options.viewportDrag;
     }
+    if (options.viewportDragLeft != undefined) {
+      this.viewportDragLeft = options.viewportDragLeft;
+    }
     if (options.wheelZoom != undefined) {
       this.wheelZoom = options.wheelZoom;
     }
@@ -132,12 +141,21 @@ export class CommonMouseTool extends AppInteractionPlugin {
     this.app.on('drag_op_move', this.onDragMove, this);
     this.app.on('drag_op_end', this.onDragEnd, this);
     if (this.options.viewportDrag) {
-      this.app.viewport.drag({
-        mouseButtons: 'right',
-      });
-      canvas.on('rightdown', this.setCursor, this);
-      canvas.on('rightup', this.resumeCursor, this);
-      canvas.on('rightupoutside', this.resumeCursor, this);
+      if (this.options.viewportDragLeft) {
+        this.app.viewport.drag({
+          mouseButtons: 'left',
+        });
+        canvas.on('mousedown', this.setLeftCursor, this);
+        canvas.on('mouseup', this.resumeLeftCursor, this);
+        canvas.on('mouseupoutside', this.resumeLeftCursor, this);
+      } else {
+        this.app.viewport.drag({
+          mouseButtons: 'right',
+        });
+        canvas.on('rightdown', this.setCursor, this);
+        canvas.on('rightup', this.resumeCursor, this);
+        canvas.on('rightupoutside', this.resumeCursor, this);
+      }
     }
     if (this.options.wheelZoom) {
       this.app.viewport.wheel({
@@ -156,6 +174,9 @@ export class CommonMouseTool extends AppInteractionPlugin {
     this.app.off('drag_op_end', this.onDragEnd, this);
 
     this.app.viewport.plugins.remove('drag');
+    canvas.off('mousedown', this.setLeftCursor, this);
+    canvas.off('mouseup', this.resumeLeftCursor, this);
+    canvas.off('mouseupoutside', this.resumeLeftCursor, this);
     canvas.off('rightdown', this.setCursor, this);
     canvas.off('rightup', this.resumeCursor, this);
     canvas.off('rightupoutside', this.resumeCursor, this);
@@ -199,6 +220,25 @@ export class CommonMouseTool extends AppInteractionPlugin {
     }
   }
 
+  setLeftCursor(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    this.leftDownTarget = target;
+    if (target.isCanvas() && this.app.pixi.view.style) {
+      this.app.pixi.view.style.cursor = 'grab';
+    }
+  }
+
+  resumeLeftCursor() {
+    if (
+      this.leftDownTarget &&
+      this.leftDownTarget.isCanvas() &&
+      this.app.pixi.view.style
+    ) {
+      this.app.pixi.view.style.cursor = 'inherit';
+    }
+    this.leftDownTarget = null;
+  }
+
   setCursor(e: FederatedMouseEvent) {
     const target = e.target as DisplayObject;
     this.rightTarget = target;