kfb-view 2.2.3 → 2.2.4

package/package.json

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

package/src/components/area/index.js

@@ -39,6 +39,7 @@ export class Area extends ViewerCommon {
     super(viewer, canvas, cache, options);
     this.labelList = [];
     this.movePoint = undefined;
+    this.currentPressPoint = undefined;
     this.lastPoint = undefined;
     this.draging = false;
     MARKS.forEach((mark) => {
@@ -82,6 +83,7 @@ export class Area extends ViewerCommon {
    */
   onCanvasPress({x, y}) {
     this.movePoint = undefined;
+    this.currentPressPoint = undefined;
     this.lastPoint = undefined;
     this.draging = false;
     let selectList = [];
@@ -181,6 +183,7 @@ export class Area extends ViewerCommon {
       // moveIndex>-1,表示选中的是图形中可移动的点
       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})) ||
@@ -258,10 +261,14 @@ export class Area extends ViewerCommon {
    */
   onCanvasRelease({x, y}) {
     if (this.movePoint && this.options.drag !== false) {
-      const label = this.movePoint.label;
-      this.$emit(EVENT_AREA_MOVE_END, label);
+      const dist = getDistance(this.currentPressPoint, {x, y});
+      if (Math.abs(dist) > 1) {
+        const label = this.movePoint.label;
+        this.$emit(EVENT_AREA_MOVE_END, label);
+      }
     }
     this.movePoint = undefined;
+    this.currentPressPoint = undefined;
     this.lastPoint = undefined;
     this.draging = false;
     this.change();

package/src/components/board/index.js

@@ -11,6 +11,7 @@ import {
   EVENT_IN_PAINTING,
 } from '../../const/event';
 import {
+  getDistance,
   pointInOtherPoint,
   pointsToRegion,
 } from '../../util/calculate';
@@ -148,13 +149,11 @@ export class Board extends ViewerCommon {
     const points = this.imageToViewerElementPoints(this.points);
     this[tool].draw(points);
     this[tool].endDraw();
-    if (tool === POLYGON) {
-      this[tool].drawPoints(points, {
-        radius: this.options.thumb.radius,
-        strokeStyle: this.options.thumb.color,
-        fillStyle: this.options.thumb.bgColor,
-      });
-    }
+    this[tool].drawPoints(points, {
+      radius: this.options.thumb.radius,
+      strokeStyle: this.options.thumb.color,
+      fillStyle: this.options.thumb.bgColor,
+    });
     this.$emit(EVENT_START_PAINTING, this.getPaintOptions());
   }
 
@@ -185,13 +184,11 @@ export class Board extends ViewerCommon {
     const points = this.imageToViewerElementPoints(this.points);
     this[tool].draw(points);
     this[tool].endDraw();
-    if (tool === POLYGON) {
-      this[tool].drawPoints(points, {
-        radius: this.options.thumb.radius,
-        strokeStyle: this.options.thumb.color,
-        fillStyle: this.options.thumb.bgColor,
-      });
-    }
+    this[tool].drawPoints(points, {
+      radius: this.options.thumb.radius,
+      strokeStyle: this.options.thumb.color,
+      fillStyle: this.options.thumb.bgColor,
+    });
     this.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
   }
 
@@ -209,10 +206,15 @@ export class Board extends ViewerCommon {
       return;
     }
     const tool = this.tool;
-    if (point.x === this.points[0].x && point.y === this.points[0].y &&
-      !NO_NORMAL_REGION_TYPES.includes(tool)) {
-      this.points = [];
-      return;
+    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});
+      if (Math.abs(dist) < 10) {
+        this.points = [];
+        this.clearCanvas();
+        return;
+      }
     } else if (POINT_TYPES.includes(tool)) {
       this.points = [point, point];
     } else if (tool === POLYGON) {
@@ -305,13 +307,11 @@ export class Board extends ViewerCommon {
       const points = this.imageToViewerElementPoints(this.points);
       this[tool].draw(points);
       this[tool].endDraw();
-      if (tool === POLYGON) {
-        this[tool].drawPoints(points, {
-          radius: this.options.thumb.radius,
-          strokeStyle: this.options.thumb.color,
-          fillStyle: this.options.thumb.bgColor,
-        });
-      }
+      this[tool].drawPoints(points, {
+        radius: this.options.thumb.radius,
+        strokeStyle: this.options.thumb.color,
+        fillStyle: this.options.thumb.bgColor,
+      });
       this.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
     }
   }
@@ -422,13 +422,11 @@ export class Board extends ViewerCommon {
     this[this.tool].startDraw();
     this[this.tool].draw(points);
     this[this.tool].endDraw();
-    if (this.tool === POLYGON) {
-      this[this.tool].drawPoints(points, {
-        radius: this.options.thumb.radius,
-        strokeStyle: this.options.thumb.color,
-        fillStyle: this.options.thumb.bgColor,
-      });
-    }
+    this[this.tool].drawPoints(points, {
+      radius: this.options.thumb.radius,
+      strokeStyle: this.options.thumb.color,
+      fillStyle: this.options.thumb.bgColor,
+    });
     this.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
   }
 }

package/src/components/grid/index.js

@@ -72,11 +72,13 @@ export class Grid extends ViewerCommon {
       const basePx = this.imageToViewerElementCoordinates(baseScale, 0).
         minus(this.imageToViewerElementCoordinates(0, 0)).x;
       ctx.beginPath();
-      ctx.strokeStyle = 'rgba(0, 0, 0, .8)';
-      ctx.fillStyle = 'rgba(0, 0, 0, .3)';
       ctx.font = '14px Arial';
-      ctx.clearRect(0, 0, 20, this.canvas.height);
-      ctx.clearRect(0, 0, this.canvas.width, 20);
+      ctx.fillStyle = '#fff';
+      ctx.fillRect(0, 0, 20, this.canvas.height);
+      ctx.fillRect(0, 0, this.canvas.width, 20);
+      ctx.beginPath();
+      ctx.fillStyle = 'rgba(0, 0, 0, .3)';
+      ctx.strokeStyle = 'rgba(0, 0, 0, .8)';
       ctx.moveTo(20, 20);
       ctx.lineTo(20, this.canvas.height);
       ctx.moveTo(20, 20);
@@ -111,7 +113,8 @@ export class Grid extends ViewerCommon {
       }
       ctx.stroke();
       ctx.beginPath();
-      ctx.clearRect(0, 0, 20, 20);
+      ctx.fillStyle = '#fff';
+      ctx.fillRect(0, 0, 20, 20);
     }
   }
 }

