feat: new setPlatformAPI method

package.json

@@ -37,19 +37,19 @@
   "devDependencies": {
     "@microsoft/api-extractor": "^7.7.2",
     "@rollup/plugin-replace": "^3.0.0",
-    "@types/jest": "^25.1.2",
+    "@types/jest": "^27.0.2",
     "@typescript-eslint/eslint-plugin": "^4.9.1",
     "@typescript-eslint/parser": "^4.9.1",
     "chalk": "^3.0.0",
     "commander": "2.11.0",
     "eslint": "6.3.0",
     "fs-extra": "4.0.2",
-    "jest": "^25.1.0",
+    "jest": "^27.2.5",
     "jsdom": "^16.0.0",
     "rollup": "^1.28.0",
     "rollup-plugin-typescript2": "^0.25.3",
     "rollup-plugin-uglify": "^6.0.4",
-    "ts-jest": "^25.2.0",
+    "ts-jest": "^27.0.6",
     "typescript": "^4.4.3",
     "uglify-js": "^3.10.0"
   }

src/canvas/Layer.ts

@@ -11,9 +11,10 @@ import { createCanvasPattern } from './graphic';
 import Displayable from '../graphic/Displayable';
 import BoundingRect from '../core/BoundingRect';
 import { REDRAW_BIT } from '../graphic/constants';
