Merge branch 'develop' of https://gitea.joylink.club/joylink/rtss-simulation-app-client into develop

public/drawIcon.svg

@@ -102,5 +102,12 @@
   <symbol id="icon-fas-alarm" viewBox="512 0 1024 1024" fill="none" width="24" height="24">
     <path d="M1432.402476 832.831538H615.595717V701.607888l21.730627-7.540966c48.352495-16.765329 80.837352-61.142335 80.837352-110.410583v-150.12935c0-140.025358 99.605778-260.164239 236.365491-291.223989 0.662883-7.45788 2.460071-15.340222 6.12489-22.989561 11.362927-23.742755 34.576459-37.919771 62.099632-37.919771 29.217406 0 55.450938 15.853188 65.274965 39.451445 2.741841 6.574639 4.038707 13.969301 4.486649 21.244753 137.247392 30.723793 237.320981 151.09387 237.320981 291.438929l-0.003612 150.12935c0 49.242961 32.497501 93.610936 80.85722 110.417808l21.712564 7.548191v131.207394z m-752.158552-64.650013h687.512152v-22.131607c-62.188136-30.714762-102.569785-93.39419-102.569785-162.393579v-150.12935c0-117.890138-90.666798-217.844517-210.912247-232.507406l-30.270432-3.690107-30.283075 3.690107c-120.238223 14.661083-210.91044 114.615462-210.910441 232.507406v150.12935c0 69.039127-40.381649 131.714942-102.569784 162.40261l0.003612 22.122576zM1019.063602 147.035295c-0.671914 2.526901 0.466005 9.009423 1.161399 10.94569l4.60586 12.782615 1.692428-8.286934c0.96994-4.912917 1.573217-11.341252 1.528061-15.414277a14.520198 14.520198 0 0 0-5.292223-1.018708c-2.198169 0-3.330669 0.549091-3.495034 0.682751h0.001806s-0.077667 0.08128-0.202297 0.308863zM1023.983744 900.590055c-44.586527 0-82.154086-27.929572-96.280528-66.725359h192.591762c-14.157148 38.7994-51.728319 66.725359-96.311234 66.725359z" fill="#ffffff" p-id="5586"></path>
   </symbol>
