diff --git a/src/components/draw-app/CCTVDrawProperties.vue b/src/components/draw-app/CCTVDrawProperties.vue index 9bf712f..b055ff0 100644 --- a/src/components/draw-app/CCTVDrawProperties.vue +++ b/src/components/draw-app/CCTVDrawProperties.vue @@ -23,8 +23,12 @@ @@ -38,6 +42,8 @@ diff --git a/src/components/draw-app/properties/IscsTextProperty.vue b/src/components/draw-app/properties/IscsTextProperty.vue index 9055c4d..2c6ffeb 100644 --- a/src/components/draw-app/properties/IscsTextProperty.vue +++ b/src/components/draw-app/properties/IscsTextProperty.vue @@ -38,13 +38,13 @@ diff --git a/src/drawApp/cctvApp.ts b/src/drawApp/cctvApp.ts index 2aa9e80..7e7a2ad 100644 --- a/src/drawApp/cctvApp.ts +++ b/src/drawApp/cctvApp.ts @@ -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 { - 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); -} diff --git a/src/drawApp/commonApp.ts b/src/drawApp/commonApp.ts index 5fa1431..78fe8cf 100644 --- a/src/drawApp/commonApp.ts +++ b/src/drawApp/commonApp.ts @@ -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, diff --git a/src/drawApp/drawApp.ts b/src/drawApp/drawApp.ts index f952af4..ba8e5ea 100644 --- a/src/drawApp/drawApp.ts +++ b/src/drawApp/drawApp.ts @@ -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 { } 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) { diff --git a/src/graphics/CCTV/cctvButton/CCTVButton.ts b/src/graphics/CCTV/cctvButton/CCTVButton.ts index 7566bca..7ae3f2f 100644 --- a/src/graphics/CCTV/cctvButton/CCTVButton.ts +++ b/src/graphics/CCTV/cctvButton/CCTVButton.ts @@ -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 { 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; } diff --git a/src/graphics/CCTV/cctvButton/cctv-button-data.json b/src/graphics/CCTV/cctvButton/cctv-button-data.json index dd6250c..e3c17dd 100644 --- a/src/graphics/CCTV/cctvButton/cctv-button-data.json +++ b/src/graphics/CCTV/cctvButton/cctv-button-data.json @@ -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": { diff --git a/src/graphics/CCTV/cctvButton/cctv-button-spritesheet.png b/src/graphics/CCTV/cctvButton/cctv-button-spritesheet.png index 769409d..b1c9720 100644 Binary files a/src/graphics/CCTV/cctvButton/cctv-button-spritesheet.png and b/src/graphics/CCTV/cctvButton/cctv-button-spritesheet.png differ diff --git a/src/layouts/CCTVDrawLayout.vue b/src/layouts/CCTVDrawLayout.vue index 1bde02b..5166bec 100644 --- a/src/layouts/CCTVDrawLayout.vue +++ b/src/layouts/CCTVDrawLayout.vue @@ -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) { diff --git a/src/protos/cctv_graphic_data.ts b/src/protos/cctv_graphic_data.ts index 700fb76..35147fe 100644 --- a/src/protos/cctv_graphic_data.ts +++ b/src/protos/cctv_graphic_data.ts @@ -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; cctvButtons?: ReturnType[]; + arrows?: ReturnType[]; + iscsTexts?: ReturnType[]; }): 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; cctvButtons?: ReturnType[]; + arrows?: ReturnType[]; + iscsTexts?: ReturnType[]; } = {}; 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 } } }