kfb-view 3.0.8 → 3.1.0

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

@@ -1,9 +1,9 @@
-//! Built on 2022-12-16
+//! Built on 2023-05-25
 
-//! Git commit: v4.0.0-0-8e6196a
+//! Git commit: v4.1.0-0-8849681
 
 //! License: http://openseadragon.github.io/license/
 
 //! http://openseadragon.github.io
 
-//! openseadragon 4.0.0
+//! openseadragon 4.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kfb-view",
   "description": "一个在线kfb的阅片软件",
-  "version": "3.0.8",
+  "version": "3.1.0",
   "author": "qifeng.fan <qifeng.fan@hzztai.com>",
   "license": "MIT",
   "main": "lib/kfb-view.js",
@@ -23,7 +23,8 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.0.0",
-    "axios": "^0.19.2"
+    "axios": "^0.19.2",
+    "openseadragon": "^4.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

package/src/components/area/index.js

@@ -9,7 +9,7 @@ import {
   STAR, IMAGE, RECTANGLE,
 } from '../../const/mark';
 import {
-  baseNumber, getAngle, getDistance, getPoint,
+  getAngle, getDistance, getPoint,
   getRectPoint,
   isPointInMatrix,
   pointInOtherPoint, isPointInPolygon, pointsToRegion, isPointInLine,
@@ -189,34 +189,20 @@ export class Area extends ViewerCommon {
           (point) => point.canMove && pointInOtherPoint(point, {x, y}));
       } else if (LINE_TYPES.includes(item.tool)) {
         // 直线类型的图形有3个可移动的点
-        const dist = (item.lineWidth || 7) < 8 ? 8 : item.lineWidth;
-        pointList[0] = {
-          x: startPoint.x + dist * baseNumber(startPoint.x - endPoint.x) *
-            baseNumber(startPoint.y - endPoint.y),
-          y: startPoint.y - dist,
-        };
-        pointList[1] = startPoint;
-        pointList[2] = {
-          x: endPoint.x + dist * baseNumber(startPoint.x - endPoint.x) *
-            baseNumber(startPoint.y - endPoint.y), y: endPoint.y - dist,
-        };
-        pointList[4] = {
-          x: (startPoint.x + endPoint.x) / 2,
-          y: (startPoint.y + endPoint.y) / 2,
-        };
-        pointList[6] = {
-          x: startPoint.x - dist * baseNumber(startPoint.x - endPoint.x) *
-            baseNumber(startPoint.y - endPoint.y), y: startPoint.y + dist,
-        };
-        pointList[7] = endPoint;
-        pointList[8] = {
-          x: endPoint.x - dist * baseNumber(startPoint.x - endPoint.x) *
-            baseNumber(startPoint.y - endPoint.y), y: endPoint.y + dist,
-        };
-        moveIndex = pointList.findIndex((point, index) =>
-          point && pointInOtherPoint(point, {x, y}) &&
-          (index === 1 || index === 4 || index === 7),
-        );
+        const dist = item.lineWidth || 2;
+        pointList = [startPoint, endPoint];
+        if (pointInOtherPoint(startPoint, {x, y}, 10 + dist)) {
+          moveIndex = 1;
+        } else if (pointInOtherPoint(endPoint, {x, y}, 10 + dist)) {
+          moveIndex = 7;
+        } else if (pointInOtherPoint({
+          x: (endPoint.x + startPoint.x) / 2,
+          y: (endPoint.y + startPoint.y) / 2,
+        }, {x, y}, 10 + dist)) {
+          moveIndex = 4;
+        } else {
+          moveIndex = -1;
+        }
       } else if (item.tool === FONT) {
         const fontWidth = this.getFontWidth(item.text, item.fontSize);
         pointList =
@@ -255,35 +241,39 @@ export class Area extends ViewerCommon {
       if (~moveIndex) {
         this.movePoint = {position: moveIndex, label: item};
         this.currentPressPoint = {x, y};
-      } else if ((item.tool !== POLYGON &&
-          isPointInMatrix(pointList[0], pointList[2], pointList[6], pointList[8],
-            {x, y})) ||
-        (item.tool === POLYGON && isPointInPolygon({x, y}, pointList))) {
+      } else if (item.tool === POLYGON) {
+        isPointInPolygon({x, y}, pointList) ? selectList.push(item) : undefined;
+      } else if (LINE_TYPES.includes(item.tool)) {
+        isPointInLine({x, y}, pointList) ? selectList.push(item) : undefined;
+      } else if (isPointInMatrix(pointList[0], pointList[2], pointList[6],
+        pointList[8], {x, y})) {
         selectList.push(item);
       }
     });
     // 如果点击canvas，同时选中了多个标签，那么显示规则为，
-    // 优先级FONT>STAR>FLAG>LINE>RECT>POLYGON
-    // 如果是LINE或RECT或ELLIPSE或CURVE则优先显示范围小的
+    // 优先级DOT>FONT>STAR>FLAG
+    // 如果是LINE或RECT或ELLIPSE或POLYGON则优先显示范围小的
     if (this.movePoint) {
       this.movePoint.label.select = true;
       this.$emit(EVENT_SELECT_LABEL, this.movePoint.label);
       this.$emit(EVENT_AREA_MOVE_START, this.movePoint.label);
       this.draging = true;
     } else if (selectList.length > 0) {
-      if (selectLabel = selectList.find((draw) => draw.tool === DOT)) {
-        //
-      } else if (selectLabel = selectList.find((draw) => draw.tool === FONT)) {
-        //
-      } else if (selectLabel = selectList.find((draw) => draw.tool === STAR)) {
-        //
-      } else if (selectLabel = selectList.find((draw) => draw.tool === FLAG)) {
-        //
-      } else {
-        selectList.sort((a, b) =>
-          Math.abs(a.region.width) - Math.abs(b.region.width));
-        selectLabel = selectList[0];
-      }
+      selectList.sort((a, b) => {
+        if (a.tool === DOT) {
+          return -1;
+        } else if (a.tool === FONT) {
+          return b.tool === DOT ? 1 : -1;
+        } else if (a.tool === STAR) {
+          return (b.tool === DOT || b.tool === FONT) ? 1 : -1;
+        } else if (a.tool === FLAG) {
+          return (b.tool === DOT || b.tool === FONT || b.tool === STAR) ?
+            1 : -1;
+        } else {
+          return Math.abs(a.region.width) - Math.abs(b.region.width);
+        }
+      });
+      selectLabel = selectList[0];
       selectLabel.select = true;
     }
     selectLabel ?

