kfb-view 2.3.8 → 2.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kfb-view",
   "description": "一个在线kfb的阅片软件",
-  "version": "2.3.8",
+  "version": "2.4.0",
   "author": "qifeng.fan <qifeng.fan@hzztai.com>",
   "license": "MIT",
   "main": "lib/kfb-view.js",

package/src/components/shape/index.js

@@ -1,4 +1,5 @@
 import {
+  HAS_NO_FILL_TYPES,
   HAS_REGION_TYPES, IMAGE,
   MARKS, POINT_TYPES, POLYGON, REGION_TYPES,
 } from '../../const/mark';
@@ -51,8 +52,12 @@ export class Shape extends ViewerCommon {
     this.clearCanvas();
     const bounds = this.viewport.viewportToImageRectangle(
       this.viewport.getBounds());
-    // 区域标注列表
+    // strokeStyle, lineWidth, fillStyle 相同认为是一个路径下的图形，一起绘制，优化性能
+    const sameFixWidthLabel = {}; // star, flag, star, font lineWidth固定为2
+    const sameNormalLabel = {};
     const regionLabelList = [];
+    const imageLabel = [];
+    // 区域标注列表
     const labelList = this.labelList.filter((item) => {
       if (item.show === false) return false;
       if (!this[item.tool]) return false;
@@ -64,18 +69,9 @@ export class Shape extends ViewerCommon {
           child: [],
           self: item,
         });
-      }
-      return true;
-    });
-    // strokeStyle, lineWidth, fillStyle 相同认为是一个路径下的图形，一起绘制，优化性能
-    const sameFixWidthLabel = {}; // star, flag, star, font lineWidth固定为2
-    const sameNormalLabel = {};
-    const imageLabel = [];
-    labelList.forEach((item) => {
-      item.viewerElementPoints = this.imageToViewerElementPoints(item.points);
-      if (item.tool === IMAGE) {
+      } else if (item.tool === IMAGE) {
         imageLabel.push(item);
-        return;
+        return false;
       }
       const key = `${item.strokeStyle ?? ''}_${item.lineWidth ??
       ''}_${item.fillStyle ?? ''}`;
@@ -93,35 +89,28 @@ export class Shape extends ViewerCommon {
           sameNormalLabel[regionKey] = [item];
         }
       }
-      const parent = regionLabelList.find(
-        (parent) => HAS_REGION_TYPES.includes(parent.tool) && parent.self !==
-          item && item.points.every(
-            (point) => this.isContainerInRegion(point, parent)));
-      if (parent) {
-        parent.child.push(item);
-      }
+      return !HAS_NO_FILL_TYPES.includes(item.tool);
     });
+    if (regionLabelList.length > 0) {
+      labelList.forEach((item) => {
+        const parent = regionLabelList.find(
+          (label) => label.self !== item && item.points.every(
+            (point) => this.isContainerInRegion(point, label)));
+        if (parent) {
+          parent.child.push(item);
+        }
+      });
+    }
     if (this.delaytimer) {
       clearTimeout(this.delaytimer);
       this.delaytimer = undefined;
     }
-    this.deepDrawLabel(sameFixWidthLabel, sameNormalLabel, 1, bounds);
-    regionLabelList.forEach((item) => {
-      this.combination.setContent(this.canvas, item);
-      this.combination.draw({
-        points: item.viewerElementPoints,
-        tool: item.tool,
-      }, item.child.map(({viewerElementPoints, tool}) => ({
-        points: viewerElementPoints,
-        tool,
-      })), this.viewport.getRotation());
-    });
-    imageLabel.forEach((item) => {
-      this.drawLabel(item);
-    });
+    this.deepDrawLabel(sameFixWidthLabel, sameNormalLabel, regionLabelList,
+      imageLabel, 1, bounds);
   }
 
-  deepDrawLabel(sameFixWidthLabel, sameNormalLabel, count, bounds) {
+  deepDrawLabel(sameFixWidthLabel, sameNormalLabel, regionLabelList,
+                imageLabel, count, bounds) {
     let currentDrawCount = 0; // 当前已绘制数量
     const ctx = this.canvas.getContext('2d');
     const remainFixLabel = {};
@@ -129,7 +118,7 @@ export class Shape extends ViewerCommon {
       const labels = sameFixWidthLabel[key];
       ctx.beginPath();
       labels.forEach((item) => {
-        if (currentDrawCount >= 5000) { // 一次最多绘制5000个标注，多余标注延迟绘制
+        if (currentDrawCount >= 2000) { // 一次最多绘制2000个标注，多余标注延迟绘制
           if (remainFixLabel[key]) {
             remainFixLabel[key].push(item);
           } else {
@@ -153,7 +142,7 @@ export class Shape extends ViewerCommon {
       const labels = sameNormalLabel[key];
       ctx.beginPath();
       labels.forEach((item) => {
-        if (currentDrawCount >= 5000) { // 一次最多绘制5000个标注，多余标注延迟绘制
+        if (currentDrawCount >= 2000) { // 一次最多绘制2000个标注，多余标注延迟绘制
           if (remainNormalLabel[key]) {
             remainNormalLabel[key].push(item);
           } else {
@@ -173,15 +162,30 @@ export class Shape extends ViewerCommon {
       Object.keys(remainNormalLabel).length === 0) {
       console.log(`end deep draw label, draw count: ${count}`);
       this.delaytimer = undefined;
+      imageLabel.forEach((item) => {
+        this.drawLabel(item);
+      });
+      regionLabelList.forEach((item) => {
+        this.combination.setContent(this.canvas, item);
+        this.combination.draw({
+          points: item.viewerElementPoints,
+          tool: item.tool,
+        }, item.child.map(({viewerElementPoints, tool}) => ({
+          points: viewerElementPoints,
+          tool,
+        })), this.viewport.getRotation());
+      });
     } else {
       this.delaytimer = setTimeout(() => {
-        this.deepDrawLabel(remainFixLabel, remainNormalLabel, count + 1,
+        this.deepDrawLabel(remainFixLabel, remainNormalLabel, regionLabelList,
+          imageLabel, count + 1,
           bounds);
       }, 100);
     }
   }
 
   drawLabel(item) {
+    item.viewerElementPoints = this.imageToViewerElementPoints(item.points);
     const points = item.viewerElementPoints;
     this[item.tool].setContent(this.canvas, item);
     if (REGION_TYPES.includes(item.tool)) {

package/src/const/mark.js

@@ -15,6 +15,7 @@ export const REGION_TYPES = [RECTANGLE, ELLIPSE];
 export const LINE_TYPES = [LINE, ARROW, BILATERAL];
 export const NO_NORMAL_REGION_TYPES = [POLYGON, FONT, STAR, FLAG, DOT];
 export const HAS_REGION_TYPES = [...REGION_TYPES, POLYGON];
+export const HAS_NO_FILL_TYPES = [...LINE_TYPES, FONT, FLAG, IMAGE];
 export const MARKS = [
   LINE,
   ARROW,

package/src/view.js

@@ -331,7 +331,8 @@ function initEvent(kv) {
       kv.tailoring.onCanvasDrag(e.position);
     } else if (kv.area?.movePoint) {
       kv.area.onCanvasDrag(e.position, e);
-      kv.change();
+      kv.area.change();
+      kv?.shape?.change?.();
     }
   });
   kv.viewer.addHandler('canvas-release', (e) => {