feat(ssr): improve code

ecomfe · May 31, 2023 · d7005b8 · d7005b8
1 parent 26abab1
commit d7005b8
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 55 deletions.
diff --git 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
@@ -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
@@ -0,0 +1,5 @@
+let cssClassIdx = 0;
+
+export function getClassId() {
+    return cssClassIdx++;
+}
diff --git a/src/svg/cssEmphasis.ts b/src/svg/cssEmphasis.ts
@@ -1,79 +1,56 @@
-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,
     attrs: SVGVNodeAttrs,
     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;
             if (fromFill) {
                 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;
         }
         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
@@ -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
@@ -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;
+}
diff --git 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>