通用的button-类似组件button

rtss-proto-msg

@@ -1 +1 @@
-Subproject commit 4ce6d5206d9ac578adb4305df8cbff59746d8d2f
+Subproject commit c3ebea56bd46e93f4bd5204bdc3966b5b9fb9d58

src/components/draw-app/IscsDrawProperties.vue

@@ -39,8 +39,8 @@
           <circle-property
             v-else-if="drawStore.selectedGraphicType === Circle.Type"
           />
-          <cctv-button-property
+          <button-property
-            v-else-if="drawStore.selectedGraphicType === CCTVButton.Type"
+            v-else-if="drawStore.selectedGraphicType === Button.Type"
           />
         </q-card-section>
       </template>
@@ -56,8 +56,6 @@ import { useDrawStore } from 'src/stores/draw-store';
 import CanvasProperty from './properties/CanvasIscsProperty.vue';
 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';
 import LineTemplate from './templates/LineTemplate.vue';
@@ -65,6 +63,8 @@ import LineProperty from './properties/LineProperty.vue';
 import { Line } from 'src/graphics/line/Line';
 import CircleProperty from './properties/CircleProperty.vue';
 import { Circle } from 'src/graphics/circle/Circle';
+import ButtonProperty from './properties/ButtonProperty.vue';
+import { Button } from 'src/graphics/button/Button';
 import { watch } from 'vue';
 
 const drawStore = useDrawStore();

src/components/draw-app/properties/ButtonProperty.vue

@@ -0,0 +1,112 @@
+<template>
+  <q-form class="q-gutter-sm">
+    <q-input outlined readonly v-model="buttonModel.id" label="id" />
+    <q-input
+      outlined
+      v-model="buttonModel.code"
+      @blur="onUpdate"
+      label="label"
+      lazy-rules
+    />
+    <q-input
+      outlined
+      v-model.number="buttonModel.codeFontSize"
+      type="number"
+      @blur="onUpdate"
+      label="label字体大小"
+      lazy-rules
+      :rules="[(val) => val >= 0 || '宽度必须大于等于0']"
+    />
+    <q-select
+      outlined
+      class="q-mt-sm"
+      v-model="buttonModel.buttonType"
+      :options="optionsButtonType"
+      :map-options="true"
+      :emit-value="true"
+      @update:model-value="onUpdate"
+      label="按钮类型"
+    />
+    <q-input
+      outlined
+      v-model="buttonModel.fillColor"
+      @change="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="buttonModel.fillColor"
+              @change="
+                (val) => {
+                  buttonModel.fillColor = val;
+                  onUpdate();
+                }
+              "
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+    <q-input
+      outlined
+      v-model="buttonModel.alpha"
+      mask="#.###"
+      @blur="onUpdate"
+      label="透明度"
+      lazy-rules
+      :rules="[
+        (val) => (val && val > 0 && val <= 1) || '透明度必须大于0且小于等于1',
+      ]"
+    />
+    <q-input
+      outlined
+      v-model.number="buttonModel.width"
+      type="number"
+      @blur="onUpdate"
+      label="宽度"
+      lazy-rules
+      :rules="[(val) => val >= 0 || '宽度必须大于0']"
+    />
+    <q-input
+      outlined
+      v-model.number="buttonModel.height"
+      type="number"
+      @blur="onUpdate"
+      label="高度"
+      lazy-rules
+      :rules="[(val) => val >= 0 || '高度必须大于等于0']"
+    />
+    <q-input
+      outlined
+      v-model.number="buttonModel.radius"
+      type="number"
+      @blur="onUpdate"
+      label="圆角半径"
+      lazy-rules
+      :rules="[(val) => val >= 0 || '圆角半径必须大于等于0']"
+    />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
+import { useDrawStore } from 'src/stores/draw-store';
+import { ButtonData } from 'src/drawApp/graphics/ButtonInteraction';
+import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+
+const { data: buttonModel, onUpdate } = useFormData(
+  new ButtonData(),
+  useDrawStore().getDrawApp()
+);
+
+const optionsButtonType = [
+  { label: '无Icon', value: iscsGraphicData.Button.ButtonType.noIcon },
+  { label: '方形', value: iscsGraphicData.Button.ButtonType.cctvRect },
+  { label: '监视器', value: iscsGraphicData.Button.ButtonType.cctvMonitor },
+  { label: '半圆', value: iscsGraphicData.Button.ButtonType.cctvSemicircle },
+];
+</script>

src/components/draw-app/properties/CCTV/CCTVButtonProperty.vue

@@ -1,40 +0,0 @@
-<template>
-  <q-form class="q-gutter-sm">
-    <q-input outlined readonly v-model="cctvButtonModel.id" label="id" />
-    <q-input
-      outlined
-      v-model="cctvButtonModel.code"
-      @blur="onUpdate"
-      label="CCTV按钮"
-      lazy-rules
-    />
-    <q-select
-      outlined
-      class="q-mt-sm"
-      v-model="cctvButtonModel.buttonType"
-      :options="optionsButtonType"
-      :map-options="true"
-      :emit-value="true"
-      @update:model-value="onUpdate"
-      label="按钮类型"
-    />
-  </q-form>
-</template>
-
-<script setup lang="ts">
-import { useFormData } from 'src/components/DrawAppFormUtils';
-import { useDrawStore } from 'src/stores/draw-store';
-import { CCTVButtonData } from 'src/drawApp/graphics/CCTV/CCTVButtonInteraction';
-import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
-
-const { data: cctvButtonModel, onUpdate } = useFormData(
-  new CCTVButtonData(),
-  useDrawStore().getDrawApp()
-);
-
-const optionsButtonType = [
-  { label: '方形', value: iscsGraphicData.CCTVButton.ButtonType.rect },
-  { label: '监视器', value: iscsGraphicData.CCTVButton.ButtonType.monitor },
-  { label: '半圆', value: iscsGraphicData.CCTVButton.ButtonType.semicircle },
-];
-</script>

src/components/draw-app/properties/RectProperty.vue

@@ -85,7 +85,7 @@
       @blur="onUpdate"
       label="高度"
       lazy-rules
