kfb-view 2.3.1 → 2.3.3

package/package.json

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

package/src/components/area/index.js

@@ -42,6 +42,7 @@ export class Area extends ViewerCommon {
     this.currentPressPoint = undefined;
     this.lastPoint = undefined;
     this.draging = false;
+    this.isHover = false;
     MARKS.forEach((mark) => {
       this[mark] = new Tools[mark];
     });
@@ -323,18 +324,29 @@ export class Area extends ViewerCommon {
     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();
+      const region = this.imageToViewerElementRectangle(selectLabel.region);
+      if (this.isContainerInRegion({x, y}, {
+        ...selectLabel,
+        region,
+      })) {
+        const startPoint = {
+          x: region.x,
+          y: region.y,
+        };
+        const endPoint = {
+          x: region.x + region.width,
+          y: region.y + region.height,
+        };
+        const pointList = getRectPoint(startPoint, endPoint);
+        const moveIndex = pointList.findIndex(
+          (point) => pointInOtherPoint(point, {x, y}));
+        if (moveIndex === 4) {
+          this.isHover = true;
+          this.drawPoint(pointList[4], !!this.movePoint);
+        } else if (this.isHover) {
+          this.isHover = false;
+          this.change();
+        }
       }
     }
   }
@@ -573,6 +585,7 @@ export class Area extends ViewerCommon {
       }, position === 4);
       this.drawPoint(points[1], position === 7);
     } else if (type === RECTANGLE) {
+      console.log(12);
       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,
@@ -671,7 +684,8 @@ export class Area extends ViewerCommon {
   }
 
   showLabelMeasure() {
-    const bounds = this.viewport.getBounds();
+    const bounds = this.viewport.viewportToImageRectangle(
+      this.viewport.getBounds());
     const currentScale = this.getImageZoom(true);
     if (currentScale * this.options.scale < this.options.measure.scale) {
       const label = this.labelList.find((item) => item.select);
@@ -683,15 +697,16 @@ export class Area extends ViewerCommon {
     } else {
       this.labelList.forEach((label) => {
         if (label.show === false) return;
-        if (label.measure === false) return;
-        const content = this.getMeasureContent(label);
-        if (label.select) {
-          this[label.tool].drawMeasureInfo.call(this, label, content);
-        } else if (this.options.measure.defaultShow) {
+        if (label.select && label.measure) {
+          this[label.tool].drawMeasureInfo.call(this, label,
+            this.getMeasureContent(label));
+        } else if (this.options.measure.defaultShow && label.measure) {
           if (!this.isInCanvas(label.region, bounds)) return false;
-          this[label.tool].drawMeasureInfo.call(this, label, content);
+          this[label.tool].drawMeasureInfo.call(this, label,
+            this.getMeasureContent(label));
         }
         if (this.options.labelDrawing) {
+          if (!this.isInCanvas(label.region, bounds)) return false;
           this.options.labelDrawing(this.canvas, label,
             this.imageToViewerElementRectangle(label.region));
         }

package/src/components/common/common.js

@@ -413,12 +413,10 @@ export class ViewerCommon extends EventEmitter {
    * @return {boolean}
    */
   isInCanvas(region, bounds) {
-    const viewReact = this.viewport.imageToViewportRectangle(region.x, region.y,
-      region.width, region.height);
-    const startPoint = {x: viewReact.x, y: viewReact.y};
+    const startPoint = {x: region.x, y: region.y};
     const endPoint = {
-      x: viewReact.x + viewReact.width,
-      y: viewReact.y + viewReact.height,
+      x: region.x + region.width,
+      y: region.y + region.height,
     };
     return !(startPoint.x > (bounds.x + bounds.width) || startPoint.y >
       (bounds.y + bounds.height) || endPoint.x < bounds.x || endPoint.y <

package/src/components/shape/index.js

@@ -1,6 +1,6 @@
 import {
   HAS_REGION_TYPES, IMAGE,
-  MARKS, NO_NORMAL_REGION_TYPES, POINT_TYPES, POLYGON, REGION_TYPES,
+  MARKS, POINT_TYPES, POLYGON, REGION_TYPES,
 } from '../../const/mark';
 import {ViewerCommon} from '../common/common';
 import * as Tools from '../../tool';
@@ -49,12 +49,14 @@ export class Shape extends ViewerCommon {
    */
   change() {
     this.clearCanvas();
-    const bounds = this.viewport.getBounds();
+    const bounds = this.viewport.viewportToImageRectangle(
+      this.viewport.getBounds());
     // 区域标注列表
     const regionLabelList = [];
     const labelList = this.labelList.filter((item) => {
       if (item.show === false) return false;
       if (!this[item.tool]) return false;
+      if (!this.isInCanvas(item.region, bounds)) return false;
       if ((REGION_TYPES.includes(item.tool) || item.isClose && item.tool ===
         POLYGON) && item.fillStyle) {
         regionLabelList.push({
@@ -70,6 +72,7 @@ export class Shape extends ViewerCommon {
     const sameNormalLabel = {};
     const imageLabel = [];
     labelList.forEach((item) => {
+      item.viewerElementPoints = this.imageToViewerElementPoints(item.points);
       if (item.tool === IMAGE) {
         imageLabel.push(item);
         return;
@@ -104,13 +107,12 @@ export class Shape extends ViewerCommon {
     }
     this.deepDrawLabel(sameFixWidthLabel, sameNormalLabel, 1, bounds);
     regionLabelList.forEach((item) => {
-      if (!this.isInCanvas(item.region, bounds)) return false;
       this.combination.setContent(this.canvas, item);
       this.combination.draw({
-        points: this.imageToViewerElementPoints(item.points),
+        points: item.viewerElementPoints,
         tool: item.tool,
-      }, item.child.map(({points, tool}) => ({
-        points: this.imageToViewerElementPoints(points),
+      }, item.child.map(({viewerElementPoints, tool}) => ({
+        points: viewerElementPoints,
         tool,
       })), this.viewport.getRotation());
     });
@@ -134,7 +136,6 @@ export class Shape extends ViewerCommon {
             remainFixLabel[key] = [item];
           }
         } else {
-          if (!this.isInCanvas(item.region, bounds)) return false;
           this.drawLabel(item);
         }
         currentDrawCount++;
@@ -159,7 +160,6 @@ export class Shape extends ViewerCommon {
             remainNormalLabel[key] = [item];
           }
         } else {
-          if (!this.isInCanvas(item.region, bounds)) return false;
           this.drawLabel(item);
         }
         currentDrawCount++;
@@ -182,9 +182,9 @@ export class Shape extends ViewerCommon {
   }
 
   drawLabel(item) {
-    const points = this.imageToViewerElementPoints(item.points);
+    const points = item.viewerElementPoints;
     this[item.tool].setContent(this.canvas, item);
-    if (!NO_NORMAL_REGION_TYPES.includes(item.tool)) {
+    if (REGION_TYPES.includes(item.tool)) {
       this[item.tool].draw(points, this.viewport.getRotation(),
         this.imageToViewerElementRectangle(item.region));
     } else {

package/src/view.js

@@ -411,15 +411,14 @@ 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);
         dragPosition = event.position.clone();
         kv.viewer.viewport.panBy(
           kv.viewer.viewport.deltaPointsFromPixels(delta.negate()));
+      } else if (kv.area?.onCanvasMove) {
+        kv.area.onCanvasMove(event.position);
       }
     },
   });