From a2c0bceb2d6431af58e84d9f048ddf535f1eac09 Mon Sep 17 00:00:00 2001 From: joylink_zhaoerwei Date: Fri, 1 Sep 2023 09:49:16 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E7=BB=98=E5=88=B6=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/drawApp/index.ts | 76 +++++++++++++++----------------------- src/layouts/DrawLayout.vue | 70 +++++++++++++++++++++++------------ src/stores/draw-store.ts | 10 ++--- 3 files changed, 80 insertions(+), 76 deletions(-) diff --git a/src/drawApp/index.ts b/src/drawApp/index.ts index 86ddb8c..14978ea 100644 --- a/src/drawApp/index.ts +++ b/src/drawApp/index.ts @@ -7,10 +7,11 @@ import { Signal, SignalTemplate } from 'src/graphics/signal/Signal'; import { SignalDraw } from 'src/graphics/signal/SignalDrawAssistant'; import { CombinationKey, - GraphicApp, GraphicData, - JlDrawApp, + IDrawApp, KeyListener, + newDrawApp, + IGraphicStorage, } from 'src/jl-graphic'; import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu'; import { MenuItemOptions } from 'src/jl-graphic/ui/Menu'; @@ -120,7 +121,7 @@ import { FederatedMouseEvent } from 'pixi.js'; // }); // } -function constructMenu(app: JlDrawApp): (e: FederatedMouseEvent) => void { +function constructMenu(app: IDrawApp): (e: FederatedMouseEvent) => void { const UndoOptions: MenuItemOptions = { name: '撤销', }; @@ -203,9 +204,9 @@ function constructMenu(app: JlDrawApp): (e: FederatedMouseEvent) => void { }; return handleRightClick; } -let drawApp: JlDrawApp | null = null; +let drawApp: IDrawApp | null = null; -export function getDrawApp(): JlDrawApp | null { +export function getDrawApp(): IDrawApp | null { return drawApp; } @@ -216,35 +217,18 @@ export function destroyDrawApp(): void { } } -export function initDrawApp(dom: HTMLElement): JlDrawApp { - drawApp = new JlDrawApp(dom); +export function initDrawApp(): IDrawApp { + drawApp = newDrawApp({ + dataLoader: loadDrawDatas, + }); const app = drawApp; //根据草稿图类型加载绘图工具 - let drawAssistants: ( - | PlatformDraw - | StationDraw - | SignalDraw - | TurnoutDraw - | RunLineDraw - | SectionDraw - | LogicSectionDraw - | StationLineDraw - | RectDraw - | TrainLineDraw - | PathLineDraw - | TrainWindowDraw - | TrainDraw - | OneClickGenerateDraw - | AxleCountingDraw - | SeparatorDraw - )[] = []; const draftType = useDrawStore().$state.draftType; if (draftType === 'Line') { - drawAssistants = [ - new PlatformDraw( - app, - new PlatformTemplate(new PlatformData(), new PlatformState()) - ), + new PlatformDraw( + app, + new PlatformTemplate(new PlatformData(), new PlatformState()) + ), new StationDraw( app, new StationTemplate(new StationData(), new StationState()) @@ -273,11 +257,9 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp { new AxleCountingTemplate(new AxleCountingData()) ), new SeparatorDraw(app, new SeparatorTemplate(new SeparatorData())), - ]; - DrawSignalInteraction.init(app); + DrawSignalInteraction.init(app); } else { - drawAssistants = [ - new StationLineDraw(app, new StationLineTemplate(new StationLineData())), + new StationLineDraw(app, new StationLineTemplate(new StationLineData())), new RectDraw(app, new RectTemplate(new RectData())), new RunLineDraw(app, new RunLineTemplate(new RunLineData())), new TrainLineDraw( @@ -285,14 +267,11 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp { new ItrainLineTemplate(new TrainLineData(), new TrainLineState()) ), new PathLineDraw(app, new PathLineTemplate(new PathLineData())), - ]; - DrawRunLinePlugin.init(app); + DrawRunLinePlugin.init(app); } - - app.setOptions({ drawAssistants: drawAssistants }); const handleRIghtClick = constructMenu(app); app.canvas.on('_rightclick', (e) => { - if (app._drawing) return; + if (app.drawing) return; handleRIghtClick(e); }); app.addKeyboardListener( @@ -308,7 +287,7 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp { return drawApp; } -export function saveDrawToServer(app: JlDrawApp) { +export function saveDrawToServer(app: IDrawApp) { const base64 = saveDrawDatas(app); const drawStore = useDrawStore(); const id = drawStore.draftId; @@ -325,7 +304,7 @@ export function saveDrawToServer(app: JlDrawApp) { } // const StorageKey = 'graphic-storage'; -export function saveDrawDatas(app: JlDrawApp) { +export function saveDrawDatas(app: IDrawApp) { const storage = new graphicData.RtssGraphicStorage(); const canvasData = app.canvas.saveData(); storage.canvas = new graphicData.Canvas({ @@ -393,14 +372,14 @@ export function saveDrawDatas(app: JlDrawApp) { return base64; } -export async function loadDrawDatas(app: GraphicApp) { +export async function loadDrawDatas(): Promise { // localStorage.removeItem(StorageKey); // const base64 = localStorage.getItem(StorageKey); // console.log('加载数据', base64); const drawStore = useDrawStore(); const id = drawStore.draftId; if (!id) { - return; + throw new Error('获取数据异常：未获取到草稿地图ID'); } const { proto: base64 } = await getDraft(id); if (base64) { @@ -408,7 +387,6 @@ export async function loadDrawDatas(app: GraphicApp) { toUint8Array(base64) ); console.log('加载数据', storage); - app.updateCanvas(storage.canvas); const datas: GraphicData[] = []; storage.links.forEach((link) => { datas.push(new LinkData(link)); @@ -461,8 +439,12 @@ export async function loadDrawDatas(app: GraphicApp) { storage.trainWindows.forEach((trainWindow) => { datas.push(new TrainWindowData(trainWindow)); }); - app.loadGraphic(datas); - } else { - app.loadGraphic([]); + return Promise.resolve({ + canvasProperty: storage.canvas, + datas: datas, + }); } + return Promise.resolve({ + datas: [], + }); } diff --git a/src/layouts/DrawLayout.vue b/src/layouts/DrawLayout.vue index 9b64769..419f805 100644 --- a/src/layouts/DrawLayout.vue +++ b/src/layouts/DrawLayout.vue @@ -173,13 +173,8 @@