-
+  <symbol id="icon-manual-alarm-button" viewBox="0 0 1024 1024" fill="fff" width="24" height="24">
+    <path d="M978.432 974.336H52.736V49.152h924.16v925.184h1.536z m-35.84-893.44H89.6V942.08h852.992V80.896z" p-id="6708"></path>
+    <path d="M491.008 461.312h36.352l-1.536 390.144h-36.352l1.536-390.144z" p-id="6709"></path>
+    <path d="M618.496 453.12c32.768-13.824 61.952-33.28 87.04-58.88 25.088-25.088 45.056-54.272 58.88-87.04 14.336-33.792 21.504-69.632 21.504-106.496h-31.232c0 133.632-108.544 242.688-242.688 242.688S269.312 334.336 269.312 200.704h-31.232c0 36.864 7.168 72.704 21.504 106.496 13.824 32.768 33.28 61.952 58.88 87.04s54.272 45.056 87.04 58.88c33.792 14.336 69.632 21.504 106.496 21.504s72.704-7.168 106.496-21.504z" p-id="6710"></path>
+  </symbol>
+  <symbol id="icon-smoke-detector" viewBox="0 0 1024 1024" fill="fff" width="24" height="24">
+    <path d="M334.147368 307.2c-5.389474 8.084211-5.389474 18.863158 2.694737 26.947368 2.694737 2.694737 8.084211 5.389474 10.778948 5.389474 5.389474 0 10.778947-2.694737 13.473684-8.08421 61.978947-75.452632 35.031579-123.957895 13.473684-164.378948-18.863158-35.031579-32.336842-56.589474 5.389474-102.4 5.389474-8.084211 5.389474-18.863158-2.694737-26.947368-8.084211-5.389474-18.863158-5.389474-26.947369 2.694737-51.2 64.673684-26.947368 107.789474-8.08421 142.821052 24.252632 37.726316 37.726316 67.368421-8.084211 123.957895zM485.052632 307.2c-5.389474 8.084211-5.389474 18.863158 2.694736 26.947368 2.694737 2.694737 8.084211 5.389474 10.778948 5.389474 5.389474 0 10.778947-2.694737 13.473684-8.08421 61.978947-75.452632 35.031579-123.957895 13.473684-164.378948-18.863158-35.031579-32.336842-56.589474 5.389474-102.4 5.389474-8.084211 5.389474-18.863158-2.694737-26.947368-8.084211-5.389474-18.863158-5.389474-26.947368 2.694737-51.2 64.673684-26.947368 107.789474-8.084211 142.821052 21.557895 37.726316 37.726316 67.368421-8.08421 123.957895zM633.263158 307.2c-5.389474 8.084211-5.389474 18.863158 2.694737 26.947368 2.694737 2.694737 8.084211 5.389474 10.778947 5.389474 5.389474 0 10.778947-2.694737 13.473684-8.08421 61.978947-75.452632 35.031579-123.957895 13.473685-164.378948-18.863158-35.031579-32.336842-56.589474 5.389473-102.4 5.389474-8.084211 5.389474-18.863158-2.694737-26.947368-8.084211-5.389474-18.863158-5.389474-26.947368 2.694737-51.2 64.673684-26.947368 107.789474-8.084211 142.821052 24.252632 37.726316 37.726316 67.368421-8.08421 123.957895zM940.463158 781.473684h-56.589474l-97.010526-323.368421c-16.168421-45.810526-43.115789-61.978947-78.147369-64.673684H336.842105c-48.505263 0-78.147368 10.778947-99.705263 67.368421L142.821053 781.473684H83.536842c-26.947368 0-48.505263 21.557895-48.505263 48.505263v107.789474c0 26.947368 21.557895 48.505263 48.505263 48.505263h854.231579c26.947368 0 48.505263-21.557895 48.505263-48.505263v-107.789474c2.694737-24.252632-18.863158-48.505263-45.810526-48.505263z m-188.631579-309.894737l56.589474 188.631579h-118.568421V431.157895c35.031579 0 48.505263 5.389474 61.978947 40.421052z m-220.968421 188.631579V431.157895h121.263158v229.052631h-121.263158z m-158.989474 0V431.157895h121.263158v229.052631h-121.263158z m-37.726316-231.747368v229.052631H218.273684l56.589474-188.631578c10.778947-32.336842 24.252632-37.726316 59.28421-40.421053z m-126.652631 269.473684h611.705263l24.252632 86.231579H180.547368l26.947369-86.231579z m743.747368 242.526316c0 5.389474-5.389474 10.778947-10.778947 10.778947H83.536842c-5.389474 0-10.778947-5.389474-10.778947-10.778947v-107.789474c0-5.389474 5.389474-10.778947 10.778947-10.778947h854.231579c5.389474 0 10.778947 5.389474 10.778947 10.778947v107.789474z" fill="#101010" p-id="7798"></path>
+  </symbol>
 </svg>

src/drawApp/graphics/FAS/ManualAlarmButtonInteraction.ts

