kfb-view 2.1.19 → 2.1.20

package/package.json

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

package/src/components/area/index.js

@@ -78,7 +78,11 @@ export class Area extends ViewerCommon {
     this.draging = false;
     let selectList = [];
     let selectLabel;
+    let prevSelectLabel = undefined;
     this.labelList.forEach((item) => {
+      if (item.select) {
+        prevSelectLabel = item;
+      }
       item.select = false;
       // 如果有可移动的点了，不做操作
       if (this.movePoint) {
@@ -202,13 +206,15 @@ export class Area extends ViewerCommon {
     }
     selectLabel ?
       this.$emit(EVENT_SELECT_LABEL, selectLabel) :
-      !this.movePoint ? this.$emit(EVENT_CANCEL_SELECT_LABEL) : '';
+      !this.movePoint && prevSelectLabel ?
+        this.$emit(EVENT_CANCEL_SELECT_LABEL, prevSelectLabel) : '';
     this.change();
   }
 
   onCanvasDblClick({x, y}) {
     setTimeout(() => {
-      this.$emit(EVENT_DB_CLICK_LABEL);
+      const label = this.labelList.find((item) => item.select);
+      this.$emit(EVENT_DB_CLICK_LABEL, label);
     });
   }
 
@@ -428,8 +434,9 @@ export class Area extends ViewerCommon {
    */
   onCanvasKey(e) {
     const {originalEvent} = e;
-    if (originalEvent.code === 'Escape') {
-      this.$emit(EVENT_CANCEL_SELECT_LABEL);
+    const label = this.labelList.find((item) => item.select);
+    if (originalEvent.code === 'Escape' && label) {
+      this.$emit(EVENT_CANCEL_SELECT_LABEL, label);
       this.change();
     }
   }
@@ -552,7 +559,7 @@ export class Area extends ViewerCommon {
       label.points[index].canMove = false;
       if (index === 0 || (!pointInOtherPoint(lastPoint, point, 30) &&
           !pointInOtherPoint(movePoints[0], point, 30)) ||
-        (!label.isClose && index === movePoints.length - 1)) {
+        (index === movePoints.length - 1)) {
         lastPoint = point;
         point.canMove = true;
         label.points[index].canMove = true;

package/src/components/board/index.js

@@ -48,6 +48,7 @@ export class Board extends ViewerCommon {
    * @param {boolean} [options.measure=true] 绘画时显示信息
    * @param {boolean} [options.clear=true] 是否结束绘画时清空画布
    * @param {boolean} [options.isClose=true] 是否自动闭合曲线
+   * @param {boolean} [options.enableDbClickClose=true] 是否双击结束曲线绘制
    * @param {boolean} [options.once=false] 是否绘画一次后自动结束
    * @param {boolean} [options.isROI=false] 是否是感性区域
    * @param {boolean} [options.move=true] 是否可移动
@@ -74,7 +75,7 @@ export class Board extends ViewerCommon {
       measure: true,
       clear: true,
       isClose: true,
-      showStartPoint: true,
+      enableDbClickClose: true,
       ...options,
       lineWidth: !options.lineWidth ?
         (this.tool === STAR ? 15 :
@@ -104,7 +105,8 @@ export class Board extends ViewerCommon {
       text: '',
       measure: true,
       clear: true,
-      showStartPoint: true,
+      isClose: true,
+      enableDbClickClose: true,
       ...options,
       lineWidth: !options.lineWidth ?
         (this.tool === STAR ? 15 :
@@ -143,12 +145,11 @@ export class Board extends ViewerCommon {
     }
     this.clearCanvas();
     this[tool].startDraw();
-    this[tool].draw(this.imageToViewerElementPoints(this.points));
+    const points = this.imageToViewerElementPoints(this.points);
+    this[tool].draw(points);
     this[tool].endDraw();
     if (tool === POLYGON) {
-      const point = this.imageToViewerElementCoordinates(this.points[0].x,
-        this.points[0].y);
-      this[tool].drawPoint(point);
+      this[tool].drawPoints(points);
     }
     this.$emit(EVENT_START_PAINTING, this.getPaintOptions());
   }
@@ -171,17 +172,17 @@ export class Board extends ViewerCommon {
       this.points = [this.points[0] || point, point];
     } else if (tool === POLYGON) {
       this.points.push(point);
+      this.setEnablePoints(false);
     } else if (POINT_TYPES.includes(tool)) {
       this.points = [point, point];
     }
     this.clearCanvas();
     this[tool].startDraw();
-    this[tool].draw(this.imageToViewerElementPoints(this.points));
+    const points = this.imageToViewerElementPoints(this.points);
+    this[tool].draw(points);
     this[tool].endDraw();
     if (tool === POLYGON) {
-      const point = this.imageToViewerElementCoordinates(this.points[0].x,
-        this.points[0].y);
-      this[tool].drawPoint(point);
+      this[tool].drawPoints(points);
     }
     this.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
   }
@@ -207,30 +208,60 @@ export class Board extends ViewerCommon {
     } else if (POINT_TYPES.includes(tool)) {
       this.points = [point, point];
     } else if (tool === POLYGON) {
-      const points = this.imageToViewerElementPoints(this.points);
-      let firstPoint = points[0];
-      // 是否是闭合曲线
-      const isClose = this[this.tool].options.isClose;
-      if (isClose) {
-        // 绘制曲线时，点小于5个，或者曲线不是闭合的
-        if (points.length < 5 || !pointInOtherPoint(firstPoint, {x, y})) {
+      const firstPoint = this.imageToViewerElementCoordinates(this.points[0].x,
+        this.points[0].y);
+      const enableDbClickClose = this[this.tool].options.enableDbClickClose; // 是否启用双击结束绘制
+      const isClose = this[this.tool].options.isClose; // 是否自动关闭
+      if (enableDbClickClose) {
+        if (isClose && pointInOtherPoint(firstPoint, {x, y})) {
+          this.setEnablePoints();
+          if (this.points.length < 5) {
+            return;
+          }
+        } else {
+          return;
+        }
+      } else {
+        this.setEnablePoints();
+        // 如果点小于5个，任务标注不符合规范
+        if (this.points.length < 5) {
+          this.points = [];
+          this.clearCanvas();
           return;
         }
-      } else if (points.length < 5) {
+      }
+    }
+    this.$emit(EVENT_END_PAINTING, this.getPaintOptions());
+    // 是否只绘制一次
+    if (this[this.tool].options.once) {
+      this.endDraw();
+    } else if (this[this.tool].options.clear) { // 是否结束绘画时清空画布
+      this.points = [];
+      this.clearCanvas();
+    }
+  }
+
+  /**
+   * 监听鼠标双击事件
+   * @param {Object} e
+   * @param {number} e.x
+   * @param {number} e.y
+   */
+  onCanvasDblClick({x, y}) {
+    const point = this.viewerElementToImageCoordinates(x, y);
+    if (!this.isInROI(point) || this.points.length === 0) {
+      this.points = [];
+      this.clearCanvas();
+      return;
+    }
+    if (this.tool === POLYGON) {
+      this.setEnablePoints();
+      // 如果点小于5个，任务标注不符合规范
+      if (this.points.length < 5) {
+        this.points = [];
+        this.clearCanvas();
         return;
       }
-      // 过滤曲线的点，点之间的距离小于10默认为一个点，取第一个
-      this.points = this.points.filter((p, index) => {
-        const _p = this.imageToViewerElementCoordinates(p.x, p.y);
-        if (index === 0) return true;
-        if (!isClose && index === this.points.length - 1) return true;
-        if (pointInOtherPoint(firstPoint, _p)) {
-          return false;
-        } else {
-          firstPoint = _p;
-          return true;
-        }
-      });
     }
     this.$emit(EVENT_END_PAINTING, this.getPaintOptions());
     // 是否只绘制一次
@@ -257,14 +288,18 @@ export class Board extends ViewerCommon {
     }
     const tool = this.tool;
     if (tool === POLYGON && this.points.length > 0) {
-      this.points.pop();
+      if (this.points.length > 1) {
+        this.points.pop();
+      }
       this.points.push(point);
       this.clearCanvas();
       this[tool].startDraw();
       const points = this.imageToViewerElementPoints(this.points);
       this[tool].draw(points);
       this[tool].endDraw();
-      this[tool].drawPoint(points[0]);
+      if (tool === POLYGON) {
+        this[tool].drawPoints(points);
+      }
       this.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
     }
   }
@@ -274,10 +309,46 @@ export class Board extends ViewerCommon {
    * @param {Object} e
    */
   onCanvasKey(e) {
-    const {originalEvent} = e;
-    e.preventDefaultAction = true;
-    if (originalEvent.code === 'Escape') {
-      this.endDraw();
+    if (this.isInDraw) {
+      const {originalEvent} = e;
+      if (originalEvent.code === 'Escape') {
+        this.endDraw();
+      }
+      if (originalEvent.code === 'Delete' || originalEvent.key ===
+        'Backspace') {
+        // 曲线绘制中，按删除键，删除上一个标注点
+        if (this.tool === POLYGON && this.points.length > 1) {
+          this.points.splice(this.points.length - 2, 1);
+          this.change();
+        }
+      }
+    }
+  }
+
+  setEnablePoints(end = true) {
+    const points = this.imageToViewerElementPoints(this.points);
+    let firstPoint = points[0];
+    // 过滤曲线的点，点之间的距离小于10默认为一个点，取第一个
+    this.points = this.points.filter((p, index) => {
+      const _p = points[index];
+      if (index === 0) return true;
+      if (index === this.points.length - 1) return true;
+      if (pointInOtherPoint(firstPoint, _p, 30)) {
+        return false;
+      } else {
+        firstPoint = _p;
+        return true;
+      }
+    });
+    if (end && this.points.length > 1) {
+      const lastPoint = this.points[this.points.length - 1];
+      const lastTwoPoint = this.points[this.points.length - 2];
+      if (pointInOtherPoint(
+        this.imageToViewerElementCoordinates(lastPoint.x, lastPoint.y),
+        this.imageToViewerElementCoordinates(lastTwoPoint.x, lastTwoPoint.y),
+        30)) {
+        this.points.splice(this.points.length - 2, 1);
+      }
     }
   }
 
@@ -342,6 +413,9 @@ export class Board extends ViewerCommon {
     this[this.tool].startDraw();
     this[this.tool].draw(points);
     this[this.tool].endDraw();
+    if (this.tool === POLYGON) {
+      this[this.tool].drawPoints(points);
+    }
     this.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
   }
 }

package/src/components/rotation/index.js

@@ -151,11 +151,12 @@ class Rotation extends ViewerCommon {
    * @param {Object} e
    */
   onCanvasKey(e) {
-    const {originalEvent} = e;
-    e.preventDefaultAction = true;
-    if (originalEvent.code === 'Escape') {
-      this.viewport.setRotation(0);
-      this.stopRotation();
+    if (this.isInRotation) {
+      const {originalEvent} = e;
+      if (originalEvent.code === 'Escape') {
+        this.viewport.setRotation(0);
+        this.stopRotation();
+      }
     }
   }
 

package/src/components/shape/index.js

@@ -59,12 +59,8 @@ export class Shape extends ViewerCommon {
     this.clearCanvas();
     // 区域标注列表
     const regionLabelList = [];
-    const polygonLabelList = [];
     this.labelList.forEach(
       (item) => {
-        if (item.tool === POLYGON) {
-          polygonLabelList.push(item);
-        }
         if (REGION_TYPES.includes(item.tool) || item.isClose && item.tool ===
           POLYGON) {
           regionLabelList.push({
@@ -153,16 +149,6 @@ export class Shape extends ViewerCommon {
         tool,
       })), this.viewport.getRotation());
     });
-
-    polygonLabelList.forEach((item) => {
-      if (item.show === false) return;
-      if (!this[item.tool]) return;
-      if (!this.isInCanvas(item.region)) return;
-      const point = this.imageToViewerElementCoordinates(item.points[0].x,
-        item.points[0].y);
-      this[item.tool].setContent(this.canvas, item);
-      this[item.tool].drawPoint(point);
-    });
   }
 
   drawLabel(item) {

package/src/components/tailoring/index.js

@@ -219,10 +219,11 @@ export class Tailoring extends ViewerCommon {
    * @param {Object} e
    */
   onCanvasKey(e) {
-    const {originalEvent} = e;
-    e.preventDefaultAction = true;
-    if (originalEvent.code === 'Escape') {
-      this.stopTailoring();
+    if (this.isInTailoring) {
+      const {originalEvent} = e;
+      if (originalEvent.code === 'Escape') {
+        this.stopTailoring();
+      }
     }
   }
 

package/src/model/label.model.js

@@ -23,7 +23,6 @@ export class LabelModel {
     this.resize = data.resize; // 是否可拖动大小
     this.isROI = data.isROI ?? false; // 是否是ROI
     this.isClose = data.isClose ?? true; // 是否是闭合标注
-    this.showStartPoint = data.showStartPoint ?? true; // 是否默认显示开始点，只针对曲线
     this.select = data.select ?? false; // 是否是选中状态
     this.show = data.show ?? true; // 是否显示
     this.__other__ = data.__other__ || {}; // 其他信息

package/src/tool/Polygon.js

@@ -16,7 +16,8 @@ class Polygon extends Brush {
     ctx.lineWidth = this.options.lineWidth;
     ctx.strokeStyle = this.options.strokeStyle;
     ctx.moveTo(points[0].x, points[0].y);
-    points.forEach((point) => {
+    points.forEach((point, index) => {
+      if (index === 0) return;
       ctx.lineTo(point.x, point.y);
     });
     if (this.options.isClose) {
@@ -27,21 +28,13 @@ class Polygon extends Brush {
     }
   }
 
-  drawPoint(point) {
-    if (this.options.showStartPoint) {
-      const ctx = this.canvas.getContext('2d');
-      ctx.beginPath();
-      ctx.fillStyle = '#0000008d';
-      ctx.fillRect(point.x - 20, point.y - 25, 40, 20);
-      ctx.beginPath();
-      ctx.font = `14px Arial`;
-      ctx.fillStyle = '#ffffff';
-      ctx.fillText('起点', point.x - 15, point.y - 10);
+  drawPoints(points) {
+    points.forEach((point) => {
       this.thumb.draw(point, {
         thumbRadius: this.options.thumbRadius ?? 5,
         strokeStyle: this.options.thumbColor,
       });
-    }
+    });
   }
 }
 

package/src/view.js

@@ -309,16 +309,21 @@ function initEvent(kv) {
     const {originalEvent} = e;
     handlerCacheEvent(originalEvent, kv);
     handlerLabelEvent(originalEvent, kv);
-    kv.shape?.onCanvasKey?.(e);
     kv.area?.onCanvasKey?.(e);
+    kv.shape?.onCanvasKey?.(e);
     kv.board?.onCanvasKey?.(e);
     kv.tailoring?.onCanvasKey?.(e);
     kv.rotation?.onCanvasKey?.(e);
   }, 100));
 
   kv.viewer.addHandler('canvas-double-click', (e) => {
-    kv.area?.onCanvasDblClick?.(e.position);
-    kv.tailoring?.onCanvasDblClick?.(e.position);
+    if (kv.board?.isInDraw) {
+      kv.board.onCanvasDblClick(e.position);
+    } else if (kv.tailoring?.isInTailoring) {
+      kv.tailoring?.onCanvasDblClick?.(e.position);
+    } else {
+      kv.area?.onCanvasDblClick?.(e.position);
+    }
   });
 
   kv.viewer.addHandler('resize', (e) => {
@@ -331,6 +336,43 @@ function initEvent(kv) {
       kv.board.onCanvasMove(e);
     }
   }, true, kv.$el);
+
+  let isRightDown = false;
+  let dragPosition;
+
+  kv.viewer.canvas.addEventListener('contextmenu', function(event) {
+    if (kv.board?.isInDraw) {
+      event.preventDefault();
+    }
+  });
+
+  kv.viewer.addHandler('canvas-nonprimary-press', function(e) {
+    console.log('nonprimary press');
+    if (e.button === 2) {
+      isRightDown = true;
+    }
+    dragPosition = e.position.clone();
+  });
+
+  kv.viewer.addHandler('canvas-nonprimary-release', function(e) {
+    console.log('nonprimary release');
+    if (e.button === 2) {
+      isRightDown = false;
+    }
+  });
+
+  new openSeadragon.MouseTracker({
+    element: kv.viewer.canvas,
+    moveHandler: function(event) {
+      if (isRightDown && kv.board?.isInDraw) {
+        console.log('nonprimary drag');
+        let delta = event.position.minus(dragPosition);
+        dragPosition = event.position.clone();
+        kv.viewer.viewport.panBy(
+          kv.viewer.viewport.deltaPointsFromPixels(delta.negate()));
+      }
+    },
+  });
 }
 
 function handlerCacheEvent(e, kv) {