-      :rules="[(val) => (val && val > 0) || '宽度必须大于0']"
+      :rules="[(val) => (val && val > 0) || '高度必须大于0']"
     />
     <q-input
       outlined

src/drawApp/commonApp.ts

@@ -29,6 +29,9 @@ import { LineData } from './graphics/LineInteraction';
 import { CircleDraw } from 'src/graphics/circle/CircleDrawAssistant';
 import { Circle, CircleTemplate } from 'src/graphics/circle/Circle';
 import { CircleData } from './graphics/CircleInteraction';
+import { ButtonDraw } from 'src/graphics/button/ButtonDrawAssistant';
+import { Button, ButtonTemplate } from 'src/graphics/button/Button';
+import { ButtonData } from './graphics/ButtonInteraction';
 
 const UndoOptions: MenuItemOptions = {
   name: '撤销',
@@ -58,6 +61,7 @@ export function initCommonDrawApp(app: IDrawApp) {
   new RectDraw(app, new RectTemplate(new RectData()));
   new LineDraw(app, new LineTemplate(new LineData()));
   new CircleDraw(app, new CircleTemplate(new CircleData()));
+  new ButtonDraw(app, new ButtonTemplate(new ButtonData()));
   // 画布右键菜单
   app.registerMenu(DefaultCanvasMenu);
 
@@ -88,6 +92,7 @@ interface ICommonStorage {
     rects: iscsGraphicData.Rect[];
     lines: iscsGraphicData.Line[];
     circles: iscsGraphicData.Circle[];
+    buttons: iscsGraphicData.Button[];
   };
 }
 export function loadCommonDrawDatas(storage: ICommonStorage): GraphicData[] {
@@ -108,6 +113,9 @@ export function loadCommonDrawDatas(storage: ICommonStorage): GraphicData[] {
   storage.commonGraphicStorage.circles.forEach((circle) => {
     datas.push(new CircleData(circle));
   });
+  storage.commonGraphicStorage.buttons.forEach((button) => {
+    datas.push(new ButtonData(button));
+  });
   return datas;
 }
 
@@ -140,6 +148,11 @@ export function saveCommonDrawDatas(app: IDrawApp, storage: ICommonStorage) {
       storage.commonGraphicStorage.circles.push(
         (circleData as CircleData).data
       );
+    } else if (g instanceof Button) {
+      const buttonData = g.saveData();
+      storage.commonGraphicStorage.buttons.push(
+        (buttonData as ButtonData).data
+      );
     }
   });
 

src/drawApp/graphics/ButtonInteraction.ts

