Merge pull request #768 from ecomfe/master

Prepare to release 5.1.1

Author: 100pah

.github/workflows/nightly.yaml

@@ -0,0 +1,31 @@
+name: Publish Nightly
+
+on:
+  schedule:
+    - cron: '0 8 * * *'
+  workflow_dispatch: {}
+  repository_dispatch:
+    types: publish-nightly
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          registry-url: https://registry.npmjs.org/
+      - name: Setup and publish nightly
+        run: |
+          npm ci
+          npm run release
+          npm run prepare:nightly
+          npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

build/build.js

@@ -5,7 +5,7 @@ const path = require('path');
 const processs = require('process');
 const chalk = require('chalk');
 const progress = require('./progress');
-const UglifyJS = require("uglify-js");
+const UglifyJS = require('uglify-js');
 const fs = require('fs');
 
 function current() {

build/prepareNightly.js

@@ -0,0 +1,27 @@
+const fs = require('fs');
+const packageJsonPath = __dirname + '/../package.json';
+const nightlyPackageName = 'zrender-nightly';
+
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+const version = packageJson.version;
+const parts = /(\d+)\.(\d+)\.(\d+)($|\-)/.exec(version);
+if (!parts) {
+    throw new Error(`Invalid version number ${version}`);
+}
+// Add date to version.
+const major = +parts[1];
+const minor = +parts[2];
+let patch = +parts[3];
+const isStable = !parts[4];
+if (isStable) {
+    // It's previous stable version. Dev version should be higher.
+    patch++;
+}
+
+const date = new Date().toISOString().replace(/:|T|\.|-/g, '').slice(0, 8);
+const nightlyVersion = `${major}.${minor}.${patch}-dev.${date}`;
+
+packageJson.name = nightlyPackageName;
+packageJson.version = nightlyVersion;
+
+fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2), 'utf-8');

package.json

@@ -14,6 +14,7 @@
     "prepublish": "npm run release",
     "build": "npm run build:bundle && npm run build:lib",
     "release": "node build/build.js --minify && npm run build:lib",
+    "prepare:nightly": "node build/prepareNightly.js",
     "build:bundle": "node build/build.js",
     "build:lib": "npx tsc -m ES2015 --outDir lib",
     "watch:bundle": "node build/build.js --watch",

src/Element.ts

@@ -28,6 +28,7 @@ import Point from './core/Point';
 import { LIGHT_LABEL_COLOR, DARK_LABEL_COLOR } from './config';
 import { parse, stringify } from './tool/color';
 import env from './core/env';
+import { REDARAW_BIT, STYLE_CHANGED_BIT } from './graphic/constants';
 
 export interface ElementAnimateConfig {
     duration?: number
@@ -658,13 +659,14 @@ class Element<Props extends ElementProps = ElementProps> {
                 textEl.setDefaultTextStyle(innerTextDefaultStyle);
             }
 
+            // Mark textEl to update transform.
+            // DON'T use markRedraw. It will cause Element itself to dirty again.
+            textEl.__dirty |= REDARAW_BIT;
+
             if (textStyleChanged) {
                 // Only mark style dirty if necessary. Update ZRText is costly.
-                textEl.dirtyStyle();
+                textEl.dirtyStyle(true);
             }
-
-            // Mark textEl to update transform.
-            textEl.markRedraw();
         }
     }
 
