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

package/lib/Element.d.ts

@@ -166,6 +166,7 @@ declare class Element<Props extends ElementProps = ElementProps> {
     clearStates(noAnimation?: boolean): void;
     useState(stateName: string, keepCurrentStates?: boolean, noAnimation?: boolean, forceUseHoverLayer?: boolean): ElementState;
     useStates(states: string[], noAnimation?: boolean, forceUseHoverLayer?: boolean): void;
+    isSilent(): boolean;
     private _updateAnimationTargets;
     removeState(state: string): void;
     replaceState(oldState: string, newState: string, forceAdd: boolean): void;

package/lib/Element.js

@@ -400,6 +400,18 @@ var Element = (function () {
             }
         }
     };
+    Element.prototype.isSilent = function () {
+        var isSilent = this.silent;
+        var ancestor = this.parent;
+        while (!isSilent && ancestor) {
+            if (ancestor.silent) {
+                isSilent = true;
+                break;
+            }
+            ancestor = ancestor.parent;
+        }
+        return isSilent;
+    };
     Element.prototype._updateAnimationTargets = function () {
         for (var i = 0; i < this.animators.length; i++) {
             var animator = this.animators[i];

package/lib/Handler.js

@@ -262,9 +262,9 @@ function isHover(displayable, x, y) {
                 if (clipPath && !clipPath.contain(x, y)) {
                     return false;
                 }
-                if (el.silent) {
-                    isSilent = true;
-                }
+            }
+            if (el.silent) {
+                isSilent = true;
             }
             var hostEl = el.__hostTarget;
             el = hostEl ? hostEl : el.parent;

package/lib/canvas/Layer.d.ts

@@ -27,7 +27,6 @@ export default class Layer extends Eventful {
     zlevel: number;
     maxRepaintRectCount: number;
     private _paintRects;
-    __painter: CanvasPainter;
     __dirty: boolean;
     __firstTimePaint: boolean;
     __used: boolean;

package/lib/canvas/Layer.js

@@ -169,7 +169,7 @@ var Layer = (function (_super) {
         }
         for (var i = this.__prevStartIndex; i < this.__prevEndIndex; ++i) {
             var el = prevList[i];
-            var shouldPaint = el.shouldBePainted(viewWidth, viewHeight, true, true);
+            var shouldPaint = el && el.shouldBePainted(viewWidth, viewHeight, true, true);
             if (el && (!shouldPaint || !el.__zr) && el.__isRendered) {
                 var prevRect = el.getPrevPaintRect();
                 if (prevRect) {
@@ -266,7 +266,7 @@ var Layer = (function (_super) {
                     clearColorGradientOrPattern = createCanvasPattern(ctx, clearColor, {
                         dirty: function () {
                             self.setUnpainted();
-                            self.__painter.refresh();
+                            self.painter.refresh();
                         }
                     });
                 }

package/lib/canvas/Painter.js

@@ -393,7 +393,7 @@ var CanvasPainter = (function () {
                 }
             }
         }
-        layer.__painter = this;
+        layer.painter || (layer.painter = this);
     };
     CanvasPainter.prototype.eachLayer = function (cb, context) {
         var zlevelList = this._zlevelList;

package/lib/core/PathProxy.js

@@ -434,7 +434,6 @@ var PathProxy = (function () {
                     var delta = data[i++];
                     var endAngle = delta + startAngle;
                     i += 1;
-                    var anticlockwise = !data[i++];
                     if (isFirst) {
                         x0 = mathCos(startAngle) * rx + cx;
                         y0 = mathSin(startAngle) * ry + cy;

package/lib/core/Transformable.js

@@ -45,7 +45,10 @@ var Transformable = (function () {
         var needLocalTransform = this.needLocalTransform();
         var m = this.transform;
         if (!(needLocalTransform || parentTransform)) {
-            m && mIdentity(m);
+            if (m) {
+                mIdentity(m);
+                this.invTransform = null;
+            }
             return;
         }
         m = m || matrix.create();
@@ -121,6 +124,7 @@ var Transformable = (function () {
         var parent = this.parent;
         var m = this.transform;
         if (parent && parent.transform) {
+            parent.invTransform = parent.invTransform || matrix.create();
             matrix.mul(tmpTransform, parent.invTransform, m);
             m = tmpTransform;
         }

package/lib/core/env.js

@@ -32,7 +32,8 @@ if (typeof wx === 'object' && typeof wx.getSystemInfoSync === 'function') {
 else if (typeof document === 'undefined' && typeof self !== 'undefined') {
     env.worker = true;
 }
-else if (typeof navigator === 'undefined') {
+else if (typeof navigator === 'undefined'
+    || navigator.userAgent.indexOf('Node.js') === 0) {
     env.node = true;
     env.svgSupported = true;
 }

package/lib/core/matrix.d.ts

@@ -5,7 +5,7 @@ export declare function identity(out: MatrixArray): MatrixArray;
 export declare function copy(out: MatrixArray, m: MatrixArray): MatrixArray;
 export declare function mul(out: MatrixArray, m1: MatrixArray, m2: MatrixArray): MatrixArray;
 export declare function translate(out: MatrixArray, a: MatrixArray, v: VectorArray): MatrixArray;
-export declare function rotate(out: MatrixArray, a: MatrixArray, rad: number): MatrixArray;
+export declare function rotate(out: MatrixArray, a: MatrixArray, rad: number, pivot?: VectorArray): MatrixArray;
 export declare function scale(out: MatrixArray, a: MatrixArray, v: VectorArray): MatrixArray;
 export declare function invert(out: MatrixArray, a: MatrixArray): MatrixArray | null;
 export declare function clone(a: MatrixArray): MatrixArray;

package/lib/core/matrix.js

@@ -43,7 +43,8 @@ export function translate(out, a, v) {
     out[5] = a[5] + v[1];
     return out;
 }
-export function rotate(out, a, rad) {
+export function rotate(out, a, rad, pivot) {
+    if (pivot === void 0) { pivot = [0, 0]; }
     var aa = a[0];
     var ac = a[2];
     var atx = a[4];
@@ -56,8 +57,8 @@ export function rotate(out, a, rad) {
     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;
 }
 export function scale(out, a, v) {

package/lib/core/timsort.js

@@ -1,6 +1,5 @@
 var DEFAULT_MIN_MERGE = 32;
 var DEFAULT_MIN_GALLOPING = 7;
-var DEFAULT_TMP_STORAGE_LENGTH = 256;
 function minRunLength(n) {
     var r = 0;
     while (n >= DEFAULT_MIN_MERGE) {
@@ -167,18 +166,10 @@ function gallopRight(value, array, start, length, hint, compare) {
 }
 function TimSort(array, compare) {
     var minGallop = DEFAULT_MIN_GALLOPING;
-    var length = 0;
-    var tmpStorageLength = DEFAULT_TMP_STORAGE_LENGTH;
-    var stackLength = 0;
     var runStart;
     var runLength;
     var stackSize = 0;
-    length = array.length;
-    if (length < 2 * DEFAULT_TMP_STORAGE_LENGTH) {
-        tmpStorageLength = length >>> 1;
-    }
     var tmp = [];
-    stackLength = length < 120 ? 5 : length < 1542 ? 10 : length < 119151 ? 19 : 40;
     runStart = [];
     runLength = [];
     function pushRun(_runStart, _runLength) {

package/lib/graphic/helper/parseText.d.ts

@@ -6,7 +6,7 @@ interface InnerTruncateOption {
     placeholder?: string;
     maxIterations?: number;
 }
-export declare function truncateText(text: string, containerWidth: number, font: string, ellipsis: string, options: InnerTruncateOption): string;
+export declare function truncateText(text: string, containerWidth: number, font: string, ellipsis?: string, options?: InnerTruncateOption): string;
 export interface PlainTextContentBlock {
     lineHeight: number;
     calculatedLineHeight: number;

package/lib/svg/Painter.d.ts

@@ -39,9 +39,11 @@ declare class SVGPainter implements PainterBase {
         willUpdate?: boolean;
         compress?: boolean;
         useViewBox?: boolean;
+        emphasis?: boolean;
     }): SVGVNode;
     renderToString(opts?: {
         cssAnimation?: boolean;
+        cssEmphasis?: boolean;
         useViewBox?: boolean;
     }): string;
     setBackgroundColor(backgroundColor: SVGPainterBackgroundColor): void;

package/lib/svg/Painter.js

@@ -65,6 +65,7 @@ var SVGPainter = (function () {
         scope.animation = opts.animation;
         scope.willUpdate = opts.willUpdate;
         scope.compress = opts.compress;
+        scope.emphasis = opts.emphasis;
         var children = [];
         var bgVNode = this._bgVNode = createBackgroundVNode(width, height, this._backgroundColor, scope);
         bgVNode && children.push(bgVNode);
@@ -89,6 +90,7 @@ var SVGPainter = (function () {
         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)
@@ -225,8 +227,7 @@ function createBackgroundVNode(width, height, backgroundColor, scope) {
             width: width,
             height: height,
             x: '0',
-            y: '0',
-            id: '0'
+            y: '0'
         });
         if (isGradient(backgroundColor)) {
             setGradient({ fill: backgroundColor }, bgVNode.attrs, 'fill', scope);

package/lib/svg/core.d.ts

@@ -4,6 +4,7 @@ export declare const SVGNS = "http://www.w3.org/2000/svg";
 export declare const XLINKNS = "http://www.w3.org/1999/xlink";
 export declare const XMLNS = "http://www.w3.org/2000/xmlns/";
 export declare const XML_NAMESPACE = "http://www.w3.org/XML/1998/namespace";
+export declare const META_DATA_PREFIX = "ecmeta_";
 export declare function createElement(name: string): SVGElement;
 export declare type SVGVNodeAttrs = Record<string, string | number | undefined | boolean>;
 export interface SVGVNode {
@@ -30,13 +31,14 @@ export interface BrushScope {
     defs: Record<string, SVGVNode>;
     cssNodes: Record<string, CSSSelectorVNode>;
     cssAnims: Record<string, Record<string, Record<string, string>>>;
-    cssClassIdx: number;
+    cssStyleCache: Record<string, string>;
     cssAnimIdx: number;
     shadowIdx: number;
     gradientIdx: number;
     patternIdx: number;
     clipPathIdx: number;
     animation?: boolean;
+    emphasis?: boolean;
     willUpdate?: boolean;
     compress?: boolean;
 }

package/lib/svg/core.js

@@ -4,6 +4,7 @@ export var SVGNS = 'http://www.w3.org/2000/svg';
 export var XLINKNS = 'http://www.w3.org/1999/xlink';
 export var XMLNS = 'http://www.w3.org/2000/xmlns/';
 export var XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
+export var META_DATA_PREFIX = 'ecmeta_';
 export function createElement(name) {
     return document.createElementNS(SVGNS, name);
 }
@@ -85,7 +86,7 @@ export function createBrushScope(zrId) {
         defs: {},
         cssNodes: {},
         cssAnims: {},
-        cssClassIdx: 0,
+        cssStyleCache: {},
         cssAnimIdx: 0,
         shadowIdx: 0,
         gradientIdx: 0,

package/lib/svg/cssAnimation.js

@@ -6,6 +6,7 @@ import { getPathPrecision, getSRTTransformString } from './helper.js';
 import { each, extend, filter, isNumber, isString, keys } from '../core/util.js';
 import CompoundPath from '../graphic/CompoundPath.js';
 import { createCubicEasingFunc } from '../animation/cubicEasing.js';
+import { getClassId } from './cssClassId.js';
 export var EASING_MAP = {
     cubicIn: '0.32,0,0.67,0',
     cubicOut: '0.33,1,0.68,1',
@@ -266,7 +267,7 @@ export function createCSSAnimation(el, attrs, scope, onlyShape) {
         }
     }
     if (cssAnimations.length) {
-        var className = scope.zrId + '-cls-' + scope.cssClassIdx++;
+        var className = scope.zrId + '-cls-' + getClassId();
         scope.cssNodes['.' + className] = {
             animation: cssAnimations.join(',')
         };

package/lib/svg/cssClassId.d.ts

@@ -0,0 +1 @@
+export declare function getClassId(): number;

package/lib/svg/cssClassId.js

@@ -0,0 +1,4 @@
+var cssClassIdx = 0;
+export function getClassId() {
+    return cssClassIdx++;
+}

package/lib/svg/cssEmphasis.d.ts

@@ -0,0 +1,3 @@
+import Displayable from '../graphic/Displayable';
+import { BrushScope, SVGVNodeAttrs } from './core';
+export declare function createCSSEmphasis(el: Displayable, attrs: SVGVNodeAttrs, scope: BrushScope): void;

package/lib/svg/cssEmphasis.js

@@ -0,0 +1,60 @@
+import { liftColor } from '../tool/color.js';
+import { getClassId } from './cssClassId.js';
+export function createCSSEmphasis(el, attrs, scope) {
+    if (!el.ignore) {
+        if (el.isSilent()) {
+            var style = {
+                'pointer-events': 'none'
+            };
+            setClassAttribute(style, attrs, scope, true);
+        }
+        else {
+            var emphasisStyle = el.states.emphasis && el.states.emphasis.style
+                ? el.states.emphasis.style
+                : {};
+            var fill = emphasisStyle.fill;
+            if (!fill) {
+                var normalFill = el.style && el.style.fill;
+                var selectFill = el.states.select
+                    && el.states.select.style
+                    && el.states.select.style.fill;
+                var fromFill = el.currentStates.indexOf('select') >= 0
+                    ? (selectFill || normalFill)
+                    : normalFill;
+                if (fromFill) {
+                    fill = liftColor(fromFill);
+                }
+            }
+            var lineWidth = emphasisStyle.lineWidth;
+            if (lineWidth) {
+                var scaleX = (!emphasisStyle.strokeNoScale && el.transform)
+                    ? el.transform[0]
+                    : 1;
+                lineWidth = lineWidth / scaleX;
+            }
+            var style = {
+                cursor: 'pointer'
+            };
+            if (fill) {
+                style.fill = fill;
+            }
+            if (emphasisStyle.stroke) {
+                style.stroke = emphasisStyle.stroke;
+            }
+            if (lineWidth) {
+                style['stroke-width'] = lineWidth;
+            }
+            setClassAttribute(style, attrs, scope, true);
+        }
+    }
+}
+function setClassAttribute(style, attrs, scope, withHover) {
+    var styleKey = JSON.stringify(style);
+    var className = scope.cssStyleCache[styleKey];
+    if (!className) {
+        className = scope.zrId + '-cls-' + getClassId();
+        scope.cssStyleCache[styleKey] = className;
+        scope.cssNodes['.' + className + (withHover ? ':hover' : '')] = style;
+    }
+    attrs["class"] = attrs["class"] ? (attrs["class"] + ' ' + className) : className;
+}

package/lib/svg/graphic.js

@@ -5,12 +5,14 @@ import { getLineHeight } from '../contain/text.js';
 import TSpan from '../graphic/TSpan.js';
 import SVGPathRebuilder from './SVGPathRebuilder.js';
 import mapStyleToAttrs from './mapStyleToAttrs.js';
-import { createVNode, vNodeToString } from './core.js';
+import { createVNode, vNodeToString, META_DATA_PREFIX } from './core.js';
 import { assert, clone, isFunction, isString, logError, map, retrieve2 } from '../core/util.js';
 import { createOrUpdateImage } from '../graphic/helper/image.js';
 import { createCSSAnimation } from './cssAnimation.js';
 import { hasSeparateFont, parseFontSize } from '../graphic/Text.js';
 import { DEFAULT_FONT, DEFAULT_FONT_FAMILY } from '../core/platform.js';
+import { createCSSEmphasis } from './cssEmphasis.js';
+import { getElementSSRData } from '../zrender.js';
 var round = Math.round;
 function isImageLike(val) {
     return val && isString(val.src);
@@ -27,12 +29,26 @@ function setStyleAttrs(attrs, style, el, scope) {
         else if (isFillStroke && isPattern(val)) {
             setPattern(el, attrs, key, scope);
         }
+        else if (isFillStroke && val === 'none') {
+            attrs[key] = 'transparent';
+        }
         else {
             attrs[key] = val;
         }
     }, style, el, false);
     setShadow(el, attrs, scope);
 }
+function setMetaData(attrs, el) {
+    var metaData = getElementSSRData(el);
+    if (metaData) {
+        metaData.each(function (val, key) {
+            val != null && (attrs[(META_DATA_PREFIX + key).toLowerCase()] = val + '');
+        });
+        if (el.isSilent()) {
+            attrs[META_DATA_PREFIX + 'silent'] = 'true';
+        }
+    }
+}
 function noRotateScale(m) {
     return isAroundZero(m[0] - 1)
         && isAroundZero(m[1])
@@ -137,7 +153,9 @@ export function brushSVGPath(el, scope) {
     }
     setTransform(attrs, el.transform);
     setStyleAttrs(attrs, style, el, scope);
+    setMetaData(attrs, el);
     scope.animation && createCSSAnimation(el, attrs, scope);
+    scope.emphasis && createCSSEmphasis(el, attrs, scope);
     return createVNode(svgElType, el.id + '', attrs);
 }
 export function brushSVGImage(el, scope) {
@@ -171,6 +189,7 @@ export function brushSVGImage(el, scope) {
     }
     setTransform(attrs, el.transform);
     setStyleAttrs(attrs, style, el, scope);
+    setMetaData(attrs, el);
     scope.animation && createCSSAnimation(el, attrs, scope);
     return createVNode('image', el.id + '', attrs);
 }
@@ -223,6 +242,7 @@ export function brushSVGTSpan(el, scope) {
     }
     setTransform(attrs, el.transform);
     setStyleAttrs(attrs, style, el, scope);
+    setMetaData(attrs, el);
     scope.animation && createCSSAnimation(el, attrs, scope);
     return createVNode('text', el.id + '', attrs, undefined, text);
 }

package/lib/svg/patch.js

@@ -95,7 +95,10 @@ export function updateAttrs(oldVnode, vnode) {
                 elm.removeAttribute(key);
             }
             else {
-                if (key.charCodeAt(0) !== xChar) {
+                if (key === 'style') {
+                    elm.style.cssText = cur;
+                }
+                else if (key.charCodeAt(0) !== xChar) {
                     elm.setAttribute(key, cur);
                 }
                 else if (key === 'xmlns:xlink' || key === 'xmlns') {

package/lib/tool/color.d.ts

@@ -1,3 +1,4 @@
+import { GradientObject } from '../graphic/Gradient';
 export declare function parse(colorStr: string, rgbaArr?: number[]): number[];
 export declare function lift(color: string, level: number): string;
 export declare function toHex(color: string): string;
@@ -17,4 +18,6 @@ export declare function modifyAlpha(color: string, alpha?: number): string;
 export declare function stringify(arrColor: number[], type: string): string;
 export declare function lum(color: string, backgroundLum: number): number;
 export declare function random(): string;
+export declare function liftColor(color: GradientObject): GradientObject;
+export declare function liftColor(color: string): string;
 export {};

package/lib/tool/color.js

@@ -1,4 +1,5 @@
 import LRU from '../core/LRU.js';
+import { extend, isGradientObject, isString, map } from '../core/util.js';
 var kCSSColorTable = {
     'transparent': [0, 0, 0, 0], 'aliceblue': [240, 248, 255, 1],
     'antiquewhite': [250, 235, 215, 1], 'aqua': [0, 255, 255, 1],
@@ -406,3 +407,23 @@ export function random() {
         Math.round(Math.random() * 255)
     ], 'rgb');
 }
+var liftedColorCache = new LRU(100);
+export function liftColor(color) {
+    if (isString(color)) {
+        var liftedColor = liftedColorCache.get(color);
+        if (!liftedColor) {
+            liftedColor = lift(color, -0.1);
+            liftedColorCache.put(color, liftedColor);
+        }
+        return liftedColor;
+    }
+    else if (isGradientObject(color)) {
+        var ret = extend({}, color);
+        ret.colorStops = map(color.colorStops, function (stop) { return ({
+            offset: stop.offset,
+            color: lift(stop.color, -0.1)
+        }); });
+        return ret;
+    }
+    return color;
+}

package/lib/tool/parseSVG.js

@@ -554,7 +554,10 @@ function parseTransformAttribute(xmlNode, node) {
                     matrix.scale(mt, mt, [parseFloat(valueArr[0]), parseFloat(valueArr[1] || valueArr[0])]);
                     break;
                 case 'rotate':
-                    matrix.rotate(mt, mt, -parseFloat(valueArr[0]) * DEGREE_TO_ANGLE);
+                    matrix.rotate(mt, mt, -parseFloat(valueArr[0]) * DEGREE_TO_ANGLE, [
+                        parseFloat(valueArr[1] || '0'),
+                        parseFloat(valueArr[2] || '0')
+                    ]);
                     break;
                 case 'skewX':
                     var sx = Math.tan(parseFloat(valueArr[0]) * DEGREE_TO_ANGLE);

package/lib/zrender.d.ts

@@ -7,6 +7,7 @@
 * LICENSE
 * https://github.com/ecomfe/zrender/blob/master/LICENSE.txt
 */
+import * as zrUtil from './core/util';
 import Handler from './Handler';
 import Storage from './Storage';
 import { PainterBase } from './PainterBase';
@@ -32,6 +33,7 @@ declare class ZRender {
     private _stillFrameAccum;
     private _needsRefresh;
     private _needsRefreshHover;
+    private _disposed;
     private _darkMode;
     private _backgroundColor;
     constructor(id: number, dom?: HTMLElement, opts?: ZRenderInitOpt);
@@ -55,13 +57,13 @@ declare class ZRender {
         height?: number | string;
     }): void;
     clearAnimation(): void;
-    getWidth(): number;
-    getHeight(): number;
+    getWidth(): number | undefined;
+    getHeight(): number | undefined;
     setCursorStyle(cursorStyle: string): void;
     findHover(x: number, y: number): {
         target: Displayable;
         topTarget: Displayable;
-    };
+    } | undefined;
     on<Ctx>(eventName: ElementEventName, eventHandler: ElementEventCallback<Ctx, ZRenderType>, context?: Ctx): this;
     on<Ctx>(eventName: string, eventHandler: WithThisType<EventCallback<any[]>, unknown extends Ctx ? ZRenderType : Ctx>, context?: Ctx): this;
     off(eventName?: string, eventHandler?: EventCallback): void;
@@ -84,7 +86,11 @@ export declare function dispose(zr: ZRender): void;
 export declare function disposeAll(): void;
 export declare function getInstance(id: number): ZRender;
 export declare function registerPainter(name: string, Ctor: PainterBaseCtor): void;
-export declare const version = "5.5.0-dev.20240131";
+export declare type ElementSSRData = zrUtil.HashMap<unknown>;
+export declare type ElementSSRDataGetter<T> = (el: Element) => zrUtil.HashMap<T>;
+export declare function getElementSSRData(el: Element): ElementSSRData;
+export declare function registerSSRDataGetter<T>(getter: ElementSSRDataGetter<T>): void;
+export declare const version = "5.5.1-dev.20240131";
 export interface ZRenderType extends ZRender {
 }
 export {};