diff --git a/src/components/draw-app/properties/CanvasProperty.vue b/src/components/draw-app/properties/CanvasProperty.vue index e5d4f11..74ac95b 100644 --- a/src/components/draw-app/properties/CanvasProperty.vue +++ b/src/components/draw-app/properties/CanvasProperty.vue @@ -58,19 +58,13 @@ const canvas = reactive({ }); onMounted(() => { - console.log('画布属性表单mounted'); const jc = drawStore.getJlCanvas(); canvas.width = jc.properties.width; canvas.height = jc.properties.height; canvas.backgroundColor = jc.properties.backgroundColor; }); -onUnmounted(() => { - console.log('画布属性表单unmounted'); -}); - function onUpdate() { - console.log('画布属性更新'); const app = drawStore.getDrawApp(); app.updateCanvasAndRecord({ ...canvas, diff --git a/src/examples/app/index.ts b/src/examples/app/index.ts index d0a0572..5327f78 100644 --- a/src/examples/app/index.ts +++ b/src/examples/app/index.ts @@ -32,6 +32,7 @@ import { StationData } from './graphics/StationInteraction'; import { SignalData } from './graphics/SignalInteraction'; import { TrainData } from './graphics/TrainInteraction'; import { graphicData } from './protos/draw_data_storage'; +import { Notify } from 'quasar'; export function fromStoragePoint(p: graphicData.Point): Point { return new Point(p.x, p.y); @@ -113,6 +114,17 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp { return new TrainData(); }), ], + // isSupportDeletion: (g): boolean => { + // if (g.type === Signal.Type) { + // Notify.create({ + // type: 'warning', + // message: '信号机不支持删除', + // timeout: 1000, + // }); + // return false; + // } + // return true; + // }, }); // 画布右键菜单 diff --git a/src/jlgraphic/app/JlDrawApp.ts b/src/jlgraphic/app/JlDrawApp.ts index 8a1bfa2..79f1071 100644 --- a/src/jlgraphic/app/JlDrawApp.ts +++ b/src/jlgraphic/app/JlDrawApp.ts @@ -456,13 +456,13 @@ export class JlDrawApp extends GraphicApp { * 删除选中图形对象 */ deleteSelectedGraphics() { - const deletes = this.selectedGraphics.slice( - 0, - this.selectedGraphics.length - ); - this.deleteGraphics(...this.selectedGraphics); - // 删除图形对象操作记录 - this.opRecord.record(new GraphicDeleteOperation(this, deletes)); + const deletes = this.deleteGraphics(...this.selectedGraphics); + if (deletes.length > 0) { + // 删除图形对象操作记录 + this.opRecord.record(new GraphicDeleteOperation(this, deletes)); + } else { + console.debug('没有删除元素,不记录'); + } } updateCanvasAndRecord(data: ICanvasProperties) { diff --git a/src/jlgraphic/app/JlGraphicApp.ts b/src/jlgraphic/app/JlGraphicApp.ts index c2b0af8..5cf08f3 100644 --- a/src/jlgraphic/app/JlGraphicApp.ts +++ b/src/jlgraphic/app/JlGraphicApp.ts @@ -320,6 +320,11 @@ export interface IGraphicAppConfig { * 超出屏幕显示范围是否剪裁,默认true */ cullable?: boolean; + + /** + * 是否支持删除操作 + */ + isSupportDeletion?: (g: JlGraphic) => boolean; } /** @@ -528,7 +533,10 @@ export class GraphicApp extends EventEmitter { */ handleGraphicStates(graphicStates: GraphicState[]) { graphicStates.forEach((state) => { - const list = this.queryStore.queryByIdOrCode(state.code); + const list = this.queryStore.queryByIdOrCodeAndType( + state.code, + state.graphicType + ); if (list.length == 0) { const template = this.getGraphicTemplatesByType(state.graphicType); const g = template.new(); @@ -726,8 +734,19 @@ export class GraphicApp extends EventEmitter { * 删除图形 * @param graphics 图形对象 */ - deleteGraphics(...graphics: JlGraphic[]) { - graphics.forEach((g) => this.doDeleteGraphics(g)); + deleteGraphics(...graphics: JlGraphic[]): JlGraphic[] { + const dels = graphics.filter((g) => { + if ( + this._options?.isSupportDeletion == undefined || + this._options.isSupportDeletion(g) + ) { + this.doDeleteGraphics(g); + return true; + } + console.debug(`type=${g.type},id=${g.id}的图形不支持删除`); + return false; + }); + return dels; } /** diff --git a/src/jlgraphic/core/GraphicStore.ts b/src/jlgraphic/core/GraphicStore.ts index 979bd20..23e8889 100644 --- a/src/jlgraphic/core/GraphicStore.ts +++ b/src/jlgraphic/core/GraphicStore.ts @@ -37,6 +37,12 @@ export interface GraphicQueryStore { * @param v */ queryByIdOrCode(v: string): JlGraphic[]; + /** + * 根据id或code及类型查询图形 + * @param v + * @param type + */ + queryByIdOrCodeAndType(v: string, type: string): JlGraphic[]; /** * 根据code和类型获取图形 * @param code @@ -69,6 +75,7 @@ export class GraphicStore implements GraphicQueryStore { this.store = new Map(); this.relationManage = new RelationManage(app); } + /** * 获取所有图形对象 */ @@ -125,6 +132,15 @@ export class GraphicStore implements GraphicQueryStore { }); return list; } + queryByIdOrCodeAndType(s: string, type: string): JlGraphic[] { + const list: JlGraphic[] = []; + this.store.forEach((g) => { + if (g.isIdOrCode(s) && g.type === type) { + list.push(g); + } + }); + return list; + } queryByCodeAndType( code: string, type: string diff --git a/src/jlgraphic/plugins/GraphicEditPlugin.ts b/src/jlgraphic/plugins/GraphicEditPlugin.ts index 9b1cc5b..c93631a 100644 --- a/src/jlgraphic/plugins/GraphicEditPlugin.ts +++ b/src/jlgraphic/plugins/GraphicEditPlugin.ts @@ -32,13 +32,13 @@ export abstract class GraphicEditPlugin< this.sortableChildren = true; this.graphic.on('transformstart', this.hideAll, this); this.graphic.on('transformend', this.showAll, this); - this.graphic.on('repaint', this.showAll, this); + this.graphic.on('repaint', this.updateEditedPointsPosition, this); } destroy(options?: boolean | IDestroyOptions | undefined): void { this.graphic.off('transformstart', this.hideAll, this); this.graphic.off('transformend', this.showAll, this); - this.graphic.off('repaint', this.showAll, this); + this.graphic.off('repaint', this.updateEditedPointsPosition, this); super.destroy(options); } diff --git a/src/layouts/DrawLayout.vue b/src/layouts/DrawLayout.vue index a7f642f..fa1c35a 100644 --- a/src/layouts/DrawLayout.vue +++ b/src/layouts/DrawLayout.vue @@ -120,6 +120,7 @@