@@ -0,0 +1,92 @@
+import * as pb_1 from 'google-protobuf';
+import { GraphicDataBase } from './GraphicDataBase';
+import { Button, IButtonData } from 'src/graphics/button/Button';
+import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+
+export class ButtonData extends GraphicDataBase implements IButtonData {
+  constructor(data?: iscsGraphicData.Button) {
+    let button;
+    if (data) {
+      button = data;
+    } else {
+      button = new iscsGraphicData.Button({
+        common: GraphicDataBase.defaultCommonInfo(Button.Type),
+      });
+    }
+    super(button);
+  }
+
+  public get data(): iscsGraphicData.Button {
+    return this.getData<iscsGraphicData.Button>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get codeColor(): string {
+    return this.data.codeColor;
+  }
+  set codeColor(v: string) {
+    this.data.codeColor = v;
+  }
+  get codeFontSize(): number {
+    return this.data.codeFontSize;
+  }
+  set codeFontSize(v: number) {
+    this.data.codeFontSize = v;
+  }
+  get belongSubMenu(): string {
+    return this.data.codeColor;
+  }
+  set belongSubMenu(v: string) {
+    this.data.codeColor = v;
+  }
+  get buttonType(): iscsGraphicData.Button.ButtonType {
+    return this.data.buttonType;
+  }
+  set buttonType(v: iscsGraphicData.Button.ButtonType) {
+    this.data.buttonType = v;
+  }
+  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;
+  }
+  get fillColor(): string {
+    return this.data.fillColor;
+  }
+  set fillColor(v: string) {
+    this.data.fillColor = v;
+  }
+  get alpha(): number {
+    return this.data.alpha;
+  }
+  set alpha(v: number) {
+    this.data.alpha = v;
+  }
+  clone(): ButtonData {
+    return new ButtonData(this.data.cloneMessage());
+  }
+  copyFrom(data: ButtonData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: ButtonData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}

src/drawApp/graphics/CCTV/CCTVButtonInteraction.ts

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

src/drawApp/iscsApp.ts

@@ -17,12 +17,6 @@ import {
   saveDrawToServer,
   handlerNoEditCommonData,
 } from './commonApp';
-import { CCTVButtonData } from './graphics/CCTV/CCTVButtonInteraction';
-import { CCTVButtonDraw } from 'src/graphics/CCTV/cctvButton/CCTVButtonDrawAssistant';
-import {
-  CCTVButton,
-  CCTVButtonTemplate,
-} from 'src/graphics/CCTV/cctvButton/CCTVButton';
 import { useDrawStore } from 'src/stores/draw-store';
 import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
 import { getDraft } from 'src/api/DraftApi';
@@ -66,8 +60,6 @@ export function initIscsDrawApp(): IDrawApp {
 
   const app = drawApp;
   initCommonDrawApp(app);
-  new CCTVButtonDraw(app, new CCTVButtonTemplate(new CCTVButtonData()));
-
   app.addKeyboardListener(
     new KeyListener({
       value: 'KeyS',
@@ -238,9 +230,9 @@ export async function loadDrawDatas(): Promise<IGraphicStorage> {
           ) {
             canvasProperty = ctvOfStationControl.canvas;
             datas = loadCommonDrawDatas(ctvOfStationControl);
-            ctvOfStationControl.cctvButtons.forEach((cctvButton) => {
+            /*  ctvOfStationControl.cctvButtons.forEach((cctvButton) => {
               datas.push(new CCTVButtonData(cctvButton));
-            });
+            }); */
             break;
           }
         }
@@ -328,14 +320,14 @@ export function saveDrawDatas(app: IDrawApp) {
             cctvOfStationControl
           ) as iscsGraphicData.CCTVOfStationControlStorage;
 
-          graphics.forEach((g) => {
+          /* graphics.forEach((g) => {
             if (g instanceof CCTVButton) {
               const cctvButtonData = g.saveData();
               cctvStorage.cctvButtons.push(
                 (cctvButtonData as CCTVButtonData).data
               );
             }
-          });
+          }); */
           storage.cctvOfStationControlStorages[i] = cctvStorage;
           break;
         }

src/graphics/CCTV/cctvButton/CCTVButton.ts

@@ -1,81 +0,0 @@
-import { GraphicData, JlGraphic, JlGraphicTemplate } from 'jl-graphic';
-import CCTV_Button_Assets from './cctv-button-spritesheet.png';
-import CCTV_Button_JSON from './cctv-button-data.json';
-import { Assets, Sprite, Spritesheet, Texture } from 'pixi.js';
-import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
-
-interface CCTVButtonTextures {
-  rectPressBtn: Texture;
-  rectBtn: Texture;
-  monitorBtn: Texture;
-  semicircleBtn: Texture;
-}
-
-export interface ICCTVButtonData extends GraphicData {
-  get code(): string;
-  set code(v: string);
-  get buttonType(): iscsGraphicData.CCTVButton.ButtonType;
-  set buttonType(v: iscsGraphicData.CCTVButton.ButtonType);
-}
-
-export class CCTVButton extends JlGraphic {
-  static Type = 'CCTVButton';
-  _cctvButton: Sprite;
-  cctvButtonTextures: CCTVButtonTextures;
-  __state = 0;
-
-  constructor(cctvButtonTextures: CCTVButtonTextures) {
-    super(CCTVButton.Type);
-    this.cctvButtonTextures = cctvButtonTextures;
-    this._cctvButton = new Sprite();
-    this._cctvButton.texture = this.cctvButtonTextures.rectBtn;
-    this._cctvButton.anchor.set(0.5);
-    this.addChild(this._cctvButton);
-  }
-  get code(): string {
-    return this.datas.code;
-  }
-  get datas(): ICCTVButtonData {
-    return this.getDatas<ICCTVButtonData>();
-  }
-
-  doRepaint(): void {
-    if (this.datas.buttonType == iscsGraphicData.CCTVButton.ButtonType.rect) {
-      this._cctvButton.texture = this.cctvButtonTextures.rectBtn;
-    } else if (
-      this.datas.buttonType == iscsGraphicData.CCTVButton.ButtonType.monitor
-    ) {
-      this._cctvButton.texture = this.cctvButtonTextures.monitorBtn;
-    } else {
-      this._cctvButton.texture = this.cctvButtonTextures.semicircleBtn;
-    }
-  }
-}
-
-export class CCTVButtonTemplate extends JlGraphicTemplate<CCTVButton> {
-  cctvButtonTextures?: CCTVButtonTextures;
-  constructor(dataTemplate: ICCTVButtonData) {
-    super(CCTVButton.Type, { dataTemplate });
-    this.loadAssets();
-  }
-  new(): CCTVButton {
-    if (this.cctvButtonTextures) {
-      const g = new CCTVButton(this.cctvButtonTextures);
-      g.loadData(this.datas);
-      return g;
-    }
-    throw new Error('资源未加载/加载失败');
-  }
-  async loadAssets(): Promise<CCTVButtonTextures> {
-    const texture = await Assets.load(CCTV_Button_Assets);
-    const cctvButtonSheet = new Spritesheet(texture, CCTV_Button_JSON);
-    const result = await cctvButtonSheet.parse();
-    this.cctvButtonTextures = {
-      rectPressBtn: result['rect-press-btn.png'],
-      rectBtn: result['rect-btn.png'],
-      monitorBtn: result['monitor-btn.png'],
-      semicircleBtn: result['semicircle-btn.png'],
-    };
-    return this.cctvButtonTextures as CCTVButtonTextures;
-  }
-}

src/graphics/CCTV/cctvButton/CCTVButtonDrawAssistant.ts

@@ -1,122 +0,0 @@
-import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
-import {
-  AbsorbableLine,
-  AbsorbablePosition,
-  GraphicDrawAssistant,
-  GraphicInteractionPlugin,
-  GraphicTransformEvent,
-  IDrawApp,
-  JlGraphic,
-} from 'jl-graphic';
-import { ICCTVButtonData, CCTVButton, CCTVButtonTemplate } from './CCTVButton';
-
-export class CCTVButtonDraw extends GraphicDrawAssistant<
-  CCTVButtonTemplate,
-  ICCTVButtonData
-> {
-  _cctvButton: CCTVButton | null = null;
-  constructor(app: IDrawApp, template: CCTVButtonTemplate) {
-    super(
-      app,
-      template,
-      'svguse:../drawIcon.svg#icon-psl-button',
-      'cctv按钮'
-    );
-    CCTVButtonInteraction.init(app);
-  }
-
-  bind(): void {
-    super.bind();
-    if (!this._cctvButton) {
-      this._cctvButton = this.graphicTemplate.new();
-      this.container.addChild(this._cctvButton);
-    }
-  }
-
-  public get cctvButton(): CCTVButton {
-    if (!this._cctvButton) {
-      this._cctvButton = this.graphicTemplate.new();
-      this.container.addChild(this._cctvButton);
-    }
-    return this._cctvButton;
-  }
-
-  redraw(cp: Point): void {
-    this.cctvButton.position.copyFrom(cp);
-  }
-  onLeftUp(e: FederatedMouseEvent): void {
-    this.cctvButton.position.copyFrom(this.toCanvasCoordinates(e.global));
-    this.createAndStore(true);
-  }
-  prepareData(data: ICCTVButtonData): boolean {
-    data.transform = this.cctvButton.saveTransform();
-    return true;
-  }
-  onEsc(): void {
-    this.finish();
-  }
-}
-
-/**
- * 构建吸附线
- * @param cctvButton
- */
-function buildAbsorbablePositions(cctvButton: CCTVButton): AbsorbablePosition[] {
-  const aps: AbsorbablePosition[] = [];
-  const cctvButtons = cctvButton.queryStore.queryByType<CCTVButton>(
-    CCTVButton.Type
-  );
-  const canvas = cctvButton.getCanvas();
-  cctvButtons.forEach((item) => {
-    if (item.id === cctvButton.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 CCTVButtonInteraction extends GraphicInteractionPlugin<CCTVButton> {
-  static Name = 'cctv_button_transform';
-  constructor(app: IDrawApp) {
-    super(CCTVButtonInteraction.Name, app);
-  }
-  static init(app: IDrawApp) {
-    return new CCTVButtonInteraction(app);
-  }
-  filter(...grahpics: JlGraphic[]): CCTVButton[] | undefined {
-    return grahpics
-      .filter((g) => g.type === CCTVButton.Type)
-      .map((g) => g as CCTVButton);
-  }
-  bind(g: CCTVButton): void {
-    g.eventMode = 'static';
-    g.cursor = 'pointer';
-    g.scalable = true;
-    g.rotatable = true;
-    g.on('transformstart', this.transformstart, this);
-  }
-  unbind(g: CCTVButton): 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 cctvButton = target.getGraphic() as CCTVButton;
-    cctvButton.getGraphicApp().setOptions({
-      absorbablePositions: buildAbsorbablePositions(cctvButton),
-    });
-  }
-}

src/graphics/button/Button.ts

@@ -0,0 +1,201 @@
+import {
+  getRectangleCenter,
+  GraphicData,
+  JlGraphic,
+  JlGraphicTemplate,
+  VectorText,
+} from 'jl-graphic';
+import CCTV_Button_Assets from './cctv-button-spritesheet.png';
+import CCTV_Button_JSON from './cctv-button-data.json';
+import {
+  Assets,
+  Color,
+  Graphics,
+  Rectangle,
+  Sprite,
+  Spritesheet,
+  Texture,
+} from 'pixi.js';
+import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+
+interface ButtonTextures {
+  rectPressBtn: Texture;
+  rectBtn: Texture;
+  monitorBtn: Texture;
+  semicircleBtn: Texture;
+}
+
+export const buttonConsts = {
+  width: 60,
+  height: 30,
+  radius: 2,
+  fillColor: '0x1976D2',
+  alpha: 1,
+  codeFontSize: 16,
+};
+
+export interface IButtonData extends GraphicData {
+  get code(): string;
+  set code(v: string);
+  get codeColor(): string; // 填充色
+  set codeColor(v: string);
+  get codeFontSize(): number; // 宽度
+  set codeFontSize(v: number);
+  get belongSubMenu(): string; // 所属子菜单
+  set belongSubMenu(v: string);
+  get buttonType(): iscsGraphicData.Button.ButtonType;
+  set buttonType(v: iscsGraphicData.Button.ButtonType);
+  get width(): number; // 宽度
+  set width(v: number);
+  get height(): number; // 高度
+  set height(v: number);
+  get radius(): number; // 圆角半径
+  set radius(v: number);
+  get fillColor(): string; // 填充色
+  set fillColor(v: string);
+  get alpha(): number; // 透明度
+  set alpha(v: number);
+}
+
+export class Button extends JlGraphic {
+  static Type = 'Button';
+  _buttonIcon: Sprite;
+  labelGraphic = new VectorText();
+  buttonTextures: ButtonTextures;
+  buttonBackground: Graphics = new Graphics();
+  __state = 0;
+
+  constructor(buttonTextures: ButtonTextures) {
+    super(Button.Type);
+    this.buttonTextures = buttonTextures;
+    this._buttonIcon = new Sprite();
+    this._buttonIcon.anchor.set(0.5);
+    this.addChild(this.buttonBackground);
+  }
+  get code(): string {
+    return this.datas.code;
+  }
+  get datas(): IButtonData {
+    return this.getDatas<IButtonData>();
+  }
+
+  doRepaint(): void {
+    this.buttonBackground.clear();
+    if (this.datas.width > 0 && this.datas.height > 0) {
+      this.drawRect();
+    } else {
+      this.removeChild(this.buttonBackground);
+    }
+
+    if (this.datas.buttonType !== iscsGraphicData.Button.ButtonType.noIcon) {
+      this.addChild(this._buttonIcon);
+      this._buttonIcon.transformSave = true;
+      this._buttonIcon.name = 'buttonIcon';
+      if (this.datas.buttonType == iscsGraphicData.Button.ButtonType.cctvRect) {
+        this._buttonIcon.texture = this.buttonTextures.rectBtn;
+      } else if (
+        this.datas.buttonType == iscsGraphicData.Button.ButtonType.cctvMonitor
+      ) {
+        this._buttonIcon.texture = this.buttonTextures.monitorBtn;
+      }
+      if (
+        this.datas.buttonType ==
+        iscsGraphicData.Button.ButtonType.cctvSemicircle
+      ) {
+        this._buttonIcon.texture = this.buttonTextures.semicircleBtn;
+      }
+      const iconPosition = this.datas.childTransforms?.find(
+        (t) => t.name === this._buttonIcon.name
+      )?.transform.position;
+      if (iconPosition) {
+        this._buttonIcon.position.set(iconPosition.x, iconPosition.y);
+      } else {
+        this._buttonIcon.position.set(0, 0);
+      }
+      const iconScale = this.datas.childTransforms?.find(
+        (t) => t.name === this._buttonIcon.name
+      )?.transform.scale;
+      if (iconScale) {
+        this._buttonIcon.scale.set(iconScale.x, iconScale.y);
+      } else {
+        this._buttonIcon.scale.set(1, 1);
+      }
+    } else {
+      this.removeChild(this._buttonIcon);
+    }
+
+    if (this.datas.code) {
+      this.setTextGraphic(this.labelGraphic, 'label');
+      this.labelGraphic.text = this.datas.code;
+      this.datas.codeFontSize =
+        this.datas.codeFontSize || buttonConsts.codeFontSize;
+      const labelPosition = this.datas.childTransforms?.find(
+        (t) => t.name === this.labelGraphic.name
+      )?.transform.position;
+      if (labelPosition) {
+        this.labelGraphic.position.set(labelPosition.x, labelPosition.y);
+      } else {
+        this.labelGraphic.position.set(0, 0);
+      }
+      this.addChild(this.labelGraphic);
+    } else {
+      this.removeChild(this.labelGraphic);
+    }
+  }
+
+  drawRect(): void {
+    const buttonBackground = this.buttonBackground;
+    const width = this.datas.width || buttonConsts.width;
+    const height = this.datas.height || buttonConsts.height;
+    const radius = this.datas?.radius || buttonConsts.radius;
+    const fillColor = this.datas.fillColor || buttonConsts.fillColor;
+    buttonBackground.lineStyle(1, new Color(fillColor));
+    buttonBackground.beginFill(
+      fillColor,
+      this.datas.alpha || buttonConsts.alpha
+    );
+    buttonBackground.drawRoundedRect(0, 0, width, height, radius);
+    buttonBackground.endFill;
+    buttonBackground.pivot = getRectangleCenter(
+      new Rectangle(0, 0, width, height)
+    );
+  }
+
+  setTextGraphic(g: VectorText, name: string) {
+    const fontSize = this.datas.codeFontSize || buttonConsts.codeFontSize;
+    g.setVectorFontSize(fontSize);
+    g.anchor.set(0.5);
+    g.style.fill = '#000';
+    g.transformSave = true;
+    g.name = name;
+  }
+}
+
+export class ButtonTemplate extends JlGraphicTemplate<Button> {
+  buttonTextures?: ButtonTextures;
+  constructor(dataTemplate: IButtonData) {
+    super(Button.Type, { dataTemplate });
+    this.loadAssets();
+  }
+  new(): Button {
+    if (this.buttonTextures) {
+      const g = new Button(this.buttonTextures);
+      g.loadData(this.datas);
+      g.drawRect();
+      return g;
+    }
+    throw new Error('资源未加载/加载失败');
+  }
+  async loadAssets(): Promise<ButtonTextures> {
+    const texture = await Assets.load(CCTV_Button_Assets);
+    const buttonSheet = new Spritesheet(texture, CCTV_Button_JSON);
+    const result = await buttonSheet.parse();
+    this.buttonTextures = {
+      rectPressBtn: result['rect-press-btn.png'],
+      rectBtn: result['rect-btn.png'],
+      monitorBtn: result['monitor-btn.png'],
+      semicircleBtn: result['semicircle-btn.png'],
+    };
+    return this.buttonTextures as ButtonTextures;
+  }
+}

src/graphics/button/ButtonDrawAssistant.ts

@@ -0,0 +1,129 @@
+import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import {
+  AbsorbableLine,
+  AbsorbablePosition,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransformEvent,
+  IDrawApp,
+  JlGraphic,
+} from 'jl-graphic';
+import { IButtonData, Button, ButtonTemplate, buttonConsts } from './Button';
+
+export class ButtonDraw extends GraphicDrawAssistant<
+  ButtonTemplate,
+  IButtonData
+> {
+  _button: Button | null = null;
+  constructor(app: IDrawApp, template: ButtonTemplate) {
+    super(app, template, 'radio_button_checked', '按钮');
+    ButtonInteraction.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+    if (!this._button) {
+      this._button = this.graphicTemplate.new();
+      this.container.addChild(this._button);
+    }
+  }
+
+  public get button(): Button {
+    if (!this._button) {
+      this._button = this.graphicTemplate.new();
+      this.container.addChild(this._button);
+    }
+    return this._button;
+  }
+
+  redraw(cp: Point): void {
+    this.button.position.copyFrom(cp);
+  }
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.button.position.copyFrom(this.toCanvasCoordinates(e.global));
+    this.createAndStore(true);
+  }
+  prepareData(data: IButtonData): boolean {
+    data.transform = this.button.saveTransform();
+    data.width = buttonConsts.width;
+    data.height = buttonConsts.height;
+    data.fillColor = buttonConsts.fillColor;
+    data.radius = buttonConsts.radius;
+    data.alpha = buttonConsts.alpha;
+    return true;
+  }
+  onEsc(): void {
+    this.finish();
+  }
+}
+
+/**
+ * 构建吸附线
+ * @param button
+ */
+function buildAbsorbablePositions(button: Button): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const buttons = button.queryStore.queryByType<Button>(Button.Type);
+  const canvas = button.getCanvas();
+  buttons.forEach((item) => {
+    if (item.id === button.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 ButtonInteraction extends GraphicInteractionPlugin<Button> {
+  static Name = 'cctv_button_transform';
+  constructor(app: IDrawApp) {
+    super(ButtonInteraction.Name, app);
+  }
+  static init(app: IDrawApp) {
+    return new ButtonInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): Button[] | undefined {
+    return grahpics
+      .filter((g) => g.type === Button.Type)
+      .map((g) => g as Button);
+  }
+  bind(g: Button): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.labelGraphic.eventMode = 'static';
+    g.labelGraphic.cursor = 'pointer';
+    g.labelGraphic.selectable = true;
+    g.labelGraphic.draggable = true;
+    g._buttonIcon.eventMode = 'static';
+    g._buttonIcon.cursor = 'pointer';
+    g._buttonIcon.scalable = true;
+    g._buttonIcon.selectable = true;
+    g._buttonIcon.draggable = true;
+    g.on('transformstart', this.transformstart, this);
+  }
+  unbind(g: Button): void {
+    g.eventMode = 'none';
+    g.labelGraphic.eventMode = 'none';
+    g._buttonIcon.eventMode = 'none';
+    g.off('transformstart', this.transformstart, this);
+  }
+  transformstart(e: GraphicTransformEvent) {
+    const target = e.target as DisplayObject;
+    const button = target.getGraphic() as Button;
+    button.getGraphicApp().setOptions({
+      absorbablePositions: buildAbsorbablePositions(button),
+    });
+  }
+}

src/layouts/IscsDrawLayout.vue

@@ -282,7 +282,7 @@ import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { date, useQuasar } from 'quasar';
 import { useDrawStore } from 'src/stores/draw-store';
-import { CCTVButton } from 'src/graphics/CCTV/cctvButton/CCTVButton';
+import { Button } from 'src/graphics/button/Button';
 import { Arrow } from 'src/graphics/arrow/Arrow';
 import { TextContent } from 'src/graphics/textContent/TextContent';
 import { Rect } from 'src/graphics/rect/Rect';
@@ -383,10 +383,11 @@ function handleUtilsOption() {
     Circle.Type,
     Rect.Type,
     Line.Type,
+    Button.Type,
   ];
   switch (drawStore.selectSubmenuAndStation.submenu) {
     case '监控布局图':
-      drawAssistantsTypes.push(CCTVButton.Type);
+      //drawAssistantsTypes.push(CCTVButton.Type);
       break;
   }
   drawAssistantsTypes.forEach((type) => {

src/protos/iscs_graphic_data.ts

@@ -217,9 +217,10 @@ export namespace iscsGraphicData {
             rects?: Rect[];
             lines?: Line[];
             circles?: Circle[];
+            buttons?: Button[];
         }) {
             super();
-            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [1, 2, 3, 4, 5], this.#one_of_decls);
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [1, 2, 3, 4, 5, 6], this.#one_of_decls);
             if (!Array.isArray(data) && typeof data == "object") {
                 if ("arrows" in data && data.arrows != undefined) {
                     this.arrows = data.arrows;
@@ -236,6 +237,9 @@ export namespace iscsGraphicData {
                 if ("circles" in data && data.circles != undefined) {
                     this.circles = data.circles;
                 }
+                if ("buttons" in data && data.buttons != undefined) {
+                    this.buttons = data.buttons;
+                }
             }
         }
         get arrows() {
@@ -268,12 +272,19 @@ export namespace iscsGraphicData {
         set circles(value: Circle[]) {
             pb_1.Message.setRepeatedWrapperField(this, 5, value);
         }
+        get buttons() {
+            return pb_1.Message.getRepeatedWrapperField(this, Button, 6) as Button[];
+        }
+        set buttons(value: Button[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 6, value);
+        }
         static fromObject(data: {
             arrows?: ReturnType<typeof Arrow.prototype.toObject>[];
             texts?: ReturnType<typeof Text.prototype.toObject>[];
             rects?: ReturnType<typeof Rect.prototype.toObject>[];
             lines?: ReturnType<typeof Line.prototype.toObject>[];
             circles?: ReturnType<typeof Circle.prototype.toObject>[];
+            buttons?: ReturnType<typeof Button.prototype.toObject>[];
         }): CommonGraphicStorage {
             const message = new CommonGraphicStorage({});
             if (data.arrows != null) {
@@ -291,6 +302,9 @@ export namespace iscsGraphicData {
             if (data.circles != null) {
                 message.circles = data.circles.map(item => Circle.fromObject(item));
             }
+            if (data.buttons != null) {
+                message.buttons = data.buttons.map(item => Button.fromObject(item));
+            }
             return message;
         }
         toObject() {
@@ -300,6 +314,7 @@ export namespace iscsGraphicData {
                 rects?: ReturnType<typeof Rect.prototype.toObject>[];
                 lines?: ReturnType<typeof Line.prototype.toObject>[];
                 circles?: ReturnType<typeof Circle.prototype.toObject>[];
+                buttons?: ReturnType<typeof Button.prototype.toObject>[];
             } = {};
             if (this.arrows != null) {
                 data.arrows = this.arrows.map((item: Arrow) => item.toObject());
@@ -316,6 +331,9 @@ export namespace iscsGraphicData {
             if (this.circles != null) {
                 data.circles = this.circles.map((item: Circle) => item.toObject());
             }
+            if (this.buttons != null) {
+                data.buttons = this.buttons.map((item: Button) => item.toObject());
+            }
             return data;
         }
         serialize(): Uint8Array;
@@ -332,6 +350,8 @@ export namespace iscsGraphicData {
                 writer.writeRepeatedMessage(4, this.lines, (item: Line) => item.serialize(writer));
             if (this.circles.length)
                 writer.writeRepeatedMessage(5, this.circles, (item: Circle) => item.serialize(writer));
+            if (this.buttons.length)
+                writer.writeRepeatedMessage(6, this.buttons, (item: Button) => item.serialize(writer));
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -356,6 +376,9 @@ export namespace iscsGraphicData {
                     case 5:
                         reader.readMessage(message.circles, () => pb_1.Message.addToRepeatedWrapperField(message, 5, Circle.deserialize(reader), Circle));
                         break;
+                    case 6:
+                        reader.readMessage(message.buttons, () => pb_1.Message.addToRepeatedWrapperField(message, 6, Button.deserialize(reader), Button));
+                        break;
                     default: reader.skipField();
                 }
             }
@@ -1368,12 +1391,20 @@ export namespace iscsGraphicData {
             return Circle.deserialize(bytes);
         }
     }
-    export class CCTVButton extends pb_1.Message {
+    export class Button extends pb_1.Message {
         #one_of_decls: number[][] = [];
         constructor(data?: any[] | {
             common?: dependency_1.common.CommonInfo;
             code?: string;
-            buttonType?: CCTVButton.ButtonType;
+            codeColor?: string;
+            codeFontSize?: number;
+            belongSubMenu?: string;
+            buttonType?: Button.ButtonType;
+            width?: number;
+            height?: number;
+            radius?: number;
+            fillColor?: string;
+            alpha?: number;
         }) {
             super();
             pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
@@ -1384,9 +1415,33 @@ export namespace iscsGraphicData {
                 if ("code" in data && data.code != undefined) {
                     this.code = data.code;
                 }
+                if ("codeColor" in data && data.codeColor != undefined) {
+                    this.codeColor = data.codeColor;
+                }
+                if ("codeFontSize" in data && data.codeFontSize != undefined) {
+                    this.codeFontSize = data.codeFontSize;
+                }
+                if ("belongSubMenu" in data && data.belongSubMenu != undefined) {
+                    this.belongSubMenu = data.belongSubMenu;
+                }
                 if ("buttonType" in data && data.buttonType != undefined) {
                     this.buttonType = data.buttonType;
                 }
+                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 ("fillColor" in data && data.fillColor != undefined) {
+                    this.fillColor = data.fillColor;
+                }
+                if ("alpha" in data && data.alpha != undefined) {
+                    this.alpha = data.alpha;
+                }
             }
         }
         get common() {
@@ -1404,34 +1459,122 @@ export namespace iscsGraphicData {
         set code(value: string) {
             pb_1.Message.setField(this, 2, value);
         }
-        get buttonType() {
+        get codeColor() {
-            return pb_1.Message.getFieldWithDefault(this, 3, CCTVButton.ButtonType.rect) as CCTVButton.ButtonType;
+            return pb_1.Message.getFieldWithDefault(this, 3, "") as string;
         }
-        set buttonType(value: CCTVButton.ButtonType) {
+        set codeColor(value: string) {
             pb_1.Message.setField(this, 3, value);
         }
+        get codeFontSize() {
+            return pb_1.Message.getFieldWithDefault(this, 4, 0) as number;
+        }
+        set codeFontSize(value: number) {
+            pb_1.Message.setField(this, 4, value);
+        }
+        get belongSubMenu() {
+            return pb_1.Message.getFieldWithDefault(this, 5, "") as string;
+        }
+        set belongSubMenu(value: string) {
+            pb_1.Message.setField(this, 5, value);
+        }
+        get buttonType() {
+            return pb_1.Message.getFieldWithDefault(this, 6, Button.ButtonType.noIcon) as Button.ButtonType;
+        }
+        set buttonType(value: Button.ButtonType) {
+            pb_1.Message.setField(this, 6, value);
+        }
+        get width() {
+            return pb_1.Message.getFieldWithDefault(this, 7, 0) as number;
+        }
+        set width(value: number) {
+            pb_1.Message.setField(this, 7, value);
+        }
+        get height() {
+            return pb_1.Message.getFieldWithDefault(this, 8, 0) as number;
+        }
+        set height(value: number) {
+            pb_1.Message.setField(this, 8, value);
+        }
+        get radius() {
+            return pb_1.Message.getFieldWithDefault(this, 9, 0) as number;
+        }
+        set radius(value: number) {
+            pb_1.Message.setField(this, 9, value);
+        }
+        get fillColor() {
+            return pb_1.Message.getFieldWithDefault(this, 10, "") as string;
+        }
+        set fillColor(value: string) {
+            pb_1.Message.setField(this, 10, value);
+        }
+        get alpha() {
+            return pb_1.Message.getFieldWithDefault(this, 11, 0) as number;
+        }
+        set alpha(value: number) {
+            pb_1.Message.setField(this, 11, value);
+        }
         static fromObject(data: {
             common?: ReturnType<typeof dependency_1.common.CommonInfo.prototype.toObject>;
             code?: string;
-            buttonType?: CCTVButton.ButtonType;
+            codeColor?: string;
-        }): CCTVButton {
+            codeFontSize?: number;
-            const message = new CCTVButton({});
+            belongSubMenu?: string;
+            buttonType?: Button.ButtonType;
+            width?: number;
+            height?: number;
+            radius?: number;
+            fillColor?: string;
+            alpha?: number;
+        }): Button {
+            const message = new Button({});
             if (data.common != null) {
                 message.common = dependency_1.common.CommonInfo.fromObject(data.common);
             }
             if (data.code != null) {
                 message.code = data.code;
             }
+            if (data.codeColor != null) {
+                message.codeColor = data.codeColor;
+            }
+            if (data.codeFontSize != null) {
+                message.codeFontSize = data.codeFontSize;
+            }
+            if (data.belongSubMenu != null) {
+                message.belongSubMenu = data.belongSubMenu;
+            }
             if (data.buttonType != null) {
                 message.buttonType = data.buttonType;
             }
+            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.fillColor != null) {
+                message.fillColor = data.fillColor;
+            }
+            if (data.alpha != null) {
+                message.alpha = data.alpha;
+            }
             return message;
         }
         toObject() {
             const data: {
                 common?: ReturnType<typeof dependency_1.common.CommonInfo.prototype.toObject>;
                 code?: string;
-                buttonType?: CCTVButton.ButtonType;
+                codeColor?: string;
+                codeFontSize?: number;
+                belongSubMenu?: string;
+                buttonType?: Button.ButtonType;
+                width?: number;
+                height?: number;
+                radius?: number;
+                fillColor?: string;
+                alpha?: number;
             } = {};
             if (this.common != null) {
                 data.common = this.common.toObject();
@@ -1439,9 +1582,33 @@ export namespace iscsGraphicData {
             if (this.code != null) {
                 data.code = this.code;
             }
+            if (this.codeColor != null) {
+                data.codeColor = this.codeColor;
+            }
+            if (this.codeFontSize != null) {
+                data.codeFontSize = this.codeFontSize;
+            }
+            if (this.belongSubMenu != null) {
+                data.belongSubMenu = this.belongSubMenu;
+            }
             if (this.buttonType != null) {
                 data.buttonType = this.buttonType;
             }
+            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.fillColor != null) {
+                data.fillColor = this.fillColor;
+            }
+            if (this.alpha != null) {
+                data.alpha = this.alpha;
+            }
             return data;
         }
         serialize(): Uint8Array;
@@ -1452,13 +1619,29 @@ export namespace iscsGraphicData {
                 writer.writeMessage(1, this.common, () => this.common.serialize(writer));
             if (this.code.length)
                 writer.writeString(2, this.code);
-            if (this.buttonType != CCTVButton.ButtonType.rect)
+            if (this.codeColor.length)
-                writer.writeEnum(3, this.buttonType);
+                writer.writeString(3, this.codeColor);
+            if (this.codeFontSize != 0)
+                writer.writeInt32(4, this.codeFontSize);
+            if (this.belongSubMenu.length)
+                writer.writeString(5, this.belongSubMenu);
+            if (this.buttonType != Button.ButtonType.noIcon)
+                writer.writeEnum(6, this.buttonType);
+            if (this.width != 0)
+                writer.writeFloat(7, this.width);
+            if (this.height != 0)
+                writer.writeFloat(8, this.height);
+            if (this.radius != 0)
+                writer.writeInt32(9, this.radius);
+            if (this.fillColor.length)
+                writer.writeString(10, this.fillColor);
+            if (this.alpha != 0)
+                writer.writeFloat(11, this.alpha);
             if (!w)
                 return writer.getResultBuffer();
         }
-        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): CCTVButton {
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Button {
-            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new CCTVButton();
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Button();
             while (reader.nextField()) {
                 if (reader.isEndGroup())
                     break;
@@ -1470,8 +1653,32 @@ export namespace iscsGraphicData {
                         message.code = reader.readString();
                         break;
                     case 3:
+                        message.codeColor = reader.readString();
+                        break;
+                    case 4:
+                        message.codeFontSize = reader.readInt32();
+                        break;
+                    case 5:
+                        message.belongSubMenu = reader.readString();
+                        break;
+                    case 6:
                         message.buttonType = reader.readEnum();
                         break;
+                    case 7:
+                        message.width = reader.readFloat();
+                        break;
+                    case 8:
+                        message.height = reader.readFloat();
+                        break;
+                    case 9:
+                        message.radius = reader.readInt32();
+                        break;
+                    case 10:
+                        message.fillColor = reader.readString();
+                        break;
+                    case 11:
+                        message.alpha = reader.readFloat();
+                        break;
                     default: reader.skipField();
                 }
             }
@@ -1480,15 +1687,16 @@ export namespace iscsGraphicData {
         serializeBinary(): Uint8Array {
             return this.serialize();
         }
-        static deserializeBinary(bytes: Uint8Array): CCTVButton {
+        static deserializeBinary(bytes: Uint8Array): Button {
-            return CCTVButton.deserialize(bytes);
+            return Button.deserialize(bytes);
         }
     }
-    export namespace CCTVButton {
+    export namespace Button {
         export enum ButtonType {
-            rect = 0,
+            noIcon = 0,
-            monitor = 1,
+            cctvRect = 1,
-            semicircle = 2
+            cctvMonitor = 2,
+            cctvSemicircle = 3
         }
     }
     export class ManualAlarmButton extends pb_1.Message {
@@ -1962,10 +2170,9 @@ export namespace iscsGraphicData {
             stationName?: string;
             canvas?: dependency_1.common.Canvas;
             commonGraphicStorage?: CommonGraphicStorage;
-            cctvButtons?: CCTVButton[];
         }) {
             super();
-            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [4], this.#one_of_decls);
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
             if (!Array.isArray(data) && typeof data == "object") {
                 if ("stationName" in data && data.stationName != undefined) {
                     this.stationName = data.stationName;
@@ -1976,9 +2183,6 @@ export namespace iscsGraphicData {
                 if ("commonGraphicStorage" in data && data.commonGraphicStorage != undefined) {
                     this.commonGraphicStorage = data.commonGraphicStorage;
                 }
-                if ("cctvButtons" in data && data.cctvButtons != undefined) {
-                    this.cctvButtons = data.cctvButtons;
-                }
             }
         }
         get stationName() {
@@ -2005,17 +2209,10 @@ export namespace iscsGraphicData {
         get has_commonGraphicStorage() {
             return pb_1.Message.getField(this, 3) != null;
         }
-        get cctvButtons() {
-            return pb_1.Message.getRepeatedWrapperField(this, CCTVButton, 4) as CCTVButton[];
-        }
-        set cctvButtons(value: CCTVButton[]) {
-            pb_1.Message.setRepeatedWrapperField(this, 4, value);
-        }
         static fromObject(data: {
             stationName?: string;
             canvas?: ReturnType<typeof dependency_1.common.Canvas.prototype.toObject>;
             commonGraphicStorage?: ReturnType<typeof CommonGraphicStorage.prototype.toObject>;
-            cctvButtons?: ReturnType<typeof CCTVButton.prototype.toObject>[];
         }): CCTVOfStationControlStorage {
             const message = new CCTVOfStationControlStorage({});
             if (data.stationName != null) {
@@ -2027,9 +2224,6 @@ export namespace iscsGraphicData {
             if (data.commonGraphicStorage != null) {
                 message.commonGraphicStorage = CommonGraphicStorage.fromObject(data.commonGraphicStorage);
             }
-            if (data.cctvButtons != null) {
-                message.cctvButtons = data.cctvButtons.map(item => CCTVButton.fromObject(item));
-            }
             return message;
         }
         toObject() {
@@ -2037,7 +2231,6 @@ export namespace iscsGraphicData {
                 stationName?: string;
                 canvas?: ReturnType<typeof dependency_1.common.Canvas.prototype.toObject>;
                 commonGraphicStorage?: ReturnType<typeof CommonGraphicStorage.prototype.toObject>;
-                cctvButtons?: ReturnType<typeof CCTVButton.prototype.toObject>[];
             } = {};
             if (this.stationName != null) {
                 data.stationName = this.stationName;
@@ -2048,9 +2241,6 @@ export namespace iscsGraphicData {
             if (this.commonGraphicStorage != null) {
                 data.commonGraphicStorage = this.commonGraphicStorage.toObject();
             }
-            if (this.cctvButtons != null) {
-                data.cctvButtons = this.cctvButtons.map((item: CCTVButton) => item.toObject());
-            }
             return data;
         }
         serialize(): Uint8Array;
@@ -2063,8 +2253,6 @@ export namespace iscsGraphicData {
                 writer.writeMessage(2, this.canvas, () => this.canvas.serialize(writer));
             if (this.has_commonGraphicStorage)
                 writer.writeMessage(3, this.commonGraphicStorage, () => this.commonGraphicStorage.serialize(writer));
-            if (this.cctvButtons.length)
-                writer.writeRepeatedMessage(4, this.cctvButtons, (item: CCTVButton) => item.serialize(writer));
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -2083,9 +2271,6 @@ export namespace iscsGraphicData {
                     case 3:
                         reader.readMessage(message.commonGraphicStorage, () => message.commonGraphicStorage = CommonGraphicStorage.deserialize(reader));
                         break;
-                    case 4:
-                        reader.readMessage(message.cctvButtons, () => pb_1.Message.addToRepeatedWrapperField(message, 4, CCTVButton.deserialize(reader), CCTVButton));
-                        break;
                     default: reader.skipField();
                 }
             }

src/protos/sync_data_message.ts

@@ -198,7 +198,7 @@ export namespace sync_data_message {
             pb_1.Message.setField(this, 2, value);
         }
         get data() {
-            return pb_1.Message.getFieldWithDefault(this, 3, new Uint8Array()) as Uint8Array;
+            return pb_1.Message.getFieldWithDefault(this, 3, new Uint8Array(0)) as Uint8Array;
         }
         set data(value: Uint8Array) {
             pb_1.Message.setField(this, 3, value);