@toast-ui/chart - npm Package Compare versions

Comparing version 4.3.3 to 4.3.4

dist/esm/charts/chart.d.ts

@@ -45,2 +45,4 @@ import Store from "../store/store";
     clearResizeEvent(): void;
+    handleCanvasMouseEvent(eventType: string, mousePosition: Point): void;
+    handleResponderEvent(event: MouseEvent, mousePosition: Point): void;
     handleEvent(event: MouseEvent): void;
@@ -47,0 +49,0 @@ protected initStore(): void;

dist/esm/charts/chart.js

@@ -18,2 +18,3 @@ import Store from "../store/store";
 import { makeObservableObjectToNormal } from "../store/reactive";
+import { isMouseInRect } from "../helpers/coordinate";
 export const DEFAULT_ANIM_DURATION = 500;
@@ -363,24 +364,8 @@ function getUsingContainerSize(eventName, usingContainerSize, width, height) {
     }
-    handleEvent(event) {
-        const { clientX, clientY, type: eventType } = event;
-        const delegationMethod = `on${eventType[0].toUpperCase() + eventType.substring(1)}`;
-        const canvas = this.painter.ctx.canvas;
-        const canvasRect = canvas.getBoundingClientRect();
-        // Calculate scale for chart affected by a CSS transform.
-        const scaleX = canvasRect.width / canvas.offsetWidth;
-        const scaleY = canvasRect.height / canvas.offsetHeight;
-        const mousePosition = {
-            x: (clientX - canvasRect.left) / scaleX,
-            y: (clientY - canvasRect.top) / scaleY,
-        };
+    handleCanvasMouseEvent(eventType, mousePosition) {
         const newEnteredComponents = [];
-        if (eventType === 'mousemove') {
-            this.componentManager.forEach((component) => {
-                const { x, y, height, width } = component.rect;
+        this.componentManager.forEach((component) => {
+            if (eventType === 'mousemove') {
                 const exist = this.enteredComponents.some((enteredComponent) => enteredComponent === component);
-                const entered = mousePosition.x >= x &&
-                    mousePosition.x <= x + width &&
-                    mousePosition.y >= y &&
-                    mousePosition.y <= y + height;
-                if (entered) {
+                if (isMouseInRect(component.rect, mousePosition)) {
                     newEnteredComponents.push(component);
@@ -394,5 +379,12 @@ if (!exist && component.onMouseenterComponent) {
                 }
-            });
-            this.enteredComponents = newEnteredComponents;
-        }
+            }
+            else if (eventType === 'mouseout' && component.onMouseoutComponent) {
+                component.onMouseoutComponent();
+            }
+        });
+        this.enteredComponents = newEnteredComponents;
+    }
+    handleResponderEvent(event, mousePosition) {
+        const eventType = event.type;
+        const delegationMethod = `on${eventType[0].toUpperCase() + eventType.substring(1)}`;
         const allResponders = [];
@@ -418,2 +410,18 @@ this.componentManager.forEach((component) => {
     }
+    handleEvent(event) {
+        const { clientX, clientY, type: eventType } = event;
+        const canvas = this.painter.ctx.canvas;
+        const { width, height, left, top } = canvas.getBoundingClientRect();
+        // Calculate scale for chart affected by a CSS transform.
+        const scaleX = width / canvas.offsetWidth;
+        const scaleY = height / canvas.offsetHeight;
+        const mousePosition = {
+            x: (clientX - left) / scaleX,
+            y: (clientY - top) / scaleY,
+        };
+        if (eventType === 'mousemove' || eventType === 'mouseout') {
+            this.handleCanvasMouseEvent(eventType, mousePosition);
+        }
+        this.handleResponderEvent(event, mousePosition);
+    }
     initStore() {
@@ -420,0 +428,0 @@ [

dist/esm/helpers/coordinate.d.ts

@@ -9,1 +9,2 @@ import { CoordinateDataType, Point, Rect } from "../../types/options";
 export declare function isModelExistingInRect(rect: Rect, point: Point): boolean;
+export declare function isMouseInRect(rect: Rect, mousePosition: Point): boolean;

dist/esm/helpers/coordinate.js

@@ -45,1 +45,8 @@ import { getFirstValidValue, isNumber, isObject, last } from "./utils";
 }
+export function isMouseInRect(rect, mousePosition) {
+    const { x, y, width, height } = rect;
+    return (mousePosition.x >= x &&
+        mousePosition.x <= x + width &&
+        mousePosition.y >= y &&
+        mousePosition.y <= y + height);
+}

dist/esm/painter.js

@@ -24,2 +24,3 @@ import { message } from "./message";
             canvas.addEventListener('mouseup', this.chart);
+            canvas.addEventListener('mouseout', this.chart);
             const ctx = canvas.getContext('2d');
@@ -26,0 +27,0 @@ if (ctx) {

package.json

 {
   "name": "@toast-ui/chart",
-  "version": "4.3.3",
+  "version": "4.3.4",
   "description": "TOAST UI Application: Chart",
@@ -5,0 +5,0 @@ "main": "dist/toastui-chart.js",

No alert changes

Improved metrics

Total package byte prevSize

3642314

increased by0.05%

Lines of code

66911

increased by0.06%

No dependency changes