From 211d2fb3f30f599ee1d99fd1522efbeeb995170a Mon Sep 17 00:00:00 2001
From: joylink_zhaoerwei <Bob_Engineer@163.com>
Date: Sat, 14 Sep 2024 17:11:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=85=AC=E5=85=B1=E7=9A=84?=
 =?UTF-8?q?=E7=9F=A9=E5=BD=A2=E7=BB=98=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../draw-app/CCTVDrawProperties.vue           |   5 +
 .../draw-app/FireAlarmDrawProperties.vue      |   5 +
 .../draw-app/properties/RectProperty.vue      |  78 ++++
 src/drawApp/commonApp.ts                      |  13 +-
 src/drawApp/graphics/RectInteraction.ts       |  75 ++++
 src/graphics/rect/Rect.ts                     |  99 +++++
 src/graphics/rect/RectDrawAssistant.ts        | 112 ++++++
 src/layouts/CCTVDrawLayout.vue                |   8 +-
 src/layouts/FireAlarmDrawLayout.vue           |   3 +-
 src/protos/cctv_graphic_data.ts               |  25 +-
 src/protos/fire_alarm_graphic_data.ts         |  25 +-
 src/protos/iscs_graphic_data.ts               | 376 +++++++++++-------
 12 files changed, 677 insertions(+), 147 deletions(-)
 create mode 100644 src/components/draw-app/properties/RectProperty.vue
 create mode 100644 src/drawApp/graphics/RectInteraction.ts
 create mode 100644 src/graphics/rect/Rect.ts
 create mode 100644 src/graphics/rect/RectDrawAssistant.ts

diff --git a/src/components/draw-app/CCTVDrawProperties.vue b/src/components/draw-app/CCTVDrawProperties.vue
index a569e69..e4744e5 100644
--- a/src/components/draw-app/CCTVDrawProperties.vue
+++ b/src/components/draw-app/CCTVDrawProperties.vue
@@ -26,6 +26,9 @@
           <iscs-text-property
             v-if="drawStore.selectedGraphicType === TextContent.Type"
           />
+          <rect-property
+            v-else-if="drawStore.selectedGraphicType === Rect.Type"
+          />
           <cctv-button-property
             v-else-if="drawStore.selectedGraphicType === CCTVButton.Type"
           />
@@ -45,6 +48,8 @@ import IscsTextProperty from './properties/IscsTextProperty.vue';
 import { TextContent } from 'src/graphics/textContent/TextContent';
 import cctvButtonProperty from './properties/CCTV/CCTVButtonProperty.vue';
 import { CCTVButton } from 'src/graphics/CCTV/cctvButton/CCTVButton';
+import RectProperty from './properties/RectProperty.vue';
+import { Rect } from 'src/graphics/rect/Rect';
 
 const drawStore = useDrawStore();
 </script>
diff --git a/src/components/draw-app/FireAlarmDrawProperties.vue b/src/components/draw-app/FireAlarmDrawProperties.vue
index 7a249d8..9ca8103 100644
--- a/src/components/draw-app/FireAlarmDrawProperties.vue
+++ b/src/components/draw-app/FireAlarmDrawProperties.vue
@@ -26,6 +26,9 @@
           <iscs-text-property
             v-if="drawStore.selectedGraphicType === TextContent.Type"
           />
+          <rect-property
+            v-else-if="drawStore.selectedGraphicType === Rect.Type"
+          />
         </q-card-section>
       </template>
       <template v-else-if="drawStore.selectedGraphics.length > 1">
@@ -40,6 +43,8 @@ import { useDrawStore } from 'src/stores/draw-store';
 import CanvasProperty from './properties/FireAlarm/CanvasFireAlarmProperty.vue';
 import IscsTextProperty from './properties/IscsTextProperty.vue';
 import { TextContent } from 'src/graphics/textContent/TextContent';
+import RectProperty from './properties/RectProperty.vue';
+import { Rect } from 'src/graphics/rect/Rect';
 
 const drawStore = useDrawStore();
 </script>
diff --git a/src/components/draw-app/properties/RectProperty.vue b/src/components/draw-app/properties/RectProperty.vue
new file mode 100644
index 0000000..dcb9842
--- /dev/null
+++ b/src/components/draw-app/properties/RectProperty.vue
@@ -0,0 +1,78 @@
+<template>
+  <q-form>
+    <q-input outlined readonly v-model="rectModel.id" label="id" hint="" />
+    <q-input
+      outlined
+      v-model.number="rectModel.lineWidth"
+      type="number"
+      @blur="onUpdate"
+      label="线宽"
+      lazy-rules
+      :rules="[(val) => (val && val > 0) || '画布宽必须大于0']"
+    />
+
+    <q-input
+      outlined
+      v-model="rectModel.lineColor"
+      @blur="onUpdate"
+      label="线色"
+      lazy-rules
+      :rules="[(val) => (val && val.length > 0) || '线色不能为空']"
+    >
+      <template v-slot:append>
+        <q-icon name="colorize" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-color
+              v-model="rectModel.lineColor"
+              @change="
+                (val) => {
+                  rectModel.lineColor = val;
+                  onUpdate();
+                }
+              "
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+    <q-input
+      outlined
+      v-model.number="rectModel.width"
+      type="number"
+      @blur="onUpdate"
+      label="宽度"
+      lazy-rules
+      :rules="[(val) => (val && val > 0) || '宽度必须大于0']"
+    />
+    <q-input
+      outlined
+      v-model.number="rectModel.height"
+      type="number"
+      @blur="onUpdate"
+      label="高度"
+      lazy-rules
+      :rules="[(val) => (val && val > 0) || '宽度必须大于0']"
+    />
+    <q-input
+      outlined
+      v-model.number="rectModel.radius"
+      type="number"
+      @blur="onUpdate"
+      label="圆角半径"
+      lazy-rules
+      :rules="[(val) => (val && val > 0) || '圆角半径必须大于0']"
+    />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
+import { RectData } from 'src/drawApp/graphics/RectInteraction';
+import { useDrawStore } from 'src/stores/draw-store';
+
+const drawStore = useDrawStore();
+const { data: rectModel, onUpdate } = useFormData(
+  new RectData(),
+  drawStore.getDrawApp()
+);
+</script>
diff --git a/src/drawApp/commonApp.ts b/src/drawApp/commonApp.ts
index ada92aa..5c91d8f 100644
--- a/src/drawApp/commonApp.ts
+++ b/src/drawApp/commonApp.ts
@@ -16,6 +16,9 @@ import { TextContentDraw } from 'src/graphics/textContent/TextContentDrawAssista
 import { IscsTextData } from './graphics/IscsTextContentInteraction';
 import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
 import { useDrawStore } from 'src/stores/draw-store';
