Merge master to release

build/package.json

@@ -0,0 +1,3 @@
+{
+    "type": "commonjs"
+}

dist/package.json

@@ -0,0 +1,3 @@
+{
+    "type": "commonjs"
+}

package.json

@@ -36,7 +36,8 @@
   },
   "sideEffects": [
     "lib/canvas/canvas.js",
-    "lib/svg/svg.js"
+    "lib/svg/svg.js",
+    "lib/all.js"
   ],
   "devDependencies": {
     "@microsoft/api-extractor": "^7.7.2",
@@ -58,5 +59,17 @@
     "ts-jest": "^27.0.6",
     "typescript": "^4.4.3",
     "uglify-js": "^3.10.0"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "require": "./dist/zrender.js",
+      "import": "./index.js"
+    },
+    "./*.js": "./*.js",
+    "./*.ts": "./*.ts",
+    "./*.json": "./*.json",
+    "./*": "./*.js"
   }
-}
+}

src/.eslintrc.yaml

@@ -21,7 +21,7 @@ rules:
                 - "warn"
                 - "error"
     no-constant-condition: 0
-    comma-dangle: 2
+    comma-dangle: 0
     no-debugger: 2
     no-dupe-keys: 2
     no-empty-character-class: 2

src/Element.ts

@@ -1017,6 +1017,22 @@ class Element<Props extends ElementProps = ElementProps> {
         }
     }
 
+    /**
+     * Return if el.silent or any ancestor element has silent true.
+     */
+    isSilent() {
+        let isSilent = this.silent;
+        let ancestor = this.parent;
+        while (!isSilent && ancestor) {
+            if (ancestor.silent) {
+                isSilent = true;
+                break;
+            }
+            ancestor = ancestor.parent;
+        }
+        return isSilent;
+    }
+
     /**
      * Update animation targets when reference is changed.
      */

src/canvas/Layer.ts

