From 53a44fb3bd73c5279ed9699f2dafefaedefae209 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Tue, 14 Mar 2023 18:12:38 +0800
Subject: [PATCH 01/20] WIP(ssr): add emphasis style in ssr css
 apache/echarts#18334

---
 src/Element.ts          |  5 +++
 src/svg/Painter.ts      | 10 ++++-
 src/svg/core.ts         | 10 +++++
 src/svg/cssEmphasis.ts  | 71 +++++++++++++++++++++++++++++++
 src/svg/graphic.ts      | 15 ++++++-
 test/svg-meta-data.html | 92 +++++++++++++++++++++++++++++++++++++++++
 6 files changed, 201 insertions(+), 2 deletions(-)
 create mode 100644 src/svg/cssEmphasis.ts
 create mode 100644 test/svg-meta-data.html

diff --git a/src/Element.ts b/src/Element.ts
index eb87cc5f9..ec1211ac1 100644
--- a/src/Element.ts
+++ b/src/Element.ts
@@ -368,6 +368,11 @@ class Element<Props extends ElementProps = ElementProps> {
      */
     __inHover: boolean
 
+    /**
+     * Any information to be binded on the element when rendering.
+     */
+    __metaData: Record<string, string | number | boolean>
+
     /**
      * path to clip the elements and its children, if it is a group.
      * @see http://www.w3.org/TR/2dcontext/#clipping-region
diff --git a/src/svg/Painter.ts b/src/svg/Painter.ts
index fc85ed939..59f0ab3a9 100644
--- a/src/svg/Painter.ts
+++ b/src/svg/Painter.ts
@@ -128,6 +128,7 @@ class SVGPainter implements PainterBase {
         willUpdate?: boolean
         compress?: 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)
diff --git a/src/svg/core.ts b/src/svg/core.ts
index d4b7c4210..d694c4592 100644
--- a/src/svg/core.ts
+++ b/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,6 +129,10 @@ 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
@@ -141,6 +146,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,6 +173,7 @@ export function createBrushScope(zrId: string): BrushScope {
 
         cssNodes: {},
         cssAnims: {},
+        cssStyleCache: {},
 
         cssClassIdx: 0,
         cssAnimIdx: 0,
diff --git a/src/svg/cssEmphasis.ts b/src/svg/cssEmphasis.ts
new file mode 100644
index 000000000..354071c32
--- /dev/null
+++ b/src/svg/cssEmphasis.ts
@@ -0,0 +1,71 @@
+import LRU from '../core/LRU';
+import { extend, isGradientObject, isString, map } from '../core/util';
+import * as colorTool from '../tool/color';
+import Displayable from '../graphic/Displayable';
+import { GradientObject } from '../graphic/Gradient';
+import { BrushScope, SVGVNodeAttrs } from './core';
+
+// TODO: Consider deleting the same logic in ECharts and call this method?
+const liftedColorCache = new LRU<string>(100);
+function liftColor(color: GradientObject): GradientObject;
+function liftColor(color: string): string;
+function liftColor(color: string | GradientObject): string | GradientObject {
+    if (isString(color)) {
+        let liftedColor = liftedColorCache.get(color);
+        if (!liftedColor) {
+            liftedColor = colorTool.lift(color, -0.1);
+            liftedColorCache.put(color, liftedColor);
+        }
+        return liftedColor;
+    }
+    else if (isGradientObject(color)) {
+        const ret = extend({}, color) as GradientObject;
+        ret.colorStops = map(color.colorStops, stop => ({
+            offset: stop.offset,
+            color: colorTool.lift(stop.color, -0.1)
+        }));
+        return ret;
+    }
+    // Change nothing.
+    return color;
+}
+
+export function createCSSEmphasis(
+    el: Displayable,
+    attrs: SVGVNodeAttrs,
+    scope: BrushScope
+) {
+    if (el.states.emphasis) {
+        const empahsisStyle = el.states.emphasis.style;
+        let fill = empahsisStyle.fill;
+        if (!fill) {
+            // No empahsis fill, lift color
+            const normalFill = el.style.fill;
+            const selectFill = el.states.select.style.fill;
+            const fromFill = el.currentStates.indexOf('select') >= 0
+                ? (selectFill || normalFill)
+                : normalFill;
+            if (fromFill) {
+                fill = liftColor(fromFill);
+            }
+            else {
+                // No fill information, ignore css
+                return;
+            }
+        }
+        const style = {
+            cursor: 'pointer', // TODO: Should be included in el
+            fill: fill,
+            stroke: empahsisStyle.stroke,
+            'stroke-width': empahsisStyle.lineWidth
+        };
+        const styleKey = JSON.stringify(style);
+        let className = scope.cssStyleCache[styleKey];
+        if (!className) {
+            className = scope.zrId + '-cls-' + scope.cssClassIdx++;
+            scope.cssStyleCache[styleKey] = className;
+            scope.cssNodes['.' + className + ':hover'] = style;
+        }
+        attrs.class = attrs.class ? (attrs.class + ' ' + className) : className;
+    }
+}
diff --git a/src/svg/graphic.ts b/src/svg/graphic.ts
index 49a0e139b..47ad3cd73 100644
--- a/src/svg/graphic.ts
+++ b/src/svg/graphic.ts
@@ -26,7 +26,7 @@ import { getLineHeight } from '../contain/text';
 import TSpan, { TSpanStyleProps } from '../graphic/TSpan';
 import SVGPathRebuilder from './SVGPathRebuilder';
 import mapStyleToAttrs from './mapStyleToAttrs';
-import { SVGVNodeAttrs, createVNode, SVGVNode, vNodeToString, BrushScope } from './core';
+import { SVGVNodeAttrs, createVNode, SVGVNode, vNodeToString, BrushScope, META_DATA_PREFIX } from './core';
 import { MatrixArray } from '../core/matrix';
 import Displayable from '../graphic/Displayable';
 import { assert, clone, isFunction, isString, logError, map, retrieve2 } from '../core/util';
@@ -39,6 +39,7 @@ import { ImageLike } from '../core/types';
 import { createCSSAnimation } from './cssAnimation';
 import { hasSeparateFont, parseFontSize } from '../graphic/Text';
 import { DEFAULT_FONT, DEFAULT_FONT_FAMILY } from '../core/platform';
+import { createCSSEmphasis } from './cssEmphasis';
 
 const round = Math.round;
 
@@ -69,6 +70,14 @@ function setStyleAttrs(attrs: SVGVNodeAttrs, style: AllStyleOption, el: Path | T
     setShadow(el, attrs, scope);
 }
 
+function setMetaData(attrs: SVGVNodeAttrs, el: Path | TSpan | ZRImage) {
+    if (el.__metaData) {
+        for (const key in el.__metaData) {
+            attrs[META_DATA_PREFIX + key] = el.__metaData[key] + '';
+        }
+    }
+}
+
 function noRotateScale(m: MatrixArray) {
     return isAroundZero(m[0] - 1)
         && isAroundZero(m[1])
@@ -204,8 +213,10 @@ export function brushSVGPath(el: Path, scope: BrushScope) {
 
     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);
 }
@@ -248,6 +259,7 @@ export function brushSVGImage(el: ZRImage, scope: BrushScope) {
 
     setTransform(attrs, el.transform);
     setStyleAttrs(attrs, style, el, scope);
+    setMetaData(attrs, el);
 
     scope.animation && createCSSAnimation(el, attrs, scope);
 
@@ -319,6 +331,7 @@ export function brushSVGTSpan(el: TSpan, scope: BrushScope) {
     }
     setTransform(attrs, el.transform);
     setStyleAttrs(attrs, style, el, scope);
+    setMetaData(attrs, el);
 
     scope.animation && createCSSAnimation(el, attrs, scope);
 
diff --git a/test/svg-meta-data.html b/test/svg-meta-data.html
new file mode 100644
index 000000000..afc4a1d9c
--- /dev/null
+++ b/test/svg-meta-data.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Image</title>
+    <script src="./lib/config.js"></script>
+    <script src="../dist/zrender.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+<body>
+    <div id="main" style="width:1000px;height:800px;"></div>
+    <script type="text/javascript">
+    // 初始化zrender
+    var zr = zrender.init(document.getElementById('main'), {
+        renderer: window.__ZRENDER__DEFAULT__RENDERER__ || 'svg'
+    });
+
+    var rect = new zrender.Rect({
+        shape: {
+            x: 10,
+            y: 10,
+            width: 80,
+            height: 80
+        },
+        style: {
+            fill: 'red'
+        }
+    });
+    rect.__metaData = {
+        type: 'seriesItem',
+        seriesIndex: 0,
+        dataIndex: 0,
+        styleType: 'itemStyle'
+    }
+    zr.add(rect);
+
+    setTimeout(() => {
+        const metaData = {
+            series: [{
+                normal: {
+                    itemStyle: {
+                        fill: 'red'
+                    }
+                },
+                emphasis: {
+                    itemStyle: {
+                        fill: 'blue'
+                    }
+                }
+            }]
+        }
+
+        const svg = zr.painter.getViewportRoot().getElementsByTagName('svg')[0];
+        const root = svg.children[0];
+        for (let i = 0; i < root.children.length; i++) {
+            const child = root.children[i];
+            const type = child.getAttribute('ecmeta_type');
+            if (type === 'seriesItem') {
+                child.addEventListener('mouseover', event => {
+                    const attrs = event.target.attributes;
+                    const seriesIndex = attrs.ecmeta_seriesIndex.value;
+                    const dataIndex = attrs.ecmeta_dataIndex.value;
+                    const styleType = attrs.ecmeta_styleType.value;
+                    const emphasis = metaData.series[seriesIndex].emphasis;
+                    if (emphasis && emphasis[styleType]) {
+                        const style = emphasis[styleType];
+                        for (let key in style) {
+                            attrs[key].value = style[key];
+                        }
+                    }
+                });
+                child.addEventListener('mouseout', event => {
+                    const attrs = event.target.attributes;
+                    const seriesIndex = attrs.ecmeta_seriesIndex.value;
+                    const dataIndex = attrs.ecmeta_dataIndex.value;
+                    const styleType = attrs.ecmeta_styleType.value;
+                    const normal = metaData.series[seriesIndex].normal;
+                    if (normal && normal[styleType]) {
+                        const style = normal[styleType];
+                        for (let key in style) {
+                            attrs[key].value = style[key];
+                        }
+                    }
+                });
+            }
+        }
+        console.log(root)
+    });
+    </script>
+
+</body>
+</html>
\ No newline at end of file

From 26abab131ccfaea50144f2ba0ad190f9946e939d Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Fri, 31 Mar 2023 15:31:51 +0800
Subject: [PATCH 02/20] feat(ssr): add style in meta data

---
 src/svg/Painter.ts     |  6 +++---
 src/svg/cssEmphasis.ts | 33 ++++++++++++++++++++++-----------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/svg/Painter.ts b/src/svg/Painter.ts
index 59f0ab3a9..c20543854 100644
--- a/src/svg/Painter.ts
+++ b/src/svg/Painter.ts
@@ -124,10 +124,10 @@ class SVGPainter implements PainterBase {
     }
 
     renderToVNode(opts?: {
-        animation?: boolean
-        willUpdate?: boolean
+        animation?: boolean,
+        willUpdate?: boolean,
         compress?: boolean,
-        useViewBox?: boolean
+        useViewBox?: boolean,
         emphasis?: boolean
     }) {
 
diff --git a/src/svg/cssEmphasis.ts b/src/svg/cssEmphasis.ts
index 354071c32..d3ab72d17 100644
--- a/src/svg/cssEmphasis.ts
+++ b/src/svg/cssEmphasis.ts
@@ -35,30 +35,41 @@ export function createCSSEmphasis(
     attrs: SVGVNodeAttrs,
     scope: BrushScope
 ) {
-    if (el.states.emphasis) {
-        const empahsisStyle = el.states.emphasis.style;
+    if (!el.ignore && el.__metaData) {
+        const empahsisStyle = el.states.emphasis
+            ? el.states.emphasis.style
+            : {};
         let fill = empahsisStyle.fill;
         if (!fill) {
             // No empahsis fill, lift color
             const normalFill = el.style.fill;
-            const selectFill = el.states.select.style.fill;
+            const selectFill = el.states.select && el.states.select.style.fill;
             const fromFill = el.currentStates.indexOf('select') >= 0
                 ? (selectFill || normalFill)
                 : normalFill;
             if (fromFill) {
                 fill = liftColor(fromFill);
             }
-            else {
-                // No fill information, ignore css
-                return;
-            }
+        }
+        let lineWidth = empahsisStyle.lineWidth;
+        if (lineWidth) {
+            // Symbols use transform to set size, so lineWidth
+            // should be divided by scaleX
+            const scaleX = el.transform ? el.transform[0] : 1;
+            lineWidth = lineWidth / scaleX;
         }
         const style = {
             cursor: 'pointer', // TODO: Should be included in el
-            fill: fill,
-            stroke: empahsisStyle.stroke,
-            'stroke-width': empahsisStyle.lineWidth
-        };
+        } as any;
+        if (fill) {
+            style.fill = fill;
+        }
+        if (empahsisStyle.stroke) {
+            style.stroke = empahsisStyle.stroke;
+        }
+        if (lineWidth) {
+            style['stroke-width'] = lineWidth;
+        }
         const styleKey = JSON.stringify(style);
         let className = scope.cssStyleCache[styleKey];
         if (!className) {

From 4ca836e572a216045c8510f78a24bcdedefec4e8 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Mon, 3 Apr 2023 16:39:25 +0800
Subject: [PATCH 03/20] fix(svg): duplicate id for background rect with
 multiple charts

---
 src/svg/Painter.ts            |  5 +++--
 test/svg-backgroundColor.html | 12 ++++++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/svg/Painter.ts b/src/svg/Painter.ts
index fc85ed939..27bdeeb39 100644
--- a/src/svg/Painter.ts
+++ b/src/svg/Painter.ts
@@ -143,7 +143,7 @@ class SVGPainter implements PainterBase {
 
         const children: SVGVNode[] = [];
 
-        const bgVNode = this._bgVNode = createBackgroundVNode(width, height, this._backgroundColor, scope);
+        const bgVNode = this._bgVNode = createBackgroundVNode(this._id, width, height, this._backgroundColor, scope);
         bgVNode && children.push(bgVNode);
 
         // Ignore the root g if wan't the output to be more tight.
@@ -360,6 +360,7 @@ function createMethodNotSupport(method: string): any {
 }
 
 function createBackgroundVNode(
+    zrId: string,
     width: number,
     height: number,
     backgroundColor: SVGPainterBackgroundColor,
@@ -375,7 +376,7 @@ function createBackgroundVNode(
                 height,
                 x: '0',
                 y: '0',
-                id: '0'
+                id: zrId + '-bg'
             }
         );
         if (isGradient(backgroundColor)) {
diff --git a/test/svg-backgroundColor.html b/test/svg-backgroundColor.html
index b8603e37f..40e1e79a7 100644
--- a/test/svg-backgroundColor.html
+++ b/test/svg-backgroundColor.html
@@ -16,6 +16,9 @@
 </head>
 <body>
     <div id="main" style="width:100vw;height:100vh;"></div>
+
+    <h2>This should not have a rect with the same id as the above instance.</h2>
+    <div id="main2" style="width:100vw;height:100vh;"></div>
     <div class="opt-bar">
         <button onclick="updateBg()">Change Background</button>
         <select id="repeat">
@@ -42,7 +45,12 @@
         }
     });
     zr.add(txt);
-    
+
+    var zr2 = zrender.init(document.getElementById('main2'), {
+        renderer: 'svg'
+    });
+    zr2.add(txt);
+
     var linearGradient = new zrender.LinearGradient();
     linearGradient.addColorStop(0, '#a598e1');
     linearGradient.addColorStop(1, '#14c4ba');
@@ -95,8 +103,8 @@
         else {
             bg = text = 'none';
         }
-        console.log(text);
         zr.setBackgroundColor(bg);
+        zr2.setBackgroundColor(bg);
         txt.setStyle({ text: 'SVG BackgroundColor: ' + text });
         i++;
     }

From d7005b8f125d55a3e18fc779c3b71dca7696d7d9 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Wed, 31 May 2023 17:13:36 +0800
Subject: [PATCH 04/20] feat(ssr): improve code

---
 src/svg/core.ts         |  2 --
 src/svg/cssAnimation.ts |  3 ++-
 src/svg/cssClassId.ts   |  5 ++++
 src/svg/cssEmphasis.ts  | 55 ++++++++++++-----------------------------
 src/svg/graphic.ts      |  9 ++++---
 src/tool/color.ts       | 28 ++++++++++++++++++++-
 test/svg-meta-data.html | 15 ++++++-----
 7 files changed, 62 insertions(+), 55 deletions(-)
 create mode 100644 src/svg/cssClassId.ts

diff --git a/src/svg/core.ts b/src/svg/core.ts
index d694c4592..f29cf532d 100644
--- a/src/svg/core.ts
+++ b/src/svg/core.ts
@@ -134,7 +134,6 @@ export interface BrushScope {
      */
     cssStyleCache: Record<string, string>
 
-    cssClassIdx: number
     cssAnimIdx: number
 
     shadowIdx: number
@@ -175,7 +174,6 @@ export function createBrushScope(zrId: string): BrushScope {
         cssAnims: {},
         cssStyleCache: {},
 
-        cssClassIdx: 0,
         cssAnimIdx: 0,
 
         shadowIdx: 0,
diff --git a/src/svg/cssAnimation.ts b/src/svg/cssAnimation.ts
index 38fe5cfe3..f14eea43d 100644
--- a/src/svg/cssAnimation.ts
+++ b/src/svg/cssAnimation.ts
@@ -10,6 +10,7 @@ import Animator from '../animation/Animator';
 import CompoundPath from '../graphic/CompoundPath';
 import { AnimationEasing } from '../animation/easing';
 import { createCubicEasingFunc } from '../animation/cubicEasing';
+import { getClassId } from './cssClassId';
 
 export const EASING_MAP: Record<string, string> = {
     // From https://easings.net/
@@ -355,7 +356,7 @@ export function createCSSAnimation(
     }
 
     if (cssAnimations.length) {
-        const className = scope.zrId + '-cls-' + scope.cssClassIdx++;
+        const className = scope.zrId + '-cls-' + getClassId();
         scope.cssNodes['.' + className] = {
             animation: cssAnimations.join(',')
         };
diff --git a/src/svg/cssClassId.ts b/src/svg/cssClassId.ts
new file mode 100644
index 000000000..b45ab167d
--- /dev/null
+++ b/src/svg/cssClassId.ts
@@ -0,0 +1,5 @@
+let cssClassIdx = 0;
+
+export function getClassId() {
+    return cssClassIdx++;
+}
diff --git a/src/svg/cssEmphasis.ts b/src/svg/cssEmphasis.ts
index d3ab72d17..e5e3f86db 100644
--- a/src/svg/cssEmphasis.ts
+++ b/src/svg/cssEmphasis.ts
@@ -1,34 +1,7 @@
-import LRU from '../core/LRU';
-import { extend, isGradientObject, isString, map } from '../core/util';
-import * as colorTool from '../tool/color';
 import Displayable from '../graphic/Displayable';
-import { GradientObject } from '../graphic/Gradient';
+import { liftColor } from '../tool/color';
 import { BrushScope, SVGVNodeAttrs } from './core';
-
-// TODO: Consider deleting the same logic in ECharts and call this method?
-const liftedColorCache = new LRU<string>(100);
-function liftColor(color: GradientObject): GradientObject;
-function liftColor(color: string): string;
-function liftColor(color: string | GradientObject): string | GradientObject {
-    if (isString(color)) {
-        let liftedColor = liftedColorCache.get(color);
-        if (!liftedColor) {
-            liftedColor = colorTool.lift(color, -0.1);
-            liftedColorCache.put(color, liftedColor);
-        }
-        return liftedColor;
-    }
-    else if (isGradientObject(color)) {
-        const ret = extend({}, color) as GradientObject;
-        ret.colorStops = map(color.colorStops, stop => ({
-            offset: stop.offset,
-            color: colorTool.lift(stop.color, -0.1)
-        }));
-        return ret;
-    }
-    // Change nothing.
-    return color;
-}
+import { getClassId } from './cssClassId';
 
 export function createCSSEmphasis(
     el: Displayable,
@@ -36,14 +9,16 @@ export function createCSSEmphasis(
     scope: BrushScope
 ) {
     if (!el.ignore && el.__metaData) {
-        const empahsisStyle = el.states.emphasis
+        const emphasisStyle = el.states.emphasis && el.states.emphasis.style
             ? el.states.emphasis.style
             : {};
-        let fill = empahsisStyle.fill;
+        let fill = emphasisStyle.fill;
         if (!fill) {
             // No empahsis fill, lift color
-            const normalFill = el.style.fill;
-            const selectFill = el.states.select && el.states.select.style.fill;
+            const normalFill = el.style && el.style.fill;
+            const selectFill = el.states.select
+                && el.states.select.style
+                && el.states.select.style.fill;
             const fromFill = el.currentStates.indexOf('select') >= 0
                 ? (selectFill || normalFill)
                 : normalFill;
@@ -51,21 +26,23 @@ export function createCSSEmphasis(
                 fill = liftColor(fromFill);
             }
         }
-        let lineWidth = empahsisStyle.lineWidth;
+        let lineWidth = emphasisStyle.lineWidth;
         if (lineWidth) {
             // Symbols use transform to set size, so lineWidth
             // should be divided by scaleX
-            const scaleX = el.transform ? el.transform[0] : 1;
+            const scaleX = (!emphasisStyle.strokeNoScale && el.transform)
+                ? el.transform[0]
+                : 1;
             lineWidth = lineWidth / scaleX;
         }
         const style = {
-            cursor: 'pointer', // TODO: Should be included in el
+            cursor: 'pointer', // TODO: Should this be customized?
         } as any;
         if (fill) {
             style.fill = fill;
         }
-        if (empahsisStyle.stroke) {
-            style.stroke = empahsisStyle.stroke;
+        if (emphasisStyle.stroke) {
+            style.stroke = emphasisStyle.stroke;
         }
         if (lineWidth) {
             style['stroke-width'] = lineWidth;
@@ -73,7 +50,7 @@ export function createCSSEmphasis(
         const styleKey = JSON.stringify(style);
         let className = scope.cssStyleCache[styleKey];
         if (!className) {
-            className = scope.zrId + '-cls-' + scope.cssClassIdx++;
+            className = scope.zrId + '-cls-' + getClassId();
             scope.cssStyleCache[styleKey] = className;
             scope.cssNodes['.' + className + ':hover'] = style;
         }
diff --git a/src/svg/graphic.ts b/src/svg/graphic.ts
index 47ad3cd73..7e659a7d7 100644
--- a/src/svg/graphic.ts
+++ b/src/svg/graphic.ts
@@ -29,7 +29,7 @@ import mapStyleToAttrs from './mapStyleToAttrs';
 import { SVGVNodeAttrs, createVNode, SVGVNode, vNodeToString, BrushScope, META_DATA_PREFIX } from './core';
 import { MatrixArray } from '../core/matrix';
 import Displayable from '../graphic/Displayable';
-import { assert, clone, isFunction, isString, logError, map, retrieve2 } from '../core/util';
+import { assert, clone, each, isFunction, isString, logError, map, retrieve2 } from '../core/util';
 import Polyline from '../graphic/shape/Polyline';
 import Polygon from '../graphic/shape/Polygon';
 import { GradientObject } from '../graphic/Gradient';
@@ -72,9 +72,10 @@ function setStyleAttrs(attrs: SVGVNodeAttrs, style: AllStyleOption, el: Path | T
 
 function setMetaData(attrs: SVGVNodeAttrs, el: Path | TSpan | ZRImage) {
     if (el.__metaData) {
-        for (const key in el.__metaData) {
-            attrs[META_DATA_PREFIX + key] = el.__metaData[key] + '';
-        }
+        each(el.__metaData, function (val, key) {
+            attrs[(META_DATA_PREFIX + key).toLowerCase()]
+                = val + '';
+        });
     }
 }
 
diff --git a/src/tool/color.ts b/src/tool/color.ts
index bacf1fa9e..ae912e3fe 100644
--- a/src/tool/color.ts
+++ b/src/tool/color.ts
@@ -1,4 +1,6 @@
 import LRU from '../core/LRU';
+import { extend, isGradientObject, isString, map } from '../core/util';
+import { GradientObject } from '../graphic/Gradient';
 
 const kCSSColorTable = {
     'transparent': [0, 0, 0, 0], 'aliceblue': [240, 248, 255, 1],
@@ -566,4 +568,28 @@ export function random(): string {
         Math.round(Math.random() * 255),
         Math.round(Math.random() * 255)
     ], 'rgb');
-}
\ No newline at end of file
+}
+
+const liftedColorCache = new LRU<string>(100);
+export function liftColor(color: GradientObject): GradientObject;
+export function liftColor(color: string): string;
+export function liftColor(color: string | GradientObject): string | GradientObject {
+    if (isString(color)) {
+        let liftedColor = liftedColorCache.get(color);
+        if (!liftedColor) {
+            liftedColor = lift(color, -0.1);
+            liftedColorCache.put(color, liftedColor);
+        }
+        return liftedColor;
+    }
+    else if (isGradientObject(color)) {
+        const ret = extend({}, color) as GradientObject;
+        ret.colorStops = map(color.colorStops, stop => ({
+            offset: stop.offset,
+            color: lift(stop.color, -0.1)
+        }));
+        return ret;
+    }
+    // Change nothing.
+    return color;
+}
diff --git a/test/svg-meta-data.html b/test/svg-meta-data.html
index afc4a1d9c..c092cb1c7 100644
--- a/test/svg-meta-data.html
+++ b/test/svg-meta-data.html
@@ -58,9 +58,9 @@
             if (type === 'seriesItem') {
                 child.addEventListener('mouseover', event => {
                     const attrs = event.target.attributes;
-                    const seriesIndex = attrs.ecmeta_seriesIndex.value;
-                    const dataIndex = attrs.ecmeta_dataIndex.value;
-                    const styleType = attrs.ecmeta_styleType.value;
+                    const seriesIndex = attrs.ecmeta_seriesindex.value;
+                    const dataIndex = attrs.ecmeta_dataindex.value;
+                    const styleType = attrs.ecmeta_styletype.value;
                     const emphasis = metaData.series[seriesIndex].emphasis;
                     if (emphasis && emphasis[styleType]) {
                         const style = emphasis[styleType];
@@ -71,9 +71,9 @@
                 });
                 child.addEventListener('mouseout', event => {
                     const attrs = event.target.attributes;
-                    const seriesIndex = attrs.ecmeta_seriesIndex.value;
-                    const dataIndex = attrs.ecmeta_dataIndex.value;
-                    const styleType = attrs.ecmeta_styleType.value;
+                    const seriesIndex = attrs.ecmeta_seriesindex.value;
+                    const dataIndex = attrs.ecmeta_dataindex.value;
+                    const styleType = attrs.ecmeta_styletype.value;
                     const normal = metaData.series[seriesIndex].normal;
                     if (normal && normal[styleType]) {
                         const style = normal[styleType];
@@ -84,8 +84,7 @@
                 });
             }
         }
-        console.log(root)
-    });
+    }, 100);
     </script>
 
 </body>

From fb4c2656eae4effd4f215232fbf94d589ca5c9a4 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Tue, 13 Jun 2023 17:11:45 +0800
Subject: [PATCH 05/20] feat(ssr): provide registerSSRDataGetter

---
 src/Element.ts         |  21 +++++++--
 src/svg/cssEmphasis.ts | 104 +++++++++++++++++++++++------------------
 src/svg/graphic.ts     |  13 +++++-
 src/zrender.ts         |  17 +++++++
 4 files changed, 103 insertions(+), 52 deletions(-)

diff --git a/src/Element.ts b/src/Element.ts
index ec1211ac1..e148e4434 100644
--- a/src/Element.ts
+++ b/src/Element.ts
@@ -368,11 +368,6 @@ class Element<Props extends ElementProps = ElementProps> {
      */
     __inHover: boolean
 
-    /**
-     * Any information to be binded on the element when rendering.
-     */
-    __metaData: Record<string, string | number | boolean>
-
     /**
      * path to clip the elements and its children, if it is a group.
      * @see http://www.w3.org/TR/2dcontext/#clipping-region
@@ -1022,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.
      */
diff --git a/src/svg/cssEmphasis.ts b/src/svg/cssEmphasis.ts
index e5e3f86db..6632c7785 100644
--- a/src/svg/cssEmphasis.ts
+++ b/src/svg/cssEmphasis.ts
@@ -8,52 +8,66 @@ export function createCSSEmphasis(
     attrs: SVGVNodeAttrs,
     scope: BrushScope
 ) {
-    if (!el.ignore && el.__metaData) {
-        const emphasisStyle = el.states.emphasis && el.states.emphasis.style
-            ? el.states.emphasis.style
-            : {};
-        let fill = emphasisStyle.fill;
-        if (!fill) {
-            // No empahsis fill, lift color
-            const normalFill = el.style && el.style.fill;
-            const selectFill = el.states.select
-                && el.states.select.style
-                && el.states.select.style.fill;
-            const fromFill = el.currentStates.indexOf('select') >= 0
-                ? (selectFill || normalFill)
-                : normalFill;
-            if (fromFill) {
-                fill = liftColor(fromFill);
-            }
-        }
-        let lineWidth = emphasisStyle.lineWidth;
-        if (lineWidth) {
-            // Symbols use transform to set size, so lineWidth
-            // should be divided by scaleX
-            const scaleX = (!emphasisStyle.strokeNoScale && el.transform)
-                ? el.transform[0]
-                : 1;
-            lineWidth = lineWidth / scaleX;
-        }
-        const style = {
-            cursor: 'pointer', // TODO: Should this be customized?
-        } as any;
-        if (fill) {
-            style.fill = fill;
-        }
-        if (emphasisStyle.stroke) {
-            style.stroke = emphasisStyle.stroke;
+    if (!el.ignore) {
+        if (el.isSilent()) {
+            // If el is silent, it can not be hovered nor selected.
+            // So set pointer-events to pass through.
+            const style = {
+                'pointer-events': 'none'
+            };
+            setClassAttribute(style, attrs, scope, true);
         }
-        if (lineWidth) {
-            style['stroke-width'] = lineWidth;
-        }
-        const styleKey = JSON.stringify(style);
-        let className = scope.cssStyleCache[styleKey];
-        if (!className) {
-            className = scope.zrId + '-cls-' + getClassId();
-            scope.cssStyleCache[styleKey] = className;
-            scope.cssNodes['.' + className + ':hover'] = style;
+        else {
+            const emphasisStyle = el.states.emphasis && el.states.emphasis.style
+                ? el.states.emphasis.style
+                : {};
+            let fill = emphasisStyle.fill;
+            if (!fill) {
+                // No empahsis fill, lift color
+                const normalFill = el.style && el.style.fill;
+                const selectFill = el.states.select
+                    && el.states.select.style
+                    && el.states.select.style.fill;
+                const fromFill = el.currentStates.indexOf('select') >= 0
+                    ? (selectFill || normalFill)
+                    : normalFill;
+                if (fromFill) {
+                    fill = liftColor(fromFill);
+                }
+            }
+            let lineWidth = emphasisStyle.lineWidth;
+            if (lineWidth) {
+                // Symbols use transform to set size, so lineWidth
+                // should be divided by scaleX
+                const scaleX = (!emphasisStyle.strokeNoScale && el.transform)
+                    ? el.transform[0]
+                    : 1;
+                lineWidth = lineWidth / scaleX;
+            }
+            const style = {
+                cursor: 'pointer', // TODO: Should this be customized?
+            } as any;
+            if (fill) {
+                style.fill = fill;
+            }
+            if (emphasisStyle.stroke) {
+                style.stroke = emphasisStyle.stroke;
+            }
+            if (lineWidth) {
+                style['stroke-width'] = lineWidth;
+            }
+            setClassAttribute(style, attrs, scope, true);
         }
-        attrs.class = attrs.class ? (attrs.class + ' ' + className) : className;
     }
 }
+
+function setClassAttribute(style: object, attrs: SVGVNodeAttrs, scope: BrushScope, withHover: boolean) {
+    const styleKey = JSON.stringify(style);
+    let className = scope.cssStyleCache[styleKey];
+    if (!className) {
+        className = scope.zrId + '-cls-' + getClassId();
+        scope.cssStyleCache[styleKey] = className;
+        scope.cssNodes['.' + className + (withHover ? ':hover' : '')] = style as any;
+    }
+    attrs.class = attrs.class ? (attrs.class + ' ' + className) : className;
+}
diff --git a/src/svg/graphic.ts b/src/svg/graphic.ts
index 7e659a7d7..c7ffe87f1 100644
--- a/src/svg/graphic.ts
+++ b/src/svg/graphic.ts
@@ -40,6 +40,7 @@ import { createCSSAnimation } from './cssAnimation';
 import { hasSeparateFont, parseFontSize } from '../graphic/Text';
 import { DEFAULT_FONT, DEFAULT_FONT_FAMILY } from '../core/platform';
 import { createCSSEmphasis } from './cssEmphasis';
+import { getElementSSRData } from '../zrender';
 
 const round = Math.round;
 
@@ -62,6 +63,10 @@ function setStyleAttrs(attrs: SVGVNodeAttrs, style: AllStyleOption, el: Path | T
         else if (isFillStroke && isPattern(val)) {
             setPattern(el, attrs, key, scope);
         }
+        else if (isFillStroke && val === 'none') {
+            // When is none, it cannot be interacted when ssr
+            attrs[key] = 'transparent';
+        }
         else {
             attrs[key] = val;
         }
@@ -71,11 +76,15 @@ function setStyleAttrs(attrs: SVGVNodeAttrs, style: AllStyleOption, el: Path | T
 }
 
 function setMetaData(attrs: SVGVNodeAttrs, el: Path | TSpan | ZRImage) {
-    if (el.__metaData) {
-        each(el.__metaData, function (val, key) {
+    const metaData = getElementSSRData(el);
+    if (metaData) {
+        metaData.each((val, key) => {
             attrs[(META_DATA_PREFIX + key).toLowerCase()]
                 = val + '';
         });
+        if (el.isSilent()) {
+            attrs[META_DATA_PREFIX + 'silent'] = 'true';
+        }
     }
 }
 
diff --git a/src/zrender.ts b/src/zrender.ts
index 44fd886b6..208ab23a2 100644
--- a/src/zrender.ts
+++ b/src/zrender.ts
@@ -482,6 +482,23 @@ export function registerPainter(name: string, Ctor: PainterBaseCtor) {
     painterCtors[name] = Ctor;
 }
 
+export type ElementSSRData = zrUtil.HashMap<unknown>;
+export type ElementSSRDataGetter<T> = (el: Element) => zrUtil.HashMap<T>;
+
+let ssrDataGetter = function (el: Element): ElementSSRData {
+    return null;
+}
+
+export function getElementSSRData(el: Element): ElementSSRData {
+    if (typeof ssrDataGetter === 'function') {
+        return ssrDataGetter(el);
+    }
+}
+
+export function registerSSRDataGetter<T>(getter: ElementSSRDataGetter<T>) {
+    ssrDataGetter = getter;
+}
+
 /**
  * @type {string}
  */

From 58bcfcfcfee8dc5f5114a25e02282cce21b6b4c3 Mon Sep 17 00:00:00 2001
From: liuyang0826 <1161906592@qq.com>
Date: Thu, 31 Aug 2023 14:19:46 +0800
Subject: [PATCH 06/20] feat: add `lib/all.js` to sideEffects

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d505ce8be..7c2beebc5 100644
--- a/package.json
+++ b/package.json
@@ -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",

From 8129bd84fe0c76731cf95d7db8e744fe5b1118f3 Mon Sep 17 00:00:00 2001
From: Aleksandr Lesnenko <alxnddr@gmail.com>
Date: Mon, 18 Sep 2023 16:15:08 -0300
Subject: [PATCH 07/20] fix(svg): fix assigning style attribute does not work
 when CSP is enforced

---
 src/svg/patch.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/svg/patch.ts b/src/svg/patch.ts
index aeba565c8..edea6ae86 100644
--- a/src/svg/patch.ts
+++ b/src/svg/patch.ts
@@ -122,7 +122,7 @@ function removeVnodes(parentElm: Node, vnodes: SVGVNode[], startIdx: number, end
 
 export function updateAttrs(oldVnode: SVGVNode, vnode: SVGVNode): void {
     let key: string;
-    const elm = vnode.elm as Element;
+    const elm = vnode.elm as SVGElement;
     const oldAttrs = oldVnode && oldVnode.attrs || {};
     const attrs = vnode.attrs || {};
 
@@ -143,7 +143,10 @@ export function updateAttrs(oldVnode: SVGVNode, vnode: SVGVNode): void {
                 elm.removeAttribute(key);
             }
             else {
-                if (key.charCodeAt(0) !== xChar) {
+                if (key === 'style') {
+                    elm.style.cssText = cur as string
+                }
+                else if (key.charCodeAt(0) !== xChar) {
                     elm.setAttribute(key, cur as any);
                 }
                 // TODO

From 997c753459d226abbf0bedf4967168cf17624029 Mon Sep 17 00:00:00 2001
From: plainheart <yhen@all-my-life.cn>
Date: Fri, 22 Sep 2023 19:59:58 +0800
Subject: [PATCH 08/20] fix(canvas): remove `__painter` from `Layer` and inject
 `painter` in `Painter#insertLayer` when it doesn't exist

---
 src/canvas/Layer.ts   | 5 +----
 src/canvas/Painter.ts | 4 ++--
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/canvas/Layer.ts b/src/canvas/Layer.ts
index ed67e8622..537c9f94c 100644
--- a/src/canvas/Layer.ts
+++ b/src/canvas/Layer.ts
@@ -89,8 +89,6 @@ export default class Layer extends Eventful {
 
     private _paintRects: BoundingRect[]
 
-    __painter: CanvasPainter
-
     __dirty = true
     __firstTimePaint = true
 
@@ -449,9 +447,8 @@ export default class Layer extends Eventful {
                     clearColorGradientOrPattern = createCanvasPattern(
                         ctx, clearColor, {
                             dirty() {
-                                // TODO
                                 self.setUnpainted();
-                                self.__painter.refresh();
+                                self.painter.refresh();
                             }
                         }
                     );
diff --git a/src/canvas/Painter.ts b/src/canvas/Painter.ts
index 4bc818182..568885692 100644
--- a/src/canvas/Painter.ts
+++ b/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

From 5e9add1f6d1b9815f3c24294b1eea2682f111101 Mon Sep 17 00:00:00 2001
From: ChepteaCatalin <71984989+ChepteaCatalin@users.noreply.github.com>
Date: Sat, 23 Sep 2023 11:58:54 +0300
Subject: [PATCH 09/20] feat(matrix): allow rotating relative to a point
 different than the origin. close #1033

---
 src/core/matrix.ts               | 11 ++++++++---
 src/tool/parseSVG.ts             |  5 ++++-
 test/ut/spec/core/matrix.test.ts | 21 +++++++++++++++++++++
 3 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 test/ut/spec/core/matrix.test.ts

diff --git a/src/core/matrix.ts b/src/core/matrix.ts
index 78009f815..13b5b9e19 100644
--- a/src/core/matrix.ts
+++ b/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;
 }
 
diff --git a/src/tool/parseSVG.ts b/src/tool/parseSVG.ts
index cbcc2a804..0ee2739a6 100644
--- a/src/tool/parseSVG.ts
+++ b/src/tool/parseSVG.ts
@@ -845,7 +845,10 @@ function parseTransformAttribute(xmlNode: SVGElement, node: Element): void {
                     break;
                 case 'rotate':
                     // TODO: zrender use different hand in coordinate system.
-                    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':
                     const sx = Math.tan(parseFloat(valueArr[0]) * DEGREE_TO_ANGLE);
diff --git a/test/ut/spec/core/matrix.test.ts b/test/ut/spec/core/matrix.test.ts
new file mode 100644
index 000000000..e3c609d74
--- /dev/null
+++ b/test/ut/spec/core/matrix.test.ts
@@ -0,0 +1,21 @@
+import { rotate } from '../../../../src/core/matrix';
+
+describe('matrix', function () {
+    it('should rotate relative to a pivot point', function () {
+        const matrix = [
+            0.9659258262890683, 0.25881904510252074, -0.25881904510252074, 0.9659258262890683,
+            40.213201392710246, -26.96358986452364
+        ];
+        const rad = -0.2617993877991494;
+        const pivot = [122.511, 139.243];
+
+        const result = rotate(matrix, matrix, rad, pivot);
+
+        expect(result[0]).toBeCloseTo(0.8660254037844387, 5);
+        expect(result[1]).toBeCloseTo(0.49999999999999994, 5);
+        expect(result[2]).toBeCloseTo(-0.49999999999999994, 5);
+        expect(result[3]).toBeCloseTo(0.8660254037844387, 5);
+        expect(result[4]).toBeCloseTo(86.03486175696463, 5);
+        expect(result[5]).toBeCloseTo(-42.600475299156585, 5);
+    });
+});

From 894f408179b323ea8ff212ce2cbfaaa83db2b155 Mon Sep 17 00:00:00 2001
From: uzlopak <aras.abbasi@googlemail.com>
Date: Thu, 2 Nov 2023 10:26:06 +0100
Subject: [PATCH 10/20] fix: detect node21.1.0

---
 src/core/env.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/core/env.ts b/src/core/env.ts
index cd52e3d91..92c7f9e74 100644
--- a/src/core/env.ts
+++ b/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;

From a78b088d48ac93249b81ccfb608ebcdedfe02a59 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Thu, 16 Nov 2023 14:40:01 +0800
Subject: [PATCH 11/20] fix(ssr): remove a not used method

---
 src/svg/graphic.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/svg/graphic.ts b/src/svg/graphic.ts
index c7ffe87f1..8f9c08b39 100644
--- a/src/svg/graphic.ts
+++ b/src/svg/graphic.ts
@@ -29,7 +29,7 @@ import mapStyleToAttrs from './mapStyleToAttrs';
 import { SVGVNodeAttrs, createVNode, SVGVNode, vNodeToString, BrushScope, META_DATA_PREFIX } from './core';
 import { MatrixArray } from '../core/matrix';
 import Displayable from '../graphic/Displayable';
-import { assert, clone, each, isFunction, isString, logError, map, retrieve2 } from '../core/util';
+import { assert, clone, isFunction, isString, logError, map, retrieve2 } from '../core/util';
 import Polyline from '../graphic/shape/Polyline';
 import Polygon from '../graphic/shape/Polygon';
 import { GradientObject } from '../graphic/Gradient';

From 1ee415621e9c5908da7e4e524efe7314e9181262 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Thu, 16 Nov 2023 15:18:22 +0800
Subject: [PATCH 12/20] fix(svg): remove id

---
 src/svg/Painter.ts            | 6 ++----
 test/svg-backgroundColor.html | 9 ---------
 2 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/svg/Painter.ts b/src/svg/Painter.ts
index 27bdeeb39..6731e5c4a 100644
--- a/src/svg/Painter.ts
+++ b/src/svg/Painter.ts
@@ -143,7 +143,7 @@ class SVGPainter implements PainterBase {
 
         const children: SVGVNode[] = [];
 
-        const bgVNode = this._bgVNode = createBackgroundVNode(this._id, width, height, this._backgroundColor, scope);
+        const bgVNode = this._bgVNode = createBackgroundVNode(width, height, this._backgroundColor, scope);
         bgVNode && children.push(bgVNode);
 
         // Ignore the root g if wan't the output to be more tight.
@@ -360,7 +360,6 @@ function createMethodNotSupport(method: string): any {
 }
 
 function createBackgroundVNode(
-    zrId: string,
     width: number,
     height: number,
     backgroundColor: SVGPainterBackgroundColor,
@@ -375,8 +374,7 @@ function createBackgroundVNode(
                 width,
                 height,
                 x: '0',
-                y: '0',
-                id: zrId + '-bg'
+                y: '0'
             }
         );
         if (isGradient(backgroundColor)) {
diff --git a/test/svg-backgroundColor.html b/test/svg-backgroundColor.html
index 40e1e79a7..c6f6b08f3 100644
--- a/test/svg-backgroundColor.html
+++ b/test/svg-backgroundColor.html
@@ -16,9 +16,6 @@
 </head>
 <body>
     <div id="main" style="width:100vw;height:100vh;"></div>
-
-    <h2>This should not have a rect with the same id as the above instance.</h2>
-    <div id="main2" style="width:100vw;height:100vh;"></div>
     <div class="opt-bar">
         <button onclick="updateBg()">Change Background</button>
         <select id="repeat">
@@ -46,11 +43,6 @@ <h2>This should not have a rect with the same id as the above instance.</h2>
     });
     zr.add(txt);
 
-    var zr2 = zrender.init(document.getElementById('main2'), {
-        renderer: 'svg'
-    });
-    zr2.add(txt);
-
     var linearGradient = new zrender.LinearGradient();
     linearGradient.addColorStop(0, '#a598e1');
     linearGradient.addColorStop(1, '#14c4ba');
@@ -104,7 +96,6 @@ <h2>This should not have a rect with the same id as the above instance.</h2>
             bg = text = 'none';
         }
         zr.setBackgroundColor(bg);
-        zr2.setBackgroundColor(bg);
         txt.setStyle({ text: 'SVG BackgroundColor: ' + text });
         i++;
     }

From 8c6b137fdccea52aa2bb3bcaf317b1595abd5171 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Thu, 16 Nov 2023 15:21:39 +0800
Subject: [PATCH 13/20] fix: el null check

---
 src/canvas/Layer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/canvas/Layer.ts b/src/canvas/Layer.ts
index ed67e8622..43a512f71 100644
--- a/src/canvas/Layer.ts
+++ b/src/canvas/Layer.ts
@@ -311,7 +311,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();

From e8cc0f9353f1b7dc230ae2908c4bb37d259057d0 Mon Sep 17 00:00:00 2001
From: yechunxi <yechunxi00@163.com>
Date: Tue, 19 Dec 2023 17:34:16 +0800
Subject: [PATCH 14/20] fix: avoid errors when executing unfinished operations
 after calling dispose

Signed-off-by: yechunxi <yechunxi00@163.com>
---
 src/zrender.ts | 50 +++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/zrender.ts b/src/zrender.ts
index 44fd886b6..694707783 100644
--- a/src/zrender.ts
+++ b/src/zrender.ts
@@ -81,7 +81,7 @@ class ZRender {
 
     private _needsRefresh = true
     private _needsRefreshHover = true
-
+    private _disposed = false;
     /**
      * If theme is dark mode. It will determine the color strategy for labels.
      */
@@ -154,7 +154,7 @@ class ZRender {
      * 添加元素
      */
     add(el: Element) {
-        if (!el) {
+        if (!el || this._disposed) {
             return;
         }
         this.storage.addRoot(el);
@@ -166,7 +166,7 @@ class ZRender {
      * 删除元素
      */
     remove(el: Element) {
-        if (!el) {
+        if (!el || this._disposed) {
             return;
         }
         this.storage.delRoot(el);
@@ -178,6 +178,9 @@ class ZRender {
      * Change configuration of layer
     */
     configLayer(zLevel: number, config: LayerConfig) {
+       if(this._disposed) {
+            return;
+        }
         if (this.painter.configLayer) {
             this.painter.configLayer(zLevel, config);
         }
@@ -188,6 +191,9 @@ class ZRender {
      * Set background color
      */
     setBackgroundColor(backgroundColor: string | GradientObject | PatternObject) {
+        if(this._disposed) {
+            return;
+        }
         if (this.painter.setBackgroundColor) {
             this.painter.setBackgroundColor(backgroundColor);
         }
@@ -215,6 +221,9 @@ class ZRender {
      * Repaint the canvas immediately
      */
     refreshImmediately(fromInside?: boolean) {
+       if(this._disposed) {
+            return;
+        }
         // const start = new Date();
         if (!fromInside) {
             // Update animation if refreshImmediately is invoked from outside.
@@ -234,6 +243,9 @@ class ZRender {
      * Mark and repaint the canvas in the next frame of browser
      */
     refresh() {
+       if(this._disposed) {
+            return;
+        }
         this._needsRefresh = true;
         // Active the animation again.
         this.animation.start();
@@ -243,6 +255,9 @@ class ZRender {
      * Perform all refresh
      */
     flush() {
+       if(this._disposed) {
+            return;
+        }
         this._flush(false);
     }
 
@@ -288,6 +303,9 @@ class ZRender {
      * Wake up animation loop. But not render.
      */
     wakeUp() {
+       if(this._disposed) {
+            return;
+        }
         this.animation.start();
         // Reset the frame count.
         this._stillFrameAccum = 0;
@@ -304,6 +322,9 @@ class ZRender {
      * Refresh hover immediately
      */
     refreshHoverImmediately() {
+       if(this._disposed) {
+            return;
+        }
         this._needsRefreshHover = false;
         if (this.painter.refreshHover && this.painter.getType() === 'canvas') {
             this.painter.refreshHover();
@@ -318,6 +339,9 @@ class ZRender {
         width?: number| string
         height?: number | string
     }) {
+       if(this._disposed) {
+            return;
+        }
         opts = opts || {};
         this.painter.resize(opts.width, opts.height);
         this.handler.resize();
@@ -327,6 +351,9 @@ class ZRender {
      * Stop and clear all animation immediately
      */
     clearAnimation() {
+       if(this._disposed) {
+            return;
+        }
         this.animation.clear();
     }
 
@@ -334,6 +361,9 @@ class ZRender {
      * Get container width
      */
     getWidth(): number {
+       if(this._disposed) {
+            return;
+        }
         return this.painter.getWidth();
     }
 
@@ -341,6 +371,9 @@ class ZRender {
      * Get container height
      */
     getHeight(): number {
+       if(this._disposed) {
+            return;
+        }
         return this.painter.getHeight();
     }
 
@@ -381,6 +414,9 @@ class ZRender {
      */
     // eslint-disable-next-line max-len
     off(eventName?: string, eventHandler?: EventCallback) {
+       if(this._disposed) {
+            return;
+        }
         this.handler.off(eventName, eventHandler);
     }
 
@@ -391,6 +427,9 @@ class ZRender {
      * @param event Event object
      */
     trigger(eventName: string, event?: unknown) {
+       if(this._disposed) {
+            return;
+        }
         this.handler.trigger(eventName, event);
     }
 
@@ -399,6 +438,9 @@ class ZRender {
      * Clear all objects and the canvas.
      */
     clear() {
+       if(this._disposed) {
+            return;
+        }
         const roots = this.storage.getRoots();
         for (let i = 0; i < roots.length; i++) {
             if (roots[i] instanceof Group) {
@@ -425,6 +467,8 @@ class ZRender {
         this.painter =
         this.handler = null;
 
+        this._disposed = true;
+
         delInstance(this.id);
     }
 }

From 0b21ebdc43514fdd7ed71743fbd331ce9a521d7e Mon Sep 17 00:00:00 2001
From: plainheart <yhen@all-my-life.cn>
Date: Thu, 21 Dec 2023 01:14:25 +0800
Subject: [PATCH 15/20] fix: add missing disposed check for some methods and
 fix format flaw

---
 src/zrender.ts | 54 ++++++++++++++++++++++++++++++--------------------
 1 file changed, 33 insertions(+), 21 deletions(-)

diff --git a/src/zrender.ts b/src/zrender.ts
index 694707783..cbc68005b 100644
--- a/src/zrender.ts
+++ b/src/zrender.ts
@@ -81,7 +81,7 @@ class ZRender {
 
     private _needsRefresh = true
     private _needsRefreshHover = true
-    private _disposed = false;
+    private _disposed: boolean;
     /**
      * If theme is dark mode. It will determine the color strategy for labels.
      */
@@ -154,7 +154,7 @@ class ZRender {
      * 添加元素
      */
     add(el: Element) {
-        if (!el || this._disposed) {
+        if (this._disposed || !el) {
             return;
         }
         this.storage.addRoot(el);
@@ -166,7 +166,7 @@ class ZRender {
      * 删除元素
      */
     remove(el: Element) {
-        if (!el || this._disposed) {
+        if (this._disposed || !el) {
             return;
         }
         this.storage.delRoot(el);
@@ -178,7 +178,7 @@ class ZRender {
      * Change configuration of layer
     */
     configLayer(zLevel: number, config: LayerConfig) {
-       if(this._disposed) {
+        if (this._disposed) {
             return;
         }
         if (this.painter.configLayer) {
@@ -191,7 +191,7 @@ class ZRender {
      * Set background color
      */
     setBackgroundColor(backgroundColor: string | GradientObject | PatternObject) {
-        if(this._disposed) {
+        if (this._disposed) {
             return;
         }
         if (this.painter.setBackgroundColor) {
@@ -221,7 +221,7 @@ class ZRender {
      * Repaint the canvas immediately
      */
     refreshImmediately(fromInside?: boolean) {
-       if(this._disposed) {
+        if (this._disposed) {
             return;
         }
         // const start = new Date();
@@ -243,7 +243,7 @@ class ZRender {
      * Mark and repaint the canvas in the next frame of browser
      */
     refresh() {
-       if(this._disposed) {
+        if (this._disposed) {
             return;
         }
         this._needsRefresh = true;
@@ -255,7 +255,7 @@ class ZRender {
      * Perform all refresh
      */
     flush() {
-       if(this._disposed) {
+        if (this._disposed) {
             return;
         }
         this._flush(false);
@@ -303,7 +303,7 @@ class ZRender {
      * Wake up animation loop. But not render.
      */
     wakeUp() {
-       if(this._disposed) {
+        if (this._disposed) {
             return;
         }
         this.animation.start();
@@ -322,7 +322,7 @@ class ZRender {
      * Refresh hover immediately
      */
     refreshHoverImmediately() {
-       if(this._disposed) {
+        if (this._disposed) {
             return;
         }
         this._needsRefreshHover = false;
@@ -339,7 +339,7 @@ class ZRender {
         width?: number| string
         height?: number | string
     }) {
-       if(this._disposed) {
+        if (this._disposed) {
             return;
         }
         opts = opts || {};
@@ -351,7 +351,7 @@ class ZRender {
      * Stop and clear all animation immediately
      */
     clearAnimation() {
-       if(this._disposed) {
+        if (this._disposed) {
             return;
         }
         this.animation.clear();
@@ -360,8 +360,8 @@ class ZRender {
     /**
      * Get container width
      */
-    getWidth(): number {
-       if(this._disposed) {
+    getWidth(): number | undefined {
+        if (this._disposed) {
             return;
         }
         return this.painter.getWidth();
@@ -370,8 +370,8 @@ class ZRender {
     /**
      * Get container height
      */
-    getHeight(): number {
-       if(this._disposed) {
+    getHeight(): number | undefined {
+        if (this._disposed) {
             return;
         }
         return this.painter.getHeight();
@@ -382,6 +382,9 @@ class ZRender {
      * @param cursorStyle='default' 例如 crosshair
      */
     setCursorStyle(cursorStyle: string) {
+        if (this._disposed) {
+            return;
+        }
         this.handler.setCursorStyle(cursorStyle);
     }
 
@@ -394,7 +397,10 @@ class ZRender {
     findHover(x: number, y: number): {
         target: Displayable
         topTarget: Displayable
-    } {
+    } | undefined {
+        if (this._disposed) {
+            return;
+        }
         return this.handler.findHover(x, y);
     }
 
@@ -403,7 +409,9 @@ class ZRender {
     on<Ctx>(eventName: string, eventHandler: WithThisType<EventCallback<any[]>, unknown extends Ctx ? ZRenderType : Ctx>, context?: Ctx): this
     // eslint-disable-next-line max-len
     on<Ctx>(eventName: string, eventHandler: (...args: any) => any, context?: Ctx): this {
-        this.handler.on(eventName, eventHandler, context);
+        if (!this._disposed) {
+            this.handler.on(eventName, eventHandler, context);
+        }
         return this;
     }
 
@@ -414,7 +422,7 @@ class ZRender {
      */
     // eslint-disable-next-line max-len
     off(eventName?: string, eventHandler?: EventCallback) {
-       if(this._disposed) {
+        if (this._disposed) {
             return;
         }
         this.handler.off(eventName, eventHandler);
@@ -427,7 +435,7 @@ class ZRender {
      * @param event Event object
      */
     trigger(eventName: string, event?: unknown) {
-       if(this._disposed) {
+        if (this._disposed) {
             return;
         }
         this.handler.trigger(eventName, event);
@@ -438,7 +446,7 @@ class ZRender {
      * Clear all objects and the canvas.
      */
     clear() {
-       if(this._disposed) {
+        if (this._disposed) {
             return;
         }
         const roots = this.storage.getRoots();
@@ -455,6 +463,10 @@ class ZRender {
      * Dispose self.
      */
     dispose() {
+        if (this._disposed) {
+            return;
+        }
+
         this.animation.stop();
 
         this.clear();

From 52e5155ad19120f9141f5238475c0b85a3ccdbcc Mon Sep 17 00:00:00 2001
From: plainheart <yhen@all-my-life.cn>
Date: Thu, 21 Dec 2023 01:16:49 +0800
Subject: [PATCH 16/20] chore: fix typo

---
 src/zrender.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/zrender.ts b/src/zrender.ts
index cbc68005b..90e93af02 100644
--- a/src/zrender.ts
+++ b/src/zrender.ts
@@ -123,7 +123,7 @@ class ZRender {
         this.storage = storage;
         this.painter = painter;
 
-        const handerProxy = (!env.node && !env.worker && !ssrMode)
+        const handlerProxy = (!env.node && !env.worker && !ssrMode)
             ? new HandlerProxy(painter.getViewportRoot(), painter.root)
             : null;
 
@@ -137,7 +137,7 @@ class ZRender {
             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: {
@@ -284,7 +284,7 @@ class ZRender {
         }
         else if (this._sleepAfterStill > 0) {
             this._stillFrameAccum++;
-            // Stop the animiation after still for 10 frames.
+            // Stop the animation after still for 10 frames.
             if (this._stillFrameAccum > this._sleepAfterStill) {
                 this.animation.stop();
             }

From cd1f473b0b1695296b95aa0d9c61361bce1a034b Mon Sep 17 00:00:00 2001
From: plainheart <yhen@all-my-life.cn>
Date: Sun, 31 Dec 2023 20:14:23 +0800
Subject: [PATCH 17/20] fix(type): make the last two parameters `ellipsis` &
 `options` of the function `truncateText` optional. resolves
 apache/echarts#19447

---
 src/graphic/helper/parseText.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/graphic/helper/parseText.ts b/src/graphic/helper/parseText.ts
index 201d8fc00..275e36b0d 100644
--- a/src/graphic/helper/parseText.ts
+++ b/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;

From 03d4cec094ebeabc63e1e7c360d50f17c20cc526 Mon Sep 17 00:00:00 2001
From: plainheart <yhen@all-my-life.cn>
Date: Wed, 3 Jan 2024 01:19:53 +0800
Subject: [PATCH 18/20] fix(svg): skip to set SSR attributes with `undefined`
 values

---
 src/svg/graphic.ts | 3 +--
 src/zrender.ts     | 4 +---
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/svg/graphic.ts b/src/svg/graphic.ts
index 8f9c08b39..096014967 100644
--- a/src/svg/graphic.ts
+++ b/src/svg/graphic.ts
@@ -79,8 +79,7 @@ function setMetaData(attrs: SVGVNodeAttrs, el: Path | TSpan | ZRImage) {
     const metaData = getElementSSRData(el);
     if (metaData) {
         metaData.each((val, key) => {
-            attrs[(META_DATA_PREFIX + key).toLowerCase()]
-                = val + '';
+            val != null && (attrs[(META_DATA_PREFIX + key).toLowerCase()] = val + '');
         });
         if (el.isSilent()) {
             attrs[META_DATA_PREFIX + 'silent'] = 'true';
diff --git a/src/zrender.ts b/src/zrender.ts
index 225ca75c0..acafbbffb 100644
--- a/src/zrender.ts
+++ b/src/zrender.ts
@@ -541,9 +541,7 @@ export function registerPainter(name: string, Ctor: PainterBaseCtor) {
 export type ElementSSRData = zrUtil.HashMap<unknown>;
 export type ElementSSRDataGetter<T> = (el: Element) => zrUtil.HashMap<T>;
 
-let ssrDataGetter = function (el: Element): ElementSSRData {
-    return null;
-}
+let ssrDataGetter: ElementSSRDataGetter<unknown>;
 
 export function getElementSSRData(el: Element): ElementSSRData {
     if (typeof ssrDataGetter === 'function') {

From f3b078455f0fbe7679c2e6e72cfa67eed1f890ac Mon Sep 17 00:00:00 2001
From: 100pah <sushuang0322@gmail.com>
Date: Tue, 16 Jan 2024 04:26:00 +0800
Subject: [PATCH 19/20] feat: change to default ESM package. For developer
 testing and node usage in customization module scenario. See
 apache/echarts#19513

---
 build/package.json |  3 +++
 dist/package.json  |  3 +++
 package.json       | 14 +++++++++++++-
 test/package.json  |  3 +++
 4 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 build/package.json
 create mode 100644 dist/package.json
 create mode 100644 test/package.json

diff --git a/build/package.json b/build/package.json
new file mode 100644
index 000000000..6a0d2ef2a
--- /dev/null
+++ b/build/package.json
@@ -0,0 +1,3 @@
+{
+    "type": "commonjs"
+}
\ No newline at end of file
diff --git a/dist/package.json b/dist/package.json
new file mode 100644
index 000000000..6a0d2ef2a
--- /dev/null
+++ b/dist/package.json
@@ -0,0 +1,3 @@
+{
+    "type": "commonjs"
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 7c2beebc5..bbd92f092 100644
--- a/package.json
+++ b/package.json
@@ -59,5 +59,17 @@
     "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"
+    },
+    "./*.js": "./*.js",
+    "./*.ts": "./*.ts",
+    "./*.json": "./*.json",
+    "./*": "./*.js"
   }
-}
+}
\ No newline at end of file
diff --git a/test/package.json b/test/package.json
new file mode 100644
index 000000000..6a0d2ef2a
--- /dev/null
+++ b/test/package.json
@@ -0,0 +1,3 @@
+{
+    "type": "commonjs"
+}
\ No newline at end of file

From 565dac52837f5c8054b6990741bc29ccc6915a09 Mon Sep 17 00:00:00 2001
From: 100pah <sushuang0322@gmail.com>
Date: Mon, 22 Jan 2024 12:40:36 +0800
Subject: [PATCH 20/20] [lint] enable comma-dangle, which has been deprecated
 in eslint.

---
 src/.eslintrc.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/.eslintrc.yaml b/src/.eslintrc.yaml
index 8fb078f0f..752deedd0 100644
--- a/src/.eslintrc.yaml
+++ b/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