kfb-view 2.0.17 → 2.1.7

package/src/tool/{Curve.js → Polygon.js}

@@ -4,7 +4,7 @@ import {Brush} from './Brush';
  * 曲线类
  * @class
  */
-class Curve extends Brush {
+class Polygon extends Brush {
   /**
    * 绘制结束点
    * @param {Object[]} points - 绘制的点
@@ -43,40 +43,8 @@ class Curve extends Brush {
     }
     ctx.stroke();
   }
-
-  /**
-   * 绘制
-   * @param {Object[]} points - 绘制的点
-   * @param {number} points[].x - 绘制的点x坐标
-   * @param {number} points[].y - 绘制的点y坐标
-   * @param {Array} children
-   */
-  drawCombination(points, children) {
-    const ctx = this.canvas.getContext('2d');
-    ctx.beginPath();
-    ctx.lineWidth = this.options.lineWidth || 2;
-    ctx.strokeStyle = this.options.strokeStyle || '#0000FF';
-    ctx.moveTo(points[0].x, points[0].y);
-    points.forEach((point) => {
-      ctx.lineTo(point.x, point.y);
-    });
-    ctx.lineTo(points[0].x, points[0].y);
-    ctx.closePath();
-    children.forEach((childrenPoints) => {
-      childrenPoints.reverse();
-      childrenPoints.forEach((point) => {
-        ctx.lineTo(point.x, point.y);
-      });
-      ctx.lineTo(childrenPoints[0].x, childrenPoints[0].y);
-      ctx.closePath();
-    });
-    ctx.fillStyle = this.options.fillStyle;
-    ctx.fill();
-  }
 }
 
 export {
-  Curve,
+  Polygon,
 };
-
-export const curve = new Curve();

package/src/tool/Rectangle.js

@@ -64,5 +64,3 @@ class Rectangle extends Brush {
 export {
   Rectangle,
 };
-
-export const rect = new Rectangle();

package/src/tool/Star.js

@@ -92,5 +92,3 @@ class Star extends Brush {
 export {
   Star,
 };
-
-export const star = new Star();

package/src/tool/Thumb.js

@@ -59,8 +59,6 @@ class Thumb {
   }
 }
 
-export const thumb = new Thumb();
-
 export {
   Thumb,
 };

package/src/tool/index.js

@@ -2,7 +2,7 @@ export {Brush} from './Brush';
 export {Arrow} from './Arrow';
 export {Bilateral} from './Bilateral';
 export {Line} from './Line';
-export {Curve} from './Curve';
+export {Polygon} from './Polygon';
 export {Ellipse} from './Ellipse';
 export {Rectangle} from './Rectangle';
 export {Font} from './Font';

package/src/util/calculate.js

@@ -324,7 +324,7 @@ function acreage(type, startPoint, endPoint, imageCapRes = 1) {
   if (type === 'Ellipse') {
     ag = distX * distY / 4 * Math.PI;
   }
-  /* if (type === 'curve') {
+  /* if (type === 'polygon') {
   }*/
   return ag;
 }
@@ -352,7 +352,7 @@ function perimeter(type, startPoint, endPoint, imageCapRes = 1) {
     const b = distX >= distY ? distY : distX;
     pt = 4 * (a - b) + 2 * Math.PI * b;
   }
-  /* if (type === 'curve') {
+  /* if (type === 'polygon') {
 
   }*/
   return pt;

package/src/util/canvas.js

@@ -53,21 +53,56 @@ CanvasRenderingContext2D.prototype.drawArrow = function drawArrow(
  * @param {number} y 椭圆中心纵坐标
  * @param {number} a 椭圆横半轴长
  * @param {number} b 椭圆纵半轴长
+ * @param {boolean=} [anticlockwise=true] false为顺时针，true为逆时针
  */
-CanvasRenderingContext2D.prototype.drawOval = function drawOval(x, y, a, b) {
+CanvasRenderingContext2D.prototype.drawOval = function drawOval(
+  x, y, a, b, anticlockwise = true) {
   this.save();
   // 选择a、b中的较大者作为arc方法的半径参数
   const r = (a > b) ? a : b;
   const ratioX = a / r; // 横轴缩放比率
   const ratioY = b / r; // 纵轴缩放比率
   this.scale(ratioX, ratioY); // 进行缩放（均匀压缩）
-  this.beginPath();
   // 从椭圆的左端点开始逆时针绘制
   this.moveTo((x + a) / ratioX, y / ratioY);
-  this.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI);
+  this.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, anticlockwise);
   this.closePath();
   this.restore();
-  this.stroke();
+};
+
+/**
+ * 画多边形
+ * @param {Array} points 多边形所有的点
+ * @param {boolean=} [close=true] 是否是闭合多边形
+ * @param {boolean=} [anticlockwise=true] false为顺时针，true为逆时针
+ */
+CanvasRenderingContext2D.prototype.drawPolygon = function drawPolygon(
+  points, close = true, anticlockwise = true) {
+  let _points = [...points];
+  // Green公式,判断连续点组成的多边形是逆时针还是顺时针
+  let d = 0;
+  for (let i = 0; i < points.length - 1; i++) {
+    d += -0.5 * (points[i + 1].y + points[i].y) *
+      (points[i + 1].x - points[i].x);
+  }
+  // 顺时针
+  if (d > 0) {
+    if (anticlockwise) {
+      _points.reverse();
+    }
+  } else {
+    // 逆时针
+    if (!anticlockwise) {
+      _points.reverse();
+    }
+  }
+  this.moveTo(_points[0].x, _points[0].y);
+  _points.forEach((point) => {
+    this.lineTo(point.x, point.y);
+  });
+  if (close) {
+    this.lineTo(_points[0].x, _points[0].y);
+  }
 };
 
 // eslint-disable-next-line require-jsdoc

package/src/util/event-emitter.js

@@ -61,7 +61,7 @@ export class EventEmitter {
    */
   $off(eventName, callback, options, target = document) {
     let eventList = this.eventList.filter((ev) =>
-      (ev.target === target || !target) &&
+      (ev.target === target || !target || target === document) &&
       (ev.eventName === eventName || !eventName) &&
       (ev.options === options || options == null) &&
       (ev.callback === callback || !callback));

package/src/view.js

@@ -6,14 +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 {
-  ARROW,
-  BILATERAL,
-  CURVE, DOT,
-  ELLIPSE, FLAG, FONT,
-  LINE,
-  RECTANGLE, STAR,
-} from './const/mark';
+import {MARKS} from './const/mark';
 import {LabelModel} from './model/label.model';
 
 /**
@@ -95,10 +88,6 @@ export default class KfbView extends EventEmitter {
    * @param {Array} list
    */
   initLabelList(list) {
-    this.updateLabelList(list);
-  }
-
-  updateLabelList(list) {
     this.labelList = list.map((item) => new LabelModel({
       ...item,
       region: item.region || pointsToRegion(item.points),
@@ -119,7 +108,7 @@ export default class KfbView extends EventEmitter {
     this.$options.width = width;
     this.$options.height = height;
     Object.values(COMPONENTS).forEach((name) => {
-      if (this[name] && this[name].resetCanvasSize) {
+      if (this[name]?.resetCanvasSize) {
         this[name].resetCanvasSize({width, height});
       }
     });
@@ -130,7 +119,7 @@ export default class KfbView extends EventEmitter {
    */
   change() {
     Object.values(COMPONENTS).forEach((name) => {
-      if (this[name] && this[name].change) {
+      if (this[name]?.change) {
         this[name].change();
       }
     });
@@ -142,10 +131,12 @@ export default class KfbView extends EventEmitter {
   destroy() {
     this.$off();
     this.viewer?.destroy?.();
-    if (this.navigator?.container) {
-      this.$el.removeChild(
-        this.navigator.container);
-    }
+    this.viewer = undefined;
+    this.$el = undefined;
+    Object.values(COMPONENTS).forEach((name) => {
+      this[name]?.destroy?.();
+      this[name] = undefined;
+    });
   }
 }
 
@@ -209,20 +200,20 @@ function initComponents(kv) {
 
 function initNavigator(kv) {
   const config = kv.$options;
-  config.navigator = config.navigator || {disabled: true};
+  config.navigator = config.navigator || {disabled: false};
   if (config.navigator.disabled !== true) {
     if (!config.navigator.style) {
       config.navigator.style = 'bottom: 0;left: 0;';
     }
-    const hzztNavigator = document.createElement('div');
-    hzztNavigator.setAttribute('id', 'hzzt_navigator');
-    hzztNavigator.style.cssText += config.navigator.style;
-    kv.$el.appendChild(hzztNavigator);
-    kv.navigator = new Components.ViewerNavigator({
+    const navigator = document.createElement('div');
+    navigator.setAttribute('class', 'openseadragon-navigator');
+    navigator.style.cssText += config.navigator.style;
+    kv.viewer.container.appendChild(navigator);
+    kv.navigator = new Components.Navigator({
       viewer: kv.viewer,
       containerHeight: config.height,
       containerWidth: config.width,
-      element: hzztNavigator,
+      element: navigator,
       ...config.navigator,
     });
   }
@@ -348,7 +339,7 @@ function handlerLabelEvent(e, kv) {
     label.show = false;
     kv.$emit(EVENTS.EVENT_HIDDEN_LABEL, label);
   }
-  if (e.key === 'Delete' || e.key === 'Backspace' || e.key === 'd') {
+  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]);
@@ -356,18 +347,10 @@ function handlerLabelEvent(e, kv) {
   }
 }
 
-KfbView.marks = {
-  LINE,
-  ARROW,
-  BILATERAL,
-  RECTANGLE,
-  ELLIPSE,
-  CURVE,
-  FONT,
-  STAR,
-  FLAG,
-  DOT,
-};
+KfbView.marks = {};
+MARKS.forEach((key) => {
+  KfbView.marks[key.toLocaleUpperCase()] = key;
+});
 
 KfbView.events = {
   ...EVENTS,