kfb-view 2.1.7 → 2.1.11

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

@@ -0,0 +1,9 @@
+//! Built on 2020-03-05
+
+//! Git commit: v2.4.2-0-c450749
+
+//! License: http://openseadragon.github.io/license/
+
+//! http://openseadragon.github.io
+
+//! openseadragon 2.4.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kfb-view",
   "description": "一个在线kfb的阅片软件",
-  "version": "2.1.7",
+  "version": "2.1.11",
   "author": "qifeng.fan <qifeng.fan@hzztai.com>",
   "license": "MIT",
   "main": "lib/kfb-view.js",
@@ -34,7 +34,7 @@
     "@babel/plugin-proposal-function-bind": "^7.0.0",
     "@babel/plugin-proposal-function-sent": "^7.0.0",
     "@babel/plugin-proposal-json-strings": "^7.0.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
     "@babel/plugin-proposal-numeric-separator": "^7.0.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.3.1",
     "@babel/plugin-proposal-optional-chaining": "^7.0.0",
@@ -67,7 +67,7 @@
     "sass-loader": "^7.0.3",
     "script-ext-html-webpack-plugin": "^2.0.1",
     "style-loader": "^0.21.0",
-    "uglifyjs-webpack-plugin": "^1.2.7",
+    "terser-webpack-plugin": "^4.2.2",
     "url-loader": "^1.0.1",
     "webpack": "^4.14.0",
     "webpack-cli": "^3.0.8",

package/src/components/area/index.js

@@ -51,7 +51,10 @@ export class Area extends ViewerCommon {
    * @param {Object=} config 参数，参见thumb
    */
   drawPoint(point, config) {
-    this.thumb.draw(point, config);
+    this.thumb.draw(point, {
+      ...config,
+      strokeStyle: this.options.thumbColor,
+    });
   }
 
   /**
@@ -167,8 +170,8 @@ export class Area extends ViewerCommon {
       if (~moveIndex) {
         this.movePoint = {position: moveIndex, label: item};
       } else if ((item.tool !== POLYGON &&
-        isPointInMatrix(pointList[0], pointList[2], pointList[6], pointList[8],
-          {x, y})) ||
+          isPointInMatrix(pointList[0], pointList[2], pointList[6], pointList[8],
+            {x, y})) ||
         (item.tool === POLYGON && isPointInPolygon({x, y}, pointList))) {
         selectList.push(item);
       }
@@ -344,7 +347,7 @@ export class Area extends ViewerCommon {
           (position === movePoints[movePoints.length - 1].index && index >=
             position && index >= nextIndex) ||
           ((position !== 0 && position !==
-            movePoints[movePoints.length - 1].index) && index >= position &&
+              movePoints[movePoints.length - 1].index) && index >= position &&
             index <= nextIndex)) {
           if (nextRatio === Infinity) {
             return {
@@ -363,7 +366,7 @@ export class Area extends ViewerCommon {
           (position === movePoints[movePoints.length - 1].index && index <=
             position && index >= lastIndex) ||
           ((position !== 0 && position !==
-            movePoints[movePoints.length - 1].index) && index >= lastIndex &&
+              movePoints[movePoints.length - 1].index) && index >= lastIndex &&
             index <= position)) {
           if (lastRatio === Infinity) {
             return {
@@ -388,7 +391,16 @@ export class Area extends ViewerCommon {
         _startPoint = {x: endPoint.x + distX, y: endPoint.y + distY};
         _endPoint = {x: endPoint.x + distX, y: endPoint.y + distY};
       }
-    } else if (tool === STAR || tool === FLAG) {
+    } else if (tool === STAR) {
+      if (position === 4) {
+        _startPoint = {x: endPoint.x + distX, y: endPoint.y + distY};
+        _endPoint = {x: endPoint.x + distX, y: endPoint.y + distY};
+      } else if (position === 0 || position === 2) {
+        label.lineWidth -= distY / scale;
+      } else if (position === 6 || position === 8) {
+        label.lineWidth += distY / scale;
+      }
+    } else if (tool === FLAG) {
       if (position === 4) {
         _startPoint = {x: endPoint.x + distX, y: endPoint.y + distY};
         _endPoint = {x: endPoint.x + distX, y: endPoint.y + distY};
@@ -396,6 +408,8 @@ export class Area extends ViewerCommon {
         label.lineWidth -= distY / scale;
       } else if (position === 6 || position === 8) {
         label.lineWidth += distY / scale;
+        _endPoint = {x: endPoint.x, y: endPoint.y + distY};
+        _startPoint = {x: endPoint.x, y: endPoint.y + distY};
       }
     }
     if (tool !== POLYGON) {
@@ -426,31 +440,35 @@ export class Area extends ViewerCommon {
    * @param {string}  type
    */
   drawThumbPoint(points, type) {
+    if (this.options.thumb === false) {
+      return;
+    }
+    const thumbRadius = this.options.thumbRadius ?? 5;
     if (LINE_TYPES.includes(type)) {
-      this.drawPoint(points[0], {thumbRadius: 5});
+      this.drawPoint(points[0], {thumbRadius});
       this.drawPoint({
         x: (points[0].x + points[1].x) / 2,
         y: (points[0].y + points[1].y) / 2,
-      }, {thumbRadius: 7});
-      this.drawPoint(points[1], {thumbRadius: 5});
+      }, {thumbRadius: thumbRadius + 2});
+      this.drawPoint(points[1], {thumbRadius});
     } else if (REGION_TYPES.includes(type)) {
       getRectPoint(points[0], points[1]).forEach((point) => {
-        this.drawPoint(point, {thumbRadius: 5});
+        this.drawPoint(point, {thumbRadius});
       });
     } else if (type === POLYGON) {
       points.forEach((point) => {
         if (point.canMove) {
-          this.drawPoint(point, {thumbRadius: 5});
+          this.drawPoint(point, {thumbRadius});
         }
       });
     } else if (type === FONT || type === DOT) {
-      this.drawPoint(points[0], {thumbRadius: 5});
+      this.drawPoint(points[0], {thumbRadius});
     } else if (type === STAR || type === FLAG) {
       getRectPoint(points[0], points[1]).
         filter((item, index) => index === 0 || index === 2 || index === 4 ||
           index === 6 || index === 8).
         forEach((point) => {
-          this.drawPoint(point, {thumbRadius: 5});
+          this.drawPoint(point, {thumbRadius});
         });
     }
   }