@@ -850,7 +852,7 @@ class Element<Props extends ElementProps = ElementProps> {
      * @param keepCurrentState If keep current states.
      *      If not, it will inherit from the normal state.
      */
-    useState(stateName: string, keepCurrentStates?: boolean, noAnimation?: boolean) {
+    useState(stateName: string, keepCurrentStates?: boolean, noAnimation?: boolean, forceUseHoverLayer?: boolean) {
         // Use preserved word __normal__
         // TODO: Only restore changed properties when restore to normal???
         const toNormalState = stateName === PRESERVED_NORMAL_STATE;
@@ -889,7 +891,7 @@ class Element<Props extends ElementProps = ElementProps> {
             this.saveCurrentToNormalState(state);
         }
 
-        const useHoverLayer = !!(state && state.hoverLayer);
+        const useHoverLayer = !!((state && state.hoverLayer) || forceUseHoverLayer);
 
         if (useHoverLayer) {
             // Enter hover layer before states update.
@@ -906,11 +908,14 @@ class Element<Props extends ElementProps = ElementProps> {
         );
 
         // Also set text content.
-        if (this._textContent) {
-            this._textContent.useState(stateName, keepCurrentStates);
+        const textContent = this._textContent;
+        const textGuide = this._textGuide;
+        if (textContent) {
+            // Force textContent use hover layer if self is using it.
+            textContent.useState(stateName, keepCurrentStates, noAnimation, useHoverLayer);
         }
-        if (this._textGuide) {
-            this._textGuide.useState(stateName, keepCurrentStates);
+        if (textGuide) {
+            textGuide.useState(stateName, keepCurrentStates, noAnimation, useHoverLayer);
         }
 
         if (toNormalState) {
@@ -938,7 +943,7 @@ class Element<Props extends ElementProps = ElementProps> {
             this._toggleHoverLayerFlag(false);
             // NOTE: avoid unexpected refresh when moving out from hover layer!!
             // Only clear from hover layer.
-            this.__dirty &= ~Element.REDARAW_BIT;
+            this.__dirty &= ~REDARAW_BIT;
         }
 
         // Return used state.
@@ -949,7 +954,7 @@ class Element<Props extends ElementProps = ElementProps> {
      * Apply multiple states.
      * @param states States list.
      */
-    useStates(states: string[], noAnimation?: boolean) {
+    useStates(states: string[], noAnimation?: boolean, forceUseHoverLayer?: boolean) {
         if (!states.length) {
             this.clearStates();
         }
@@ -984,7 +989,8 @@ class Element<Props extends ElementProps = ElementProps> {
                 }
             }
 
-            const useHoverLayer = !!(stateObjects[len - 1] && stateObjects[len - 1].hoverLayer);
+            const lastStateObj = stateObjects[len - 1];
+            const useHoverLayer = !!((lastStateObj && lastStateObj.hoverLayer) || forceUseHoverLayer);
             if (useHoverLayer) {
                 // Enter hover layer before states update.
                 this._toggleHoverLayerFlag(true);
@@ -1004,11 +1010,13 @@ class Element<Props extends ElementProps = ElementProps> {
                 animationCfg
             );
 
-            if (this._textContent) {
-                this._textContent.useStates(states);
+            const textContent = this._textContent;
+            const textGuide = this._textGuide;
+            if (textContent) {
+                textContent.useStates(states, noAnimation, useHoverLayer);
             }
-            if (this._textGuide) {
-                this._textGuide.useStates(states);
+            if (textGuide) {
+                textGuide.useStates(states, noAnimation, useHoverLayer);
             }
 
             this._updateAnimationTargets();
@@ -1022,7 +1030,7 @@ class Element<Props extends ElementProps = ElementProps> {
                 this._toggleHoverLayerFlag(false);
                 // NOTE: avoid unexpected refresh when moving out from hover layer!!
                 // Only clear from hover layer.
-                this.__dirty &= ~Element.REDARAW_BIT;
+                this.__dirty &= ~REDARAW_BIT;
             }
         }
     }
@@ -1352,7 +1360,7 @@ class Element<Props extends ElementProps = ElementProps> {
      * Mark element needs to be repainted
      */
     markRedraw() {
-        this.__dirty |= Element.REDARAW_BIT;
+        this.__dirty |= REDARAW_BIT;
         const zr = this.__zr;
         if (zr) {
             if (this.__inHover) {
@@ -1604,9 +1612,6 @@ class Element<Props extends ElementProps = ElementProps> {
         out: TextPositionCalculationResult, style: ElementTextConfig, rect: RectLike
     ) => TextPositionCalculationResult
 
-
-    static REDARAW_BIT = 1;
-
     protected static initDefaultProps = (function () {
         const elProto = Element.prototype;
         elProto.type = 'element';
@@ -1618,7 +1623,7 @@ class Element<Props extends ElementProps = ElementProps> {
         elProto.dragging = false;
         elProto.ignoreClip = false;
         elProto.__inHover = false;
-        elProto.__dirty = Element.REDARAW_BIT;
+        elProto.__dirty = REDARAW_BIT;
 
 
         const logs: Dictionary<boolean> = {};

src/Storage.ts

@@ -8,6 +8,7 @@ import Element from './Element';
 import timsort from './core/timsort';
 import Displayable from './graphic/Displayable';
 import Path from './graphic/Path';
+import { REDARAW_BIT } from './graphic/constants';
 
 let invalidZErrorLogged = false;
 function logInvalidZError() {
@@ -140,7 +141,7 @@ export default class Storage {
 
                 // Force to mark as dirty if group is dirty
                 if (el.__dirty) {
-                    child.__dirty |= Element.REDARAW_BIT;
+                    child.__dirty |= REDARAW_BIT;
                 }
 
                 this._updateAndAddDisplayable(child, clipPaths, includeIgnore);

src/canvas/Layer.ts

@@ -1,15 +1,16 @@
 import * as util from '../core/util';
 import {devicePixelRatio} from '../config';
-import { PatternObject } from '../graphic/Pattern';
+import { ImagePatternObject } from '../graphic/Pattern';
 import CanvasPainter from './Painter';
 import { GradientObject, InnerGradientObject } from '../graphic/Gradient';
 import { ZRCanvasRenderingContext } from '../core/types';
 import Eventful from '../core/Eventful';
-import Element, { ElementEventCallback } from '../Element';
+import { ElementEventCallback } from '../Element';
 import { getCanvasGradient } from './helper';
 import { createCanvasPattern } from './graphic';
 import Displayable from '../graphic/Displayable';
 import BoundingRect from '../core/BoundingRect';
+import { REDARAW_BIT } from '../graphic/constants';
 
 function returnFalse() {
     return false;
@@ -39,7 +40,7 @@ function createDom(id: string, painter: CanvasPainter, dpr: number) {
 
 export interface LayerConfig {
     // 每次清空画布的颜色
-    clearColor?: string | GradientObject | PatternObject
+    clearColor?: string | GradientObject | ImagePatternObject
     // 是否开启动态模糊
     motionBlur?: boolean
     // 在开启动态模糊的时候使用，与上一帧混合的alpha值，值越大尾迹越明显
@@ -62,7 +63,7 @@ export default class Layer extends Eventful {
     /**
      * 每次清空画布的颜色
      */
-    clearColor: string | GradientObject | PatternObject
+    clearColor: string | GradientObject | ImagePatternObject
     /**
      * 是否开启动态模糊
      */
@@ -280,7 +281,7 @@ export default class Layer extends Eventful {
                  * or not painted this frame.
                  */
                 const shouldPaint = el.shouldBePainted(viewWidth, viewHeight, true, true);
-                const prevRect = el.__isRendered && ((el.__dirty & Element.REDARAW_BIT) || !shouldPaint)
+                const prevRect = el.__isRendered && ((el.__dirty & REDARAW_BIT) || !shouldPaint)
                     ? el.getPrevPaintRect()
                     : null;
                 if (prevRect) {
@@ -292,7 +293,7 @@ export default class Layer extends Eventful {
                  * if the element should be brushed this frame and either being
                  * dirty or not rendered before.
                  */
-                const curRect = shouldPaint && ((el.__dirty & Element.REDARAW_BIT) || !el.__isRendered)
+                const curRect = shouldPaint && ((el.__dirty & REDARAW_BIT) || !el.__isRendered)
                     ? el.getPaintRect()
                     : null;
                 if (curRect) {
@@ -352,7 +353,7 @@ export default class Layer extends Eventful {
                 }
                 i++;
             }
-        } while (hasIntersections)
+        } while (hasIntersections);
 
         this._paintRects = mergedRepaintRects;
 
@@ -396,7 +397,7 @@ export default class Layer extends Eventful {
      */
     clear(
         clearAll?: boolean,
-        clearColor?: string | GradientObject | PatternObject,
+        clearColor?: string | GradientObject | ImagePatternObject,
         repaintRects?: BoundingRect[]
     ) {
         const dom = this.dom;
@@ -444,7 +445,7 @@ export default class Layer extends Eventful {
                     (clearColor as InnerGradientObject).__canvasGradient = clearColorGradientOrPattern;
                 }
                 // Pattern
-                else if (util.isPatternObject(clearColor)) {
+                else if (util.isImagePatternObject(clearColor)) {
                     clearColorGradientOrPattern = createCanvasPattern(
                         ctx, clearColor, {
                             dirty() {
@@ -487,7 +488,7 @@ export default class Layer extends Eventful {
     }
 
     // Iterface of refresh
-    refresh: (clearColor?: string | GradientObject | PatternObject) => void
+    refresh: (clearColor?: string | GradientObject | ImagePatternObject) => void
 
     // Interface of renderToCanvas in getRenderedCanvas
     renderToCanvas: (ctx: CanvasRenderingContext2D) => void