chore: merge 'master' branch into 'v6'

README.md

@@ -3,7 +3,7 @@ ZRender
 
 A lightweight graphic library which provides 2d draw for [Apache ECharts](https://github.com/apache/echarts).
 
-[![](https://img.shields.io/github/actions/workflow/status/ecomfe/zrender/ci.yml)]() [![](https://img.shields.io/npm/dw/zrender.svg?label=npm%20downloads&style=flat)](https://www.npmjs.com/package/zrender) ![Commits Since 4.0.0](https://img.shields.io/github/commits-since/ecomfe/zrender/4.0.0.svg?colorB=%234c1&style=flat)
+[![](https://img.shields.io/github/actions/workflow/status/ecomfe/zrender/ci.yml)](https://github.com/ecomfe/zrender/actions) [![](https://img.shields.io/npm/dw/zrender.svg?label=npm%20downloads&style=flat)](https://www.npmjs.com/package/zrender) ![Commits Since 4.0.0](https://img.shields.io/github/commits-since/ecomfe/zrender/4.0.0.svg?colorB=%234c1&style=flat)
 
 ## Documentation
 

src/canvas/graphic.ts

@@ -152,7 +152,7 @@ function brushPath(ctx: CanvasRenderingContext2D, el: Path, style: PathStyleProp
             strokePattern = (dirtyFlag || !el.__canvasStrokePattern)
                 ? createCanvasPattern(ctx, stroke as ImagePatternObject, el)
                 : el.__canvasStrokePattern;
-            el.__canvasStrokePattern = fillPattern;
+            el.__canvasStrokePattern = strokePattern;
         }
         // Use the gradient or pattern
         if (hasFillGradient) {

src/core/dom.ts

@@ -2,6 +2,7 @@
 import env from './env';
 import {buildTransformer} from './fourPointsTransform';
 import {Dictionary} from './types';
+import { each } from './util';
 
 const EVENT_SAVED_PROP = '___zrEVENTSAVED';
 const _calcOut: number[] = [];
@@ -11,6 +12,7 @@ type SavedInfo = {
     trans?: ReturnType<typeof buildTransformer>
     invTrans?: ReturnType<typeof buildTransformer>
     srcCoords?: number[]
+    clearMarkers?: () => void
 }
 
 /**
@@ -57,6 +59,22 @@ export function transformLocalCoord(
         && transformCoordWithViewport(out, elTarget, _calcOut[0], _calcOut[1]);
 }
 
+export function transformLocalCoordClear(
+    elFrom: HTMLElement,
+    elTarget: HTMLElement,
+) {
+    elFrom && dealClear(elFrom);
+    elTarget && dealClear(elTarget);
+
+    function dealClear(el: HTMLElement) {
+        const saved: SavedInfo = (el as any)[EVENT_SAVED_PROP];
+        if (saved) {
+            saved.clearMarkers && saved.clearMarkers();
+            delete (el as any)[EVENT_SAVED_PROP];
+        }
+    }
+}
+
 /**
  * Transform between a "viewport coord" and a "local coord".
  * "viewport coord": the coord based on the left-top corner of the viewport
@@ -134,6 +152,12 @@ function prepareCoordMarkers(el: HTMLElement, saved: SavedInfo) {
         markers.push(marker);
     }
 
+    saved.clearMarkers = function () {
+        each(markers, function (marker) {
+            marker.parentNode && marker.parentNode.removeChild(marker);
+        });
+    };
+
     return markers;
 }
 

src/core/env.ts

@@ -37,7 +37,12 @@ else if (typeof document === 'undefined' && typeof self !== 'undefined') {
     // In worker
     env.worker = true;
 }
-else if (!env.hasGlobalWindow || 'Deno' in window) {
+else if (
+    !env.hasGlobalWindow
+    || 'Deno' in window
+    || (typeof navigator !== 'undefined' && typeof navigator.userAgent === 'string'
+        && navigator.userAgent.indexOf('Node.js') > -1)
+) {
     // In node
     env.node = true;
     env.svgSupported = true;
@@ -85,29 +90,31 @@ function detect(ua: string, env: Env) {
     env.touchEventsSupported = 'ontouchstart' in window && !browser.ie && !browser.edge;
     env.pointerEventsSupported = 'onpointerdown' in window
         && (browser.edge || (browser.ie && +browser.version >= 11));
-    env.domSupported = typeof document !== 'undefined';
-
-    const style = document.documentElement.style;
-
-    env.transform3dSupported = (
-        // IE9 only supports transform 2D
-        // transform 3D supported since IE10
-        // we detect it by whether 'transition' is in style
-        (browser.ie && 'transition' in style)
-        // edge
-        || browser.edge
-        // webkit
-        || (('WebKitCSSMatrix' in window) && ('m11' in new WebKitCSSMatrix()))
-        // gecko-based browsers
-        || 'MozPerspective' in style
-    ) // Opera supports CSS transforms after version 12
-      && !('OTransition' in style);
-
-    // except IE 6-8 and very old firefox 2-3 & opera 10.1
-    // other browsers all support `transform`
-    env.transformSupported = env.transform3dSupported
-        // transform 2D is supported in IE9
-        || (browser.ie && +browser.version >= 9);
+
+    const domSupported = env.domSupported = typeof document !== 'undefined';
+    if (domSupported) {
+        const style = document.documentElement.style;
+
+        env.transform3dSupported = (
+            // IE9 only supports transform 2D
+            // transform 3D supported since IE10
+            // we detect it by whether 'transition' is in style
+            (browser.ie && 'transition' in style)
+            // edge
+            || browser.edge
+            // webkit
+            || (('WebKitCSSMatrix' in window) && ('m11' in new WebKitCSSMatrix()))
+            // gecko-based browsers
+            || 'MozPerspective' in style
+        ) // Opera supports CSS transforms after version 12
+          && !('OTransition' in style);
+
+        // except IE 6-8 and very old firefox 2-3 & opera 10.1
+        // other browsers all support `transform`
+        env.transformSupported = env.transform3dSupported
+            // transform 2D is supported in IE9
+            || (browser.ie && +browser.version >= 9);
+    }
 
 }
 

src/tool/color.ts

@@ -93,15 +93,15 @@ function clampCssFloat(f: number): number {  // Clamp to float 0.0 .. 1.0.
     return f < 0 ? 0 : f > 1 ? 1 : f;
 }
 
-function parseCssInt(val: string | number): number {  // int or percentage.
+export function parseCssInt(val: string | number): number {  // int or percentage.
     let str = val as string;
     if (str.length && str.charAt(str.length - 1) === '%') {
         return clampCssByte(parseFloat(str) / 100 * 255);
     }
     return clampCssByte(parseInt(str, 10));
 }
 
-function parseCssFloat(val: string | number): number {  // float or percentage.
+export function parseCssFloat(val: string | number): number {  // float or percentage.
     let str = val as string;
     if (str.length && str.charAt(str.length - 1) === '%') {
         return clampCssFloat(parseFloat(str) / 100);

src/tool/parseSVG.ts

@@ -19,6 +19,7 @@ import RadialGradient, { RadialGradientObject } from '../graphic/RadialGradient'
 import Gradient, { GradientObject } from '../graphic/Gradient';
 import TSpan, { TSpanStyleProps } from '../graphic/TSpan';
 import { parseXML } from './parseXML';
+import * as colorTool from './color';
 
 
 interface SVGParserOption {
@@ -627,9 +628,19 @@ function parseGradientColorStops(xmlNode: SVGElement, gradient: GradientObject):
             // <stop stop-color="red"/>
             const styleVals = {} as Dictionary<string>;
             parseInlineStyle(stop, styleVals, styleVals);
-            const stopColor = styleVals.stopColor
+            let stopColor = styleVals.stopColor
                 || stop.getAttribute('stop-color')
                 || '#000000';
+            const stopOpacity = styleVals.stopOpacity
+                || stop.getAttribute('stop-opacity');
+            if (stopOpacity) {
+                const rgba = colorTool.parse(stopColor);
+                const stopColorOpacity = rgba && rgba[3];
+                if (stopColorOpacity) {
+                    rgba[3] *= colorTool.parseCssFloat(stopOpacity);
+                    stopColor = colorTool.stringify(rgba, 'rgba');
+                }
+            }
 
             gradient.colorStops.push({
                 offset: offset,

test/parser-svg-stop-opacity.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Parse SVG stop-opacity</title>
+    <script src="../dist/zrender.js"></script>
+</head>
+<body>
+    <style>
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+        }
+        #main {
+            padding: 16px;
+        }
+        #chart-container,
+        #original-svg svg {
+            width: 100px;
+            height: 20px;
+            margin-bottom: 10px;
+        }
+    </style>
+    <div id="main">
+        ZRender.parseSVG:
+        <div id="chart-container"></div>
+        Original SVG:
+        <div id="original-svg"></div>
+    </div>
+    <script type="text/javascript">
+        var zr = zrender.init(document.getElementById('chart-container'), {
+            renderer: 'svg'
+        });
+        var svg = `
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20">
+                <defs>
+                    <linearGradient id="gr" gradientUnits="userSpaceOnUse" x2="100">
+                        <stop offset="0" stop-color="rgba(0,0,255,.5)" stop-opacity="0.5" />
+                        <stop offset="1" stop-color="rgba(255,0,0,.5)" stop-opacity="0" />
+                    </linearGradient>
+                </defs>
+                <rect width="100" height="20" style="fill:url(#gr)"/>
+            </svg>
+        `;
+        var result = zrender.parseSVG(svg);
+        zr.add(result.root);
+        document.getElementById('original-svg').innerHTML = svg;
+    </script>
+</body>
+</html>