kfb-view 2.2.9 → 2.3.1

package/package.json

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

package/src/components/area/index.js

@@ -6,7 +6,7 @@ import {
   LINE_TYPES, MARKS,
   NO_NORMAL_REGION_TYPES,
   REGION_TYPES,
-  STAR, IMAGE,
+  STAR, IMAGE, RECTANGLE,
 } from '../../const/mark';
 import {
   baseNumber, getAngle, getDistance, getPoint,
@@ -66,6 +66,69 @@ export class Area extends ViewerCommon {
     });
   }
 
+  /**
+   * 画线
+   * @param {Object} point
+   * @param {number} index
+   * @param {Boolean=} active 是否是激活状态
+   */
+  drawLine(point, index, active) {
+    const ctx = this.canvas.getContext('2d');
+    ctx.beginPath();
+    const strokeStyle = !active ?
+      this.options.thumb.color :
+      this.options.thumb.activeColor;
+    const lineWidth = (!active ?
+      this.options.thumb.radius :
+      this.options.thumb.activeRadius) * 2;
+    ctx.strokeStyle = strokeStyle || '#01d0b0';
+    ctx.lineWidth = 2;
+    if (index === 0) {
+      ctx.moveTo(point.x - 5, point.y - 5);
+      ctx.lineTo(point.x - 5 + lineWidth, point.y - 5);
+      ctx.moveTo(point.x - 5, point.y - 5);
+      ctx.lineTo(point.x - 5, point.y - 5 + lineWidth);
+    } else if (index === 1) {
+      ctx.moveTo(point.x, point.y - 5);
+      ctx.lineTo(point.x - lineWidth / 2, point.y - 5);
+      ctx.moveTo(point.x, point.y - 5);
+      ctx.lineTo(point.x + lineWidth / 2, point.y - 5);
+    } else if (index === 2) {
+      ctx.moveTo(point.x + 5, point.y - 5);
+      ctx.lineTo(point.x + 5 - lineWidth, point.y - 5);
+      ctx.moveTo(point.x + 5, point.y - 5);
+      ctx.lineTo(point.x + 5, point.y - 5 + lineWidth);
+    } else if (index === 3) {
+      ctx.moveTo(point.x - 5, point.y);
+      ctx.lineTo(point.x - 5, point.y - lineWidth / 2);
+      ctx.moveTo(point.x - 5, point.y);
+      ctx.lineTo(point.x - 5, point.y + lineWidth / 2);
+    } else if (index === 4 && active) {
+      this.drawPoint(point, active);
+    } else if (index === 5) {
+      ctx.moveTo(point.x + 5, point.y);
+      ctx.lineTo(point.x + 5, point.y - lineWidth / 2);
+      ctx.moveTo(point.x + 5, point.y);
+      ctx.lineTo(point.x + 5, point.y + lineWidth / 2);
+    } else if (index === 6) {
+      ctx.moveTo(point.x - 5, point.y + 5);
+      ctx.lineTo(point.x - 5, point.y + 5 - lineWidth);
+      ctx.moveTo(point.x - 5, point.y + 5);
+      ctx.lineTo(point.x - 5 + lineWidth, point.y + 5);
+    } else if (index === 7) {
+      ctx.moveTo(point.x, point.y + 5);
+      ctx.lineTo(point.x - lineWidth / 2, point.y + 5);
+      ctx.moveTo(point.x, point.y + 5);
+      ctx.lineTo(point.x + lineWidth / 2, point.y + 5);
+    } else if (index === 8) {
+      ctx.moveTo(point.x + 5, point.y + 5);
+      ctx.lineTo(point.x + 5, point.y + 5 - lineWidth);
+      ctx.moveTo(point.x + 5, point.y + 5);
+      ctx.lineTo(point.x + 5 - lineWidth, point.y + 5);
+    }
+    ctx.stroke();
+  }
+
   /**
    * 设置List
    * @param {Object} list
@@ -256,6 +319,26 @@ export class Area extends ViewerCommon {
     });
   }
 
+  onCanvasMove({x, y}) {
+    const selectLabel = this.labelList.find(
+      ({tool, select}) => tool === RECTANGLE && select);
+    if (selectLabel) {
+      const region = selectLabel.region;
+      const startPoint = this.imageToViewerElementCoordinates(region.x,
+        region.y);
+      const endPoint = this.imageToViewerElementCoordinates(
+        region.x + region.width, region.y + region.height);
+      const pointList = getRectPoint(startPoint, endPoint);
+      const moveIndex = pointList.findIndex(
+        (point) => pointInOtherPoint(point, {x, y}));
+      if (moveIndex === 4) {
+        this.drawPoint(pointList[4], !!this.movePoint);
+      } else {
+        this.change();
+      }
+    }
+  }
+
   /**
    * 监听鼠标释放事件
    * @param {Object} e
@@ -489,6 +572,18 @@ export class Area extends ViewerCommon {
         y: (points[0].y + points[1].y) / 2,
       }, position === 4);
       this.drawPoint(points[1], position === 7);
+    } else if (type === RECTANGLE) {
+      const sp = {
+        x: points[0].x < points[1].x ? points[0].x : points[1].x,
+        y: points[0].y < points[1].y ? points[0].y : points[1].y,
+      };
+      const ep = {
+        x: points[0].x > points[1].x ? points[0].x : points[1].x,
+        y: points[0].y > points[1].y ? points[0].y : points[1].y,
+      };
+      getRectPoint(sp, ep).forEach((point, i) => {
+        this.drawLine(point, i, position === i);
+      });
     } else if (REGION_TYPES.includes(type)) {
       getRectPoint(points[0], points[1]).forEach((point, i) => {
         this.drawPoint(point, position === i);

package/src/components/common/common.js

@@ -190,14 +190,30 @@ export class ViewerCommon extends EventEmitter {
     if (label.points.length <= 1) return content;
     const scale = this.getImageZoom(true) / label.scale;
     const region = pointsToRegion(label.points);
-    const startPoint = {x: region.x, y: region.y};
-    const endPoint = {x: region.x + region.width, y: region.y + region.height};
+    const _startPoint = {x: region.x, y: region.y};
+    const _endPoint = {x: region.x + region.width, y: region.y + region.height};
+    const startPoint = {
+      x: _startPoint.x < _endPoint.x ? _startPoint.x : _endPoint.x,
+      y: _startPoint.y < _endPoint.y ? _startPoint.y : _endPoint.y,
+    };
+    const endPoint = {
+      x: _startPoint.x > _endPoint.x ? _startPoint.x : _endPoint.x,
+      y: _startPoint.y > _endPoint.y ? _startPoint.y : _endPoint.y,
+    };
     /*  const p1 = label.points[0];
       const p2 = label.points[label.points.length - 1];*/
     switch (label.tool) {
       case ARROW:
       case BILATERAL:
       case LINE: {
+        const startPoint = {
+          x: _startPoint.x < _endPoint.x ? _startPoint.x : _endPoint.x,
+          y: _startPoint.x < _endPoint.x ? _startPoint.y : _endPoint.y,
+        };
+        const endPoint = {
+          x: _startPoint.x > _endPoint.x ? _startPoint.x : _endPoint.x,
+          y: _startPoint.x > _endPoint.x ? _startPoint.y : _endPoint.y,
+        };
         const w = Math.abs(endPoint.x - startPoint.x);
         const h = Math.abs(endPoint.y - startPoint.y);
         const center = {

package/src/model/label.model.js

@@ -4,6 +4,7 @@ export class LabelModel {
   constructor(data = {}) {
     if (!data) data = {};
     this.id = data.id; // id标识
+    this.parent_id = data.parent_id; // 父id标识
     this.lineWidth = !data.lineWidth ?
       (data.tool === STAR ? 15 :
         data.tool === FLAG ? 30 : data.tool === DOT ? 10 : 2) :

package/src/view.js

@@ -411,6 +411,9 @@ function initEvent(kv) {
   new openSeadragon.MouseTracker({
     element: kv.viewer.canvas,
     moveHandler: function(event) {
+      if (kv.area?.onCanvasMove) {
+        kv.area.onCanvasMove(event.position);
+      }
       if (isRightDown && kv.board?.isInDraw) {
         console.log('nonprimary drag');
         let delta = event.position.minus(dragPosition);