kfb-view 3.3.5 → 3.3.6

package/lib/kfb-view.umd.js.LICENSE.txt

@@ -1,3 +1,13 @@
+/*!
+    * ZRender, a high performance 2d drawing library.
+    *
+    * Copyright (c) 2013, Baidu Inc.
+    * All rights reserved.
+    *
+    * LICENSE
+    * https://github.com/ecomfe/zrender/blob/master/LICENSE.txt
+    */
+
 //! Built on 2024-04-01
 
 //! Git commit: v4.1.1-1-f90d9814

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kfb-view",
   "description": "一个在线kfb的阅片软件",
-  "version": "3.3.5",
+  "version": "3.3.6",
   "author": "qifeng.fan <qifeng.fan@hzztai.com>",
   "license": "MIT",
   "main": "lib/kfb-view.cjs.js",
@@ -49,6 +49,7 @@
     "axios": "^1.6.5",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^10.0.0",
+    "compression-webpack-plugin": "^6.1.2",
     "copy-webpack-plugin": "^4.5.2",
     "core-js": "^3.6.5",
     "css-loader": "^7.1.2",
@@ -57,12 +58,12 @@
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-plugin-html": "^4.0.5",
     "html-loader": "^5.1.0",
-    "html-webpack-plugin": "^5.6.3",
+    "html-webpack-plugin": "^5.6.5",
     "mini-css-extract-plugin": "^2.9.2",
-    "sass": "^1.89.1",
     "postcss-import": "^16.1.1",
     "postcss-loader": "^8.1.1",
     "rimraf": "^2.6.2",
+    "sass": "^1.89.1",
     "sass-loader": "^16.0.5",
     "style-loader": "^4.0.0",
     "terser-webpack-plugin": "^4.2.2",

package/src/components/board/index.js

@@ -167,11 +167,12 @@ export class Board extends ViewerCommon {
   onCanvasDrag(e) {
     const {x, y} = e.position;
     const point = this.viewerElementToImageCoordinates(x, y);
-    if (!this.isInROI(point)) {
-      this.points = [];
-      this.clearCanvas();
-      return;
-    }
+    //去掉限制，支持框选roi以外的
+    // if (!this.isInROI(point)) {
+    //   this.points = [];
+    //   this.clearCanvas();
+    //   return;
+    // }
     e.preventDefaultAction = true;
     const tool = this.tool;
     if (REGION_TYPES.includes(tool)) {

package/src/components/common/common.js

@@ -271,7 +271,7 @@ export class ViewerCommon {
             `${this.translate('long_axis')}：${this.getUnitNumber(a)}`,
             `${this.translate('short_axis')}：${this.getUnitNumber(b)}`,
             `${this.translate('perimeter')}：${this.getUnitNumber(4 * (a - b) + 2 * Math.PI * b)}`,
-            `${this.translate('area')}：${this.getUnitNumber(Math.PI * a * b, 2)}²`],
+            `${this.translate('area')}：${this.getUnitNumber(Math.PI * a * b / this.options.binary)}²`],
         };
       }
         break;
@@ -279,7 +279,7 @@ export class ViewerCommon {
         const w = Math.abs(endPoint.x - startPoint.x) * this.options.imageCapRes;
         const h = Math.abs(endPoint.y - startPoint.y) * this.options.imageCapRes;
         const pt = (w + h) * 2;
-        const ac = w * h;
+        const ac = w * h / this.options.binary;
         const rightTop = getRectPoint(startPoint, endPoint)[2];
         const p = this.imageToViewerElementCoordinates(rightTop.x,
           rightTop.y);
@@ -291,7 +291,7 @@ export class ViewerCommon {
             `${this.translate('length')}：${this.getUnitNumber(w)}`,
             `${this.translate('width')}：${this.getUnitNumber(h)}`,
             `${this.translate('perimeter')}：${this.getUnitNumber(pt)}`,
-            `${this.translate('area')}：${this.getUnitNumber(ac, 2)}²`],
+            `${this.translate('area')}：${this.getUnitNumber(ac)}²`],
         };
       }
         break;
