kfb-view 3.1.5 → 3.2.1

package/src/components/navigator/index.js

@@ -1,20 +1,20 @@
 import './navigator.scss';
 import {Point} from '../../plugin/openseadragon/openseadragon';
 import {navigatorHtml} from './navigator.html';
-import {EventEmitter} from '../../util/event-emitter';
 import {EVENT_NAVIGATOR_VESTIGE} from '../../const/event';
 
 /**
  * 视图导航器
  * @class
  */
-export class Navigator extends EventEmitter {
+export class Navigator {
   /**
    * 初始化导航器数据
+   * @param {Object=} mitt 事件
    * @param {Object=} rest openseadragon的导航器参数
    */
-  constructor(rest = {}) {
-    super();
+  constructor({mitt, ...rest}) {
+    this.mitt = mitt;
     this.options = rest;
     this.viewport = rest.viewer.viewport;
     this.viewer = rest.viewer;
@@ -24,6 +24,7 @@ export class Navigator extends EventEmitter {
     this.containerHeight = rest.containerHeight || window.innerHeight;
     this.containerWidth = rest.containerWidth || window.innerWidth;
     this.element = rest.element;
+    this.canvas = document.createElement('canvas');
     this.pointList = rest.pointList || [];
     this.loadStatus = false; // 导航图加载状态
     this.init();
@@ -52,42 +53,11 @@ export class Navigator extends EventEmitter {
    */
   init() {
     this.element.innerHTML = navigatorHtml;
-    const navigatorMain = this.element.getElementsByClassName(
-      'navigator-main')[0];
-    this.canvas = this.createNavigatorCanvas();
+    const navigatorMain = this.element.getElementsByClassName('navigator-main')[0];
+    this.rect = this.element.getElementsByClassName('view-rect')[0];
+    this.updateNavigatorImg(this.options.thumbnail);
     navigatorMain.appendChild(this.canvas);
     this.handleMouseDrag(navigatorMain);
-
-    const rect = this.element.getElementsByClassName('view-rect')[0];
-    this.rect = rect;
-    this.$on('rect-change', (e) => {
-      const vLine = navigatorMain.getElementsByClassName('v-line')[0];
-      const hLine = navigatorMain.getElementsByClassName('h-line')[0];
-      vLine.style.left =
-        Math.round(rect.getBoundingClientRect().width / 2 +
-          rect.offsetLeft) + 'px';
-      hLine.style.top =
-        Math.round(rect.getBoundingClientRect().height / 2 +
-          rect.offsetTop) + 'px';
-      vLine.style.backgroundColor = 'red';
-      hLine.style.backgroundColor = 'red';
-    });
-    this.$on('rect-draw', (e) => {
-      const left = rect.offsetLeft;
-      const top = rect.offsetTop;
-      const index = e.detail;
-      const rectObj = {
-        left: left,
-        top: top,
-        width: rect.clientWidth,
-        height: rect.clientHeight,
-        scale: [...this.vestige.zooms].reverse()[index],
-        color: [...this.vestige.colors].reverse()[index],
-      };
-      this.pointList.push(rectObj);
-      this.drawPointList(this.pointList);
-      this.$emit(EVENT_NAVIGATOR_VESTIGE, this.pointList);
-    });
     this.viewer.addHandler('pan', (res) => {
       this.navigatorChange(this.viewport.getZoom(true), res.center);
     });
@@ -96,6 +66,39 @@ export class Navigator extends EventEmitter {
     });
   }
 
+  rectChange() {
+    const navigatorMain = this.element.getElementsByClassName(
+      'navigator-main')[0];
+    const rect = this.rect;
+    const vLine = navigatorMain.getElementsByClassName('v-line')[0];
+    const hLine = navigatorMain.getElementsByClassName('h-line')[0];
+    vLine.style.left =
+      Math.round(rect.getBoundingClientRect().width / 2 +
+        rect.offsetLeft) + 'px';
+    hLine.style.top =
+      Math.round(rect.getBoundingClientRect().height / 2 +
+        rect.offsetTop) + 'px';
+    vLine.style.backgroundColor = 'red';
+    hLine.style.backgroundColor = 'red';
+  }
+
+  rectDraw(index) {
+    const rect = this.rect;
+    const left = rect.offsetLeft;
+    const top = rect.offsetTop;
+    const rectObj = {
+      left: left,
+      top: top,
+      width: rect.clientWidth,
+      height: rect.clientHeight,
+      scale: [...this.vestige.zooms].reverse()[index],
+      color: [...this.vestige.colors].reverse()[index],
+    };
+    this.pointList.push(rectObj);
+    this.drawPointList(this.pointList);
+    this.mitt.$emit(EVENT_NAVIGATOR_VESTIGE, this.pointList);
+  }
+
   /**
    * 绘制一系列点坐标
    * @param {Array} pointList
@@ -129,19 +132,15 @@ export class Navigator extends EventEmitter {
    * 导航器改变
    * @param {number} zoom 缩放倍数
    * @param {Object} refPoint 缩放点
-   * @param {Object=} rect 遮罩层元素
    */
-  navigatorChange(zoom, refPoint, rect) {
+  navigatorChange(zoom, refPoint) {
     if (!this.loadStatus) {
       return;
     }
     if (!refPoint) {
       refPoint = this.viewport.getCenter(true);
     }
-    if (!rect) {
-      rect = this.element.getElementsByClassName('view-rect')[0];
-    }
-    this.setViewRect(rect, refPoint);
+    this.setViewRect(refPoint);
   }
 
   /**
@@ -169,24 +168,6 @@ export class Navigator extends EventEmitter {
    * @param {Document|Element} navigator
    */
   handleMouseDrag(navigator) {
-    /*  this.$on('mousedown', (e) => {
-        this.$on('selectstart', () => 1);
-        this.$on('dragstart', () => 1);
-        this.panTo({
-          x: e.x - navigator.getBoundingClientRect().left,
-          y: e.y - navigator.getBoundingClientRect().top,
-        }, navigator);
-      }, true, navigator);
-
-      this.$on('touchstart', (e) => {
-        const x = e.touches[0].clientX;
-        const y = e.touches[0].clientY;
-        this.panTo({
-          x: x - navigator.getBoundingClientRect().left,
-          y: y - navigator.getBoundingClientRect().top,
-        }, navigator);
-      }, true, navigator);*/
-
     let lastPoint;
     let centerPoint;
     const mouseMove = ({x, y}) => {
@@ -205,8 +186,8 @@ export class Navigator extends EventEmitter {
         x: this.centerPoint.x,
         y: this.centerPoint.y,
       };
-      this.$off('mousemove', mouseMove);
-      this.$off('mouseup', mouseUp);
+      this.mitt.$off('mousemove', mouseMove);
+      this.mitt.$off('mouseup', mouseUp);
     };
     const touchend = () => {
       lastPoint = '';
@@ -214,8 +195,8 @@ export class Navigator extends EventEmitter {
         x: this.centerPoint.x,
         y: this.centerPoint.y,
       };
-      this.$off('touchmove', touchmove);
-      this.$off('touchend', touchend);
+      this.mitt.$off('touchmove', touchmove);
+      this.mitt.$off('touchend', touchend);
     };
     const touchmove = (e) => {
       const x = e.touches[0].clientX;
@@ -229,9 +210,9 @@ export class Navigator extends EventEmitter {
         y: centerPoint.y + distY,
       }, navigator);
     };
-    this.$on('mousedown', (e) => {
-      this.$on('selectstart', () => 1);
-      this.$on('dragstart', () => 1);
+    this.mitt.$on('mousedown', (e) => {
+      this.mitt.$on('selectstart', () => 1);
+      this.mitt.$on('dragstart', () => 1);
       this.panTo({
         x: e.x - navigator.getBoundingClientRect().left,
         y: e.y - navigator.getBoundingClientRect().top,
@@ -240,11 +221,11 @@ export class Navigator extends EventEmitter {
         x: this.centerPoint.x,
         y: this.centerPoint.y,
       };
-      this.$on('mousemove', mouseMove);
-      this.$on('mouseup', mouseUp);
+      this.mitt.$on('mousemove', mouseMove);
+      this.mitt.$on('mouseup', mouseUp);
     }, true, navigator);
 
-    this.$on('touchstart', (e) => {
+    this.mitt.$on('touchstart', (e) => {
       const x = e.touches[0].clientX;
       const y = e.touches[0].clientY;
       this.panTo({
@@ -255,18 +236,17 @@ export class Navigator extends EventEmitter {
         x: this.centerPoint.x,
         y: this.centerPoint.y,
       };
-      this.$on('touchmove', touchmove);
-      this.$on('touchend', touchend);
+      this.mitt.$on('touchmove', touchmove);
+      this.mitt.$on('touchend', touchend);
     }, true, navigator);
   }
 
   /**
    * 设置缩率图上的遮罩区域
-   * @param {Object} rect 缩率图上的长方形元素
    * @param {Object=} point viewport的中心点
    */
-  setViewRect(rect, point) {
-    if (!rect) throw new Error('找不到对应的导航器遮罩元素');
+  setViewRect(point) {
+    if (!this.rect) throw new Error('找不到对应的导航器遮罩元素');
     if (!point) point = this.viewport.getCenter(true);
     const bounds = this.viewport.getHomeBounds();
     const imageBounds = this.viewport.viewportToImageRectangle(bounds);
@@ -284,7 +264,7 @@ export class Navigator extends EventEmitter {
     const currentZoom = this.viewport.getZoom();
     const height = trueHeight * homeZoom / currentZoom;
     const width = trueWidth * homeZoom / currentZoom;
-    rect.style.cssText = `height:${height * ratio}px;
+    this.rect.style.cssText = `height:${height * ratio}px;
     width: ${width * ratio}px;`;
     const refImagePoint = this.viewport.viewportToImageCoordinates(point);
     this.centerPoint = {
@@ -295,10 +275,10 @@ export class Navigator extends EventEmitter {
       y: this.centerPoint.y - height * ratio / 2,
       x: this.centerPoint.x - width * ratio / 2,
     };
-    rect.style.left = refPoint.x + 'px';
-    rect.style.top = refPoint.y + 'px';
-    rect.style.border = '1px solid red';
-    this.$emit('rect-change');
+    this.rect.style.left = refPoint.x + 'px';
+    this.rect.style.top = refPoint.y + 'px';
+    this.rect.style.border = '1px solid red';
+    this.rectChange();
     if (this.vestige.show !== false) {
       if (this.clearTimeId) window.clearTimeout(this.clearTimeId);
       const currentImageZoom = this.viewport.viewportToImageZoom(currentZoom);
@@ -306,49 +286,12 @@ export class Navigator extends EventEmitter {
         (z) => currentImageZoom >= (z / (this.options.scale || 40)));
       if (index !== -1) {
         this.clearTimeId = window.setTimeout(() => {
-          this.$emit('rect-draw', index);
+          this.rectDraw(index);
         }, this.vestige.delay || 1000);
       }
     }
   }
 
-  /**
-   * 创建Navigator的canvas
-   * @return {Object} canvas
-   */
-  createNavigatorCanvas() {
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    const img = new Image(); // 创建img元素
-    img.onload = () => {
-      const imgWidth = img.width;
-      const imgHeight = img.height;
-      let scale = 1;
-      if (imgWidth >= imgHeight) {
-        scale = imgWidth / this.width;
-        const trueHeight = imgHeight / scale;
-        canvas.width = this.width;
-        canvas.height = trueHeight;
-        ctx.drawImage(img, 0, 0, canvas.width, trueHeight);
-      }
-      if (imgHeight > imgWidth) {
-        scale = imgHeight / this.height;
-        const trueWidth = imgWidth / scale;
-        canvas.height = this.height;
-        canvas.width = trueWidth;
-        ctx.drawImage(img, 0, 0, trueWidth, canvas.height);
-      }
-      this.setViewRect(this.element.getElementsByClassName('view-rect')[0]);
-      const colorCanvas = this.element.getElementsByClassName(
-        'navigator-color-rect')[0];
-      colorCanvas.width = this.canvas.width;
-      colorCanvas.height = this.canvas.height;
-      this.loadStatus = true;
-    };
-    img.src = this.options.thumbnail; // 设置图片源地
-    return canvas;
-  }
-
   updateNavigatorImg(url) {
     this.options.thumbnail = url;
     const ctx = this.canvas.getContext('2d');
@@ -373,11 +316,11 @@ export class Navigator extends EventEmitter {
         ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
         ctx.drawImage(img, 0, 0, trueWidth, this.canvas.height);
       }
-      this.setViewRect(this.element.getElementsByClassName('view-rect')[0]);
-      const colorCanvas = this.element.getElementsByClassName(
-        'navigator-color-rect')[0];
+      this.setViewRect();
+      const colorCanvas = this.element.getElementsByClassName('navigator-color-rect')[0];
       colorCanvas.width = this.canvas.width;
       colorCanvas.height = this.canvas.height;
+      this.loadStatus = true;
     };
     img.src = this.options.thumbnail; // 设置图片源地
   }

package/src/components/tailoring/index.js

@@ -58,7 +58,7 @@ export class Tailoring extends ViewerCommon {
       pointList[8]];
     if (now) {
       this.emitTailoringRegion();
-      this.$emit(EVENT_TAILORING_SCREENSHOT, {
+      this.mitt.$emit(EVENT_TAILORING_SCREENSHOT, {
         base64: this.getScreenCanvasImage(),
         region: this.viewerElementToImageRectangle({
           x: this.tailoringPoints[0].x, y: this.tailoringPoints[0].y,
@@ -77,7 +77,7 @@ export class Tailoring extends ViewerCommon {
   }
 
   emitTailoringRegion() {
-    this.$emit(EVENT_TAILORING_REGION, this.viewerElementToImageRectangle({
+    this.mitt.$emit(EVENT_TAILORING_REGION, this.viewerElementToImageRectangle({
       x: this.tailoringPoints[0].x, y: this.tailoringPoints[0].y,
       width: this.tailoringPoints[3].x - this.tailoringPoints[0].x,
       height: this.tailoringPoints[3].y - this.tailoringPoints[0].y,
@@ -263,7 +263,7 @@ export class Tailoring extends ViewerCommon {
   onCanvasDblClick(position) {
     if (this.tailoringPoints.length > 0 && this.isPointInMatrix(position)) {
       this.emitTailoringRegion();
-      this.$emit(EVENT_TAILORING_SCREENSHOT, {
+      this.mitt.$emit(EVENT_TAILORING_SCREENSHOT, {
         base64: this.getScreenCanvasImage(),
         region: this.viewerElementToImageRectangle({
           x: this.tailoringPoints[0].x, y: this.tailoringPoints[0].y,

package/src/const/event.js

@@ -18,3 +18,4 @@ 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';
+export const EVENT_GRADUATION_CHANGE = 'graduation-change';

package/src/util/calculate.js

@@ -450,6 +450,10 @@ function perimeter(type, startPoint, endPoint, imageCapRes = 1) {
   return pt;
 }
 
+const getRandomId = () => {
+  return (((1 + Math.random()) * 0x100000000) | 0).toString(16).substring(1);
+};
+
 export {
   getRectPoint,
   isPointInMatrix,
@@ -467,4 +471,5 @@ export {
   getAngle,
   getDistance,
   calculatePolygonArea,
+  getRandomId,
 };

package/src/util/event-emitter.js

@@ -1,3 +1,9 @@
+import * as EVENTS from '../const/event';
+import mitt from 'mitt';
+import {getRandomId} from './calculate';
+
+const globalEvent = mitt();
+
 /**
  * 事件类
  * @class
@@ -9,6 +15,7 @@ export class EventEmitter {
    */
   constructor() {
     this.eventList = [];
+    this.key = getRandomId();
   }
 
   /**
@@ -18,11 +25,15 @@ export class EventEmitter {
    * @param {Document|Element} [target = document]
    */
   $emit(eventName, data, target = document) {
-    const customEvent = new CustomEvent(eventName, {
-      bubbles: true,
-      detail: data,
-    });
-    target.dispatchEvent(customEvent);
+    if (Object.values(EVENTS).includes(eventName)) {
+      globalEvent.emit(`${this.key}_${eventName}`, data);
+    } else {
+      const customEvent = new CustomEvent(eventName, {
+        bubbles: true,
+        detail: data,
+      });
+      target.dispatchEvent(customEvent);
+    }
   }
 
   /**
@@ -33,8 +44,12 @@ export class EventEmitter {
    * @param {Document|Element} [target = document]
    */
   $on(eventName, callback, options = true, target = document) {
-    target.addEventListener(eventName, callback, options);
-    this.eventList.push({target, eventName, callback, options});
+    if (Object.values(EVENTS).includes(eventName)) {
+      globalEvent.on(`${this.key}_${eventName}`, callback);
+    } else {
+      target.addEventListener(eventName, callback, options);
+      this.eventList.push({target, eventName, callback, options});
+    }
   }
 
   /**
@@ -60,16 +75,20 @@ export class EventEmitter {
    * @param {Document|Element} [target = document]
    */
   $off(eventName, callback, options, target = document) {
-    let eventList = this.eventList.filter((ev) =>
-      (ev.target === target || !target || target === document) &&
-      (ev.eventName === eventName || !eventName) &&
-      (ev.options === options || options == null) &&
-      (ev.callback === callback || !callback));
-    eventList.forEach((ev) => {
-      ev.target.removeEventListener(ev.eventName, ev.callback, ev.options);
-      const index = this.eventList.findIndex((e) => e === ev);
-      if (~index) this.eventList.splice(index, 1);
-    });
+    if (Object.values(EVENTS).includes(eventName)) {
+      globalEvent.off(`${this.key}_${eventName}`, callback);
+    } else {
+      let eventList = this.eventList.filter((ev) =>
+        (ev.target === target || !target || target === document) &&
+        (ev.eventName === eventName || !eventName) &&
+        (ev.options === options || options == null) &&
+        (ev.callback === callback || !callback));
+      eventList.forEach((ev) => {
+        ev.target.removeEventListener(ev.eventName, ev.callback, ev.options);
+        const index = this.eventList.findIndex((e) => e === ev);
+        if (~index) this.eventList.splice(index, 1);
+      });
+    }
   }
 
   /**
@@ -77,5 +96,6 @@ export class EventEmitter {
    */
   destroy() {
     this.$off();
+    globalEvent.all.clear();
   }
 }

package/src/util/index.js

@@ -64,9 +64,23 @@ function delayedTrigger(callback, time = 1000) {
   };
 }
 
+function getUnitNumber(number, units, binary, index = 0) {
+  let i = number;
+  while (i >= binary) {
+    i = i / binary;
+    index++;
+  }
+  if (!units[index]) {
+    index = units.length - 1;
+  }
+  return (number / Math.pow(binary, index)).toFixed(2) / 1 + units[index];
+}
+
+
 export {
   $,
   dataType,
   deepClone,
   delayedTrigger,
+  getUnitNumber,
 };

package/src/view.js

@@ -35,7 +35,9 @@ export default class KfbView extends EventEmitter {
    * @param {number[]=} config.navigator.vestige.zooms 浏览痕迹触发倍率
    * @param {Object} config.pxConversion 像素转换参数
    * @param {number} config.pxConversion.imageCapRes 像素转换倍率
+   * @param {string[]=} config.pxConversion.units 单位组
    * @param {string} config.pxConversion.unit 单位
+   * @param {number} config.pxConversion.binary 几进制, 2, 16, 24, 1000
    * @param {Object} config.area 交互区域,触发点击、拖动等事件
    * @param {boolean=} config.area.disabled 是否禁用area
    * @param {boolean=} config.area.drag 是否允许拖动
@@ -63,7 +65,9 @@ export default class KfbView extends EventEmitter {
    * @param {boolean=} config.graduation.disabled 是否禁用刻度
    * @param {boolean=} config.graduation.show 是否显刻度
    * @param {boolean=} config.graduation.custom 是否自定义刻度,抛出graduation-change事件
-   * @param {array=} config.graduation.scales 倍率数组
+   * @param {Object} config.graduation.tick 刻度线参数
+   * @param {number=} config.graduation.tick.height 刻度线高度
+   * @param {number=} config.graduation.tick.number 刻度线段落
    * @param {array=} config.graduation.microns 刻度长度数组，在对应倍率范围内显示的刻度长度
    * @param {boolean=} config.grid.disabled 是否禁用网格线
    * @param {boolean=} config.grid.show 是否显示网格线
@@ -107,6 +111,14 @@ export default class KfbView extends EventEmitter {
       width,
       height,
     };
+    this.mitt = {
+      $on: this.$on,
+      $emit: this.$emit,
+      $off: this.$off,
+      $once: this.$once,
+      key: this.key,
+      eventList: this.eventList,
+    };
     initOpenDragon(this);
     initComponents(this);
     initEvent(this);
@@ -257,6 +269,7 @@ function initNavigator(kv) {
       containerWidth: config.width,
       element: navigator,
       scale: config.scale,
+      mitt: kv.mitt,
       ...config.navigator,
     });
   }
@@ -276,13 +289,14 @@ function createCanvas(kv) {
 
 function initComponentsOptions(kv, type) {
   const config = kv.$options;
-  const pxConversion = config.pxConversion || {imageCapRes: 1, unit: ''};
+  const pxConversion = config.pxConversion || {imageCapRes: 1, units: []};
   return {
     kv,
     viewer: kv.viewer,
     cache: kv.cache,
     canvas: createCanvas(kv),
     options: {
+      mitt: kv.mitt,
       scale: config.scale,
       labelDrawing: config.labelDrawing,
       label: config.label || {},
@@ -296,6 +310,7 @@ function initComponentsOptions(kv, type) {
       },
       ...config[type],
       ...pxConversion,
+      units: pxConversion.units ?? [pxConversion.unit ?? ''], // 兼容之前只显示一个的单位
       thumb: config.thumb ? {
         radius: 5,
         activeRadius: 7,