@@ -89,8 +89,6 @@ export default class Layer extends Eventful {
 
     private _paintRects: BoundingRect[]
 
-    __painter: CanvasPainter
-
     __dirty = true
     __firstTimePaint = true
 
@@ -311,7 +309,7 @@ export default class Layer extends Eventful {
              * rect if and only if it's not painted this frame and was
              * previously painted on the canvas.
              */
-            const shouldPaint = el.shouldBePainted(viewWidth, viewHeight, true, true);
+            const shouldPaint = el && el.shouldBePainted(viewWidth, viewHeight, true, true);
             if (el && (!shouldPaint || !el.__zr) && el.__isRendered) {
                 // el was removed
                 const prevRect = el.getPrevPaintRect();
@@ -449,9 +447,8 @@ export default class Layer extends Eventful {
                     clearColorGradientOrPattern = createCanvasPattern(
                         ctx, clearColor, {
                             dirty() {
-                                // TODO
                                 self.setUnpainted();
-                                self.__painter.refresh();
+                                self.painter.refresh();
                             }
                         }
                     );

src/canvas/Painter.ts

@@ -597,7 +597,7 @@ export default class CanvasPainter implements PainterBase {
 
         layersMap[zlevel] = layer;
 
-        // Vitual layer will not directly show on the screen.
+        // Virtual layer will not directly show on the screen.
         // (It can be a WebGL layer and assigned to a ZRImage element)
         // But it still under management of zrender.
         if (!layer.virtual) {
@@ -623,7 +623,7 @@ export default class CanvasPainter implements PainterBase {
             }
         }
 
-        layer.__painter = this;
+        layer.painter || (layer.painter = this);
     }
 
     // Iterate each layer

src/core/env.ts

@@ -37,7 +37,10 @@ else if (typeof document === 'undefined' && typeof self !== 'undefined') {
     // In worker
     env.worker = true;
 }
-else if (typeof navigator === 'undefined') {
+else if (
+    typeof navigator === 'undefined' ||
+    navigator.userAgent.indexOf('Node.js') === 0
+) {
     // In node
     env.node = true;
     env.svgSupported = true;

src/core/matrix.ts

@@ -79,7 +79,12 @@ export function translate(out: MatrixArray, a: MatrixArray, v: VectorArray): Mat
 /**
  * 旋转变换
  */
-export function rotate(out: MatrixArray, a: MatrixArray, rad: number): MatrixArray {
+export function rotate(
+    out: MatrixArray,
+    a: MatrixArray,
+    rad: number,
+    pivot: VectorArray = [0, 0]
+): MatrixArray {
     const aa = a[0];
     const ac = a[2];
     const atx = a[4];
@@ -93,8 +98,8 @@ export function rotate(out: MatrixArray, a: MatrixArray, rad: number): MatrixArr
     out[1] = -aa * st + ab * ct;
     out[2] = ac * ct + ad * st;
     out[3] = -ac * st + ct * ad;
-    out[4] = ct * atx + st * aty;
-    out[5] = ct * aty - st * atx;
+    out[4] = ct * (atx - pivot[0]) + st * (aty - pivot[1]) + pivot[0];
+    out[5] = ct * (aty - pivot[1]) - st * (atx - pivot[0]) + pivot[1];
     return out;
 }
 

src/graphic/helper/parseText.ts

@@ -41,8 +41,8 @@ export function truncateText(
     text: string,
     containerWidth: number,
     font: string,
-    ellipsis: string,
-    options: InnerTruncateOption
+    ellipsis?: string,
+    options?: InnerTruncateOption
 ): string {
     if (!containerWidth) {
         return '';
@@ -63,8 +63,8 @@ export function truncateText(
 function prepareTruncateOptions(
     containerWidth: number,
     font: string,
-    ellipsis: string,
-    options: InnerTruncateOption
+    ellipsis?: string,
+    options?: InnerTruncateOption
 ): InnerPreparedTruncateOption {
     options = options || {};
     let preparedOpts = extend({}, options) as InnerPreparedTruncateOption;

src/svg/Painter.ts

@@ -124,10 +124,11 @@ class SVGPainter implements PainterBase {
     }
 
     renderToVNode(opts?: {
-        animation?: boolean
-        willUpdate?: boolean
+        animation?: boolean,
+        willUpdate?: boolean,
         compress?: boolean,
-        useViewBox?: boolean
+        useViewBox?: boolean,
+        emphasis?: boolean
     }) {
 
         opts = opts || {};
@@ -140,6 +141,7 @@ class SVGPainter implements PainterBase {
         scope.animation = opts.animation;
         scope.willUpdate = opts.willUpdate;
         scope.compress = opts.compress;
+        scope.emphasis = opts.emphasis;
 
         const children: SVGVNode[] = [];
 
@@ -173,7 +175,12 @@ class SVGPainter implements PainterBase {
          * If add css animation.
          * @default true
          */
-        cssAnimation?: boolean
+        cssAnimation?: boolean,
+        /**
+         * If add css emphasis.
+         * @default true
+         */
+        cssEmphasis?: boolean,
         /**
          * If use viewBox
          * @default true
@@ -183,6 +190,7 @@ class SVGPainter implements PainterBase {
         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)
@@ -374,8 +382,7 @@ function createBackgroundVNode(
                 width,
                 height,
                 x: '0',
-                y: '0',
-                id: '0'
+                y: '0'
             }
         );
         if (isGradient(backgroundColor)) {

src/svg/core.ts

@@ -8,6 +8,7 @@ export const SVGNS = 'http://www.w3.org/2000/svg';
 export const XLINKNS = 'http://www.w3.org/1999/xlink';
 export const XMLNS = 'http://www.w3.org/2000/xmlns/';
 export const XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
+export const META_DATA_PREFIX = 'ecmeta_';
 
 export function createElement(name: string) {
     return document.createElementNS(SVGNS, name);
@@ -128,8 +129,11 @@ export interface BrushScope {
 
     cssNodes: Record<string, CSSSelectorVNode>
     cssAnims: Record<string, Record<string, Record<string, string>>>
+    /**
+     * Cache for css style string, mapping from style string to class name.
+     */
+    cssStyleCache: Record<string, string>
 
-    cssClassIdx: number
     cssAnimIdx: number
 
     shadowIdx: number
@@ -141,6 +145,10 @@ export interface BrushScope {
      * If create animates nodes.
      */
     animation?: boolean,
+    /**
+     * If create emphasis styles.
+     */
+    emphasis?: boolean,
 
     /**
      * If will update. Some optimization for string generation can't be applied.
@@ -164,8 +172,8 @@ export function createBrushScope(zrId: string): BrushScope {
 
         cssNodes: {},
         cssAnims: {},
+        cssStyleCache: {},
 
-        cssClassIdx: 0,
         cssAnimIdx: 0,
 
         shadowIdx: 0,

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

src/svg/cssClassId.ts

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

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;
+}