kfb-view 2.1.20 → 2.2.0

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,12 +323,17 @@ function initEvent(kv) {
     e.preventDefaultAction = true;
     const {originalEvent} = e;
     handlerCacheEvent(originalEvent, kv);
-    handlerLabelEvent(originalEvent, kv);
-    kv.area?.onCanvasKey?.(e);
-    kv.shape?.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) => {
@@ -391,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;
+    });
   }
 }