package/src/components/board/index.js

@@ -3,7 +3,7 @@ import * as Tools from '../../tool';
 import {
   POLYGON, DOT, FLAG, MARKS,
   NO_NORMAL_REGION_TYPES,
-  POINT_TYPES, STAR,
+  POINT_TYPES, STAR, ELLIPSE,
 } from '../../const/mark';
 import {
   EVENT_START_PAINTING,
@@ -142,6 +142,8 @@ export class Board extends ViewerCommon {
     const tool = this.tool;
     if (tool === POLYGON) {
       this.points.push(point);
+    } else if (ELLIPSE === tool) {
+      this.points = [point, point];
     } else {
       this.points = [point];
     }
@@ -172,7 +174,15 @@ export class Board extends ViewerCommon {
     }
     e.preventDefaultAction = true;
     const tool = this.tool;
-    if (!NO_NORMAL_REGION_TYPES.includes(tool)) {
+    if (ELLIPSE === tool) {
+      const _x = point.x - this.points[1].x;
+      const _y = point.y - this.points[1].y;
+      const _point = {
+        x: this.points[1].x - _x,
+        y: this.points[1].y - _y,
+      };
+      this.points = [_point, this.points[1], point];
+    } else if (!NO_NORMAL_REGION_TYPES.includes(tool)) {
       this.points = [this.points[0] || point, point];
     } else if (tool === POLYGON) {
       this.points.push(point);
@@ -207,7 +217,23 @@ export class Board extends ViewerCommon {
       return;
     }
     const tool = this.tool;
-    if (!NO_NORMAL_REGION_TYPES.includes(tool)) {
+    if (ELLIPSE === tool) {
+      const _x = point.x - this.points[1].x;
+      const _y = point.y - this.points[1].y;
+      const _point = {
+        x: this.points[1].x - _x,
+        y: this.points[1].y - _y,
+      };
+      this.points = [_point, point];
+      const firstPoint = this.imageToViewerElementCoordinates(this.points[0].x,
+        this.points[0].y);
+      const dist = getDistance(firstPoint, {x, y});
+      if (Math.abs(dist) < 10) {
+        this.points = [];
+        this.clearCanvas();
+        return;
+      }
+    } else if (!NO_NORMAL_REGION_TYPES.includes(tool)) {
       const firstPoint = this.imageToViewerElementCoordinates(this.points[0].x,
         this.points[0].y);
       const dist = getDistance(firstPoint, {x, y});
@@ -234,7 +260,7 @@ export class Board extends ViewerCommon {
         }
       } else {
         this.setEnablePoints();
-        // 如果点小于5个，任务标注不符合规范
+        // 如果点小于5个，表示标注不符合规范
         if (this.points.length < 5) {
           this.points = [];
           this.clearCanvas();

package/src/components/common/common.js

@@ -339,73 +339,6 @@ export class ViewerCommon extends EventEmitter {
     };
   }
 
-  /**
-   * 获取区域像素点信息
-   * @param {Object} region
-   * @param {Object} canvas
-   * @return {{points, imageData}}
-   */
-  getImageData(region, canvas) {
-    const ctx = canvas.getContext('2d');
-    const imageData =
-      ctx.getImageData(region.x, region.y, region.width, region.height);
-    // let points = [];
-    /* return {
-       points,
-       imageData: {
-         data,
-         width,
-         height,
-       },
-     };*/
-    // 转换成10倍下的像素
-    return this.changeImageData(imageData);
-  }
-
-  /**
-   * 转换imageData像素点信息
-   * @param {Object} imageData
-   * @return {*}
-   */
-  changeImageData(imageData) {
-    const {data, width, height} = imageData;
-    const zoom =
-      this.viewport.viewportToImageZoom(
-        this.viewport.getZoom(true));
-    if (zoom <= 10) {
-      return {
-        points: [],
-        imageData: {
-          data,
-          width,
-          height,
-        },
-      };
-    } else {
-      const changeWidth = (10 / zoom * width >> 0);
-      const changeHeight = (10 / zoom * height >> 0);
-      const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d');
-      canvas.width = width;
-      canvas.height = height;
-      ctx.putImageData(imageData, 0, 0, 0, 0, canvas.width, canvas.height);
-      const cv = document.createElement('canvas');
-      const context = cv.getContext('2d');
-      cv.width = changeWidth;
-      cv.height = changeHeight;
-      context.drawImage(canvas, 0, 0, changeWidth, changeHeight);
-      const _imageData = context.getImageData(0, 0, changeWidth, changeHeight);
-      return {
-        points: [],
-        imageData: {
-          data: _imageData.data,
-          width: _imageData.width,
-          height: _imageData.height,
-        },
-      };
-    }
-  }
-
   /**
    * 判断region是否在canvas中
    * @param {Object} region