@@ -533,7 +551,7 @@ export class Area extends ViewerCommon {
       point.canMove = false;
       label.points[index].canMove = false;
       if (index === 0 || (!pointInOtherPoint(lastPoint, point, 30) &&
-        !pointInOtherPoint(movePoints[0], point, 30)) ||
+          !pointInOtherPoint(movePoints[0], point, 30)) ||
         (!label.isClose && index === movePoints.length - 1)) {
         lastPoint = point;
         point.canMove = true;

package/src/components/board/index.js

@@ -46,6 +46,12 @@ export class Board extends ViewerCommon {
    * @param {string} options.tool
    * @param {number} options.lineWidth
    * @param {boolean} [options.measure=true] 绘画时显示信息
+   * @param {boolean} [options.clear=true] 是否结束绘画时清空画布
+   * @param {boolean} [options.isClose=true] 是否自动闭合曲线
+   * @param {boolean} [options.once=false] 是否绘画一次后自动结束
+   * @param {boolean} [options.isROI=false] 是否是感性区域
+   * @param {boolean} [options.move=true] 是否可移动
+   * @param {boolean} [options.resize=true] 是否可调整大小
    */
   startDraw(options) {
     if (!options.tool) {
@@ -276,8 +282,7 @@ export class Board extends ViewerCommon {
    * @return {boolean}
    */
   isInROI(point) {
-    return this.ROIList.length === 0 ||
-      this.isContainerLabel(point, this.ROIList) ||
+    return !this.options.ROI || this.isContainerLabel(point, this.ROIList) ||
       this[this.tool].options.isROI;
   }
 

package/src/components/tailoring/index.js

@@ -29,7 +29,7 @@ export class Tailoring extends ViewerCommon {
     this.color = '#FFF';
   }
 
-  init({width, height, left, top, color}) {
+  init({width, height, left, top, color, now = false}) {
     this.isInTailoring = true;
     this.movePointIndex = -1;
     const pointList = getRectPoint({x: left, y: top},
@@ -39,8 +39,13 @@ export class Tailoring extends ViewerCommon {
       pointList[2],
       pointList[6],
       pointList[8]];
-    this.color = color || '#FFF';
-    this.change();
+    if (now) {
+      this.$emit(EVENT_TAILORING_SCREENSHOT, this.getScreenCanvasImage());
+      this.stopTailoring();
+    } else {
+      this.color = color || '#FFF';
+      this.change();
+    }
   }
 
   emitTailoringRegion() {
@@ -222,15 +227,10 @@ export class Tailoring extends ViewerCommon {
   }
 
   onCanvasDblClick(position) {
-    if (this.tailoringPoints.length === 0) {
-      this.stopTailoring();
-    } else {
-      if (this.isPointInMatrix(position)) {
-        this.$emit(EVENT_TAILORING_SCREENSHOT, this.getScreenCanvasImage());
-      } else {
-        this.stopTailoring();
-      }
+    if (this.tailoringPoints.length > 0 && this.isPointInMatrix(position)) {
+      this.$emit(EVENT_TAILORING_SCREENSHOT, this.getScreenCanvasImage());
     }
+    this.stopTailoring();
   }
 
   /**

package/src/util/imageData.js

@@ -36,9 +36,9 @@ export const rgbToHsl = (r, g, b) => {
 export const hslToRgb = (h, s, l) => {
   if (s === 0) {
     return {
-      r: l * 255,
-      g: l * 255,
-      b: l * 255,
+      r: (l > 1 ? 1 : l) * 255,
+      g: (l > 1 ? 1 : l) * 255,
+      b: (l > 1 ? 1 : l) * 255,
     };
   }
   if (s > 1) s = 1;
@@ -52,7 +52,11 @@ export const hslToRgb = (h, s, l) => {
   const r = 255 * hueToRGB(v1, v2, h + (1 / 3));
   const g = 255 * hueToRGB(v1, v2, h);
   const b = 255 * hueToRGB(v1, v2, h - (1 / 3));
-  return {r, g, b};
+  return {
+    r: r > 255 ? 255 : r,
+    g: g > 255 ? 255 : g,
+    b: b > 255 ? 255 : b,
+  };
 };
 
 function hueToRGB(v1, v2, h) {
@@ -72,14 +76,14 @@ export const toGamma = (num, gamma) => {
     num = 0;
   }
   num = num / 255;
-  const compensate = Math.pow(num, gamma);
+  const compensate = Math.pow(num, 1 / gamma);
   return compensate * 255;
 };
 
 const cacheGammaTable = {};
 
 for (let i = 0; i < 256; i++) {
-  for (let j = 0.01; j <= 5; j = ((j + 0.01).toFixed(3) / 1)) {
+  for (let j = 0.01; j <= 2; j = ((j + 0.01).toFixed(3) / 1)) {
     if (cacheGammaTable[`${j}`]) {
       cacheGammaTable[`${j}`].push(toGamma(i, j));
     } else {

package/src/view.js

@@ -24,6 +24,8 @@ export default class KfbView extends EventEmitter {
    * @param {Object} [config.navigator = {}] navigator参数
    * @param {string=} config.navigator.style navigator样式
    * @param {boolean=} config.navigator.disabled 是否禁用navigator
+   * @param {string} config.navigator.width navigator宽度
+   * @param {string} config.navigator.height navigator高度
    * @param {string} config.navigator.thumbnail 缩略图地址
    * @param {boolean=} config.navigator.vestige 是否显示缩略图浏览痕迹
    * @param {number=} config.navigator.vestigeDelay 浏览痕迹颜色时间
@@ -35,6 +37,9 @@ export default class KfbView extends EventEmitter {
    * @param {Object} config.area 交互区域,触发点击、拖动等事件
    * @param {boolean=} config.area.disabled 是否禁用area
    * @param {boolean=} config.area.drag 是否允许拖动
+   * @param {boolean=} config.area.thumb 选中区域时是否显示标注点
+   * @param {boolean=} config.area.thumbRadius 选中区域标注点的半径
+   * @param {boolean=} config.area.thumbColor 选中区域标注点的颜色
    * @param {Object} config.rotation 旋转图像参数
    * @param {boolean=} config.rotation.disabled 是否禁用旋转
    * @param {Object} config.tailoring 裁剪图像参数
@@ -43,7 +48,7 @@ export default class KfbView extends EventEmitter {
    * @param {boolean=} config.shape.disabled 是否禁用标注
    * @param {Object} config.board 标注参数
    * @param {boolean=} config.board.disabled 是否禁用绘制
-   * @param {boolean=} config.board.once 是否只绘制一次
+   * @param {boolean=} config.board.ROI 是否开启ROI，开启后只能在标注类型是ROI的区域内绘制图形
    * @param {Object} config.graduation 刻度参数
    * @param {boolean=} config.graduation.disabled 是否禁用刻度
    * @param {boolean=} config.graduation.custom 是否自定义刻度,抛出graduation-change事件
@@ -99,6 +104,19 @@ export default class KfbView extends EventEmitter {
     this.area?.setLabelList?.(this.labelList);
   }
 
+  appendLabelList(list) {
+    this.labelList = [
+      ...this.labelList, list.map((item) => new LabelModel({
+        ...item,
+        region: item.region || pointsToRegion(item.points),
+        strokeStyle: item.strokeStyle || '#0000FF',
+        __data__: deepClone(item),
+      }))];
+    this.board?.setLabelList?.(this.labelList);
+    this.shape?.setLabelList?.(this.labelList);
+    this.area?.setLabelList?.(this.labelList);
+  }
+
   /**
    * 重置绘图大小
    * @param {number} width