zrender-nightly 5.4.4-dev.20231115 → 5.4.4-dev.20231116

package/dist/zrender.js

@@ -4053,6 +4053,26 @@
             Math.round(Math.random() * 255),
             Math.round(Math.random() * 255)
         ], 'rgb');
+    }
+    var liftedColorCache = new LRU(100);
+    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;
     }
 
     var color = /*#__PURE__*/Object.freeze({
@@ -4068,7 +4088,8 @@
         modifyAlpha: modifyAlpha,
         stringify: stringify,
         lum: lum,
-        random: random
+        random: random,
+        liftColor: liftColor
     });
 
     var mathRound = Math.round;
@@ -6180,6 +6201,18 @@
                 }
             }
         };
+        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];
@@ -7243,7 +7276,18 @@
     function registerPainter(name, Ctor) {
         painterCtors[name] = Ctor;
     }
-    var version = '5.4.4-dev.20231115';
+    var ssrDataGetter = function (el) {
+        return null;
+    };
+    function getElementSSRData(el) {
+        if (typeof ssrDataGetter === 'function') {
+            return ssrDataGetter(el);
+        }
+    }
+    function registerSSRDataGetter(getter) {
+        ssrDataGetter = getter;
+    }
+    var version = '5.4.4-dev.20231116';
 
     var STYLE_MAGIC_KEY = '__zr_style_' + Math.round((Math.random() * 10));
     var DEFAULT_COMMON_STYLE = {
@@ -15875,6 +15919,7 @@
     var XLINKNS = 'http://www.w3.org/1999/xlink';
     var XMLNS = 'http://www.w3.org/2000/xmlns/';
     var XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
+    var META_DATA_PREFIX = 'ecmeta_';
     function createElement(name) {
         return document.createElementNS(SVGNS, name);
     }
@@ -15955,7 +16000,7 @@
             defs: {},
             cssNodes: {},
             cssAnims: {},
-            cssClassIdx: 0,
+            cssStyleCache: {},
             cssAnimIdx: 0,
             shadowIdx: 0,
             gradientIdx: 0,
@@ -15975,6 +16020,11 @@
         }, children);
     }
 
+    var cssClassIdx = 0;
+    function getClassId() {
+        return cssClassIdx++;
+    }
+
     var EASING_MAP = {
         cubicIn: '0.32,0,0.67,0',
         cubicOut: '0.33,1,0.68,1',
@@ -16233,7 +16283,7 @@
             }
         }
         if (cssAnimations.length) {
-            var className = scope.zrId + '-cls-' + scope.cssClassIdx++;
+            var className = scope.zrId + '-cls-' + getClassId();
             scope.cssNodes['.' + className] = {
                 animation: cssAnimations.join(',')
             };
@@ -16241,6 +16291,65 @@
         }
     }
 
+    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;
+    }
+
     var round$1 = Math.round;
     function isImageLike$1(val) {
         return val && isString(val.src);
@@ -16257,12 +16366,27 @@
             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) {
+                attrs[(META_DATA_PREFIX + key).toLowerCase()]
+                    = val + '';
+            });
+            if (el.isSilent()) {
+                attrs[META_DATA_PREFIX + 'silent'] = 'true';
+            }
+        }
+    }
     function noRotateScale(m) {
         return isAroundZero$1(m[0] - 1)
             && isAroundZero$1(m[1])
@@ -16367,7 +16491,9 @@
         }
         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);
     }
     function brushSVGImage(el, scope) {
@@ -16401,6 +16527,7 @@
         }
         setTransform(attrs, el.transform);
         setStyleAttrs(attrs, style, el, scope);
+        setMetaData(attrs, el);
         scope.animation && createCSSAnimation(el, attrs, scope);
         return createVNode('image', el.id + '', attrs);
     }
@@ -16452,6 +16579,7 @@
         }
         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);
     }
@@ -17022,6 +17150,7 @@
             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);
@@ -17046,6 +17175,7 @@
             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)
@@ -17259,6 +17389,7 @@
     exports.color = color;
     exports.dispose = dispose;
     exports.disposeAll = disposeAll;
+    exports.getElementSSRData = getElementSSRData;
     exports.getInstance = getInstance;
     exports.init = init;
     exports.matrix = matrix;
@@ -17266,6 +17397,7 @@
     exports.parseSVG = parseSVG;
     exports.path = path;
     exports.registerPainter = registerPainter;
+    exports.registerSSRDataGetter = registerSSRDataGetter;
     exports.setPlatformAPI = setPlatformAPI;
     exports.showDebugDirtyRect = showDebugDirtyRect;
     exports.util = util;