Merge branch 'master' of https://git.code.tencent.com/jl-framework/graphic-pixi

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,

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;
+    // },
   });
 
   // 画布右键菜单

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) {

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<GraphicAppEvents> {
    */
   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<GraphicAppEvents> {
    * 删除图形
    * @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;
   }
 
   /**

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<string, JlGraphic>();
     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<T extends JlGraphic>(
     code: string,
     type: string

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);
   }
 

src/layouts/DrawLayout.vue

@@ -120,6 +120,7 @@
 </template>
 
 <script setup lang="ts">
+import { Base64 } from 'js-base64';
 import { useQuasar } from 'quasar';
 import DrawProperties from 'src/components/draw-app/DrawProperties.vue';
 import { getDrawApp, loadDrawDatas } from 'src/examples/app';
@@ -157,6 +158,9 @@ function toggleFullscreen(e: unknown): void {
 
 onMounted(() => {
   console.log('绘制应用layout mounted');
+
+  const basic = Base64.decode('Zm9vOmJhcg==');
+  console.log(basic);
   const dom = document.getElementById('draw-app-container');
   if (dom) {
     const drawApp = drawStore.initDrawApp(dom);