kfb-view 2.3.0 → 2.3.2

package/package.json

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

package/src/components/area/index.js

@@ -573,7 +573,15 @@ export class Area extends ViewerCommon {
       }, position === 4);
       this.drawPoint(points[1], position === 7);
     } else if (type === RECTANGLE) {
-      getRectPoint(points[0], points[1]).forEach((point, i) => {
+      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)) {
@@ -663,7 +671,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);
@@ -673,17 +682,19 @@ export class Area extends ViewerCommon {
       this[label.tool].drawMeasureInfo.call(this, label,
         this.getMeasureContent(label));
     } else {
+      console.log(1);
       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

@@ -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 = {
@@ -397,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/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) :