@@ -312,7 +312,7 @@ export class ViewerCommon {
           texts: [
             `${this.translate('perimeter')}：${this.getUnitNumber((pt * this.options.imageCapRes).toFixed(2))}`,
             `${this.translate('area')}：${this.getUnitNumber(
-              calculatePolygonArea(points, this.options.imageCapRes), 2)}²`],
+              calculatePolygonArea(points, this.options.imageCapRes) / this.options.binary)}²`],
         };
       }
         break;
@@ -335,9 +335,8 @@ export class ViewerCommon {
     };
   }
 
-  getUnitNumber(number, index = 1) {
-    const binary = Math.pow(this.options.binary, index);
-    return getUnitNumber(number, this.options.units, binary);
+  getUnitNumber(number, index) {
+    return getUnitNumber(number, this.options.units, this.options.binary, index);
   }
 
   /**

package/src/components/shape/index.js

@@ -60,7 +60,6 @@ export class Shape extends ViewerCommon {
     // 区域标注列表
     const labelList = this.labelList.filter((item) => {
       if (item.show === false) return false;
-      if (item.custom) return false;
       if (!this[item.tool]) return false;
       if (!this.isInCanvas(item.region, bounds)) return false;
       if ((REGION_TYPES.includes(item.tool) || item.isClose && item.tool ===
@@ -106,14 +105,12 @@ export class Shape extends ViewerCommon {
       clearTimeout(this.delaytimer);
       this.delaytimer = undefined;
     }
-    // 优先绘制图片标注
-    imageLabel.forEach((item) => {
-      this.drawLabel(item);
-    });
-    this.deepDrawLabel(sameFixWidthLabel, sameNormalLabel, regionLabelList, 1, bounds);
+    this.deepDrawLabel(sameFixWidthLabel, sameNormalLabel, regionLabelList,
+      imageLabel, 1, bounds);
   }
 
-  deepDrawLabel(sameFixWidthLabel, sameNormalLabel, regionLabelList, count, bounds) {
+  deepDrawLabel(sameFixWidthLabel, sameNormalLabel, regionLabelList,
+                imageLabel, count, bounds) {
     let currentDrawCount = 0; // 当前已绘制数量
     const ctx = this.canvas.getContext('2d');
     const remainFixLabel = {};
@@ -121,7 +118,7 @@ export class Shape extends ViewerCommon {
       const labels = sameFixWidthLabel[key];
       ctx.beginPath();
       labels.forEach((item) => {
-        if (currentDrawCount >= 4000) { // 一次最多绘制4000个点，多余标注延迟绘制
+        if (currentDrawCount >= 2000) { // 一次最多绘制2000个标注，多余标注延迟绘制
           if (remainFixLabel[key]) {
             remainFixLabel[key].push(item);
           } else {
@@ -130,7 +127,7 @@ export class Shape extends ViewerCommon {
         } else {
           this.drawLabel(item);
         }
-        currentDrawCount = currentDrawCount + item.points.length;
+        currentDrawCount++;
       });
       const firstLabel = labels?.[0];
       if (firstLabel?.fillStyle) {
@@ -145,7 +142,7 @@ export class Shape extends ViewerCommon {
       const labels = sameNormalLabel[key];
       ctx.beginPath();
       labels.forEach((item) => {
-        if (currentDrawCount >= 4000) { // 一次最多绘制4000个点，多余标注延迟绘制
+        if (currentDrawCount >= 2000) { // 一次最多绘制2000个标注，多余标注延迟绘制
           if (remainNormalLabel[key]) {
             remainNormalLabel[key].push(item);
           } else {
@@ -154,7 +151,7 @@ export class Shape extends ViewerCommon {
         } else {
           this.drawLabel(item);
         }
-        currentDrawCount = currentDrawCount + item.points.length;
+        currentDrawCount++;
       });
       const firstLabel = labels?.[0];
       ctx.lineWidth = firstLabel.lineWidth;
@@ -165,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({
@@ -177,7 +177,8 @@ export class Shape extends ViewerCommon {
       });
     } else {
       this.delaytimer = setTimeout(() => {
-        this.deepDrawLabel(remainFixLabel, remainNormalLabel, regionLabelList, count + 1,
+        this.deepDrawLabel(remainFixLabel, remainNormalLabel, regionLabelList,
+          imageLabel, count + 1,
           bounds);
       }, 100);
     }

package/src/components/tailoring/index.js

@@ -37,7 +37,6 @@ export class Tailoring extends ViewerCommon {
       shape: true,
       ...this.options,
     };
-    this.custom = undefined;
   }
 
   init({
@@ -48,7 +47,7 @@ export class Tailoring extends ViewerCommon {
          color,
          now = false,
          contents = [],
-       }, custom) {
+       }) {
     this.isInTailoring = true;
     this.movePointIndex = -1;
     const pointList = getRectPoint({x: left, y: top},
@@ -58,7 +57,6 @@ export class Tailoring extends ViewerCommon {
       pointList[2],
       pointList[6],
       pointList[8]];
-    this.custom = custom;
     if (now) {
       this.emitScreenShot();
       this.stopTailoring();
@@ -324,7 +322,6 @@ export class Tailoring extends ViewerCommon {
         width: this.tailoringPoints[3].x - this.tailoringPoints[0].x,
         height: this.tailoringPoints[3].y - this.tailoringPoints[0].y,
       }),
-      custom: this.custom,
     });
   }
 
@@ -386,8 +383,8 @@ export class Tailoring extends ViewerCommon {
       copyCtx.putImageData(imageData, 0, 0, 0, 0, disWidth, disHeight);
       const shapeCanvas = this.kv.shape?.canvas;
       if (shapeCanvas && this.options.shape) {
-        copyCtx.drawImage(shapeCanvas, startPoint.x,
-          startPoint.y, Math.abs(endPoint.x - startPoint.x), Math.abs(endPoint.y - startPoint.y), 0, 0, disWidth,
+        copyCtx.drawImage(shapeCanvas, startPoint.x * radioX,
+          startPoint.y * radioY, disWidth, disHeight, 0, 0, disWidth,
           disHeight);
       }
       if (copyCanvas.width > this.options.resolution) {

package/src/const/event.js

@@ -19,3 +19,5 @@ export const EVENT_DELETE_POLYGON_POINT = 'delete-polygon-point';
 export const EVENT_ADD_POLYGON_POINT = 'add-polygon-point';
 export const EVENT_NAVIGATOR_VESTIGE = 'navigator-vestige';
 export const EVENT_GRADUATION_CHANGE = 'graduation-change';
+export const EVENT_INIT_COMPLETE = 'init-complete';
+export const EVENT_UPDATE_ZRENDER = 'update-zrender';

package/src/model/label.model.js

@@ -1,4 +1,4 @@
-import {DOT, FLAG, IMAGE, STAR} from '../const/mark';
+import {DOT, FLAG, STAR} from '../const/mark';
 
 export class LabelModel {
   constructor(data = {}) {
@@ -25,13 +25,11 @@ export class LabelModel {
     this.resize = data.resize; // 是否可拖动大小
     this.isROI = data.isROI ?? false; // 是否是ROI
     this.isClose = data.isClose ?? true; // 是否是闭合标注
-    this.custom = data.custom ?? false; // 是否是自定义的标注
     this.select = data.select ?? false; // 是否是选中状态
     this.show = data.show ?? true; // 是否显示
-    this.subType = data.subType; // 自定义类型
     this.__other__ = data.__other__ || {}; // 其他信息
     this.__data__ = data.__data__ ?? data; // 记录原始数据
-    if (this.src && this.tool === IMAGE) {
+    if (this.src) {
       this.img = new Image();
       this.img.src = this.src;
       this.imgLoadSuccess = false;