@@ -0,0 +1,44 @@
+import * as pb_1 from 'google-protobuf';
+import { GraphicDataBase } from '../GraphicDataBase';
+import {
+  ManualAlarmButton,
+  IManualAlarmButtonData,
+} from 'src/graphics/FAS/manualAlarmButton/ManualAlarmButton';
+import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+
+export class ManualAlarmButtonData
+  extends GraphicDataBase
+  implements IManualAlarmButtonData
+{
+  constructor(data?: iscsGraphicData.ManualAlarmButton) {
+    let cctvButton;
+    if (data) {
+      cctvButton = data;
+    } else {
+      cctvButton = new iscsGraphicData.ManualAlarmButton({
+        common: GraphicDataBase.defaultCommonInfo(ManualAlarmButton.Type),
+      });
+    }
+    super(cctvButton);
+  }
+
+  public get data(): iscsGraphicData.ManualAlarmButton {
+    return this.getData<iscsGraphicData.ManualAlarmButton>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  clone(): ManualAlarmButtonData {
+    return new ManualAlarmButtonData(this.data.cloneMessage());
+  }
+  copyFrom(data: ManualAlarmButtonData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: ManualAlarmButtonData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}

src/drawApp/graphics/FAS/SmokeDetectorInteraction.ts

@@ -0,0 +1,44 @@
+import * as pb_1 from 'google-protobuf';
+import { GraphicDataBase } from '../GraphicDataBase';
+import {
+  SmokeDetector,
+  ISmokeDetectorData,
+} from 'src/graphics/FAS/smokeDetector/SmokeDetector';
+import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+
+export class SmokeDetectorData
+  extends GraphicDataBase
+  implements ISmokeDetectorData
+{
+  constructor(data?: iscsGraphicData.SmokeDetector) {
+    let cctvButton;
+    if (data) {
+      cctvButton = data;
+    } else {
+      cctvButton = new iscsGraphicData.SmokeDetector({
+        common: GraphicDataBase.defaultCommonInfo(SmokeDetector.Type),
+      });
+    }
+    super(cctvButton);
+  }
+
+  public get data(): iscsGraphicData.SmokeDetector {
+    return this.getData<iscsGraphicData.SmokeDetector>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  clone(): SmokeDetectorData {
+    return new SmokeDetectorData(this.data.cloneMessage());
+  }
+  copyFrom(data: SmokeDetectorData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: SmokeDetectorData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}

src/drawApp/iscsApp.ts

@@ -35,6 +35,18 @@ import { FasFailureControlHostDraw } from 'src/graphics/FAS/fireFailureControlHo
 import { FasAlarm, FasAlarmTemplate } from 'src/graphics/FAS/fasAlarm/FasAlarm';
 import { FasAlarmData } from './graphics/FAS/FasAlarmInteraction';
 import { FasAlarmDraw } from 'src/graphics/FAS/fasAlarm/FasAlarmAssistant';
+import {
+  ManualAlarmButton,
+  ManualAlarmButtonTemplate,
+} from 'src/graphics/FAS/manualAlarmButton/ManualAlarmButton';
+import { ManualAlarmButtonData } from './graphics/FAS/ManualAlarmButtonInteraction';
+import { ManualAlarmButtonDraw } from 'src/graphics/FAS/manualAlarmButton/ManualAlarmButtonAssistant';
+import {
+  SmokeDetector,
+  SmokeDetectorTemplate,
+} from 'src/graphics/FAS/smokeDetector/SmokeDetector';
+import { SmokeDetectorData } from './graphics/FAS/SmokeDetectorInteraction';
+import { SmokeDetectorDraw } from 'src/graphics/FAS/smokeDetector/SmokeDetectorAssistant';
 // import { getOnlyToken } from 'src/configs/TokenManage';
 
 let drawApp: IDrawApp | null = null;
@@ -74,6 +86,14 @@ export function initIscsDrawApp(): IDrawApp {
     new FasFailureControlHostTemplate(new FasFailureControlHostData())
   );
   new FasAlarmDraw(app, new FasAlarmTemplate(new FasAlarmData()));
+  new ManualAlarmButtonDraw(
+    app,
+    new ManualAlarmButtonTemplate(new ManualAlarmButtonData())
+  );
+  new SmokeDetectorDraw(
+    app,
+    new SmokeDetectorTemplate(new SmokeDetectorData())
+  );
 
   app.addKeyboardListener(
     new KeyListener({
@@ -243,6 +263,14 @@ export async function loadDrawDatas(): Promise<IGraphicStorage> {
             fasOfPlatformAlarm.fasAlarms.forEach((fasAlarm) => {
               datas.push(new FasAlarmData(fasAlarm));
             });
+            fasOfPlatformAlarm.manualAlarmButtons.forEach(
+              (manualAlarmButton) => {
+                datas.push(new ManualAlarmButtonData(manualAlarmButton));
+              }
+            );
+            fasOfPlatformAlarm.smokeDetectors.forEach((smokeDetector) => {
+              datas.push(new SmokeDetectorData(smokeDetector));
+            });
             break;
           }
         }
@@ -337,6 +365,16 @@ export function saveDrawDatas(app: IDrawApp) {
             } else if (g instanceof FasAlarm) {
               const fasAlarmData = g.saveData();
               fasStorage.fasAlarms.push((fasAlarmData as FasAlarmData).data);
+            } else if (g instanceof ManualAlarmButton) {
+              const manualAlarmButtonData = g.saveData();
+              fasStorage.manualAlarmButtons.push(
+                (manualAlarmButtonData as ManualAlarmButtonData).data
+              );
+            } else if (g instanceof SmokeDetector) {
+              const smokeDetectorData = g.saveData();
+              fasStorage.smokeDetectors.push(
+                (smokeDetectorData as SmokeDetectorData).data
+              );
             }
           });
           storage.fasOfPlatformAlarmStorages[i] = fasStorage;

src/graphics/FAS/fasAlarm/FasAlarmAssistant.ts

@@ -16,12 +16,7 @@ export class FasAlarmDraw extends GraphicDrawAssistant<
 > {
   _fasAlarm: FasAlarm | null = null;
   constructor(app: IDrawApp, template: FasAlarmTemplate) {
-    super(
+    super(app, template, 'svguse:../drawIcon.svg#icon-fas-alarm', '警铃');
-      app,
-      template,
-      'svguse:../drawIcon.svg#icon-fas-alarm',
-      '火灾故障控制主机'
-    );
     FasAlarmInteraction.init(app);
   }
 

src/graphics/FAS/manualAlarmButton/ManualAlarmButton.json

@@ -0,0 +1,21 @@
+{
+  "frames": {
+    "normal.png": {
+      "frame": { "x": 0, "y": 0, "w": 26, "h": 24 },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 26, "h": 24 },
+      "sourceSize": { "w": 26, "h": 24 },
+      "anchor": { "x": 0.5, "y": 0.5 }
+    }
+  },
+  "meta": {
+    "app": "https://www.codeandweb.com/texturepacker",
+    "version": "1.1",
+    "image": "ManualAlarmButton.png",
+    "format": "RGBA8888",
+    "size": { "w": 32, "h": 53 },
+    "scale": "1",
+    "smartupdate": "$TexturePacker:SmartUpdate:e7620bd2d73cc0b3e2deea9704e7eefc:f129a1d9e4b9ba57720b3861c22b155b:eb2d421f7759984b7713aa4aa5354134$"
+  }
+}

src/graphics/FAS/manualAlarmButton/ManualAlarmButton.ts

@@ -0,0 +1,66 @@
+import { GraphicData, JlGraphic, JlGraphicTemplate } from 'jl-graphic';
+import { Assets, Sprite, Spritesheet, Texture } from 'pixi.js';
+// import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+import ManualAlarmButtonJson from './ManualAlarmButton.json';
+import ManualAlarmButtonAssets from './ManualAlarmButton.png';
+
+export interface IManualAlarmButtonData extends GraphicData {
+  get code(): string;
+  set code(v: string);
+}
+
+interface ManualAlarmButtonTextures {
+  normal: Texture;
+}
+
+export class ManualAlarmButton extends JlGraphic {
+  static Type = 'ManualAlarmButton';
+  _manualAlarmButton: Sprite;
+  manualAlarmButtonTextures: ManualAlarmButtonTextures;
+  __state = 0;
+
+  constructor(manualAlarmButtonTextures: ManualAlarmButtonTextures) {
+    super(ManualAlarmButton.Type);
+    this._manualAlarmButton = new Sprite();
+    this.manualAlarmButtonTextures = manualAlarmButtonTextures;
+    this._manualAlarmButton.anchor.set(0.5);
+    this.addChild(this._manualAlarmButton);
+    this._manualAlarmButton.texture = this.manualAlarmButtonTextures.normal;
+  }
+  get code(): string {
+    return this.datas.code;
+  }
+  get datas(): IManualAlarmButtonData {
+    return this.getDatas<IManualAlarmButtonData>();
+  }
+
+  doRepaint(): void {}
+}
+
+export class ManualAlarmButtonTemplate extends JlGraphicTemplate<ManualAlarmButton> {
+  manualAlarmButtonTextures?: ManualAlarmButtonTextures;
+  constructor(dataTemplate: IManualAlarmButtonData) {
+    super(ManualAlarmButton.Type, { dataTemplate });
+    this.loadAssets();
+  }
+  new(): ManualAlarmButton {
+    if (this.manualAlarmButtonTextures) {
+      const g = new ManualAlarmButton(this.manualAlarmButtonTextures);
+      g.loadData(this.datas);
+      return g;
+    }
+    throw new Error('资源未加载/加载失败');
+  }
+  async loadAssets(): Promise<ManualAlarmButtonTextures> {
+    const texture = await Assets.load(ManualAlarmButtonAssets);
+    const manualAlarmButtonSheet = new Spritesheet(
+      texture,
+      ManualAlarmButtonJson
+    );
+    const result = await manualAlarmButtonSheet.parse();
+    this.manualAlarmButtonTextures = {
+      normal: result['normal.png'],
+    };
+    return this.manualAlarmButtonTextures as ManualAlarmButtonTextures;
+  }
+}

src/graphics/FAS/manualAlarmButton/ManualAlarmButtonAssistant.ts

@@ -0,0 +1,131 @@
+import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import {
+  AbsorbableLine,
+  AbsorbablePosition,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransformEvent,
+  IDrawApp,
+  JlGraphic,
+} from 'jl-graphic';
+import {
+  IManualAlarmButtonData,
+  ManualAlarmButton,
+  ManualAlarmButtonTemplate,
+} from './ManualAlarmButton';
+
+export class ManualAlarmButtonDraw extends GraphicDrawAssistant<
+  ManualAlarmButtonTemplate,
+  IManualAlarmButtonData
+> {
+  _manualAlarmButton: ManualAlarmButton | null = null;
+  constructor(app: IDrawApp, template: ManualAlarmButtonTemplate) {
+    super(
+      app,
+      template,
+      'svguse:../drawIcon.svg#icon-manual-alarm-button',
+      '手动火灾报警按钮'
+    );
+    ManualAlarmButtonInteraction.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+    if (!this._manualAlarmButton) {
+      this._manualAlarmButton = this.graphicTemplate.new();
+      this.container.addChild(this._manualAlarmButton);
+    }
+  }
+
+  public get manualAlarmButton(): ManualAlarmButton {
+    if (!this._manualAlarmButton) {
+      this._manualAlarmButton = this.graphicTemplate.new();
+      this.container.addChild(this._manualAlarmButton);
+    }
+    return this._manualAlarmButton;
+  }
+
+  redraw(cp: Point): void {
+    this.manualAlarmButton.position.copyFrom(cp);
+  }
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.manualAlarmButton.position.copyFrom(
+      this.toCanvasCoordinates(e.global)
+    );
+    this.createAndStore(true);
+  }
+  prepareData(data: IManualAlarmButtonData): boolean {
+    data.transform = this.manualAlarmButton.saveTransform();
+    return true;
+  }
+  onEsc(): void {
+    this.finish();
+  }
+}
+
+/**
+ * 构建吸附线
+ * @param manualAlarmButton
+ */
+function buildAbsorbablePositions(
+  manualAlarmButton: ManualAlarmButton
+): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const manualAlarmButtons =
+    manualAlarmButton.queryStore.queryByType<ManualAlarmButton>(
+      ManualAlarmButton.Type
+    );
+  const canvas = manualAlarmButton.getCanvas();
+  manualAlarmButtons.forEach((item) => {
+    if (item.id === manualAlarmButton.id) {
+      return;
+    }
+    const ala = new AbsorbableLine(
+      new Point(item.x, 0),
+      new Point(item.x, canvas.height)
+    );
+    const alb = new AbsorbableLine(
+      new Point(0, item.y),
+      new Point(canvas.width, item.y)
+    );
+    aps.push(ala);
+    aps.push(alb);
+  });
+
+  return aps;
+}
+
+export class ManualAlarmButtonInteraction extends GraphicInteractionPlugin<ManualAlarmButton> {
+  static Name = 'manual_alarm_button_transform';
+  constructor(app: IDrawApp) {
+    super(ManualAlarmButtonInteraction.Name, app);
+  }
+  static init(app: IDrawApp) {
+    return new ManualAlarmButtonInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): ManualAlarmButton[] | undefined {
+    return grahpics
+      .filter((g) => g.type === ManualAlarmButton.Type)
+      .map((g) => g as ManualAlarmButton);
+  }
+  bind(g: ManualAlarmButton): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.on('transformstart', this.transformstart, this);
+  }
+  unbind(g: ManualAlarmButton): void {
+    g.eventMode = 'none';
+    g.scalable = false;
+    g.rotatable = false;
+    g.off('transformstart', this.transformstart, this);
+  }
+  transformstart(e: GraphicTransformEvent) {
+    const target = e.target as DisplayObject;
+    const manualAlarmButton = target.getGraphic() as ManualAlarmButton;
+    manualAlarmButton.getGraphicApp().setOptions({
+      absorbablePositions: buildAbsorbablePositions(manualAlarmButton),
+    });
+  }
+}

src/graphics/FAS/smokeDetector/SmokeDetector.json

@@ -0,0 +1,21 @@
+{
+  "frames": {
+    "normal.png": {
+      "frame": { "x": 0, "y": 0, "w": 21, "h": 11 },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 21, "h": 11 },
+      "sourceSize": { "w": 21, "h": 11 },
+      "anchor": { "x": 0.5, "y": 0.5 }
+    }
+  },
+  "meta": {
+    "app": "https://www.codeandweb.com/texturepacker",
+    "version": "1.1",
+    "image": "SmokeDetector.png",
+    "format": "RGBA8888",
+    "size": { "w": 21, "h": 11 },
+    "scale": "1",
+    "smartupdate": "$TexturePacker:SmartUpdate:e7620bd2d73cc0b3e2deea9704e7eefc:f129a1d9e4b9ba57720b3861c22b155b:eb2d421f7759984b7713aa4aa5354134$"
+  }
+}