package/src/components/navigator/index.js

@@ -381,14 +381,4 @@ export class Navigator extends EventEmitter {
     };
     img.src = this.options.thumbnail; // 设置图片源地
   }
-
-  toggleNavigator() {
-    const navigatorMain = this.element.getElementsByClassName(
-      'navigator-main')[0];
-    if (navigatorMain.style.display === 'none') {
-      navigatorMain.style.display = 'block';
-    } else {
-      navigatorMain.style.display = 'none';
-    }
-  }
 }

package/src/tool/Brush.js

@@ -46,6 +46,12 @@ class Brush {
     this.thumb.draw(point, config);
   }
 
+  drawPoints(points, config) {
+    points.forEach((point) => {
+      this.drawThumb(point, config);
+    });
+  }
+
   /**
    * 画笔具体操作
    * @param {Object[]} points - 绘制的点

package/src/tool/Polygon.js

@@ -27,12 +27,6 @@ class Polygon extends Brush {
       }
     }
   }
-
-  drawPoints(points, config) {
-    points.forEach((point) => {
-      this.drawThumb(point, config);
-    });
-  }
 }
 
 export {

package/src/view.js

@@ -245,6 +245,7 @@ function initNavigator(kv) {
       containerHeight: config.height,
       containerWidth: config.width,
       element: navigator,
+      scale: config.scale,
       ...config.navigator,
     });
   }