joylink/rtsa-client
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

通用的button-类似组件button

Browse Source
This commit is contained in:
joylink_zhaoerwei 2024-10-16 17:09:36 +08:00
parent f5bc7c9aa9
commit 3c91608189
18 changed files with 790 additions and 355 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
rtss-proto-msg

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

8
src/components/draw-app/IscsDrawProperties.vue
View File

@ -39,8 +39,8 @@
<circle-property
v-else-if="drawStore.selectedGraphicType === Circle.Type"
/>
<cctv-button-property
v-else-if="drawStore.selectedGraphicType === CCTVButton.Type"
<button-property
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();

112
src/components/draw-app/properties/ButtonProperty.vue Normal file
View File

@ -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>

40
src/components/draw-app/properties/CCTV/CCTVButtonProperty.vue
View File

@ -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>

2
src/components/draw-app/properties/RectProperty.vue
View File

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

13
src/drawApp/commonApp.ts
View File

@ -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
);
}
});

92
src/drawApp/graphics/ButtonInteraction.ts Normal file
View File

@ -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);
}
}

47
src/drawApp/graphics/CCTV/CCTVButtonInteraction.ts
View File

@ -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);
}
}

16
src/drawApp/iscsApp.ts
View File

@ -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;
}

81
src/graphics/CCTV/cctvButton/CCTVButton.ts
View File

@ -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;
}
}

122
src/graphics/CCTV/cctvButton/CCTVButtonDrawAssistant.ts
View File

@ -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),
});
}
}

201
src/graphics/button/Button.ts Normal file
View File

@ -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;
}
}

129
src/graphics/button/ButtonDrawAssistant.ts Normal file
View File

@ -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),
});
}
}

0
src/graphics/CCTV/cctvButton/cctv-button-data.json → src/graphics/button/cctv-button-data.json
View File

0
src/graphics/CCTV/cctvButton/cctv-button-spritesheet.png → src/graphics/button/cctv-button-spritesheet.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

5
src/layouts/IscsDrawLayout.vue
View File

@ -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) => {

273
src/protos/iscs_graphic_data.ts
View File

@ -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() {
return pb_1.Message.getFieldWithDefault(this, 3, CCTVButton.ButtonType.rect) as CCTVButton.ButtonType;
get codeColor() {
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;
}): CCTVButton {
const message = new CCTVButton({});
codeColor?: string;
codeFontSize?: number;
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)
writer.writeEnum(3, this.buttonType);
if (this.codeColor.length)
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 {
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new CCTVButton();
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Button {
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 {
return CCTVButton.deserialize(bytes);
static deserializeBinary(bytes: Uint8Array): Button {
return Button.deserialize(bytes);
}
}
export namespace CCTVButton {
export namespace Button {
export enum ButtonType {
rect = 0,
monitor = 1,
semicircle = 2
noIcon = 0,
cctvRect = 1,
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();
}
}

2
src/protos/sync_data_message.ts
View File

@ -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);