src/graphics/FAS/smokeDetector/SmokeDetector.ts

@@ -0,0 +1,63 @@
+import { GraphicData, JlGraphic, JlGraphicTemplate } from 'jl-graphic';
+import { Assets, Sprite, Spritesheet, Texture } from 'pixi.js';
+// import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+import SmokeDetectorJson from './SmokeDetector.json';
+import SmokeDetectorAsset from './SmokeDetector.png';
+
+export interface ISmokeDetectorData extends GraphicData {
+  get code(): string;
+  set code(v: string);
+}
+
+interface SmokeDetectorTextures {
+  normal: Texture;
+}
+
+export class SmokeDetector extends JlGraphic {
+  static Type = 'SmokeDetector';
+  _smokeDetector: Sprite;
+  smokeDetectorTextures: SmokeDetectorTextures;
+  __state = 0;
+
+  constructor(smokeDetectorTextures: SmokeDetectorTextures) {
+    super(SmokeDetector.Type);
+    this._smokeDetector = new Sprite();
+    this.smokeDetectorTextures = smokeDetectorTextures;
+    this._smokeDetector.anchor.set(0.5);
+    this.addChild(this._smokeDetector);
+    this._smokeDetector.texture = this.smokeDetectorTextures.normal;
+  }
+  get code(): string {
+    return this.datas.code;
+  }
+  get datas(): ISmokeDetectorData {
+    return this.getDatas<ISmokeDetectorData>();
+  }
+
+  doRepaint(): void {}
+}
+
+export class SmokeDetectorTemplate extends JlGraphicTemplate<SmokeDetector> {
+  smokeDetectorTextures?: SmokeDetectorTextures;
+  constructor(dataTemplate: ISmokeDetectorData) {
+    super(SmokeDetector.Type, { dataTemplate });
+    this.loadAssets();
+  }
+  new(): SmokeDetector {
+    if (this.smokeDetectorTextures) {
+      const g = new SmokeDetector(this.smokeDetectorTextures);
+      g.loadData(this.datas);
+      return g;
+    }
+    throw new Error('资源未加载/加载失败');
+  }
+  async loadAssets(): Promise<SmokeDetectorTextures> {
+    const texture = await Assets.load(SmokeDetectorAsset);
+    const smokeDetectorSheet = new Spritesheet(texture, SmokeDetectorJson);
+    const result = await smokeDetectorSheet.parse();
+    this.smokeDetectorTextures = {
+      normal: result['normal.png'],
+    };
+    return this.smokeDetectorTextures as SmokeDetectorTextures;
+  }
+}

