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

package/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(',')
         };

package/src/svg/cssClassId.ts

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

package/src/svg/cssEmphasis.ts

@@ -0,0 +1,73 @@
+import Displayable from '../graphic/Displayable';
+import { liftColor } from '../tool/color';
+import { BrushScope, SVGVNodeAttrs } from './core';
+import { getClassId } from './cssClassId';
+
+export function createCSSEmphasis(
+    el: Displayable,
+    attrs: SVGVNodeAttrs,
+    scope: BrushScope
+) {
+    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);
+        }
+        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);
+        }
+    }
+}
+
+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;
+}

package/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,8 @@ 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';
+import { getElementSSRData } from '../zrender';
 
 const round = Math.round;
 
@@ -61,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;
         }
@@ -69,6 +75,18 @@ function setStyleAttrs(attrs: SVGVNodeAttrs, style: AllStyleOption, el: Path | T
     setShadow(el, attrs, scope);
 }
 
+function setMetaData(attrs: SVGVNodeAttrs, el: Path | TSpan | ZRImage) {
+    const metaData = getElementSSRData(el);
+    if (metaData) {
+        metaData.each((val, key) => {
+            val != null && (attrs[(META_DATA_PREFIX + key).toLowerCase()] = val + '');
+        });
+        if (el.isSilent()) {
+            attrs[META_DATA_PREFIX + 'silent'] = 'true';
+        }
+    }
+}
+
 function noRotateScale(m: MatrixArray) {
     return isAroundZero(m[0] - 1)
         && isAroundZero(m[1])
@@ -204,8 +222,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 +268,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 +340,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);
 

package/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

package/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');
-}
+}
+
+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;
+}

package/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);

package/src/zrender.ts

@@ -81,7 +81,7 @@ class ZRender {
 
     private _needsRefresh = true
     private _needsRefreshHover = true
-
+    private _disposed: boolean;
     /**
      * If theme is dark mode. It will determine the color strategy for labels.
      */
@@ -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: {
@@ -154,7 +154,7 @@ class ZRender {
      * 添加元素
      */
     add(el: Element) {
-        if (!el) {
+        if (this._disposed || !el) {
             return;
         }
         this.storage.addRoot(el);
@@ -166,7 +166,7 @@ class ZRender {
      * 删除元素
      */
     remove(el: Element) {
-        if (!el) {
+        if (this._disposed || !el) {
             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);
     }
 
@@ -269,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();
             }
@@ -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,20 +351,29 @@ class ZRender {
      * Stop and clear all animation immediately
      */
     clearAnimation() {
+        if (this._disposed) {
+            return;
+        }
         this.animation.clear();
     }
 
     /**
      * Get container width
      */
-    getWidth(): number {
+    getWidth(): number | undefined {
+        if (this._disposed) {
+            return;
+        }
         return this.painter.getWidth();
     }
 
     /**
      * Get container height
      */
-    getHeight(): number {
+    getHeight(): number | undefined {
+        if (this._disposed) {
+            return;
+        }
         return this.painter.getHeight();
     }
 
@@ -349,6 +382,9 @@ class ZRender {
      * @param cursorStyle='default' 例如 crosshair
      */
     setCursorStyle(cursorStyle: string) {
+        if (this._disposed) {
+            return;
+        }
         this.handler.setCursorStyle(cursorStyle);
     }
 
@@ -361,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);
     }
 
@@ -370,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;
     }
 
@@ -381,6 +422,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 +435,9 @@ class ZRender {
      * @param event Event object
      */
     trigger(eventName: string, event?: unknown) {
+        if (this._disposed) {
+            return;
+        }
         this.handler.trigger(eventName, event);
     }
 
@@ -399,6 +446,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) {
@@ -413,6 +463,10 @@ class ZRender {
      * Dispose self.
      */
     dispose() {
+        if (this._disposed) {
+            return;
+        }
+
         this.animation.stop();
 
         this.clear();
@@ -425,6 +479,8 @@ class ZRender {
         this.painter =
         this.handler = null;
 
+        this._disposed = true;
+
         delInstance(this.id);
     }
 }
@@ -482,10 +538,25 @@ 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: ElementSSRDataGetter<unknown>;
+
+export function getElementSSRData(el: Element): ElementSSRData {
+    if (typeof ssrDataGetter === 'function') {
+        return ssrDataGetter(el);
+    }
+}
+
+export function registerSSRDataGetter<T>(getter: ElementSSRDataGetter<T>) {
+    ssrDataGetter = getter;
+}
+
 /**
  * @type {string}
  */
-export const version = '5.5.0-dev.20240131';
+export const version = '5.5.1-dev.20240131';
 
 
 export interface ZRenderType extends ZRender {};

package/.travis.yml

@@ -1,12 +0,0 @@
-language: node_js
-
-node_js:
-  - "node"
-
-branches:
-  only:
-    - next
-
-script:
-  - npm i
-  - npm run build