zrender - npm Package Compare versions

Comparing version 3.0.1 to 3.0.2

package.json

 {
-    "name": "zrender",
-    "version": "3.0.1",
-    "description": "A lightweight canvas library.",
-    "keywords": [
-        "canvas",
-        "2d"
-    ],
-    "author": [{
-        "name": "Kenner",
-        "email": "[e-mail]"
-    }, {
-        "name": "Yi Shen",
-        "url": "https://github.com/pissang"
-    }, {
-        "name": "Shuang Su",
-        "url": "https://github.com/100pah"
-    }],
-    "contributors": [{
-        "name": "erik",
-        "email": "[e-mail]"
-    }],
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/ecomfe/zrender.git"
-    },
-    "license": "BSD",
-    "main": "build/zrender.min.js",
-    "files": [
-        "build",
-        "src"
-    ]
+  "name": "zrender",
+  "version": "3.0.2",
+  "description": "A lightweight canvas library.",
+  "keywords": [
+    "canvas",
+    "2d"
+  ],
+  "author": [{
+    "name": "Kenner",
+    "email": "[e-mail]"
+  }, {
+    "name": "Yi Shen",
+    "url": "https://github.com/pissang"
+  }, {
+    "name": "Shuang Su",
+    "url": "https://github.com/100pah"
+  }],
+  "contributors": [{
+    "name": "erik",
+    "email": "[e-mail]"
+  }],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ecomfe/zrender.git"
+  },
+  "scripts": {
+    "prepublish": "node build/amd2common.bundle.js"
+  },
+  "license": "BSD",
+  "main": "lib/zrender.js"
 }

src/core/env.js

@@ -8,7 +8,7 @@ /**
  */
