kfb-view 2.1.18 → 2.2.0

package/src/const/event.js

@@ -1,3 +1,4 @@
+
 export const EVENT_START_PAINTING = 'start-painting';
 export const EVENT_IN_PAINTING = 'in-painting';
 export const EVENT_END_PAINTING = 'end-painting';
@@ -13,4 +14,6 @@ export const EVENT_CACHE_BACK = 'cache-back';
 export const EVENT_CACHE_FORWARD = 'cache-forward';
 export const EVENT_HIDDEN_LABEL = 'hidden-label';
 export const EVENT_DELETE_LABEL = 'delete-label';
+export const EVENT_DELETE_POLYGON_POINT = 'delete-polygon-point';
+export const EVENT_ADD_POLYGON_POINT = 'add-polygon-point';
 export const EVENT_NAVIGATOR_VESTIGE = 'navigator-vestige';

package/src/tool/Brush.js

@@ -42,7 +42,7 @@ class Brush {
    * @param {Object} point
    * @param {Object} config 参数，参见thumb
    */
-  drawPoint(point, config) {
+  drawThumb(point, config) {
     this.thumb.draw(point, config);
   }
 

package/src/tool/Combination.js

@@ -74,6 +74,7 @@ class Combination extends Brush {
         ctx.drawOval(0, 0, Math.abs(region.width / 2),
           Math.abs(region.height / 2), true);
       }
+      ctx.closePath();
       ctx.restore();
     });
     if (this.options.fillStyle) {

package/src/tool/Polygon.js

@@ -16,7 +16,8 @@ class Polygon extends Brush {
     ctx.lineWidth = this.options.lineWidth;
     ctx.strokeStyle = this.options.strokeStyle;
     ctx.moveTo(points[0].x, points[0].y);
-    points.forEach((point) => {
+    points.forEach((point, index) => {
+      if (index === 0) return;
       ctx.lineTo(point.x, point.y);
     });
     if (this.options.isClose) {
@@ -26,6 +27,12 @@ class Polygon extends Brush {
       }
     }
   }
+
+  drawPoints(points, config) {
+    points.forEach((point) => {
+      this.drawThumb(point, config);
+    });
+  }
 }
 
 export {

package/src/tool/Thumb.js

@@ -1,6 +1,6 @@
 const ThumbConfig = {
   lineWidth: 2,
-  thumbRadius: 5,
+  radius: 5,
   fillStyle: 'rgba(255, 255, 255, 1)',
   strokeStyle: '#01d0b0',
 };
@@ -51,7 +51,7 @@ class Thumb {
     config = this.getConfig(config);
     ctx.beginPath();
     ctx.lineWidth = config.lineWidth;
-    ctx.arc(x, y, config.thumbRadius, 0, Math.PI * 2, !1);
+    ctx.arc(x, y, config.radius, 0, Math.PI * 2, !1);
     ctx.fillStyle = config.fillStyle;
     ctx.fill();
     ctx.strokeStyle = config.strokeStyle;

package/src/util/calculate.js

@@ -132,9 +132,8 @@ function isPointInPolygon(p, poly) {
     if ((sy < py && ty >= py) || (sy >= py && ty < py)) {
       // 线段上与射线 Y 坐标相同的点的 X 坐标
       const x = sx + (py - sy) * (tx - sx) / (ty - sy);
-
-      // 点在多边形的边上
-      if (x === px) {
+      // 点在多边形的边上,8像素的偏差
+      if (Math.abs(x - px) < 10) {
         return true;
       }
 
@@ -149,6 +148,29 @@ function isPointInPolygon(p, poly) {
   return flag;
 }
 
+/**
+ * 判断一个点是否在一条线段上
+ * @param {Object}  p
+ * @param {Object[]} points
+ * @return {boolean}
+ */
+function isPointInLine(p, points) {
+  const startPoint = points[0];
+  const endPoint = points[1];
+  // 判断线段两端点是否在射线两侧
+  if ((startPoint.y < p.y && endPoint.y >= p.y) ||
+    (startPoint.y >= p.y && endPoint.y < p.y)) {
+    // 线段上与射线 Y 坐标相同的点的 X 坐标
+    const x = startPoint.x + (p.y - startPoint.y) *
+      (endPoint.x - startPoint.x) / (endPoint.y - startPoint.y);
+    // 点在多边形的边上,8像素的偏差
+    if (Math.abs(x - p.x) < 8) {
+      return true;
+    }
+  }
+  return false;
+}
+
 /**
  * points转换成Region
  * @param {Object[]} points - 绘制的点
@@ -366,6 +388,7 @@ export {
   pointsToRegion,
   regionToPoint,
   isPointInPolygon,
+  isPointInLine,
   isNegNumber,
   baseNumber,
   acreage,

package/src/view.js

@@ -6,7 +6,7 @@ import {pointsToRegion} from './util/calculate';
 import * as COMPONENTS from './const/component';
 import * as EVENTS from './const/event';
 import * as Components from './components';
-import {MARKS} from './const/mark';
+import {MARKS, POLYGON} from './const/mark';
 import {LabelModel} from './model/label.model';
 
 /**
@@ -37,9 +37,14 @@ export default class KfbView extends EventEmitter {
    * @param {Object} config.area 交互区域,触发点击、拖动等事件
    * @param {boolean=} config.area.disabled 是否禁用area
    * @param {boolean=} config.area.drag 是否允许拖动
-   * @param {boolean=} config.area.thumb 选中区域时是否显示标注点
-   * @param {boolean=} config.area.thumbRadius 选中区域标注点的半径
-   * @param {boolean=} config.area.thumbColor 选中区域标注点的颜色
+   * @param {Object} config.thumb 选中区域时标注点配置
+   * @param {boolean=} config.thumb.show 选中区域时是否标注点
+   * @param {number=} config.thumb.radius 选中区域标注点的半径
+   * @param {String=} config.thumb.color 选中区域标注点的颜色
+   * @param {String=} config.thumb.bgColor 选中区域标注点的背景颜色
+   * @param {number=} config.thumb.activeRadius 标注点激活状态下的半径
+   * @param {boolean=} config.thumb.activeColor 标注点激活状态下颜色
+   * @param {boolean=} config.thumb.activeBgColor 标注点激活状态下背景颜色
    * @param {Object} config.rotation 旋转图像参数
    * @param {boolean=} config.rotation.disabled 是否禁用旋转
    * @param {Object} config.tailoring 裁剪图像参数
@@ -254,7 +259,18 @@ function initComponentsOptions(kv, type) {
     viewer: kv.viewer,
     cache: kv.cache,
     canvas: createCanvas(kv),
-    options: {...config[type], ...pxConversion},
+    options: {
+      ...config[type], ...pxConversion, thumb: config.thumb ? {
+        radius: 5,
+        activeRadius: 7,
+        activeBgColor: '#01d0b0',
+        ...config.thumb,
+      } : {
+        radius: 5,
+        activeRadius: 7,
+        activeBgColor: '#01d0b0',
+      },
+    },
   };
 }
 
@@ -287,8 +303,7 @@ function initEvent(kv) {
       e.preventDefaultAction = true;
       kv.tailoring.onCanvasDrag(e.position);
     } else if (kv.area?.movePoint) {
-      e.preventDefaultAction = true;
-      kv.area.onCanvasDrag(e.position);
+      kv.area.onCanvasDrag(e.position, e);
       kv.change();
     }
   });
@@ -308,17 +323,27 @@ function initEvent(kv) {
     e.preventDefaultAction = true;
     const {originalEvent} = e;
     handlerCacheEvent(originalEvent, kv);
-    handlerLabelEvent(originalEvent, kv);
-    kv.shape?.onCanvasKey?.(e);
-    kv.area?.onCanvasKey?.(e);
-    kv.board?.onCanvasKey?.(e);
-    kv.tailoring?.onCanvasKey?.(e);
-    kv.rotation?.onCanvasKey?.(e);
+    if (kv.board?.isInDraw) {
+      kv.board?.onCanvasKey?.(e);
+    } else if (kv.rotation?.isInRotation) {
+      kv.rotation?.onCanvasKey?.(e);
+    } else if (kv.tailoring?.isInTailoring) {
+      kv.tailoring?.onCanvasKey?.(e);
+    } else {
+      handlerLabelEvent(originalEvent, kv);
+      kv.area?.change?.(e);
+      kv.shape?.change?.(e);
+    }
   }, 100));
 
   kv.viewer.addHandler('canvas-double-click', (e) => {
-    kv.area?.onCanvasDblClick?.(e.position);
-    kv.tailoring?.onCanvasDblClick?.(e.position);
+    if (kv.board?.isInDraw) {
+      kv.board.onCanvasDblClick(e.position);
+    } else if (kv.tailoring?.isInTailoring) {
+      kv.tailoring?.onCanvasDblClick?.(e.position);
+    } else {
+      kv.area?.onCanvasDblClick?.(e.position);
+    }
   });
 
   kv.viewer.addHandler('resize', (e) => {
@@ -331,6 +356,43 @@ function initEvent(kv) {
       kv.board.onCanvasMove(e);
     }
   }, true, kv.$el);
+
+  let isRightDown = false;
+  let dragPosition;
+
+  kv.viewer.canvas.addEventListener('contextmenu', function(event) {
+    if (kv.board?.isInDraw) {
+      event.preventDefault();
+    }
+  });
+
+  kv.viewer.addHandler('canvas-nonprimary-press', function(e) {
+    console.log('nonprimary press');
+    if (e.button === 2) {
+      isRightDown = true;
+    }
+    dragPosition = e.position.clone();
+  });
+
+  kv.viewer.addHandler('canvas-nonprimary-release', function(e) {
+    console.log('nonprimary release');
+    if (e.button === 2) {
+      isRightDown = false;
+    }
+  });
+
+  new openSeadragon.MouseTracker({
+    element: kv.viewer.canvas,
+    moveHandler: function(event) {
+      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()));
+      }
+    },
+  });
 }
 
 function handlerCacheEvent(e, kv) {
@@ -349,17 +411,36 @@ function handlerCacheEvent(e, kv) {
 }
 
 function handlerLabelEvent(e, kv) {
+  const index = kv.labelList.findIndex((item) => item.select);
+  const label = kv.labelList[index];
   if (e.key === 'h') {
-    const label = kv.labelList.find((label) => label.select);
     if (!label) return;
     label.show = false;
     kv.$emit(EVENTS.EVENT_HIDDEN_LABEL, label);
-  }
-  if (e.key === 'Delete' || e.key === 'Backspace') {
-    const index = kv.labelList.findIndex((label) => label.select);
-    if (!~index) return;
-    kv.$emit(EVENTS.EVENT_DELETE_LABEL, kv.labelList[index]);
-    kv.labelList.splice(index, 1);
+  } else if (e.key === 'Delete' || e.key === 'Backspace') {
+    if (!label) return;
+    if (kv.area?.movePoint?.label?.tool === POLYGON) {
+      const movePoint = kv.area.movePoint;
+      movePoint.label.points.splice(movePoint.position, 1);
+      if (movePoint.label.points.length === 0) {
+        kv.$emit(EVENTS.EVENT_DELETE_LABEL, label);
+        kv.labelList.splice(index, 1);
+      } else {
+        kv.$emit(EVENTS.EVENT_DELETE_POLYGON_POINT, movePoint.label);
+      }
+      kv.area.movePoint = undefined;
+    } else {
+      kv.$emit(EVENTS.EVENT_DELETE_LABEL, label);
+      kv.labelList.splice(index, 1);
+    }
+  } else if (e.key === 'Escape') {
+    if (label) {
+      kv.$emit(EVENTS.EVENT_CANCEL_SELECT_LABEL, label);
+    }
+    kv.labelList.forEach((item) => {
+      item.select = false;
+      item.show = true;
+    });
   }
 }