id调整&框架引入调整

.gitmodules

@@ -1,7 +1,3 @@
 [submodule "xian-ncc-da-message"]
 	path = xian-ncc-da-message
 	url = https://git.code.tencent.com/xian-ncc-da/xian-ncc-da-message.git
-[submodule "graphic-pixi"]
-	path = graphic-pixi
-	url = https://git.code.tencent.com/jl-framework/graphic-pixi.git
-  branch = xian-ncc-da

graphic-pixi

@@ -1 +1 @@
-Subproject commit 3fe8f895fa2458f7e7b93f24558fdc81a11c3f13
+Subproject commit b5ca64750380db0ff8e4e4a56a471363db684e12

package.json

@@ -14,23 +14,18 @@
     "build": "set NODE_ENV=dev&&quasar build",
     "prod": "set NODE_ENV=prod&&quasar build",
     "dev-show": "set NODE_ENV=dev-show&&quasar build",
-
     "protoc": "node scripts/proto.cjs",
     "sync": "node scripts/sync.cjs"
   },
   "dependencies": {
-    "@pixi/filter-outline": "^5.2.0",
-    "@pixi/graphics-extras": "^7.2.4",
     "@quasar/extras": "^1.0.0",
-    "@stomp/stompjs": "^7.0.0",
     "axios": "^1.2.1",
     "centrifuge": "^4.0.1",
     "dotenv": "^16.3.1",
     "google-protobuf": "^3.21.2",
+    "jl-graphic": "git+https://git.code.tencent.com/jl-framework/graphic-pixi.git#v0.1.0",
     "js-base64": "^3.7.5",
     "pinia": "^2.0.11",
-    "pixi-viewport": "^5.0.1",
-    "pixi.js": "^7.2.4",
     "quasar": "^2.6.0",
     "save-dev": "0.0.1-security",
     "vue": "^3.0.0",
@@ -46,6 +41,7 @@
     "eslint": "^8.10.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-vue": "^9.0.0",
+    "pixi.js": "7.2.4",
     "prettier": "^2.5.1",
     "protoc-gen-ts": "^0.8.6",
     "ts-md5": "^1.3.1",

scripts/sync.cjs

@@ -1,70 +0,0 @@
-/**
- * 同步图形框架文件到 src/jl-graphic/
- */
-const {
-  readdirSync,
-  existsSync,
-  copyFileSync,
-  mkdirSync,
-  rmSync,
-} = require('fs');
-const { resolve } = require('path');
-
-const jlGraphicSrcPath = resolve(__dirname, '../graphic-pixi/src/jlgraphic');
-const jlGraphicLibPath = resolve(__dirname, '../src/jl-graphic');
-
-/**
- * 检查并初始化当前项目引入的jl-graphic库
- */
-function checkAndInitJlGraphicLib() {
-  const exist = existsSync(jlGraphicLibPath);
-  if (exist) {
-    console.log('jl-graphic文件夹已存在,清空');
-    readdirSync(jlGraphicLibPath, {
-      withFileTypes: true,
-    }).forEach((file) => {
-      if (file.isDirectory()) {
-        rmSync(resolve(jlGraphicLibPath, file.name), { recursive: true });
-      } else {
-        rmSync(resolve(jlGraphicLibPath, file.name));
-      }
-    });
-  } else {
-    console.log('jl-graphic文件夹不存在,创建');
-    // 文件夹不存在，创建
-    mkdirSync(jlGraphicLibPath);
-  }
-}
-
-function copyJlGraphicFiles() {
-  readdirSync(jlGraphicSrcPath, {
-    withFileTypes: true,
-  }).forEach((file) => {
-    recursiveCopyFiles(file);
-  });
-}
-
-function recursiveCopyFiles(file, path = []) {
-  if (file.isFile()) {
-    const fileSrcPath = resolve(jlGraphicSrcPath, ...path, file.name);
-    const fileDestPath = resolve(jlGraphicLibPath, ...path, file.name);
-    console.log(`copy file ${fileSrcPath} -> ${fileDestPath}`);
-    copyFileSync(fileSrcPath, fileDestPath);
-  } else if (file.isDirectory()) {
-    const srcDir = resolve(jlGraphicSrcPath, ...path, file.name);
-    const dirPath = resolve(jlGraphicLibPath, ...path, file.name);
-    mkdirSync(dirPath);
-    readdirSync(srcDir, {
-      withFileTypes: true,
-    }).forEach((subFile) => {
-      recursiveCopyFiles(subFile, [...path, file.name]);
-    });
-  }
-}
-
-function main() {
-  checkAndInitJlGraphicLib();
-  copyJlGraphicFiles();
-}
-
-main();

src/components/DrawAppFormUtils.ts

@@ -1,5 +1,5 @@
 import { type GraphicDataBase } from 'src/drawApp/graphics/GraphicDataBase';
-import { IDrawApp, JlGraphic } from 'src/jl-graphic';
+import { IDrawApp, JlGraphic } from 'jl-graphic';
 import { useDrawStore } from 'src/stores/draw-store';
 import { onMounted, onUnmounted, reactive } from 'vue';
 

src/components/alarm/setAlarmMock.vue

@@ -72,7 +72,7 @@
 <script setup lang="ts">
 import DraggableDialog from '../common/DraggableDialog.vue';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
-import { JlGraphic } from 'src/jl-graphic';
+import { JlGraphic } from 'jl-graphic';
 import { Station } from 'src/graphics/station/Station';
 import { useLineStore } from 'src/stores/line-store';
 import { QForm, useQuasar } from 'quasar';

src/components/alarm/setAlarmText.vue

@@ -98,7 +98,7 @@
 <script setup lang="ts">
 import DraggableDialog from '../common/DraggableDialog.vue';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
-import { JlGraphic } from 'src/jl-graphic';
+import { JlGraphic } from 'jl-graphic';
 import { Station } from 'src/graphics/station/Station';
 import { useLineStore } from 'src/stores/line-store';
 import { QForm, useQuasar } from 'quasar';

src/components/rangeConfigApp/RangeConfig.vue

@@ -78,7 +78,7 @@ import {
   IAreaConfigItem,
   queryDeviceRangeById,
 } from 'src/api/ConfigApi';
-import { JlGraphic } from 'src/jl-graphic';
+import { JlGraphic } from 'jl-graphic';
 import { saveAlertTypeData, showAlertTypeData } from '../alarm/alarmInfoEnum';
 import { Section } from 'src/graphics/section/Section';
 import { useRangeConfigStore } from 'src/stores/range-config-store';

src/drawApp/graphics/GraphicDataBase.ts

@@ -6,14 +6,13 @@ import {
   GraphicTransform,
   IChildTransform,
   IGraphicTransform,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 // import { toStorageTransform } from '..';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { IPointData, Point } from 'pixi.js';
-import { state } from 'src/protos/device_status';
 
 export interface ICommonInfo {
-  id: string;
+  id: number;
   graphicType: string;
   transform: IGraphicTransform;
   childTransforms: IChildTransform[];
@@ -60,7 +59,7 @@ export abstract class GraphicDataBase implements GraphicData {
 
   static defaultCommonInfo(graphicType: string): graphicData.CommonInfo {
     return new graphicData.CommonInfo({
-      id: '',
+      id: 0,
       graphicType: graphicType,
       transform: new graphicData.Transform({
         position: new graphicData.Point({ x: 0, y: 0 }),
@@ -76,10 +75,10 @@ export abstract class GraphicDataBase implements GraphicData {
     return this._data as D;
   }
 
-  get id(): string {
+  get id(): number {
     return this._data.common.id;
   }
-  set id(v: string) {
+  set id(v: number) {
     this._data.common.id = v;
   }
   get graphicType(): string {

src/drawApp/graphics/LinkInteraction.ts

@@ -3,20 +3,18 @@ import { IPointData, DisplayObject, FederatedMouseEvent } from 'pixi.js';
 import { ILinkData, Link } from 'src/graphics/link/Link';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { GraphicDataBase } from './GraphicDataBase';
-import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
-import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
 import {
   IGraphicApp,
   GraphicInteractionPlugin,
   JlGraphic,
-} from 'src/jl-graphic';
+  ContextMenu,
-import {
+  MenuItemOptions,
   addWayPoint,
   clearWayPoint,
   getWaypointRangeIndex,
   PolylineEditPlugin,
   removeLineWayPoint,
-} from 'src/jl-graphic/plugins/GraphicEditPlugin';
+} from 'jl-graphic';
 
 export class LinkData extends GraphicDataBase implements ILinkData {
   constructor(data?: graphicData.Link) {

src/drawApp/graphics/LogicSectionInteraction.ts

@@ -13,10 +13,10 @@ import {
   IGraphicApp,
   GraphicInteractionPlugin,
   JlGraphic,
-} from 'src/jl-graphic';
+  MenuItemOptions,
+  ContextMenu,
+} from 'jl-graphic';
 import { LogicSectionGraphicHitArea } from 'src/graphics/logicSection/LogicSectionDrawAssistant';
-import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
-import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
 import { useLineStore } from 'src/stores/line-store';
 import { setTrackStatus } from 'src/api/TurnoutApi';
 import { successNotify } from 'src/utils/CommonNotify';

src/drawApp/graphics/PlatformInteraction.ts

@@ -7,13 +7,13 @@ import {
 import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
 import { state } from 'src/protos/device_status';
-import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
-import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
 import {
   IGraphicApp,
   GraphicInteractionPlugin,
   JlGraphic,
-} from 'src/jl-graphic';
+  MenuItemOptions,
+  ContextMenu,
+} from 'jl-graphic';
 import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
 import { mockPlatformApi } from 'src/api/PlatformApi';
 import { useLineStore } from 'src/stores/line-store';
@@ -59,16 +59,16 @@ export class PlatformData extends GraphicDataBase implements IPlatformData {
   set up(v: boolean) {
     this.data.up = v;
   }
-  get refStation(): string {
+  get refStation(): number {
     return this.data.refStation;
   }
-  set refStation(v: string) {
+  set refStation(v: number) {
     this.data.refStation = v;
   }
-  get refSectionId(): string {
+  get refSectionId(): number {
     return this.data.refSectionId;
   }
-  set refSectionId(v: string) {
+  set refSectionId(v: number) {
     this.data.refSectionId = v;
   }
 

src/drawApp/graphics/PolygonInteraction.ts

@@ -7,14 +7,12 @@ import {
   IGraphicApp,
   GraphicInteractionPlugin,
   JlGraphic,
-} from 'src/jl-graphic';
+  MenuItemOptions,
-import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
+  ContextMenu,
-import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
-import {
   PolylineEditPlugin,
   clearWayPoint,
   removeLineWayPoint,
-} from 'src/jl-graphic/plugins/GraphicEditPlugin';
+} from 'jl-graphic';
 import {
   addPolygonSegmentingPoint,
   getWayLineIndex,

src/drawApp/graphics/RunLineInteraction.ts

@@ -10,17 +10,15 @@ import {
   GraphicInteractionPlugin,
   IGraphicApp,
   JlGraphic,
-} from 'src/jl-graphic';
+  ContextMenu,
-import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
+  MenuItemOptions,
-import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
-import { FederatedMouseEvent, DisplayObject, IPointData } from 'pixi.js';
-import {
   addWayPoint,
   clearWayPoint,
   getWaypointRangeIndex,
   PolylineEditPlugin,
   removeLineWayPoint,
-} from 'src/jl-graphic/plugins/GraphicEditPlugin';
+} from 'jl-graphic';
+import { FederatedMouseEvent, DisplayObject, IPointData } from 'pixi.js';
 import { RunLineGraphicHitArea } from 'src/graphics/runLine/RunLineDrawAssistant';
 import { Dialog } from 'quasar';
 import SetDashLineDialog from '../../components/draw-app/dialogs/SetDashLineDialog.vue';
@@ -73,10 +71,10 @@ export class RunLineData extends GraphicDataBase implements IRunLineData {
   set containSta(v: string[]) {
     this.data.containSta = v;
   }
-  get linkPathLines(): string[] {
+  get linkPathLines(): number[] {
     return this.data.linkPathLines;
   }
-  set linkPathLines(v: string[]) {
+  set linkPathLines(v: number[]) {
     this.data.linkPathLines = v;
   }
   get lineId(): string {

src/drawApp/graphics/SectionInteraction.ts

@@ -3,11 +3,7 @@ import { GraphicDataBase } from './GraphicDataBase';
 import { ISectionData, Section } from 'src/graphics/section/Section';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { DisplayObject, FederatedMouseEvent, IPointData } from 'pixi.js';
-import {
+import { GraphicInteractionPlugin, IGraphicApp, JlGraphic } from 'jl-graphic';
-  GraphicInteractionPlugin,
-  IGraphicApp,
-  JlGraphic,
-} from 'src/jl-graphic';
 import { SectionGraphicHitArea } from 'src/graphics/section/SectionDrawAssistant';
 
 export class SectionData extends GraphicDataBase implements ISectionData {
@@ -63,10 +59,10 @@ export class SectionData extends GraphicDataBase implements ISectionData {
   set axleCountings(axleCountings: string[]) {
     this.data.axleCountings = axleCountings;
   }
-  get children(): string[] {
+  get children(): number[] {
     return this.data.children;
   }
-  set children(children: string[]) {
+  set children(children: number[]) {
     this.data.children = children;
   }
   get destinationCode(): string {

src/drawApp/graphics/SignalInteraction.ts

@@ -11,9 +11,9 @@ import {
   GraphicInteractionPlugin,
   IGraphicApp,
   JlGraphic,
-} from 'src/jl-graphic';
+  ContextMenu,
-import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
+  MenuItemOptions,
-import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
+} from 'jl-graphic';
 import { FederatedMouseEvent, DisplayObject } from 'pixi.js';
 import { state } from 'src/protos/device_status';
 import { mockSignalApi } from 'src/api/PlatformApi';

src/drawApp/graphics/StationInteraction.ts

@@ -7,13 +7,13 @@ import {
 import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
 import { state } from 'src/protos/device_status';
-import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
-import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
 import {
   IGraphicApp,
   GraphicInteractionPlugin,
   JlGraphic,
-} from 'src/jl-graphic';
+  MenuItemOptions,
+  ContextMenu,
+} from 'jl-graphic';
 import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
 import { KilometerSystem } from 'src/graphics/signal/Signal';
 import { useLineStore } from 'src/stores/line-store';

src/drawApp/graphics/TrainInteraction.ts

@@ -4,14 +4,14 @@ import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
 import { state } from 'src/protos/device_status';
 import { train } from 'src/protos/train';
-import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
-import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
 import {
   IGraphicApp,
   GraphicInteractionPlugin,
   JlGraphic,
   VectorText,
-} from 'src/jl-graphic';
+  MenuItemOptions,
+  ContextMenu,
+} from 'jl-graphic';
 import {
   Color,
   Container,

src/drawApp/graphics/TrainWindowInteraction.ts

@@ -31,10 +31,10 @@ export class TrainWindowData
   set code(v: string) {
     this.data.code = v;
   }
-  get refDeviceId(): string[] {
+  get refDeviceId(): number[] {
     return this.data.refDeviceId;
   }
-  set refDeviceId(v: string[]) {
+  set refDeviceId(v: number[]) {
     this.data.refDeviceId = v;
   }
   clone(): TrainWindowData {

src/drawApp/graphics/TurnoutInteraction.ts

@@ -13,13 +13,13 @@ import {
   IGraphicApp,
   GraphicInteractionPlugin,
   JlGraphic,
-} from 'src/jl-graphic';
+  ContextMenu,
+  MenuItemOptions,
+} from 'jl-graphic';
 import {
   ForkHitArea,
   TurnoutSectionHitArea,
 } from 'src/graphics/turnout/TurnoutDrawAssistant';
-import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
-import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
 import { setSwitchStatus } from 'src/api/TurnoutApi';
 import { useLineStore } from 'src/stores/line-store';
 import { successNotify } from 'src/utils/CommonNotify';

src/drawApp/index.ts

@@ -12,9 +12,9 @@ import {
   KeyListener,
   newDrawApp,
   IGraphicStorage,
-} from 'src/jl-graphic';
+  ContextMenu,
-import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
+  MenuItemOptions,
-import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
+} from 'jl-graphic';
 import { IscsFanData } from './graphics/IscsFanInteraction';
 import { LinkData } from './graphics/LinkInteraction';
 import { TrainData, TrainState } from './graphics/TrainInteraction';

src/drawApp/lineApp.ts

@@ -3,7 +3,7 @@ import {
   GraphicState,
   IGraphicApp,
   newGraphicApp,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 import {
   TrainData,
   TrainOperateInteraction,
@@ -58,8 +58,7 @@ import {
 import { TrainWindowData } from './graphics/TrainWindowInteraction';
 import { SeparatorTemplate } from 'src/graphics/separator/Separator';
 import { SeparatorData } from './graphics/SeparatorInteraction';
-import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
+import { ContextMenu, MenuItemOptions } from 'jl-graphic';
-import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
 import {
   LogicSection,
   LogicSectionTemplate,

src/drawApp/lineNetApp.ts

@@ -3,7 +3,7 @@ import {
   GraphicData,
   GraphicState,
   newGraphicApp,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 import { getPublishLineNet } from 'src/api/PublishApi';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { state } from 'src/protos/ws_message';

src/drawApp/rangeConfigApp.ts

@@ -7,7 +7,13 @@ import { SectionTemplate } from 'src/graphics/section/Section';
 import { Signal, SignalTemplate } from 'src/graphics/signal/Signal';
 import { Station, StationTemplate } from 'src/graphics/station/Station';
 import { Turnout, TurnoutTemplate } from 'src/graphics/turnout/Turnout';
-import { IGraphicApp, GraphicData, newGraphicApp } from 'src/jl-graphic';
+import {
+  IGraphicApp,
+  GraphicData,
+  newGraphicApp,
+  MenuItemOptions,
+  ContextMenu,
+} from 'jl-graphic';
 import {
   LogicSectionData,
   LogicSectionState,
@@ -25,8 +31,6 @@ import { getPublishMapInfoByLineId } from 'src/api/PublishApi';
 import { useRangeConfigStore } from 'src/stores/range-config-store';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { toUint8Array } from 'js-base64';
-import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
-import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
 import { CanvasData, IGraphicAppConfig } from 'src/jl-graphic/app/JlGraphicApp';
 
 let rangeConfigApp: IGraphicApp;

src/graphics/CommonGraphics.ts

@@ -1,5 +1,5 @@
 import { Graphics } from 'pixi.js';
-import { calculateMirrorPoint } from 'src/jl-graphic';
+import { calculateMirrorPoint } from 'jl-graphic';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { Turnout, TurnoutPort } from './turnout/Turnout';
 import { Section, SectionPort } from './section/Section';
@@ -111,6 +111,6 @@ export function protoPort2Data(port: graphicData.RelatedRef.DevicePort) {
 
 export interface IRelatedRefData {
   deviceType: graphicData.RelatedRef.DeviceType; //关联的设备类型
-  id: string; //关联的设备ID
+  id: number; //关联的设备ID
   devicePort: graphicData.RelatedRef.DevicePort; //关联的设备端口
 }

src/graphics/axleCounting/AxleCounting.ts

@@ -5,7 +5,7 @@ import {
   JlGraphic,
   JlGraphicTemplate,
   VectorText,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 import { IRelatedRefData, protoPort2Data } from '../CommonGraphics';
 import { KilometerSystem } from '../signal/Signal';
 

src/graphics/axleCounting/AxleCountingDrawAssistant.ts

@@ -8,7 +8,7 @@ import {
   IDrawApp,
   JlGraphic,
   distance2,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 
 import {
   IAxleCountingData,

src/graphics/iscs-fan/IscsFan.ts

@@ -3,7 +3,7 @@ import {
   GraphicData,
   JlGraphic,
   JlGraphicTemplate,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 import ISCS_FAN_Assets from './iscs-fan-spritesheet.png';
 import ISCS_FAN_JSON from './iscs-fan-data.json';
 

src/graphics/iscs-fan/IscsFanDrawAssistant.ts

@@ -4,7 +4,7 @@ import {
   GraphicInteractionPlugin,
   JlDrawApp,
   JlGraphic,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 import { IIscsFanData, IscsFan, IscsFanTemplate } from './IscsFan';
 
 export class IscsFanDraw extends GraphicDrawAssistant<

src/graphics/link/Link.ts

@@ -4,8 +4,8 @@ import {
   JlGraphic,
   JlGraphicTemplate,
   convertToBezierParams,
-} from 'src/jl-graphic';
+  ILineGraphic,
-import { ILineGraphic } from 'src/jl-graphic/plugins/GraphicEditPlugin';
+} from 'jl-graphic';
 
 export interface ILinkData extends GraphicData {
   get code(): string; // 编号

src/graphics/link/LinkDrawAssistant.ts

@@ -21,15 +21,12 @@ import {
   convertToBezierParams,
   linePoint,
   pointPolygon,
-} from 'src/jl-graphic';
+  AbsorbablePoint,
-import AbsorbablePoint, {
   AbsorbableCircle,
-} from 'src/jl-graphic/graphic/AbsorbablePosition';
-import {
   BezierCurveEditPlugin,
   ILineGraphic,
   PolylineEditPlugin,
-} from 'src/jl-graphic/plugins/GraphicEditPlugin';
+} from 'jl-graphic';
 import { ILinkData, Link, LinkTemplate } from './Link';
 
 export interface ILinkDrawOptions {

src/graphics/logicSection/LogicSection.ts

@@ -7,8 +7,8 @@ import {
   JlGraphicTemplate,
   VectorText,
   getParallelOfPolyline,
-} from 'src/jl-graphic';
+  ILineGraphic,
-import { ILineGraphic } from 'src/jl-graphic/plugins/GraphicEditPlugin';
+} from 'jl-graphic';
 import { SectionConsts } from '../section/Section';
 import { Station } from '../station/Station';
 

src/graphics/logicSection/LogicSectionDrawAssistant.ts

@@ -5,7 +5,7 @@ import {
   IDrawApp,
   JlGraphic,
   linePoint,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 import { LogicSection, LogicSectionTemplate } from './LogicSection';
 import { LogicSectionData } from 'src/drawApp/graphics/LogicSectionInteraction';
 import { Graphics, IHitArea, Point } from 'pixi.js';

src/graphics/pathLine/PathLine.ts

@@ -2,14 +2,14 @@ import {
   JlGraphic,
   GraphicData,
   JlGraphicTemplate,
-  VectorText,
   isPointOnLine,
-} from 'src/jl-graphic';
+  calculateFootPointFromPointToLine,
+  distance,
+} from 'jl-graphic';
 import { Graphics, IPointData, Point } from 'pixi.js';
 import { RunLine } from '../runLine/RunLine';
 import { getDrawApp } from 'src/drawApp';
 // calculateDistanceFromPointToLine
-import { calculateFootPointFromPointToLine, distance } from 'src/jl-graphic';
 import { StationLine } from '../stationLine/StationLine';
 export interface KilometerPoint {
   get point(): IPointData;

src/graphics/pathLine/PathLineDrawAssistant.ts

@@ -10,7 +10,7 @@ import {
   calculateFootPointFromPointToLine,
   calculateDistanceFromPointToLine,
   distance,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 import {
   IPathLineData,
   PathLineTemplate,

src/graphics/platform/Platform.ts

@@ -8,7 +8,7 @@ import {
   calculateMirrorPoint,
   distance2,
   getRectangleCenter,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 import { Station } from '../station/Station';
 import { Section } from '../section/Section';
 
@@ -21,10 +21,10 @@ export interface IPlatformData extends GraphicData {
   set direction(v: string);
   get up(): boolean; // 站台上下行
   set up(v: boolean);
-  get refStation(): string; // 关联的车站
+  get refStation(): number; // 关联的车站
-  set refStation(v: string);
+  set refStation(v: number);
-  get refSectionId(): string; // 关联的物理区段
+  get refSectionId(): number; // 关联的物理区段
-  set refSectionId(v: string);
+  set refSectionId(v: number);
   clone(): IPlatformData;
   copyFrom(data: IPlatformData): void;
   eq(other: IPlatformData): boolean;

src/graphics/platform/PlatformDrawAssistant.ts

@@ -6,7 +6,7 @@ import {
   GraphicInteractionPlugin,
   IDrawApp,
   JlGraphic,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 
 import { IPlatformData, Platform, PlatformTemplate } from './Platform';
 

src/graphics/polygon/Polygon.ts

@@ -1,5 +1,5 @@
 import { Color, Graphics, IPointData } from 'pixi.js';
-import { GraphicData, JlGraphic, JlGraphicTemplate } from 'src/jl-graphic';
+import { GraphicData, JlGraphic, JlGraphicTemplate } from 'jl-graphic';
 
 export interface IPolygonData extends GraphicData {
   get code(): string; // 编号

src/graphics/polygon/PolygonDrawAssistant.ts

@@ -14,15 +14,11 @@ import {
   IDrawApp,
   JlGraphic,
   linePoint,
-} from 'src/jl-graphic';
+  AbsorbablePoint,
-
-import AbsorbablePoint, {
   AbsorbablePosition,
-} from 'src/jl-graphic/graphic/AbsorbablePosition';
-import {
   ILineGraphic,
   PolylineEditPlugin,
-} from 'src/jl-graphic/plugins/GraphicEditPlugin';
+} from 'jl-graphic';
 
 import { IPolygonData, Polygon, PolygonTemplate } from './Polygon';
 

src/graphics/polygon/PolygonUtils.ts

@@ -2,7 +2,7 @@ import { IPointData, Point } from 'pixi.js';
 import {
   calculateDistanceFromPointToLine,
   calculateFootPointFromPointToLine,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 import { Polygon } from './Polygon';
 
 //计算线段细分坐标--线段分成几份

src/graphics/rect/Rect.ts

@@ -4,7 +4,7 @@ import {
   JlGraphic,
   JlGraphicTemplate,
   getRectangleCenter,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 
 export interface IRectData extends GraphicData {
   get code(): string; // 编号

src/graphics/rect/RectDrawAssistant.ts

@@ -5,7 +5,7 @@ import {
   IDrawApp,
   JlGraphic,
   pointBox,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 
 import { IRectData, Rect, RectTemplate } from './Rect';
 

src/graphics/runLine/RunLine.ts

@@ -8,13 +8,13 @@ import {
   getIntersectionPoint,
   distance,
   DashedLine,
-} from 'src/jl-graphic';
+  calculateDistanceFromPointToLine,
+} from 'jl-graphic';
 import { RunLineName } from './RunLineName';
 import { PathLine } from '../pathLine/PathLine';
 import { PathLineDraw } from '../pathLine/PathLineDrawAssistant';
 import { getDrawApp } from 'src/drawApp';
 import { StationLine } from '../stationLine/StationLine';
-import { calculateDistanceFromPointToLine } from 'src/jl-graphic';
 
 export interface IRunLineData extends GraphicData {
   get code(): string;
@@ -27,8 +27,8 @@ export interface IRunLineData extends GraphicData {
   set nameBgColor(v: string);
   get containSta(): string[];
   set containSta(v: string[]);
-  get linkPathLines(): string[];
+  get linkPathLines(): number[];
-  set linkPathLines(v: string[]);
+  set linkPathLines(v: number[]);
   get lineId(): string;
   set lineId(v: string);
   get dashPointIndexs(): number[];

src/graphics/runLine/RunLineDrawAssistant.ts

@@ -8,17 +8,16 @@ import {
   AbsorbablePosition,
   DraggablePoint,
   GraphicTransformEvent,
-} from 'src/jl-graphic';
+  PolylineEditPlugin,
+  ILineGraphic,
+  AbsorbableLine,
+} from 'jl-graphic';
 import {
   IRunLineData,
   RunLine,
   RunLineTemplate,
   runLineConsts,
 } from './RunLine';
-import {
-  PolylineEditPlugin,
-  ILineGraphic,
-} from 'src/jl-graphic/plugins/GraphicEditPlugin';
 import {
   FederatedPointerEvent,
   Point,
@@ -27,7 +26,6 @@ import {
   IHitArea,
   DisplayObject,
 } from 'pixi.js';
-import { AbsorbableLine } from 'src/jl-graphic/graphic/AbsorbablePosition';
 
 export interface IRunLineDrawOptions {
   newData: () => IRunLineData;

src/graphics/runLine/RunLineName.ts

@@ -1,6 +1,6 @@
 import { Container } from '@pixi/display';
 import { Graphics } from 'pixi.js';
-import { VectorText } from 'src/jl-graphic';
+import { VectorText } from 'jl-graphic';
 import { IRunLineData } from './RunLine';
 
 const nameConsts = {

src/graphics/section/Section.ts

@@ -7,16 +7,16 @@ import {
   VectorText,
   distance2,
   splitLineEvenly,
-} from 'src/jl-graphic';
+  ILineGraphic,
-import { ILineGraphic } from 'src/jl-graphic/plugins/GraphicEditPlugin';
+  epsilon,
-import { epsilon } from 'src/jl-graphic/math';
+  Vector2,
+} from 'jl-graphic';
 import {
   IRelatedRefData,
   createRelatedRefProto,
   protoPort2Data,
 } from '../CommonGraphics';
 import { Turnout } from '../turnout/Turnout';
-import Vector2 from 'src/jl-graphic/math/Vector2';
 import { AxleCounting } from '../axleCounting/AxleCounting';
 
 export enum SectionType {
@@ -42,8 +42,8 @@ export interface ISectionData extends GraphicData {
   set sectionType(type: SectionType);
   get axleCountings(): string[];
   set axleCountings(axleCountings: string[]);
-  get children(): string[];
+  get children(): number[];
-  set children(children: string[]);
+  set children(children: number[]);
   get destinationCode(): string;
   set destinationCode(destinationCode: string);
   get turning(): boolean;

src/graphics/section/SectionDrawAssistant.ts

@@ -12,7 +12,18 @@ import {
   VectorText,
   calculateLineMidpoint,
   linePoint,
-} from 'src/jl-graphic';
+  IEditPointOptions,
+  ILineGraphic,
+  PolylineEditPlugin,
+  addWayPoint,
+  clearWayPoint,
+  getWaypointRangeIndex,
+  AbsorbablePoint,
+  AbsorbableLine,
+  AbsorbablePosition,
+  MenuItemOptions,
+  ContextMenu,
+} from 'jl-graphic';
 import {
   ISectionData,
   Section,
@@ -29,21 +40,7 @@ import {
   IPointData,
   Point,
 } from 'pixi.js';
-import {
-  IEditPointOptions,
-  ILineGraphic,
-  PolylineEditPlugin,
-  addWayPoint,
-  clearWayPoint,
-  getWaypointRangeIndex,
-} from 'src/jl-graphic/plugins/GraphicEditPlugin';
-import AbsorbablePoint, {
-  AbsorbableLine,
-  AbsorbablePosition,
-} from 'src/jl-graphic/graphic/AbsorbablePosition';
 import { Turnout, TurnoutPort } from '../turnout/Turnout';
-import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
-import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
 import { Dialog } from 'quasar';
 import { SectionData } from 'src/drawApp/graphics/SectionInteraction';
 import { graphicData } from 'src/protos/stationLayoutGraphics';

src/graphics/separator/Separator.ts

@@ -1,5 +1,5 @@
 import { Color, Graphics } from 'pixi.js';
-import { GraphicData, JlGraphic, JlGraphicTemplate } from 'src/jl-graphic';
+import { GraphicData, JlGraphic, JlGraphicTemplate } from 'jl-graphic';
 
 export interface ISeparatorData extends GraphicData {
   get code(): string; // 编号

src/graphics/separator/SeparatorDrawAssistant.ts

@@ -7,7 +7,7 @@ import {
   IDrawApp,
   JlGraphic,
   linePoint,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 import { Section, SectionType } from '../section/Section';
 import {
   ISeparatorData,

src/graphics/signal/LampMainBody.ts

@@ -1,9 +1,5 @@
 import { Graphics, Point } from 'pixi.js';
-import {
+import { calculateMirrorPoint, GraphicAnimation, JlGraphic } from 'jl-graphic';
-  calculateMirrorPoint,
-  GraphicAnimation,
-  JlGraphic,
-} from 'src/jl-graphic';
 import { Lamp } from './Lamp';
 import { ISignalState } from './Signal';
 

src/graphics/signal/Signal.ts

@@ -4,8 +4,8 @@ import {
   GraphicState,
   JlGraphic,
   JlGraphicTemplate,
-} from 'src/jl-graphic';
+  calculateMirrorPoint,
-import { calculateMirrorPoint } from 'src/jl-graphic';
+} from 'jl-graphic';
 import { LampMainBody } from './LampMainBody';
 import { drawArrow } from '../CommonGraphics';
 import { SignalCode } from './SignalCode';

src/graphics/signal/SignalCode.ts

@@ -1,5 +1,5 @@
 import { Container, Graphics, Point } from 'pixi.js';
-import { VectorText } from 'src/jl-graphic';
+import { VectorText } from 'jl-graphic';
 import { ISignalData, ISignalState } from './Signal';
 
 export enum CodeColorEnum {

src/graphics/signal/SignalDrawAssistant.ts

@@ -7,7 +7,7 @@ import {
   GraphicTransformEvent,
   IDrawApp,
   JlGraphic,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 
 import { ISignalData, Signal, SignalTemplate } from './Signal';
 

src/graphics/station/Station.ts

@@ -5,7 +5,7 @@ import {
   JlGraphic,
   JlGraphicTemplate,
   VectorText,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 import { LogicSection } from '../logicSection/LogicSection';
 import { Platform } from '../platform/Platform';
 import { KilometerSystem, Signal } from '../signal/Signal';

src/graphics/station/StationDrawAssistant.ts

@@ -6,7 +6,7 @@ import {
   GraphicInteractionPlugin,
   IDrawApp,
   JlGraphic,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 
 import { IStationData, Station, StationTemplate } from './Station';
 

src/graphics/stationLine/StationLine.ts

@@ -4,7 +4,7 @@ import {
   JlGraphic,
   JlGraphicTemplate,
   VectorText,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
 
 export interface IStationLineData extends GraphicData {

src/graphics/stationLine/StationLineDrawAssistant.ts

@@ -6,7 +6,7 @@ import {
   GraphicInteractionPlugin,
   IDrawApp,
   JlGraphic,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 
 import {
   IStationLineData,

src/graphics/train/Train.ts

@@ -7,7 +7,7 @@ import {
   JlGraphicTemplate,
   VectorText,
   calculateMirrorPoint,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 import { train } from 'src/protos/train';
 import { state } from 'src/protos/device_status';
 import { TrainWindow } from '../trainWindow/TrainWindow';

src/graphics/train/TrainDrawAssistant.ts

@@ -4,7 +4,7 @@ import {
   GraphicInteractionPlugin,
   IDrawApp,
   JlGraphic,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 
 import { ITrainData, Train, TrainTemplate } from './Train';
 

src/graphics/trainLine/TrainLine.ts

@@ -5,7 +5,7 @@ import {
   JlGraphic,
   JlGraphicTemplate,
   distance,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 import trainLineSprites from './trainLineSprites.png';
 
 import { Assets, Sprite, Texture } from 'pixi.js';

src/graphics/trainLine/TrainLineAssistant.ts

@@ -4,7 +4,7 @@ import {
   GraphicInteractionPlugin,
   IDrawApp,
   JlGraphic,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 import { ITrainLineData, TrainLine, ItrainLineTemplate } from './TrainLine';
 
 export class TrainLineDraw extends GraphicDrawAssistant<

src/graphics/trainWindow/TrainWindow.ts

@@ -5,15 +5,15 @@ import {
   JlGraphicTemplate,
   distance2,
   getRectangleCenter,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 import { LogicSection } from '../logicSection/LogicSection';
 import { Section } from '../section/Section';
 
 export interface ITrainWindowData extends GraphicData {
   get code(): string; // 编号
   set code(v: string);
-  get refDeviceId(): string[]; // 关联的区段的id
+  get refDeviceId(): number[]; // 关联的区段的id
-  set refDeviceId(v: string[]);
+  set refDeviceId(v: number[]);
   clone(): ITrainWindowData;
   copyFrom(data: ITrainWindowData): void;
   eq(other: ITrainWindowData): boolean;

src/graphics/trainWindow/TrainWindowDrawAssistant.ts

@@ -7,7 +7,7 @@ import {
   GraphicInteractionPlugin,
   IDrawApp,
   JlGraphic,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 
 import {
   ITrainWindowData,

src/graphics/trainWindow/oneClickDrawAssistant.ts

@@ -5,7 +5,7 @@ import {
   JlDrawApp,
   JlGraphic,
   JlGraphicTemplate,
-} from 'src/jl-graphic';
+} from 'jl-graphic';
 import { TrainWindow } from './TrainWindow';
 import { TrainWindowDraw } from './TrainWindowDrawAssistant';
 import { AxleCounting } from '../axleCounting/AxleCounting';

src/graphics/turnout/Turnout.ts

@@ -10,16 +10,16 @@ import {
   angleOfIncludedAngle,
   distance2,
   getParallelOfPolyline,
-} from 'src/jl-graphic';
+  epsilon,
+  Vector2,
+} from 'jl-graphic';
 import { Section, SectionPort } from '../section/Section';
-import { epsilon } from 'src/jl-graphic/math';
 import {
   IRelatedRefData,
   createRelatedRefProto,
   protoPort2Data,
 } from '../CommonGraphics';
 import { KilometerSystem } from '../signal/Signal';
-import Vector2 from 'src/jl-graphic/math/Vector2';
 import { Station } from '../station/Station';
 
 export interface ITurnoutData extends GraphicData {

src/graphics/turnout/TurnoutDrawAssistant.ts

@@ -11,7 +11,13 @@ import {
   VectorText,
   linePoint,
   polylinePoint,
-} from 'src/jl-graphic';
+  GraphicEditPlugin,
+  getWaypointRangeIndex,
+  AbsorbablePoint,
+  AbsorbableLine,
+  ContextMenu,
+  MenuItemOptions,
+} from 'jl-graphic';
 import {
   ITurnoutData,
   Turnout,
@@ -28,16 +34,7 @@ import {
   IPointData,
   Point,
 } from 'pixi.js';
-import {
-  GraphicEditPlugin,
-  getWaypointRangeIndex,
-} from 'src/jl-graphic/plugins/GraphicEditPlugin';
 import { Section, SectionPort } from '../section/Section';
-import AbsorbablePoint, {
-  AbsorbableLine,
-} from 'src/jl-graphic/graphic/AbsorbablePosition';
-import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
-import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
 
 export class TurnoutDraw extends GraphicDrawAssistant<
   TurnoutTemplate,

src/jl-graphic/app/BasicOperation.ts

@@ -1,110 +0,0 @@
-import { GraphicData, JlGraphic } from '../core';
-import { JlOperation } from '../operation';
-import { ICanvasProperties, IGraphicApp, IJlCanvas } from './JlGraphicApp';
-
-/**
- * 更新画布操作
- */
-export class UpdateCanvasOperation extends JlOperation {
-  obj: IJlCanvas;
-  old: ICanvasProperties;
-  data: ICanvasProperties;
-  description = '';
-
-  constructor(
-    app: IGraphicApp,
-    obj: IJlCanvas,
-    old: ICanvasProperties,
-    data: ICanvasProperties
-  ) {
-    super(app, 'update-canvas');
-    this.app = app;
-    this.obj = obj;
-    this.old = old;
-    this.data = data;
-  }
-
-  undo(): JlGraphic[] {
-    this.obj.update(this.old);
-    return [];
-  }
-  redo(): JlGraphic[] {
-    this.obj.update(this.data);
-    return [];
-  }
-}
-/**
- * 创建图形操作
- */
-export class GraphicCreateOperation extends JlOperation {
-  obj: JlGraphic[];
-  description = '';
-
-  constructor(app: IGraphicApp, obj: JlGraphic[]) {
-    super(app, 'graphic-create');
-    this.app = app;
-    this.obj = obj;
-  }
-
-  undo(): JlGraphic[] | void {
-    this.app.deleteGraphics(...this.obj);
-  }
-  redo(): JlGraphic[] {
-    this.app.addGraphics(...this.obj);
-    return this.obj;
-  }
-}
-/**
- * 删除图形操作
- */
-export class GraphicDeleteOperation extends JlOperation {
-  obj: JlGraphic[];
-
-  constructor(app: IGraphicApp, obj: JlGraphic[]) {
-    super(app, 'graphic-delete');
-    this.app = app;
-    this.obj = obj;
-  }
-
-  undo(): JlGraphic[] {
-    this.app.addGraphics(...this.obj);
-    return this.obj;
-  }
-  redo(): void {
-    this.app.deleteGraphics(...this.obj);
-  }
-}
-
-export class GraphicDataUpdateOperation extends JlOperation {
-  obj: JlGraphic[];
-  oldData: GraphicData[];
-  newData: GraphicData[];
-  constructor(
-    app: IGraphicApp,
-    obj: JlGraphic[],
-    oldData: GraphicData[],
-    newData: GraphicData[]
-  ) {
-    super(app, 'graphic-drag');
-    this.obj = [...obj];
-    this.oldData = oldData;
-    this.newData = newData;
-  }
-
-  undo(): void | JlGraphic[] {
-    for (let i = 0; i < this.obj.length; i++) {
-      const g = this.obj[i];
-      // g.exitChildEdit();
-      g.updateData(this.oldData[i]);
-    }
-    return this.obj;
-  }
-  redo(): void | JlGraphic[] {
-    for (let i = 0; i < this.obj.length; i++) {
-      const g = this.obj[i];
-      // g.exitChildEdit();
-      g.updateData(this.newData[i]);
-    }
-    return this.obj;
-  }
-}

src/jl-graphic/app/JlDrawApp.ts

@@ -1,674 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable @typescript-eslint/no-empty-function */
-import {
-  BitmapFont,
-  BitmapText,
-  Container,
-  DisplayObject,
-  FederatedMouseEvent,
-  IPointData,
-  Point,
-} from 'pixi.js';
-import { GraphicIdGenerator } from '../core/IdGenerator';
-import { GraphicData, GraphicTemplate, JlGraphic } from '../core/JlGraphic';
-import {
-  AppDragEvent,
-  AppInteractionPlugin,
-  CombinationKey,
-  GraphicTransformEvent,
-  InteractionPlugin,
-  KeyListener,
-  ShiftData,
-} from '../plugins';
-import { CommonMouseTool } from '../plugins/CommonMousePlugin';
-import { MenuItemOptions } from '../ui/Menu';
-import {
-  DOWN,
-  DebouncedFunction,
-  LEFT,
-  RIGHT,
-  UP,
-  debounce,
-  recursiveChildren,
-} from '../utils';
-import {
-  GraphicDataUpdateOperation,
-  UpdateCanvasOperation,
-} from './BasicOperation';
-import {
-  GraphicApp,
-  GraphicAppOptions,
-  ICanvasProperties,
-  IGraphicApp,
-  IJlCanvas,
-} from './JlGraphicApp';
-
-/**
- * 图形绘制助手
- */
-export abstract class GraphicDrawAssistant<
-  GT extends GraphicTemplate,
-  GD extends GraphicData
-> extends AppInteractionPlugin {
-  readonly __GraphicDrawAssistant = true;
-  app: IDrawApp;
-  type: string; // 图形对象类型
-  description: string; // 描述
-  icon: string; // 界面显示的图标
-  container: Container = new Container();
-  graphicTemplate: GT;
-
-  escListener: KeyListener = new KeyListener({
-    value: 'Escape',
-    onRelease: () => {
-      this.onEsc();
-    },
-  });
-
-  onEsc() {
-    this.createAndStore(true);
-  }
-
-  constructor(
-    graphicApp: IDrawApp,
-    graphicTemplate: GT,
-    icon: string,
-    description: string
-  ) {
-    super(graphicTemplate.type, graphicApp);
-    this.app = graphicApp;
-    this.type = graphicTemplate.type;
-    this.graphicTemplate = graphicTemplate;
-    this.icon = icon;
-    this.description = description;
-    this.app.registerGraphicTemplates(this.graphicTemplate);
-  }
-
-  public get canvas(): IJlCanvas {
-    return this.app.canvas;
-  }
-
-  bind(): void {
-    this.app.drawing = true;
-    const canvas = this.canvas;
-    canvas.addChild(this.container);
-    canvas.on('mousedown', this.onLeftDown, this);
-    canvas.on('mousemove', this.onMouseMove, this);
-    canvas.on('mouseup', this.onLeftUp, this);
-    canvas.on('rightdown', this.onRightDown, this);
-    canvas.on('rightup', this.onRightUp, this);
-    canvas.on('_rightclick', this.onRightClick, this);
-
-    this.app.viewport.wheel({
-      percent: 0.01,
-    });
-    this.app.addKeyboardListener(this.escListener);
-
-    this.app.viewport.drag({
-      mouseButtons: 'right',
-    });
-  }
-  unbind(): void {
-    this.clearCache();
-    const canvas = this.canvas;
-    if (this.container?.parent) {
-      canvas.removeChild(this.container);
-    }
-    canvas.off('mousedown', this.onLeftDown, this);
-    canvas.off('mousemove', this.onMouseMove, this);
-    canvas.off('mouseup', this.onLeftUp, this);
-    canvas.off('rightdown', this.onRightDown, this);
-    canvas.off('rightup', this.onRightUp, this);
-
-    this.app.viewport.plugins.remove('wheel');
-
-    this.app.removeKeyboardListener(this.escListener);
-
-    this.app.viewport.plugins.remove('drag');
-    this.app.drawing = false;
-  }
-
-  onLeftDown(e: FederatedMouseEvent) {}
-
-  onMouseMove(e: FederatedMouseEvent) {
-    this.redraw(this.toCanvasCoordinates(e.global));
-  }
-
-  onLeftUp(e: FederatedMouseEvent) {}
-  onRightDown(e: FederatedMouseEvent) {}
-  onRightUp(e: FederatedMouseEvent) {}
-  onRightClick(e: FederatedMouseEvent) {
-    this.finish();
-  }
-  /**
-   * 获取下一个id
-   */
-  nextId(): string {
-    return GraphicIdGenerator.next();
-  }
-
-  clearCache(): void {}
-
-  /**
-   * 重绘
-   * @param cp 鼠标所在画布坐标
-   */
-  abstract redraw(cp: Point): void;
-
-  abstract prepareData(data: GD): boolean;
-
-  toCanvasCoordinates(p: Point): Point {
-    return this.app.toCanvasCoordinates(p);
-  }
-  /**
-   * 保存创建的图形对象
-   */
-  storeGraphic(...graphics: JlGraphic[]): void {
-    this.app.addGraphicAndRecord(...graphics);
-  }
-  /**
-   * 创建并添加到图形App
-   */
-  createAndStore(finish: boolean): JlGraphic | null {
-    const data = this.graphicTemplate.datas as GD;
-    data.id = this.nextId();
-    data.graphicType = this.graphicTemplate.type;
-    if (!this.prepareData(data)) {
-      if (finish) {
-        this.finish();
-      }
-      return null;
-    }
-    const template = this.graphicTemplate;
-    const g = template.new();
-    g.loadData(data);
-    this.storeGraphic(g);
-    if (finish) {
-      this.finish(g);
-    }
-    return g;
-  }
-
-  /**
-   * 绘制完成
-   */
-  finish(...graphics: JlGraphic[]): void {
-    this.clearCache();
-    this.app.interactionPlugin(CommonMouseTool.Name).resume();
-    this.app.updateSelected(...graphics);
-  }
-}
-
-/**
- * 绘制助手类型
- */
-export type DrawAssistant = GraphicDrawAssistant<GraphicTemplate, GraphicData>;
-
-/**
- * 绘制配置选项
- */
-export type DrawAppOptions = GraphicAppOptions;
-
-/**
- * 绘制应用接口
- */
-export interface IDrawApp extends IGraphicApp {
-  /**
-   * 是否正在绘制图形
-   */
-  get drawing(): boolean;
-  /**
-   * 更新绘制中状态
-   */
-  set drawing(value: boolean);
-  /**
-   * 设置配置选项
-   * @param options
-   */
-  setOptions(options: DrawAppOptions): void;
-  /**
-   * 获取绘制助手
-   */
-  getDrawAssistant<DA extends DrawAssistant>(graphicType: string): DA;
-  /**
-   * 更新画布并记录
-   * @param data
-   */
-  updateCanvasAndRecord(data: ICanvasProperties): void;
-  /**
-   * 更新图形并记录
-   * @param g
-   * @param data
-   */
-  updateGraphicAndRecord(g: JlGraphic, data: GraphicData): void;
-  /**
-   * 绑定form表单对象
-   * @param form
-   */
-  bindFormData(form: GraphicData): void;
-  /**
-   * 解绑form表单对象
-   * @param form
-   */
-  unbindFormData(form: GraphicData): void;
-}
-
-/**
- * 绘制应用
- */
-export class JlDrawApp extends GraphicApp implements IDrawApp {
-  font: BitmapFont = BitmapFont.from(
-    'coordinates',
-    {
-      fontFamily: 'Roboto',
-      fontSize: 16,
-      fill: '#ff2700',
-    },
-    { chars: ['画布坐标:() 屏幕坐标:() 缩放:.,', ['0', '9']] }
-  );
-  coordinates: BitmapText = new BitmapText('画布坐标: (0, 0) 屏幕坐标:(0, 0)', {
-    fontName: 'coordinates',
-  });
-  scaleText: BitmapText = new BitmapText('缩放: 1', {
-    fontName: 'coordinates',
-  });
-
-  drawAssistants: DrawAssistant[] = [];
-  _drawing = false;
-
-  private debouncedFormDataUpdator: DebouncedFunction<(g: JlGraphic) => void>;
-
-  get drawing(): boolean {
-    return this._drawing;
-  }
-  set drawing(value: boolean) {
-    this._drawing = value;
-  }
-
-  constructor(options: DrawAppOptions) {
-    super(options);
-
-    this.appendDrawStatesDisplay();
-
-    // 拖拽操作记录
-    this.appOperationRecord();
-    // 绑定通用键盘操作
-    this.bindKeyboardOperation();
-    this.formDataSyncListen();
-
-    this.debouncedFormDataUpdator = debounce(this.doFormDataUpdate, 60);
-  }
-
-  setOptions(options: DrawAppOptions): void {
-    super.setOptions(options);
-  }
-
-  registerInteractionPlugin(...plugins: InteractionPlugin[]): void {
-    plugins.forEach((plugin) => {
-      if (plugin instanceof GraphicDrawAssistant) {
-        this.drawAssistants.push(plugin);
-      }
-      super.registerInteractionPlugin(plugin);
-    });
-  }
-
-  getDrawAssistant<DA extends DrawAssistant>(graphicType: string): DA {
-    const sda = this.drawAssistants
-      .filter((da) => da.type === graphicType)
-      .pop();
-    if (!sda) {
-      throw new Error(`未找到图形绘制助手: ${graphicType}`);
-    }
-    return sda as DA;
-  }
-
-  private appOperationRecord() {
-    let dragStartDatas: GraphicData[] = [];
-    this.on('drag_op_start', (e: AppDragEvent) => {
-      // 图形拖拽，记录初始数据
-      if (!e.target.isCanvas()) {
-        dragStartDatas = this.selectedGraphics.map((g) => g.saveData());
-      }
-    });
-    // 图形拖拽操作监听
-    this.on('drag_op_end', () => {
-      // 图形拖拽，记录操作
-      if (dragStartDatas.length > 0) {
-        const newData = this.selectedGraphics.map((g) => g.saveData());
-        this.opRecord.record(
-          new GraphicDataUpdateOperation(
-            this,
-            this.selectedGraphics,
-            dragStartDatas,
-            newData
-          )
-        );
-        dragStartDatas = [];
-      }
-    });
-    // 菜单操作
-    let preMenuHandleDatas: GraphicData[] = [];
-    this.on('pre-menu-handle', (menu: MenuItemOptions) => {
-      if (menu.name === '撤销' || menu.name === '重做') {
-        return;
-      }
-      preMenuHandleDatas = this.selectedGraphics.map((g) => g.saveData());
-    });
-    this.on('post-menu-handle', () => {
-      if (preMenuHandleDatas.length > 0) {
-        const newData = this.selectedGraphics.map((g) => g.saveData());
-        this.opRecord.record(
-          new GraphicDataUpdateOperation(
-            this,
-            this.selectedGraphics,
-            preMenuHandleDatas,
-            newData
-          )
-        );
-        preMenuHandleDatas = [];
-      }
-    });
-  }
-
-  /**
-   * 绘制状态信息显示
-   */
-  private appendDrawStatesDisplay(): void {
-    this.pixi.stage.addChild(this.coordinates);
-    this.pixi.stage.addChild(this.scaleText);
-    const bound = this.coordinates.getLocalBounds();
-    this.scaleText.position.set(bound.width + 10, 0);
-    this.canvas.on('mousemove', (e) => {
-      if (e.target) {
-        const { x, y } = this.toCanvasCoordinates(e.global);
-        const cpTxt = `(${x}, ${y})`;
-        const tp = e.global;
-        const tpTxt = `(${tp.x}, ${tp.y})`;
-        this.coordinates.text = `画布坐标:${cpTxt} 屏幕坐标:${tpTxt}`;
-        const bound = this.coordinates.getLocalBounds();
-        this.scaleText.position.set(bound.width + 10, 0);
-      }
-    });
-    this.viewport.on('zoomed-end', () => {
-      this.scaleText.text = `缩放: ${this.viewport.scaled}`;
-    });
-  }
-
-  bindKeyboardOperation(): void {
-    this.addKeyboardListener(
-      // Ctrl + A
-      new KeyListener({
-        value: 'KeyA',
-        combinations: [CombinationKey.Ctrl],
-        onPress: (e: KeyboardEvent, app: IGraphicApp) => {
-          if (e.ctrlKey) {
-            (app as JlDrawApp).selectAllGraphics();
-          }
-        },
-      })
-    );
-
-    // 复制功能
-    this.addKeyboardListener(
-      new KeyListener({
-        value: 'KeyD',
-        combinations: [CombinationKey.Shift],
-        onPress: (e: KeyboardEvent, app: IGraphicApp) => {
-          this.graphicCopyPlugin.init();
-        },
-      })
-    );
-    this.addKeyboardListener(
-      new KeyListener({
-        // Ctrl + Z
-        value: 'KeyZ',
-        global: true,
-        combinations: [CombinationKey.Ctrl],
-        onPress: (e: KeyboardEvent, app: IGraphicApp) => {
-          app.opRecord.undo();
-        },
-      })
-    );
-    this.addKeyboardListener(
-      new KeyListener({
-        // Ctrl + Shift + Z
-        value: 'KeyZ',
-        global: true,
-        combinations: [CombinationKey.Ctrl, CombinationKey.Shift],
-        onPress: (e: KeyboardEvent, app: IGraphicApp) => {
-          app.opRecord.redo();
-        },
-      })
-    );
-
-    this.addKeyboardListener(
-      new KeyListener({
-        value: 'Delete',
-        onPress: (e: KeyboardEvent, app: IGraphicApp) => {
-          app.deleteGraphicAndRecord(...app.selectedGraphics);
-        },
-      })
-    );
-    this.addKeyboardListener(
-      new KeyListener({
-        value: 'ArrowUp',
-        pressTriggerAsOriginalEvent: true,
-        onPress: (e: KeyboardEvent, app: IGraphicApp) => {
-          updateGraphicPositionOnKeyboardEvent(app, UP);
-        },
-        onRelease: (e: KeyboardEvent, app: IGraphicApp) => {
-          recordGraphicMoveOperation(app);
-        },
-      })
-    );
-    this.addKeyboardListener(
-      new KeyListener({
-        value: 'ArrowDown',
-        pressTriggerAsOriginalEvent: true,
-        onPress: (e: KeyboardEvent, app: IGraphicApp) => {
-          updateGraphicPositionOnKeyboardEvent(app, DOWN);
-        },
-        onRelease: (e: KeyboardEvent, app: IGraphicApp) => {
-          recordGraphicMoveOperation(app);
-        },
-      })
-    );
-    this.addKeyboardListener(
-      new KeyListener({
-        value: 'ArrowLeft',
-        pressTriggerAsOriginalEvent: true,
-        onPress: (e: KeyboardEvent, app: IGraphicApp) => {
-          updateGraphicPositionOnKeyboardEvent(app, LEFT);
-        },
-        onRelease: (e: KeyboardEvent, app: IGraphicApp) => {
-          recordGraphicMoveOperation(app);
-        },
-      })
-    );
-    this.addKeyboardListener(
-      new KeyListener({
-        value: 'ArrowRight',
-        pressTriggerAsOriginalEvent: true,
-        onPress: (e: KeyboardEvent, app: IGraphicApp) => {
-          updateGraphicPositionOnKeyboardEvent(app, RIGHT);
-        },
-        onRelease: (e: KeyboardEvent, app: IGraphicApp) => {
-          recordGraphicMoveOperation(app);
-        },
-      })
-    );
-  }
-
-  /**
-   * 图形对象存储处理,默认添加图形交互
-   * @param graphic
-   */
-  beforeGraphicStore(graphic: JlGraphic): void {
-    graphic.eventMode = 'static';
-    graphic.selectable = true;
-    graphic.draggable = true;
-    graphic.on('repaint', () => {
-      this.handleFormDataUpdate(graphic);
-    });
-    graphic.on('transformend', () => {
-      this.handleFormDataUpdate(graphic);
-    });
-  }
-
-  formData: GraphicData | undefined = undefined;
-
-  /**
-   * 绑定form表单对象
-   * @param form
-   */
-  bindFormData(form: GraphicData): void {
-    this.formData = form;
-    if (this.formData && this.selectedGraphics.length == 1) {
-      if (this.formData.graphicType == this.selectedGraphics[0].type) {
-        this.formData.copyFrom(this.selectedGraphics[0].saveData());
-      } else {
-        this.formData = undefined;
-      }
-    }
-  }
-
-  /**
-   * 移除form绑定
-   * @param form
-   */
-  unbindFormData(form: GraphicData): void {
-    if (this.formData == form) {
-      this.formData = undefined;
-    }
-  }
-
-  private formDataSyncListen(): void {
-    this.on('graphicselected', () => {
-      if (this.selectedGraphics.length == 1) {
-        this.handleFormDataUpdate(this.selectedGraphics[0]);
-      }
-    });
-  }
-
-  /**
-   * 处理表单数据更新（使用debounce限流）
-   */
-  private handleFormDataUpdate(g: JlGraphic): void {
-    this.debouncedFormDataUpdator(this, g);
-  }
-
-  private doFormDataUpdate(g: JlGraphic): void {
-    if (this.selectedGraphics.length > 1) return;
-    if (this.formData && g.type === this.formData.graphicType) {
-      this.formData.copyFrom(g.saveData());
-    }
-  }
-
-  updateCanvasAndRecord(data: ICanvasProperties) {
-    const old = this.canvas.properties.clone();
-    this.canvas.update(data);
-    const newVal = this.canvas.properties.clone();
-    this.opRecord.record(
-      new UpdateCanvasOperation(this, this.canvas, old, newVal)
-    );
-  }
-
-  updateGraphicAndRecord(g: JlGraphic, data: GraphicData) {
-    const old = g.saveData();
-    g.updateData(data);
-    const newVal = g.saveData();
-    this.opRecord.record(
-      new GraphicDataUpdateOperation(this, [g], [old], [newVal])
-    );
-  }
-}
-
-let dragStartDatas: GraphicData[] = [];
-
-function handleArrowKeyMoveGraphics(
-  app: IGraphicApp,
-  handler: (obj: DisplayObject) => void
-) {
-  if (
-    app.selectedGraphics.length === 1 &&
-    app.selectedGraphics[0].hasSelectedChilds()
-  ) {
-    recursiveChildren(app.selectedGraphics[0], (child) => {
-      if (child.selected && child.draggable) {
-        handler(child);
-      }
-    });
-  } else {
-    app.selectedGraphics.forEach((g) => {
-      handler(g);
-    });
-  }
-}
-
-function updateGraphicPositionOnKeyboardEvent(
-  app: IGraphicApp,
-  dp: IPointData
-) {
-  let dragStart = false;
-  if (dragStartDatas.length === 0) {
-    dragStartDatas = app.selectedGraphics.map((g) => g.saveData());
-    dragStart = true;
-  }
-  handleArrowKeyMoveGraphics(app, (g) => {
-    if (dragStart) {
-      g.shiftStartPoint = g.position.clone();
-      g.emit(
-        'transformstart',
-        GraphicTransformEvent.shift(g, ShiftData.new(g.shiftStartPoint))
-      );
-    } else {
-      g.shiftLastPoint = g.position.clone();
-    }
-    g.position.x += dp.x;
-    g.position.y += dp.y;
-    if (!dragStart) {
-      if (g.shiftStartPoint && g.shiftLastPoint) {
-        g.emit(
-          'transforming',
-          GraphicTransformEvent.shift(
-            g,
-            ShiftData.new(
-              g.shiftStartPoint,
-              g.position.clone(),
-              g.shiftLastPoint
-            )
-          )
-        );
-      }
-    }
-  });
-}
-function recordGraphicMoveOperation(app: IGraphicApp) {
-  if (
-    dragStartDatas.length > 0 &&
-    dragStartDatas.length === app.selectedGraphics.length
-  ) {
-    const newData = app.selectedGraphics.map((g) => g.saveData());
-    app.opRecord.record(
-      new GraphicDataUpdateOperation(
-        app,
-        app.selectedGraphics,
-        dragStartDatas,
-        newData
-      )
-    );
-
-    handleArrowKeyMoveGraphics(app, (g) => {
-      if (g.shiftStartPoint) {
-        g.emit(
-          'transformend',
-          GraphicTransformEvent.shift(
-            g,
-            ShiftData.new(g.shiftStartPoint, g.position.clone())
-          )
-        );
-      }
-    });
-  }
-  dragStartDatas = [];
-}

src/jl-graphic/app/index.ts

@@ -1,47 +0,0 @@
-import {
-  DrawAppOptions,
-  DrawAssistant,
-  GraphicDrawAssistant,
-  IDrawApp,
-  JlDrawApp,
-} from './JlDrawApp';
-import {
-  AppConsts,
-  GraphicApp,
-  GraphicAppOptions,
-  ICanvasProperties,
-  IGraphicApp,
-  IGraphicScene,
-  IGraphicStorage,
-  IJlCanvas,
-} from './JlGraphicApp';
-import { GraphicDataUpdateOperation } from './BasicOperation';
-
-/**
- * 实例化图形app
- * @param options
- * @returns
- */
-export function newGraphicApp(options: GraphicAppOptions): IGraphicApp {
-  return new GraphicApp(options);
-}
-
-/**
- * 实例化绘图app
- * @param options
- * @returns
- */
-export function newDrawApp(options: DrawAppOptions): IDrawApp {
-  return new JlDrawApp(options);
-}
-
-export { AppConsts, GraphicDrawAssistant, GraphicDataUpdateOperation };
-export type {
-  DrawAssistant,
-  ICanvasProperties,
-  IDrawApp,
-  IGraphicApp,
-  IGraphicScene,
-  IGraphicStorage,
-  IJlCanvas,
-};

src/jl-graphic/core/GraphicRelation.ts

@@ -1,187 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { JlGraphic } from './JlGraphic';
-
-/**
- * 图形关系数据
- */
-export class GraphicRelationParam {
-  g: JlGraphic;
-  param: any;
-  constructor(g: JlGraphic, param: any = null) {
-    this.g = g;
-    this.param = param;
-  }
-  isTheGraphic(g: JlGraphic): boolean {
-    return this.g.id === g.id;
-  }
-  getGraphic<G extends JlGraphic>(): G {
-    return this.g as G;
-  }
-  getParam<P>(): P {
-    return this.param as P;
-  }
-  equals(other: GraphicRelationParam): boolean {
-    return this.isTheGraphic(other.g) && this.param === other.param;
-  }
-}
-/**
- * 图形关系
- */
-export class GraphicRelation {
-  rp1: GraphicRelationParam;
-  rp2: GraphicRelationParam;
-  constructor(rp1: GraphicRelationParam, rp2: GraphicRelationParam) {
-    this.rp1 = rp1;
-    this.rp2 = rp2;
-  }
-
-  contains(g: JlGraphic): boolean {
-    return this.rp1.isTheGraphic(g) || this.rp2.isTheGraphic(g);
-  }
-
-  /**
-   * 获取给定图形的关系参数
-   * @param g
-   * @returns
-   */
-  getRelationParam(g: JlGraphic): GraphicRelationParam {
-    if (!this.contains(g)) {
-      throw new Error(
-        `图形关系${this.rp1.g.id}-${this.rp2.g.id}中不包含给定图形${g.id}`
-      );
-    }
-    if (this.rp1.isTheGraphic(g)) {
-      return this.rp1;
-    } else {
-      return this.rp2;
-    }
-  }
-  /**
-   * 获取关联的另一个图形的关系参数
-   * @param g
-   * @returns
-   */
-  getOtherRelationParam(g: JlGraphic): GraphicRelationParam {
-    if (!this.contains(g)) {
-      throw new Error(
-        `图形关系${this.rp1.g.id}-${this.rp2.g.id}中不包含给定图形${g.id}`
-      );
-    }
-    if (this.rp1.isTheGraphic(g)) {
-      return this.rp2;
-    } else {
-      return this.rp1;
-    }
-  }
-  /**
-   * 获取关联的另一个图形对象
-   * @param g
-   * @returns graphic
-   */
-  getOtherGraphic<G extends JlGraphic>(g: JlGraphic): G {
-    return this.getOtherRelationParam(g).g as G;
-  }
-
-  equals(orp1: GraphicRelationParam, orp2: GraphicRelationParam): boolean {
-    if (this.rp1.isTheGraphic(orp1.g)) {
-      return this.rp1.equals(orp1) && this.rp2.equals(orp2);
-    } else if (this.rp1.isTheGraphic(orp2.g)) {
-      return this.rp1.equals(orp2) && this.rp2.equals(orp1);
-    }
-    return false;
-  }
-
-  isEqualOther(other: GraphicRelation): boolean {
-    return this.equals(other.rp1, other.rp2);
-  }
-}
-
-/**
- * 图形关系管理
- */
-export class RelationManage {
-  relations: GraphicRelation[] = [];
-
-  isContainsRelation(
-    rp1: GraphicRelationParam,
-    rp2: GraphicRelationParam
-  ): boolean {
-    const relation = this.relations.find((relation) =>
-      relation.equals(rp1, rp2)
-    );
-    return !!relation;
-  }
-  addRelation(
-    rp1: GraphicRelationParam | JlGraphic,
-    rp2: GraphicRelationParam | JlGraphic
-  ): void {
-    if (!(rp1 instanceof GraphicRelationParam)) {
-      rp1 = new GraphicRelationParam(rp1);
-    }
-    if (!(rp2 instanceof GraphicRelationParam)) {
-      rp2 = new GraphicRelationParam(rp2);
-    }
-    if (!this.isContainsRelation(rp1, rp2)) {
-      const relation = new GraphicRelation(rp1, rp2);
-      this.relations.push(relation);
-    }
-  }
-
-  /**
-   * 获取图形的所有关系
-   * @param g
-   * @returns
-   */
-  getRelationsOfGraphic(g: JlGraphic): GraphicRelation[] {
-    return this.relations.filter((rl) => rl.contains(g));
-  }
-
-  /**
-   * 获取指定图形的指定关系图形类型的所有关系
-   * @param g 指定图形
-   * @param type 关联图形的类型
-   * @returns
-   */
-  getRelationsOfGraphicAndOtherType(
-    g: JlGraphic,
-    type: string
-  ): GraphicRelation[] {
-    return this.relations.filter(
-      (rl) => rl.contains(g) && rl.getOtherGraphic(g).type === type
-    );
-  }
-
-  /**
-   * 删除关系
-   * @param relation
-   */
-  private deleteRelation(relation: GraphicRelation): void {
-    const index = this.relations.findIndex((rl) => rl.isEqualOther(relation));
-    if (index >= 0) {
-      this.relations.splice(index, 1);
-    }
-  }
-  /**
-   * 删除指定图形的所有关系
-   * @param g
-   */
-  deleteRelationOfGraphic(g: JlGraphic): void {
-    const relations = this.getRelationsOfGraphic(g);
-    relations.forEach((rl) => this.deleteRelation(rl));
-  }
-  /**
-   * 删除指定图形的所有关系
-   * @param g
-   */
-  deleteRelationOfGraphicAndOtherType(g: JlGraphic, type: string): void {
-    const relations = this.getRelationsOfGraphicAndOtherType(g, type);
-    relations.forEach((rl) => this.deleteRelation(rl));
-  }
-
-  /**
-   * 清空
-   */
-  clear() {
-    this.relations.splice(0, this.relations.length);
-  }
-}

src/jl-graphic/core/GraphicStore.ts

@@ -1,206 +0,0 @@
-import { RelationManage } from './GraphicRelation';
-import { JlGraphic } from './JlGraphic';
-
-export interface GraphicQueryStore {
-  /**
-   * 获取所有图形对象
-   */
-  getAllGraphics(): JlGraphic[];
-  /**
-   * 根据id获取图形
-   */
-  queryById<T extends JlGraphic>(id: string): T;
-  /**
-   * 根据id模糊查询图形
-   * @param id
-   */
-  queryByIdAmbiguous(id: string): JlGraphic[];
-
-  /**
-   * 根据类型获取图形列表
-   */
-  queryByType<T extends JlGraphic>(type: string): T[];
-  /**
-   * 根据code查询
-   * @param code
-   */
-  queryByCode(code: string): JlGraphic[] | undefined;
-  /**
-   * 根据code模糊查询图形
-   * @param code
-   * @param type
-   */
-  queryByCodeAmbiguous(code: string): JlGraphic[];
-  /**
-   * 根据id或code查询图形
-   * @param v
-   */
-  queryByIdOrCode(v: string): JlGraphic[];
-  /**
-   * 根据id或code及类型查询图形
-   * @param v
-   * @param type
-   */
-  queryByIdOrCodeAndType(v: string, type: string): JlGraphic[];
-  /**
-   * 根据code和类型获取图形
-   * @param code
-   * @param type
-   */
-  queryByCodeAndType<T extends JlGraphic>(
-    code: string,
-    type: string
-  ): T | undefined;
-  /**
-   * 根据code和类型模糊查询图形
-   * @param code
-   * @param type
-   */
-  queryByCodeAndTypeAmbiguous<T extends JlGraphic>(
-    code: string,
-    type: string
-  ): T[];
-}
-
-/**
- * 图形存储
- */
-export class GraphicStore implements GraphicQueryStore {
-  store: Map<string, JlGraphic>;
-  relationManage: RelationManage;
-  constructor() {
-    this.store = new Map<string, JlGraphic>();
-    this.relationManage = new RelationManage();
-  }
-
-  /**
-   * 获取所有图形对象
-   */
-  getAllGraphics(): JlGraphic[] {
-    return [...this.store.values()];
-  }
-  queryById<T extends JlGraphic>(id: string): T {
-    const graphic = this.store.get(id) as T;
-    if (!graphic) throw Error(`未找到id为 [${id}] 的图形.`);
-    return this.store.get(id) as T;
-  }
-  queryByIdAmbiguous(id: string): JlGraphic[] {
-    const list: JlGraphic[] = [];
-    this.store.forEach((g) => {
-      if (g.id.search(id) >= 0) {
-        list.push(g);
-      }
-    });
-    return list;
-  }
-  queryByType<T extends JlGraphic>(type: string): T[] {
-    const list: T[] = [];
-    this.store.forEach((g) => {
-      if (g.type === type) {
-        list.push(g as T);
-      }
-    });
-    return list;
-  }
-  queryByCode(code: string): JlGraphic[] | undefined {
-    const list: JlGraphic[] = [];
-    this.store.forEach((g) => {
-      if (g.code === code) {
-        list.push(g);
-      }
-    });
-    return list;
-  }
-  queryByCodeAmbiguous(code: string): JlGraphic[] {
-    const list: JlGraphic[] = [];
-    this.store.forEach((g) => {
-      if (g.code.search(code) >= 0) {
-        list.push(g);
-      }
-    });
-    return list;
-  }
-  queryByIdOrCode(s: string): JlGraphic[] {
-    const list: JlGraphic[] = [];
-    this.store.forEach((g) => {
-      if (g.isIdOrCode(s)) {
-        list.push(g);
-      }
-    });
-    return list;
-  }
-  queryByIdOrCodeAndType(s: string, type: string): JlGraphic[] {
-    const list: JlGraphic[] = [];
-    this.store.forEach((g) => {
-      if (g.isIdOrCode(s) && g.type === type) {
-        list.push(g);
-      }
-    });
-    return list;
-  }
-  queryByCodeAndType<T extends JlGraphic>(
-    code: string,
-    type: string
-  ): T | undefined {
-    for (const item of this.store.values()) {
-      if (item.code === code && item.type === type) {
-        return item as T;
-      }
-    }
-  }
-  queryByCodeAndTypeAmbiguous<T extends JlGraphic>(
-    code: string,
-    type: string
-  ): T[] {
-    const list: T[] = [];
-    this.store.forEach((g) => {
-      if (g.type === type && g.code.search(code) >= 0) {
-        list.push(g as T);
-      }
-    });
-    return list;
-  }
-
-  /**
-   * 存储图形对象
-   * @param graphics 要存储的图形
-   */
-  storeGraphics(graphic: JlGraphic): boolean {
-    if (!graphic.id || graphic.id.trim() === '') {
-      throw new Error(`存储图形对象异常: id为空, ${graphic}`);
-    }
-    if (this.store.has(graphic.id)) {
-      // 已经存在
-      const exist = this.store.get(graphic.id);
-      console.error(`已经存在id=${graphic.id}的设备${exist}`);
-      return false;
-    } else {
-      this.store.set(graphic.id, graphic);
-      graphic.queryStore = this;
-      graphic.relationManage = this.relationManage;
-      return true;
-    }
-  }
-  /**
-   * 删除图形
-   * @param graph 要删除的图形
-   */
-  deleteGraphics(graphic: JlGraphic): JlGraphic | undefined {
-    const id = graphic.id;
-    const remove = this.store.get(id);
-    if (remove) {
-      this.store.delete(id);
-      // 删除图形关系
-      this.relationManage.deleteRelationOfGraphic(remove);
-    }
-    return remove;
-  }
-
-  /**
-   * 清空
-   */
-  clear() {
-    this.relationManage.clear();
-    this.store.clear();
-  }
-}

src/jl-graphic/core/IdGenerator.ts

@@ -1,28 +0,0 @@
-/**
- * ID生成器
- */
-export class IdGenerator {
-  serial = 0;
-  type: string;
-
-  constructor(type: string) {
-    this.type = type;
-  }
-
-  next(): string {
-    ++this.serial;
-    // console.log(this.getType() + this.serial)
-    return this.getType() + this.serial;
-  }
-
-  getType(): string {
-    return this.type;
-  }
-
-  initSerial(serial: number): void {
-    // console.log(serial)
-    this.serial = serial;
-  }
-}
-
-export const GraphicIdGenerator: IdGenerator = new IdGenerator('');

src/jl-graphic/core/index.ts

@@ -1,4 +0,0 @@
-export * from './JlGraphic';
-export * from './IdGenerator';
-export * from './GraphicRelation';
-export * from './GraphicStore';

src/jl-graphic/global.d.ts

@@ -1,158 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-declare namespace GlobalMixins {
-  type JlCanvasType = import('./app').IJlCanvas;
-  type CanvasProperties = import('./app').ICanvasProperties;
-  type GraphicApp = import('./app').IGraphicApp;
-  type JlGraphicType = import('./core').JlGraphic;
-  type GraphicData = import('./core').GraphicData;
-  type GraphicState = import('./core').GraphicState;
-  type GraphicTransform = import('./core').GraphicTransform;
-  type GraphicTransformEvent = import('./plugins').GraphicTransformEvent;
-  type BoundsGraphic = import('./plugins').BoundsGraphic;
-  type IPointDataType = import('pixi.js').IPointData;
-  type PointType = import('pixi.js').Point;
-  type FederatedMouseEvent = import('pixi.js').FederatedMouseEvent;
-  type DisplayObjectType = import('pixi.js').DisplayObject;
-  type ContainerType = import('pixi.js').Container;
-  interface DisplayObjectEvents {
-    'enter-absorbable-area': [number | undefined, number | undefined];
-    'out-absorbable-area': [number | undefined, number | undefined];
-    dataupdate: [newVal: any, oldVal: any];
-    stateupdate: [newVal: any, oldVal: any];
-    repaint: [DisplayObjectType];
-    transformstart: [e: GraphicTransformEvent];
-    transforming: [e: GraphicTransformEvent];
-    transformend: [e: GraphicTransformEvent];
-    _rightclick: [e: FederatedMouseEvent];
-    _leftclick: [e: FederatedMouseEvent];
-    selected: [DisplayObjectType];
-    unselected: [DisplayObjectType];
-    childselected: [DisplayObjectType];
-    childunselected: [DisplayObjectType];
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface GraphicAppEvents {
-    // propertiesupdate: [selectedData: GraphicData | CanvasProperties | null];
-  }
-
-  interface DisplayObject {
-    _selectable: boolean;
-    _selected: boolean;
-    selectable: boolean; //是否可选中
-    selected: boolean; // 是否选中
-    _childEdit: boolean; // 子元素编辑模式
-    childEdit: boolean;
-    _transformSave: boolean; // 变换是否保存
-    transformSave: boolean; //
-    _assistantAppendMap: Map<string, DisplayObjectType> | null; // 辅助附加图形map
-    assistantAppendMap: Map<string, DisplayObjectType>;
-    _draggable: boolean; // 是否可拖拽
-    draggable: boolean;
-    _shiftStartPoint: PointType | null; // 位移起始坐标
-    shiftStartPoint: PointType | null;
-    _shiftLastPoint: PointType | null; // 位移上一个事件时坐标
-    shiftLastPoint: PointType | null;
-    _scalable: boolean; // 是否可缩放
-    scalable: boolean;
-    _keepAspectRatio: boolean; // 缩放是否保持纵横比,默认保持
-    keepAspectRatio: boolean;
-    _rotatable: boolean; // 是否可旋转
-    rotatable: boolean;
-    worldAngle: number; // 世界角度,(-180, 180]
-    /**
-     * 获取所有父级元素叠加缩放
-     */
-    getAllParentScaled(): PointType;
-    /**
-     * 获取位置在画布的坐标
-     */
-    getPositionOnCanvas(): PointType;
-    /**
-     * 通过画布坐标更新位置
-     * @param p 画布坐标
-     */
-    updatePositionByCanvasPosition(p: IPointData): void;
-    /**
-     * 保存变换数据
-     */
-    saveTransform(): GraphicTransform;
-    /**
-     * 加载变换
-     * @param transform 变换数据
-     */
-    loadTransform(transform: GraphicTransform): void;
-    isChild(obj: DisplayObject): boolean; // 是否子元素
-    isParent(obj: DisplayObject): boolean; // 是否父元素
-    isAssistantAppend(): boolean; // 是否辅助附加图形
-    addAssistantAppend<D extends DisplayObjectType>(...appends: D[]): void;
-    removeAssistantAppend(...appends: DisplayObjectType[]): void;
-    removeAssistantAppendByName(...names: string[]): void;
-    removeAllAssistantAppend(): void;
-    getAssistantAppend<D extends DisplayObjectType>(
-      name: string
-    ): D | undefined; // 获取辅助附加图形对象
-    isGraphic(): boolean; // 是否业务图形对象
-    getGraphic<G extends JlGraphicType>(): G | null; // 获取所属的图形对象
-    isGraphicChild(): boolean; // 是否图形子元素
-    onAddToCanvas(): void; // 添加到画布处理
-    onRemoveFromCanvas(): void; //从画布移除处理
-    isInCanvas(): boolean; // 是否添加到画布中
-    getCanvas(): JlCanvasType; // 获取所在画布
-    isCanvas(): boolean; // 是否画布对象
-    getViewport(): Viewport; // 获取视口
-    getGraphicApp(): GraphicApp; // 获取图形app
-    /**
-     * 图形本地坐标转为画布坐标
-     * @param p 图形本地坐标
-     */
-    localToCanvasPoint(p: IPointData): PointType;
-    /**
-     * 批量转换图形本地坐标为画布坐标
-     * @param points 图形本地坐标
-     */
-    localToCanvasPoints(...points: IPointData[]): PointType[];
-    /**
-     * 画布坐标转为图形本地坐标
-     * @param p 画布坐标
-     */
-    canvasToLocalPoint(p: IPointData): PointType;
-    /**
-     * 批量转换画布坐标为图形本地坐标
-     * @param points 画布坐标
-     */
-    canvasToLocalPoints(...points: IPointData[]): PointType[];
-    /**
-     * 本地坐标转为屏幕坐标
-     * @param p 本地坐标
-     */
-    localToScreenPoint(p: IPointData): PointType;
-    /**
-     * 批量转换本地坐标为屏幕坐标
-     * @param points 本地坐标
-     */
-    localToScreenPoints(...points: IPointData[]): PointType[];
-    /**
-     * 屏幕坐标转为本地坐标
-     * @param p 屏幕坐标
-     */
-    screenToLocalPoint(p: IPointData): PointType;
-    /**
-     * 批量转换屏幕坐标为本地坐标
-     * @param points 屏幕坐标
-     */
-    screenToLocalPoints(...points: IPointData[]): PointType[]; // 批量
-
-    localBoundsToCanvasPoints(): PointType[]; // 本地包围框转为多边形点坐标
-  }
-
-  interface Graphics {
-    drawBezierCurve(
-      p1: IPointData,
-      p2: IPointData,
-      cp1: IPointData,
-      cp2: IPointData,
-      segmentsCount: number
-    ): Graphics;
-  }
-}

src/jl-graphic/graphic/AbsorbablePosition.ts

@@ -1,252 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import {
-  Color,
-  Container,
-  DisplayObject,
-  Graphics,
-  IPointData,
-  Point,
-} from 'pixi.js';
-import {
-  calculateFootPointFromPointToLine,
-  calculateIntersectionPointOfCircleAndPoint,
-  distance,
-  distance2,
-  isLineContainOther,
-  linePoint,
-} from '../utils';
-import { VectorGraphic, VectorGraphicUtil } from './VectorGraphic';
-
-/**
- * 抽象可吸附位置
- */
-export interface AbsorbablePosition extends Container {
-  /**
-   * 是否与另一个可吸附位置重叠(相似，但可能范围不同)
-   * @param other
-   */
-  isOverlapping(other: AbsorbablePosition): boolean;
-
-  /**
-   * 与另一个相似的吸附位置比较范围大小
-   * @param other
-   * @returns >0此吸附范围大，<0另一个吸附范围大，=0两个吸附范围一样大
-   */
-  compareTo(other: AbsorbablePosition): number;
-
-  /**
-   * 尝试吸附图形对象
-   * @param objs 图形对象列表
-   * @returns  如果吸附成功，返回true，否则false
-   */
-  tryAbsorb(...objs: DisplayObject[]): void;
-}
-
-/**
- * 可吸附点图形参数
- */
-export const AbsorbablePointParam = {
-  lineWidth: 1,
-  lineColor: '#000000',
-  fillColor: '#E77E0E',
-  radius: 5, // 半径
-};
-
-const AbsorbablePointGraphic = new Graphics();
-// AbsorbablePointGraphic.lineStyle(
-//   AbsorbablePointParam.lineWidth,
-//   AbsorbablePointParam.lineColor
-// );
-AbsorbablePointGraphic.beginFill(AbsorbablePointParam.fillColor);
-AbsorbablePointGraphic.drawCircle(0, 0, AbsorbablePointParam.radius);
-AbsorbablePointGraphic.endFill();
-
-/**
- * 可吸附点
- */
-export default class AbsorbablePoint
-  extends Graphics
-  implements AbsorbablePosition, VectorGraphic
-{
-  _point: Point;
-  absorbRange: number;
-  scaledListenerOn = false;
-
-  /**
-   *
-   * @param point 画布坐标
-   * @param absorbRange
-   */
-  constructor(point: IPointData, absorbRange = 10) {
-    super(AbsorbablePointGraphic.geometry);
-    this._point = new Point(point.x, point.y);
-    this.absorbRange = absorbRange;
-    this.position.copyFrom(this._point);
-    this.interactive;
-    VectorGraphicUtil.handle(this);
-  }
-  compareTo(other: AbsorbablePosition): number {
-    if (other instanceof AbsorbablePoint) {
-      return this.absorbRange - other.absorbRange;
-    }
-    throw new Error('非可吸附点');
-  }
-  isOverlapping(other: AbsorbablePosition): boolean {
-    if (other instanceof AbsorbablePoint) {
-      return (
-        this._point.equals(other._point) &&
-        this.absorbRange === other.absorbRange
-      );
-    }
-    return false;
-  }
-  tryAbsorb(...objs: DisplayObject[]): void {
-    for (let i = 0; i < objs.length; i++) {
-      const obj = objs[i];
-      const canvasPosition = obj.getPositionOnCanvas();
-      if (
-        distance(
-          this._point.x,
-          this._point.y,
-          canvasPosition.x,
-          canvasPosition.y
-        ) < this.absorbRange
-      ) {
-        obj.updatePositionByCanvasPosition(this._point);
-      }
-    }
-  }
-  updateOnScaled() {
-    const scaled = this.getAllParentScaled();
-    const scale = Math.max(scaled.x, scaled.y);
-    this.scale.set(1 / scale, 1 / scale);
-  }
-}
-
-/**
- * 可吸附线
- */
-export class AbsorbableLine extends Graphics implements AbsorbablePosition {
-  p1: Point;
-  p2: Point;
-  absorbRange: number;
-  _color = '#E77E0E';
-
-  /**
-   *
-   * @param p1 画布坐标
-   * @param p2 画布坐标
-   * @param absorbRange
-   */
-  constructor(p1: IPointData, p2: IPointData, absorbRange = 20) {
-    super();
-    this.p1 = new Point(p1.x, p1.y);
-    this.p2 = new Point(p2.x, p2.y);
-    this.absorbRange = absorbRange;
-    this.redraw();
-  }
-  isOverlapping(other: AbsorbablePosition): boolean {
-    if (other instanceof AbsorbableLine) {
-      const contain = isLineContainOther(
-        { p1: this.p1, p2: this.p2 },
-        { p1: other.p1, p2: other.p2 }
-      );
-      return contain;
-    }
-    return false;
-  }
-  compareTo(other: AbsorbablePosition): number {
-    if (other instanceof AbsorbableLine) {
-      return distance2(this.p1, this.p2) - distance2(other.p1, other.p2);
-    }
-    throw new Error('非可吸附线');
-  }
-  redraw() {
-    this.clear();
-    this.lineStyle(1, new Color(this._color));
-    this.moveTo(this.p1.x, this.p1.y);
-    this.lineTo(this.p2.x, this.p2.y);
-  }
-
-  tryAbsorb(...objs: DisplayObject[]): void {
-    for (let i = 0; i < objs.length; i++) {
-      const obj = objs[i];
-      const canvasPosition = obj.getPositionOnCanvas();
-      if (linePoint(this.p1, this.p2, canvasPosition, this.absorbRange, true)) {
-        const fp = calculateFootPointFromPointToLine(
-          this.p1,
-          this.p2,
-          canvasPosition
-        );
-        obj.updatePositionByCanvasPosition(fp);
-      }
-    }
-  }
-}
-
-/**
- * 可吸附圆
- */
-export class AbsorbableCircle extends Graphics implements AbsorbablePosition {
-  absorbRange: number;
-  p0: Point;
-  radius: number;
-  _color = '#E77E0E';
-
-  /**
-   *
-   * @param p 画布坐标
-   * @param radius
-   * @param absorbRange
-   */
-  constructor(p: IPointData, radius: number, absorbRange = 10) {
-    super();
-    this.p0 = new Point(p.x, p.y);
-    this.radius = radius;
-    this.absorbRange = absorbRange;
-    this.redraw();
-  }
-  isOverlapping(other: AbsorbablePosition): boolean {
-    if (other instanceof AbsorbableCircle) {
-      return this.p0.equals(other.p0) && this.radius === other.radius;
-    }
-    return false;
-  }
-  compareTo(other: AbsorbablePosition): number {
-    if (other instanceof AbsorbableCircle) {
-      return this.absorbRange - other.absorbRange;
-    }
-    throw new Error('非可吸附圆');
-  }
-
-  redraw() {
-    this.clear();
-    this.lineStyle(1, new Color(this._color));
-    this.drawCircle(this.p0.x, this.p0.y, this.radius);
-  }
-
-  tryAbsorb(...objs: DisplayObject[]): void {
-    for (let i = 0; i < objs.length; i++) {
-      const obj = objs[i];
-      const canvasPosition = obj.getPositionOnCanvas();
-      const len = distance(
-        this.p0.x,
-        this.p0.y,
-        canvasPosition.x,
-        canvasPosition.y
-      );
-      if (
-        len > this.radius - this.absorbRange &&
-        len < this.radius + this.absorbRange
-      ) {
-        // 吸附，计算直线与圆交点，更新对象坐标
-        const p = calculateIntersectionPointOfCircleAndPoint(
-          this.p0,
-          this.radius,
-          canvasPosition
-        );
-        obj.updatePositionByCanvasPosition(p);
-      }
-    }
-  }
-}

src/jl-graphic/graphic/DashedLine.ts

@@ -1,102 +0,0 @@
-import { Container, Graphics, IPointData, Point } from 'pixi.js';
-import { angleToAxisx } from '../utils';
-
-export interface IDashedLineOptions {
-  /**
-   * 每小段长度,默认4
-   */
-  length?: number;
-  /**
-   * 起始间隔,默认0
-   */
-  startSpace?: number;
-  /**
-   * 间隔长度,默认4
-   */
-  space?: number;
-  /**
-   * 线宽,默认1
-   */
-  lineWidth?: number;
-  /**
-   * 线色,默认黑
-   */
-  color?: string;
-}
-
-interface ICompleteDashedLineOptions extends IDashedLineOptions {
-  length: number;
-  startSpace: number;
-  space: number;
-  lineWidth: number;
-  color: string;
-}
-
-const DefaultDashedLineOptions: ICompleteDashedLineOptions = {
-  length: 4,
-  startSpace: 0,
-  space: 4,
-  lineWidth: 1,
-  color: '#0000ff',
-};
-
-export class DashedLine extends Container {
-  p1: Point;
-  p2: Point;
-  _options: ICompleteDashedLineOptions;
-  constructor(p1: IPointData, p2: IPointData, options?: IDashedLineOptions) {
-    super();
-    const config = Object.assign({}, DefaultDashedLineOptions, options);
-    this._options = config;
-    this.p1 = new Point(p1.x, p1.y);
-    this.p2 = new Point(p2.x, p2.y);
-    this.redraw();
-  }
-
-  setOptions(options: IDashedLineOptions) {
-    if (options.startSpace != undefined) {
-      this._options.startSpace = options.startSpace;
-    }
-    if (options.length != undefined) {
-      this._options.length = options.length;
-    }
-    if (options.space != undefined) {
-      this._options.space = options.space;
-    }
-    if (options.lineWidth != undefined) {
-      this._options.lineWidth = options.lineWidth;
-    }
-    if (options.color != undefined) {
-      this._options.color = options.color;
-    }
-    this.redraw();
-  }
-
-  redraw() {
-    this.removeChildren();
-    const p1 = this.p1;
-    const p2 = this.p2;
-    const option = this._options;
-    const total = Math.pow(
-      Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2),
-      0.5
-    );
-    let len = option.startSpace;
-    while (len < total) {
-      let dashedLen = option.length;
-      if (len + option.length > total) {
-        dashedLen = total - len;
-      }
-      const line = new Graphics();
-      line.lineStyle(option.lineWidth, option.color);
-      line.moveTo(len, 0);
-      line.lineTo(len + dashedLen, 0);
-      this.addChild(line);
-      len = len + dashedLen + option.space;
-    }
-
-    this.pivot.set(0, option.lineWidth / 2);
-    this.position.set(p1.x, p1.y);
-    this.angle = angleToAxisx(p1, p2);
-  }
-}

src/jl-graphic/graphic/DraggablePoint.ts

@@ -1,45 +0,0 @@
-import { Graphics, IPointData } from 'pixi.js';
-import { VectorGraphic, VectorGraphicUtil } from './VectorGraphic';
-
-/**
- * 拖拽点参数
- */
-export const DraggablePointParam = {
-  lineWidth: 1,
-  lineColor: 0x000000,
-  fillColor: 0xffffff,
-  radius: 5, // 半径
-};
-
-const DraggablePointGraphic = new Graphics();
-DraggablePointGraphic.lineStyle(
-  DraggablePointParam.lineWidth,
-  DraggablePointParam.lineColor
-);
-DraggablePointGraphic.beginFill(DraggablePointParam.fillColor);
-DraggablePointGraphic.drawCircle(0, 0, DraggablePointParam.radius);
-DraggablePointGraphic.endFill();
-
-/**
- * 拖拽点，用于更新图形属性
- */
-export class DraggablePoint extends Graphics implements VectorGraphic {
-  scaledListenerOn = false;
-  /**
-   *
-   * @param point 画布坐标点
-   */
-  constructor(point: IPointData) {
-    super(DraggablePointGraphic.geometry);
-    this.position.copyFrom(point);
-    this.eventMode = 'static';
-    this.draggable = true;
-    this.cursor = 'crosshair';
-    VectorGraphicUtil.handle(this);
-  }
-  updateOnScaled() {
-    const scaled = this.getAllParentScaled();
-    const scale = Math.max(scaled.x, scaled.y);
-    this.scale.set(1 / scale, 1 / scale);
-  }
-}

src/jl-graphic/graphic/VectorGraphic.ts

@@ -1,44 +0,0 @@
-import { DisplayObject } from 'pixi.js';
-
-export interface VectorGraphic extends DisplayObject {
-  scaledListenerOn: boolean;
-  updateOnScaled(): void;
-}
-
-export class VectorGraphicUtil {
-  static handle(obj: VectorGraphic): void {
-    const vg = obj;
-    const onScaleChange = function (obj: DisplayObject) {
-      if (vg.isParent(obj)) {
-        vg.updateOnScaled();
-      }
-    };
-    const registerScaleChange = function registerScaleChange(
-      obj: VectorGraphic
-    ): void {
-      if (!obj.scaledListenerOn) {
-        obj.scaledListenerOn = true;
-        obj.getGraphicApp().on('viewport-scaled', onScaleChange);
-      }
-    };
-    const unregisterScaleChange = function unregisterScaleChange(
-      obj: VectorGraphic
-    ): void {
-      obj.scaledListenerOn = false;
-      obj.getGraphicApp().off('viewport-scaled', onScaleChange);
-    };
-    obj.onAddToCanvas = function onAddToCanvas() {
-      obj.updateOnScaled();
-      registerScaleChange(obj);
-    };
-    obj.onRemoveFromCanvas = function onRemoveFromCanvas() {
-      unregisterScaleChange(obj);
-    };
-
-    obj.on('added', (container) => {
-      if (container.isInCanvas()) {
-        obj.onAddToCanvas();
-      }
-    });
-  }
-}

src/jl-graphic/graphic/VectorText.ts

@@ -1,37 +0,0 @@
-import { ICanvas, ITextStyle, Text, TextStyle } from 'pixi.js';
-import { VectorGraphic, VectorGraphicUtil } from '.';
-
-/**
- * 矢量文字.实现原理：在缩放发生变化时，更新fontSize
- */
-export class VectorText extends Text implements VectorGraphic {
-  vectorFontSize = 8;
-  scaled = 1;
-  scaledListenerOn = false;
-
-  constructor(
-    text?: string | number,
-    style?: Partial<ITextStyle> | TextStyle,
-    canvas?: ICanvas
-  ) {
-    super(text, style, canvas);
-    VectorGraphicUtil.handle(this);
-  }
-
-  updateOnScaled() {
-    const scaled = this.getAllParentScaled();
-    const scale = Math.max(scaled.x, scaled.y);
-    this.style.fontSize = this.vectorFontSize * scale;
-    this.scale.set(1 / scale, 1 / scale);
-  }
-
-  /**
-   * 设置矢量文字的字体大小
-   */
-  setVectorFontSize(fontSize: number) {
-    if (this.vectorFontSize !== fontSize) {
-      this.vectorFontSize = fontSize;
-      this.updateOnScaled();
-    }
-  }
-}

src/jl-graphic/graphic/index.ts

@@ -1,5 +0,0 @@
-export * from './VectorGraphic';
-export * from './VectorText';
-export * from './DraggablePoint';
-export * from './AbsorbablePosition';
-export * from './DashedLine';

src/jl-graphic/index.ts

@@ -1,7 +0,0 @@
-export * from './core';
-export * from './graphic';
-export * from './app';
-export * from './operation';
-export * from './utils';
-export * from './plugins';
-export * from './message';

src/jl-graphic/math/Constants.ts

@@ -1,26 +0,0 @@
-/**
- * 浮点数相等判断误差值
- */
-export const epsilon = 0.00001;
-
-/**
- * 判断浮点数是不是0
- * @param v
- * @returns
- */
-export function isZero(v: number) {
-  if (Math.abs(v) < epsilon) {
-    return true;
-  }
-  return false;
-}
-
-/**
- * 两浮点数是否相等
- * @param f1
- * @param f2
- * @returns
- */
-export function floatEquals(f1: number, f2: number): boolean {
-  return isZero(f1 - f2);
-}

src/jl-graphic/math/Vector2.ts

@@ -1,360 +0,0 @@
-/* eslint-disable @typescript-eslint/no-this-alias */
-
-import { epsilon } from './Constants';
-
-export default class Vector2 {
-  constructor(values?: [number, number]) {
-    if (values !== undefined) {
-      this.xy = values;
-    }
-  }
-
-  static from(p: { x: number; y: number }): Vector2 {
-    return new Vector2([p.x, p.y]);
-  }
-
-  private values = new Float32Array(2);
-
-  static readonly zero = new Vector2([0, 0]);
-  static readonly one = new Vector2([1, 1]);
-
-  get x(): number {
-    return this.values[0];
-  }
-
-  set x(value: number) {
-    this.values[0] = value;
-  }
-  get y(): number {
-    return this.values[1];
-  }
-  set y(value: number) {
-    this.values[1] = value;
-  }
-
-  get xy(): [number, number] {
-    return [this.values[0], this.values[1]];
-  }
-
-  set xy(values: [number, number]) {
-    this.values[0] = values[0];
-    this.values[1] = values[1];
-  }
-
-  at(index: number): number {
-    return this.values[index];
-  }
-
-  reset(): void {
-    this.x = 0;
-    this.y = 0;
-  }
-
-  copy(dest?: Vector2): Vector2 {
-    if (!dest) {
-      dest = new Vector2();
-    }
-
-    dest.x = this.x;
-    dest.y = this.y;
-
-    return dest;
-  }
-
-  negate(dest?: Vector2): Vector2 {
-    if (!dest) {
-      dest = this;
-    }
-
-    dest.x = -this.x;
-    dest.y = -this.y;
-
-    return dest;
-  }
-
-  equals(vector: Vector2, threshold = epsilon): boolean {
-    if (Math.abs(this.x - vector.x) > threshold) {
-      return false;
-    }
-
-    if (Math.abs(this.y - vector.y) > threshold) {
-      return false;
-    }
-
-    return true;
-  }
-
-  length(): number {
-    return Math.sqrt(this.squaredLength());
-  }
-
-  squaredLength(): number {
-    const x = this.x;
-    const y = this.y;
-
-    return x * x + y * y;
-  }
-
-  add(vector: Vector2): Vector2 {
-    this.x += vector.x;
-    this.y += vector.y;
-
-    return this;
-  }
-
-  subtract(vector: Vector2): Vector2 {
-    this.x -= vector.x;
-    this.y -= vector.y;
-
-    return this;
-  }
-
-  multiply(vector: Vector2): Vector2 {
-    this.x *= vector.x;
-    this.y *= vector.y;
-
-    return this;
-  }
-
-  divide(vector: Vector2): Vector2 {
-    this.x /= vector.x;
-    this.y /= vector.y;
-
-    return this;
-  }
-
-  scale(value: number, dest?: Vector2): Vector2 {
-    if (!dest) {
-      dest = this;
-    }
-
-    dest.x *= value;
-    dest.y *= value;
-
-    return dest;
-  }
-
-  normalize(dest?: Vector2): Vector2 {
-    if (!dest) {
-      dest = this;
-    }
-
-    let length = this.length();
-
-    if (length === 1) {
-      return this;
-    }
-
-    if (length === 0) {
-      dest.x = 0;
-      dest.y = 0;
-
-      return dest;
-    }
-
-    length = 1.0 / length;
-
-    dest.x *= length;
-    dest.y *= length;
-
-    return dest;
-  }
-
-  // multiplyMat2(matrix: mat2, dest?: Vector2): Vector2 {
-  //   if (!dest) {
-  //     dest = this;
-  //   }
-
-  //   return matrix.multiplyVec2(this, dest);
-  // }
-
-  // multiplyMat3(matrix: mat3, dest?: Vector2): Vector2 {
-  //   if (!dest) {
-  //     dest = this;
-  //   }
-
-  //   return matrix.multiplyVec2(this, dest);
-  // }
-
-  // static cross(vector: Vector2, vector2: Vector2, dest?: vec3): vec3 {
-  //   if (!dest) {
-  //     dest = new vec3();
-  //   }
-
-  //   const x = vector.x;
-  //   const y = vector.y;
-
-  //   const x2 = vector2.x;
-  //   const y2 = vector2.y;
-
-  //   const z = x * y2 - y * x2;
-
-  //   dest.x = 0;
-  //   dest.y = 0;
-  //   dest.z = z;
-
-  //   return dest;
-  // }
-
-  /**
-   * 向量点乘
-   * @param vector
-   * @param vector2
-   * @returns
-   */
-  static dot(vector: Vector2, vector2: Vector2): number {
-    return vector.x * vector2.x + vector.y * vector2.y;
-  }
-  /**
-   * 向量长度
-   * @param vector
-   * @param vector2
-   * @returns
-   */
-  static distance(vector: Vector2, vector2: Vector2): number {
-    return Math.sqrt(this.squaredDistance(vector, vector2));
-  }
-
-  /**
-   * 向量长度平方
-   * @param vector
-   * @param vector2
-   * @returns
-   */
-  static squaredDistance(vector: Vector2, vector2: Vector2): number {
-    const x = vector2.x - vector.x;
-    const y = vector2.y - vector.y;
-
-    return x * x + y * y;
-  }
-
-  /**
-   * v2->v1的方向的单位向量
-   * @param v1
-   * @param v2
-   * @param dest
-   * @returns
-   */
-  static direction(v1: Vector2, v2: Vector2, dest?: Vector2): Vector2 {
-    if (!dest) {
-      dest = new Vector2();
-    }
-
-    const x = v1.x - v2.x;
-    const y = v1.y - v2.y;
-
-    let length = Math.sqrt(x * x + y * y);
-
-    if (length === 0) {
-      dest.x = 0;
-      dest.y = 0;
-
-      return dest;
-    }
-
-    length = 1 / length;
-
-    dest.x = x * length;
-    dest.y = y * length;
-
-    return dest;
-  }
-
-  static mix(
-    vector: Vector2,
-    vector2: Vector2,
-    time: number,
-    dest?: Vector2
-  ): Vector2 {
-    if (!dest) {
-      dest = new Vector2();
-    }
-
-    const x = vector.x;
-    const y = vector.y;
-
-    const x2 = vector2.x;
-    const y2 = vector2.y;
-
-    dest.x = x + time * (x2 - x);
-    dest.y = y + time * (y2 - y);
-
-    return dest;
-  }
-
-  /**
-   * 向量加法
-   * @param vector
-   * @param vector2
-   * @param dest
-   * @returns
-   */
-  static sum(vector: Vector2, vector2: Vector2, dest?: Vector2): Vector2 {
-    if (!dest) {
-      dest = new Vector2();
-    }
-
-    dest.x = vector.x + vector2.x;
-    dest.y = vector.y + vector2.y;
-
-    return dest;
-  }
-
-  /**
-   * 向量减法
-   * @param vector
-   * @param vector2
-   * @param dest
-   * @returns
-   */
-  static difference(
-    vector: Vector2,
-    vector2: Vector2,
-    dest?: Vector2
-  ): Vector2 {
-    if (!dest) {
-      dest = new Vector2();
-    }
-
-    dest.x = vector.x - vector2.x;
-    dest.y = vector.y - vector2.y;
-
-    return dest;
-  }
-
-  /**
-   * 向量乘法
-   * @param vector
-   * @param vector2
-   * @param dest
-   * @returns
-   */
-  static product(vector: Vector2, vector2: Vector2, dest?: Vector2): Vector2 {
-    if (!dest) {
-      dest = new Vector2();
-    }
-
-    dest.x = vector.x * vector2.x;
-    dest.y = vector.y * vector2.y;
-
-    return dest;
-  }
-
-  /**
-   * 向量除法
-   * @param vector
-   * @param vector2
-   * @param dest
-   * @returns
-   */
-  static quotient(vector: Vector2, vector2: Vector2, dest?: Vector2): Vector2 {
-    if (!dest) {
-      dest = new Vector2();
-    }
-
-    dest.x = vector.x / vector2.x;
-    dest.y = vector.y / vector2.y;
-
-    return dest;
-  }
-}

src/jl-graphic/math/index.ts

@@ -1,4 +0,0 @@
-/// 向量和矩阵代码源自开源代码：https://github.com/matthiasferch/tsm
-
-export * from './Constants';
-export * from './Vector2';

src/jl-graphic/message/BasicMessageClient.ts

@@ -1,156 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import EventEmitter from 'eventemitter3';
-import { IGraphicScene } from '../app';
-import { CompleteMessageCliOption, IMessageClient } from './MessageBroker';
-
-export interface MessageClientEvents {
-  connected: [ctx: any];
-  disconnected: [ctx: any];
-}
-
-export type HandleMessage = (data: any) => void;
-
-export interface IMessageHandler {
-  /**
-   * id
-   */
-  get App(): IGraphicScene;
-  /**
-   * 处理消息数据
-   * @param data
-   */
-  handle(data: any): void;
-}
-
-export abstract class MessageClient
-  extends EventEmitter<MessageClientEvents>
-  implements IMessageClient
-{
-  options: CompleteMessageCliOption;
-  subClients: SubscriptionClient[] = []; // 订阅客户端
-  constructor(options: CompleteMessageCliOption) {
-    super();
-    this.options = options;
-  }
-  /**
-   * 订阅消息
-   * @param destination
-   * @param handle
-   */
-  abstract subscribe(
-    destination: string,
-    handle: HandleMessage
-  ): IUnsubscriptor;
-
-  unsubscribe(destination: string): void {
-    this.unsubscribe0(destination);
-    const idx = this.subClients.findIndex(
-      (cli) => cli.destination === destination
-    );
-    if (idx >= 0) {
-      this.subClients.splice(idx, 1);
-    }
-  }
-
-  abstract unsubscribe0(destination: string): void;
-
-  getOrNewSubClient(destination: string): SubscriptionClient {
-    let cli = this.subClients.find((cli) => cli.destination === destination);
-    if (!cli) {
-      // 不存在，新建
-      cli = new SubscriptionClient(this, destination, this.options.protocol);
-      this.subClients.push(cli);
-    }
-    return cli;
-  }
-
-  addSubscription(destination: string, handler: IMessageHandler): void {
-    const cli = this.getOrNewSubClient(destination);
-    cli.addHandler(handler);
-  }
-  removeSubscription(destination: string, handle: IMessageHandler): void {
-    this.getOrNewSubClient(destination).removeHandler(handle);
-  }
-
-  abstract get connected(): boolean;
-
-  abstract close(): void;
-}
-
-/**
- * 订阅取消接口
- */
-export interface IUnsubscriptor {
-  /**
-   * 取消订阅
-   */
-  unsubscribe(): void;
-}
-
-export class SubscriptionClient {
-  mc: MessageClient;
-  destination: string;
-  protocol: 'json' | 'protobuf';
-  handlers: IMessageHandler[] = [];
-  unsubscriptor?: IUnsubscriptor;
-  constructor(
-    mc: MessageClient,
-    destination: string,
-    protocal: 'json' | 'protobuf'
-  ) {
-    this.mc = mc;
-    this.destination = destination;
-    this.protocol = protocal;
-    this.mc.on('disconnected', this.onDisconnect, this);
-    this.mc.on('connected', this.trySubscribe, this);
-  }
-
-  addHandler(handler: IMessageHandler) {
-    if (this.handlers.filter((h) => h.App === handler.App).length == 0) {
-      this.handlers.push(handler);
-    }
-    if (!this.unsubscriptor) {
-      this.trySubscribe();
-    }
-  }
-
-  removeHandler(handler: IMessageHandler) {
-    const idx = this.handlers.findIndex((h) => h.App === handler.App);
-    if (idx >= 0) {
-      this.handlers.splice(idx, 1);
-    }
-    if (this.handlers.length == 0) {
-      console.log(`订阅${this.destination}没有消息监听处理,移除订阅`);
-      this.unsubscribe();
-    }
-  }
-
-  trySubscribe(): void {
-    if (this.mc.connected) {
-      this.unsubscriptor = this.mc.subscribe(this.destination, (data) => {
-        this.handleMessage(data);
-      });
-    }
-  }
-
-  unsubscribe(): void {
-    this.mc.unsubscribe(this.destination);
-  }
-
-  handleMessage(data: any) {
-    if (this.protocol === 'json') {
-      console.debug('收到消息:', data);
-    }
-    this.handlers.forEach((handler) => {
-      try {
-        handler.handle(data);
-      } catch (error) {
-        console.error('图形应用状态消息处理异常', error);
-      }
-    });
-  }
-
-  onDisconnect() {
-    this.unsubscriptor = undefined;
-  }
-}

src/jl-graphic/message/CentrifugeBroker.ts

@@ -1,70 +0,0 @@
-import { State, Subscription } from 'centrifuge';
-import Centrifuge from 'centrifuge/build/protobuf';
-import {
-  HandleMessage,
-  IUnsubscriptor,
-  MessageClient,
-} from './BasicMessageClient';
-import { CompleteMessageCliOption } from './MessageBroker';
-
-export class CentrifugeMessagingClient extends MessageClient {
-  cli: Centrifuge;
-
-  constructor(options: CompleteMessageCliOption) {
-    super(options);
-    this.options = options;
-    if (this.options.protocol === 'json') {
-      this.cli = new Centrifuge(options.wsUrl, {
-        token: options.token,
-        protocol: options.protocol,
-      });
-    } else {
-      this.cli = new Centrifuge(options.wsUrl, {
-        token: options.token,
-        protocol: options.protocol,
-      });
-    }
-
-    this.cli
-      .on('connecting', (ctx) => {
-        console.debug(`centrifuge连接中: ${ctx}, ${ctx.reason}`);
-      })
-      .on('connected', (ctx) => {
-        console.debug(`连接成功: ${ctx.transport}`);
-        this.emit('connected', ctx);
-      })
-      .on('disconnected', (ctx) => {
-        console.log(`断开连接: ${ctx.code}, ${ctx.reason}`);
-        this.emit('disconnected', ctx);
-      })
-      .on('error', (ctx) => {
-        console.error('centrifuge错误', ctx);
-      })
-      .connect();
-  }
-
-  get connected(): boolean {
-    return this.cli.state === State.Connected;
-  }
-
-  subscribe(destination: string, handle: HandleMessage): IUnsubscriptor {
-    let sub = this.cli.getSubscription(destination);
-    if (!sub) {
-      sub = this.cli.newSubscription(destination);
-      sub.on('publication', (ctx) => {
-        handle(ctx.data);
-      });
-    }
-    sub.subscribe();
-    return sub;
-  }
-
-  unsubscribe0(destination: string): void {
-    const subClient = this.getOrNewSubClient(destination);
-    this.cli.removeSubscription(subClient.unsubscriptor as Subscription);
-  }
-
-  close(): void {
-    this.cli.disconnect();
-  }
-}

src/jl-graphic/message/MessageBroker.ts

@@ -1,267 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import EventEmitter from 'eventemitter3';
-import { IGraphicScene } from '../app';
-import { GraphicQueryStore, GraphicState, JlGraphic } from '../core';
-import {
-  IMessageHandler,
-  IUnsubscriptor,
-  MessageClientEvents,
-} from './BasicMessageClient';
-import { CentrifugeMessagingClient } from './CentrifugeBroker';
-import { StompMessagingClient } from './WsMsgBroker';
-
-export enum ClientEngine {
-  Stomp,
-  Centrifugo,
-}
-
-export interface MessageCliOption {
-  /**
-   * 客户端引擎
-   */
-  engine?: ClientEngine;
-  /**
-   * 消息协议,默认protobuf
-   */
-  protocol?: 'json' | 'protobuf';
-  /**
-   * websocket url地址
-   */
-  wsUrl: string;
-  /**
-   * 认证token
-   */
-  token?: string;
-}
-
-export interface CompleteMessageCliOption extends MessageCliOption {
-  protocol: 'json' | 'protobuf';
-}
-
-const DefaultStompOption: CompleteMessageCliOption = {
-  engine: ClientEngine.Stomp,
-  protocol: 'protobuf',
-  wsUrl: '',
-  token: '',
-};
-
-export interface IMessageClient extends EventEmitter<MessageClientEvents> {
-  /**
-   * 添加订阅
-   * @param destination
-   * @param handler
-   */
-  addSubscription(destination: string, handler: IMessageHandler): void;
-  /**
-   * 移除订阅
-   * @param destination
-   * @param handler
-   */
-  removeSubscription(destination: string, handler: IMessageHandler): void;
-
-  /**
-   * 是否已经连接
-   */
-  get connected(): boolean;
-
-  /**
-   * 关闭连接
-   */
-  close(): void;
-}
-
-export class WsMsgCli {
-  private static client: IMessageClient;
-  private static options: CompleteMessageCliOption;
-  private static appMsgBroker: AppWsMsgBroker[] = [];
-  static new(options: MessageCliOption) {
-    if (WsMsgCli.client) {
-      // 已经创建
-      return;
-    }
-    WsMsgCli.options = Object.assign({}, DefaultStompOption, options);
-    if (WsMsgCli.options.engine == ClientEngine.Centrifugo) {
-      WsMsgCli.client = new CentrifugeMessagingClient(WsMsgCli.options);
-    } else {
-      WsMsgCli.client = new StompMessagingClient(WsMsgCli.options);
-    }
-    const cli = WsMsgCli.client;
-    cli.on('connected', () => {
-      WsMsgCli.emitConnectStateChangeEvent(true);
-    });
-    cli.on('disconnected', () => {
-      WsMsgCli.emitConnectStateChangeEvent(false);
-    });
-  }
-
-  static isInitiated(): boolean {
-    return !!WsMsgCli.client;
-  }
-
-  static emitConnectStateChangeEvent(connected: boolean) {
-    WsMsgCli.appMsgBroker.forEach((broker) => {
-      broker.app.emit('websocket-connect-state-change', connected);
-    });
-  }
-
-  static isConnected(): boolean {
-    return WsMsgCli.client && WsMsgCli.client.connected;
-  }
-
-  static registerSubscription(destination: string, handler: IMessageHandler) {
-    WsMsgCli.client.addSubscription(destination, handler);
-  }
-
-  static unregisterSubscription(destination: string, handler: IMessageHandler) {
-    WsMsgCli.client.removeSubscription(destination, handler);
-  }
-
-  static registerAppMsgBroker(broker: AppWsMsgBroker) {
-    WsMsgCli.appMsgBroker.push(broker);
-  }
-
-  static removeAppMsgBroker(broker: AppWsMsgBroker) {
-    const index = WsMsgCli.appMsgBroker.findIndex((mb) => mb == broker);
-    if (index >= 0) {
-      WsMsgCli.appMsgBroker.splice(index, 1);
-    }
-  }
-
-  static hasAppMsgBroker(): boolean {
-    return WsMsgCli.appMsgBroker.length > 0;
-  }
-
-  /**
-   * 关闭websocket连接
-   */
-  static close() {
-    if (WsMsgCli.client) {
-      WsMsgCli.client.close();
-    }
-  }
-}
-
-// 状态订阅消息转换器
-export type GraphicStateMessageConvert = (
-  message: Uint8Array
-) => GraphicState[];
-
-// 根据状态查询图形对象查询器
-export type GraphicQuery = (
-  state: GraphicState,
-  store: GraphicQueryStore
-) => JlGraphic | undefined;
-
-// 订阅消息处理器
-export type SubscriptionMessageHandle = (message: Uint8Array) => void;
-
-export interface ICreateOnNotFound {
-  graphicTypes?: string[];
-}
-
-// 图形app状态订阅
-export interface AppStateSubscription {
-  /**
-   * 订阅路径
-   */
-  destination: string;
-  /**
-   * 图形状态消息转换
-   */
-  messageConverter?: GraphicStateMessageConvert;
-  /**
-   * 根据状态查询图形对象,默认为根据code和type查询图形对象
-   */
-  graphicQueryer?: GraphicQuery;
-  /**
-   * 当未根据状态找到图形对象时是否创建新对象
-   * 值为设备类型列表
-   */
-  createOnNotFound?: ICreateOnNotFound;
-  /**
-   * 订阅消息处理
-   */
-  messageHandle?: SubscriptionMessageHandle;
-  /**
-   * 订阅成功对象，用于取消订阅
-   * 非客户端使用
-   */
-  subscription?: IUnsubscriptor;
-}
-
-class AppMessageHandler implements IMessageHandler {
-  app: IGraphicScene;
-  sub: AppStateSubscription;
-  constructor(app: IGraphicScene, subOptions: AppStateSubscription) {
-    this.app = app;
-    if (!subOptions.messageConverter && !subOptions.messageHandle) {
-      throw new Error(`没有消息处理器或图形状态消息转换器: ${subOptions}`);
-    }
-    this.sub = subOptions;
-  }
-  get App(): IGraphicScene {
-    return this.app;
-  }
-  handle(data: any): void {
-    const sub = this.sub;
-    if (sub.messageConverter) {
-      const graphicStates = sub.messageConverter(data);
-      this.app.handleGraphicStates(
-        graphicStates,
-        sub.graphicQueryer,
-        sub.createOnNotFound
-      );
-    } else if (sub.messageHandle) {
-      sub.messageHandle(data);
-    }
-  }
-}
-
-/**
- * 图形APP的websocket消息代理
- */
-export class AppWsMsgBroker {
-  app: IGraphicScene;
-  subscriptions: Map<string, AppMessageHandler> = new Map<
-    string,
-    AppMessageHandler
-  >();
-
-  constructor(app: IGraphicScene) {
-    this.app = app;
-    WsMsgCli.registerAppMsgBroker(this);
-  }
-
-  subscribe(sub: AppStateSubscription) {
-    const handler = new AppMessageHandler(this.app, sub);
-    WsMsgCli.registerSubscription(sub.destination, handler);
-    this.subscriptions.set(sub.destination, handler);
-  }
-
-  unsbuscribe(destination: string) {
-    const oldSub = this.subscriptions.get(destination);
-    if (oldSub) {
-      WsMsgCli.unregisterSubscription(destination, oldSub);
-    }
-  }
-
-  unsubscribeAll() {
-    this.subscriptions.forEach((record, destination) => {
-      this.unsbuscribe(destination);
-    });
-  }
-
-  resubscribeAll() {
-    this.subscriptions.forEach((handler, destination) => {
-      WsMsgCli.registerSubscription(destination, handler);
-    });
-  }
-
-  /**
-   * 取消所有订阅，从通用Stomp客户端移除此消息代理
-   */
-  close() {
-    WsMsgCli.removeAppMsgBroker(this);
-    this.unsubscribeAll();
-  }
-}

src/jl-graphic/message/WsMsgBroker.ts

@@ -1,86 +0,0 @@
-import { Client as StompClient, type Frame } from '@stomp/stompjs';
-import {
-  HandleMessage,
-  IUnsubscriptor,
-  MessageClient,
-} from './BasicMessageClient';
-import { CompleteMessageCliOption } from './MessageBroker';
-
-const ReconnectDelay = 3000;
-const HeartbeatIncoming = 30000;
-const HeartbeatOutgoing = 30000;
-
-export class StompMessagingClient extends MessageClient {
-  cli: StompClient;
-
-  constructor(options: CompleteMessageCliOption) {
-    super(options);
-    this.options = options;
-    this.cli = new StompClient({
-      brokerURL: options.wsUrl,
-      connectHeaders: {
-        Authorization: options.token ? options.token : '',
-      },
-      reconnectDelay: ReconnectDelay,
-      heartbeatIncoming: HeartbeatIncoming,
-      heartbeatOutgoing: HeartbeatOutgoing,
-    });
-
-    this.cli.onConnect = () => {
-      // this.subClients.forEach((cli) => {
-      //   this.subscribe(cli.destination, cli.handleMessage);
-      // });
-      this.emit('connected', '');
-    };
-    this.cli.onStompError = (frame: Frame) => {
-      const errMsg = frame.headers['message'];
-      if (errMsg === '401') {
-        console.warn('认证失败,断开WebSocket连接');
-        this.cli.deactivate();
-      } else {
-        console.error('收到Stomp错误消息', frame);
-      }
-    };
-
-    this.cli.onDisconnect = (frame: Frame) => {
-      console.log('Stomp 断开连接', frame);
-      this.emit('disconnected', frame);
-    };
-    // websocket错误处理
-    this.cli.onWebSocketError = (err: Event) => {
-      console.error('websocket错误', err);
-    };
-
-    this.cli.activate();
-  }
-
-  get connected(): boolean {
-    return this.cli.connected;
-  }
-
-  subscribe(destination: string, handle: HandleMessage): IUnsubscriptor {
-    const sub = this.cli.subscribe(
-      destination,
-      (frame) => {
-        if (this.options.protocol === 'json') {
-          const data = JSON.parse(frame.body);
-          handle(data);
-        } else {
-          handle(frame.binaryBody);
-        }
-      },
-      {
-        id: destination,
-      }
-    );
-    return sub;
-  }
-
-  unsubscribe0(destination: string): void {
-    this.cli.unsubscribe(destination);
-  }
-
-  close(): void {
-    this.cli.deactivate();
-  }
-}

src/jl-graphic/message/index.ts

@@ -1 +0,0 @@
-export * from './MessageBroker';

src/jl-graphic/operation/JlOperation.ts

@@ -1,99 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { IGraphicApp } from '../app/JlGraphicApp';
-import { JlGraphic } from '../core/JlGraphic';
-
-/**
- * 操作
- */
-export abstract class JlOperation {
-  type: string; // 操作类型/名称
-  app: IGraphicApp;
-  obj?: any; // 操作对象
-  data?: any; // 操作数据
-  description?: string = ''; // 操作描述
-
-  constructor(app: IGraphicApp, type: string) {
-    this.app = app;
-    this.type = type;
-  }
-
-  undo1(): void {
-    const updates = this.undo();
-    if (updates) {
-      this.app.updateSelected(...updates);
-    }
-  }
-  redo1(): void {
-    const updates = this.redo();
-    if (updates) {
-      this.app.updateSelected(...updates);
-    }
-  }
-
-  abstract undo(): JlGraphic[] | void;
-  abstract redo(): JlGraphic[] | void;
-}
-
-/**
- * 操作记录
- */
-export class OperationRecord {
-  undoStack: JlOperation[] = [];
-  redoStack: JlOperation[] = [];
-  private maxLen: number;
-
-  constructor(maxLen = 100) {
-    this.maxLen = maxLen;
-  }
-
-  public get hasUndo(): boolean {
-    return this.undoStack.length > 0;
-  }
-
-  public get hasRedo(): boolean {
-    return this.redoStack.length > 0;
-  }
-
-  setMaxLen(v: number) {
-    this.maxLen = v;
-    const len = this.undoStack.length;
-    if (len > v) {
-      const removeCount = len - v;
-      this.undoStack.splice(0, removeCount);
-    }
-  }
-  /**
-   * 记录
-   * @param op
-   */
-  record(op: JlOperation) {
-    if (this.undoStack.length >= this.maxLen) {
-      this.undoStack.shift();
-    }
-    // console.log('operation record', op)
-    this.undoStack.push(op);
-    this.redoStack.splice(0, this.redoStack.length);
-  }
-  /**
-   * 撤销
-   */
-  undo() {
-    const op = this.undoStack.pop();
-    // console.log('撤销', op);
-    if (op) {
-      op.undo1();
-      this.redoStack.push(op);
-    }
-  }
-  /**
-   * 重做
-   */
-  redo() {
-    const op = this.redoStack.pop();
-    // console.log('重做', op);
-    if (op) {
-      op.redo1();
-      this.undoStack.push(op);
-    }
-  }
-}

src/jl-graphic/operation/index.ts

@@ -1 +0,0 @@
-export * from './JlOperation';

src/jl-graphic/plugins/AnimationManager.ts

@@ -1,93 +0,0 @@
-import { IGraphicScene } from '../app';
-import { GraphicAnimation, JlGraphic } from '../core';
-
-/**
- * 图形动画管理
- */
-export class AnimationManager {
-  app: IGraphicScene;
-  _pause: boolean;
-  /**
-   * key - graphic.id
-   */
-  graphicAnimationMap: Map<string, Map<string, GraphicAnimation>>;
-  constructor(app: IGraphicScene) {
-    this.app = app;
-    this._pause = false;
-    this.graphicAnimationMap = new Map<string, Map<string, GraphicAnimation>>();
-    // 动画控制
-    app.pixi.ticker.add(this.run, this);
-  }
-
-  private run(dt: number) {
-    if (this._pause) {
-      // 暂停
-      return;
-    }
-    this.graphicAnimationMap.forEach((map) => {
-      map.forEach((animation) => {
-        if (animation.running) {
-          animation.run(dt);
-        }
-      });
-    });
-  }
-
-  pause() {
-    this._pause = true;
-  }
-
-  resume() {
-    this._pause = false;
-  }
-
-  destroy() {
-    this.app.pixi.ticker.remove(this.run, this);
-  }
-  /**
-   * 图形对象的所有动画map
-   * @param graphic
-   * @returns
-   */
-  animationMap(graphic: JlGraphic): Map<string, GraphicAnimation> {
-    let map = this.graphicAnimationMap.get(graphic.id);
-    if (!map) {
-      map = new Map<string, GraphicAnimation>();
-      this.graphicAnimationMap.set(graphic.id, map);
-    }
-    return map;
-  }
-
-  /**
-   * 注册图形动画
-   * @param graphic
-   * @param animation
-   */
-  registerAnimation(graphic: JlGraphic, animation: GraphicAnimation) {
-    this.animationMap(graphic).set(animation.name, animation);
-  }
-  /**
-   * 删除图形动画
-   * @param graphic
-   * @param name
-   */
-  unregisterAnimation(graphic: JlGraphic, name: string) {
-    this.animationMap(graphic).delete(name);
-  }
-  /**
-   * 删除所有图形动画
-   * @param graphic
-   */
-  unregisterGraphicAnimations(graphic: JlGraphic) {
-    this.animationMap(graphic).clear();
-  }
-  /**
-   * 获取图形指定名称动画
-   * @param graphic
-   * @param name
-   * @returns
-   */
-  animation(graphic: JlGraphic, name: string): GraphicAnimation | undefined {
-    return this.animationMap(graphic).get(name);
-  }
-}

src/jl-graphic/plugins/CommonMousePlugin.ts

@@ -1,401 +0,0 @@
-import {
-  Color,
-  DisplayObject,
-  FederatedMouseEvent,
-  Graphics,
-  Point,
-} from 'pixi.js';
-import { ICanvasProperties, IGraphicScene } from '../app';
-import { JlGraphic } from '../core';
-import {
-  AppDragEvent,
-  AppInteractionPlugin,
-  ViewportMovePlugin,
-} from './InteractionPlugin';
-
-type GraphicSelectFilter = (graphic: JlGraphic) => boolean;
-
-export interface IMouseToolOptions {
-  /**
-   * 是否启用框选,默认启用
-   */
-  boxSelect?: boolean;
-  /**
-   * 是否启用视口拖拽(默认右键),默认启用
-   */
-  viewportDrag?: boolean;
-  /**
-   * 是否启用左键视口拖拽
-   */
-  viewportDragLeft?: boolean;
-  /**
-   * 是否启用鼠标滚轮缩放,默认启用
-   */
-  wheelZoom?: boolean;
-  /**
-   * 可选择图形过滤器
-   */
-  selectFilter?: GraphicSelectFilter;
-}
-
-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) {
-      this.boxSelect = options.boxSelect;
-    }
-    if (options.viewportDrag != undefined) {
-      this.viewportDrag = options.viewportDrag;
-    }
-    if (options.viewportDragLeft != undefined) {
-      this.viewportDragLeft = options.viewportDragLeft;
-    }
-    if (options.wheelZoom != undefined) {
-      this.wheelZoom = options.wheelZoom;
-    }
-    this.selectFilter = options.selectFilter;
-  }
-}
-
-/**
- * 通用交互工具
- */
-export class CommonMouseTool extends AppInteractionPlugin {
-  static Name = 'mouse-tool';
-  static SelectBox = '__select_box';
-  options: CompleteMouseToolOptions;
-  box: Graphics;
-  _boxLineColor: Color;
-  leftDownTarget: DisplayObject | null = null;
-
-  drag = false;
-  graphicSelect = false;
-
-  rightTarget: DisplayObject | null = null;
-
-  constructor(scene: IGraphicScene) {
-    super(CommonMouseTool.Name, scene);
-    this.options = new CompleteMouseToolOptions();
-
-    this.box = new Graphics();
-    this._boxLineColor = new Color();
-
-    scene.canvas.on('dataupdate', this.updateBoxLineColor, this);
-    this.box.name = CommonMouseTool.SelectBox;
-    this.box.visible = false;
-    this.app.canvas.addAssistantAppends(this.box);
-
-    scene.on('options-update', (options) => {
-      if (options.mouseToolOptions) {
-        this.options.update(options.mouseToolOptions);
-        if (this.isActive()) {
-          this.pause();
-          this.resume();
-        }
-      }
-    });
-  }
-
-  static new(app: IGraphicScene) {
-    return new CommonMouseTool(app);
-  }
-
-  /**
-   * 计算对比色
-   * @param rgb
-   * @returns
-   */
-  private calContrastColor(rgb: number): number {
-    if (rgb > 0.45 && rgb < 0.55) {
-      return 0;
-    } else {
-      return 1 - rgb;
-    }
-  }
-
-  private updateBoxLineColor(cp: ICanvasProperties) {
-    // 根据画布背景调整线色
-    const color = new Color(cp.backgroundColor);
-    // 对比色
-    const r = this.calContrastColor(color.red);
-    const g = this.calContrastColor(color.green);
-    const b = this.calContrastColor(color.blue);
-    this._boxLineColor.setValue([r, g, b]);
-  }
-
-  bind(): void {
-    const canvas = this.app.canvas;
-    canvas.on('mousedown', this.onMouseDown, this);
-    canvas.on('mouseup', this.onMouseUp, this);
-    this.app.on('drag_op_start', this.onDragStart, this);
-    this.app.on('drag_op_move', this.onDragMove, this);
-    this.app.on('drag_op_end', this.onDragEnd, this);
-    if (this.options.viewportDrag) {
-      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({
-        percent: 0.01,
-      });
-    }
-  }
-  unbind(): void {
-    const canvas = this.app.canvas;
-    // 确保所有事件取消监听
-    canvas.off('mousedown', this.onMouseDown, this);
-    canvas.off('mouseup', this.onMouseUp, this);
-
-    this.app.off('drag_op_start', this.onDragStart, this);
-    this.app.off('drag_op_move', this.onDragMove, this);
-    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);
-
-    this.app.viewport.plugins.remove('wheel');
-    this.clearCache();
-  }
-
-  onDragStart(event: AppDragEvent) {
-    // console.log(
-    //   'start',
-    //   `pointerType:${event.original.pointerType},pointerId:${event.original.pointerId},button: ${event.original.button},buttons:${event.original.buttons}`
-    // );
-    if (this.boxSelect && event.target.isCanvas() && event.isLeftButton) {
-      this.box.visible = true;
-      this.app.interactionPlugin(ViewportMovePlugin.Name).resume();
-    }
-    this.drag = true;
-  }
-
-  onDragMove(event: AppDragEvent) {
-    // console.log(
-    //   'moving',
-    //   `pointerType:${event.original.pointerType},pointerId:${event.original.pointerId},button: ${event.original.button},buttons:${event.original.buttons}`
-    // );
-    if (this.boxSelect && event.target.isCanvas()) {
-      this.boxSelectDraw(event.start, event.end);
-    }
-  }
-  onDragEnd(event: AppDragEvent) {
-    // console.log(
-    //   'end',
-    //   `pointerType:${event.original.pointerType},pointerId:${event.original.pointerId},button: ${event.original.button},buttons:${event.original.buttons}`
-    // );
-    if (this.boxSelect && event.target.isCanvas() && event.isLeftButton) {
-      this.boxSelectDraw(event.start, event.end);
-      this.boxSelectGraphicCheck();
-      this.app.interactionPlugin(ViewportMovePlugin.Name).pause();
-      this.box.clear();
-      this.box.visible = false;
-    }
-  }
-
-  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;
-    if (target.isCanvas() && this.app.pixi.view.style) {
-      this.app.pixi.view.style.cursor = 'grab';
-    }
-  }
-
-  resumeCursor() {
-    if (
-      this.rightTarget &&
-      this.rightTarget.isCanvas() &&
-      this.app.pixi.view.style
-    ) {
-      this.app.pixi.view.style.cursor = 'inherit';
-    }
-    this.rightTarget = null;
-  }
-
-  onMouseDown(e: FederatedMouseEvent) {
-    this.leftDownTarget = e.target as DisplayObject;
-    this.graphicSelect = false;
-    // 图形
-    const graphic = this.leftDownTarget.getGraphic();
-    if (graphic) {
-      const app = this.app;
-      // console.log(this.leftDownTarget.isGraphic());
-      // 图形选中
-      if (!e.ctrlKey && !graphic.selected && graphic.selectable) {
-        app.updateSelected(graphic);
-        graphic.childEdit = false;
-        this.graphicSelect = true;
-      } else if (!e.ctrlKey && graphic.selected && graphic.childEdit) {
-        if (
-          this.leftDownTarget.isGraphicChild() &&
-          this.leftDownTarget.selectable
-        ) {
-          graphic.setChildSelected(this.leftDownTarget);
-        } else {
-          graphic.exitChildEdit();
-        }
-      }
-    }
-  }
-
-  /**
-   * 选中处理
-   * @param e
-   */
-  onMouseUp(e: FederatedMouseEvent) {
-    const app = this.app;
-    if (!this.drag) {
-      const target = e.target as DisplayObject;
-      const graphic = (e.target as DisplayObject).getGraphic();
-      if (
-        graphic &&
-        graphic.selected &&
-        !this.graphicSelect &&
-        app.selectedGraphics.length == 1 &&
-        target === this.leftDownTarget &&
-        target.isGraphicChild() &&
-        target.selectable
-      ) {
-        graphic.childEdit = true;
-      }
-      if (e.ctrlKey) {
-        // 多选
-        if (graphic) {
-          if (graphic.childEdit && target === this.leftDownTarget) {
-            graphic.invertChildSelected(target);
-          } else {
-            graphic.invertSelected();
-          }
-        }
-      } else {
-        // 非多选
-        if ((e.target as DisplayObject).isCanvas()) {
-          this.app.updateSelected();
-        } else {
-          if (
-            graphic &&
-            graphic.childEdit &&
-            app.selectedGraphics.length === 1 &&
-            target === this.leftDownTarget
-          ) {
-            graphic.setChildSelected(target);
-          }
-        }
-      }
-      // 多个图形选中，退出子元素编辑模式
-      const selecteds = this.app.selectedGraphics;
-      if (selecteds.length > 1) {
-        selecteds.forEach((g) => g.exitChildEdit());
-      }
-    }
-    this.clearCache();
-  }
-
-  /**
-   * 清理缓存
-   */
-  clearCache() {
-    this.drag = false;
-    this.leftDownTarget = null;
-  }
-
-  public get boxSelect(): boolean | undefined {
-    return this.options.boxSelect;
-  }
-
-  public get selectFilter(): GraphicSelectFilter | undefined {
-    return this.options.selectFilter;
-  }
-
-  /**
-   * 框选图形绘制并检查
-   */
-  boxSelectDraw(start: Point, end: Point): void {
-    if (!this.drag) return;
-    // 绘制框选矩形框
-    this.box.clear();
-    this.box.lineStyle({ width: 2, color: this._boxLineColor });
-    const dsx = end.x - start.x;
-    const dsy = end.y - start.y;
-    let { x, y } = start;
-    if (dsx < 0) {
-      x += dsx;
-    }
-    if (dsy < 0) {
-      y += dsy;
-    }
-    const width = Math.abs(dsx);
-    const height = Math.abs(dsy);
-    this.box.drawRect(x, y, width, height);
-  }
-
-  /**
-   * 框选图形判断
-   * @returns
-   */
-  boxSelectGraphicCheck(): void {
-    if (!this.drag) return;
-    // 遍历筛选
-    const boxRect = this.box.getLocalBounds();
-    const app = this.app;
-    const selects: JlGraphic[] = [];
-    app.queryStore.getAllGraphics().forEach((g) => {
-      if (
-        (this.selectFilter == undefined && g.visible) ||
-        (!!this.selectFilter && this.selectFilter(g))
-      ) {
-        // 选择过滤器
-        if (g.boxIntersectCheck(boxRect)) {
-          selects.push(g);
-        }
-      }
-    });
-    app.updateSelected(...selects);
-  }
-}

src/jl-graphic/plugins/CopyPlugin.ts

@@ -1,142 +0,0 @@
-import { Container, FederatedPointerEvent, Point } from 'pixi.js';
-import { IGraphicScene } from '../app';
-import { JlGraphic } from '../core';
-import { KeyListener } from './KeyboardPlugin';
-
-/**
- * 图形复制插件
- */
-export class GraphicCopyPlugin {
-  container: Container;
-  scene: IGraphicScene;
-  keyListeners: KeyListener[];
-  copys: JlGraphic[];
-  start?: Point;
-  running = false;
-  moveLimit?: 'x' | 'y';
-  constructor(scene: IGraphicScene) {
-    this.scene = scene;
-    this.container = new Container();
-    this.copys = [];
-    this.keyListeners = [];
-    this.keyListeners.push(
-      new KeyListener({
-        // ESC 用于取消复制操作
-        value: 'Escape',
-        global: true,
-        // combinations: [CombinationKey.Ctrl],
-        onPress: () => {
-          this.cancle();
-        },
-      }),
-      new KeyListener({
-        // X 限制只能在x轴移动
-        value: 'KeyX',
-        global: true,
-        // combinations: [CombinationKey.Ctrl],
-        onPress: () => {
-          this.updateMoveLimit('x');
-        },
-      }),
-      new KeyListener({
-        // Y 限制只能在y轴移动
-        value: 'KeyY',
-        global: true,
-        // combinations: [CombinationKey.Ctrl],
-        onPress: () => {
-          this.updateMoveLimit('y');
-        },
-      })
-    );
-  }
-
-  updateMoveLimit(limit?: 'x' | 'y'): void {
-    if (this.moveLimit === limit) {
-      this.moveLimit = undefined;
-    } else {
-      this.moveLimit = limit;
-    }
-  }
-
-  init(): void {
-    if (this.running) return;
-    if (this.scene.selectedGraphics.length === 0) {
-      throw new Error('没有选中图形，复制取消');
-    }
-    this.running = true;
-    this.copys = [];
-    this.container.alpha = 0.5;
-    this.scene.canvas.addChild(this.container);
-    const app = this.scene;
-    this.scene.selectedGraphics.forEach((g) => {
-      const template = app.getGraphicTemplatesByType(g.type);
-      const clone = template.clone(g);
-      this.copys.push(clone);
-      this.container.position.set(0, 0);
-      this.container.addChild(clone);
-      clone.repaint();
-    });
-    this.scene.canvas.on('mousemove', this.onPointerMove, this);
-    this.scene.canvas.on('mouseup', this.onFinish, this);
-    this.scene.canvas.on('rightup', this.cancle, this);
-    this.keyListeners.forEach((kl) => {
-      this.scene.app.addKeyboardListener(kl);
-    });
-  }
-
-  clear(): void {
-    this.running = false;
-    this.start = undefined;
-    this.moveLimit = undefined;
-    this.copys = [];
-    this.container.removeChildren();
-    this.scene.canvas.removeChild(this.container);
-    this.scene.canvas.off('mousemove', this.onPointerMove, this);
-    this.scene.canvas.off('mouseup', this.onFinish, this);
-    this.scene.canvas.off('rightup', this.cancle, this);
-    this.keyListeners.forEach((kl) => {
-      this.scene.app.removeKeyboardListener(kl);
-    });
-  }
-
-  onPointerMove(e: FederatedPointerEvent): void {
-    const cp = this.scene.toCanvasCoordinates(e.global);
-    if (!this.start) {
-      this.start = cp;
-    } else {
-      if (this.moveLimit === 'x') {
-        const dx = cp.x - this.start.x;
-        this.container.position.x = dx;
-        this.container.position.y = 0;
-      } else if (this.moveLimit === 'y') {
-        const dy = cp.y - this.start.y;
-        this.container.position.x = 0;
-        this.container.position.y = dy;
-      } else {
-        const dx = cp.x - this.start.x;
-        const dy = cp.y - this.start.y;
-        this.container.position.x = dx;
-        this.container.position.y = dy;
-      }
-    }
-  }
-
-  onFinish(): void {
-    console.log('复制确认');
-    // 将图形添加到app
-    this.copys.forEach((g) => {
-      g.position.x += this.container.position.x;
-      g.position.y += this.container.position.y;
-    });
-    this.scene.app.addGraphicAndRecord(...this.copys);
-    this.scene.detectRelations();
-    this.scene.updateSelected(...this.copys);
-    this.clear();
-  }
-
-  cancle(): void {
-    console.log('复制操作取消');
-    this.scene.canvas.removeChild(this.container);
-    this.clear();
-  }
-}

src/jl-graphic/plugins/GraphicEditPlugin.ts

@@ -1,514 +0,0 @@
-import {
-  Color,
-  Container,
-  DisplayObject,
-  Graphics,
-  IDestroyOptions,
-  IPointData,
-  Point,
-} from 'pixi.js';
-import { JlGraphic } from '../core';
-import { DraggablePoint } from '../graphic';
-import {
-  calculateDistanceFromPointToLine,
-  calculateFootPointFromPointToLine,
-  calculateLineSegmentingPoint,
-  calculateMirrorPoint,
-  convertToBezierParams,
-  distance2,
-  linePoint,
-  pointPolygon,
-} from '../utils';
-import { GraphicTransformEvent, ShiftData } from './GraphicTransformPlugin';
-
-export abstract class GraphicEditPlugin<
-  DO extends DisplayObject = DisplayObject
-> extends Container {
-  graphic: DO;
-  constructor(g: DO) {
-    super();
-    this.graphic = g;
-    this.zIndex = 2;
-    this.sortableChildren = true;
-    this.graphic.on('transformstart', this.hideAll, this);
-    this.graphic.on('transformend', this.showAll, this);
-    this.graphic.on('repaint', this.updateEditedPointsPosition, this);
-  }
-
-  destroy(options?: boolean | IDestroyOptions | undefined): void {
-    this.graphic.off('transformstart', this.hideAll, this);
-    this.graphic.off('transformend', this.showAll, this);
-    this.graphic.off('repaint', this.updateEditedPointsPosition, this);
-    super.destroy(options);
-  }
-
-  abstract updateEditedPointsPosition(): void;
-
-  hideAll() {
-    this.visible = false;
-  }
-  showAll() {
-    this.updateEditedPointsPosition();
-    this.visible = true;
-  }
-}
-
-export interface ILineGraphic extends JlGraphic {
-  get linePoints(): IPointData[];
-  set linePoints(points: IPointData[]);
-}
-
-export abstract class LineEditPlugin extends GraphicEditPlugin<ILineGraphic> {
-  linePoints: IPointData[];
-  editedPoints: DraggablePoint[] = [];
-  constructor(g: ILineGraphic) {
-    super(g);
-    this.linePoints = g.linePoints;
-    this.graphic.on('dataupdate', this.reset, this);
-  }
-
-  destroy(options?: boolean | IDestroyOptions | undefined): void {
-    this.graphic.off('dataupdate', this.reset, this);
-    super.destroy(options);
-  }
-
-  reset(): void {
-    this.linePoints = this.graphic.linePoints;
-    this.removeChildren();
-    this.editedPoints.splice(0, this.editedPoints.length);
-    this.initEditPoints();
-  }
-
-  abstract initEditPoints(): void;
-}
-
-export function getWayLineIndex(
-  points: IPointData[],
-  p: IPointData
-): { start: number; end: number } {
-  let start = 0;
-  let end = 0;
-  let minDistance = 0;
-  for (let i = 1; i < points.length; i++) {
-    const sp = points[i - 1];
-    const ep = points[i];
-    let distance = calculateDistanceFromPointToLine(sp, ep, p);
-    distance = Math.round(distance * 100) / 100;
-    if (i == 1) {
-      minDistance = distance;
-    }
-    if (distance == minDistance) {
-      const minX = Math.min(sp.x, ep.x);
-      const maxX = Math.max(sp.x, ep.x);
-      const minY = Math.min(sp.y, ep.y);
-      const maxY = Math.max(sp.y, ep.y);
-      const point = calculateFootPointFromPointToLine(sp, ep, p);
-      if (
-        point.x >= minX &&
-        point.x <= maxX &&
-        point.y >= minY &&
-        point.y <= maxY
-      ) {
-        start = i - 1;
-      }
-    }
-    if (distance < minDistance) {
-      minDistance = distance;
-      start = i - 1;
-    }
-  }
-  end = start + 1;
-  return { start, end };
-}
-
-export function getWaypointRangeIndex(
-  points: IPointData[],
-  curve: boolean,
-  p: IPointData,
-  lineWidth: number
-): { start: number; end: number } {
-  let start = 0;
-  let end = 0;
-  if (!curve) {
-    // 直线
-    for (let i = 1; i < points.length; i++) {
-      const sp = points[i - 1];
-      const ep = points[i];
-      const fp = calculateFootPointFromPointToLine(sp, ep, p);
-      if (linePoint(sp, ep, fp, 1, true)) {
-        start = i - 1;
-        end = i;
-        break;
-      }
-    }
-  } else {
-    // 贝塞尔曲线
-    const bps = convertToBezierParams(points);
-    for (let i = 0; i < bps.length; i++) {
-      const bp = bps[i];
-      if (pointPolygon(p, [bp.p1, bp.cp1, bp.cp2, bp.p2], lineWidth)) {
-        start = i * 3;
-        end = start + 3;
-      }
-    }
-    // assertBezierPoints(points);
-    // for (let i = 0; i < points.length - 3; i += 3) {
-    //   const p1 = points[i];
-    //   const cp1 = points[i + 1];
-    //   const cp2 = points[i + 2];
-    //   const p2 = points[i + 3];
-    //   if (pointPolygon(p, [p1, cp1, cp2, p2], lineWidth)) {
-    //     start = i;
-    //     end = i + 3;
-    //   }
-    // }
-  }
-  return { start, end };
-}
-
-export type onEditPointCreate = (
-  g: ILineGraphic,
-  dp: DraggablePoint,
-  index: number
-) => void;
-
-export interface IEditPointOptions {
-  /**
-   * 编辑点创建处理
-   */
-  onEditPointCreate?: onEditPointCreate;
-}
-
-/**
- * 折线编辑(兼容线段)
- */
-export class PolylineEditPlugin extends LineEditPlugin {
-  static Name = 'line_points_edit';
-  options: IEditPointOptions;
-  constructor(g: ILineGraphic, options?: IEditPointOptions) {
-    super(g);
-    this.options = Object.assign({}, options);
-    this.name = PolylineEditPlugin.Name;
-    this.initEditPoints();
-  }
-
-  initEditPoints() {
-    const cps = this.graphic.localToCanvasPoints(...this.linePoints);
-    for (let i = 0; i < cps.length; i++) {
-      const p = cps[i];
-      const dp = new DraggablePoint(p);
-
-      dp.on('transforming', () => {
-        const tlp = this.graphic.canvasToLocalPoint(dp.position);
-        const cp = this.linePoints[i];
-        cp.x = tlp.x;
-        cp.y = tlp.y;
-        this.graphic.repaint();
-      });
-      if (this.options.onEditPointCreate) {
-        this.options.onEditPointCreate(this.graphic, dp, i);
-      }
-      this.editedPoints.push(dp);
-    }
-    this.addChild(...this.editedPoints);
-  }
-  updateEditedPointsPosition() {
-    const cps = this.graphic.localToCanvasPoints(...this.linePoints);
-    if (cps.length === this.editedPoints.length) {
-      for (let i = 0; i < cps.length; i++) {
-        const cp = cps[i];
-        this.editedPoints[i].position.copyFrom(cp);
-      }
-    }
-  }
-}
-
-export interface BezierCurveEditPointOptions extends IEditPointOptions {
-  // 曲线控制点辅助连线颜色
-  auxiliaryLineColor?: string;
-  // // 拖拽点颜色
-  // pointColor?: string;
-  // 连接点处是否平滑(点左右控制点是否在一条直线),默认true
-  smooth?: boolean;
-  // 控制点是否完全对称(对称必平滑)
-  symmetry?: boolean;
-}
-
-export interface ICompleteBezierCurveEditPointOptions
-  extends BezierCurveEditPointOptions {
-  smooth: boolean;
-}
-
-export function addWayPoint(
-  graphic: ILineGraphic,
-  curve: boolean,
-  start: number,
-  end: number,
-  p: IPointData
-) {
-  if (!curve) {
-    addLineWayPoint(graphic, start, end, p);
-  } else {
-    addBezierWayPoint(graphic, start, end, p);
-  }
-}
-
-export function addLineWayPoint(
-  graphic: ILineGraphic,
-  start: number,
-  end: number,
-  p: IPointData
-) {
-  const linePoints = graphic.linePoints;
-  const points = linePoints.slice(0, start + 1);
-  points.push(new Point(p.x, p.y));
-  points.push(...linePoints.slice(end));
-  graphic.linePoints = points;
-}
-
-export function addPolygonSegmentingPoint(
-  graphic: ILineGraphic,
-  start: number,
-  end: number,
-  knife = 2
-) {
-  const linePoints = graphic.linePoints;
-  const points = linePoints.slice(0, start + 1);
-  points.push(
-    ...calculateLineSegmentingPoint(linePoints[start], linePoints[end], knife)
-  );
-  points.push(...linePoints.slice(end));
-  graphic.linePoints = points;
-}
-
-function assertBezierWayPoint(i: number) {
-  const c = i % 3;
-  if (c !== 0) {
-    throw new Error(`i=${i}的点不是路径点`);
-  }
-}
-
-export function addBezierWayPoint(
-  graphic: ILineGraphic,
-  start: number,
-  end: number,
-  p: IPointData
-) {
-  if (start === end) {
-    console.error('添加贝塞尔曲线路径点开始结束点相等', start);
-    throw new Error('开始结束点不能一致');
-  }
-  assertBezierWayPoint(start);
-  assertBezierWayPoint(end);
-  const linePoints = graphic.linePoints;
-  const points = linePoints.slice(0, start + 2);
-  const ap = new Point(p.x, p.y);
-  points.push(ap.clone(), ap.clone(), ap.clone());
-  points.push(...linePoints.slice(end - 1));
-  graphic.linePoints = points;
-}
-
-export function removeWayPoint(
-  graphic: ILineGraphic,
-  curve: boolean,
-  i: number
-) {
-  if (!curve) {
-    removeLineWayPoint(graphic, i);
-  } else {
-    removeBezierWayPoint(graphic, i);
-  }
-}
-
-export function removeLineWayPoint(graphic: ILineGraphic, i: number) {
-  const linePoints = graphic.linePoints;
-  if (linePoints.length > 2) {
-    const points = linePoints.slice(0, i);
-    points.push(...linePoints.slice(i + 1));
-    graphic.linePoints = points;
-  }
-}
-
-export function removeBezierWayPoint(graphic: ILineGraphic, i: number) {
-  let points;
-  const linePoints = graphic.linePoints;
-  const c = i % 3;
-  if (c !== 0) {
-    throw new Error(`i=${i}的点${linePoints[i]}不是路径点`);
-  }
-  if (i === 0) {
-    // 第一个点
-    if (linePoints.length > 4) {
-      points = linePoints.slice(3);
-    } else {
-      console.error('不能移除:剩余点数不足');
-    }
-  } else if (i === linePoints.length - 1) {
-    // 最后一个点
-    if (linePoints.length > 4) {
-      points = linePoints.slice(0, linePoints.length - 3);
-    } else {
-      console.error('无法移除:剩余点数不足');
-    }
-  } else {
-    // 中间点
-    points = linePoints.slice(0, i - 1);
-    points.push(...linePoints.slice(i + 2));
-  }
-  if (points) {
-    graphic.linePoints = points;
-  }
-}
-
-/**
- * 清除路径点(只留端点),适用于直线和贝塞尔曲线
- * @param graphic
- * @param curve
- */
-export function clearWayPoint(graphic: ILineGraphic, curve: boolean) {
-  const linePoints = graphic.linePoints;
-  if (!curve) {
-    if (linePoints.length > 2) {
-      const points = linePoints.slice(0, 1);
-      points.push(...linePoints.slice(-1));
-      graphic.linePoints = points;
-    }
-  } else {
-    if (linePoints.length > 4) {
-      const points = linePoints.slice(0, 2);
-      points.push(...linePoints.slice(-2));
-      graphic.linePoints = points;
-    }
-  }
-}
-
-/**
- * 贝塞尔曲线编辑
- */
-export class BezierCurveEditPlugin extends LineEditPlugin {
-  static Name = 'bezier_curve_points_edit';
-  options: ICompleteBezierCurveEditPointOptions;
-  // 曲线控制点辅助线
-  auxiliaryLines: Graphics[] = [];
-  constructor(g: ILineGraphic, options?: BezierCurveEditPointOptions) {
-    super(g);
-    this.options = Object.assign({}, { smooth: true }, options);
-    this.name = BezierCurveEditPlugin.Name;
-    this.initEditPoints();
-  }
-
-  reset(): void {
-    this.auxiliaryLines.splice(0, this.auxiliaryLines.length);
-    super.reset();
-  }
-
-  initEditPoints() {
-    // console.log('initEditPoints');
-    const cps = this.graphic.localToCanvasPoints(...this.linePoints);
-    for (let i = 0; i < cps.length; i++) {
-      const p = cps[i];
-      const dp = new DraggablePoint(p);
-      const startOrEnd = i == 0 || i == cps.length - 1;
-      const c = i % 3;
-      if (c === 1) {
-        // 前一路径点的控制点
-        dp.zIndex = 2;
-        const fp = cps[i - 1];
-        const line = new Graphics();
-        this.drawAuxiliaryLine(line, fp, p);
-        this.auxiliaryLines.push(line);
-      } else if (c === 2) {
-        // 后一路径点的控制点
-        dp.zIndex = 3;
-        const np = cps[i + 1];
-        const line = new Graphics();
-        this.drawAuxiliaryLine(line, p, np);
-        this.auxiliaryLines.push(line);
-      }
-      dp.on('transforming', (e: GraphicTransformEvent) => {
-        const tlp = this.graphic.canvasToLocalPoint(dp.position);
-        const cp = this.linePoints[i];
-        cp.x = tlp.x;
-        cp.y = tlp.y;
-        if (this.options.smooth || this.options.symmetry) {
-          if (c === 0 && !startOrEnd) {
-            const shiftData = e.getData<ShiftData>();
-            const fp = this.linePoints[i - 1];
-            const np = this.linePoints[i + 1];
-            fp.x = fp.x + shiftData.dx;
-            fp.y = fp.y + shiftData.dy;
-            np.x = np.x + shiftData.dx;
-            np.y = np.y + shiftData.dy;
-          } else if (c === 1 && i !== 1) {
-            const bp = this.linePoints[i - 1];
-            const fp2 = this.linePoints[i - 2];
-            let mp;
-            if (this.options.symmetry) {
-              mp = calculateMirrorPoint(bp, cp);
-            } else {
-              const distance = distance2(bp, fp2);
-              mp = calculateMirrorPoint(bp, cp, distance);
-            }
-            fp2.x = mp.x;
-            fp2.y = mp.y;
-          } else if (c === 2 && i !== cps.length - 2) {
-            const bp = this.linePoints[i + 1];
-            const np2 = this.linePoints[i + 2];
-            let mp;
-            if (this.options.symmetry) {
-              mp = calculateMirrorPoint(bp, cp);
-            } else {
-              const distance = distance2(bp, np2);
-              mp = calculateMirrorPoint(bp, cp, distance);
-            }
-            np2.x = mp.x;
-            np2.y = mp.y;
-          }
-        }
-        this.graphic.repaint();
-      });
-      if (this.options.onEditPointCreate) {
-        this.options.onEditPointCreate(this.graphic, dp, i);
-      }
-      this.editedPoints.push(dp);
-      if (this.auxiliaryLines.length > 0) {
-        this.addChild(...this.auxiliaryLines);
-      }
-    }
-    this.addChild(...this.editedPoints);
-  }
-
-  drawAuxiliaryLine(line: Graphics, p1: IPointData, p2: IPointData) {
-    line.clear();
-    if (this.options.auxiliaryLineColor) {
-      line.lineStyle(1, new Color(this.options.auxiliaryLineColor));
-    } else {
-      line.lineStyle(1, new Color('blue'));
-    }
-    line.moveTo(p1.x, p1.y);
-    line.lineTo(p2.x, p2.y);
-  }
-
-  updateEditedPointsPosition() {
-    const cps = this.graphic.localToCanvasPoints(...this.linePoints);
-    if (cps.length === this.editedPoints.length) {
-      for (let i = 0; i < cps.length; i++) {
-        const cp = cps[i];
-        this.editedPoints[i].position.copyFrom(cp);
-        const c = i % 3;
-        const d = Math.floor(i / 3);
-        if (c === 1 || c === 2) {
-          const li = d * 2 + c - 1;
-          const line = this.auxiliaryLines[li];
-          if (c === 1) {
-            const fp = cps[i - 1];
-            this.drawAuxiliaryLine(line, fp, cp);
-          } else {
-            const np = cps[i + 1];
-            this.drawAuxiliaryLine(line, cp, np);
-          }
-        }
-      }
-    }
-  }
-}

src/jl-graphic/plugins/GraphicTransformPlugin.ts

@@ -1,913 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import {
-  Container,
-  DisplayObject,
-  Graphics,
-  IDestroyOptions,
-  Point,
-  Polygon,
-} from 'pixi.js';
-import {
-  AppDragEvent,
-  InteractionPluginBase,
-  InteractionPluginType,
-  KeyListener,
-} from '.';
-import { IGraphicScene } from '../app';
-import { JlGraphic } from '../core';
-import { AbsorbablePosition, VectorText } from '../graphic';
-import { DraggablePoint } from '../graphic/DraggablePoint';
-import {
-  DebouncedFunction,
-  angleToAxisx,
-  calculateLineMidpoint,
-  convertRectangleToPolygonPoints,
-  debounce,
-  distance,
-  recursiveChildren,
-} from '../utils';
-
-export class ShiftData {
-  /**
-   * 起始位置
-   */
-  startPosition: Point;
-  /**
-   * 上一次终点位置
-   */
-  lastPosition?: Point;
-  /**
-   * 当前位置
-   */
-  currentPosition?: Point;
-  constructor(
-    startPosition: Point,
-    currentPosition?: Point,
-    lastPosition?: Point
-  ) {
-    this.startPosition = startPosition;
-    this.lastPosition = lastPosition;
-    this.currentPosition = currentPosition;
-  }
-  static new(
-    startPosition: Point,
-    currentPosition?: Point,
-    lastPosition?: Point
-  ) {
-    return new ShiftData(startPosition, currentPosition, lastPosition);
-  }
-
-  public get dx(): number {
-    if (!this.lastPosition || !this.currentPosition) {
-      throw new Error('错误的位移数据或阶段');
-    }
-    return this.currentPosition.x - this.lastPosition.x;
-  }
-
-  public get dy(): number {
-    if (!this.lastPosition || !this.currentPosition) {
-      throw new Error('错误的位移数据或阶段');
-    }
-    return this.currentPosition.y - this.lastPosition.y;
-  }
-
-  public get dsx(): number {
-    if (!this.currentPosition) {
-      throw new Error('错误的位移数据或阶段');
-    }
-    return this.currentPosition.x - this.startPosition.x;
-  }
-
-  public get dsy(): number {
-    if (!this.currentPosition) {
-      throw new Error('错误的位移数据或阶段');
-    }
-    return this.currentPosition.y - this.startPosition.y;
-  }
-}
-
-export class ScaleData {
-  start: Point;
-  current?: Point;
-  last?: Point;
-  constructor(start: Point, current?: Point, last?: Point) {
-    this.start = start;
-    this.current = current;
-    this.last = last;
-  }
-  static new(start: Point, current?: Point, last?: Point) {
-    return new ScaleData(start, current, last);
-  }
-}
-
-export type TransformData = ShiftData | null;
-
-/**
- * 图形平移事件
- */
-export class GraphicTransformEvent {
-  /**
-   * 图形对象
-   */
-  target: DisplayObject;
-  type: 'shift' | 'rotate' | 'scale' | 'skew';
-  data: TransformData;
-
-  constructor(
-    target: DisplayObject,
-    type: 'shift' | 'rotate' | 'scale' | 'skew',
-    data: TransformData
-  ) {
-    this.target = target;
-    this.type = type;
-    this.data = data;
-  }
-
-  getData<D extends TransformData>(): D {
-    return this.data as D;
-  }
-
-  static shift(target: DisplayObject, data: ShiftData) {
-    return new GraphicTransformEvent(target, 'shift', data);
-  }
-
-  static scale(target: DisplayObject) {
-    return new GraphicTransformEvent(target, 'scale', null);
-  }
-
-  static rotate(target: DisplayObject) {
-    return new GraphicTransformEvent(target, 'rotate', null);
-  }
-
-  static skew(target: DisplayObject) {
-    return new GraphicTransformEvent(target, 'skew', null);
-  }
-
-  isShift(): boolean {
-    return this.type === 'shift';
-  }
-  isRotate(): boolean {
-    return this.type === 'rotate';
-  }
-  isScale(): boolean {
-    return this.type === 'scale';
-  }
-  isSkew(): boolean {
-    return this.type === 'skew';
-  }
-}
-
-export class GraphicTransformPlugin extends InteractionPluginBase {
-  static Name = '__graphic_transform_plugin';
-
-  /**
-   * 可吸附位置列表
-   */
-  absorbablePositions?: AbsorbablePosition[];
-  apContainer: Container;
-  static AbsorbablePosisiontsName = '__AbsorbablePosisionts';
-
-  constructor(app: IGraphicScene) {
-    super(app, GraphicTransformPlugin.Name, InteractionPluginType.Other);
-    this.apContainer = new Container();
-    this.apContainer.name = GraphicTransformPlugin.AbsorbablePosisiontsName;
-    this.app.canvas.addAssistantAppend(this.apContainer);
-    app.on('options-update', (options) => {
-      if (options.absorbablePositions) {
-        this.absorbablePositions = this.filterAbsorbablePositions(
-          options.absorbablePositions
-        );
-      }
-    });
-  }
-
-  /**
-   * 过滤重复的吸附位置
-   * @param positions
-   * @returns
-   */
-  filterAbsorbablePositions(
-    positions: AbsorbablePosition[]
-  ): AbsorbablePosition[] {
-    const aps: AbsorbablePosition[] = [];
-    for (let i = 0; i < positions.length; i++) {
-      const ap1 = positions[i];
-      let ap: AbsorbablePosition | null = ap1;
-      for (let j = positions.length - 1; j > i; j--) {
-        const ap2 = positions[j];
-        if (ap.isOverlapping(ap2) && ap.compareTo(ap2) <= 0) {
-          ap = null;
-          break;
-        }
-      }
-      if (ap != null) {
-        aps.push(ap);
-      }
-    }
-    // console.log(positions, aps);
-    return aps;
-  }
-
-  static new(app: IGraphicScene) {
-    return new GraphicTransformPlugin(app);
-  }
-
-  bind(): void {
-    this.app.on('drag_op_start', this.onDragStart, this);
-    this.app.on('drag_op_move', this.onDragMove, this);
-    this.app.on('drag_op_end', this.onDragEnd, this);
-    this.app.on('graphicselectedchange', this.onGraphicSelectedChange, this);
-    this.app.on(
-      'graphicchildselectedchange',
-      this.onGraphicSelectedChange,
-      this
-    );
-  }
-  unbind(): void {
-    this.app.off('drag_op_start', this.onDragStart, this);
-    this.app.off('drag_op_move', this.onDragMove, this);
-    this.app.off('drag_op_end', this.onDragEnd, this);
-    this.app.off('graphicselectedchange', this.onGraphicSelectedChange, this);
-    this.app.off(
-      'graphicchildselectedchange',
-      this.onGraphicSelectedChange,
-      this
-    );
-  }
-
-  getDraggedTargets(e: AppDragEvent): DisplayObject[] {
-    const targets: DisplayObject[] = [];
-    if (e.target.isGraphicChild() && e.target.selected && e.target.draggable) {
-      const graphic = e.target.getGraphic() as JlGraphic;
-      // 图形子元素
-      recursiveChildren(graphic, (child) => {
-        if (child.selected && child.draggable) {
-          targets.push(child);
-        }
-      });
-    } else if (
-      (e.target.isGraphic() || e.target.isGraphicChild()) &&
-      e.target.getGraphic()?.draggable
-    ) {
-      // 图形对象
-      targets.push(...this.app.selectedGraphics);
-    } else if (e.target.draggable) {
-      targets.push(e.target);
-    }
-    return targets;
-  }
-  onDragStart(e: AppDragEvent) {
-    if (!e.target.isCanvas() && e.isLeftButton) {
-      const targets: DisplayObject[] = this.getDraggedTargets(e);
-      if (targets.length > 0) {
-        targets.forEach((target) => {
-          target.shiftStartPoint = target.position.clone();
-          target.emit(
-            'transformstart',
-            GraphicTransformEvent.shift(
-              target,
-              ShiftData.new(target.shiftStartPoint)
-            )
-          );
-        });
-        // 显示吸附图形
-        if (this.absorbablePositions && this.absorbablePositions.length > 0) {
-          this.apContainer.removeChildren();
-          this.apContainer.addChild(...this.absorbablePositions);
-        }
-      }
-    }
-  }
-
-  onDragMove(e: AppDragEvent) {
-    if (!e.target.isCanvas() && e.isLeftButton) {
-      const targets: DisplayObject[] = this.getDraggedTargets(e);
-      if (targets.length > 0) {
-        // 处理位移
-        targets.forEach((target) => {
-          if (target.shiftStartPoint) {
-            target.shiftLastPoint = target.position.clone();
-            const { dx, dy } = e.toTargetShiftLen(target.parent);
-            target.position.set(
-              target.shiftStartPoint.x + dx,
-              target.shiftStartPoint.y + dy
-            );
-          }
-        });
-        // 处理吸附
-        if (this.absorbablePositions) {
-          for (let i = 0; i < this.absorbablePositions.length; i++) {
-            const ap = this.absorbablePositions[i];
-            ap.tryAbsorb(...targets);
-          }
-        }
-        // const start = new Date().getTime();
-
-        // 事件发布
-        targets.forEach((target) => {
-          if (target.shiftStartPoint && target.shiftLastPoint) {
-            target.emit(
-              'transforming',
-              GraphicTransformEvent.shift(
-                target,
-                ShiftData.new(
-                  target.shiftStartPoint,
-                  target.position.clone(),
-                  target.shiftLastPoint
-                )
-              )
-            );
-          }
-        });
-        // const dt = new Date().getTime() - start;
-        // console.log('拖拽耗时', `${dt}ms`, targets);
-      }
-    }
-  }
-
-  onDragEnd(e: AppDragEvent) {
-    if (!e.target.isCanvas() && e.isLeftButton) {
-      const targets: DisplayObject[] = this.getDraggedTargets(e);
-      targets.forEach((target) => {
-        if (target.shiftStartPoint) {
-          target.emit(
-            'transformend',
-            GraphicTransformEvent.shift(
-              target,
-              ShiftData.new(target.shiftStartPoint, target.position.clone())
-            )
-          );
-        }
-        target.shiftStartPoint = null;
-      });
-    }
-    this.clearCache();
-  }
-
-  /**
-   * 清理缓存
-   */
-  clearCache() {
-    // 移除吸附图形
-    this.absorbablePositions = [];
-    this.apContainer.removeChildren();
-  }
-
-  onGraphicSelectedChange(g: DisplayObject, selected: boolean) {
-    let br = g.getAssistantAppend<BoundsGraphic>(BoundsGraphic.Name);
-    if (!br) {
-      // 绘制辅助包围框
-      br = new BoundsGraphic(g);
-    }
-
-    if (selected) {
-      if (br) {
-        br.redraw();
-        br.visible = true;
-      }
-    } else {
-      if (br) {
-        br.visible = false;
-      }
-    }
-    if (g.scalable || g.rotatable) {
-      // 缩放点
-      let sp = g.getAssistantAppend<TransformPoints>(TransformPoints.Name);
-      if (!sp) {
-        sp = new TransformPoints(g);
-      }
-      if (selected) {
-        sp.update();
-        sp.visible = true;
-      } else {
-        sp.visible = false;
-      }
-    }
-  }
-
-  // onGraphicChildSelectedChange(child: DisplayObject, selected: boolean) {
-  //   let br = child.getAssistantAppend<BoundsGraphic>(BoundsGraphic.Name);
-  //   if (!br) {
-  //     // 绘制辅助包围框
-  //     br = new BoundsGraphic(child);
-  //   }
-  //   if (selected) {
-  //     br.redraw();
-  //     br.visible = true;
-  //   } else {
-  //     br.visible = false;
-  //   }
-  // }
-}
-
-/**
- * 缩放、旋转辅助
- */
-export class TransformPoints extends Container {
-  static Name = 'transformPoints';
-  static MinLength = 40;
-  static LeftTopName = 'lt-scale-point';
-  static TopName = 't-scale-point';
-  static RightTopName = 'rt-scale-point';
-  static RightName = 'r-scale-point';
-  static RightBottomName = 'rb-scale-point';
-  static BottomName = 'b-scale-point';
-  static LeftBottomName = 'lb-scale-point';
-  static LeftName = 'l-scale-point';
-
-  static RotateName = 'rotate-point';
-  obj: DisplayObject;
-
-  ltScalePoint: DraggablePoint;
-  ltLocal: Point = new Point();
-  tScalePoint: DraggablePoint;
-  tLocal: Point = new Point();
-  tCanvas: Point = new Point();
-  rtScalePoint: DraggablePoint;
-  rtLocal: Point = new Point();
-  rScalePoint: DraggablePoint;
-  rLocal: Point = new Point();
-  rbScalePoint: DraggablePoint;
-  rbLocal: Point = new Point();
-  bScalePoint: DraggablePoint;
-  bLocal: Point = new Point();
-  lbScalePoint: DraggablePoint;
-  lbLocal: Point = new Point();
-  lScalePoint: DraggablePoint;
-  lLocal: Point = new Point();
-  originScale: Point = new Point();
-  scalePivot: Point = new Point();
-
-  /**
-   * 旋转拖拽点
-   */
-  rotatePoint: DraggablePoint;
-  /**
-   * 旋转中心坐标
-   */
-  rotatePivot: Point;
-  /**
-   * 起始旋转坐标
-   */
-  rotateLastPoint: Point;
-  /**
-   * 起始图形角度
-   */
-  startAngle = 0;
-  /**
-   * 当前角度信息文本辅助
-   */
-  angleAssistantText: VectorText;
-  /**
-   * 旋转角度步长
-   */
-  angleStep = 1;
-  /**
-   * 修改旋转步长键盘监听
-   */
-  rotateAngleStepKeyListeners: KeyListener[] = [];
-
-  constructor(obj: DisplayObject) {
-    super();
-    this.obj = obj;
-    this.name = TransformPoints.Name;
-
-    this.angleAssistantText = new VectorText('');
-    this.angleAssistantText.setVectorFontSize(16);
-    this.angleAssistantText.anchor.set(0.5);
-
-    // 创建缩放拖拽点
-    this.ltScalePoint = new DraggablePoint(new Point());
-    this.ltScalePoint.name = TransformPoints.LeftTopName;
-    this.addChild(this.ltScalePoint);
-    this.tScalePoint = new DraggablePoint(new Point());
-    this.tScalePoint.name = TransformPoints.TopName;
-    this.addChild(this.tScalePoint);
-    this.rtScalePoint = new DraggablePoint(new Point());
-    this.rtScalePoint.name = TransformPoints.RightTopName;
-    this.addChild(this.rtScalePoint);
-    this.rScalePoint = new DraggablePoint(new Point());
-    this.rScalePoint.name = TransformPoints.RightName;
-    this.addChild(this.rScalePoint);
-    this.rbScalePoint = new DraggablePoint(new Point());
-    this.rbScalePoint.name = TransformPoints.RightBottomName;
-    this.addChild(this.rbScalePoint);
-    this.bScalePoint = new DraggablePoint(new Point());
-    this.bScalePoint.name = TransformPoints.BottomName;
-    this.addChild(this.bScalePoint);
-    this.lbScalePoint = new DraggablePoint(new Point());
-    this.lbScalePoint.name = TransformPoints.LeftBottomName;
-    this.addChild(this.lbScalePoint);
-    this.lScalePoint = new DraggablePoint(new Point());
-    this.lScalePoint.name = TransformPoints.LeftName;
-    this.addChild(this.lScalePoint);
-    this.obj.on('transformstart', this.onObjTransformStart, this);
-    this.obj.on('transformend', this.onObjTransformEnd, this);
-
-    if (this.obj.children && this.obj.children.length > 0) {
-      recursiveChildren(this.obj as Container, (child) => {
-        child.on('transformstart', this.onObjTransformStart, this);
-        child.on('transformend', this.onObjTransformEnd, this);
-      });
-    }
-    const pg = this.obj.getGraphic();
-    if (pg != null) {
-      pg.on('transformstart', this.onObjTransformStart, this);
-      pg.on('transformend', this.onObjTransformEnd, this);
-    }
-
-    this.obj.on('repaint', this.onGraphicRepaint, this);
-    this.children.forEach((dp) => {
-      dp.on('transformstart', this.onScaleDragStart, this);
-      dp.on('transforming', this.onScaleDragMove, this);
-      dp.on('transformend', this.onScaleDragEnd, this);
-    });
-
-    // 创建旋转拖拽点
-    this.rotatePoint = new DraggablePoint(new Point());
-    this.addChild(this.rotatePoint);
-    this.rotatePoint.on('transformstart', this.onRotateStart, this);
-    this.rotatePoint.on('transforming', this.onRotateMove, this);
-    this.rotatePoint.on('transformend', this.onRotateEnd, this);
-    this.rotatePivot = new Point();
-    this.rotateLastPoint = new Point();
-    // 初始化旋转角度修改键盘监听器
-    for (let i = 1; i < 10; i++) {
-      this.rotateAngleStepKeyListeners.push(
-        KeyListener.create({
-          value: '' + i,
-          onPress: () => {
-            // console.log('修改角度step');
-            this.angleStep = i;
-          },
-        })
-      );
-    }
-
-    this.obj.addAssistantAppend(this);
-  }
-
-  onObjTransformStart() {
-    this.visible = false;
-  }
-  onObjTransformEnd() {
-    this.update();
-    this.visible = true;
-  }
-  onGraphicRepaint() {
-    if (this.visible) {
-      this.update();
-    }
-  }
-
-  /**
-   * 旋转开始
-   * @param de
-   */
-  onRotateStart(de: GraphicTransformEvent) {
-    this.hideAll();
-    const assistantPoint = this.obj.localToCanvasPoint(this.obj.pivot);
-    this.rotatePivot.copyFrom(assistantPoint);
-    this.rotateLastPoint.copyFrom(de.target.position);
-    this.startAngle = this.obj.angle;
-    const app = this.obj.getGraphicApp();
-    this.rotateAngleStepKeyListeners.forEach((listener) =>
-      app.addKeyboardListener(listener)
-    );
-    this.obj.emit('transformstart', GraphicTransformEvent.rotate(this.obj));
-    // app.emit('transformstart', app.selectedGraphics);
-    this.obj.getCanvas().addAssistantAppends(this.angleAssistantText);
-    this.updateAngleAssistantText(de);
-  }
-  updateAngleAssistantText(de: GraphicTransformEvent) {
-    this.angleAssistantText.text = this.obj.angle + '°';
-    let cursorPoint = de.data?.startPosition;
-    if (de.data?.currentPosition) {
-      cursorPoint = de.data?.currentPosition;
-    }
-    if (cursorPoint) {
-      this.angleAssistantText.position.x = cursorPoint.x;
-      this.angleAssistantText.position.y = cursorPoint.y - 10;
-    }
-  }
-  /**
-   * 旋转移动
-   * @param de
-   */
-  onRotateMove(de: GraphicTransformEvent) {
-    // 旋转角度计算逻辑：取锚点y负方向一点作为旋转点，求旋转点和锚点所形成的直线与x轴角度，此角度+90°即为最终旋转角度，再将旋转角度限制到(-180,180]之间
-    let angle = angleToAxisx(this.rotatePivot, de.target.position);
-    angle = Math.floor(angle / this.angleStep) * this.angleStep;
-    const parentAngle = this.obj.parent.worldAngle;
-    angle = (angle + 90 - parentAngle) % 360;
-    if (angle > 180) {
-      angle = angle - 360;
-    }
-    this.obj.angle = angle;
-    this.updateAngleAssistantText(de);
-    // this.obj.emit('rotatemove', this.obj);
-  }
-  /**
-   * 旋转结束
-   * @param de
-   */
-  onRotateEnd() {
-    this.showAll();
-    this.obj.getCanvas().removeAssistantAppends(this.angleAssistantText);
-    this.rotateAngleStepKeyListeners.forEach((listener) =>
-      this.obj.getGraphicApp().removeKeyboardListener(listener)
-    );
-    this.obj.emit('transformend', GraphicTransformEvent.rotate(this.obj));
-  }
-
-  /**
-   * 缩放开始
-   */
-  onScaleDragStart() {
-    this.hideAll();
-    const points = convertRectangleToPolygonPoints(this.obj.getLocalBounds());
-    const p0 = points[0];
-    const p1 = points[1];
-    const p2 = points[2];
-    const p3 = points[3];
-    this.scalePivot = this.obj.pivot.clone();
-    this.ltLocal.copyFrom(p0);
-    this.tCanvas.copyFrom(
-      this.obj.localToCanvasPoint(calculateLineMidpoint(p0, p1))
-    );
-    this.tLocal.copyFrom(calculateLineMidpoint(p0, p1));
-    this.rtLocal.copyFrom(p1);
-    this.rLocal.copyFrom(calculateLineMidpoint(p1, p2));
-    this.rbLocal.copyFrom(p2);
-    this.bLocal.copyFrom(calculateLineMidpoint(p2, p3));
-    this.lbLocal.copyFrom(p3);
-    this.lLocal.copyFrom(calculateLineMidpoint(p0, p3));
-    this.originScale = this.obj.scale.clone();
-    this.obj.emit('transformstart', GraphicTransformEvent.scale(this.obj));
-  }
-
-  onScaleDragMove(e: GraphicTransformEvent) {
-    // 缩放计算逻辑：共8个方向缩放点，根据所拖拽的方向:
-    // 1,计算缩放为1时的此点在拖拽开始时的位置到锚点x、y距离，
-    // 2,计算拖拽点的当前位置到锚点的x、y方向距离，
-    // PS:以上两个计算都是在local（也就是图形对象本地）坐标系，
-    // 用当前距离除以原始距离即为缩放比例
-    const defaultScale = new Point(1, 1);
-    let originWidth = 0;
-    let originHeight = 0;
-    let width = 0;
-    let height = 0;
-    this.obj.scale.copyFrom(defaultScale);
-    const point = this.obj.toLocal(
-      e.target.parent.localToScreenPoint(e.target.position)
-    );
-    if (e.target === this.ltScalePoint) {
-      // 左上角
-      originWidth = Math.abs(this.ltLocal.x - this.scalePivot.x);
-      originHeight = Math.abs(this.ltLocal.y - this.scalePivot.y);
-      width = Math.abs(point.x - this.scalePivot.x);
-      height = Math.abs(point.y - this.scalePivot.y);
-    } else if (e.target == this.tScalePoint) {
-      // 上
-      originHeight = Math.abs(this.tLocal.y - this.scalePivot.y);
-      height = Math.abs(point.y - this.scalePivot.y);
-    } else if (e.target == this.rtScalePoint) {
-      // 右上
-      originWidth = Math.abs(this.rtLocal.x - this.scalePivot.x);
-      originHeight = Math.abs(this.rtLocal.y - this.scalePivot.y);
-      width = Math.abs(point.x - this.scalePivot.x);
-      height = Math.abs(point.y - this.scalePivot.y);
-    } else if (e.target == this.rScalePoint) {
-      // 右
-      originWidth = Math.abs(this.rLocal.x - this.scalePivot.x);
-      width = Math.abs(point.x - this.scalePivot.x);
-    } else if (e.target == this.rbScalePoint) {
-      // 右下
-      originWidth = Math.abs(this.rbLocal.x - this.scalePivot.x);
-      originHeight = Math.abs(this.rbLocal.y - this.scalePivot.y);
-      width = Math.abs(point.x - this.scalePivot.x);
-      height = Math.abs(point.y - this.scalePivot.y);
-    } else if (e.target == this.bScalePoint) {
-      // 下
-      originHeight = Math.abs(this.bLocal.y - this.scalePivot.y);
-      height = Math.abs(point.y - this.scalePivot.y);
-    } else if (e.target == this.lbScalePoint) {
-      // 左下
-      originWidth = Math.abs(this.lbLocal.x - this.scalePivot.x);
-      originHeight = Math.abs(this.lbLocal.y - this.scalePivot.y);
-      width = Math.abs(point.x - this.scalePivot.x);
-      height = Math.abs(point.y - this.scalePivot.y);
-    } else {
-      // 左
-      originWidth = Math.abs(this.lLocal.x - this.scalePivot.x);
-      width = Math.abs(point.x - this.scalePivot.x);
-    }
-    // 计算缩放比例，并根据是否保持纵横比两种情况进行缩放处理
-    const sx = originWidth == 0 ? this.originScale.x : width / originWidth;
-    const sy = originHeight == 0 ? this.originScale.y : height / originHeight;
-    // console.log(originWidth, originHeight, width, height, sx, sy);
-    if (this.obj.keepAspectRatio) {
-      let max = Math.max(sx, sy);
-      if (originWidth == 0) {
-        max = sy;
-      } else if (originHeight == 0) {
-        max = sx;
-      }
-      this.obj.scale.set(max, max);
-    } else {
-      this.obj.scale.x = sx;
-      this.obj.scale.y = sy;
-    }
-  }
-
-  onScaleDragEnd() {
-    this.showAll();
-    this.obj.emit('transformend', GraphicTransformEvent.scale(this.obj));
-  }
-
-  hideOthers(dg: DisplayObject) {
-    this.children.forEach((child) => {
-      if (child.name !== dg.name) {
-        child.visible = false;
-      }
-    });
-  }
-
-  hideAll() {
-    this.children.forEach((child) => (child.visible = false));
-  }
-
-  showAll() {
-    this.update();
-    this.children.forEach((child) => (child.visible = true));
-  }
-
-  getObjBounds(): { width: number; height: number } {
-    const points = this.obj.localBoundsToCanvasPoints();
-    const p0 = points[0];
-    const p1 = points[1];
-    const p3 = points[3];
-    const width = distance(p0.x, p0.y, p1.x, p1.y);
-    const height = distance(p0.x, p0.y, p3.x, p3.y);
-    return { width, height };
-  }
-
-  /**
-   * 更新位置和cursor
-   * @returns
-   */
-  update() {
-    if (this.obj.scalable) {
-      this.updateScalePoints();
-    }
-    if (this.obj.rotatable) {
-      this.updateRotatePoint();
-    }
-  }
-
-  updateRotatePoint() {
-    const rect = this.obj.getLocalBounds();
-    const lp = this.obj.pivot.clone();
-    const dy = 10 / this.obj.scale.y;
-    lp.y = rect.y - dy;
-    const p = this.obj.localToCanvasPoint(lp);
-    this.rotatePoint.position.copyFrom(p);
-  }
-
-  updateScalePoints() {
-    const points = this.obj.localBoundsToCanvasPoints();
-    this.ltScalePoint.position.copyFrom(points[0]);
-    this.tScalePoint.position.copyFrom(
-      calculateLineMidpoint(points[0], points[1])
-    );
-    this.rtScalePoint.position.copyFrom(points[1]);
-    this.rScalePoint.position.copyFrom(
-      calculateLineMidpoint(points[1], points[2])
-    );
-    this.rbScalePoint.position.copyFrom(points[2]);
-    this.bScalePoint.position.copyFrom(
-      calculateLineMidpoint(points[2], points[3])
-    );
-    this.lbScalePoint.position.copyFrom(points[3]);
-    this.lScalePoint.position.copyFrom(
-      calculateLineMidpoint(points[3], points[0])
-    );
-    const angle = this.obj.worldAngle;
-    const angle360 = (360 + angle) % 360;
-    if (
-      (angle >= -22.5 && angle <= 22.5) ||
-      (angle360 >= 180 - 22.5 && angle360 <= 180 + 22.5)
-    ) {
-      this.ltScalePoint.cursor = 'nw-resize';
-      this.tScalePoint.cursor = 'n-resize';
-      this.rtScalePoint.cursor = 'ne-resize';
-      this.rScalePoint.cursor = 'e-resize';
-      this.rbScalePoint.cursor = 'se-resize';
-      this.bScalePoint.cursor = 's-resize';
-      this.lbScalePoint.cursor = 'sw-resize';
-      this.lScalePoint.cursor = 'w-resize';
-    } else if (
-      (angle >= 22.5 && angle <= 67.5) ||
-      (angle360 >= 180 + 22.5 && angle360 <= 180 + 67.5)
-    ) {
-      this.ltScalePoint.cursor = 'n-resize';
-      this.tScalePoint.cursor = 'ne-resize';
-      this.rtScalePoint.cursor = 'e-resize';
-      this.rScalePoint.cursor = 'se-resize';
-      this.rbScalePoint.cursor = 's-resize';
-      this.bScalePoint.cursor = 'sw-resize';
-      this.lbScalePoint.cursor = 'w-resize';
-      this.lScalePoint.cursor = 'nw-resize';
-    } else if (
-      (angle >= 67.5 && angle < 112.5) ||
-      (angle360 >= 180 + 67.5 && angle360 <= 180 + 112.5)
-    ) {
-      this.ltScalePoint.cursor = 'ne-resize';
-      this.tScalePoint.cursor = 'e-resize';
-      this.rtScalePoint.cursor = 'se-resize';
-      this.rScalePoint.cursor = 's-resize';
-      this.rbScalePoint.cursor = 'sw-resize';
-      this.bScalePoint.cursor = 'w-resize';
-      this.lbScalePoint.cursor = 'nw-resize';
-      this.lScalePoint.cursor = 'n-resize';
-    } else {
-      this.ltScalePoint.cursor = 'e-resize';
-      this.tScalePoint.cursor = 'se-resize';
-      this.rtScalePoint.cursor = 's-resize';
-      this.rScalePoint.cursor = 'sw-resize';
-      this.rbScalePoint.cursor = 'w-resize';
-      this.bScalePoint.cursor = 'nw-resize';
-      this.lbScalePoint.cursor = 'n-resize';
-      this.lScalePoint.cursor = 'ne-resize';
-    }
-  }
-}
-
-/**
- * 包围盒矩形图形，现使用外边框转画布多边形实现
- */
-export class BoundsGraphic extends Graphics {
-  static Name = '_BoundsRect';
-  static BoundsLineStyle = {
-    width: 1,
-    color: 0x29b6f2,
-    alpha: 1,
-  };
-  obj: DisplayObject;
-  debouncedRedraw: DebouncedFunction<() => void>;
-  constructor(graphic: DisplayObject) {
-    super();
-    this.obj = graphic;
-    this.name = BoundsGraphic.Name;
-    this.visible = false;
-
-    this.debouncedRedraw = debounce(this.doRedraw, 50);
-    this.obj.on('transformstart', this.onObjTransformStart, this);
-    this.obj.on('transformend', this.onObjTransformEnd, this);
-    if (this.obj.children && this.obj.children.length > 0) {
-      recursiveChildren(this.obj as Container, (child) => {
-        child.on('transformstart', this.onObjTransformStart, this);
-        child.on('transformend', this.onObjTransformEnd, this);
-      });
-    }
-    const pg = this.obj.getGraphic();
-    if (pg != null) {
-      pg.on('transformstart', this.onObjTransformStart, this);
-      pg.on('transformend', this.onObjTransformEnd, this);
-    }
-    this.obj.on('repaint', this.onGraphicRepaint, this);
-    graphic.addAssistantAppend(this);
-  }
-
-  onObjTransformStart(): void {
-    this.visible = false;
-  }
-  onObjTransformEnd(): void {
-    this.redraw();
-    this.visible = true;
-  }
-
-  onGraphicRepaint(): void {
-    if (this.visible) {
-      this.redraw();
-    }
-  }
-
-  destroy(options?: boolean | IDestroyOptions | undefined): void {
-    if (this.obj.isGraphic()) {
-      this.obj.off('repaint', this.onGraphicRepaint, this);
-    }
-    super.destroy(options);
-  }
-
-  redraw() {
-    this.debouncedRedraw(this);
-  }
-  doRedraw() {
-    const visible = this.visible;
-    this.visible = false; // 屏蔽包围框本身
-    const bounds = new Polygon(this.obj.localBoundsToCanvasPoints());
-    this.clear().lineStyle(BoundsGraphic.BoundsLineStyle).drawShape(bounds);
-    this.visible = visible;
-  }
-}

src/jl-graphic/plugins/InteractionPlugin.ts

@@ -1,489 +0,0 @@
-import {
-  DisplayObject,
-  FederatedMouseEvent,
-  FederatedPointerEvent,
-  Point,
-} from 'pixi.js';
-import { IGraphicAppConfig, IGraphicScene } from '../app/JlGraphicApp';
-import { JlGraphic } from '../core/JlGraphic';
-
-export enum InteractionPluginType {
-  App = 'app',
-  Graphic = 'graphic',
-  Other = 'other',
-}
-
-/**
- * 交互插件
- */
-export interface InteractionPlugin {
-  readonly _type: string;
-  name: string; // 唯一标识
-  app: IGraphicScene;
-
-  /**
-   * 恢复
-   */
-  resume(): void;
-  /**
-   * 停止
-   */
-  pause(): void;
-  /**
-   * 是否生效
-   */
-  isActive(): boolean;
-  isAppPlugin(): boolean;
-  isOtherPlugin(): boolean;
-  isGraphicPlugin(): boolean;
-}
-
-export abstract class InteractionPluginBase implements InteractionPlugin {
-  readonly _type: string;
-  name: string; // 唯一标识
-  app: IGraphicScene;
-  _pause: boolean;
-
-  constructor(app: IGraphicScene, name: string, type: string) {
-    this._type = type;
-    this.app = app;
-    this.name = name;
-    this._pause = true;
-    app.registerInteractionPlugin(this);
-  }
-
-  /**
-   * 恢复
-   */
-  resume(): void {
-    this.bind();
-    this._pause = false;
-    this.app.emit('interaction-plugin-resume', this);
-  }
-  /**
-   * 停止
-   */
-  pause(): void {
-    this.unbind();
-    this._pause = true;
-    this.app.emit('interaction-plugin-pause', this);
-  }
-
-  abstract bind(): void;
-  abstract unbind(): void;
-  /**
-   * 是否生效
-   */
-  isActive(): boolean {
-    return !this._pause;
-  }
-  isGraphicPlugin(): boolean {
-    return this._type === InteractionPluginType.Graphic;
-  }
-  isAppPlugin(): boolean {
-    return this._type === InteractionPluginType.App;
-  }
-  isOtherPlugin(): boolean {
-    return this._type === InteractionPluginType.Other;
-  }
-}
-
-export abstract class OtherInteractionPlugin extends InteractionPluginBase {
-  constructor(app: IGraphicScene, name: string) {
-    super(app, name, InteractionPluginType.Other);
-  }
-}
-
-export class AppDragEvent {
-  app: IGraphicScene;
-  type: 'start' | 'move' | 'end';
-  target: DisplayObject;
-  original: FederatedPointerEvent;
-  start: Point; // 画布坐标
-  constructor(
-    app: IGraphicScene,
-    type: 'start' | 'move' | 'end',
-    target: DisplayObject,
-    original: FederatedPointerEvent,
-    start: Point
-  ) {
-    this.app = app;
-    this.type = type;
-    this.target = target;
-    this.original = original;
-    this.start = start;
-  }
-
-  public get isMouse(): boolean {
-    return this.original.pointerType === 'mouse';
-  }
-
-  public get isLeftButton(): boolean {
-    return (
-      this.isMouse &&
-      ((this.original.button === -1 && this.original.buttons === 1) ||
-        (this.original.button === 0 && this.original.buttons === 0))
-    );
-  }
-
-  public get isRightButton(): boolean {
-    return (
-      this.isMouse &&
-      ((this.original.button === -1 && this.original.buttons === 2) ||
-        (this.original.button === 2 && this.original.buttons === 0))
-    );
-  }
-
-  public get isMiddleButton(): boolean {
-    return (
-      this.isMouse &&
-      ((this.original.button === -1 && this.original.buttons === 4) ||
-        (this.original.button === 1 && this.original.buttons === 0))
-    );
-  }
-
-  public get isTouch(): boolean {
-    return this.original.pointerType === 'touch';
-  }
-
-  /**
-   * 终点坐标(画布坐标)
-   */
-  public get end(): Point {
-    return this.app.toCanvasCoordinates(this.original.global);
-  }
-
-  public get dx(): number {
-    const move = this.original.movement;
-    return move.x / this.app.viewport.scaled;
-  }
-
-  public get dy(): number {
-    const move = this.original.movement;
-    return move.y / this.app.viewport.scaled;
-  }
-
-  public get dsx(): number {
-    return this.end.x - this.start.x;
-  }
-
-  public get dsy(): number {
-    return this.end.y - this.start.y;
-  }
-
-  /**
-   * 转换为目标对象的位移距离
-   */
-  toTargetShiftLen(target: DisplayObject): { dx: number; dy: number } {
-    const sl = target.canvasToLocalPoint(this.start);
-    const el = target.canvasToLocalPoint(this.end);
-    return { dx: el.x - sl.x, dy: el.y - sl.y };
-  }
-}
-
-/**
- * 拖拽操作插件
- */
-export class DragPlugin extends OtherInteractionPlugin {
-  static Name = '__drag_operation_plugin';
-  private threshold = 3;
-  target: DisplayObject | null = null;
-  start: Point | null = null;
-  startClientPoint: Point | null = null;
-  drag = false;
-  constructor(app: IGraphicScene) {
-    super(app, DragPlugin.Name);
-    app.on('options-update', (options: IGraphicAppConfig) => {
-      if (options.threshold !== undefined) {
-        this.threshold = options.threshold;
-      }
-    });
-  }
-  static new(app: IGraphicScene) {
-    return new DragPlugin(app);
-  }
-  bind(): void {
-    const canvas = this.app.canvas;
-    canvas.on('pointerdown', this.onPointerDown, this);
-  }
-  unbind(): void {
-    const canvas = this.app.canvas;
-    canvas.off('pointerdown', this.onPointerDown, this);
-    canvas.off('pointerup', this.onPointerUp, this);
-    canvas.off('pointerupoutside', this.onPointerUp, this);
-  }
-  onPointerDown(e: FederatedPointerEvent) {
-    this.target = e.target as DisplayObject;
-    this.start = this.app.toCanvasCoordinates(e.global);
-    this.startClientPoint = e.global.clone();
-    const canvas = this.app.canvas;
-    canvas.on('pointermove', this.onPointerMove, this);
-    canvas.on('pointerup', this.onPointerUp, this);
-    canvas.on('pointerupoutside', this.onPointerUp, this);
-  }
-  onPointerMove(e: FederatedPointerEvent) {
-    if (this.start && this.startClientPoint) {
-      const current = e.global;
-      const sgp = this.startClientPoint;
-      const dragStart =
-        Math.abs(current.x - sgp.x) > this.threshold ||
-        Math.abs(current.y - sgp.y) > this.threshold;
-      if (this.target && this.start && !this.drag && dragStart) {
-        this.app.emit(
-          'drag_op_start',
-          new AppDragEvent(this.app, 'start', this.target, e, this.start)
-        );
-        this.drag = true;
-      }
-
-      // drag移动处理
-      if (this.target && this.drag && this.start) {
-        // console.log('drag move', e.movement);
-        this.app.emit(
-          'drag_op_move',
-          new AppDragEvent(this.app, 'move', this.target, e, this.start)
-        );
-      }
-    }
-  }
-
-  onPointerUp(e: FederatedPointerEvent) {
-    if (this.target && this.drag && this.start) {
-      // console.log('drag end');
-      this.app.emit(
-        'drag_op_end',
-        new AppDragEvent(this.app, 'end', this.target, e, this.start)
-      );
-    } else if (this.target && this.start && !this.drag) {
-      // this.target.emit('click', this.target);
-      const ade = new AppDragEvent(this.app, 'end', this.target, e, this.start);
-      const graphic = this.target.getGraphic();
-      if (ade.isRightButton) {
-        this.target.emit('_rightclick', e);
-        if (graphic != null) {
-          graphic.emit('_rightclick', e);
-        }
-      } else if (ade.isLeftButton) {
-        this.target.emit('_leftclick', e);
-        if (graphic != null) {
-          graphic.emit('_leftclick', e);
-        }
-      }
-    }
-    const canvas = this.app.canvas;
-    canvas.off('mousemove', this.onPointerMove, this);
-    canvas.off('mouseup', this.onPointerUp, this);
-    canvas.off('mouseupoutside', this.onPointerUp, this);
-    this.clearCache();
-  }
-  /**
-   * 清理缓存
-   */
-  clearCache() {
-    this.drag = false;
-    this.start = null;
-    this.startClientPoint = null;
-    this.target = null;
-  }
-}
-
-/**
- * 视口移动插件
- */
-export class ViewportMovePlugin extends OtherInteractionPlugin {
-  static Name = '__viewport_move_plugin';
-
-  static MoveInterval = 20; // 移动间隔，单位ms
-  static TriggerRange = 100; // 边界触发范围,单位px
-  static DefaultMoveSpeed = 200 / ViewportMovePlugin.MoveInterval; // 默认移动速度
-
-  moveHandler: NodeJS.Timeout | null = null;
-  moveSpeedx = 0;
-  moveSpeedy = 0;
-
-  constructor(app: IGraphicScene) {
-    super(app, ViewportMovePlugin.Name);
-  }
-
-  static new(app: IGraphicScene): ViewportMovePlugin {
-    return new ViewportMovePlugin(app);
-  }
-  pause(): void {
-    super.pause();
-    this.stopMove();
-  }
-  bind(): void {
-    this.app.canvas.on('pointermove', this.viewportMove, this);
-  }
-
-  unbind(): void {
-    this.app.canvas.off('pointermove', this.viewportMove, this);
-  }
-
-  startMove(moveSpeedx: number, moveSpeedy: number) {
-    this.moveSpeedx = moveSpeedx;
-    this.moveSpeedy = moveSpeedy;
-    if (this.moveHandler == null) {
-      const viewport = this.app.viewport;
-      this.moveHandler = setInterval(() => {
-        viewport.moveCorner(
-          viewport.corner.x + this.moveSpeedx,
-          viewport.corner.y + this.moveSpeedy
-        );
-      }, ViewportMovePlugin.MoveInterval);
-    }
-  }
-
-  stopMove() {
-    if (this.moveHandler != null) {
-      clearInterval(this.moveHandler);
-      this.moveHandler = null;
-      this.app.canvas.cursor = 'auto';
-    }
-  }
-
-  private calculateBoundaryMoveSpeed(sp: Point): {
-    moveSpeedx: number;
-    moveSpeedy: number;
-  } {
-    let moveSpeedx = 0;
-    let moveSpeedy = 0;
-    const range = ViewportMovePlugin.TriggerRange;
-    const viewport = this.app.viewport;
-    if (sp.x < range) {
-      moveSpeedx = this.calculateMoveSpeed(sp.x - range);
-    } else if (sp.x > viewport.screenWidth - range) {
-      moveSpeedx = this.calculateMoveSpeed(sp.x + range - viewport.screenWidth);
-    } else {
-      moveSpeedx = 0;
-    }
-    if (sp.y < range) {
-      moveSpeedy = this.calculateMoveSpeed(sp.y - range);
-    } else if (sp.y > viewport.screenHeight - range) {
-      moveSpeedy = this.calculateMoveSpeed(
-        sp.y + range - viewport.screenHeight
-      );
-    } else {
-      moveSpeedy = 0;
-    }
-    return { moveSpeedx, moveSpeedy };
-  }
-
-  calculateMoveSpeed(dd: number): number {
-    return (
-      (dd / ViewportMovePlugin.TriggerRange) *
-      ViewportMovePlugin.DefaultMoveSpeed
-    );
-  }
-
-  viewportMove(e: FederatedMouseEvent) {
-    const sp = e.global;
-    const { moveSpeedx, moveSpeedy } = this.calculateBoundaryMoveSpeed(sp);
-    if (moveSpeedx == 0 && moveSpeedy == 0) {
-      this.app.canvas.cursor = 'auto';
-      this.stopMove();
-    } else {
-      this.app.canvas.cursor = 'grab';
-      this.startMove(moveSpeedx, moveSpeedy);
-    }
-  }
-}
-
-/**
- * 应用交互插件，同时只能生效一个
- */
-export abstract class AppInteractionPlugin extends InteractionPluginBase {
-  constructor(name: string, app: IGraphicScene) {
-    super(app, name, InteractionPluginType.App);
-  }
-
-  /**
-   * 恢复，app交互插件同时只能生效一个
-   */
-  resume(): void {
-    this.app.pauseAppInteractionPlugins();
-    super.resume();
-  }
-}
-
-/**
- * 图形交互插件,可同时生效
- */
-export abstract class GraphicInteractionPlugin<G extends JlGraphic>
-  implements InteractionPlugin
-{
-  readonly _type = InteractionPluginType.Graphic;
-  app: IGraphicScene;
-  name: string; // 唯一标识
-  _pause: boolean;
-  constructor(name: string, app: IGraphicScene) {
-    this.app = app;
-    this.name = name;
-    this._pause = true;
-    app.registerInteractionPlugin(this);
-    this.resume();
-    // 新增的图形对象绑定
-    this.app.on('graphicstored', (g) => {
-      if (this.isActive()) {
-        this.binds(this.filter(g));
-      }
-    });
-    this.app.on('graphicdeleted', (g) => {
-      if (this.isActive()) {
-        this.unbinds(this.filter(g));
-      }
-    });
-  }
-
-  isActive(): boolean {
-    return !this._pause;
-  }
-  isAppPlugin(): boolean {
-    return false;
-  }
-  isOtherPlugin(): boolean {
-    return false;
-  }
-  isGraphicPlugin(): boolean {
-    return true;
-  }
-
-  resume(): void {
-    const list = this.filter(...this.app.queryStore.getAllGraphics());
-    this.binds(list);
-    this._pause = false;
-    this.app.emit('interaction-plugin-resume', this);
-  }
-  pause(): void {
-    const list = this.filter(...this.app.queryStore.getAllGraphics());
-    this.unbinds(list);
-    this._pause = true;
-    this.app.emit('interaction-plugin-pause', this);
-  }
-
-  /**
-   * 过滤需要的图形对象
-   */
-  abstract filter(...grahpics: JlGraphic[]): G[] | undefined;
-
-  binds(list?: G[]): void {
-    if (list) {
-      list.forEach((g) => this.bind(g));
-    }
-  }
-  unbinds(list?: G[]): void {
-    if (list) {
-      list.forEach((g) => this.unbind(g));
-    }
-  }
-  /**
-   * 绑定图形对象的交互处理
-   * @param g 图形对象
-   */
-  abstract bind(g: G): void;
-  /**
-   * 取消图形对象的交互处理
-   * @param g 图形对象
-   */
-  abstract unbind(g: G): void;
-}