-define(function() {
-
+define(function () {
+    var env = {};
     if (typeof navigator === 'undefined') {
         // In node
-        return {
+        env = {
             browser: {},
@@ -21,2 +21,8 @@ os: {},
     }
+    else {
+        env = detect(navigator.userAgent);
+    }
+
+    return env;
+
     // Zepto.js
@@ -27,4 +33,4 @@ // (c) 2010-2013 Thomas Fuchs
     function detect(ua) {
-        var os = this.os = {};
-        var browser = this.browser = {};
+        var os = {};
+        var browser = {};
         var webkit = ua.match(/Web[kK]it[\/]{0,1}([\d.]+)/);
@@ -45,6 +51,8 @@ var android = ua.match(/(Android);?[\s\/]+([\d.]+)?/);
         var firefox = ua.match(/Firefox\/([\d.]+)/);
-        var ie = ua.match(/MSIE ([\d.]+)/);
         var safari = webkit && ua.match(/Mobile\//) && !chrome;
         var webview = ua.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/) && !chrome;
-        var ie = ua.match(/MSIE\s([\d.]+)/);
+        var ie = ua.match(/MSIE\s([\d.]+)/)
+            // IE 11 Trident/7.0; rv:11.0
+            || ua.match(/Trident\/.+?rv:(([\d.]+))/);
+        var edge = ua.match(/Edge\/([\d.]+)/); // IE 12 and 12+
 
@@ -78,2 +86,3 @@ // Todo: clean this up with a better OS/browser seperation:
         if (ie) browser.ie = true, browser.version = ie[1];
+        if (edge) browser.edge = true, browser.version = edge[1];
 
@@ -94,8 +103,13 @@ os.tablet = !!(ipad || playbook || (android && !ua.match(/Mobile/)) ||
             // @see <http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript>
-            touchEventsSupported: 'ontouchstart' in window  // works on most browsers
-                || navigator.maxTouchPoints                 // works on IE10/11 and Surface
+            // works on most browsers
+            // IE10/11 does not support touch event, and MS Edge supports them but not by
+            // default, so we dont check navigator.maxTouchPoints for them here.
+            touchEventsSupported: 'ontouchstart' in window && !browser.ie && !browser.edge,
+            // <http://caniuse.com/#search=pointer%20event>.
+            pointerEventsSupported: 'onpointerdown' in window
+                // Firefox supports pointer but not by default,
+                // only MS browsers are reliable on pointer events currently.
+                && (browser.edge || (browser.ie && browser.version >= 10))
         };
     }
-
-    return detect(navigator.userAgent);
 });

src/graphic/helper/roundRect.js

@@ -10,7 +10,17 @@ define(function (require) {
             var r = shape.r;
-            var r1; 
-            var r2; 
-            var r3; 
+            var r1;
+            var r2;
+            var r3;
             var r4;
-              
+
+            // Convert width and height to positive for better borderRadius
+            if (width < 0) {
+                x = x + width;
+                width = -width;
+            }
+            if (height < 0) {
+                y = y + height;
+                height = -height;
+            }
+
             if (typeof r === 'number') {
@@ -42,3 +52,3 @@ r1 = r2 = r3 = r4 = r;
             }
-            
+
             var total;
@@ -82,2 +92,2 @@ if (r1 + r2 > width) {
     }
-}); 
+});

src/graphic/Path.js

@@ -150,3 +150,7 @@ /**
                 var lineScale = style.strokeNoScale ? this.getLineScale() : 1;
-                w = Math.max(w, this.strokeContainThreshold);
+
+                // Only add extra hover lineWidth when there are no fill
+                if (!pathHasFill(style)) {
+                    w = Math.max(w, this.strokeContainThreshold);
+                }
                 // Consider line width
@@ -179,11 +183,13 @@ // Line scale can't be 0;
                     // Line scale can't be 0;
-                    if (lineScale < 1e-10) {
-                        return false;
+                    if (lineScale > 1e-10) {
+                        // Only add extra hover lineWidth when there are no fill
+                        if (!pathHasFill(style)) {
+                            lineWidth = Math.max(lineWidth, this.strokeContainThreshold);
+                        }
+                        if (pathContain.containStroke(
+                            pathData, lineWidth / lineScale, x, y
+                        )) {
+                            return true;
+                        }
                     }
-                    lineWidth = Math.max(lineWidth, this.strokeContainThreshold);
-                    if (pathContain.containStroke(
-                        pathData, lineWidth / lineScale, x, y
-                    )) {
-                        return true;
-                    }
                 }
@@ -190,0 +196,0 @@ if (pathHasFill(style)) {

src/Handler.js

@@ -20,6 +20,8 @@ /**
 
-    var domHandlerNames = [
-        'click', 'dblclick',
-        'mousewheel', 'mousemove', 'mouseout', 'mouseup', 'mousedown'
+    var mouseHandlerNames = [
+        'click', 'dblclick', 'mousewheel', 'mouseout'
     ];
+    !usePointerEvent() && mouseHandlerNames.push(
+        'mouseup', 'mousedown', 'mousemove'
+    );
 
@@ -30,2 +32,6 @@ var touchHandlerNames = [
 
+    var pointerHandlerNames = [
+        'pointerdown', 'pointerup', 'pointermove'
+    ];
+
     var TOUCH_CLICK_DELAY = 300;
@@ -45,6 +51,2 @@
 
-    function proxyEventName(name) {
-        return '_' + name + 'Handler';
-    }
-
     function makeEventPacket(eveType, target, event) {
@@ -143,5 +145,7 @@ return {
             // Trigger mousemove and mousedown
-            this._mousemoveHandler(event);
+            domHandlers.mousemove.call(this, event);
 
-            this._mousedownHandler(event);
+            domHandlers.mousedown.call(this, event);
+
+            setTouchTimer(this);
         },
@@ -163,3 +167,5 @@
             // be used at the same time.
-            this._mousemoveHandler(event);
+            domHandlers.mousemove.call(this, event);
+
+            setTouchTimer(this);
         },
@@ -178,3 +184,3 @@
 
-            this._mouseupHandler(event);
+            domHandlers.mouseup.call(this, event);
 
@@ -185,4 +191,6 @@ // click event should always be triggered no matter whether
                 // this._mobileFindFixed(event);
-                this._clickHandler(event);
+                domHandlers.click.call(this, event);
             }
+
+            setTouchTimer(this);
         }
@@ -195,3 +203,2 @@ };
             event = normalizeEvent(this.root, event);
-
             // Find hover again to avoid click event is dispatched manually. Or click is triggered without mouseover
@@ -203,2 +210,10 @@ var hovered = this._findHover(event.zrX, event.zrY, null);
 
+    // Pointer event handlers
+    // util.each(['pointerdown', 'pointermove', 'pointerup'], function (name) {
+    //     domHandlers[name] = function (event) {
+    //         var mouseName = name.replace('pointer', 'mouse');
+    //         domHandlers[mouseName].call(this, event);
+    //     };
+    // });
+
     function processGesture(zrHandler, event, stage) {
@@ -232,8 +247,21 @@ var gestureMgr = zrHandler._gestureMgr;
     function initDomHandler(instance) {
-        var handlerNames = domHandlerNames.concat(touchHandlerNames);
-        var len = handlerNames.length;
-        while (len--) {
-            var name = handlerNames[len];
-            instance[proxyEventName(name)] = util.bind(domHandlers[name], instance);
+        var handlerNames = touchHandlerNames.concat(pointerHandlerNames);
+        for (var i = 0; i < handlerNames.length; i++) {
+            var name = handlerNames[i];
+            instance._handlers[name] = util.bind(domHandlers[name], instance);
         }
+
+        for (var i = 0; i < mouseHandlerNames.length; i++) {
+            var name = mouseHandlerNames[i];
+            instance._handlers[name] = makeMouseHandler(domHandlers[name], instance);
+        }
+
+        function makeMouseHandler(fn, instance) {
+            return function () {
+                if (instance._touching) {
+                    return;
+                }
+                return fn.apply(instance, arguments);
+            };
+        }
     }
@@ -245,5 +273,5 @@
      * @extends module:zrender/mixin/Eventful
-     * @param {HTMLElement} root 绘图区域
-     * @param {module:zrender/Storage} storage Storage实例
-     * @param {module:zrender/Painter} painter Painter实例
+     * @param {HTMLElement} root Main HTML element for painting.
+     * @param {module:zrender/Storage} storage Storage instance.
+     * @param {module:zrender/Painter} painter Painter instance.
      */
@@ -259,47 +287,78 @@ var Handler = function(root, storage, painter) {
          * @private
+         * @type {boolean}
          */
         this._hovered;
+
         /**
          * @private
+         * @type {Date}
          */
         this._lastTouchMoment;
+
         /**
          * @private
+         * @type {number}
          */
         this._lastX;
+
         /**
          * @private
+         * @type {number}
          */
         this._lastY;
+
         /**
          * @private
+         * @type {string}
          */
-        this._defaultCursorStyle = 'default'
+        this._defaultCursorStyle = 'default';
+
         /**
          * @private
+         * @type {module:zrender/core/GestureMgr}
          */
         this._gestureMgr = new GestureMgr();
 
+        /**
+         * @private
+         * @type {Array.<Function>}
+         */
+        this._handlers = [];
+
+        /**
+         * @private
+         * @type {boolean}
+         */
+        this._touching = false;
+
+        /**
+         * @private
+         * @type {number}
+         */
+        this._touchTimer;
+
         initDomHandler(this);
 
-        // @see #2350, some windows tablet (like lenovo X240) enable touch but can
-        // use IE10, which not supports touch events.
-        if (env.touchEventsSupported) {
-            // mobile支持
-            // mobile的click/move/up/down自己模拟
-            util.each(touchHandlerNames, function (name) {
-                addEventListener(root, name, this[proxyEventName(name)]);
-            }, this);
+        if (usePointerEvent()) {
+            mountHandlers(pointerHandlerNames, this);
+        }
+        else if (useTouchEvent()) {
+            mountHandlers(touchHandlerNames, this);
 
-            addEventListener(root, 'mouseout', this._mouseoutHandler);
+            // Handler of 'mouseout' event is needed in touch mode, which will be mounted below.
+            // addEventListener(root, 'mouseout', this._mouseoutHandler);
         }
-        else {
-            util.each(domHandlerNames, function (name) {
-                addEventListener(root, name, this[proxyEventName(name)]);
-            }, this);
-            // Firefox
-            addEventListener(root, 'DOMMouseScroll', this._mousewheelHandler);
-        }
 
+        // Considering some devices that both enable touch and mouse event (like MS Surface
+        // and lenovo X240, @see #2350), we make mouse event be always listened, otherwise
+        // mouse event can not be handle in those devices.
+        mountHandlers(mouseHandlerNames, this);
+
         Draggable.call(this);
+
+        function mountHandlers(handlerNames, instance) {
+            util.each(handlerNames, function (name) {
+                addEventListener(root, eventNameFix(name), instance._handlers[name]);
+            }, instance);
+        }
     };
@@ -324,4 +383,4 @@
         dispatch: function (eventName, eventArgs) {
-            var handler = this[proxyEventName(eventName)];
-            handler && handler(eventArgs);
+            var handler = this._handlers[eventName];
+            handler && handler.call(this, eventArgs);
         },
@@ -335,12 +394,9 @@
 
-            var handlerNames = domHandlerNames.concat(touchHandlerNames);
+            var handlerNames = mouseHandlerNames.concat(touchHandlerNames);
 
             for (var i = 0; i < handlerNames.length; i++) {
                 var name = handlerNames[i];
-                removeEventListener(root, name, this[proxyEventName(name)]);
+                removeEventListener(root, eventNameFix(name), this._handlers[name]);
             }
 
-            // Firefox
-            removeEventListener(root, 'DOMMouseScroll', this._mousewheelHandler);
-
             this.root =
@@ -437,2 +493,41 @@ this.storage =
 
+    /**
+     * Prevent mouse event from being dispatched after Touch Events action
+     * @see <https://github.com/deltakosh/handjs/blob/master/src/hand.base.js>
+     * 1. Mobile browsers dispatch mouse events 300ms after touchend.
+     * 2. Chrome for Android dispatch mousedown for long-touch about 650ms
+     * Result: Blocking Mouse Events for 700ms.
+     */
+    function setTouchTimer(instance) {
+        instance._touching = true;
+        clearTimeout(instance._touchTimer);
+        instance._touchTimer = setTimeout(function () {
+            instance._touching = false;
+        }, 700);
+    }
+
+    /**
+     * Althought MS Surface support screen touch, IE10/11 do not support
+     * touch event and MS Edge supported them but not by default (but chrome
+     * and firefox do). Thus we use Pointer event on MS browsers to handle touch.
+     */
+    function usePointerEvent() {
+        // TODO
+        // pointermove event dont trigger when using finger.
+        // We may figger it out latter.
+        return false;
+        // return env.pointerEventsSupported
+            // In no-touch device we dont use pointer but just traditional way for
+            // avoiding problem.
+            // && window.navigator.maxTouchPoints;
+    }
+
+    function useTouchEvent() {
+        return env.touchEventsSupported;
+    }
+
+    function eventNameFix(name) {
+        return (name === 'mousewheel' && env.firefox) ? 'DOMMouseScroll' : name;
+    }
+
     util.mixin(Handler, Eventful);
@@ -442,2 +537,2 @@ util.mixin(Handler, Draggable);
     return Handler;
-});
+});