src/graphics/FAS/smokeDetector/SmokeDetectorAssistant.ts

@@ -0,0 +1,123 @@
+import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import {
+  AbsorbableLine,
+  AbsorbablePosition,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransformEvent,
+  IDrawApp,
+  JlGraphic,
+} from 'jl-graphic';
+import {
+  ISmokeDetectorData,
+  SmokeDetector,
+  SmokeDetectorTemplate,
+} from './SmokeDetector';
+
+export class SmokeDetectorDraw extends GraphicDrawAssistant<
+  SmokeDetectorTemplate,
+  ISmokeDetectorData
+> {
+  _smokeDetector: SmokeDetector | null = null;
+  constructor(app: IDrawApp, template: SmokeDetectorTemplate) {
+    super(app, template, 'svguse:../drawIcon.svg#icon-smoke-detector', '烟感');
+    SmokeDetectorInteraction.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+    if (!this._smokeDetector) {
+      this._smokeDetector = this.graphicTemplate.new();
+      this.container.addChild(this._smokeDetector);
+    }
+  }
+
+  public get smokeDetector(): SmokeDetector {
+    if (!this._smokeDetector) {
+      this._smokeDetector = this.graphicTemplate.new();
+      this.container.addChild(this._smokeDetector);
+    }
+    return this._smokeDetector;
+  }
+
+  redraw(cp: Point): void {
+    this.smokeDetector.position.copyFrom(cp);
+  }
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.smokeDetector.position.copyFrom(this.toCanvasCoordinates(e.global));
+    this.createAndStore(true);
+  }
+  prepareData(data: ISmokeDetectorData): boolean {
+    data.transform = this.smokeDetector.saveTransform();
+    return true;
+  }
+  onEsc(): void {
+    this.finish();
+  }
+}
+
+/**
+ * 构建吸附线
+ * @param smokeDetector
+ */
+function buildAbsorbablePositions(
+  smokeDetector: SmokeDetector
+): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const smokeDetectors = smokeDetector.queryStore.queryByType<SmokeDetector>(
+    SmokeDetector.Type
+  );
+  const canvas = smokeDetector.getCanvas();
+  smokeDetectors.forEach((item) => {
+    if (item.id === smokeDetector.id) {
+      return;
+    }
+    const ala = new AbsorbableLine(
+      new Point(item.x, 0),
+      new Point(item.x, canvas.height)
+    );
+    const alb = new AbsorbableLine(
+      new Point(0, item.y),
+      new Point(canvas.width, item.y)
+    );
+    aps.push(ala);
+    aps.push(alb);
+  });
+
+  return aps;
+}
+
+export class SmokeDetectorInteraction extends GraphicInteractionPlugin<SmokeDetector> {
+  static Name = 'smoke_detector_transform';
+  constructor(app: IDrawApp) {
+    super(SmokeDetectorInteraction.Name, app);
+  }
+  static init(app: IDrawApp) {
+    return new SmokeDetectorInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): SmokeDetector[] | undefined {
+    return grahpics
+      .filter((g) => g.type === SmokeDetector.Type)
+      .map((g) => g as SmokeDetector);
+  }
+  bind(g: SmokeDetector): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.on('transformstart', this.transformstart, this);
+  }
+  unbind(g: SmokeDetector): void {
+    g.eventMode = 'none';
+    g.scalable = false;
+    g.rotatable = false;
+    g.off('transformstart', this.transformstart, this);
+  }
+  transformstart(e: GraphicTransformEvent) {
+    const target = e.target as DisplayObject;
+    const smokeDetector = target.getGraphic() as SmokeDetector;
+    smokeDetector.getGraphicApp().setOptions({
+      absorbablePositions: buildAbsorbablePositions(smokeDetector),
+    });
+  }
+}

src/layouts/IscsDrawLayout.vue

@@ -308,6 +308,8 @@ import CCTVMonitoring from 'src/components/Iscs/CCTVMonitoring.vue';
 import FASPlaneGraph from 'src/components/Iscs/FASPlaneGraph.vue';
 import { FasFailureControlHost } from 'src/graphics/FAS/fireFailureControlHost/FasFailureControlHost';
 import { FasAlarm } from 'src/graphics/FAS/fasAlarm/FasAlarm';
+import { ManualAlarmButton } from 'src/graphics/FAS/manualAlarmButton/ManualAlarmButton';
+import { SmokeDetector } from 'src/graphics/FAS/smokeDetector/SmokeDetector';
 
 const $q = useQuasar();
 const route = useRoute();
@@ -394,6 +396,8 @@ function handleUtilsOption() {
     case '火灾报警平面图':
       drawAssistantsTypes.push(FasFailureControlHost.Type);
       drawAssistantsTypes.push(FasAlarm.Type);
+      drawAssistantsTypes.push(ManualAlarmButton.Type);
+      drawAssistantsTypes.push(SmokeDetector.Type);
       break;
   }
   drawAssistantsTypes.forEach((type) => {