+import { Rect, RectTemplate } from 'src/graphics/rect/Rect';
+import { RectDraw } from 'src/graphics/rect/RectDrawAssistant';
+import { RectData } from './graphics/RectInteraction';
 
 const UndoOptions: MenuItemOptions = {
   name: '撤销',
@@ -42,6 +45,7 @@ export const DefaultCanvasMenu = new ContextMenu({
 export function initCommonDrawApp(app: IDrawApp) {
   new ArrowDraw(app, new ArrowTemplate(new ArrowData()));
   new TextContentDraw(app, new TextContentTemplate(new IscsTextData()));
+  new RectDraw(app, new RectTemplate(new RectData()));
   // 画布右键菜单
   app.registerMenu(DefaultCanvasMenu);
 
@@ -65,9 +69,10 @@ export function initCommonDrawApp(app: IDrawApp) {
 }
 
 interface ICommonStorage {
+  canvas: iscsGraphicData.Canvas;
   arrows: iscsGraphicData.Arrow[];
   iscsTexts: iscsGraphicData.IscsText[];
-  canvas: iscsGraphicData.Canvas;
+  rects: iscsGraphicData.Rect[];
 }
 export function loadCommonDrawDatas(storage: ICommonStorage): GraphicData[] {
   const datas: GraphicData[] = [];
@@ -78,6 +83,9 @@ export function loadCommonDrawDatas(storage: ICommonStorage): GraphicData[] {
   storage.iscsTexts.forEach((iscsText) => {
     datas.push(new IscsTextData(iscsText));
   });
+  storage.rects.forEach((rect) => {
+    datas.push(new RectData(rect));
+  });
   return datas;
 }
 
@@ -97,6 +105,9 @@ export function saveCommonDrawDatas(app: IDrawApp, storage: ICommonStorage) {
     } else if (g instanceof TextContent) {
       const textContentData = g.saveData();
       storage.iscsTexts.push((textContentData as IscsTextData).data);
+    } else if (g instanceof Rect) {
+      const rectData = g.saveData();
+      storage.rects.push((rectData as RectData).data);
     }
   });
 
diff --git a/src/drawApp/graphics/RectInteraction.ts b/src/drawApp/graphics/RectInteraction.ts
new file mode 100644
index 0000000..47a7104
--- /dev/null
+++ b/src/drawApp/graphics/RectInteraction.ts
@@ -0,0 +1,75 @@
+import * as pb_1 from 'google-protobuf';
+import { IPointData } from 'pixi.js';
+import { IRectData, Rect } from 'src/graphics/rect/Rect';
+import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+import { GraphicDataBase } from './GraphicDataBase';
+
+export class RectData extends GraphicDataBase implements IRectData {
+  constructor(data?: iscsGraphicData.Rect) {
+    let rect;
+    if (!data) {
+      rect = new iscsGraphicData.Rect({
+        common: GraphicDataBase.defaultCommonInfo(Rect.Type),
+      });
+    } else {
+      rect = data;
+    }
+    super(rect);
+  }
+
+  public get data(): iscsGraphicData.Rect {
+    return this.getData<iscsGraphicData.Rect>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get lineWidth(): number {
+    return this.data.lineWidth;
+  }
+  set lineWidth(v: number) {
+    this.data.lineWidth = v;
+  }
+  get lineColor(): string {
+    return this.data.lineColor;
+  }
+  set lineColor(v: string) {
+    this.data.lineColor = v;
+  }
+  get point(): IPointData {
+    return this.data.point;
+  }
+  set point(point: IPointData) {
+    this.data.point = new iscsGraphicData.Point({ x: point.x, y: point.y });
+  }
+  get width(): number {
+    return this.data.width;
+  }
+  set width(v: number) {
+    this.data.width = v;
+  }
+  get height(): number {
+    return this.data.height;
+  }
+  set height(v: number) {
+    this.data.height = v;
+  }
+  get radius(): number {
+    return this.data.radius;
+  }
+  set radius(v: number) {
+    this.data.radius = v;
+  }
+  clone(): RectData {
+    return new RectData(this.data.cloneMessage());
+  }
+  copyFrom(data: RectData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: RectData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
diff --git a/src/graphics/rect/Rect.ts b/src/graphics/rect/Rect.ts
new file mode 100644
index 0000000..c9704ef
--- /dev/null
+++ b/src/graphics/rect/Rect.ts
@@ -0,0 +1,99 @@
+import { Color, Graphics, IPointData, Point, Rectangle } from 'pixi.js';
+import {
+  GraphicData,
+  JlGraphic,
+  JlGraphicTemplate,
+  getRectangleCenter,
+} from 'jl-graphic';
+
+export interface IRectData extends GraphicData {
+  get code(): string; // 编号
+  set code(v: string);
+  get lineWidth(): number; // 线宽
+  set lineWidth(v: number);
+  get lineColor(): string; // 线色
+  set lineColor(v: string);
+  get point(): IPointData; // 位置坐标
+  set point(point: IPointData);
+  get width(): number; // 宽度
+  set width(v: number);
+  get height(): number; // 高度
+  set height(v: number);
+  get radius(): number; // 圆角半径
+  set radius(v: number);
+  clone(): IRectData;
+  copyFrom(data: IRectData): void;
+  eq(other: IRectData): boolean;
+}
+
+const rectConsts = {
+  lineWidth: 2,
+  lineColor: '0xff0000',
+};
+
+export class Rect extends JlGraphic {
+  static Type = 'Rect';
+  rectGraphic: Graphics = new Graphics();
+  constructor() {
+    super(Rect.Type);
+    this.addChild(this.rectGraphic);
+  }
+
+  get datas(): IRectData {
+    return this.getDatas<IRectData>();
+  }
+  doRepaint(): void {
+    const rectGraphic = this.rectGraphic;
+    rectGraphic.clear();
+    rectGraphic.lineStyle(
+      this.datas.lineWidth,
+      new Color(this.datas.lineColor)
+    );
+    const radius = this.datas?.radius || 0;
+    rectGraphic.drawRoundedRect(
+      0,
+      0,
+      this.datas.width,
+      this.datas.height,
+      radius
+    );
+    rectGraphic.pivot = getRectangleCenter(
+      new Rectangle(0, 0, this.datas.width, this.datas.height)
+    );
+    const transformPos = this.datas.transform.position;
+    if (transformPos.x == 0 && transformPos.y == 0) {
+      this.position.set(
+        this.datas.point.x + this.datas.width / 2,
+        this.datas.point.y + this.datas.height / 2
+      );
+    } else {
+      this.position.set(
+        this.datas.transform.position.x,
+        this.datas.transform.position.y
+      );
+    }
+  }
+  rectPoints(): IPointData[] {
+    const r1 = new Point(this.datas.point.x, this.datas.point.y);
+    const r2 = new Point(r1.x + this.datas.width, r1.y);
+    const r3 = new Point(r1.x + this.datas.width, r1.y + this.datas.height);
+    const r4 = new Point(r1.x, r1.y + this.datas.height);
+    const rectPoints = [r1, r2, r3, r4, r1];
+    return rectPoints;
+  }
+}
+
+export class RectTemplate extends JlGraphicTemplate<Rect> {
+  lineWidth: number;
+  lineColor: string;
+  constructor(dataTemplate: IRectData) {
+    super(Rect.Type, {
+      dataTemplate,
+    });
+    this.lineWidth = rectConsts.lineWidth;
+    this.lineColor = rectConsts.lineColor;
+  }
+  new(): Rect {
+    return new Rect();
+  }
+}
diff --git a/src/graphics/rect/RectDrawAssistant.ts b/src/graphics/rect/RectDrawAssistant.ts
new file mode 100644
index 0000000..fff9f55
--- /dev/null
+++ b/src/graphics/rect/RectDrawAssistant.ts
@@ -0,0 +1,112 @@
+import { FederatedPointerEvent, Graphics, Point, IHitArea } from 'pixi.js';
+import {
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  IDrawApp,
+  JlGraphic,
+  pointBox,
+} from 'jl-graphic';
+
+import { IRectData, Rect, RectTemplate } from './Rect';
+
+export interface IRectDrawOptions {
+  newData: () => IRectData;
+}
+
+export class RectDraw extends GraphicDrawAssistant<RectTemplate, IRectData> {
+  point1: Point | null = null;
+  point2: Point | null = null;
+  rectGraphic: Graphics = new Graphics();
+
+  constructor(app: IDrawApp, template: RectTemplate) {
+    super(app, template, 'sym_o_square', '矩形Rect');
+    this.container.addChild(this.rectGraphic);
+    rectInteraction.init(app);
+  }
+
+  clearCache(): void {
+    this.rectGraphic.clear();
+  }
+  onLeftDown(e: FederatedPointerEvent): void {
+    const { x, y } = this.toCanvasCoordinates(e.global);
+    const p = new Point(x, y);
+    if (this.point1 === null) {
+      this.point1 = p;
+    } else {
+      this.point2 = p;
+      this.createAndStore(true);
+      this.point1 = null;
+      this.point2 = null;
+    }
+  }
+
+  redraw(p: Point): void {
+    const template = this.graphicTemplate;
+    if (this.point1 === null) return;
+    const rectGraphic = this.rectGraphic;
+    rectGraphic.clear();
+    rectGraphic.lineStyle(template.lineWidth, template.lineColor);
+    rectGraphic.drawRect(...this.normalize(this.point1, p));
+  }
+  //根据画的两个点确定左上角的点的坐标和矩形宽高
+  private normalize(p1: Point, p2: Point): [number, number, number, number] {
+    const { abs } = Math;
+    const x = p1.x < p2.x ? p1.x : p2.x;
+    const y = p1.y < p2.y ? p1.y : p2.y;
+    const w = abs(p1.x - p2.x);
+    const h = abs(p1.y - p2.y);
+    return [x, y, w, h];
+  }
+  prepareData(data: IRectData): boolean {
+    const p1 = this.point1 as Point;
+    const p2 = this.point2 as Point;
+    const [x, y, width, height] = this.normalize(p1, p2);
+    const template = this.graphicTemplate;
+    data.point = new Point(x, y);
+    data.lineWidth = template.lineWidth;
+    data.lineColor = template.lineColor;
+    data.width = width;
+    data.height = height;
+    return true;
+  }
+}
+
+//碰撞检测
+export class RectGraphicHitArea implements IHitArea {
+  rect: Rect;
+  constructor(rect: Rect) {
+    this.rect = rect;
+  }
+  contains(x: number, y: number): boolean {
+    const boxRect = this.rect.getLocalBounds();
+    let contains = false;
+    const p = new Point(x, y);
+    contains = contains || pointBox(p, boxRect);
+    return contains;
+  }
+}
+
+export class rectInteraction extends GraphicInteractionPlugin<Rect> {
+  static Name = 'platform_transform';
+  constructor(app: IDrawApp) {
+    super(rectInteraction.Name, app);
+  }
+  static init(app: IDrawApp) {
+    return new rectInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): Rect[] | undefined {
+    return grahpics.filter((g) => g.type === Rect.Type).map((g) => g as Rect);
+  }
+  bind(g: Rect): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.rectGraphic.hitArea = new RectGraphicHitArea(g);
+  }
+  unbind(g: Rect): void {
+    g.eventMode = 'none';
+    g.scalable = false;
+    g.rotatable = false;
+  }
+}
diff --git a/src/layouts/CCTVDrawLayout.vue b/src/layouts/CCTVDrawLayout.vue
index b3cdd04..8ef49e6 100644
--- a/src/layouts/CCTVDrawLayout.vue
+++ b/src/layouts/CCTVDrawLayout.vue
@@ -115,6 +115,7 @@ import { CCTVButton } from 'src/graphics/CCTV/cctvButton/CCTVButton';
 import { Arrow } from 'src/graphics/arrow/Arrow';
 import { TextContent } from 'src/graphics/textContent/TextContent';
 import { PictureType } from 'src/protos/picture';
+import { Rect } from 'src/graphics/rect/Rect';
 
 const $q = useQuasar();
 const route = useRoute();
@@ -200,7 +201,12 @@ onMounted(() => {
   } else {
     drawStore.setDraftId(null);
   }
-  const drawAssistantsTypes = [Arrow.Type, TextContent.Type, CCTVButton.Type];
+  const drawAssistantsTypes = [
+    Arrow.Type,
+    TextContent.Type,
+    Rect.Type,
+    CCTVButton.Type,
+  ];
   drawAssistantsTypes.forEach((type) => {
     const drawAssistant = drawStore.getDrawApp().getDrawAssistant(type);
     if (drawAssistant) {
diff --git a/src/layouts/FireAlarmDrawLayout.vue b/src/layouts/FireAlarmDrawLayout.vue
index 8ac5008..2f6907e 100644
--- a/src/layouts/FireAlarmDrawLayout.vue
+++ b/src/layouts/FireAlarmDrawLayout.vue
@@ -114,6 +114,7 @@ import { useDrawStore } from 'src/stores/draw-store';
 import { PictureType } from 'src/protos/picture';
 import { Arrow } from 'src/graphics/arrow/Arrow';
 import { TextContent } from 'src/graphics/textContent/TextContent';
+import { Rect } from 'src/graphics/rect/Rect';
 
 const $q = useQuasar();
 const route = useRoute();
@@ -199,7 +200,7 @@ onMounted(() => {
   } else {
     drawStore.setDraftId(null);
   }
-  const drawAssistantsTypes = [Arrow.Type, TextContent.Type];
+  const drawAssistantsTypes = [Arrow.Type, TextContent.Type, Rect.Type];
   drawAssistantsTypes.forEach((type) => {
     const drawAssistant = drawStore.getDrawApp().getDrawAssistant(type);
     if (drawAssistant) {
diff --git a/src/protos/cctv_graphic_data.ts b/src/protos/cctv_graphic_data.ts
index 35147fe..3165f05 100644
--- a/src/protos/cctv_graphic_data.ts
+++ b/src/protos/cctv_graphic_data.ts
@@ -13,9 +13,10 @@ export namespace CCTVGraphicData {
             cctvButtons?: CCTVButton[];
             arrows?: dependency_1.iscsGraphicData.Arrow[];
             iscsTexts?: dependency_1.iscsGraphicData.IscsText[];
+            rects?: dependency_1.iscsGraphicData.Rect[];
         }) {
             super();
-            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3, 4], this.#one_of_decls);
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3, 4, 5], this.#one_of_decls);
             if (!Array.isArray(data) && typeof data == "object") {
                 if ("canvas" in data && data.canvas != undefined) {
                     this.canvas = data.canvas;
@@ -29,6 +30,9 @@ export namespace CCTVGraphicData {
                 if ("iscsTexts" in data && data.iscsTexts != undefined) {
                     this.iscsTexts = data.iscsTexts;
                 }
+                if ("rects" in data && data.rects != undefined) {
+                    this.rects = data.rects;
+                }
             }
         }
         get canvas() {
@@ -58,11 +62,18 @@ export namespace CCTVGraphicData {
         set iscsTexts(value: dependency_1.iscsGraphicData.IscsText[]) {
             pb_1.Message.setRepeatedWrapperField(this, 4, value);
         }
+        get rects() {
+            return pb_1.Message.getRepeatedWrapperField(this, dependency_1.iscsGraphicData.Rect, 5) as dependency_1.iscsGraphicData.Rect[];
+        }
+        set rects(value: dependency_1.iscsGraphicData.Rect[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 5, value);
+        }
         static fromObject(data: {
             canvas?: ReturnType<typeof dependency_1.iscsGraphicData.Canvas.prototype.toObject>;
             cctvButtons?: ReturnType<typeof CCTVButton.prototype.toObject>[];
             arrows?: ReturnType<typeof dependency_1.iscsGraphicData.Arrow.prototype.toObject>[];
             iscsTexts?: ReturnType<typeof dependency_1.iscsGraphicData.IscsText.prototype.toObject>[];
+            rects?: ReturnType<typeof dependency_1.iscsGraphicData.Rect.prototype.toObject>[];
         }): CCTVGraphicStorage {
             const message = new CCTVGraphicStorage({});
             if (data.canvas != null) {
@@ -77,6 +88,9 @@ export namespace CCTVGraphicData {
             if (data.iscsTexts != null) {
                 message.iscsTexts = data.iscsTexts.map(item => dependency_1.iscsGraphicData.IscsText.fromObject(item));
             }
+            if (data.rects != null) {
+                message.rects = data.rects.map(item => dependency_1.iscsGraphicData.Rect.fromObject(item));
+            }
             return message;
         }
         toObject() {
@@ -85,6 +99,7 @@ export namespace CCTVGraphicData {
                 cctvButtons?: ReturnType<typeof CCTVButton.prototype.toObject>[];
                 arrows?: ReturnType<typeof dependency_1.iscsGraphicData.Arrow.prototype.toObject>[];
                 iscsTexts?: ReturnType<typeof dependency_1.iscsGraphicData.IscsText.prototype.toObject>[];
+                rects?: ReturnType<typeof dependency_1.iscsGraphicData.Rect.prototype.toObject>[];
             } = {};
             if (this.canvas != null) {
                 data.canvas = this.canvas.toObject();
@@ -98,6 +113,9 @@ export namespace CCTVGraphicData {
             if (this.iscsTexts != null) {
                 data.iscsTexts = this.iscsTexts.map((item: dependency_1.iscsGraphicData.IscsText) => item.toObject());
             }
+            if (this.rects != null) {
+                data.rects = this.rects.map((item: dependency_1.iscsGraphicData.Rect) => item.toObject());
+            }
             return data;
         }
         serialize(): Uint8Array;
@@ -112,6 +130,8 @@ export namespace CCTVGraphicData {
                 writer.writeRepeatedMessage(3, this.arrows, (item: dependency_1.iscsGraphicData.Arrow) => item.serialize(writer));
             if (this.iscsTexts.length)
                 writer.writeRepeatedMessage(4, this.iscsTexts, (item: dependency_1.iscsGraphicData.IscsText) => item.serialize(writer));
+            if (this.rects.length)
+                writer.writeRepeatedMessage(5, this.rects, (item: dependency_1.iscsGraphicData.Rect) => item.serialize(writer));
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -133,6 +153,9 @@ export namespace CCTVGraphicData {
                     case 4:
                         reader.readMessage(message.iscsTexts, () => pb_1.Message.addToRepeatedWrapperField(message, 4, dependency_1.iscsGraphicData.IscsText.deserialize(reader), dependency_1.iscsGraphicData.IscsText));
                         break;
+                    case 5:
+                        reader.readMessage(message.rects, () => pb_1.Message.addToRepeatedWrapperField(message, 5, dependency_1.iscsGraphicData.Rect.deserialize(reader), dependency_1.iscsGraphicData.Rect));
+                        break;
                     default: reader.skipField();
                 }
             }
diff --git a/src/protos/fire_alarm_graphic_data.ts b/src/protos/fire_alarm_graphic_data.ts
index 1a1d9b6..9ccb7c8 100644
--- a/src/protos/fire_alarm_graphic_data.ts
+++ b/src/protos/fire_alarm_graphic_data.ts
@@ -12,9 +12,10 @@ export namespace FireAlarmGraphicData {
             canvas?: dependency_1.iscsGraphicData.Canvas;
             arrows?: dependency_1.iscsGraphicData.Arrow[];
             iscsTexts?: dependency_1.iscsGraphicData.IscsText[];
+            rects?: dependency_1.iscsGraphicData.Rect[];
         }) {
             super();
-            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3], this.#one_of_decls);
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3, 4], this.#one_of_decls);
             if (!Array.isArray(data) && typeof data == "object") {
                 if ("canvas" in data && data.canvas != undefined) {
                     this.canvas = data.canvas;
@@ -25,6 +26,9 @@ export namespace FireAlarmGraphicData {
                 if ("iscsTexts" in data && data.iscsTexts != undefined) {
                     this.iscsTexts = data.iscsTexts;
                 }
+                if ("rects" in data && data.rects != undefined) {
+                    this.rects = data.rects;
+                }
             }
         }
         get canvas() {
@@ -48,10 +52,17 @@ export namespace FireAlarmGraphicData {
         set iscsTexts(value: dependency_1.iscsGraphicData.IscsText[]) {
             pb_1.Message.setRepeatedWrapperField(this, 3, value);
         }
+        get rects() {
+            return pb_1.Message.getRepeatedWrapperField(this, dependency_1.iscsGraphicData.Rect, 4) as dependency_1.iscsGraphicData.Rect[];
+        }
+        set rects(value: dependency_1.iscsGraphicData.Rect[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 4, value);
+        }
         static fromObject(data: {
             canvas?: ReturnType<typeof dependency_1.iscsGraphicData.Canvas.prototype.toObject>;
             arrows?: ReturnType<typeof dependency_1.iscsGraphicData.Arrow.prototype.toObject>[];
             iscsTexts?: ReturnType<typeof dependency_1.iscsGraphicData.IscsText.prototype.toObject>[];
+            rects?: ReturnType<typeof dependency_1.iscsGraphicData.Rect.prototype.toObject>[];
         }): FireAlarmGraphicStorage {
             const message = new FireAlarmGraphicStorage({});
             if (data.canvas != null) {
@@ -63,6 +74,9 @@ export namespace FireAlarmGraphicData {
             if (data.iscsTexts != null) {
                 message.iscsTexts = data.iscsTexts.map(item => dependency_1.iscsGraphicData.IscsText.fromObject(item));
             }
+            if (data.rects != null) {
+                message.rects = data.rects.map(item => dependency_1.iscsGraphicData.Rect.fromObject(item));
+            }
             return message;
         }
         toObject() {
@@ -70,6 +84,7 @@ export namespace FireAlarmGraphicData {
                 canvas?: ReturnType<typeof dependency_1.iscsGraphicData.Canvas.prototype.toObject>;
                 arrows?: ReturnType<typeof dependency_1.iscsGraphicData.Arrow.prototype.toObject>[];
                 iscsTexts?: ReturnType<typeof dependency_1.iscsGraphicData.IscsText.prototype.toObject>[];
+                rects?: ReturnType<typeof dependency_1.iscsGraphicData.Rect.prototype.toObject>[];
             } = {};
             if (this.canvas != null) {
                 data.canvas = this.canvas.toObject();
@@ -80,6 +95,9 @@ export namespace FireAlarmGraphicData {
             if (this.iscsTexts != null) {
                 data.iscsTexts = this.iscsTexts.map((item: dependency_1.iscsGraphicData.IscsText) => item.toObject());
             }
+            if (this.rects != null) {
+                data.rects = this.rects.map((item: dependency_1.iscsGraphicData.Rect) => item.toObject());
+            }
             return data;
         }
         serialize(): Uint8Array;
@@ -92,6 +110,8 @@ export namespace FireAlarmGraphicData {
                 writer.writeRepeatedMessage(2, this.arrows, (item: dependency_1.iscsGraphicData.Arrow) => item.serialize(writer));
             if (this.iscsTexts.length)
                 writer.writeRepeatedMessage(3, this.iscsTexts, (item: dependency_1.iscsGraphicData.IscsText) => item.serialize(writer));
+            if (this.rects.length)
+                writer.writeRepeatedMessage(4, this.rects, (item: dependency_1.iscsGraphicData.Rect) => item.serialize(writer));
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -110,6 +130,9 @@ export namespace FireAlarmGraphicData {
                     case 3:
                         reader.readMessage(message.iscsTexts, () => pb_1.Message.addToRepeatedWrapperField(message, 3, dependency_1.iscsGraphicData.IscsText.deserialize(reader), dependency_1.iscsGraphicData.IscsText));
                         break;
+                    case 4:
+                        reader.readMessage(message.rects, () => pb_1.Message.addToRepeatedWrapperField(message, 4, dependency_1.iscsGraphicData.Rect.deserialize(reader), dependency_1.iscsGraphicData.Rect));
+                        break;
                     default: reader.skipField();
                 }
             }
diff --git a/src/protos/iscs_graphic_data.ts b/src/protos/iscs_graphic_data.ts
index fb25bbf..a3a858b 100644
--- a/src/protos/iscs_graphic_data.ts
+++ b/src/protos/iscs_graphic_data.ts
@@ -5,148 +5,6 @@
  * git: https://github.com/thesayyn/protoc-gen-ts */
 import * as pb_1 from "google-protobuf";
 export namespace iscsGraphicData {
-    export class IscsGraphicStorage extends pb_1.Message {
-        #one_of_decls: number[][] = [];
-        constructor(data?: any[] | {
-            canvas?: Canvas;
-            UniqueIdPrefix?: UniqueIdOfStationLayout;
-            arrows?: Arrow[];
-            iscsTexts?: IscsText[];
-        }) {
-            super();
-            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [3, 4], this.#one_of_decls);
-            if (!Array.isArray(data) && typeof data == "object") {
-                if ("canvas" in data && data.canvas != undefined) {
-                    this.canvas = data.canvas;
-                }
-                if ("UniqueIdPrefix" in data && data.UniqueIdPrefix != undefined) {
-                    this.UniqueIdPrefix = data.UniqueIdPrefix;
-                }
-                if ("arrows" in data && data.arrows != undefined) {
-                    this.arrows = data.arrows;
-                }
-                if ("iscsTexts" in data && data.iscsTexts != undefined) {
-                    this.iscsTexts = data.iscsTexts;
-                }
-            }
-        }
-        get canvas() {
-            return pb_1.Message.getWrapperField(this, Canvas, 1) as Canvas;
-        }
-        set canvas(value: Canvas) {
-            pb_1.Message.setWrapperField(this, 1, value);
-        }
-        get has_canvas() {
-            return pb_1.Message.getField(this, 1) != null;
-        }
-        get UniqueIdPrefix() {
-            return pb_1.Message.getWrapperField(this, UniqueIdOfStationLayout, 2) as UniqueIdOfStationLayout;
-        }
-        set UniqueIdPrefix(value: UniqueIdOfStationLayout) {
-            pb_1.Message.setWrapperField(this, 2, value);
-        }
-        get has_UniqueIdPrefix() {
-            return pb_1.Message.getField(this, 2) != null;
-        }
-        get arrows() {
-            return pb_1.Message.getRepeatedWrapperField(this, Arrow, 3) as Arrow[];
-        }
-        set arrows(value: Arrow[]) {
-            pb_1.Message.setRepeatedWrapperField(this, 3, value);
-        }
-        get iscsTexts() {
-            return pb_1.Message.getRepeatedWrapperField(this, IscsText, 4) as IscsText[];
-        }
-        set iscsTexts(value: IscsText[]) {
-            pb_1.Message.setRepeatedWrapperField(this, 4, value);
-        }
-        static fromObject(data: {
-            canvas?: ReturnType<typeof Canvas.prototype.toObject>;
-            UniqueIdPrefix?: ReturnType<typeof UniqueIdOfStationLayout.prototype.toObject>;
-            arrows?: ReturnType<typeof Arrow.prototype.toObject>[];
-            iscsTexts?: ReturnType<typeof IscsText.prototype.toObject>[];
-        }): IscsGraphicStorage {
-            const message = new IscsGraphicStorage({});
-            if (data.canvas != null) {
-                message.canvas = Canvas.fromObject(data.canvas);
-            }
-            if (data.UniqueIdPrefix != null) {
-                message.UniqueIdPrefix = UniqueIdOfStationLayout.fromObject(data.UniqueIdPrefix);
-            }
-            if (data.arrows != null) {
-                message.arrows = data.arrows.map(item => Arrow.fromObject(item));
-            }
-            if (data.iscsTexts != null) {
-                message.iscsTexts = data.iscsTexts.map(item => IscsText.fromObject(item));
-            }
-            return message;
-        }
-        toObject() {
-            const data: {
-                canvas?: ReturnType<typeof Canvas.prototype.toObject>;
-                UniqueIdPrefix?: ReturnType<typeof UniqueIdOfStationLayout.prototype.toObject>;
-                arrows?: ReturnType<typeof Arrow.prototype.toObject>[];
-                iscsTexts?: ReturnType<typeof IscsText.prototype.toObject>[];
-            } = {};
-            if (this.canvas != null) {
-                data.canvas = this.canvas.toObject();
-            }
-            if (this.UniqueIdPrefix != null) {
-                data.UniqueIdPrefix = this.UniqueIdPrefix.toObject();
-            }
-            if (this.arrows != null) {
-                data.arrows = this.arrows.map((item: Arrow) => item.toObject());
-            }
-            if (this.iscsTexts != null) {
-                data.iscsTexts = this.iscsTexts.map((item: IscsText) => item.toObject());
-            }
-            return data;
-        }
-        serialize(): Uint8Array;
-        serialize(w: pb_1.BinaryWriter): void;
-        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
-            const writer = w || new pb_1.BinaryWriter();
-            if (this.has_canvas)
-                writer.writeMessage(1, this.canvas, () => this.canvas.serialize(writer));
-            if (this.has_UniqueIdPrefix)
-                writer.writeMessage(2, this.UniqueIdPrefix, () => this.UniqueIdPrefix.serialize(writer));
-            if (this.arrows.length)
-                writer.writeRepeatedMessage(3, this.arrows, (item: Arrow) => item.serialize(writer));
-            if (this.iscsTexts.length)
-                writer.writeRepeatedMessage(4, this.iscsTexts, (item: IscsText) => item.serialize(writer));
-            if (!w)
-                return writer.getResultBuffer();
-        }
-        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): IscsGraphicStorage {
-            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new IscsGraphicStorage();
-            while (reader.nextField()) {
-                if (reader.isEndGroup())
-                    break;
-                switch (reader.getFieldNumber()) {
-                    case 1:
-                        reader.readMessage(message.canvas, () => message.canvas = Canvas.deserialize(reader));
-                        break;
-                    case 2:
-                        reader.readMessage(message.UniqueIdPrefix, () => message.UniqueIdPrefix = UniqueIdOfStationLayout.deserialize(reader));
-                        break;
-                    case 3:
-                        reader.readMessage(message.arrows, () => pb_1.Message.addToRepeatedWrapperField(message, 3, Arrow.deserialize(reader), Arrow));
-                        break;
-                    case 4:
-                        reader.readMessage(message.iscsTexts, () => pb_1.Message.addToRepeatedWrapperField(message, 4, IscsText.deserialize(reader), IscsText));
-                        break;
-                    default: reader.skipField();
-                }
-            }
-            return message;
-        }
-        serializeBinary(): Uint8Array {
-            return this.serialize();
-        }
-        static deserializeBinary(bytes: Uint8Array): IscsGraphicStorage {
-            return IscsGraphicStorage.deserialize(bytes);
-        }
-    }
     export class Canvas extends pb_1.Message {
         #one_of_decls: number[][] = [];
         constructor(data?: any[] | {
@@ -1283,4 +1141,238 @@ export namespace iscsGraphicData {
             return IscsText.deserialize(bytes);
         }
     }
+    export class Rect extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            common?: CommonInfo;
+            code?: string;
+            lineWidth?: number;
+            lineColor?: string;
+            width?: number;
+            height?: number;
+            radius?: number;
+            point?: Point;
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("common" in data && data.common != undefined) {
+                    this.common = data.common;
+                }
+                if ("code" in data && data.code != undefined) {
+                    this.code = data.code;
+                }
+                if ("lineWidth" in data && data.lineWidth != undefined) {
+                    this.lineWidth = data.lineWidth;
+                }
+                if ("lineColor" in data && data.lineColor != undefined) {
+                    this.lineColor = data.lineColor;
+                }
+                if ("width" in data && data.width != undefined) {
+                    this.width = data.width;
+                }
+                if ("height" in data && data.height != undefined) {
+                    this.height = data.height;
+                }
+                if ("radius" in data && data.radius != undefined) {
+                    this.radius = data.radius;
+                }
+                if ("point" in data && data.point != undefined) {
+                    this.point = data.point;
+                }
+            }
+        }
+        get common() {
+            return pb_1.Message.getWrapperField(this, CommonInfo, 1) as CommonInfo;
+        }
+        set common(value: CommonInfo) {
+            pb_1.Message.setWrapperField(this, 1, value);
+        }
+        get has_common() {
+            return pb_1.Message.getField(this, 1) != null;
+        }
+        get code() {
+            return pb_1.Message.getFieldWithDefault(this, 2, "") as string;
+        }
+        set code(value: string) {
+            pb_1.Message.setField(this, 2, value);
+        }
+        get lineWidth() {
+            return pb_1.Message.getFieldWithDefault(this, 3, 0) as number;
+        }
+        set lineWidth(value: number) {
+            pb_1.Message.setField(this, 3, value);
+        }
+        get lineColor() {
+            return pb_1.Message.getFieldWithDefault(this, 4, "") as string;
+        }
+        set lineColor(value: string) {
+            pb_1.Message.setField(this, 4, value);
+        }
+        get width() {
+            return pb_1.Message.getFieldWithDefault(this, 5, 0) as number;
+        }
+        set width(value: number) {
+            pb_1.Message.setField(this, 5, value);
+        }
+        get height() {
+            return pb_1.Message.getFieldWithDefault(this, 6, 0) as number;
+        }
+        set height(value: number) {
+            pb_1.Message.setField(this, 6, value);
+        }
+        get radius() {
+            return pb_1.Message.getFieldWithDefault(this, 7, 0) as number;
+        }
+        set radius(value: number) {
+            pb_1.Message.setField(this, 7, value);
+        }
+        get point() {
+            return pb_1.Message.getWrapperField(this, Point, 8) as Point;
+        }
+        set point(value: Point) {
+            pb_1.Message.setWrapperField(this, 8, value);
+        }
+        get has_point() {
+            return pb_1.Message.getField(this, 8) != null;
+        }
+        static fromObject(data: {
+            common?: ReturnType<typeof CommonInfo.prototype.toObject>;
+            code?: string;
+            lineWidth?: number;
+            lineColor?: string;
+            width?: number;
+            height?: number;
+            radius?: number;
+            point?: ReturnType<typeof Point.prototype.toObject>;
+        }): Rect {
+            const message = new Rect({});
+            if (data.common != null) {
+                message.common = CommonInfo.fromObject(data.common);
+            }
+            if (data.code != null) {
+                message.code = data.code;
+            }
+            if (data.lineWidth != null) {
+                message.lineWidth = data.lineWidth;
+            }
+            if (data.lineColor != null) {
+                message.lineColor = data.lineColor;
+            }
+            if (data.width != null) {
+                message.width = data.width;
+            }
+            if (data.height != null) {
+                message.height = data.height;
+            }
+            if (data.radius != null) {
+                message.radius = data.radius;
+            }
+            if (data.point != null) {
+                message.point = Point.fromObject(data.point);
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                common?: ReturnType<typeof CommonInfo.prototype.toObject>;
+                code?: string;
+                lineWidth?: number;
+                lineColor?: string;
+                width?: number;
+                height?: number;
+                radius?: number;
+                point?: ReturnType<typeof Point.prototype.toObject>;
+            } = {};
+            if (this.common != null) {
+                data.common = this.common.toObject();
+            }
+            if (this.code != null) {
+                data.code = this.code;
+            }
+            if (this.lineWidth != null) {
+                data.lineWidth = this.lineWidth;
+            }
+            if (this.lineColor != null) {
+                data.lineColor = this.lineColor;
+            }
+            if (this.width != null) {
+                data.width = this.width;
+            }
+            if (this.height != null) {
+                data.height = this.height;
+            }
+            if (this.radius != null) {
+                data.radius = this.radius;
+            }
+            if (this.point != null) {
+                data.point = this.point.toObject();
+            }
+            return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+            const writer = w || new pb_1.BinaryWriter();
+            if (this.has_common)
+                writer.writeMessage(1, this.common, () => this.common.serialize(writer));
+            if (this.code.length)
+                writer.writeString(2, this.code);
+            if (this.lineWidth != 0)
+                writer.writeInt32(3, this.lineWidth);
+            if (this.lineColor.length)
+                writer.writeString(4, this.lineColor);
+            if (this.width != 0)
+                writer.writeFloat(5, this.width);
+            if (this.height != 0)
+                writer.writeFloat(6, this.height);
+            if (this.radius != 0)
+                writer.writeInt32(7, this.radius);
+            if (this.has_point)
+                writer.writeMessage(8, this.point, () => this.point.serialize(writer));
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Rect {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Rect();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        reader.readMessage(message.common, () => message.common = CommonInfo.deserialize(reader));
+                        break;
+                    case 2:
+                        message.code = reader.readString();
+                        break;
+                    case 3:
+                        message.lineWidth = reader.readInt32();
+                        break;
+                    case 4:
+                        message.lineColor = reader.readString();
+                        break;
+                    case 5:
+                        message.width = reader.readFloat();
+                        break;
+                    case 6:
+                        message.height = reader.readFloat();
+                        break;
+                    case 7:
+                        message.radius = reader.readInt32();
+                        break;
+                    case 8:
+                        reader.readMessage(message.point, () => message.point = Point.deserialize(reader));
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): Rect {
+            return Rect.deserialize(bytes);
+        }
+    }
 }