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

修改按钮+commonAPP(所有表app共用基础功能）

This commit is contained in:
joylink_zhaoerwei 2024-09-14 14:57:01 +08:00
parent 6f6fd11d58
commit 8de70bf597
12 changed files with 141 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,8 +23,12 @@
</template>
<template v-else-if="drawStore.selectedGraphics.length === 1">
<q-card-section>
<iscs-text-property
v-if="drawStore.selectedGraphicType === TextContent.Type"
:drawStore="drawStore"
/>
<cctv-button-property
v-if="drawStore.selectedGraphicType === CCTVButton.Type"
v-else-if="drawStore.selectedGraphicType === CCTVButton.Type"
/>
</q-card-section>
</template>
@ -38,6 +42,8 @@
<script setup lang="ts">
import { useCCTVDrawStore } from 'src/stores/cctv-draw-store';
import CanvasProperty from './properties/CCTV/CanvasCCTVProperty.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';

1
src/components/draw-app/DrawProperties.vue
View File

@ -25,6 +25,7 @@
<q-card-section>
<iscs-text-property
v-if="drawStore.selectedGraphicType === TextContent.Type"
:drawStore="drawStore"
/>
</q-card-section>
</template>

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

@ -35,5 +35,6 @@ const { data: cctvButtonModel, onUpdate } = useFormData(
const optionsButtonType = [
{ label: '方形', value: CCTVGraphicData.CCTVButton.ButtonType.rect },
{ label: '监视器', value: CCTVGraphicData.CCTVButton.ButtonType.monitor },
{ label: '半圆', value: CCTVGraphicData.CCTVButton.ButtonType.semicircle },
];
</script>

6
src/components/draw-app/properties/IscsTextProperty.vue
View File

@ -38,13 +38,13 @@
</template>
<script setup lang="ts">
import { useDrawStore } from 'src/stores/draw-store';
import { useFormData } from 'src/components/DrawAppFormUtils';
import { IscsTextData } from 'src/drawApp/graphics/IscsTextContentInteraction';
const tccDrawStore = useDrawStore();
const { drawStore } = defineProps(['drawStore'])
const { data: textContentModel, onUpdate } = useFormData(
new IscsTextData(),
tccDrawStore.getDrawApp()
drawStore.getDrawApp()
);
</script>

94
src/drawApp/cctvApp.ts
View File

@ -1,45 +1,25 @@
import {
CombinationKey,
ContextMenu,
IDrawApp,
IGraphicStorage,
JlGraphic,
KeyListener,
MenuItemOptions,
newDrawApp,
} from 'jl-graphic';
import { useCCTVDrawStore } from 'src/stores/cctv-draw-store';
import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
import { toStorageTransform } from './graphics/GraphicDataBase';
import { useDrawStore } from 'src/stores/draw-store';
import { CCTVGraphicData } from 'src/protos/cctv_graphic_data';
import { fromUint8Array } from 'js-base64';
import {
initCommonDrawApp,
saveCommonDrawDatas,
saveDrawToServer,
} from './commonApp';
import { CCTVButtonData } from './graphics/CCTV/CCTVButtonInteraction';
import { CCTVButtonDraw } from 'src/graphics/CCTV/cctvButton/CCTVButtonDrawAssistant';
import { CCTVButtonTemplate } from 'src/graphics/CCTV/cctvButton/CCTVButton';
import { CCTVButtonData } from './graphics/CCTV/CCTVButtonInteraction';
let drawApp: IDrawApp | null = null;
const UndoOptions: MenuItemOptions = {
name: '撤销',
};
const RedoOptions: MenuItemOptions = {
name: '重做',
};
const SelectAllOptions: MenuItemOptions = {
name: '全选',
};
export const DefaultCanvasMenu = new ContextMenu({
name: '绘制-画布菜单',
groups: [
{
items: [UndoOptions, RedoOptions],
},
{
items: [SelectAllOptions],
},
],
});
export function getDrawApp(): IDrawApp | null {
return drawApp;
}
@ -60,26 +40,13 @@ export function initDrawApp(): IDrawApp {
dataLoader: loadDrawDatas,
isSupportDeletion: isSupportDeletion,
});
const app = drawApp;
new CCTVButtonDraw(drawApp, new CCTVButtonTemplate(new CCTVButtonData()));
app.canvas.on('_rightclick', (e) => {
if (app.drawing) return;
UndoOptions.disabled = !app.opRecord.hasUndo;
RedoOptions.disabled = !app.opRecord.hasRedo;
initCommonDrawApp(app);
new CCTVButtonDraw(
app,
new CCTVButtonTemplate(new CCTVButtonData())
);
UndoOptions.handler = () => {
app.opRecord.undo();
};
RedoOptions.handler = () => {
app.opRecord.redo();
};
SelectAllOptions.handler = () => {
app.selectAllGraphics();
};
DefaultCanvasMenu.open(e.global);
});
app.on('destroy', async () => {});
app.addKeyboardListener(
new KeyListener({
value: 'KeyS',
@ -94,36 +61,35 @@ export function initDrawApp(): IDrawApp {
}
export async function loadDrawDatas(): Promise<IGraphicStorage> {
const drawStore = useCCTVDrawStore();
const drawStore = useDrawStore();
const id = drawStore.draftId;
if (!id) {
throw new Error('获取数据异常：为获取到草稿地图ID');
}
/* const { proto: base64 } = await getDraft(id);
if (base64) {
const storage = iscsGraphicData.IscsGraphicStorage.deserialize(
toUint8Array(base64)
);
const datas = loadCommonDrawDatas(storage);} */
return Promise.resolve({
datas: [],
});
}
export function saveDrawDatas(app: IDrawApp) {
const storage = new iscsGraphicData.IscsGraphicStorage();
const canvasData = app.canvas.saveData();
storage.canvas = new iscsGraphicData.Canvas({
width: canvasData.width,
height: canvasData.height,
backgroundColor: canvasData.backgroundColor,
viewportTransform: toStorageTransform(canvasData.viewportTransform),
});
let storage = new CCTVGraphicData.CCTVGraphicStorage();
storage = saveCommonDrawDatas(
app,
storage
) as CCTVGraphicData.CCTVGraphicStorage;
const graphics = app.queryStore.getAllGraphics();
/* graphics.forEach((g) => {
if (TrackSection.Type === g.type) {
const trackSectionData = (g as TrackSection).saveData();
storage.trackSections.push((trackSectionData as TrackSectionData).data);
} }) */
console.log(storage, '保存数据', graphics);
const base64 = fromUint8Array(storage.serialize());
return base64;
}
export function saveDrawToServer(base64: string) {
const drawStore = useCCTVDrawStore();
const id = drawStore.draftId;
if (!id) {
return;
}
console.log('save' + base64);
}

14
src/drawApp/commonApp.ts
View File

@ -5,7 +5,6 @@ import {
MenuItemOptions,
} from 'jl-graphic';
import { useDrawStore } from 'src/stores/draw-store';
import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
import { toStorageTransform } from './graphics/GraphicDataBase';
import { Arrow, ArrowTemplate } from 'src/graphics/arrow/Arrow';
import { ArrowData } from './graphics/ArrowInteraction';
@ -16,6 +15,7 @@ import {
} from 'src/graphics/textContent/TextContent';
import { TextContentDraw } from 'src/graphics/textContent/TextContentDrawAssistant';
import { IscsTextData } from './graphics/IscsTextContentInteraction';
import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
const UndoOptions: MenuItemOptions = {
name: '撤销',
@ -64,9 +64,12 @@ export function initCommonDrawApp(app: IDrawApp) {
app.on('destroy', async () => {});
}
export function loadCommonDrawDatas(
storage: iscsGraphicData.IscsGraphicStorage
): GraphicData[] {
interface ICommonStorage {
arrows: iscsGraphicData.Arrow[];
iscsTexts: iscsGraphicData.IscsText[];
canvas: iscsGraphicData.Canvas;
}
export function loadCommonDrawDatas(storage: ICommonStorage): GraphicData[] {
const datas: GraphicData[] = [];
console.log(storage, 'storage');
storage.arrows.forEach((arrow) => {
@ -78,8 +81,7 @@ export function loadCommonDrawDatas(
return datas;
}
export function saveCommonDrawDatas(app: IDrawApp) {
const storage = new iscsGraphicData.IscsGraphicStorage();
export function saveCommonDrawDatas(app: IDrawApp, storage: ICommonStorage) {
const canvasData = app.canvas.saveData();
storage.canvas = new iscsGraphicData.Canvas({
width: canvasData.width,

15
src/drawApp/drawApp.ts
View File

@ -1,4 +1,3 @@
// import { fromUint8Array } from 'js-base64';
import {
CombinationKey,
IDrawApp,
@ -9,7 +8,6 @@ import {
} from 'jl-graphic';
import { useDrawStore } from 'src/stores/draw-store';
import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
import { toStorageTransform } from './graphics/GraphicDataBase';
import { fromUint8Array } from 'js-base64';
import {
initCommonDrawApp,
@ -73,14 +71,11 @@ export async function loadDrawDatas(): Promise<IGraphicStorage> {
}
export function saveDrawDatas(app: IDrawApp) {
const storage = saveCommonDrawDatas(app);
const canvasData = app.canvas.saveData();
storage.canvas = new iscsGraphicData.Canvas({
width: canvasData.width,
height: canvasData.height,
backgroundColor: canvasData.backgroundColor,
viewportTransform: toStorageTransform(canvasData.viewportTransform),
});
let storage = new iscsGraphicData.IscsGraphicStorage();
storage = saveCommonDrawDatas(
app,
storage
) as iscsGraphicData.IscsGraphicStorage;
const graphics = app.queryStore.getAllGraphics();
/* graphics.forEach((g) => {
if (TrackSection.Type === g.type) {

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

@ -5,8 +5,10 @@ import { CCTVGraphicData } from 'src/protos/cctv_graphic_data';
import { Assets, Sprite, Spritesheet, Texture } from 'pixi.js';
interface CCTVButtonTextures {
redBtn: Texture;
greenBtn: Texture;
rectPressBtn: Texture;
rectBtn: Texture;
monitorBtn: Texture;
semicircleBtn: Texture;
}
export interface ICCTVButtonData extends GraphicData {
@ -26,7 +28,7 @@ export class CCTVButton extends JlGraphic {
super(CCTVButton.Type);
this.cctvButtonTextures = cctvButtonTextures;
this._cctvButton = new Sprite();
this._cctvButton.texture = this.cctvButtonTextures.redBtn;
this._cctvButton.texture = this.cctvButtonTextures.rectBtn;
this._cctvButton.anchor.set(0.5);
this.addChild(this._cctvButton);
}
@ -38,8 +40,15 @@ export class CCTVButton extends JlGraphic {
}
doRepaint(): void {
this._cctvButton.rotation = 0;
this._cctvButton.texture = this.cctvButtonTextures.redBtn;
if (this.datas.buttonType == CCTVGraphicData.CCTVButton.ButtonType.rect) {
this._cctvButton.texture = this.cctvButtonTextures.rectBtn;
} else if (
this.datas.buttonType == CCTVGraphicData.CCTVButton.ButtonType.monitor
) {
this._cctvButton.texture = this.cctvButtonTextures.monitorBtn;
} else {
this._cctvButton.texture = this.cctvButtonTextures.semicircleBtn;
}
}
}
@ -62,8 +71,10 @@ export class CCTVButtonTemplate extends JlGraphicTemplate<CCTVButton> {
const cctvButtonSheet = new Spritesheet(texture, CCTV_Button_JSON);
const result = await cctvButtonSheet.parse();
this.cctvButtonTextures = {
redBtn: result['rect-press-btn.png'],
greenBtn: result['rect-btn.png'],
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;
}

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

@ -15,6 +15,22 @@
"spriteSourceSize": { "x": 0, "y": 0, "w": 74, "h": 66 },
"sourceSize": { "w": 74, "h": 66 },
"anchor": { "x": 0.5, "y": 0.5 }
},
"monitor-btn.png": {
"frame": { "x": 148, "y": 0, "w": 74, "h": 66 },
"rotated": false,
"trimmed": false,
"spriteSourceSize": { "x": 0, "y": 0, "w": 74, "h": 66 },
"sourceSize": { "w": 74, "h": 66 },
"anchor": { "x": 0.5, "y": 0.5 }
},
"semicircle-btn.png": {
"frame": { "x": 230, "y": 0, "w": 66, "h": 66 },
"rotated": false,
"trimmed": false,
"spriteSourceSize": { "x": 0, "y": 0, "w": 66, "h": 66 },
"sourceSize": { "w": 66, "h": 66 },
"anchor": { "x": 0.5, "y": 0.5 }
}
},
"meta": {

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

4
src/layouts/CCTVDrawLayout.vue
View File

@ -112,6 +112,8 @@ import { successNotify } from 'src/utils/CommonNotify';
import { useQuasar } from 'quasar';
import { useCCTVDrawStore } from 'src/stores/cctv-draw-store';
import { CCTVButton } from 'src/graphics/CCTV/cctvButton/CCTVButton';
import { Arrow } from 'src/graphics/arrow/Arrow';
import { TextContent } from 'src/graphics/textContent/TextContent';
const $q = useQuasar();
@ -197,7 +199,7 @@ onMounted(() => {
} else {
drawStore.setDraftId(null);
}
const drawAssistantsTypes = [CCTVButton.Type];
const drawAssistantsTypes = [Arrow.Type,TextContent.Type,CCTVButton.Type];
drawAssistantsTypes.forEach((type) => {
const drawAssistant = drawStore.getDrawApp().getDrawAssistant(type);
if (drawAssistant) {

51
src/protos/cctv_graphic_data.ts
View File

@ -11,9 +11,11 @@ export namespace CCTVGraphicData {
constructor(data?: any[] | {
canvas?: dependency_1.iscsGraphicData.Canvas;
cctvButtons?: CCTVButton[];
arrows?: dependency_1.iscsGraphicData.Arrow[];
iscsTexts?: dependency_1.iscsGraphicData.IscsText[];
}) {
super();
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2], this.#one_of_decls);
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3, 4], this.#one_of_decls);
if (!Array.isArray(data) && typeof data == "object") {
if ("canvas" in data && data.canvas != undefined) {
this.canvas = data.canvas;
@ -21,6 +23,12 @@ export namespace CCTVGraphicData {
if ("cctvButtons" in data && data.cctvButtons != undefined) {
this.cctvButtons = data.cctvButtons;
}
if ("arrows" in data && data.arrows != undefined) {
this.arrows = data.arrows;
}
if ("iscsTexts" in data && data.iscsTexts != undefined) {
this.iscsTexts = data.iscsTexts;
}
}
}
get canvas() {
@ -38,9 +46,23 @@ export namespace CCTVGraphicData {
set cctvButtons(value: CCTVButton[]) {
pb_1.Message.setRepeatedWrapperField(this, 2, value);
}
get arrows() {
return pb_1.Message.getRepeatedWrapperField(this, dependency_1.iscsGraphicData.Arrow, 3) as dependency_1.iscsGraphicData.Arrow[];
}
set arrows(value: dependency_1.iscsGraphicData.Arrow[]) {
pb_1.Message.setRepeatedWrapperField(this, 3, value);
}
get iscsTexts() {
return pb_1.Message.getRepeatedWrapperField(this, dependency_1.iscsGraphicData.IscsText, 4) as dependency_1.iscsGraphicData.IscsText[];
}
set iscsTexts(value: dependency_1.iscsGraphicData.IscsText[]) {
pb_1.Message.setRepeatedWrapperField(this, 4, value);
}
static fromObject(data: {
canvas?: ReturnType<typeof dependency_1.iscsGraphicData.Canvas.prototype.toObject>;
cctvButtons?: ReturnType<typeof CCTVButton.prototype.toObject>[];
arrows?: ReturnType<typeof dependency_1.iscsGraphicData.Arrow.prototype.toObject>[];
iscsTexts?: ReturnType<typeof dependency_1.iscsGraphicData.IscsText.prototype.toObject>[];
}): CCTVGraphicStorage {
const message = new CCTVGraphicStorage({});
if (data.canvas != null) {
@ -49,12 +71,20 @@ export namespace CCTVGraphicData {
if (data.cctvButtons != null) {
message.cctvButtons = data.cctvButtons.map(item => CCTVButton.fromObject(item));
}
if (data.arrows != null) {
message.arrows = data.arrows.map(item => dependency_1.iscsGraphicData.Arrow.fromObject(item));
}
if (data.iscsTexts != null) {
message.iscsTexts = data.iscsTexts.map(item => dependency_1.iscsGraphicData.IscsText.fromObject(item));
}
return message;
}
toObject() {
const data: {
canvas?: ReturnType<typeof dependency_1.iscsGraphicData.Canvas.prototype.toObject>;
cctvButtons?: ReturnType<typeof CCTVButton.prototype.toObject>[];
arrows?: ReturnType<typeof dependency_1.iscsGraphicData.Arrow.prototype.toObject>[];
iscsTexts?: ReturnType<typeof dependency_1.iscsGraphicData.IscsText.prototype.toObject>[];
} = {};
if (this.canvas != null) {
data.canvas = this.canvas.toObject();
@ -62,6 +92,12 @@ export namespace CCTVGraphicData {
if (this.cctvButtons != null) {
data.cctvButtons = this.cctvButtons.map((item: CCTVButton) => item.toObject());
}
if (this.arrows != null) {
data.arrows = this.arrows.map((item: dependency_1.iscsGraphicData.Arrow) => item.toObject());
}
if (this.iscsTexts != null) {
data.iscsTexts = this.iscsTexts.map((item: dependency_1.iscsGraphicData.IscsText) => item.toObject());
}
return data;
}
serialize(): Uint8Array;
@ -72,6 +108,10 @@ export namespace CCTVGraphicData {
writer.writeMessage(1, this.canvas, () => this.canvas.serialize(writer));
if (this.cctvButtons.length)
writer.writeRepeatedMessage(2, this.cctvButtons, (item: CCTVButton) => item.serialize(writer));
if (this.arrows.length)
writer.writeRepeatedMessage(3, this.arrows, (item: dependency_1.iscsGraphicData.Arrow) => item.serialize(writer));
if (this.iscsTexts.length)
writer.writeRepeatedMessage(4, this.iscsTexts, (item: dependency_1.iscsGraphicData.IscsText) => item.serialize(writer));
if (!w)
return writer.getResultBuffer();
}
@ -87,6 +127,12 @@ export namespace CCTVGraphicData {
case 2:
reader.readMessage(message.cctvButtons, () => pb_1.Message.addToRepeatedWrapperField(message, 2, CCTVButton.deserialize(reader), CCTVButton));
break;
case 3:
reader.readMessage(message.arrows, () => pb_1.Message.addToRepeatedWrapperField(message, 3, dependency_1.iscsGraphicData.Arrow.deserialize(reader), dependency_1.iscsGraphicData.Arrow));
break;
case 4:
reader.readMessage(message.iscsTexts, () => pb_1.Message.addToRepeatedWrapperField(message, 4, dependency_1.iscsGraphicData.IscsText.deserialize(reader), dependency_1.iscsGraphicData.IscsText));
break;
default: reader.skipField();
}
}
@ -218,7 +264,8 @@ export namespace CCTVGraphicData {
export namespace CCTVButton {
export enum ButtonType {
rect = 0,
monitor = 1
monitor = 1,
semicircle = 2
}
}
}