diff --git a/src/drawApp/ibpDrawApp.ts b/src/drawApp/ibpDrawApp.ts index 0dcbad5..81bc9cc 100644 --- a/src/drawApp/ibpDrawApp.ts +++ b/src/drawApp/ibpDrawApp.ts @@ -1,6 +1,12 @@ import { fromUint8Array, toUint8Array } from 'js-base64'; import { getDraft, saveDraft } from 'src/api/DraftApi'; -import { GraphicData, IDrawApp, newDrawApp } from 'src/jl-graphic'; +import { + CombinationKey, + GraphicData, + IDrawApp, + KeyListener, + newDrawApp, +} from 'src/jl-graphic'; import { ibpGraphicData } from 'src/protos/ibpGraphics'; import { useIBPDrawStore } from 'src/stores/ibp-draw-store'; import { IBPButtonData } from './graphics/IBPButtonInteraction'; @@ -24,8 +30,32 @@ import { ArrowDraw } from 'src/graphics/arrow/ArrowDrawAssistant'; import { ArrowData } from './graphics/ArrowInteraction'; import { TextContentDraw } from 'src/graphics/textContent/TextContentDrawAssistant'; import { IbpTextData } from './graphics/IbpTextInteraction'; +import { MenuItemOptions } from 'src/jl-graphic/ui/Menu'; +import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu'; +import { savePslDrawToServer } from './pslApp'; 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 getIBPDrawApp(): IDrawApp | null { return drawApp; @@ -35,6 +65,7 @@ export function initIBPDrawApp() { drawApp = newDrawApp({ dataLoader: IBPDrawDataLoader, }); + const app = drawApp; new IBPButtonDrawAssistant( drawApp, @@ -44,6 +75,34 @@ export function initIBPDrawApp() { new IbpKeyDraw(drawApp, new IbpKeyTemplate(new IbpKeyData())); new ArrowDraw(drawApp, new ArrowTemplate(new ArrowData())); new TextContentDraw(drawApp, new TextContentTemplate(new IbpTextData())); + // 画布右键菜单 + drawApp.registerMenu(DefaultCanvasMenu); + drawApp.canvas.on('_rightclick', (e) => { + if (app.drawing) return; + UndoOptions.disabled = !app.opRecord.hasUndo; + RedoOptions.disabled = !app.opRecord.hasRedo; + + UndoOptions.handler = () => { + app.opRecord.undo(); + }; + RedoOptions.handler = () => { + app.opRecord.redo(); + }; + SelectAllOptions.handler = () => { + app.selectAllGraphics(); + }; + DefaultCanvasMenu.open(e.global); + }); + app.addKeyboardListener( + new KeyListener({ + value: 'KeyS', + global: true, + combinations: [CombinationKey.Ctrl], + onPress: () => { + saveIBPDrawToServer(app); + }, + }) + ); return drawApp; } diff --git a/src/layouts/IBPDrawLayout.vue b/src/layouts/IBPDrawLayout.vue index 516cb11..1f93d14 100644 --- a/src/layouts/IBPDrawLayout.vue +++ b/src/layouts/IBPDrawLayout.vue @@ -7,7 +7,7 @@ import { IbpAlarm } from 'src/graphics/ibpAlarm/IbpAlarm'; import { IbpKey } from 'src/graphics/ibpKey/IbpKey'; import { Arrow } from 'src/graphics/arrow/Arrow'; import { TextContent } from 'src/graphics/textContent/TextContent'; -import { getIBPDrawApp } from 'src/drawApp/ibpDrawApp'; +import { getIBPDrawApp, saveIBPDrawToServer } from 'src/drawApp/ibpDrawApp'; import IbpDrawProperties from 'src/components/draw-app/IbpDrawProperties.vue'; const ibpDrawStore = useIBPDrawStore(); @@ -112,6 +112,13 @@ function onResize() { dom.style.height = canvasHeight.value + 'px'; } } + +function saveData() { + const app = getIBPDrawApp(); + if (app) { + saveIBPDrawToServer(app); + } +} function backConfirm() { router.go(-1); } @@ -125,7 +132,7 @@ function backConfirm() { - + 保存