src/Painter.js

@@ -684,5 +684,5 @@ /**
             var pathTransform = {
-                position : path.position,
-                rotation : path.rotation,
-                scale : path.scale
+                position: path.position,
+                rotation: path.rotation,
+                scale: path.scale
             };
@@ -698,7 +698,7 @@ path.position = [0, 0, 0];
             var imgShape = new ImageShape({
-                id : id,
-                style : {
-                    x : 0,
-                    y : 0,
-                    image : canvas
+                id: id,
+                style: {
+                    x: 0,
+                    y: 0,
+                    image: canvas
                 }
@@ -705,0 +705,0 @@ });

src/svg/graphic.js

@@ -242,3 +242,3 @@ // TODO
 
-        if (! text) {
+        if (!text) {
             return;
@@ -301,2 +301,5 @@ }
         }
+        else if (textAnchor === 'center') {
+            textAnchor = 'middle';
+        }
         // Font may affect position of each tspan elements
@@ -317,3 +320,3 @@ if (el.__text !== text || el.__textFont !== font) {
                 attr(tspan, 'y', y + i * lineHeight);
-                tspan.innerHTML = textLines[i];
+                tspan.appendChild(document.createTextNode(textLines[i]));
             }
@@ -320,0 +323,0 @@ // Remove unsed tspan elements

src/svg/Painter.js

@@ -106,2 +106,6 @@ /**
 
+        getViewportRoot: function () {
+            return this._viewport;
+        },
+
         refresh: function () {
@@ -108,0 +112,0 @@

src/vml/core.js

@@ -1,7 +0,4 @@
-define(function (require) {
-    
-    if (require('../core/env').canvasSupported) {
-        return;
-    }
+define(function (require, exports, module) {
 
+if (!require('../core/env').canvasSupported) {
     var urn = 'urn:schemas-microsoft-com:vml';
@@ -28,3 +25,3 @@
     // From raphael
-    function initVML() {
+    var initVML = function () {
         if (vmlInited) {
@@ -41,7 +38,8 @@ return;
             // http://msdn.microsoft.com/en-us/library/ms531194%28VS.85%29.aspx
-            styleSheets[0].addRule('.zrvml', 'behavior:url(#default#VML)')
+            styleSheets[0].addRule('.zrvml', 'behavior:url(#default#VML)');
         }
-    }
+    };
 
-    return {
+    // Not useing return to avoid error when converting to CommonJS module
+    module.exports = {
         doc: doc,
@@ -51,2 +49,3 @@ initVML: initVML,
     };
+}
 });

src/vml/graphic.js

@@ -5,6 +5,3 @@ // http://www.w3.org/TR/NOTE-VML
 
-    if (require('../core/env').canvasSupported) {
-        return;
-    }
-
+if (!require('../core/env').canvasSupported) {
     var vec2 = require('../core/vector');
@@ -43,32 +40,32 @@ var BoundingRect = require('../core/BoundingRect');
 
-    function initRootElStyle(el) {
+    var initRootElStyle = function (el) {
         el.style.cssText = 'position:absolute;left:0;top:0;width:1px;height:1px;';
         el.coordsize = Z + ','  + Z;
         el.coordorigin = '0,0';
-    }
+    };
 
-    function encodeHtmlAttribute(s) {
+    var encodeHtmlAttribute = function (s) {
         return String(s).replace(/&/g, '&').replace(/"/g, '"');
-    }
+    };
 
-    function rgb2Str(r, g, b) {
+    var rgb2Str = function (r, g, b) {
         return 'rgb(' + [r, g, b].join(',') + ')';
-    }
+    };
 
-    function append(parent, child) {
+    var append = function (parent, child) {
         if (child && parent && child.parentNode !== parent) {
             parent.appendChild(child);
         }
-    }
+    };
 
-    function remove(parent, child) {
+    var remove = function (parent, child) {
         if (child && parent && child.parentNode === parent) {
             parent.removeChild(child);
         }
-    }
+    };
 
-    function getZIndex(zlevel, z, z2) {
+    var getZIndex = function (zlevel, z, z2) {
         // z 的取值范围为 [0, 1000]
         return (parseFloat(zlevel) || 0) * ZLEVEL_BASE + (parseFloat(z) || 0) * Z_BASE + z2;
-    }
+    };
 
@@ -79,3 +76,3 @@ /***************************************************
 
-    function setColorAndOpacity(el, color, opacity) {
+    var setColorAndOpacity = function (el, color, opacity) {
         var colorArr = colorTool.parse(color);
@@ -90,5 +87,5 @@ opacity = +opacity;
         }
-    }
+    };
 
-    function getColorAndAlpha(color) {
+    var getColorAndAlpha = function (color) {
         var colorArr = colorTool.parse(color);
@@ -99,5 +96,5 @@ return [
         ];
-    }
+    };
 
-    function updateFillNode(el, style, zrEl) {
+    var updateFillNode = function (el, style, zrEl) {
         // TODO pattern
@@ -212,5 +209,5 @@ var fill = style.fill;
         }
-    }
+    };
 
-    function updateStrokeNode(el, style) {
+    var updateStrokeNode = function (el, style) {
         if (style.lineJoin != null) {
@@ -231,5 +228,5 @@ el.joinstyle = style.lineJoin;
         }
-    }
+    };
 
-    function updateFillAndStroke(vmlEl, type, style, zrEl) {
+    var updateFillAndStroke = function (vmlEl, type, style, zrEl) {
         var isFill = type == 'fill';
@@ -255,6 +252,6 @@ var el = vmlEl.getElementsByTagName(type)[0];
         }
-    }
+    };
 
     var points = [[], [], []];
-    function pathDataToString(data, m) {
+    var pathDataToString = function (data, m) {
         var M = CMD.M;
@@ -492,7 +489,7 @@ var C = CMD.C;
      **************************************************/