+import { platformApi } from '../core/platform';
 
 function createDom(id: string, painter: CanvasPainter, dpr: number) {
-    const newDom = util.createCanvas();
+    const newDom = platformApi.createCanvas();
     const width = painter.getWidth();
     const height = painter.getHeight();
 

src/canvas/Painter.ts

@@ -12,10 +12,10 @@ import Storage from '../Storage';
 import { brush, BrushScope, brushSingle } from './graphic';
 import { PainterBase } from '../PainterBase';
 import BoundingRect from '../core/BoundingRect';
-import IncrementalDisplayable from '../graphic/IncrementalDisplayable';
 import Path from '../graphic/Path';
 import { REDRAW_BIT } from '../graphic/constants';
 import { getSize } from './helper';
+import type IncrementalDisplayable from '../graphic/IncrementalDisplayable';
 
 const HOVER_LAYER_ZLEVEL = 1e5;
 const CANVAS_ZLEVEL = 314159;
@@ -396,7 +396,7 @@ export default class CanvasPainter implements PainterBase {
             const clearColor = layer.zlevel === this._zlevelList[0]
                 ? this._backgroundColor : null;
 
-            // All elements in this layer are cleared.
+            // All elements in this layer are removed.
             if (layer.__startIndex === layer.__endIndex) {
                 layer.clear(false, clearColor, repaintRects);
             }

src/canvas/graphic.ts

@@ -10,12 +10,12 @@ import { getCanvasGradient, isClipPathChanged } from './helper';
 import Path, { PathStyleProps } from '../graphic/Path';
 import ZRImage, { ImageStyleProps } from '../graphic/Image';
 import TSpan, {TSpanStyleProps} from '../graphic/TSpan';
-import { DEFAULT_FONT } from '../contain/text';
 import { MatrixArray } from '../core/matrix';
 import { map, RADIAN_TO_DEGREE } from '../core/util';
 import { normalizeLineDash } from '../graphic/helper/dashStyle';
-import IncrementalDisplayable from '../graphic/IncrementalDisplayable';
 import { REDRAW_BIT, SHAPE_CHANGED_BIT } from '../graphic/constants';
+import type IncrementalDisplayable from '../graphic/IncrementalDisplayable';
+import { DEFAULT_FONT } from '../core/platform';
 
 const pathProxyForDraw = new PathProxy(true);
 
@@ -765,13 +765,14 @@ export function brush(
             bindImageStyle(ctx, el as ZRImage, prevEl as ZRImage, forceSetStyle, scope);
             brushImage(ctx, el as ZRImage, style);
         }
-        else if (el instanceof IncrementalDisplayable) {
+        // Assume it's a IncrementalDisplayable
+        else if ((el as IncrementalDisplayable).getTemporalDisplayables) {
             if (scope.lastDrawType !== DRAW_TYPE_INCREMENTAL) {
                 forceSetStyle = true;
                 scope.lastDrawType = DRAW_TYPE_INCREMENTAL;
             }
 
-            brushIncremental(ctx, el, scope);
+            brushIncremental(ctx, el as IncrementalDisplayable, scope);
         }
 
     }

src/contain/text.ts

@@ -1,64 +1,10 @@
 import BoundingRect, { RectLike } from '../core/BoundingRect';
-import { createCanvas, retrieve2 } from '../core/util';
-import { Dictionary, PropType, TextAlign, TextVerticalAlign, BuiltinTextPosition } from '../core/types';
+import { Dictionary, TextAlign, TextVerticalAlign, BuiltinTextPosition } from '../core/types';
 import LRU from '../core/LRU';
-import { DEFAULT_TEXT_WIDTH_MAP } from './textWidthMap';
+import { DEFAULT_FONT, platformApi } from '../core/platform';
 
 let textWidthCache: Dictionary<LRU<number>> = {};
 
-export const DEFAULT_FONT_SIZE = 12;
-export const DEFAULT_FONT_FAMILY = 'sans-serif';
-export const DEFAULT_FONT = `${DEFAULT_FONT_SIZE}px ${DEFAULT_FONT_FAMILY}`;
-
-let _ctx: CanvasRenderingContext2D;
-let _cachedFont: string;
-
-function defaultMeasureText(text: string, font?: string): { width: number } {
-    if (!_ctx) {
-        const canvas = createCanvas();
-        _ctx = canvas && canvas.getContext('2d');
-    }
-    if (_ctx) {
-        if (_cachedFont !== font) {
-            _cachedFont = _ctx.font = font || DEFAULT_FONT;
-        }
-        return _ctx.measureText(text);
-    }
-    else {
-        text = text || '';
-        font = font || DEFAULT_FONT;
-        // Use font size if there is no other method can be used.
-        const res = /^([0-9]*?)px$/.exec(font);
-        const fontSize = +(res && res[1]) || DEFAULT_FONT_SIZE;
-        let width = 0;
-        if (font.indexOf('mono') >= 0) {   // is monospace
-            width = fontSize * text.length;
-        }
-        else {
-            for (let i = 0; i < text.length; i++) {
-                width += retrieve2(DEFAULT_TEXT_WIDTH_MAP[text[i]], 1) * fontSize;
-            }
-        }
-        return { width };
-    }
-}
-
-let methods: {
-    measureText: (text: string, font?: string) => { width: number }
-} = {
-    measureText: defaultMeasureText
-};
-
-export function $override(
-    name: keyof typeof methods,
-    fn: PropType<typeof methods, keyof typeof methods>
-) {
-    methods[name] = fn;
-}
-
-// let cacheMissCount = 0;
-// let totalCount = 0;
-
 export function getWidth(text: string, font: string): number {
     font = font || DEFAULT_FONT;
     let cacheOfFont = textWidthCache[font];
@@ -67,7 +13,7 @@ export function getWidth(text: string, font: string): number {
     }
     let width = cacheOfFont.get(text);
     if (width == null) {
-        width = methods.measureText(text, font).width;
+        width = platformApi.measureText(text, font).width;
         cacheOfFont.put(text, width);
     }
 
@@ -152,7 +98,7 @@ export function getLineHeight(font?: string): number {
 export function measureText(text: string, font?: string): {
     width: number
 } {
-    return methods.measureText(text, font);
+    return platformApi.measureText(text, font);
 }
 
 

src/core/platform.ts

@@ -0,0 +1,111 @@
+export const DEFAULT_FONT_SIZE = 12;
+export const DEFAULT_FONT_FAMILY = 'sans-serif';
+export const DEFAULT_FONT = `${DEFAULT_FONT_SIZE}px ${DEFAULT_FONT_FAMILY}`;
+
+interface Platform {
+    // TODO CanvasLike?
+    createCanvas(): HTMLCanvasElement
+    measureText(text: string, font?: string): { width: number }
+    loadImage(
+        src: string,
+        onload: () => void | HTMLImageElement['onload'],
+        onerror: () => void | HTMLImageElement['onerror']
+    ): HTMLImageElement
+}
+
+// Text width map used for environment there is no canvas
+// Only common ascii is used for size concern.
+
+// Generated from following code
+//
+// ctx.font = '12px sans-serif';
+// const asciiRange = [32, 126];
+// let mapStr = '';
+// for (let i = asciiRange[0]; i <= asciiRange[1]; i++) {
+//     const char = String.fromCharCode(i);
+//     const width = ctx.measureText(char).width;
+//     const ratio = Math.round(width / 12 * 100);
+//     mapStr += String.fromCharCode(ratio + 20))
+// }
+// mapStr.replace(/\\/g, '\\\\');
+const OFFSET = 20;
+const SCALE = 100;
+// TODO other basic fonts?
+// eslint-disable-next-line
+const defaultWidthMapStr = `007LLmW'55;N0500LLLLLLLLLL00NNNLzWW\\\\WQb\\0FWLg\\bWb\\WQ\\WrWWQ000CL5LLFLL0LL**F*gLLLL5F0LF\\FFF5.5N`;
+
+function getTextWidthMap(mapStr: string): Record<string, number> {
+    const map: Record<string, number> = {};
+    if (typeof JSON === 'undefined') {
+        return map;
+    }
+    for (let i = 0; i < mapStr.length; i++) {
+        const char = String.fromCharCode(i + 32);
+        const size = (mapStr.charCodeAt(i) - OFFSET) / SCALE;
+        map[char] = size;
+    }
+    return map;
+}
+
+export const DEFAULT_TEXT_WIDTH_MAP = getTextWidthMap(defaultWidthMapStr);
+
+export const platformApi: Platform = {
+    // Export methods
+    createCanvas() {
+        return typeof document !== 'undefined'
+            && document.createElement('canvas');
+    },
+
+    measureText: (function () {
+
+        let _ctx: CanvasRenderingContext2D;
+        let _cachedFont: string;
+        return (text: string, font?: string) => {
+            if (!_ctx) {
+                const canvas = platformApi.createCanvas();
+                _ctx = canvas && canvas.getContext('2d');
+            }
+            if (_ctx) {
+                if (_cachedFont !== font) {
+                    _cachedFont = _ctx.font = font || DEFAULT_FONT;
+                }
+                return _ctx.measureText(text);
+            }
+            else {
+                text = text || '';
+                font = font || DEFAULT_FONT;
+                // Use font size if there is no other method can be used.
+                const res = /^([0-9]*?)px$/.exec(font);
+                const fontSize = +(res && res[1]) || DEFAULT_FONT_SIZE;
+                let width = 0;
+                if (font.indexOf('mono') >= 0) {   // is monospace
+                    width = fontSize * text.length;
+                }
+                else {
+                    for (let i = 0; i < text.length; i++) {
+                        const preCalcWidth = DEFAULT_TEXT_WIDTH_MAP[text[i]];
+                        width += preCalcWidth == null ? fontSize : (preCalcWidth * fontSize);
+                    }
+                }
+                return { width };
+            }
+        };
+    })(),
+
+    loadImage(src, onload, onerror) {
+        const image = new Image();
+        image.onload = onload;
+        image.onerror = onerror;
+        image.src = src;
+        return image;
+    }
+};
+
+export function setPlatformAPI(newPlatformApis: Partial<Platform>) {
+    for (let key in platformApi) {
+        // Don't assign unkown methods.
+        if ((newPlatformApis as any)[key]) {
+            (platformApi as any)[key] = (newPlatformApis as any)[key];
+        }
+    }
+}