kfb-view 3.0.7 → 3.0.9

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.7",
+  "version": "3.0.9",
   "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

@@ -234,7 +234,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

package/src/components/grid/index.js

@@ -26,7 +26,11 @@ export class Grid extends ViewerCommon {
     const imageViewYEndPoint = this.viewerElementToImageCoordinates(0,
       this.canvas.height);
     let currentZoom = this.getImageZoom(true) * this.options.scale;
-    let baseScale = this.options.scale === 40 ? 3200 : 1600;
+    const pxConversion = this.options.pxConversion ?
+      this.options.imageCapRes : 1;
+    let baseScale = this.options.scale === 40 ?
+      (this.options.pxConversion ? 1600 / this.options.imageCapRes : 3200) :
+      (this.options.pxConversion ? 800 / this.options.imageCapRes : 1600);
     let twoCount = 0;
     if (currentZoom >= 1) {
       while (currentZoom / 2 >= 1) {
@@ -91,7 +95,8 @@ export class Grid extends ViewerCommon {
           ctx.moveTo(point.x + (basePx / 5) * j, 16);
           ctx.lineTo(point.x + (basePx / 5) * j, 20);
           if (i !== minX) {
-            ctx.fillText(i * baseScale, point.x + 5, 13);
+            ctx.fillText((i * baseScale * pxConversion).toFixed(0), point.x + 5,
+              13);
           }
         }
       }
@@ -106,7 +111,7 @@ export class Grid extends ViewerCommon {
             ctx.save();
             ctx.translate(3, point.y + 5);
             ctx.rotate(Math.PI / 2);
-            ctx.fillText(i * baseScale, 0, 0);
+            ctx.fillText((i * baseScale * pxConversion).toFixed(0), 0, 0);
             ctx.restore();
           }
         }