-    function isImage(img) {
+    var isImage = function (img) {
         // FIXME img instanceof Image 如果 img 是一个字符串的时候，IE8 下会报错
         return (typeof img === 'object') && img.tagName && img.tagName.toUpperCase() === 'IMG';
         // return img instanceof Image;
-    }
+    };
 
@@ -733,3 +730,3 @@ // Rewrite the original path method
 
-    function getFontStyle(fontString) {
+    var getFontStyle = function (fontString) {
         var fontStyle = fontStyleCache[fontString];
@@ -764,3 +761,3 @@ if (!fontStyle) {
         return fontStyle;
-    }
+    };
 
@@ -794,3 +791,3 @@ var textMeasureEl;
 
-    function drawRectText(vmlRoot, rect, textRect, fromTextEl) {
+    var drawRectText = function (vmlRoot, rect, textRect, fromTextEl) {
 
@@ -969,12 +966,12 @@ var style = this.style;
         append(vmlRoot, textVmlEl);
-    }
+    };
 
-    function removeRectText(vmlRoot) {
+    var removeRectText = function (vmlRoot) {
         remove(vmlRoot, this._textVmlEl);
         this._textVmlEl = null;
-    }
+    };
 
-    function appendRectText(vmlRoot) {
+    var appendRectText = function (vmlRoot) {
         append(vmlRoot, this._textVmlEl);
-    }
+    };
 
@@ -1008,2 +1005,3 @@ var list = [RectText, Displayable, ZImage, Path, Text];
     };
+}
 });

src/zrender.js

@@ -31,3 +31,3 @@ /*!
      */
-    zrender.version = '3.0.1';
+    zrender.version = '3.0.2';
 
@@ -125,5 +125,2 @@ /**
         this.painter = painter;
-        // VML 下为了性能可能会直接操作 VMLRoot 的位置
-        // 因此鼠标的相对位置应该是相对于 VMLRoot
-        // PENDING
         if (!env.node) {
@@ -279,3 +276,3 @@ this.handler = new Handler(painter.getViewportRoot(), storage, painter);
          * 将常规shape转成image shape
-         * @param {module:zrender/shape/Base} e
+         * @param {module:zrender/graphic/Path} e
          * @param {number} width
@@ -282,0 +279,0 @@ * @param {number} height

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 2 instances in 1 package

Debug access

Supply chain risk

Uses debug, reflection and dynamic code execution features.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

High entropy strings

Supply chain risk

Contains high entropy strings. This could be a sign of encrypted data, leaked secrets or obfuscated code.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of package files

168

increased by93.1%

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

1

decreased by-92.86%

Worsened metrics

Total package byte prevSize

863186

decreased by-54.03%

Lines of code

25322

decreased by-46.41%

No dependency changes