kfb-view 3.1.4 → 3.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kfb-view",
   "description": "一个在线kfb的阅片软件",
-  "version": "3.1.4",
+  "version": "3.2.0",
   "author": "qifeng.fan <qifeng.fan@hzztai.com>",
   "license": "MIT",
   "main": "lib/kfb-view.js",
@@ -22,6 +22,7 @@
     "lint": "eslint --ext .js src"
   },
   "dependencies": {
+    "mitt": "^3.0.1"
   },
   "devDependencies": {
     "axios": "^1.6.5",

package/src/components/area/index.js

@@ -255,8 +255,8 @@ export class Area extends ViewerCommon {
     // 如果是LINE或RECT或ELLIPSE或POLYGON则优先显示范围小的
     if (this.movePoint) {
       this.movePoint.label.select = true;
-      this.$emit(EVENT_SELECT_LABEL, this.movePoint.label);
-      this.$emit(EVENT_AREA_MOVE_START, this.movePoint.label);
+      this.mitt.$emit(EVENT_SELECT_LABEL, this.movePoint.label);
+      this.mitt.$emit(EVENT_AREA_MOVE_START, this.movePoint.label);
       this.draging = true;
     } else if (selectList.length > 0) {
       selectList.sort((a, b) => {
@@ -277,9 +277,9 @@ export class Area extends ViewerCommon {
       selectLabel.select = true;
     }
     selectLabel ?
-      this.$emit(EVENT_SELECT_LABEL, selectLabel) :
+      this.mitt.$emit(EVENT_SELECT_LABEL, selectLabel) :
       !this.movePoint && prevSelectLabel ?
-        this.$emit(EVENT_CANCEL_SELECT_LABEL, prevSelectLabel) : '';
+        this.mitt.$emit(EVENT_CANCEL_SELECT_LABEL, prevSelectLabel) : '';
     this.change();
   }
 
@@ -303,13 +303,13 @@ export class Area extends ViewerCommon {
             ...p,
             canMove: true,
           });
-          this.$emit(EVENT_ADD_POLYGON_POINT, label);
+          this.mitt.$emit(EVENT_ADD_POLYGON_POINT, label);
           this.change();
         } else {
-          this.$emit(EVENT_DB_CLICK_LABEL, label);
+          this.mitt.$emit(EVENT_DB_CLICK_LABEL, label);
         }
       } else {
-        this.$emit(EVENT_DB_CLICK_LABEL, label);
+        this.mitt.$emit(EVENT_DB_CLICK_LABEL, label);
       }
     });
   }
@@ -356,7 +356,7 @@ export class Area extends ViewerCommon {
       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.mitt.$emit(EVENT_AREA_MOVE_END, label);
       }
     }
     this.movePoint = undefined;
@@ -557,7 +557,7 @@ export class Area extends ViewerCommon {
         this.viewerElementToImageCoordinates(_endPoint.x, _endPoint.y)];
     }
     label.region = pointsToRegion(label.points);
-    this.$emit(EVENT_AREA_MOVING, label);
+    this.mitt.$emit(EVENT_AREA_MOVING, label);
     this.lastPoint = {x, y};
   }
 

package/src/components/board/index.js

@@ -157,7 +157,7 @@ export class Board extends ViewerCommon {
       strokeStyle: this.options.thumb.color,
       fillStyle: this.options.thumb.bgColor,
     });
