zrender-nightly 5.5.0-dev.20240131 → 5.5.1-dev.20240131

package/lib/zrender.js

@@ -68,7 +68,7 @@ var ZRender = (function () {
         var ssrMode = opts.ssr || painter.ssrOnly;
         this.storage = storage;
         this.painter = painter;
-        var handerProxy = (!env.node && !env.worker && !ssrMode)
+        var handlerProxy = (!env.node && !env.worker && !ssrMode)
             ? new HandlerProxy(painter.getViewportRoot(), painter.root)
             : null;
         var useCoarsePointer = opts.useCoarsePointer;
@@ -80,7 +80,7 @@ var ZRender = (function () {
         if (usePointerSize) {
             pointerSize = zrUtil.retrieve2(opts.pointerSize, defaultPointerSize);
         }
-        this.handler = new Handler(storage, painter, handerProxy, painter.root, pointerSize);
+        this.handler = new Handler(storage, painter, handlerProxy, painter.root, pointerSize);
         this.animation = new Animation({
             stage: {
                 update: ssrMode ? null : function () { return _this._flush(true); }
@@ -91,7 +91,7 @@ var ZRender = (function () {
         }
     }
     ZRender.prototype.add = function (el) {
-        if (!el) {
+        if (this._disposed || !el) {
             return;
         }
         this.storage.addRoot(el);
@@ -99,7 +99,7 @@ var ZRender = (function () {
         this.refresh();
     };
     ZRender.prototype.remove = function (el) {
-        if (!el) {
+        if (this._disposed || !el) {
             return;
         }
         this.storage.delRoot(el);
@@ -107,12 +107,18 @@ var ZRender = (function () {
         this.refresh();
     };
     ZRender.prototype.configLayer = function (zLevel, config) {
+        if (this._disposed) {
+            return;
+        }
         if (this.painter.configLayer) {
             this.painter.configLayer(zLevel, config);
         }
         this.refresh();
     };
     ZRender.prototype.setBackgroundColor = function (backgroundColor) {
+        if (this._disposed) {
+            return;
+        }
         if (this.painter.setBackgroundColor) {
             this.painter.setBackgroundColor(backgroundColor);
         }
@@ -130,6 +136,9 @@ var ZRender = (function () {
         return this._darkMode;
     };
     ZRender.prototype.refreshImmediately = function (fromInside) {
+        if (this._disposed) {
+            return;
+        }
         if (!fromInside) {
             this.animation.update(true);
         }
@@ -138,10 +147,16 @@ var ZRender = (function () {
         this._needsRefresh = false;
     };
     ZRender.prototype.refresh = function () {
+        if (this._disposed) {
+            return;
+        }
         this._needsRefresh = true;
         this.animation.start();
     };
     ZRender.prototype.flush = function () {
+        if (this._disposed) {
+            return;
+        }
         this._flush(false);
     };
     ZRender.prototype._flush = function (fromInside) {
@@ -173,6 +188,9 @@ var ZRender = (function () {
         this._sleepAfterStill = stillFramesCount;
     };
     ZRender.prototype.wakeUp = function () {
+        if (this._disposed) {
+            return;
+        }
         this.animation.start();
         this._stillFrameAccum = 0;
     };
@@ -180,42 +198,74 @@ var ZRender = (function () {
         this._needsRefreshHover = true;
     };
     ZRender.prototype.refreshHoverImmediately = function () {
+        if (this._disposed) {
+            return;
+        }
         this._needsRefreshHover = false;
         if (this.painter.refreshHover && this.painter.getType() === 'canvas') {
             this.painter.refreshHover();
         }
     };
     ZRender.prototype.resize = function (opts) {
+        if (this._disposed) {
+            return;
+        }
         opts = opts || {};
         this.painter.resize(opts.width, opts.height);
         this.handler.resize();
     };
     ZRender.prototype.clearAnimation = function () {
+        if (this._disposed) {
+            return;
+        }
         this.animation.clear();
     };
     ZRender.prototype.getWidth = function () {
+        if (this._disposed) {
+            return;
+        }
         return this.painter.getWidth();
     };
     ZRender.prototype.getHeight = function () {
+        if (this._disposed) {
+            return;
+        }
         return this.painter.getHeight();
     };
     ZRender.prototype.setCursorStyle = function (cursorStyle) {
+        if (this._disposed) {
+            return;
+        }
         this.handler.setCursorStyle(cursorStyle);
     };
     ZRender.prototype.findHover = function (x, y) {
+        if (this._disposed) {
+            return;
+        }
         return this.handler.findHover(x, y);
     };
     ZRender.prototype.on = function (eventName, eventHandler, context) {
-        this.handler.on(eventName, eventHandler, context);
+        if (!this._disposed) {
+            this.handler.on(eventName, eventHandler, context);
+        }
         return this;
     };
     ZRender.prototype.off = function (eventName, eventHandler) {
+        if (this._disposed) {
+            return;
+        }
         this.handler.off(eventName, eventHandler);
     };
     ZRender.prototype.trigger = function (eventName, event) {
+        if (this._disposed) {
+            return;
+        }
         this.handler.trigger(eventName, event);
     };
     ZRender.prototype.clear = function () {
+        if (this._disposed) {
+            return;
+        }
         var roots = this.storage.getRoots();
         for (var i = 0; i < roots.length; i++) {
             if (roots[i] instanceof Group) {
@@ -226,6 +276,9 @@ var ZRender = (function () {
         this.painter.clear();
     };
     ZRender.prototype.dispose = function () {
+        if (this._disposed) {
+            return;
+        }
         this.animation.stop();
         this.clear();
         this.storage.dispose();
@@ -235,6 +288,7 @@ var ZRender = (function () {
             this.storage =
                 this.painter =
                     this.handler = null;
+        this._disposed = true;
         delInstance(this.id);
     };
     return ZRender;
@@ -261,5 +315,14 @@ export function getInstance(id) {
 export function registerPainter(name, Ctor) {
     painterCtors[name] = Ctor;
 }
-export var version = '5.5.0-dev.20240131';
+var ssrDataGetter;
+export function getElementSSRData(el) {
+    if (typeof ssrDataGetter === 'function') {
+        return ssrDataGetter(el);
+    }
+}
+export function registerSSRDataGetter(getter) {
+    ssrDataGetter = getter;
+}
+export var version = '5.5.1-dev.20240131';
 ;

package/package.README.md

@@ -0,0 +1,9 @@
+# NOTICE about package.json
+
+Only `zrender.js` are officially exported to users.
+
+The other entries listed in the `"exports"` field of `package.json` make the internal files visible, but they are legacy usages, not recommended but not forbidden (for the sake of keeping backward compatible). These entries are made from the search in github about which internal files are imported.
+
+Since `v5.5.0`, `"type": "module"` and `"exports: {...}"` are added to `package.json`. When upgrading to `v5.5.0+`, if you meet some problems about "can not find/resolve xxx" when importing some internal files, it probably because of the issue "file extension not fully specified". Please try to make the file extension fully specified (that is, `import 'xxx/xxx/xxx.js'` rather than `import 'xxx/xxx/xxx'`), or change the config of you bundler tools to support auto adding file extensions.
+
+See more details about the `"exports"` field of `package.json` and why it is written like that in https://github.com/apache/echarts/pull/19513 .

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zrender-nightly",
-  "version": "5.5.0-dev.20240131",
+  "version": "5.5.1-dev.20240131",
   "description": "A lightweight graphic library providing 2d draw for Apache ECharts",
   "keywords": [
     "canvas",
@@ -36,7 +36,8 @@
   },
   "sideEffects": [
     "lib/canvas/canvas.js",
-    "lib/svg/svg.js"
+    "lib/svg/svg.js",
+    "lib/all.js"
   ],
   "devDependencies": {
     "@microsoft/api-extractor": "^7.7.2",
@@ -58,5 +59,31 @@
     "ts-jest": "^27.0.6",
     "typescript": "^4.4.3",
     "uglify-js": "^3.10.0"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "require": "./dist/zrender.js",
+      "import": "./index.js"
+    },
+    "./lib/canvas/canvas": "./lib/canvas/canvas.js",
+    "./lib/svg/svg": "./lib/svg/svg.js",
+    "./lib/vml/vml": "./lib/vml/vml.js",
+    "./lib/canvas/Painter": "./lib/canvas/Painter.js",
+    "./lib/svg/Painter": "./lib/svg/Painter.js",
+    "./lib/svg/patch": "./lib/svg/patch.js",
+    "./lib/Storage": "./lib/Storage.js",
+    "./lib/core/util": "./lib/core/util.js",
+    "./lib/core/env": "./lib/core/env.js",
+    "./lib/core/Transformable": "./lib/core/Transformable.js",
+    "./lib/core/BoundingRect": "./lib/core/BoundingRect.js",
+    "./lib/core/vector": "./lib/core/vector.js",
+    "./lib/core/bbox": "./lib/core/bbox.js",
+    "./lib/contain/polygon": "./lib/contain/polygon.js",
+    "./lib/tool/color": "./lib/tool/color.js",
+    "./lib/graphic/LinearGradient": "./lib/graphic/LinearGradient.js",
+    "./lib/graphic/RadialGradient": "./lib/graphic/RadialGradient.js",
+    "./*": "./*"
   }
 }

package/src/.eslintrc.yaml

@@ -21,7 +21,7 @@ rules:
                 - "warn"
                 - "error"
     no-constant-condition: 0
-    comma-dangle: 2
+    comma-dangle: 0
     no-debugger: 2
     no-dupe-keys: 2
     no-empty-character-class: 2

package/src/Element.ts

@@ -1017,6 +1017,22 @@ class Element<Props extends ElementProps = ElementProps> {
         }
     }
 
+    /**
+     * Return if el.silent or any ancestor element has silent true.
+     */
+    isSilent() {
+        let isSilent = this.silent;
+        let ancestor = this.parent;
+        while (!isSilent && ancestor) {
+            if (ancestor.silent) {
+                isSilent = true;
+                break;
+            }
+            ancestor = ancestor.parent;
+        }
+        return isSilent;
+    }
+
     /**
      * Update animation targets when reference is changed.
      */

package/src/Handler.ts

@@ -497,9 +497,9 @@ function isHover(displayable: Displayable, x: number, y: number) {
                 if (clipPath && !clipPath.contain(x, y)) {
                     return false;
                 }
-                if (el.silent) {
-                    isSilent = true;
-                }
+            }
+            if (el.silent) {
+                isSilent = true;
             }
             // Consider when el is textContent, also need to be silent
             // if any of its host el and its ancestors is silent.

package/src/canvas/Layer.ts

@@ -89,8 +89,6 @@ export default class Layer extends Eventful {
 
     private _paintRects: BoundingRect[]
 
-    __painter: CanvasPainter
-
     __dirty = true
     __firstTimePaint = true
 
@@ -311,7 +309,7 @@ export default class Layer extends Eventful {
              * rect if and only if it's not painted this frame and was
              * previously painted on the canvas.
              */
-            const shouldPaint = el.shouldBePainted(viewWidth, viewHeight, true, true);
+            const shouldPaint = el && el.shouldBePainted(viewWidth, viewHeight, true, true);
             if (el && (!shouldPaint || !el.__zr) && el.__isRendered) {
                 // el was removed
                 const prevRect = el.getPrevPaintRect();
@@ -449,9 +447,8 @@ export default class Layer extends Eventful {
                     clearColorGradientOrPattern = createCanvasPattern(
                         ctx, clearColor, {
                             dirty() {
-                                // TODO
                                 self.setUnpainted();
-                                self.__painter.refresh();
+                                self.painter.refresh();
                             }
                         }
                     );

package/src/canvas/Painter.ts

@@ -597,7 +597,7 @@ export default class CanvasPainter implements PainterBase {
 
         layersMap[zlevel] = layer;
 
-        // Vitual layer will not directly show on the screen.
+        // Virtual layer will not directly show on the screen.
         // (It can be a WebGL layer and assigned to a ZRImage element)
         // But it still under management of zrender.
         if (!layer.virtual) {
@@ -623,7 +623,7 @@ export default class CanvasPainter implements PainterBase {
             }
         }
 
-        layer.__painter = this;
+        layer.painter || (layer.painter = this);
     }
 
     // Iterate each layer

package/src/core/PathProxy.ts

@@ -675,8 +675,6 @@ export default class PathProxy {
                     const endAngle = delta + startAngle;
                     // TODO Arc 旋转
                     i += 1;
-                    const anticlockwise = !data[i++];
-
                     if (isFirst) {
                         // 直接使用 arc 命令
                         // 第一个命令起点还未定义

package/src/core/Transformable.ts

@@ -108,7 +108,11 @@ class Transformable {
 
         let m = this.transform;
         if (!(needLocalTransform || parentTransform)) {
-            m && mIdentity(m);
+            if (m) {
+                mIdentity(m);
+                // reset invTransform
+                this.invTransform = null;
+            }
             return;
         }
 
@@ -213,6 +217,7 @@ class Transformable {
         let m = this.transform;
         if (parent && parent.transform) {
             // Get local transform and decompose them to position, scale, rotation
+            parent.invTransform = parent.invTransform || matrix.create();
             matrix.mul(tmpTransform, parent.invTransform, m);
             m = tmpTransform;
         }

package/src/core/env.ts

@@ -37,7 +37,10 @@ else if (typeof document === 'undefined' && typeof self !== 'undefined') {
     // In worker
     env.worker = true;
 }
-else if (typeof navigator === 'undefined') {
+else if (
+    typeof navigator === 'undefined'
+    || navigator.userAgent.indexOf('Node.js') === 0
+) {
     // In node
     env.node = true;
     env.svgSupported = true;

package/src/core/matrix.ts

@@ -79,7 +79,12 @@ export function translate(out: MatrixArray, a: MatrixArray, v: VectorArray): Mat
 /**
  * 旋转变换
  */
-export function rotate(out: MatrixArray, a: MatrixArray, rad: number): MatrixArray {
+export function rotate(
+    out: MatrixArray,
+    a: MatrixArray,
+    rad: number,
+    pivot: VectorArray = [0, 0]
+): MatrixArray {
     const aa = a[0];
     const ac = a[2];
     const atx = a[4];
@@ -93,8 +98,8 @@ export function rotate(out: MatrixArray, a: MatrixArray, rad: number): MatrixArr
     out[1] = -aa * st + ab * ct;
     out[2] = ac * ct + ad * st;
     out[3] = -ac * st + ct * ad;
-    out[4] = ct * atx + st * aty;
-    out[5] = ct * aty - st * atx;
+    out[4] = ct * (atx - pivot[0]) + st * (aty - pivot[1]) + pivot[0];
+    out[5] = ct * (aty - pivot[1]) - st * (atx - pivot[0]) + pivot[1];
     return out;
 }
 

package/src/core/timsort.ts

@@ -3,8 +3,6 @@ const DEFAULT_MIN_MERGE = 32;
 
 const DEFAULT_MIN_GALLOPING = 7;
 
-const DEFAULT_TMP_STORAGE_LENGTH = 256;
-
 type CompareFunc<T> =(a: T, b: T) => number
 
 function minRunLength(n: number): number {
@@ -217,23 +215,12 @@ function gallopRight<T>(value: T, array: T[], start: number, length: number, hin
 
 function TimSort<T>(array: T[], compare: CompareFunc<T>) {
     let minGallop = DEFAULT_MIN_GALLOPING;
-    let length = 0;
-    let tmpStorageLength = DEFAULT_TMP_STORAGE_LENGTH;
-    let stackLength = 0;
     let runStart: number[];
     let runLength: number[];
     let stackSize = 0;
 
-    length = array.length;
-
-    if (length < 2 * DEFAULT_TMP_STORAGE_LENGTH) {
-        tmpStorageLength = length >>> 1;
-    }
-
     var tmp: T[] = [];
 
-    stackLength = length < 120 ? 5 : length < 1542 ? 10 : length < 119151 ? 19 : 40;
-
     runStart = [];
     runLength = [];
 

package/src/core/util.ts

@@ -65,7 +65,7 @@ export function logError(...args: any[]) {
 /**
  * Those data types can be cloned:
  *     Plain object, Array, TypedArray, number, string, null, undefined.
- * Those data types will be assgined using the orginal data:
+ * Those data types will be assigned using the original data:
  *     BUILTIN_OBJECT
  * Instance of user defined class will be cloned to a plain object, without
  * properties in prototype.
@@ -626,8 +626,8 @@ export function assert(condition: any, message?: string) {
 }
 
 /**
- * @param str string to be trimed
- * @return trimed string
+ * @param str string to be trimmed
+ * @return trimmed string
  */
 export function trim(str: string): string {
     if (str == null) {
@@ -717,7 +717,7 @@ export class HashMap<T, KEY extends string | number = string | number> {
     constructor(obj?: HashMap<T, KEY> | { [key in KEY]?: T } | KEY[]) {
         const isArr = isArray(obj);
         // Key should not be set on this, otherwise
-        // methods get/set/... may be overrided.
+        // methods get/set/... may be overridden.
         this.data = maybeNativeMap<T, KEY>();
         const thisMap = this;
 

package/src/dom/HandlerProxy.ts

@@ -152,7 +152,7 @@ function isLocalEl(instance: HandlerDomProxy, el: Node) {
 
 /**
  * Make a fake event but not change the original event,
- * becuase the global event probably be used by other
+ * because the global event probably be used by other
  * listeners not belonging to zrender.
  * @class
  */
@@ -259,8 +259,8 @@ const localDOMHandlers: DomHandlersMap = {
     mousewheel(event: ZRRawEvent) {
         // IE8- and some other lagacy agent do not support event `wheel`, so we still listen
         // to the legacy event `mouseevent`.
-        // Typically if event `wheel` is suppored and the handler has been mounted on a
-        // DOM element, the lagecy `mousewheel` event will not be triggered (Chrome and Safari).
+        // Typically if event `wheel` is supported and the handler has been mounted on a
+        // DOM element, the legacy `mousewheel` event will not be triggered (Chrome and Safari).
         // But we still do this guard to avoid to duplicated handle.
         if (wheelEventSupported) {
             return;
@@ -337,7 +337,7 @@ const localDOMHandlers: DomHandlersMap = {
         // FIXME
         // pointermove is so sensitive that it always triggered when
         // tap(click) on touch screen, which affect some judgement in
-        // upper application. So, we dont support mousemove on MS touch
+        // upper application. So, we don't support mousemove on MS touch
         // device yet.
         if (!isPointerFromTouch(event)) {
             localDOMHandlers.mousemove.call(this, event);
@@ -385,7 +385,7 @@ const globalDOMHandlers: DomHandlersMap = {
         // FIXME
         // pointermove is so sensitive that it always triggered when
         // tap(click) on touch screen, which affect some judgement in
-        // upper application. So, we dont support mousemove on MS touch
+        // upper application. So, we don't support mousemove on MS touch
         // device yet.
         if (!isPointerFromTouch(event)) {
             globalDOMHandlers.mousemove.call(this, event);
@@ -441,7 +441,7 @@ function mountLocalDOMEventListeners(instance: HandlerDomProxy, scope: DOMHandle
         // touch screen. And we only support click behavior on MS touch screen now.
 
         // MS Gesture Event is only supported on IE11+/Edge and on Windows 8+.
-        // We dont support touch on IE on win7.
+        // We don't support touch on IE on win7.
         // See <https://msdn.microsoft.com/en-us/library/dn433243(v=vs.85).aspx>
         // if (typeof MSGesture === 'function') {
         //     (this._msGesture = new MSGesture()).target = dom; // jshint ignore:line
@@ -540,7 +540,7 @@ class DOMHandlerScope {
     domTarget: HTMLElement | HTMLDocument
     domHandlers: DomHandlersMap
 
-    // Key: eventName, value: mounted handler funcitons.
+    // Key: eventName, value: mounted handler functions.
     // Used for unmount.
     mounted: Dictionary<EventListener> = {};
 

package/src/graphic/helper/parseText.ts

@@ -41,8 +41,8 @@ export function truncateText(
     text: string,
     containerWidth: number,
     font: string,
-    ellipsis: string,
-    options: InnerTruncateOption
+    ellipsis?: string,
+    options?: InnerTruncateOption
 ): string {
     if (!containerWidth) {
         return '';
@@ -63,8 +63,8 @@ export function truncateText(
 function prepareTruncateOptions(
     containerWidth: number,
     font: string,
-    ellipsis: string,
-    options: InnerTruncateOption
+    ellipsis?: string,
+    options?: InnerTruncateOption
 ): InnerPreparedTruncateOption {
     options = options || {};
     let preparedOpts = extend({}, options) as InnerPreparedTruncateOption;

package/src/svg/Painter.ts

@@ -124,10 +124,11 @@ class SVGPainter implements PainterBase {
     }
 
     renderToVNode(opts?: {
-        animation?: boolean
-        willUpdate?: boolean
+        animation?: boolean,
+        willUpdate?: boolean,
         compress?: boolean,
-        useViewBox?: boolean
+        useViewBox?: boolean,
+        emphasis?: boolean
     }) {
 
         opts = opts || {};
@@ -140,6 +141,7 @@ class SVGPainter implements PainterBase {
         scope.animation = opts.animation;
         scope.willUpdate = opts.willUpdate;
         scope.compress = opts.compress;
+        scope.emphasis = opts.emphasis;
 
         const children: SVGVNode[] = [];
 
@@ -173,7 +175,12 @@ class SVGPainter implements PainterBase {
          * If add css animation.
          * @default true
          */
-        cssAnimation?: boolean
+        cssAnimation?: boolean,
+        /**
+         * If add css emphasis.
+         * @default true
+         */
+        cssEmphasis?: boolean,
         /**
          * If use viewBox
          * @default true
@@ -183,6 +190,7 @@ class SVGPainter implements PainterBase {
         opts = opts || {};
         return vNodeToString(this.renderToVNode({
             animation: retrieve2(opts.cssAnimation, true),
+            emphasis: retrieve2(opts.cssEmphasis, true),
             willUpdate: false,
             compress: true,
             useViewBox: retrieve2(opts.useViewBox, true)
@@ -374,8 +382,7 @@ function createBackgroundVNode(
                 width,
                 height,
                 x: '0',
-                y: '0',
-                id: '0'
+                y: '0'
             }
         );
         if (isGradient(backgroundColor)) {

package/src/svg/core.ts

@@ -8,6 +8,7 @@ export const SVGNS = 'http://www.w3.org/2000/svg';
 export const XLINKNS = 'http://www.w3.org/1999/xlink';
 export const XMLNS = 'http://www.w3.org/2000/xmlns/';
 export const XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
+export const META_DATA_PREFIX = 'ecmeta_';
 
 export function createElement(name: string) {
     return document.createElementNS(SVGNS, name);
@@ -128,8 +129,11 @@ export interface BrushScope {
 
     cssNodes: Record<string, CSSSelectorVNode>
     cssAnims: Record<string, Record<string, Record<string, string>>>
+    /**
+     * Cache for css style string, mapping from style string to class name.
+     */
+    cssStyleCache: Record<string, string>
 
-    cssClassIdx: number
     cssAnimIdx: number
 
     shadowIdx: number
@@ -141,6 +145,10 @@ export interface BrushScope {
      * If create animates nodes.
      */
     animation?: boolean,
+    /**
+     * If create emphasis styles.
+     */
+    emphasis?: boolean,
 
     /**
      * If will update. Some optimization for string generation can't be applied.
@@ -164,8 +172,8 @@ export function createBrushScope(zrId: string): BrushScope {
 
         cssNodes: {},
         cssAnims: {},
+        cssStyleCache: {},
 
-        cssClassIdx: 0,
         cssAnimIdx: 0,
 
         shadowIdx: 0,