zrender - npm Package Compare versions

Comparing version 5.3.2 to 5.4.0

lib/canvas/Layer.js

@@ -259,2 +259,4 @@ import { __extends } from "tslib";
                 else if (util.isImagePatternObject(clearColor)) {
+                    clearColor.scaleX = clearColor.scaleX || dpr;
+                    clearColor.scaleY = clearColor.scaleY || dpr;
                     clearColorGradientOrPattern = createCanvasPattern(ctx, clearColor, {
@@ -261,0 +263,0 @@ dirty: function () {

lib/core/dom.d.ts

 export declare function transformLocalCoord(out: number[], elFrom: HTMLElement, elTarget: HTMLElement, inX: number, inY: number): boolean;
 export declare function transformCoordWithViewport(out: number[], el: HTMLElement, inX: number, inY: number, inverse?: boolean): boolean;
 export declare function isCanvasEl(el: HTMLElement): el is HTMLCanvasElement;
+export declare function encodeHTML(source: string): string;

lib/core/dom.js

@@ -80,1 +80,16 @@ import env from './env.js';
 }
+var replaceReg = /([&<>"'])/g;
+var replaceMap = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    '\'': '&#39;'
+};
+export function encodeHTML(source) {
+    return source == null
+        ? ''
+        : (source + '').replace(replaceReg, function (str, c) {
+            return replaceMap[c];
+        });
+}

lib/graphic/Displayable.d.ts

@@ -26,2 +26,3 @@ import Element, { ElementProps, ElementStatePropNames, ElementAnimateConfig, ElementCommonState } from '../Element';
     incremental?: boolean;
+    ignoreCoarsePointer?: boolean;
     batch?: boolean;
@@ -51,2 +52,3 @@ invisible?: boolean;
     incremental: boolean;
+    ignoreCoarsePointer?: boolean;
     style: Dictionary<any>;
@@ -53,0 +55,0 @@ protected _normalState: DisplayableState;

lib/Handler.d.ts

@@ -24,6 +24,7 @@ import Eventful from './core/Eventful';
     private _draggingMgr;
+    private _pointerSize;
     _downEl: Element;
     _upEl: Element;
     _downPoint: [number, number];
-    constructor(storage: Storage, painter: PainterBase, proxy: HandlerProxyInterface, painterRoot: HTMLElement);
+    constructor(storage: Storage, painter: PainterBase, proxy: HandlerProxyInterface, painterRoot: HTMLElement, pointerSize: number);
     setHandlerProxy(proxy: HandlerProxyInterface): void;
@@ -30,0 +31,0 @@ mousemove(event: ZRRawEvent): void;

lib/Handler.js

@@ -8,2 +8,3 @@ import { __extends } from "tslib";
 import { GestureMgr } from './core/GestureMgr.js';
+import BoundingRect from './core/BoundingRect.js';
 var SILENT = 'silent';
@@ -54,5 +55,6 @@ function makeEventPacket(eveType, targetInfo, event) {
 ];
+var tmpRect = new BoundingRect(0, 0, 0, 0);
 var Handler = (function (_super) {
     __extends(Handler, _super);
-    function Handler(storage, painter, proxy, painterRoot) {
+    function Handler(storage, painter, proxy, painterRoot, pointerSize) {
         var _this = _super.call(this) || this;
@@ -63,2 +65,3 @@ _this._hovered = new HoveredResult(0, 0);
         _this.painterRoot = painterRoot;
+        _this._pointerSize = pointerSize;
         proxy = proxy || new EmptyProxy();
@@ -164,13 +167,38 @@ _this.proxy = null;
         var out = new HoveredResult(x, y);
-        for (var i = list.length - 1; i >= 0; i--) {
-            var hoverCheckResult = void 0;
-            if (list[i] !== exclude
-                && !list[i].ignore
-                && (hoverCheckResult = isHover(list[i], x, y))) {
-                !out.topTarget && (out.topTarget = list[i]);
-                if (hoverCheckResult !== SILENT) {
-                    out.target = list[i];
-                    break;
+        setHoverTarget(list, out, x, y, exclude);
+        if (this._pointerSize && !out.target) {
+            var candidates = [];
+            var pointerSize = this._pointerSize;
+            var targetSizeHalf = pointerSize / 2;
+            var pointerRect = new BoundingRect(x - targetSizeHalf, y - targetSizeHalf, pointerSize, pointerSize);
+            for (var i = list.length - 1; i >= 0; i--) {
+                var el = list[i];
+                if (el !== exclude
+                    && !el.ignore
+                    && !el.ignoreCoarsePointer
+                    && (!el.parent || !el.parent.ignoreCoarsePointer)) {
+                    tmpRect.copy(el.getBoundingRect());
+                    if (el.transform) {
+                        tmpRect.applyTransform(el.transform);
+                    }
+                    if (tmpRect.intersect(pointerRect)) {
+                        candidates.push(el);
+                    }
                 }
             }
+            if (candidates.length) {
+                var rStep = 4;
+                var thetaStep = Math.PI / 12;
+                var PI2 = Math.PI * 2;
+                for (var r = 0; r < targetSizeHalf; r += rStep) {
+                    for (var theta = 0; theta < PI2; theta += thetaStep) {
+                        var x1 = x + r * Math.cos(theta);
+                        var y1 = y + r * Math.sin(theta);
+                        setHoverTarget(candidates, out, x1, y1, exclude);
+                        if (out.target) {
+                            return out;
+                        }
+                    }
+                }
+            }
         }
@@ -252,2 +280,17 @@ return out;
 }
+function setHoverTarget(list, out, x, y, exclude) {
+    for (var i = list.length - 1; i >= 0; i--) {
+        var el = list[i];
+        var hoverCheckResult = void 0;
+        if (el !== exclude
+            && !el.ignore
+            && (hoverCheckResult = isHover(el, x, y))) {
+            !out.topTarget && (out.topTarget = el);
+            if (hoverCheckResult !== SILENT) {
+                out.target = el;
+                break;
+            }
+        }
+    }
+}
 function isOutsideBoundary(handlerInstance, x, y) {
@@ -254,0 +297,0 @@ var painter = handlerInstance.painter;

lib/svg/core.js

 import { keys, map } from '../core/util.js';
+import { encodeHTML } from '../core/dom.js';
 export var SVGNS = 'http://www.w3.org/2000/svg';
@@ -45,3 +46,3 @@ export var XLINKNS = 'http://www.w3.org/1999/xlink';
         return createElementOpen(tag, attrs)
-            + (el.text || '')
+            + encodeHTML(el.text)
             + (children ? "" + S + map(children, function (child) { return convertElToString(child); }).join(S) + S : '')
@@ -48,0 +49,0 @@ + createElementClose(tag);

lib/svg/helper/ShadowManager.js

@@ -41,3 +41,3 @@ import { __extends } from "tslib";
             displayable._shadowDom = null;
-            svgElement.removeAttribute('filter');
+            svgElement.style.filter = '';
         }
@@ -72,3 +72,3 @@ };
         var id = shadowDom.getAttribute('id');
-        svgElement.setAttribute('filter', 'url(#' + id + ')');
+        svgElement.style.filter = 'url(#' + id + ')';
     };
@@ -75,0 +75,0 @@ ShadowManager.prototype.removeUnused = function () {

lib/tool/color.js

@@ -201,9 +201,11 @@ import LRU from '../core/LRU.js';
             case 'rgb':
-                if (params.length !== 3) {
+                if (params.length >= 3) {
+                    setRgba(rgbaArr, parseCssInt(params[0]), parseCssInt(params[1]), parseCssInt(params[2]), params.length === 3 ? alpha : parseCssFloat(params[3]));
+                    putToCache(colorStr, rgbaArr);
+                    return rgbaArr;
+                }
+                else {
                     setRgba(rgbaArr, 0, 0, 0, 1);
                     return;
                 }
-                setRgba(rgbaArr, parseCssInt(params[0]), parseCssInt(params[1]), parseCssInt(params[2]), alpha);
-                putToCache(colorStr, rgbaArr);
-                return rgbaArr;
             case 'hsla':
@@ -210,0 +212,0 @@ if (params.length !== 4) {

lib/zrender.d.ts

@@ -78,2 +78,4 @@ /*!
     useDirtyRect?: boolean;
+    useCoarsePointer?: 'auto' | boolean;
+    pointerSize?: number;
     ssr?: boolean;
@@ -86,5 +88,5 @@ }
 export declare function registerPainter(name: string, Ctor: PainterBaseCtor): void;
-export declare const version = "5.3.2";
+export declare const version = "5.4.0";
 export interface ZRenderType extends ZRender {
 }
 export {};

lib/zrender.js

@@ -74,3 +74,12 @@ /*!
             : null;
-        this.handler = new Handler(storage, painter, handerProxy, painter.root);
+        var useCoarsePointer = opts.useCoarsePointer;
+        var usePointerSize = (useCoarsePointer == null || useCoarsePointer === 'auto')
+            ? env.touchEventsSupported
+            : !!useCoarsePointer;
+        var defaultPointerSize = 44;
+        var pointerSize;
+        if (usePointerSize) {
+            pointerSize = zrUtil.retrieve2(opts.pointerSize, defaultPointerSize);
+        }
+        this.handler = new Handler(storage, painter, handerProxy, painter.root, pointerSize);
         this.animation = new Animation({
@@ -256,3 +265,3 @@ stage: {
 }
-export var version = '5.3.2';
+export var version = '5.4.0';
 ;

package.json

 {
   "name": "zrender",
-  "version": "5.3.2",
+  "version": "5.4.0",
   "description": "A lightweight graphic library providing 2d draw for Apache ECharts",
@@ -45,4 +45,4 @@ "keywords": [
     "@types/jest": "^27.0.2",
-    "@typescript-eslint/eslint-plugin": "^4.9.1",
-    "@typescript-eslint/parser": "^4.9.1",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
     "chalk": "^3.0.0",
@@ -49,0 +49,0 @@ "commander": "2.11.0",

src/canvas/Layer.ts

@@ -438,2 +438,5 @@ import * as util from '../core/util';
                 else if (util.isImagePatternObject(clearColor)) {
+                    // scale pattern by dpr
+                    clearColor.scaleX = clearColor.scaleX || dpr;
+                    clearColor.scaleY = clearColor.scaleY || dpr;
                     clearColorGradientOrPattern = createCanvasPattern(
@@ -480,3 +483,3 @@ ctx, clearColor, {
 
-    // Iterface of refresh
+    // Interface of refresh
     refresh: (clearColor?: string | GradientObject | ImagePatternObject) => void
@@ -505,2 +508,2 @@
     ondrop: ElementEventCallback<unknown, this>
-}
+}

src/core/dom.ts

 
 import env from './env';
 import {buildTransformer} from './fourPointsTransform';
+import {Dictionary} from './types';
 
@@ -170,1 +171,18 @@ const EVENT_SAVED_PROP = '___zrEVENTSAVED';
 }
+
+const replaceReg = /([&<>"'])/g;
+const replaceMap: Dictionary<string> = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    '\'': '&#39;'
+};
+
+export function encodeHTML(source: string): string {
+    return source == null
+        ? ''
+        : (source + '').replace(replaceReg, function (str, c) {
+            return replaceMap[c];
+        });
+}

src/core/event.ts

@@ -312,4 +312,3 @@ /**
 
-
 // For backward compatibility
 export {Eventful as Dispatcher};

src/graphic/Displayable.ts

@@ -69,2 +69,4 @@ /**
 
+    ignoreCoarsePointer?: boolean
+
     batch?: boolean
@@ -131,2 +133,7 @@ invisible?: boolean
 
+    /**
+     * Never increase to target size
+     */
+    ignoreCoarsePointer?: boolean
+
     style: Dictionary<any>
@@ -133,0 +140,0 @@

src/Handler.ts

@@ -14,4 +14,4 @@ import * as util from './core/util';
 import CanvasPainter from './canvas/Painter';
+import BoundingRect from './core/BoundingRect';
 
-
 /**
@@ -135,2 +135,4 @@ * [The interface between `Handler` and `HandlerProxy`]:
 
+const tmpRect = new BoundingRect(0, 0, 0, 0);
+
 // TODO draggable
@@ -151,2 +153,4 @@ class Handler extends Eventful {
 
+    private _pointerSize: number
+
     _downEl: Element
@@ -160,3 +164,4 @@ _upEl: Element
         proxy: HandlerProxyInterface,
-        painterRoot: HTMLElement
+        painterRoot: HTMLElement,
+        pointerSize: number
     ) {
@@ -171,2 +176,4 @@ super();
 
+        this._pointerSize = pointerSize;
+
         proxy = proxy || new EmptyProxy();
@@ -345,16 +352,53 @@
         const out = new HoveredResult(x, y);
+        setHoverTarget(list, out, x, y, exclude);
 
-        for (let i = list.length - 1; i >= 0; i--) {
-            let hoverCheckResult;
-            if (list[i] !== exclude
-                // getDisplayList may include ignored item in VML mode
-                && !list[i].ignore
-                && (hoverCheckResult = isHover(list[i], x, y))
-            ) {
-                !out.topTarget && (out.topTarget = list[i]);
-                if (hoverCheckResult !== SILENT) {
-                    out.target = list[i];
-                    break;
+        if (this._pointerSize && !out.target) {
+            /**
+             * If no element at pointer position, check intersection with
+             * elements with pointer enlarged by target size.
+             */
+            const candidates: Displayable[] = [];
+            const pointerSize = this._pointerSize;
+            const targetSizeHalf = pointerSize / 2;
+            const pointerRect = new BoundingRect(x - targetSizeHalf, y - targetSizeHalf, pointerSize, pointerSize);
+
+            for (let i = list.length - 1; i >= 0; i--) {
+                const el = list[i];
+                if (el !== exclude
+                    && !el.ignore
+                    && !el.ignoreCoarsePointer
+                    // If an element ignores, its textContent should also ignore.
+                    // TSpan's parent is not a Group but a ZRText.
+                    // See Text.js _getOrCreateChild
+                    && (!el.parent || !(el.parent as any).ignoreCoarsePointer)
+                ) {
+                    tmpRect.copy(el.getBoundingRect());
+                    if (el.transform) {
+                        tmpRect.applyTransform(el.transform);
+                    }
+                    if (tmpRect.intersect(pointerRect)) {
+                        candidates.push(el);
+                    }
                 }
             }
+
+            /**
+             * If there are elements whose bounding boxes are near the pointer,
+             * use the most top one that intersects with the enlarged pointer.
+             */
+            if (candidates.length) {
+                const rStep = 4;
+                const thetaStep = Math.PI / 12;
+                const PI2 = Math.PI * 2;
+                for (let r = 0; r < targetSizeHalf; r += rStep) {
+                    for (let theta = 0; theta < PI2; theta += thetaStep) {
+                        const x1 = x + r * Math.cos(theta);
+                        const y1 = y + r * Math.sin(theta);
+                        setHoverTarget(candidates, out, x1, y1, exclude);
+                        if (out.target) {
+                            return out;
+                        }
+                    }
+                }
+            }
         }
@@ -477,2 +521,26 @@
 
+function setHoverTarget(
+    list: Displayable[],
+    out: HoveredResult,
+    x: number,
+    y: number,
+    exclude: Displayable
+) {
+    for (let i = list.length - 1; i >= 0; i--) {
+        const el = list[i];
+        let hoverCheckResult;
+        if (el !== exclude
+            // getDisplayList may include ignored item in VML mode
+            && !el.ignore
+            && (hoverCheckResult = isHover(el, x, y))
+        ) {
+            !out.topTarget && (out.topTarget = el);
+            if (hoverCheckResult !== SILENT) {
+                out.target = el;
+                break;
+            }
+        }
+    }
+}
+
 /**
@@ -479,0 +547,0 @@ * See [DRAG_OUTSIDE].

src/svg/core.ts

 import { keys, map } from '../core/util';
+import { encodeHTML } from '../core/dom';
 
@@ -74,3 +75,3 @@ export type CSSSelectorVNode = Record<string, string>
         return createElementOpen(tag, attrs)
-            + (el.text || '')
+            + encodeHTML(el.text)
             + (children ? `${S}${map(children, child => convertElToString(child)).join(S)}${S}` : '')
@@ -77,0 +78,0 @@ + createElementClose(tag);

src/tool/color.ts

@@ -236,17 +236,19 @@ import LRU from '../core/LRU';
                 }
-                alpha = parseCssFloat(params.pop() as string); // jshint ignore:line
+                alpha = parseCssFloat(params.pop()); // jshint ignore:line
             // Fall through.
             case 'rgb':
-                if (params.length !== 3) {
+                if (params.length >= 3) {
+                    setRgba(rgbaArr,
+                        parseCssInt(params[0]),
+                        parseCssInt(params[1]),
+                        parseCssInt(params[2]),
+                        params.length === 3 ? alpha : parseCssFloat(params[3])
+                    );
+                    putToCache(colorStr, rgbaArr);
+                    return rgbaArr;
+                }
+                else {
                     setRgba(rgbaArr, 0, 0, 0, 1);
                     return;
                 }
-                setRgba(rgbaArr,
-                    parseCssInt(params[0]),
-                    parseCssInt(params[1]),
-                    parseCssInt(params[2]),
-                    alpha
-                );
-                putToCache(colorStr, rgbaArr);
-                return rgbaArr;
             case 'hsla':
@@ -257,3 +259,3 @@ if (params.length !== 4) {
                 }
-                params[3] = parseCssFloat(params[3] as string);
+                params[3] = parseCssFloat(params[3]);
                 hsla2rgba(params, rgbaArr);
@@ -260,0 +262,0 @@ putToCache(colorStr, rgbaArr);

src/zrender.ts

@@ -129,4 +129,15 @@ /*!
             : null;
-        this.handler = new Handler(storage, painter, handerProxy, painter.root);
 
+        const useCoarsePointer = opts.useCoarsePointer;
+        const usePointerSize = (useCoarsePointer == null || useCoarsePointer === 'auto')
+            ? env.touchEventsSupported
+            : !!useCoarsePointer;
+        const defaultPointerSize = 44;
+        let pointerSize;
+        if (usePointerSize) {
+            pointerSize = zrUtil.retrieve2(opts.pointerSize, defaultPointerSize);
+        }
+
+        this.handler = new Handler(storage, painter, handerProxy, painter.root, pointerSize);
+
         this.animation = new Animation({
@@ -429,2 +440,4 @@ stage: {
     useDirtyRect?: boolean
+    useCoarsePointer?: 'auto' | boolean
+    pointerSize?: number
     ssr?: boolean   // If enable ssr mode.
@@ -477,5 +490,5 @@ }
  */
-export const version = '5.3.2';
+export const version = '5.4.0';
 
 
 export interface ZRenderType extends ZRender {};

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4807914

increased by18.21%

Number of package files

519

increased by33.08%

Lines of code

69901

increased by6.02%

Worsened metrics

Number of low supply chain risk alerts

23

increased by4.55%

No dependency changes