-    this.$emit(EVENT_START_PAINTING, this.getPaintOptions());
+    this.mitt.$emit(EVENT_START_PAINTING, this.getPaintOptions());
   }
 
   /**
@@ -200,7 +200,7 @@ export class Board extends ViewerCommon {
       strokeStyle: this.options.thumb.color,
       fillStyle: this.options.thumb.bgColor,
     });
-    this.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
+    this.mitt.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
   }
 
   /**
@@ -268,7 +268,7 @@ export class Board extends ViewerCommon {
         }
       }
     }
-    this.$emit(EVENT_END_PAINTING, this.getPaintOptions());
+    this.mitt.$emit(EVENT_END_PAINTING, this.getPaintOptions());
     // 是否只绘制一次
     if (this[this.tool].options.once) {
       this.endDraw();
@@ -300,10 +300,10 @@ export class Board extends ViewerCommon {
         return;
       }
     }
-    this.$emit(EVENT_END_PAINTING, this.getPaintOptions());
+    this.mitt.$emit(EVENT_END_PAINTING, this.getPaintOptions());
     // 是否只绘制一次
     if (this[this.tool].options.once) {
-      this.$emit(EVENT_STOP_PAINTING, this.getPaintOptions());
+      this.mitt.$emit(EVENT_STOP_PAINTING, this.getPaintOptions());
       this.endDraw();
     } else if (this[this.tool].options.clear) { // 是否结束绘画时清空画布
       this.points = [];
@@ -340,7 +340,7 @@ export class Board extends ViewerCommon {
         strokeStyle: this.options.thumb.color,
         fillStyle: this.options.thumb.bgColor,
       });
-      this.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
+      this.mitt.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
     }
   }
 
@@ -351,7 +351,7 @@ export class Board extends ViewerCommon {
   onCanvasKey(e) {
     const {originalEvent} = e;
     if (originalEvent.key === 'Escape' && this.isInDraw) {
-      this.$emit(EVENT_STOP_PAINTING, this.getPaintOptions());
+      this.mitt.$emit(EVENT_STOP_PAINTING, this.getPaintOptions());
       this.endDraw();
     }
     if (originalEvent.key === 'Delete' || originalEvent.key ===
@@ -472,6 +472,6 @@ export class Board extends ViewerCommon {
       strokeStyle: this.options.thumb.color,
       fillStyle: this.options.thumb.bgColor,
     });
-    this.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
+    this.mitt.$emit(EVENT_IN_PAINTING, this.getPaintOptions());
   }
 }

package/src/components/common/common.js

@@ -1,4 +1,3 @@
-import {EventEmitter} from '../../util/event-emitter';
 import {Thumb} from '../../tool/Thumb';
 import {
   acreage,
@@ -25,7 +24,7 @@ import {
  * 通用方法类
  * @class
  */
-export class ViewerCommon extends EventEmitter {
+export class ViewerCommon {
   /**
    * 构造函数
    * @param {Object} viewer
@@ -34,12 +33,13 @@ export class ViewerCommon extends EventEmitter {
    * @param {Object} options
    */
   constructor(viewer, canvas, cache, options) {
-    super();
+    const {mitt, ...rest} = options || {};
+    this.mitt = mitt;
     this.viewer = viewer;
     this.cache = cache;
     this.viewport = viewer.viewport;
     this.canvas = canvas;
-    this.options = options || {};
+    this.options = rest || {};
     this.thumb = new Thumb();
     this.thumb.setCanvas(canvas);
   }
@@ -419,6 +419,6 @@ export class ViewerCommon extends EventEmitter {
    * 销毁事件
    */
   destroy() {
-    this.$off();
+    this.mitt.$off();
   }
 }

package/src/components/graduation/index.js

@@ -1,4 +1,5 @@
 import {ViewerCommon} from '../common/common';
+import {EVENT_GRADUATION_CHANGE} from '../../const/event';
 
 /**
  * 刻度线
@@ -47,7 +48,7 @@ export class Graduation extends ViewerCommon {
     const endPoint = this.imageToViewerElementCoordinates(px, 0);
     const width = Math.abs(endPoint.x - startPoint.x);
     if (this.options.custom) {
-      this.$emit('graduation-change', {width, txt});
+      this.mitt.$emit(EVENT_GRADUATION_CHANGE, {width, txt});
     } else {
       this.paintGraduation({width, txt});
     }

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

@@ -33,6 +33,7 @@ export class Tailoring extends ViewerCommon {
       suffix: 'jpeg',
       quality: 0.92,
       resolution: 1200,
+      shape: true,
       ...this.options,
     };
   }
@@ -57,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,
@@ -76,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,
@@ -262,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,
@@ -331,7 +332,7 @@ export class Tailoring extends ViewerCommon {
       copyCtx.fillRect(0, 0, copyCanvas.width, copyCanvas.height);
       copyCtx.putImageData(imageData, 0, 0, 0, 0, disWidth, disHeight);
       const shapeCanvas = this.kv.shape?.canvas;
-      if (shapeCanvas) {
+      if (shapeCanvas && this.options.shape) {
         copyCtx.drawImage(shapeCanvas, startPoint.x * radioX,
           startPoint.y * radioY, disWidth, disHeight, 0, 0, disWidth,
           disHeight);

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();
   }
 }