kfb-view 2.3.9 → 2.4.1

package/package.json

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

package/src/components/common/common.js

@@ -60,8 +60,8 @@ export class ViewerCommon extends EventEmitter {
       {x: rect.x + rect.width, y: rect.y + rect.height})[4];
   }
 
-  moveToLabel(point) {
-    this.viewport.panTo(new Point(point.x, point.y), false);
+  moveToLabel(point, flag = false) {
+    this.viewport.panTo(new Point(point.x, point.y), flag);
   }
 
   /**

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,14 +89,18 @@ 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;
@@ -118,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 {
@@ -142,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 {
@@ -162,6 +162,9 @@ 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({
@@ -172,9 +175,6 @@ export class Shape extends ViewerCommon {
           tool,
         })), this.viewport.getRotation());
       });
-      imageLabel.forEach((item) => {
-        this.drawLabel(item);
-      });
     } else {
       this.delaytimer = setTimeout(() => {
         this.deepDrawLabel(remainFixLabel, remainNormalLabel, regionLabelList,
@@ -185,6 +185,7 @@ export class Shape extends ViewerCommon {
   }
 
   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/components/tailoring/index.js

@@ -110,10 +110,12 @@ export class Tailoring extends ViewerCommon {
     ctx.beginPath();
     ctx.fillStyle = this.color;
     ctx.font = '18px Arial';
+    const width = (rightTop.x - leftTop.x).toFixed(2) / 1;
+    const height = (rightBottom.y - rightTop.y).toFixed(2) / 1;
     ctx.fillText(
       this.contents?.[2] ?
-        this.contents[2](rightTop.x - leftTop.x, rightBottom.y - rightTop.y) :
-        (`区域大小为：${rightTop.x - leftTop.x}*${rightBottom.y - rightTop.y}`),
+        this.contents[2](width, height) :
+        (`区域大小为：${width}*${height}`),
       leftTop.x, leftTop.y - 50);
     ctx.fillText(this.contents?.[0] ?? `双击区域内表示完成截图`, leftTop.x,
       leftTop.y - 30);

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