Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@antv/g-plugin-canvas-renderer

Package Overview
Dependencies
Maintainers
61
Versions
261
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@antv/g-plugin-canvas-renderer - npm Package Compare versions

Comparing version 1.7.24 to 1.7.25

dist/interfaces.d.ts
dist/interfaces.d.ts.map

28

dist/CanvasRendererPlugin.d.ts

@@ -1,6 +0,3 @@

import type { ICamera, RBushNodeAABB, RenderingPlugin, RenderingService, RBush } from '@antv/g-lite';
import { CanvasConfig, ContextService, DisplayObjectPool, RenderingContext, Shape } from '@antv/g-lite';
import type { PathGenerator } from '@antv/g-plugin-canvas-path-generator';
import type { StyleRenderer } from './shapes/styles';
import { CanvasRendererPluginOptions } from './tokens';
import type { RenderingPlugin, RenderingPluginContext } from '@antv/g-lite';
import type { CanvasRendererPluginOptions } from './interfaces';
/**

@@ -12,10 +9,6 @@ * support 2 modes in rendering:

export declare class CanvasRendererPlugin implements RenderingPlugin {
private canvasConfig;
private camera;
private contextService;
private renderingContext;
private canvasRendererPluginOptions;
static tag: string;
private context;
private pathGeneratorFactory;
private styleRendererFactory;
private displayObjectPool;
private canvasRendererPluginOptions;
/**

@@ -25,10 +18,3 @@ * RBush used in dirty rectangle rendering

private rBush;
static tag: string;
private pathGeneratorFactoryCache;
private styleRendererFactoryCache;
constructor(canvasConfig: CanvasConfig, camera: ICamera, contextService: ContextService<CanvasRenderingContext2D>, renderingContext: RenderingContext, pathGeneratorFactory: (tagName: Shape | string) => PathGenerator<any>, styleRendererFactory: (tagName: Shape | string) => StyleRenderer, displayObjectPool: DisplayObjectPool, canvasRendererPluginOptions: CanvasRendererPluginOptions,
/**
* RBush used in dirty rectangle rendering
*/
rBush: RBush<RBushNodeAABB>);
constructor(canvasRendererPluginOptions: CanvasRendererPluginOptions);
private removedRBushNodeAABBs;

@@ -51,3 +37,3 @@ private renderQueue;

private vec3d;
apply(renderingService: RenderingService): void;
apply(context: RenderingPluginContext): void;
private clearRect;

@@ -54,0 +40,0 @@ private renderDisplayObject;

2

dist/index.d.ts
import { AbstractRendererPlugin } from '@antv/g-lite';
import { CanvasRendererPluginOptions } from './tokens';
import type { CanvasRendererPluginOptions } from './interfaces';
export * from './shapes/styles';

@@ -4,0 +4,0 @@ export declare class Plugin extends AbstractRendererPlugin {

1150

dist/index.esm.js

@@ -1,6 +0,3 @@

import { Syringe, singleton, inject, Shape, isPattern, GradientType, RenderingPluginContribution, CanvasConfig, DefaultCamera, ContextService, RenderingContext, DisplayObjectPool, RBushRoot, ElementEvent, AABB, CustomEvent, CanvasEvent, Module, AbstractRendererPlugin } from '@antv/g-lite';
import { __decorate, __param } from 'tslib';
import { PathGeneratorFactory } from '@antv/g-plugin-canvas-path-generator';
import { ElementEvent, AABB, CustomEvent, CanvasEvent, Shape, runtime, isPattern, GradientType, AbstractRendererPlugin } from '@antv/g-lite';
import { isNil, isString } from '@antv/util';
import { ImagePool } from '@antv/g-plugin-image-loader';

@@ -751,31 +748,491 @@ function _regeneratorRuntime() {

var StyleRendererFactory = Syringe.defineToken('');
var CircleRendererContribution = Syringe.defineToken('', {
multiple: false
});
var EllipseRendererContribution = Syringe.defineToken('', {
multiple: false
});
var RectRendererContribution = Syringe.defineToken('', {
multiple: false
});
var LineRendererContribution = Syringe.defineToken('', {
multiple: false
});
var PolylineRendererContribution = Syringe.defineToken('', {
multiple: false
});
var PolygonRendererContribution = Syringe.defineToken('', {
multiple: false
});
var PathRendererContribution = Syringe.defineToken('', {
multiple: false
});
var TextRendererContribution = Syringe.defineToken('', {
multiple: false
});
var ImageRendererContribution = Syringe.defineToken('', {
multiple: false
});
/**
* support 2 modes in rendering:
* * immediate
* * delayed: render at the end of frame with dirty-rectangle
*/
var CanvasRendererPlugin = /*#__PURE__*/function () {
/**
* RBush used in dirty rectangle rendering
*/
function CanvasRendererPlugin(canvasRendererPluginOptions) {
this.canvasRendererPluginOptions = void 0;
this.context = void 0;
this.pathGeneratorFactory = void 0;
this.rBush = void 0;
this.removedRBushNodeAABBs = [];
this.renderQueue = [];
this.restoreStack = [];
this.clearFullScreen = false;
this.vpMatrix = create();
this.dprMatrix = create();
this.tmpMat4 = create();
this.vec3a = create$1();
this.vec3b = create$1();
this.vec3c = create$1();
this.vec3d = create$1();
this.canvasRendererPluginOptions = canvasRendererPluginOptions;
}
var _proto = CanvasRendererPlugin.prototype;
_proto.apply = function apply(context) {
var _this = this;
this.context = context; // @ts-ignore
var config = context.config,
camera = context.camera,
renderingService = context.renderingService,
renderingContext = context.renderingContext,
rBushRoot = context.rBushRoot,
pathGeneratorFactory = context.pathGeneratorFactory;
this.rBush = rBushRoot;
this.pathGeneratorFactory = pathGeneratorFactory;
var contextService = context.contextService;
var canvas = renderingContext.root.ownerDocument.defaultView;
var handleUnmounted = function handleUnmounted(e) {
var object = e.target; // remove r-bush node
// @ts-ignore
var rBushNode = object.rBushNode;
if (rBushNode.aabb) {
// save removed aabbs for dirty-rectangle rendering later
_this.removedRBushNodeAABBs.push(rBushNode.aabb);
}
};
var handleCulled = function handleCulled(e) {
var object = e.target; // @ts-ignore
var rBushNode = object.rBushNode;
if (rBushNode.aabb) {
// save removed aabbs for dirty-rectangle rendering later
_this.removedRBushNodeAABBs.push(rBushNode.aabb);
}
};
renderingService.hooks.init.tapPromise(CanvasRendererPlugin.tag, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
var dpr, width, height, context;
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
renderingContext.root.addEventListener(ElementEvent.UNMOUNTED, handleUnmounted);
renderingContext.root.addEventListener(ElementEvent.CULLED, handleCulled); // clear fullscreen
dpr = contextService.getDPR();
width = config.width, height = config.height;
context = contextService.getContext();
_this.clearRect(context, 0, 0, width * dpr, height * dpr, config.background);
case 6:
case "end":
return _context.stop();
}
}
}, _callee);
})));
renderingService.hooks.destroy.tap(CanvasRendererPlugin.tag, function () {
renderingContext.root.removeEventListener(ElementEvent.UNMOUNTED, handleUnmounted);
renderingContext.root.removeEventListener(ElementEvent.CULLED, handleCulled);
});
renderingService.hooks.beginFrame.tap(CanvasRendererPlugin.tag, function () {
var context = contextService.getContext();
var dpr = contextService.getDPR();
var width = config.width,
height = config.height;
var _this$canvasRendererP = _this.canvasRendererPluginOptions,
dirtyObjectNumThreshold = _this$canvasRendererP.dirtyObjectNumThreshold,
dirtyObjectRatioThreshold = _this$canvasRendererP.dirtyObjectRatioThreshold; // some heuristic conditions such as 80% object changed
var _renderingService$get = renderingService.getStats(),
total = _renderingService$get.total,
rendered = _renderingService$get.rendered;
var ratio = rendered / total;
_this.clearFullScreen = renderingService.disableDirtyRectangleRendering() || rendered > dirtyObjectNumThreshold && ratio > dirtyObjectRatioThreshold;
if (context) {
context.resetTransform();
if (_this.clearFullScreen) {
_this.clearRect(context, 0, 0, width * dpr, height * dpr, config.background);
}
}
});
var renderByZIndex = function renderByZIndex(object) {
if (object.isVisible() && !object.isCulled()) {
_this.renderDisplayObject(object, contextService, renderingService); // if we did a full screen rendering last frame
_this.saveDirtyAABB(object);
}
var sorted = object.sortable.sorted || object.childNodes; // should account for z-index
sorted.forEach(function (child) {
renderByZIndex(child);
});
}; // render at the end of frame
renderingService.hooks.endFrame.tap(CanvasRendererPlugin.tag, function () {
var context = contextService.getContext(); // clear & clip dirty rectangle
var dpr = contextService.getDPR();
fromScaling(_this.dprMatrix, fromValues(dpr, dpr, 1));
multiply(_this.vpMatrix, _this.dprMatrix, camera.getOrthoMatrix());
if (_this.clearFullScreen) {
renderByZIndex(renderingContext.root);
} else {
// merge removed AABB
var dirtyRenderBounds = _this.safeMergeAABB.apply(_this, [_this.mergeDirtyAABBs(_this.renderQueue)].concat(_this.removedRBushNodeAABBs.map(function (_ref2) {
var minX = _ref2.minX,
minY = _ref2.minY,
maxX = _ref2.maxX,
maxY = _ref2.maxY;
var aabb = new AABB();
aabb.setMinMax(fromValues(minX, minY, 0), fromValues(maxX, maxY, 0));
return aabb;
})));
_this.removedRBushNodeAABBs = [];
if (AABB.isEmpty(dirtyRenderBounds)) {
_this.renderQueue = [];
return;
}
var dirtyRect = _this.convertAABB2Rect(dirtyRenderBounds);
var x = dirtyRect.x,
y = dirtyRect.y,
width = dirtyRect.width,
height = dirtyRect.height;
var tl = transformMat4(_this.vec3a, fromValues(x, y, 0), _this.vpMatrix);
var tr = transformMat4(_this.vec3b, fromValues(x + width, y, 0), _this.vpMatrix);
var bl = transformMat4(_this.vec3c, fromValues(x, y + height, 0), _this.vpMatrix);
var br = transformMat4(_this.vec3d, fromValues(x + width, y + height, 0), _this.vpMatrix);
var minx = Math.min(tl[0], tr[0], br[0], bl[0]);
var miny = Math.min(tl[1], tr[1], br[1], bl[1]);
var maxx = Math.max(tl[0], tr[0], br[0], bl[0]);
var maxy = Math.max(tl[1], tr[1], br[1], bl[1]);
var ix = Math.floor(minx);
var iy = Math.floor(miny);
var iwidth = Math.ceil(maxx - minx);
var iheight = Math.ceil(maxy - miny);
context.save();
_this.clearRect(context, ix, iy, iwidth, iheight, config.background);
context.beginPath();
context.rect(ix, iy, iwidth, iheight);
context.clip(); // @see https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations
context.setTransform(_this.vpMatrix[0], _this.vpMatrix[1], _this.vpMatrix[4], _this.vpMatrix[5], _this.vpMatrix[12], _this.vpMatrix[13]); // draw dirty rectangle
var _config$renderer$getC = config.renderer.getConfig(),
enableDirtyRectangleRenderingDebug = _config$renderer$getC.enableDirtyRectangleRenderingDebug;
if (enableDirtyRectangleRenderingDebug) {
canvas.dispatchEvent(new CustomEvent(CanvasEvent.DIRTY_RECTANGLE, {
dirtyRect: {
x: ix,
y: iy,
width: iwidth,
height: iheight
}
}));
} // search objects intersect with dirty rectangle
var dirtyObjects = _this.searchDirtyObjects(dirtyRenderBounds); // do rendering
dirtyObjects // sort by z-index
.sort(function (a, b) {
return a.sortable.renderOrder - b.sortable.renderOrder;
}).forEach(function (object) {
// culled object should not be rendered
if (object && object.isVisible() && !object.isCulled()) {
_this.renderDisplayObject(object, contextService, renderingService);
}
});
context.restore(); // save dirty AABBs in last frame
_this.renderQueue.forEach(function (object) {
_this.saveDirtyAABB(object);
}); // clear queue
_this.renderQueue = [];
} // pop restore stack, eg. root -> parent -> child
_this.restoreStack.forEach(function () {
context.restore();
}); // clear restore stack
_this.restoreStack = [];
});
renderingService.hooks.render.tap(CanvasRendererPlugin.tag, function (object) {
if (!_this.clearFullScreen) {
// render at the end of frame
_this.renderQueue.push(object);
}
});
};
_proto.clearRect = function clearRect(context, x, y, width, height, background) {
// clearRect is faster than fillRect @see https://stackoverflow.com/a/30830253
context.clearRect(x, y, width, height);
if (background) {
context.fillStyle = background;
context.fillRect(x, y, width, height);
}
};
_proto.renderDisplayObject = function renderDisplayObject(object, contextService, renderingService) {
var context = contextService.getContext();
var nodeName = object.nodeName; // restore to its ancestor
var parent = this.restoreStack[this.restoreStack.length - 1];
if (parent && !(object.compareDocumentPosition(parent) & Node.DOCUMENT_POSITION_CONTAINS)) {
context.restore();
this.restoreStack.pop();
} // @ts-ignore
var styleRenderer = this.context.styleRendererFactory[nodeName];
var generatePath = this.pathGeneratorFactory[nodeName]; // clip path
var clipPath = object.parsedStyle.clipPath;
if (clipPath) {
this.applyWorldTransform(context, clipPath); // generate path in local space
var _generatePath = this.pathGeneratorFactory[clipPath.nodeName];
if (_generatePath) {
context.save(); // save clip
this.restoreStack.push(object);
context.beginPath();
_generatePath(context, clipPath.parsedStyle);
context.closePath();
context.clip();
}
} // fill & stroke
if (styleRenderer) {
this.applyWorldTransform(context, object);
context.save(); // apply attributes to context
this.applyAttributesToContext(context, object);
}
if (generatePath) {
context.beginPath();
generatePath(context, object.parsedStyle);
if (object.nodeName !== Shape.LINE && object.nodeName !== Shape.PATH && object.nodeName !== Shape.POLYLINE) {
context.closePath();
}
} // fill & stroke
if (styleRenderer) {
styleRenderer.render(context, object.parsedStyle, object, renderingService); // restore applied attributes, eg. shadowBlur shadowColor...
context.restore();
} // finish rendering, clear dirty flag
object.renderable.dirty = false;
};
_proto.convertAABB2Rect = function convertAABB2Rect(aabb) {
var min = aabb.getMin();
var max = aabb.getMax(); // expand the rectangle a bit to avoid artifacts
// @see https://www.yuque.com/antv/ou292n/bi8nix#ExvCu
var minX = Math.floor(min[0]);
var minY = Math.floor(min[1]);
var maxX = Math.ceil(max[0]);
var maxY = Math.ceil(max[1]);
var width = maxX - minX;
var height = maxY - minY;
return {
x: minX,
y: minY,
width: width,
height: height
};
}
/**
* TODO: merge dirty rectangles with some strategies.
* For now, we just simply merge all the rectangles into one.
* @see https://idom.me/articles/841.html
*/
;
_proto.mergeDirtyAABBs = function mergeDirtyAABBs(dirtyObjects) {
// merge into a big AABB
// TODO: skip descendant if ancestor is caculated, but compareNodePosition is really slow
var aabb = new AABB();
dirtyObjects.forEach(function (object) {
var renderBounds = object.getRenderBounds();
aabb.add(renderBounds);
var dirtyRenderBounds = object.renderable.dirtyRenderBounds;
if (dirtyRenderBounds) {
aabb.add(dirtyRenderBounds);
}
});
return aabb;
};
_proto.searchDirtyObjects = function searchDirtyObjects(dirtyRectangle) {
// search in r-tree, get all affected nodes
var _dirtyRectangle$getMi = dirtyRectangle.getMin(),
minX = _dirtyRectangle$getMi[0],
minY = _dirtyRectangle$getMi[1];
var _dirtyRectangle$getMa = dirtyRectangle.getMax(),
maxX = _dirtyRectangle$getMa[0],
maxY = _dirtyRectangle$getMa[1];
var rBushNodes = this.rBush.search({
minX: minX,
minY: minY,
maxX: maxX,
maxY: maxY
});
return rBushNodes.map(function (_ref3) {
var id = _ref3.id;
return runtime.displayObjectPool.getByEntity(id);
});
};
_proto.saveDirtyAABB = function saveDirtyAABB(object) {
var renderable = object.renderable;
if (!renderable.dirtyRenderBounds) {
renderable.dirtyRenderBounds = new AABB();
}
var renderBounds = object.getRenderBounds();
if (renderBounds) {
// save last dirty aabb
renderable.dirtyRenderBounds.update(renderBounds.center, renderBounds.halfExtents);
}
}
/**
* TODO: batch the same global attributes
*/
;
_proto.applyAttributesToContext = function applyAttributesToContext(context, object) {
var _object$parsedStyle = object.parsedStyle,
stroke = _object$parsedStyle.stroke,
fill = _object$parsedStyle.fill,
opacity = _object$parsedStyle.opacity,
lineDash = _object$parsedStyle.lineDash,
lineDashOffset = _object$parsedStyle.lineDashOffset; // @see https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setLineDash
if (lineDash) {
context.setLineDash(lineDash);
} // @see https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
if (!isNil(lineDashOffset)) {
context.lineDashOffset = lineDashOffset;
}
if (!isNil(opacity)) {
context.globalAlpha *= opacity;
}
if (!isNil(stroke) && !Array.isArray(stroke) && !stroke.isNone) {
context.strokeStyle = object.attributes.stroke;
}
if (!isNil(fill) && !Array.isArray(fill) && !fill.isNone) {
context.fillStyle = object.attributes.fill;
}
};
_proto.applyWorldTransform = function applyWorldTransform(context, object, matrix) {
var tx = 0;
var ty = 0;
var _ref4 = object.parsedStyle || {},
anchor = _ref4.anchor;
var anchorX = anchor && anchor[0] || 0;
var anchorY = anchor && anchor[1] || 0;
if (anchorX !== 0 || anchorY !== 0) {
var bounds = object.getGeometryBounds();
var width = bounds && bounds.halfExtents[0] * 2 || 0;
var height = bounds && bounds.halfExtents[1] * 2 || 0;
tx = -(anchorX * width);
ty = -(anchorY * height);
} // apply clip shape's RTS
if (matrix) {
copy(this.tmpMat4, object.getLocalTransform());
this.vec3a[0] = tx;
this.vec3a[1] = ty;
this.vec3a[2] = 0;
translate(this.tmpMat4, this.tmpMat4, this.vec3a);
multiply(this.tmpMat4, matrix, this.tmpMat4);
multiply(this.tmpMat4, this.vpMatrix, this.tmpMat4);
} else {
// apply RTS transformation in world space
copy(this.tmpMat4, object.getWorldTransform());
this.vec3a[0] = tx;
this.vec3a[1] = ty;
this.vec3a[2] = 0;
translate(this.tmpMat4, this.tmpMat4, this.vec3a);
multiply(this.tmpMat4, this.vpMatrix, this.tmpMat4);
} // @see https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations
context.setTransform(this.tmpMat4[0], this.tmpMat4[1], this.tmpMat4[4], this.tmpMat4[5], this.tmpMat4[12], this.tmpMat4[13]);
};
_proto.safeMergeAABB = function safeMergeAABB() {
var merged = new AABB();
for (var _len = arguments.length, aabbs = new Array(_len), _key = 0; _key < _len; _key++) {
aabbs[_key] = arguments[_key];
}
aabbs.forEach(function (aabb) {
merged.add(aabb);
});
return merged;
};
return CanvasRendererPlugin;
}();
CanvasRendererPlugin.tag = 'CanvasRenderer';
var DefaultRenderer = /*#__PURE__*/function () {

@@ -940,4 +1397,2 @@ function DefaultRenderer(imagePool) {

}();
DefaultRenderer = __decorate([singleton(), __param(0, inject(ImagePool))], DefaultRenderer);
/**

@@ -1009,6 +1464,2 @@ * apply before fill and stroke but only once

ImageRenderer = __decorate([singleton({
token: ImageRendererContribution
}), __param(0, inject(ImagePool))], ImageRenderer);
var TextRenderer = /*#__PURE__*/function () {

@@ -1165,6 +1616,2 @@ function TextRenderer() {}

TextRenderer = __decorate([singleton({
token: TextRendererContribution
})], TextRenderer);
var RectRenderer = /*#__PURE__*/function (_DefaultRenderer) {

@@ -1180,6 +1627,2 @@ _inheritsLoose(RectRenderer, _DefaultRenderer);

RectRenderer = __decorate([singleton({
token: RectRendererContribution
})], RectRenderer);
var CircleRenderer = /*#__PURE__*/function (_DefaultRenderer) {

@@ -1195,6 +1638,2 @@ _inheritsLoose(CircleRenderer, _DefaultRenderer);

CircleRenderer = __decorate([singleton({
token: CircleRendererContribution
})], CircleRenderer);
var EllipseRenderer = /*#__PURE__*/function (_DefaultRenderer) {

@@ -1210,6 +1649,2 @@ _inheritsLoose(EllipseRenderer, _DefaultRenderer);

EllipseRenderer = __decorate([singleton({
token: EllipseRendererContribution
})], EllipseRenderer);
var LineRenderer = /*#__PURE__*/function (_DefaultRenderer) {

@@ -1225,6 +1660,2 @@ _inheritsLoose(LineRenderer, _DefaultRenderer);

LineRenderer = __decorate([singleton({
token: LineRendererContribution
})], LineRenderer);
var PolylineRenderer = /*#__PURE__*/function (_DefaultRenderer) {

@@ -1240,6 +1671,2 @@ _inheritsLoose(PolylineRenderer, _DefaultRenderer);

PolylineRenderer = __decorate([singleton({
token: PolylineRendererContribution
})], PolylineRenderer);
var PolygonRenderer = /*#__PURE__*/function (_DefaultRenderer) {

@@ -1255,6 +1682,2 @@ _inheritsLoose(PolygonRenderer, _DefaultRenderer);

PolygonRenderer = __decorate([singleton({
token: PolygonRendererContribution
})], PolygonRenderer);
var PathRenderer = /*#__PURE__*/function (_DefaultRenderer) {

@@ -1270,565 +1693,2 @@ _inheritsLoose(PathRenderer, _DefaultRenderer);

PathRenderer = __decorate([singleton({
token: PathRendererContribution
})], PathRenderer);
var CanvasRendererPluginOptions = Syringe.defineToken('');
var _class;
var CanvasRendererPlugin_1;
/**
* support 2 modes in rendering:
* * immediate
* * delayed: render at the end of frame with dirty-rectangle
*/
var CanvasRendererPlugin = CanvasRendererPlugin_1 = (_class = /*#__PURE__*/function () {
function CanvasRendererPlugin(canvasConfig, camera, contextService, renderingContext, pathGeneratorFactory, styleRendererFactory, displayObjectPool, canvasRendererPluginOptions,
/**
* RBush used in dirty rectangle rendering
*/
rBush) {
this.canvasConfig = void 0;
this.camera = void 0;
this.contextService = void 0;
this.renderingContext = void 0;
this.pathGeneratorFactory = void 0;
this.styleRendererFactory = void 0;
this.displayObjectPool = void 0;
this.canvasRendererPluginOptions = void 0;
this.rBush = void 0;
this.pathGeneratorFactoryCache = {};
this.styleRendererFactoryCache = {};
this.removedRBushNodeAABBs = [];
this.renderQueue = [];
this.restoreStack = [];
this.clearFullScreen = false;
this.vpMatrix = create();
this.dprMatrix = create();
this.tmpMat4 = create();
this.vec3a = create$1();
this.vec3b = create$1();
this.vec3c = create$1();
this.vec3d = create$1();
this.canvasConfig = canvasConfig;
this.camera = camera;
this.contextService = contextService;
this.renderingContext = renderingContext;
this.pathGeneratorFactory = pathGeneratorFactory;
this.styleRendererFactory = styleRendererFactory;
this.displayObjectPool = displayObjectPool;
this.canvasRendererPluginOptions = canvasRendererPluginOptions;
this.rBush = rBush;
}
var _proto = CanvasRendererPlugin.prototype;
_proto.apply = function apply(renderingService) {
var _this = this;
var canvas = this.renderingContext.root.ownerDocument.defaultView;
var handleUnmounted = function handleUnmounted(e) {
var object = e.target; // remove r-bush node
// @ts-ignore
var rBushNode = object.rBushNode;
if (rBushNode.aabb) {
// save removed aabbs for dirty-rectangle rendering later
_this.removedRBushNodeAABBs.push(rBushNode.aabb);
}
};
var handleCulled = function handleCulled(e) {
var object = e.target; // @ts-ignore
var rBushNode = object.rBushNode;
if (rBushNode.aabb) {
// save removed aabbs for dirty-rectangle rendering later
_this.removedRBushNodeAABBs.push(rBushNode.aabb);
}
};
renderingService.hooks.init.tapPromise(CanvasRendererPlugin_1.tag, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
var dpr, _this$canvasConfig, width, height, context;
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_this.renderingContext.root.addEventListener(ElementEvent.UNMOUNTED, handleUnmounted);
_this.renderingContext.root.addEventListener(ElementEvent.CULLED, handleCulled); // clear fullscreen
dpr = _this.contextService.getDPR();
_this$canvasConfig = _this.canvasConfig, width = _this$canvasConfig.width, height = _this$canvasConfig.height;
context = _this.contextService.getContext();
_this.clearRect(context, 0, 0, width * dpr, height * dpr);
case 6:
case "end":
return _context.stop();
}
}
}, _callee);
})));
renderingService.hooks.destroy.tap(CanvasRendererPlugin_1.tag, function () {
_this.renderingContext.root.removeEventListener(ElementEvent.UNMOUNTED, handleUnmounted);
_this.renderingContext.root.removeEventListener(ElementEvent.CULLED, handleCulled);
});
renderingService.hooks.beginFrame.tap(CanvasRendererPlugin_1.tag, function () {
var context = _this.contextService.getContext();
var dpr = _this.contextService.getDPR();
var _this$canvasConfig2 = _this.canvasConfig,
width = _this$canvasConfig2.width,
height = _this$canvasConfig2.height;
var _this$canvasRendererP = _this.canvasRendererPluginOptions,
dirtyObjectNumThreshold = _this$canvasRendererP.dirtyObjectNumThreshold,
dirtyObjectRatioThreshold = _this$canvasRendererP.dirtyObjectRatioThreshold; // some heuristic conditions such as 80% object changed
var _renderingService$get = renderingService.getStats(),
total = _renderingService$get.total,
rendered = _renderingService$get.rendered;
var ratio = rendered / total;
_this.clearFullScreen = renderingService.disableDirtyRectangleRendering() || rendered > dirtyObjectNumThreshold && ratio > dirtyObjectRatioThreshold;
if (context) {
context.resetTransform();
if (_this.clearFullScreen) {
_this.clearRect(context, 0, 0, width * dpr, height * dpr);
}
}
});
var renderByZIndex = function renderByZIndex(object) {
if (object.isVisible() && !object.isCulled()) {
_this.renderDisplayObject(object, renderingService); // if we did a full screen rendering last frame
_this.saveDirtyAABB(object);
}
var sorted = object.sortable.sorted || object.childNodes; // should account for z-index
sorted.forEach(function (child) {
renderByZIndex(child);
});
}; // render at the end of frame
renderingService.hooks.endFrame.tap(CanvasRendererPlugin_1.tag, function () {
var context = _this.contextService.getContext(); // clear & clip dirty rectangle
var dpr = _this.contextService.getDPR();
fromScaling(_this.dprMatrix, fromValues(dpr, dpr, 1));
multiply(_this.vpMatrix, _this.dprMatrix, _this.camera.getOrthoMatrix());
if (_this.clearFullScreen) {
renderByZIndex(_this.renderingContext.root);
} else {
// merge removed AABB
var dirtyRenderBounds = _this.safeMergeAABB.apply(_this, [_this.mergeDirtyAABBs(_this.renderQueue)].concat(_this.removedRBushNodeAABBs.map(function (_ref2) {
var minX = _ref2.minX,
minY = _ref2.minY,
maxX = _ref2.maxX,
maxY = _ref2.maxY;
var aabb = new AABB();
aabb.setMinMax(fromValues(minX, minY, 0), fromValues(maxX, maxY, 0));
return aabb;
})));
_this.removedRBushNodeAABBs = [];
if (AABB.isEmpty(dirtyRenderBounds)) {
_this.renderQueue = [];
return;
}
var dirtyRect = _this.convertAABB2Rect(dirtyRenderBounds);
var x = dirtyRect.x,
y = dirtyRect.y,
width = dirtyRect.width,
height = dirtyRect.height;
var tl = transformMat4(_this.vec3a, fromValues(x, y, 0), _this.vpMatrix);
var tr = transformMat4(_this.vec3b, fromValues(x + width, y, 0), _this.vpMatrix);
var bl = transformMat4(_this.vec3c, fromValues(x, y + height, 0), _this.vpMatrix);
var br = transformMat4(_this.vec3d, fromValues(x + width, y + height, 0), _this.vpMatrix);
var minx = Math.min(tl[0], tr[0], br[0], bl[0]);
var miny = Math.min(tl[1], tr[1], br[1], bl[1]);
var maxx = Math.max(tl[0], tr[0], br[0], bl[0]);
var maxy = Math.max(tl[1], tr[1], br[1], bl[1]);
var ix = Math.floor(minx);
var iy = Math.floor(miny);
var iwidth = Math.ceil(maxx - minx);
var iheight = Math.ceil(maxy - miny);
context.save();
_this.clearRect(context, ix, iy, iwidth, iheight);
context.beginPath();
context.rect(ix, iy, iwidth, iheight);
context.clip(); // @see https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations
context.setTransform(_this.vpMatrix[0], _this.vpMatrix[1], _this.vpMatrix[4], _this.vpMatrix[5], _this.vpMatrix[12], _this.vpMatrix[13]); // draw dirty rectangle
var _this$canvasConfig$re = _this.canvasConfig.renderer.getConfig(),
enableDirtyRectangleRenderingDebug = _this$canvasConfig$re.enableDirtyRectangleRenderingDebug;
if (enableDirtyRectangleRenderingDebug) {
canvas.dispatchEvent(new CustomEvent(CanvasEvent.DIRTY_RECTANGLE, {
dirtyRect: {
x: ix,
y: iy,
width: iwidth,
height: iheight
}
}));
} // search objects intersect with dirty rectangle
var dirtyObjects = _this.searchDirtyObjects(dirtyRenderBounds); // do rendering
dirtyObjects // sort by z-index
.sort(function (a, b) {
return a.sortable.renderOrder - b.sortable.renderOrder;
}).forEach(function (object) {
// culled object should not be rendered
if (object && object.isVisible() && !object.isCulled()) {
_this.renderDisplayObject(object, renderingService);
}
});
context.restore(); // save dirty AABBs in last frame
_this.renderQueue.forEach(function (object) {
_this.saveDirtyAABB(object);
}); // clear queue
_this.renderQueue = [];
} // pop restore stack, eg. root -> parent -> child
_this.restoreStack.forEach(function () {
context.restore();
}); // clear restore stack
_this.restoreStack = [];
});
renderingService.hooks.render.tap(CanvasRendererPlugin_1.tag, function (object) {
if (!_this.clearFullScreen) {
// render at the end of frame
_this.renderQueue.push(object);
}
});
};
_proto.clearRect = function clearRect(context, x, y, width, height) {
// clearRect is faster than fillRect @see https://stackoverflow.com/a/30830253
context.clearRect(x, y, width, height);
var background = this.canvasConfig.background;
if (background) {
context.fillStyle = background;
context.fillRect(x, y, width, height);
}
};
_proto.renderDisplayObject = function renderDisplayObject(object, renderingService) {
var context = this.contextService.getContext();
var nodeName = object.nodeName; // restore to its ancestor
var parent = this.restoreStack[this.restoreStack.length - 1];
if (parent && !(object.compareDocumentPosition(parent) & Node.DOCUMENT_POSITION_CONTAINS)) {
context.restore();
this.restoreStack.pop();
} // while (parent && object.parentNode !== parent) {
// context.restore();
// this.restoreStack.pop();
// parent = this.restoreStack[this.restoreStack.length - 1];
// }
if (this.styleRendererFactoryCache[nodeName] === undefined) {
this.styleRendererFactoryCache[nodeName] = this.styleRendererFactory(nodeName);
}
var styleRenderer = this.styleRendererFactoryCache[nodeName];
if (this.pathGeneratorFactoryCache[nodeName] === undefined) {
this.pathGeneratorFactoryCache[nodeName] = this.pathGeneratorFactory(nodeName);
}
var generatePath = this.pathGeneratorFactoryCache[nodeName]; // clip path
var clipPathShape = object.parsedStyle.clipPath;
if (clipPathShape) {
this.applyWorldTransform(context, clipPathShape, object.getWorldTransform()); // generate path in local space
if (this.pathGeneratorFactoryCache[clipPathShape.nodeName] === undefined) {
this.pathGeneratorFactoryCache[clipPathShape.nodeName] = this.pathGeneratorFactory(clipPathShape.nodeName);
}
var _generatePath = this.pathGeneratorFactoryCache[clipPathShape.nodeName];
if (_generatePath) {
context.save(); // save clip
this.restoreStack.push(object);
context.beginPath();
_generatePath(context, clipPathShape.parsedStyle);
context.closePath();
context.clip();
}
} // fill & stroke
if (styleRenderer) {
this.applyWorldTransform(context, object);
context.save(); // apply attributes to context
this.applyAttributesToContext(context, object);
}
if (generatePath) {
context.beginPath();
generatePath(context, object.parsedStyle);
if (object.nodeName !== Shape.LINE && object.nodeName !== Shape.PATH && object.nodeName !== Shape.POLYLINE) {
context.closePath();
}
} // fill & stroke
if (styleRenderer) {
styleRenderer.render(context, object.parsedStyle, object, renderingService); // restore applied attributes, eg. shadowBlur shadowColor...
context.restore();
} // finish rendering, clear dirty flag
object.renderable.dirty = false;
};
_proto.convertAABB2Rect = function convertAABB2Rect(aabb) {
var min = aabb.getMin();
var max = aabb.getMax(); // expand the rectangle a bit to avoid artifacts
// @see https://www.yuque.com/antv/ou292n/bi8nix#ExvCu
var minX = Math.floor(min[0]);
var minY = Math.floor(min[1]);
var maxX = Math.ceil(max[0]);
var maxY = Math.ceil(max[1]);
var width = maxX - minX;
var height = maxY - minY;
return {
x: minX,
y: minY,
width: width,
height: height
};
}
/**
* TODO: merge dirty rectangles with some strategies.
* For now, we just simply merge all the rectangles into one.
* @see https://idom.me/articles/841.html
*/
;
_proto.mergeDirtyAABBs = function mergeDirtyAABBs(dirtyObjects) {
// merge into a big AABB
// TODO: skip descendant if ancestor is caculated, but compareNodePosition is really slow
var aabb = new AABB();
dirtyObjects.forEach(function (object) {
var renderBounds = object.getRenderBounds();
aabb.add(renderBounds);
var dirtyRenderBounds = object.renderable.dirtyRenderBounds;
if (dirtyRenderBounds) {
aabb.add(dirtyRenderBounds);
}
});
return aabb;
};
_proto.searchDirtyObjects = function searchDirtyObjects(dirtyRectangle) {
var _this2 = this;
// search in r-tree, get all affected nodes
var _dirtyRectangle$getMi = dirtyRectangle.getMin(),
minX = _dirtyRectangle$getMi[0],
minY = _dirtyRectangle$getMi[1];
var _dirtyRectangle$getMa = dirtyRectangle.getMax(),
maxX = _dirtyRectangle$getMa[0],
maxY = _dirtyRectangle$getMa[1];
var rBushNodes = this.rBush.search({
minX: minX,
minY: minY,
maxX: maxX,
maxY: maxY
});
return rBushNodes.map(function (_ref3) {
var id = _ref3.id;
return _this2.displayObjectPool.getByEntity(id);
});
};
_proto.saveDirtyAABB = function saveDirtyAABB(object) {
var renderable = object.renderable;
if (!renderable.dirtyRenderBounds) {
renderable.dirtyRenderBounds = new AABB();
}
var renderBounds = object.getRenderBounds();
if (renderBounds) {
// save last dirty aabb
renderable.dirtyRenderBounds.update(renderBounds.center, renderBounds.halfExtents);
}
}
/**
* TODO: batch the same global attributes
*/
;
_proto.applyAttributesToContext = function applyAttributesToContext(context, object) {
var _object$parsedStyle = object.parsedStyle,
stroke = _object$parsedStyle.stroke,
fill = _object$parsedStyle.fill,
opacity = _object$parsedStyle.opacity,
lineDash = _object$parsedStyle.lineDash,
lineDashOffset = _object$parsedStyle.lineDashOffset; // @see https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setLineDash
if (lineDash) {
context.setLineDash(lineDash);
} // @see https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
if (!isNil(lineDashOffset)) {
context.lineDashOffset = lineDashOffset;
}
if (!isNil(opacity)) {
context.globalAlpha *= opacity;
}
if (!isNil(stroke) && !Array.isArray(stroke) && !stroke.isNone) {
context.strokeStyle = object.attributes.stroke;
}
if (!isNil(fill) && !Array.isArray(fill) && !fill.isNone) {
context.fillStyle = object.attributes.fill;
}
};
_proto.applyWorldTransform = function applyWorldTransform(context, object, matrix) {
var tx = 0;
var ty = 0;
var _ref4 = object.parsedStyle || {},
anchor = _ref4.anchor;
var anchorX = anchor && anchor[0] || 0;
var anchorY = anchor && anchor[1] || 0;
if (anchorX !== 0 || anchorY !== 0) {
var bounds = object.getGeometryBounds();
var width = bounds && bounds.halfExtents[0] * 2 || 0;
var height = bounds && bounds.halfExtents[1] * 2 || 0;
tx = -(anchorX * width);
ty = -(anchorY * height);
} // apply clip shape's RTS
if (matrix) {
copy(this.tmpMat4, object.getLocalTransform());
this.vec3a[0] = tx;
this.vec3a[1] = ty;
this.vec3a[2] = 0;
translate(this.tmpMat4, this.tmpMat4, this.vec3a);
multiply(this.tmpMat4, matrix, this.tmpMat4);
multiply(this.tmpMat4, this.vpMatrix, this.tmpMat4);
} else {
// apply RTS transformation in world space
copy(this.tmpMat4, object.getWorldTransform());
this.vec3a[0] = tx;
this.vec3a[1] = ty;
this.vec3a[2] = 0;
translate(this.tmpMat4, this.tmpMat4, this.vec3a);
multiply(this.tmpMat4, this.vpMatrix, this.tmpMat4);
} // @see https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations
context.setTransform(this.tmpMat4[0], this.tmpMat4[1], this.tmpMat4[4], this.tmpMat4[5], this.tmpMat4[12], this.tmpMat4[13]);
};
_proto.safeMergeAABB = function safeMergeAABB() {
var merged = new AABB();
for (var _len = arguments.length, aabbs = new Array(_len), _key = 0; _key < _len; _key++) {
aabbs[_key] = arguments[_key];
}
aabbs.forEach(function (aabb) {
merged.add(aabb);
});
return merged;
};
return CanvasRendererPlugin;
}(), _class.tag = 'CanvasRenderer', _class);
CanvasRendererPlugin = CanvasRendererPlugin_1 = __decorate([singleton({
contrib: RenderingPluginContribution
}), __param(0, inject(CanvasConfig)), __param(1, inject(DefaultCamera)), __param(2, inject(ContextService)), __param(3, inject(RenderingContext)), __param(4, inject(PathGeneratorFactory)), __param(5, inject(StyleRendererFactory)), __param(6, inject(DisplayObjectPool)), __param(7, inject(CanvasRendererPluginOptions)), __param(8, inject(RBushRoot))], CanvasRendererPlugin);
var containerModule = Module(function (register) {
var _shape2Token;
register(CircleRenderer);
register(EllipseRenderer);
register(RectRenderer);
register(ImageRenderer);
register(TextRenderer);
register(LineRenderer);
register(PolylineRenderer);
register(PolygonRenderer);
register(PathRenderer);
var shape2Token = (_shape2Token = {}, _shape2Token[Shape.CIRCLE] = CircleRendererContribution, _shape2Token[Shape.ELLIPSE] = EllipseRendererContribution, _shape2Token[Shape.RECT] = RectRendererContribution, _shape2Token[Shape.IMAGE] = ImageRendererContribution, _shape2Token[Shape.TEXT] = TextRendererContribution, _shape2Token[Shape.LINE] = LineRendererContribution, _shape2Token[Shape.POLYLINE] = PolylineRendererContribution, _shape2Token[Shape.POLYGON] = PolygonRendererContribution, _shape2Token[Shape.PATH] = PathRendererContribution, _shape2Token);
register({
token: StyleRendererFactory,
useFactory: function useFactory(ctx) {
return function (tagName) {
var token = shape2Token[tagName];
if (token && ctx.container.isBound(token)) {
return ctx.container.get(token);
}
return null;
};
}
});
register(CanvasRendererPlugin);
});
var Plugin = /*#__PURE__*/function (_AbstractRendererPlug) {

@@ -1854,14 +1714,26 @@ _inheritsLoose(Plugin, _AbstractRendererPlug);

_proto.init = function init() {
this.container.register(CanvasRendererPluginOptions, {
useValue: _extends({
dirtyObjectNumThreshold: 500,
dirtyObjectRatioThreshold: 0.8
}, this.options)
});
this.container.load(containerModule, true);
var _defaultStyleRenderer;
var canvasRendererPluginOptions = _extends({
dirtyObjectNumThreshold: 500,
dirtyObjectRatioThreshold: 0.8
}, this.options); // @ts-ignore
var imagePool = this.context.imagePool;
var defaultRenderer = new DefaultRenderer(imagePool);
var defaultStyleRendererFactory = (_defaultStyleRenderer = {}, _defaultStyleRenderer[Shape.CIRCLE] = defaultRenderer, _defaultStyleRenderer[Shape.ELLIPSE] = defaultRenderer, _defaultStyleRenderer[Shape.RECT] = defaultRenderer, _defaultStyleRenderer[Shape.IMAGE] = new ImageRenderer(imagePool), _defaultStyleRenderer[Shape.TEXT] = new TextRenderer(), _defaultStyleRenderer[Shape.LINE] = defaultRenderer, _defaultStyleRenderer[Shape.POLYLINE] = defaultRenderer, _defaultStyleRenderer[Shape.POLYGON] = defaultRenderer, _defaultStyleRenderer[Shape.PATH] = defaultRenderer, _defaultStyleRenderer[Shape.GROUP] = undefined, _defaultStyleRenderer[Shape.HTML] = undefined, _defaultStyleRenderer[Shape.MESH] = undefined, _defaultStyleRenderer); // @ts-ignore
this.context.defaultStyleRendererFactory = defaultStyleRendererFactory; // @ts-ignore
this.context.styleRendererFactory = defaultStyleRendererFactory;
this.addRenderingPlugin(new CanvasRendererPlugin(canvasRendererPluginOptions));
};
_proto.destroy = function destroy() {
this.container.unload(containerModule);
this.container.remove(CanvasRendererPluginOptions);
this.removeAllRenderingPlugins(); // @ts-ignore
delete this.context.defaultStyleRendererFactory; // @ts-ignore
delete this.context.styleRendererFactory;
};

@@ -1872,2 +1744,2 @@

export { CircleRenderer, CircleRendererContribution, EllipseRenderer, EllipseRendererContribution, ImageRenderer, ImageRendererContribution, LineRenderer, LineRendererContribution, PathRenderer, PathRendererContribution, Plugin, PolygonRenderer, PolygonRendererContribution, PolylineRenderer, PolylineRendererContribution, RectRenderer, RectRendererContribution, StyleRendererFactory, TextRenderer, TextRendererContribution };
export { CircleRenderer, EllipseRenderer, ImageRenderer, LineRenderer, PathRenderer, Plugin, PolygonRenderer, PolylineRenderer, RectRenderer, TextRenderer };

1183

dist/index.js

@@ -6,6 +6,3 @@ 'use strict';

var gLite = require('@antv/g-lite');
var tslib = require('tslib');
var gPluginCanvasPathGenerator = require('@antv/g-plugin-canvas-path-generator');
var util = require('@antv/util');
var gPluginImageLoader = require('@antv/g-plugin-image-loader');

@@ -756,31 +753,491 @@ function _regeneratorRuntime() {

var StyleRendererFactory = gLite.Syringe.defineToken('');
var CircleRendererContribution = gLite.Syringe.defineToken('', {
multiple: false
});
var EllipseRendererContribution = gLite.Syringe.defineToken('', {
multiple: false
});
var RectRendererContribution = gLite.Syringe.defineToken('', {
multiple: false
});
var LineRendererContribution = gLite.Syringe.defineToken('', {
multiple: false
});
var PolylineRendererContribution = gLite.Syringe.defineToken('', {
multiple: false
});
var PolygonRendererContribution = gLite.Syringe.defineToken('', {
multiple: false
});
var PathRendererContribution = gLite.Syringe.defineToken('', {
multiple: false
});
var TextRendererContribution = gLite.Syringe.defineToken('', {
multiple: false
});
var ImageRendererContribution = gLite.Syringe.defineToken('', {
multiple: false
});
/**
* support 2 modes in rendering:
* * immediate
* * delayed: render at the end of frame with dirty-rectangle
*/
var CanvasRendererPlugin = /*#__PURE__*/function () {
/**
* RBush used in dirty rectangle rendering
*/
function CanvasRendererPlugin(canvasRendererPluginOptions) {
this.canvasRendererPluginOptions = void 0;
this.context = void 0;
this.pathGeneratorFactory = void 0;
this.rBush = void 0;
this.removedRBushNodeAABBs = [];
this.renderQueue = [];
this.restoreStack = [];
this.clearFullScreen = false;
this.vpMatrix = create();
this.dprMatrix = create();
this.tmpMat4 = create();
this.vec3a = create$1();
this.vec3b = create$1();
this.vec3c = create$1();
this.vec3d = create$1();
this.canvasRendererPluginOptions = canvasRendererPluginOptions;
}
var _proto = CanvasRendererPlugin.prototype;
_proto.apply = function apply(context) {
var _this = this;
this.context = context; // @ts-ignore
var config = context.config,
camera = context.camera,
renderingService = context.renderingService,
renderingContext = context.renderingContext,
rBushRoot = context.rBushRoot,
pathGeneratorFactory = context.pathGeneratorFactory;
this.rBush = rBushRoot;
this.pathGeneratorFactory = pathGeneratorFactory;
var contextService = context.contextService;
var canvas = renderingContext.root.ownerDocument.defaultView;
var handleUnmounted = function handleUnmounted(e) {
var object = e.target; // remove r-bush node
// @ts-ignore
var rBushNode = object.rBushNode;
if (rBushNode.aabb) {
// save removed aabbs for dirty-rectangle rendering later
_this.removedRBushNodeAABBs.push(rBushNode.aabb);
}
};
var handleCulled = function handleCulled(e) {
var object = e.target; // @ts-ignore
var rBushNode = object.rBushNode;
if (rBushNode.aabb) {
// save removed aabbs for dirty-rectangle rendering later
_this.removedRBushNodeAABBs.push(rBushNode.aabb);
}
};
renderingService.hooks.init.tapPromise(CanvasRendererPlugin.tag, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
var dpr, width, height, context;
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
renderingContext.root.addEventListener(gLite.ElementEvent.UNMOUNTED, handleUnmounted);
renderingContext.root.addEventListener(gLite.ElementEvent.CULLED, handleCulled); // clear fullscreen
dpr = contextService.getDPR();
width = config.width, height = config.height;
context = contextService.getContext();
_this.clearRect(context, 0, 0, width * dpr, height * dpr, config.background);
case 6:
case "end":
return _context.stop();
}
}
}, _callee);
})));
renderingService.hooks.destroy.tap(CanvasRendererPlugin.tag, function () {
renderingContext.root.removeEventListener(gLite.ElementEvent.UNMOUNTED, handleUnmounted);
renderingContext.root.removeEventListener(gLite.ElementEvent.CULLED, handleCulled);
});
renderingService.hooks.beginFrame.tap(CanvasRendererPlugin.tag, function () {
var context = contextService.getContext();
var dpr = contextService.getDPR();
var width = config.width,
height = config.height;
var _this$canvasRendererP = _this.canvasRendererPluginOptions,
dirtyObjectNumThreshold = _this$canvasRendererP.dirtyObjectNumThreshold,
dirtyObjectRatioThreshold = _this$canvasRendererP.dirtyObjectRatioThreshold; // some heuristic conditions such as 80% object changed
var _renderingService$get = renderingService.getStats(),
total = _renderingService$get.total,
rendered = _renderingService$get.rendered;
var ratio = rendered / total;
_this.clearFullScreen = renderingService.disableDirtyRectangleRendering() || rendered > dirtyObjectNumThreshold && ratio > dirtyObjectRatioThreshold;
if (context) {
context.resetTransform();
if (_this.clearFullScreen) {
_this.clearRect(context, 0, 0, width * dpr, height * dpr, config.background);
}
}
});
var renderByZIndex = function renderByZIndex(object) {
if (object.isVisible() && !object.isCulled()) {
_this.renderDisplayObject(object, contextService, renderingService); // if we did a full screen rendering last frame
_this.saveDirtyAABB(object);
}
var sorted = object.sortable.sorted || object.childNodes; // should account for z-index
sorted.forEach(function (child) {
renderByZIndex(child);
});
}; // render at the end of frame
renderingService.hooks.endFrame.tap(CanvasRendererPlugin.tag, function () {
var context = contextService.getContext(); // clear & clip dirty rectangle
var dpr = contextService.getDPR();
fromScaling(_this.dprMatrix, fromValues(dpr, dpr, 1));
multiply(_this.vpMatrix, _this.dprMatrix, camera.getOrthoMatrix());
if (_this.clearFullScreen) {
renderByZIndex(renderingContext.root);
} else {
// merge removed AABB
var dirtyRenderBounds = _this.safeMergeAABB.apply(_this, [_this.mergeDirtyAABBs(_this.renderQueue)].concat(_this.removedRBushNodeAABBs.map(function (_ref2) {
var minX = _ref2.minX,
minY = _ref2.minY,
maxX = _ref2.maxX,
maxY = _ref2.maxY;
var aabb = new gLite.AABB();
aabb.setMinMax(fromValues(minX, minY, 0), fromValues(maxX, maxY, 0));
return aabb;
})));
_this.removedRBushNodeAABBs = [];
if (gLite.AABB.isEmpty(dirtyRenderBounds)) {
_this.renderQueue = [];
return;
}
var dirtyRect = _this.convertAABB2Rect(dirtyRenderBounds);
var x = dirtyRect.x,
y = dirtyRect.y,
width = dirtyRect.width,
height = dirtyRect.height;
var tl = transformMat4(_this.vec3a, fromValues(x, y, 0), _this.vpMatrix);
var tr = transformMat4(_this.vec3b, fromValues(x + width, y, 0), _this.vpMatrix);
var bl = transformMat4(_this.vec3c, fromValues(x, y + height, 0), _this.vpMatrix);
var br = transformMat4(_this.vec3d, fromValues(x + width, y + height, 0), _this.vpMatrix);
var minx = Math.min(tl[0], tr[0], br[0], bl[0]);
var miny = Math.min(tl[1], tr[1], br[1], bl[1]);
var maxx = Math.max(tl[0], tr[0], br[0], bl[0]);
var maxy = Math.max(tl[1], tr[1], br[1], bl[1]);
var ix = Math.floor(minx);
var iy = Math.floor(miny);
var iwidth = Math.ceil(maxx - minx);
var iheight = Math.ceil(maxy - miny);
context.save();
_this.clearRect(context, ix, iy, iwidth, iheight, config.background);
context.beginPath();
context.rect(ix, iy, iwidth, iheight);
context.clip(); // @see https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations
context.setTransform(_this.vpMatrix[0], _this.vpMatrix[1], _this.vpMatrix[4], _this.vpMatrix[5], _this.vpMatrix[12], _this.vpMatrix[13]); // draw dirty rectangle
var _config$renderer$getC = config.renderer.getConfig(),
enableDirtyRectangleRenderingDebug = _config$renderer$getC.enableDirtyRectangleRenderingDebug;
if (enableDirtyRectangleRenderingDebug) {
canvas.dispatchEvent(new gLite.CustomEvent(gLite.CanvasEvent.DIRTY_RECTANGLE, {
dirtyRect: {
x: ix,
y: iy,
width: iwidth,
height: iheight
}
}));
} // search objects intersect with dirty rectangle
var dirtyObjects = _this.searchDirtyObjects(dirtyRenderBounds); // do rendering
dirtyObjects // sort by z-index
.sort(function (a, b) {
return a.sortable.renderOrder - b.sortable.renderOrder;
}).forEach(function (object) {
// culled object should not be rendered
if (object && object.isVisible() && !object.isCulled()) {
_this.renderDisplayObject(object, contextService, renderingService);
}
});
context.restore(); // save dirty AABBs in last frame
_this.renderQueue.forEach(function (object) {
_this.saveDirtyAABB(object);
}); // clear queue
_this.renderQueue = [];
} // pop restore stack, eg. root -> parent -> child
_this.restoreStack.forEach(function () {
context.restore();
}); // clear restore stack
_this.restoreStack = [];
});
renderingService.hooks.render.tap(CanvasRendererPlugin.tag, function (object) {
if (!_this.clearFullScreen) {
// render at the end of frame
_this.renderQueue.push(object);
}
});
};
_proto.clearRect = function clearRect(context, x, y, width, height, background) {
// clearRect is faster than fillRect @see https://stackoverflow.com/a/30830253
context.clearRect(x, y, width, height);
if (background) {
context.fillStyle = background;
context.fillRect(x, y, width, height);
}
};
_proto.renderDisplayObject = function renderDisplayObject(object, contextService, renderingService) {
var context = contextService.getContext();
var nodeName = object.nodeName; // restore to its ancestor
var parent = this.restoreStack[this.restoreStack.length - 1];
if (parent && !(object.compareDocumentPosition(parent) & Node.DOCUMENT_POSITION_CONTAINS)) {
context.restore();
this.restoreStack.pop();
} // @ts-ignore
var styleRenderer = this.context.styleRendererFactory[nodeName];
var generatePath = this.pathGeneratorFactory[nodeName]; // clip path
var clipPath = object.parsedStyle.clipPath;
if (clipPath) {
this.applyWorldTransform(context, clipPath); // generate path in local space
var _generatePath = this.pathGeneratorFactory[clipPath.nodeName];
if (_generatePath) {
context.save(); // save clip
this.restoreStack.push(object);
context.beginPath();
_generatePath(context, clipPath.parsedStyle);
context.closePath();
context.clip();
}
} // fill & stroke
if (styleRenderer) {
this.applyWorldTransform(context, object);
context.save(); // apply attributes to context
this.applyAttributesToContext(context, object);
}
if (generatePath) {
context.beginPath();
generatePath(context, object.parsedStyle);
if (object.nodeName !== gLite.Shape.LINE && object.nodeName !== gLite.Shape.PATH && object.nodeName !== gLite.Shape.POLYLINE) {
context.closePath();
}
} // fill & stroke
if (styleRenderer) {
styleRenderer.render(context, object.parsedStyle, object, renderingService); // restore applied attributes, eg. shadowBlur shadowColor...
context.restore();
} // finish rendering, clear dirty flag
object.renderable.dirty = false;
};
_proto.convertAABB2Rect = function convertAABB2Rect(aabb) {
var min = aabb.getMin();
var max = aabb.getMax(); // expand the rectangle a bit to avoid artifacts
// @see https://www.yuque.com/antv/ou292n/bi8nix#ExvCu
var minX = Math.floor(min[0]);
var minY = Math.floor(min[1]);
var maxX = Math.ceil(max[0]);
var maxY = Math.ceil(max[1]);
var width = maxX - minX;
var height = maxY - minY;
return {
x: minX,
y: minY,
width: width,
height: height
};
}
/**
* TODO: merge dirty rectangles with some strategies.
* For now, we just simply merge all the rectangles into one.
* @see https://idom.me/articles/841.html
*/
;
_proto.mergeDirtyAABBs = function mergeDirtyAABBs(dirtyObjects) {
// merge into a big AABB
// TODO: skip descendant if ancestor is caculated, but compareNodePosition is really slow
var aabb = new gLite.AABB();
dirtyObjects.forEach(function (object) {
var renderBounds = object.getRenderBounds();
aabb.add(renderBounds);
var dirtyRenderBounds = object.renderable.dirtyRenderBounds;
if (dirtyRenderBounds) {
aabb.add(dirtyRenderBounds);
}
});
return aabb;
};
_proto.searchDirtyObjects = function searchDirtyObjects(dirtyRectangle) {
// search in r-tree, get all affected nodes
var _dirtyRectangle$getMi = dirtyRectangle.getMin(),
minX = _dirtyRectangle$getMi[0],
minY = _dirtyRectangle$getMi[1];
var _dirtyRectangle$getMa = dirtyRectangle.getMax(),
maxX = _dirtyRectangle$getMa[0],
maxY = _dirtyRectangle$getMa[1];
var rBushNodes = this.rBush.search({
minX: minX,
minY: minY,
maxX: maxX,
maxY: maxY
});
return rBushNodes.map(function (_ref3) {
var id = _ref3.id;
return gLite.runtime.displayObjectPool.getByEntity(id);
});
};
_proto.saveDirtyAABB = function saveDirtyAABB(object) {
var renderable = object.renderable;
if (!renderable.dirtyRenderBounds) {
renderable.dirtyRenderBounds = new gLite.AABB();
}
var renderBounds = object.getRenderBounds();
if (renderBounds) {
// save last dirty aabb
renderable.dirtyRenderBounds.update(renderBounds.center, renderBounds.halfExtents);
}
}
/**
* TODO: batch the same global attributes
*/
;
_proto.applyAttributesToContext = function applyAttributesToContext(context, object) {
var _object$parsedStyle = object.parsedStyle,
stroke = _object$parsedStyle.stroke,
fill = _object$parsedStyle.fill,
opacity = _object$parsedStyle.opacity,
lineDash = _object$parsedStyle.lineDash,
lineDashOffset = _object$parsedStyle.lineDashOffset; // @see https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setLineDash
if (lineDash) {
context.setLineDash(lineDash);
} // @see https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
if (!util.isNil(lineDashOffset)) {
context.lineDashOffset = lineDashOffset;
}
if (!util.isNil(opacity)) {
context.globalAlpha *= opacity;
}
if (!util.isNil(stroke) && !Array.isArray(stroke) && !stroke.isNone) {
context.strokeStyle = object.attributes.stroke;
}
if (!util.isNil(fill) && !Array.isArray(fill) && !fill.isNone) {
context.fillStyle = object.attributes.fill;
}
};
_proto.applyWorldTransform = function applyWorldTransform(context, object, matrix) {
var tx = 0;
var ty = 0;
var _ref4 = object.parsedStyle || {},
anchor = _ref4.anchor;
var anchorX = anchor && anchor[0] || 0;
var anchorY = anchor && anchor[1] || 0;
if (anchorX !== 0 || anchorY !== 0) {
var bounds = object.getGeometryBounds();
var width = bounds && bounds.halfExtents[0] * 2 || 0;
var height = bounds && bounds.halfExtents[1] * 2 || 0;
tx = -(anchorX * width);
ty = -(anchorY * height);
} // apply clip shape's RTS
if (matrix) {
copy(this.tmpMat4, object.getLocalTransform());
this.vec3a[0] = tx;
this.vec3a[1] = ty;
this.vec3a[2] = 0;
translate(this.tmpMat4, this.tmpMat4, this.vec3a);
multiply(this.tmpMat4, matrix, this.tmpMat4);
multiply(this.tmpMat4, this.vpMatrix, this.tmpMat4);
} else {
// apply RTS transformation in world space
copy(this.tmpMat4, object.getWorldTransform());
this.vec3a[0] = tx;
this.vec3a[1] = ty;
this.vec3a[2] = 0;
translate(this.tmpMat4, this.tmpMat4, this.vec3a);
multiply(this.tmpMat4, this.vpMatrix, this.tmpMat4);
} // @see https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations
context.setTransform(this.tmpMat4[0], this.tmpMat4[1], this.tmpMat4[4], this.tmpMat4[5], this.tmpMat4[12], this.tmpMat4[13]);
};
_proto.safeMergeAABB = function safeMergeAABB() {
var merged = new gLite.AABB();
for (var _len = arguments.length, aabbs = new Array(_len), _key = 0; _key < _len; _key++) {
aabbs[_key] = arguments[_key];
}
aabbs.forEach(function (aabb) {
merged.add(aabb);
});
return merged;
};
return CanvasRendererPlugin;
}();
CanvasRendererPlugin.tag = 'CanvasRenderer';
var DefaultRenderer = /*#__PURE__*/function () {

@@ -945,4 +1402,2 @@ function DefaultRenderer(imagePool) {

}();
DefaultRenderer = tslib.__decorate([gLite.singleton(), tslib.__param(0, gLite.inject(gPluginImageLoader.ImagePool))], DefaultRenderer);
/**

@@ -973,3 +1428,3 @@ * apply before fill and stroke but only once

exports.ImageRenderer = /*#__PURE__*/function () {
var ImageRenderer = /*#__PURE__*/function () {
function ImageRenderer(imagePool) {

@@ -1015,7 +1470,3 @@ this.imagePool = void 0;

exports.ImageRenderer = tslib.__decorate([gLite.singleton({
token: ImageRendererContribution
}), tslib.__param(0, gLite.inject(gPluginImageLoader.ImagePool))], exports.ImageRenderer);
exports.TextRenderer = /*#__PURE__*/function () {
var TextRenderer = /*#__PURE__*/function () {
function TextRenderer() {}

@@ -1171,7 +1622,3 @@

exports.TextRenderer = tslib.__decorate([gLite.singleton({
token: TextRendererContribution
})], exports.TextRenderer);
exports.RectRenderer = /*#__PURE__*/function (_DefaultRenderer) {
var RectRenderer = /*#__PURE__*/function (_DefaultRenderer) {
_inheritsLoose(RectRenderer, _DefaultRenderer);

@@ -1186,7 +1633,3 @@

exports.RectRenderer = tslib.__decorate([gLite.singleton({
token: RectRendererContribution
})], exports.RectRenderer);
exports.CircleRenderer = /*#__PURE__*/function (_DefaultRenderer) {
var CircleRenderer = /*#__PURE__*/function (_DefaultRenderer) {
_inheritsLoose(CircleRenderer, _DefaultRenderer);

@@ -1201,7 +1644,3 @@

exports.CircleRenderer = tslib.__decorate([gLite.singleton({
token: CircleRendererContribution
})], exports.CircleRenderer);
exports.EllipseRenderer = /*#__PURE__*/function (_DefaultRenderer) {
var EllipseRenderer = /*#__PURE__*/function (_DefaultRenderer) {
_inheritsLoose(EllipseRenderer, _DefaultRenderer);

@@ -1216,7 +1655,3 @@

exports.EllipseRenderer = tslib.__decorate([gLite.singleton({
token: EllipseRendererContribution
})], exports.EllipseRenderer);
exports.LineRenderer = /*#__PURE__*/function (_DefaultRenderer) {
var LineRenderer = /*#__PURE__*/function (_DefaultRenderer) {
_inheritsLoose(LineRenderer, _DefaultRenderer);

@@ -1231,7 +1666,3 @@

exports.LineRenderer = tslib.__decorate([gLite.singleton({
token: LineRendererContribution
})], exports.LineRenderer);
exports.PolylineRenderer = /*#__PURE__*/function (_DefaultRenderer) {
var PolylineRenderer = /*#__PURE__*/function (_DefaultRenderer) {
_inheritsLoose(PolylineRenderer, _DefaultRenderer);

@@ -1246,7 +1677,3 @@

exports.PolylineRenderer = tslib.__decorate([gLite.singleton({
token: PolylineRendererContribution
})], exports.PolylineRenderer);
exports.PolygonRenderer = /*#__PURE__*/function (_DefaultRenderer) {
var PolygonRenderer = /*#__PURE__*/function (_DefaultRenderer) {
_inheritsLoose(PolygonRenderer, _DefaultRenderer);

@@ -1261,7 +1688,3 @@

exports.PolygonRenderer = tslib.__decorate([gLite.singleton({
token: PolygonRendererContribution
})], exports.PolygonRenderer);
exports.PathRenderer = /*#__PURE__*/function (_DefaultRenderer) {
var PathRenderer = /*#__PURE__*/function (_DefaultRenderer) {
_inheritsLoose(PathRenderer, _DefaultRenderer);

@@ -1276,565 +1699,2 @@

exports.PathRenderer = tslib.__decorate([gLite.singleton({
token: PathRendererContribution
})], exports.PathRenderer);
var CanvasRendererPluginOptions = gLite.Syringe.defineToken('');
var _class;
var CanvasRendererPlugin_1;
/**
* support 2 modes in rendering:
* * immediate
* * delayed: render at the end of frame with dirty-rectangle
*/
var CanvasRendererPlugin = CanvasRendererPlugin_1 = (_class = /*#__PURE__*/function () {
function CanvasRendererPlugin(canvasConfig, camera, contextService, renderingContext, pathGeneratorFactory, styleRendererFactory, displayObjectPool, canvasRendererPluginOptions,
/**
* RBush used in dirty rectangle rendering
*/
rBush) {
this.canvasConfig = void 0;
this.camera = void 0;
this.contextService = void 0;
this.renderingContext = void 0;
this.pathGeneratorFactory = void 0;
this.styleRendererFactory = void 0;
this.displayObjectPool = void 0;
this.canvasRendererPluginOptions = void 0;
this.rBush = void 0;
this.pathGeneratorFactoryCache = {};
this.styleRendererFactoryCache = {};
this.removedRBushNodeAABBs = [];
this.renderQueue = [];
this.restoreStack = [];
this.clearFullScreen = false;
this.vpMatrix = create();
this.dprMatrix = create();
this.tmpMat4 = create();
this.vec3a = create$1();
this.vec3b = create$1();
this.vec3c = create$1();
this.vec3d = create$1();
this.canvasConfig = canvasConfig;
this.camera = camera;
this.contextService = contextService;
this.renderingContext = renderingContext;
this.pathGeneratorFactory = pathGeneratorFactory;
this.styleRendererFactory = styleRendererFactory;
this.displayObjectPool = displayObjectPool;
this.canvasRendererPluginOptions = canvasRendererPluginOptions;
this.rBush = rBush;
}
var _proto = CanvasRendererPlugin.prototype;
_proto.apply = function apply(renderingService) {
var _this = this;
var canvas = this.renderingContext.root.ownerDocument.defaultView;
var handleUnmounted = function handleUnmounted(e) {
var object = e.target; // remove r-bush node
// @ts-ignore
var rBushNode = object.rBushNode;
if (rBushNode.aabb) {
// save removed aabbs for dirty-rectangle rendering later
_this.removedRBushNodeAABBs.push(rBushNode.aabb);
}
};
var handleCulled = function handleCulled(e) {
var object = e.target; // @ts-ignore
var rBushNode = object.rBushNode;
if (rBushNode.aabb) {
// save removed aabbs for dirty-rectangle rendering later
_this.removedRBushNodeAABBs.push(rBushNode.aabb);
}
};
renderingService.hooks.init.tapPromise(CanvasRendererPlugin_1.tag, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
var dpr, _this$canvasConfig, width, height, context;
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_this.renderingContext.root.addEventListener(gLite.ElementEvent.UNMOUNTED, handleUnmounted);
_this.renderingContext.root.addEventListener(gLite.ElementEvent.CULLED, handleCulled); // clear fullscreen
dpr = _this.contextService.getDPR();
_this$canvasConfig = _this.canvasConfig, width = _this$canvasConfig.width, height = _this$canvasConfig.height;
context = _this.contextService.getContext();
_this.clearRect(context, 0, 0, width * dpr, height * dpr);
case 6:
case "end":
return _context.stop();
}
}
}, _callee);
})));
renderingService.hooks.destroy.tap(CanvasRendererPlugin_1.tag, function () {
_this.renderingContext.root.removeEventListener(gLite.ElementEvent.UNMOUNTED, handleUnmounted);
_this.renderingContext.root.removeEventListener(gLite.ElementEvent.CULLED, handleCulled);
});
renderingService.hooks.beginFrame.tap(CanvasRendererPlugin_1.tag, function () {
var context = _this.contextService.getContext();
var dpr = _this.contextService.getDPR();
var _this$canvasConfig2 = _this.canvasConfig,
width = _this$canvasConfig2.width,
height = _this$canvasConfig2.height;
var _this$canvasRendererP = _this.canvasRendererPluginOptions,
dirtyObjectNumThreshold = _this$canvasRendererP.dirtyObjectNumThreshold,
dirtyObjectRatioThreshold = _this$canvasRendererP.dirtyObjectRatioThreshold; // some heuristic conditions such as 80% object changed
var _renderingService$get = renderingService.getStats(),
total = _renderingService$get.total,
rendered = _renderingService$get.rendered;
var ratio = rendered / total;
_this.clearFullScreen = renderingService.disableDirtyRectangleRendering() || rendered > dirtyObjectNumThreshold && ratio > dirtyObjectRatioThreshold;
if (context) {
context.resetTransform();
if (_this.clearFullScreen) {
_this.clearRect(context, 0, 0, width * dpr, height * dpr);
}
}
});
var renderByZIndex = function renderByZIndex(object) {
if (object.isVisible() && !object.isCulled()) {
_this.renderDisplayObject(object, renderingService); // if we did a full screen rendering last frame
_this.saveDirtyAABB(object);
}
var sorted = object.sortable.sorted || object.childNodes; // should account for z-index
sorted.forEach(function (child) {
renderByZIndex(child);
});
}; // render at the end of frame
renderingService.hooks.endFrame.tap(CanvasRendererPlugin_1.tag, function () {
var context = _this.contextService.getContext(); // clear & clip dirty rectangle
var dpr = _this.contextService.getDPR();
fromScaling(_this.dprMatrix, fromValues(dpr, dpr, 1));
multiply(_this.vpMatrix, _this.dprMatrix, _this.camera.getOrthoMatrix());
if (_this.clearFullScreen) {
renderByZIndex(_this.renderingContext.root);
} else {
// merge removed AABB
var dirtyRenderBounds = _this.safeMergeAABB.apply(_this, [_this.mergeDirtyAABBs(_this.renderQueue)].concat(_this.removedRBushNodeAABBs.map(function (_ref2) {
var minX = _ref2.minX,
minY = _ref2.minY,
maxX = _ref2.maxX,
maxY = _ref2.maxY;
var aabb = new gLite.AABB();
aabb.setMinMax(fromValues(minX, minY, 0), fromValues(maxX, maxY, 0));
return aabb;
})));
_this.removedRBushNodeAABBs = [];
if (gLite.AABB.isEmpty(dirtyRenderBounds)) {
_this.renderQueue = [];
return;
}
var dirtyRect = _this.convertAABB2Rect(dirtyRenderBounds);
var x = dirtyRect.x,
y = dirtyRect.y,
width = dirtyRect.width,
height = dirtyRect.height;
var tl = transformMat4(_this.vec3a, fromValues(x, y, 0), _this.vpMatrix);
var tr = transformMat4(_this.vec3b, fromValues(x + width, y, 0), _this.vpMatrix);
var bl = transformMat4(_this.vec3c, fromValues(x, y + height, 0), _this.vpMatrix);
var br = transformMat4(_this.vec3d, fromValues(x + width, y + height, 0), _this.vpMatrix);
var minx = Math.min(tl[0], tr[0], br[0], bl[0]);
var miny = Math.min(tl[1], tr[1], br[1], bl[1]);
var maxx = Math.max(tl[0], tr[0], br[0], bl[0]);
var maxy = Math.max(tl[1], tr[1], br[1], bl[1]);
var ix = Math.floor(minx);
var iy = Math.floor(miny);
var iwidth = Math.ceil(maxx - minx);
var iheight = Math.ceil(maxy - miny);
context.save();
_this.clearRect(context, ix, iy, iwidth, iheight);
context.beginPath();
context.rect(ix, iy, iwidth, iheight);
context.clip(); // @see https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations
context.setTransform(_this.vpMatrix[0], _this.vpMatrix[1], _this.vpMatrix[4], _this.vpMatrix[5], _this.vpMatrix[12], _this.vpMatrix[13]); // draw dirty rectangle
var _this$canvasConfig$re = _this.canvasConfig.renderer.getConfig(),
enableDirtyRectangleRenderingDebug = _this$canvasConfig$re.enableDirtyRectangleRenderingDebug;
if (enableDirtyRectangleRenderingDebug) {
canvas.dispatchEvent(new gLite.CustomEvent(gLite.CanvasEvent.DIRTY_RECTANGLE, {
dirtyRect: {
x: ix,
y: iy,
width: iwidth,
height: iheight
}
}));
} // search objects intersect with dirty rectangle
var dirtyObjects = _this.searchDirtyObjects(dirtyRenderBounds); // do rendering
dirtyObjects // sort by z-index
.sort(function (a, b) {
return a.sortable.renderOrder - b.sortable.renderOrder;
}).forEach(function (object) {
// culled object should not be rendered
if (object && object.isVisible() && !object.isCulled()) {
_this.renderDisplayObject(object, renderingService);
}
});
context.restore(); // save dirty AABBs in last frame
_this.renderQueue.forEach(function (object) {
_this.saveDirtyAABB(object);
}); // clear queue
_this.renderQueue = [];
} // pop restore stack, eg. root -> parent -> child
_this.restoreStack.forEach(function () {
context.restore();
}); // clear restore stack
_this.restoreStack = [];
});
renderingService.hooks.render.tap(CanvasRendererPlugin_1.tag, function (object) {
if (!_this.clearFullScreen) {
// render at the end of frame
_this.renderQueue.push(object);
}
});
};
_proto.clearRect = function clearRect(context, x, y, width, height) {
// clearRect is faster than fillRect @see https://stackoverflow.com/a/30830253
context.clearRect(x, y, width, height);
var background = this.canvasConfig.background;
if (background) {
context.fillStyle = background;
context.fillRect(x, y, width, height);
}
};
_proto.renderDisplayObject = function renderDisplayObject(object, renderingService) {
var context = this.contextService.getContext();
var nodeName = object.nodeName; // restore to its ancestor
var parent = this.restoreStack[this.restoreStack.length - 1];
if (parent && !(object.compareDocumentPosition(parent) & Node.DOCUMENT_POSITION_CONTAINS)) {
context.restore();
this.restoreStack.pop();
} // while (parent && object.parentNode !== parent) {
// context.restore();
// this.restoreStack.pop();
// parent = this.restoreStack[this.restoreStack.length - 1];
// }
if (this.styleRendererFactoryCache[nodeName] === undefined) {
this.styleRendererFactoryCache[nodeName] = this.styleRendererFactory(nodeName);
}
var styleRenderer = this.styleRendererFactoryCache[nodeName];
if (this.pathGeneratorFactoryCache[nodeName] === undefined) {
this.pathGeneratorFactoryCache[nodeName] = this.pathGeneratorFactory(nodeName);
}
var generatePath = this.pathGeneratorFactoryCache[nodeName]; // clip path
var clipPathShape = object.parsedStyle.clipPath;
if (clipPathShape) {
this.applyWorldTransform(context, clipPathShape, object.getWorldTransform()); // generate path in local space
if (this.pathGeneratorFactoryCache[clipPathShape.nodeName] === undefined) {
this.pathGeneratorFactoryCache[clipPathShape.nodeName] = this.pathGeneratorFactory(clipPathShape.nodeName);
}
var _generatePath = this.pathGeneratorFactoryCache[clipPathShape.nodeName];
if (_generatePath) {
context.save(); // save clip
this.restoreStack.push(object);
context.beginPath();
_generatePath(context, clipPathShape.parsedStyle);
context.closePath();
context.clip();
}
} // fill & stroke
if (styleRenderer) {
this.applyWorldTransform(context, object);
context.save(); // apply attributes to context
this.applyAttributesToContext(context, object);
}
if (generatePath) {
context.beginPath();
generatePath(context, object.parsedStyle);
if (object.nodeName !== gLite.Shape.LINE && object.nodeName !== gLite.Shape.PATH && object.nodeName !== gLite.Shape.POLYLINE) {
context.closePath();
}
} // fill & stroke
if (styleRenderer) {
styleRenderer.render(context, object.parsedStyle, object, renderingService); // restore applied attributes, eg. shadowBlur shadowColor...
context.restore();
} // finish rendering, clear dirty flag
object.renderable.dirty = false;
};
_proto.convertAABB2Rect = function convertAABB2Rect(aabb) {
var min = aabb.getMin();
var max = aabb.getMax(); // expand the rectangle a bit to avoid artifacts
// @see https://www.yuque.com/antv/ou292n/bi8nix#ExvCu
var minX = Math.floor(min[0]);
var minY = Math.floor(min[1]);
var maxX = Math.ceil(max[0]);
var maxY = Math.ceil(max[1]);
var width = maxX - minX;
var height = maxY - minY;
return {
x: minX,
y: minY,
width: width,
height: height
};
}
/**
* TODO: merge dirty rectangles with some strategies.
* For now, we just simply merge all the rectangles into one.
* @see https://idom.me/articles/841.html
*/
;
_proto.mergeDirtyAABBs = function mergeDirtyAABBs(dirtyObjects) {
// merge into a big AABB
// TODO: skip descendant if ancestor is caculated, but compareNodePosition is really slow
var aabb = new gLite.AABB();
dirtyObjects.forEach(function (object) {
var renderBounds = object.getRenderBounds();
aabb.add(renderBounds);
var dirtyRenderBounds = object.renderable.dirtyRenderBounds;
if (dirtyRenderBounds) {
aabb.add(dirtyRenderBounds);
}
});
return aabb;
};
_proto.searchDirtyObjects = function searchDirtyObjects(dirtyRectangle) {
var _this2 = this;
// search in r-tree, get all affected nodes
var _dirtyRectangle$getMi = dirtyRectangle.getMin(),
minX = _dirtyRectangle$getMi[0],
minY = _dirtyRectangle$getMi[1];
var _dirtyRectangle$getMa = dirtyRectangle.getMax(),
maxX = _dirtyRectangle$getMa[0],
maxY = _dirtyRectangle$getMa[1];
var rBushNodes = this.rBush.search({
minX: minX,
minY: minY,
maxX: maxX,
maxY: maxY
});
return rBushNodes.map(function (_ref3) {
var id = _ref3.id;
return _this2.displayObjectPool.getByEntity(id);
});
};
_proto.saveDirtyAABB = function saveDirtyAABB(object) {
var renderable = object.renderable;
if (!renderable.dirtyRenderBounds) {
renderable.dirtyRenderBounds = new gLite.AABB();
}
var renderBounds = object.getRenderBounds();
if (renderBounds) {
// save last dirty aabb
renderable.dirtyRenderBounds.update(renderBounds.center, renderBounds.halfExtents);
}
}
/**
* TODO: batch the same global attributes
*/
;
_proto.applyAttributesToContext = function applyAttributesToContext(context, object) {
var _object$parsedStyle = object.parsedStyle,
stroke = _object$parsedStyle.stroke,
fill = _object$parsedStyle.fill,
opacity = _object$parsedStyle.opacity,
lineDash = _object$parsedStyle.lineDash,
lineDashOffset = _object$parsedStyle.lineDashOffset; // @see https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setLineDash
if (lineDash) {
context.setLineDash(lineDash);
} // @see https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
if (!util.isNil(lineDashOffset)) {
context.lineDashOffset = lineDashOffset;
}
if (!util.isNil(opacity)) {
context.globalAlpha *= opacity;
}
if (!util.isNil(stroke) && !Array.isArray(stroke) && !stroke.isNone) {
context.strokeStyle = object.attributes.stroke;
}
if (!util.isNil(fill) && !Array.isArray(fill) && !fill.isNone) {
context.fillStyle = object.attributes.fill;
}
};
_proto.applyWorldTransform = function applyWorldTransform(context, object, matrix) {
var tx = 0;
var ty = 0;
var _ref4 = object.parsedStyle || {},
anchor = _ref4.anchor;
var anchorX = anchor && anchor[0] || 0;
var anchorY = anchor && anchor[1] || 0;
if (anchorX !== 0 || anchorY !== 0) {
var bounds = object.getGeometryBounds();
var width = bounds && bounds.halfExtents[0] * 2 || 0;
var height = bounds && bounds.halfExtents[1] * 2 || 0;
tx = -(anchorX * width);
ty = -(anchorY * height);
} // apply clip shape's RTS
if (matrix) {
copy(this.tmpMat4, object.getLocalTransform());
this.vec3a[0] = tx;
this.vec3a[1] = ty;
this.vec3a[2] = 0;
translate(this.tmpMat4, this.tmpMat4, this.vec3a);
multiply(this.tmpMat4, matrix, this.tmpMat4);
multiply(this.tmpMat4, this.vpMatrix, this.tmpMat4);
} else {
// apply RTS transformation in world space
copy(this.tmpMat4, object.getWorldTransform());
this.vec3a[0] = tx;
this.vec3a[1] = ty;
this.vec3a[2] = 0;
translate(this.tmpMat4, this.tmpMat4, this.vec3a);
multiply(this.tmpMat4, this.vpMatrix, this.tmpMat4);
} // @see https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations
context.setTransform(this.tmpMat4[0], this.tmpMat4[1], this.tmpMat4[4], this.tmpMat4[5], this.tmpMat4[12], this.tmpMat4[13]);
};
_proto.safeMergeAABB = function safeMergeAABB() {
var merged = new gLite.AABB();
for (var _len = arguments.length, aabbs = new Array(_len), _key = 0; _key < _len; _key++) {
aabbs[_key] = arguments[_key];
}
aabbs.forEach(function (aabb) {
merged.add(aabb);
});
return merged;
};
return CanvasRendererPlugin;
}(), _class.tag = 'CanvasRenderer', _class);
CanvasRendererPlugin = CanvasRendererPlugin_1 = tslib.__decorate([gLite.singleton({
contrib: gLite.RenderingPluginContribution
}), tslib.__param(0, gLite.inject(gLite.CanvasConfig)), tslib.__param(1, gLite.inject(gLite.DefaultCamera)), tslib.__param(2, gLite.inject(gLite.ContextService)), tslib.__param(3, gLite.inject(gLite.RenderingContext)), tslib.__param(4, gLite.inject(gPluginCanvasPathGenerator.PathGeneratorFactory)), tslib.__param(5, gLite.inject(StyleRendererFactory)), tslib.__param(6, gLite.inject(gLite.DisplayObjectPool)), tslib.__param(7, gLite.inject(CanvasRendererPluginOptions)), tslib.__param(8, gLite.inject(gLite.RBushRoot))], CanvasRendererPlugin);
var containerModule = gLite.Module(function (register) {
var _shape2Token;
register(exports.CircleRenderer);
register(exports.EllipseRenderer);
register(exports.RectRenderer);
register(exports.ImageRenderer);
register(exports.TextRenderer);
register(exports.LineRenderer);
register(exports.PolylineRenderer);
register(exports.PolygonRenderer);
register(exports.PathRenderer);
var shape2Token = (_shape2Token = {}, _shape2Token[gLite.Shape.CIRCLE] = CircleRendererContribution, _shape2Token[gLite.Shape.ELLIPSE] = EllipseRendererContribution, _shape2Token[gLite.Shape.RECT] = RectRendererContribution, _shape2Token[gLite.Shape.IMAGE] = ImageRendererContribution, _shape2Token[gLite.Shape.TEXT] = TextRendererContribution, _shape2Token[gLite.Shape.LINE] = LineRendererContribution, _shape2Token[gLite.Shape.POLYLINE] = PolylineRendererContribution, _shape2Token[gLite.Shape.POLYGON] = PolygonRendererContribution, _shape2Token[gLite.Shape.PATH] = PathRendererContribution, _shape2Token);
register({
token: StyleRendererFactory,
useFactory: function useFactory(ctx) {
return function (tagName) {
var token = shape2Token[tagName];
if (token && ctx.container.isBound(token)) {
return ctx.container.get(token);
}
return null;
};
}
});
register(CanvasRendererPlugin);
});
var Plugin = /*#__PURE__*/function (_AbstractRendererPlug) {

@@ -1860,14 +1720,26 @@ _inheritsLoose(Plugin, _AbstractRendererPlug);

_proto.init = function init() {
this.container.register(CanvasRendererPluginOptions, {
useValue: _extends({
dirtyObjectNumThreshold: 500,
dirtyObjectRatioThreshold: 0.8
}, this.options)
});
this.container.load(containerModule, true);
var _defaultStyleRenderer;
var canvasRendererPluginOptions = _extends({
dirtyObjectNumThreshold: 500,
dirtyObjectRatioThreshold: 0.8
}, this.options); // @ts-ignore
var imagePool = this.context.imagePool;
var defaultRenderer = new DefaultRenderer(imagePool);
var defaultStyleRendererFactory = (_defaultStyleRenderer = {}, _defaultStyleRenderer[gLite.Shape.CIRCLE] = defaultRenderer, _defaultStyleRenderer[gLite.Shape.ELLIPSE] = defaultRenderer, _defaultStyleRenderer[gLite.Shape.RECT] = defaultRenderer, _defaultStyleRenderer[gLite.Shape.IMAGE] = new ImageRenderer(imagePool), _defaultStyleRenderer[gLite.Shape.TEXT] = new TextRenderer(), _defaultStyleRenderer[gLite.Shape.LINE] = defaultRenderer, _defaultStyleRenderer[gLite.Shape.POLYLINE] = defaultRenderer, _defaultStyleRenderer[gLite.Shape.POLYGON] = defaultRenderer, _defaultStyleRenderer[gLite.Shape.PATH] = defaultRenderer, _defaultStyleRenderer[gLite.Shape.GROUP] = undefined, _defaultStyleRenderer[gLite.Shape.HTML] = undefined, _defaultStyleRenderer[gLite.Shape.MESH] = undefined, _defaultStyleRenderer); // @ts-ignore
this.context.defaultStyleRendererFactory = defaultStyleRendererFactory; // @ts-ignore
this.context.styleRendererFactory = defaultStyleRendererFactory;
this.addRenderingPlugin(new CanvasRendererPlugin(canvasRendererPluginOptions));
};
_proto.destroy = function destroy() {
this.container.unload(containerModule);
this.container.remove(CanvasRendererPluginOptions);
this.removeAllRenderingPlugins(); // @ts-ignore
delete this.context.defaultStyleRendererFactory; // @ts-ignore
delete this.context.styleRendererFactory;
};

@@ -1878,12 +1750,11 @@

exports.CircleRendererContribution = CircleRendererContribution;
exports.EllipseRendererContribution = EllipseRendererContribution;
exports.ImageRendererContribution = ImageRendererContribution;
exports.LineRendererContribution = LineRendererContribution;
exports.PathRendererContribution = PathRendererContribution;
exports.CircleRenderer = CircleRenderer;
exports.EllipseRenderer = EllipseRenderer;
exports.ImageRenderer = ImageRenderer;
exports.LineRenderer = LineRenderer;
exports.PathRenderer = PathRenderer;
exports.Plugin = Plugin;
exports.PolygonRendererContribution = PolygonRendererContribution;
exports.PolylineRendererContribution = PolylineRendererContribution;
exports.RectRendererContribution = RectRendererContribution;
exports.StyleRendererFactory = StyleRendererFactory;
exports.TextRendererContribution = TextRendererContribution;
exports.PolygonRenderer = PolygonRenderer;
exports.PolylineRenderer = PolylineRenderer;
exports.RectRenderer = RectRenderer;
exports.TextRenderer = TextRenderer;

4

dist/index.umd.min.js
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@antv/g-lite")):"function"==typeof define&&define.amd?define(["exports","@antv/g-lite"],e):e(((t="undefined"!=typeof globalThis?globalThis:t||self).G=t.G||{},t.G.CanvasRenderer={}),t.window.G)}(this,(function(t,e){"use strict";function r(){
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
r=function(){return t};var t={},e=Object.prototype,n=e.hasOwnProperty,i="function"==typeof Symbol?Symbol:{},o=i.iterator||"@@iterator",a=i.asyncIterator||"@@asyncIterator",c=i.toStringTag||"@@toStringTag";function s(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{s({},"")}catch(t){s=function(t,e,r){return t[e]=r}}function h(t,e,r,n){var i=Object.create((e&&e.prototype instanceof f?e:f).prototype),o=new C(n||[]);return i._invoke=function(t,e,r){var n="suspendedStart";return function(i,o){if("executing"===n)throw new Error("Generator is already running");if("completed"===n){if("throw"===i)throw o;return R()}for(r.method=i,r.arg=o;;){var a=r.delegate;if(a){var c=b(a,r);if(c){if(c===u)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if("suspendedStart"===n)throw n="completed",r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n="executing";var s=l(t,e,r);if("normal"===s.type){if(n=r.done?"completed":"suspendedYield",s.arg===u)continue;return{value:s.arg,done:r.done}}"throw"===s.type&&(n="completed",r.method="throw",r.arg=s.arg)}}}(t,r,o),i}function l(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}t.wrap=h;var u={};function f(){}function d(){}function p(){}var v={};s(v,o,(function(){return this}));var g=Object.getPrototypeOf,y=g&&g(g(M([])));y&&y!==e&&n.call(y,o)&&(v=y);var m=p.prototype=f.prototype=Object.create(v);function w(t){["next","throw","return"].forEach((function(e){s(t,e,(function(t){return this._invoke(e,t)}))}))}function x(t,e){function r(i,o,a,c){var s=l(t[i],t,o);if("throw"!==s.type){var h=s.arg,u=h.value;return u&&"object"==typeof u&&n.call(u,"__await")?e.resolve(u.__await).then((function(t){r("next",t,a,c)}),(function(t){r("throw",t,a,c)})):e.resolve(u).then((function(t){h.value=t,a(h)}),(function(t){return r("throw",t,a,c)}))}c(s.arg)}var i;this._invoke=function(t,n){function o(){return new e((function(e,i){r(t,n,e,i)}))}return i=i?i.then(o,o):o()}}function b(t,e){var r=t.iterator[e.method];if(void 0===r){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,b(t,e),"throw"===e.method))return u;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return u}var n=l(r,t.iterator,e.arg);if("throw"===n.type)return e.method="throw",e.arg=n.arg,e.delegate=null,u;var i=n.arg;return i?i.done?(e[t.resultName]=i.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,u):i:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,u)}function E(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function S(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function C(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(E,this),this.reset(!0)}function M(t){if(t){var e=t[o];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var r=-1,i=function e(){for(;++r<t.length;)if(n.call(t,r))return e.value=t[r],e.done=!1,e;return e.value=void 0,e.done=!0,e};return i.next=i}}return{next:R}}function R(){return{value:void 0,done:!0}}return d.prototype=p,s(m,"constructor",p),s(p,"constructor",d),d.displayName=s(p,c,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===d||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,p):(t.__proto__=p,s(t,c,"GeneratorFunction")),t.prototype=Object.create(m),t},t.awrap=function(t){return{__await:t}},w(x.prototype),s(x.prototype,a,(function(){return this})),t.AsyncIterator=x,t.async=function(e,r,n,i,o){void 0===o&&(o=Promise);var a=new x(h(e,r,n,i),o);return t.isGeneratorFunction(r)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},w(m),s(m,c,"Generator"),s(m,o,(function(){return this})),s(m,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var e=[];for(var r in t)e.push(r);return e.reverse(),function r(){for(;e.length;){var n=e.pop();if(n in t)return r.value=n,r.done=!1,r}return r.done=!0,r}},t.values=M,C.prototype={constructor:C,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(S),!t)for(var e in this)"t"===e.charAt(0)&&n.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function r(r,n){return a.type="throw",a.arg=t,e.next=r,n&&(e.method="next",e.arg=void 0),!!n}for(var i=this.tryEntries.length-1;i>=0;--i){var o=this.tryEntries[i],a=o.completion;if("root"===o.tryLoc)return r("end");if(this.prev>=o.tryLoc){var c=n.call(o,"catchLoc"),s=n.call(o,"finallyLoc");if(c&&s){if(o.catchLoc>this.prev)return r(o.catchLoc,!0);if(o.finallyLoc>this.prev)return r(o.finallyLoc)}else if(c){if(o.catchLoc>this.prev)return r(o.catchLoc,!0)}else{if(!s)throw new Error("try statement without catch or finally");if(o.finallyLoc>this.prev)return r(o.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var i=this.tryEntries[r];if(this.prev>=i.tryLoc&&n.call(i,"finallyLoc")&&i.finallyLoc>this.prev){var o=i;break}}o&&("break"===t||"continue"===t)&&e>=o.tryLoc&&o.finallyLoc>=e&&(o=null);var a=o?o.completion:{};return a.type=t,a.arg=e,o?(this.method="next",this.next=o.finallyLoc,u):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),u},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),S(r),u}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var i=n.arg;S(r)}return i}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:M(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=void 0),u}},t}function n(t,e,r,n,i,o,a){try{var c=t[o](a),s=c.value}catch(t){return void r(t)}c.done?e(s):Promise.resolve(s).then(n,i)}function i(t){return function(){var e=this,r=arguments;return new Promise((function(i,o){var a=t.apply(e,r);function c(t){n(a,i,o,c,s,"next",t)}function s(t){n(a,i,o,c,s,"throw",t)}c(void 0)}))}}function o(){return o=Object.assign?Object.assign.bind():function(t){for(var e=1;arguments.length>e;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t},o.apply(this,arguments)}function a(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,c(t,e)}function c(t,e){return c=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},c(t,e)}function s(t,e,r,n){var i,o=arguments.length,a=3>o?e:null===n?n=Object.getOwnPropertyDescriptor(e,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,r,n);else for(var c=t.length-1;c>=0;c--)(i=t[c])&&(a=(3>o?i(a):o>3?i(e,r,a):i(e,r))||a);return o>3&&a&&Object.defineProperty(e,r,a),a}function h(t,e){return function(r,n){e(r,n,t)}}var l="undefined"!=typeof Float32Array?Float32Array:Array;function u(){var t=new l(16);return l!=Float32Array&&(t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[11]=0,t[12]=0,t[13]=0,t[14]=0),t[0]=1,t[5]=1,t[10]=1,t[15]=1,t}function f(t,e){return t[0]=e[0],t[1]=e[1],t[2]=e[2],t[3]=e[3],t[4]=e[4],t[5]=e[5],t[6]=e[6],t[7]=e[7],t[8]=e[8],t[9]=e[9],t[10]=e[10],t[11]=e[11],t[12]=e[12],t[13]=e[13],t[14]=e[14],t[15]=e[15],t}function d(t,e,r){var n=e[0],i=e[1],o=e[2],a=e[3],c=e[4],s=e[5],h=e[6],l=e[7],u=e[8],f=e[9],d=e[10],p=e[11],v=e[12],g=e[13],y=e[14],m=e[15],w=r[0],x=r[1],b=r[2],E=r[3];return t[0]=w*n+x*c+b*u+E*v,t[1]=w*i+x*s+b*f+E*g,t[2]=w*o+x*h+b*d+E*y,t[3]=w*a+x*l+b*p+E*m,t[4]=(w=r[4])*n+(x=r[5])*c+(b=r[6])*u+(E=r[7])*v,t[5]=w*i+x*s+b*f+E*g,t[6]=w*o+x*h+b*d+E*y,t[7]=w*a+x*l+b*p+E*m,t[8]=(w=r[8])*n+(x=r[9])*c+(b=r[10])*u+(E=r[11])*v,t[9]=w*i+x*s+b*f+E*g,t[10]=w*o+x*h+b*d+E*y,t[11]=w*a+x*l+b*p+E*m,t[12]=(w=r[12])*n+(x=r[13])*c+(b=r[14])*u+(E=r[15])*v,t[13]=w*i+x*s+b*f+E*g,t[14]=w*o+x*h+b*d+E*y,t[15]=w*a+x*l+b*p+E*m,t}function p(t,e,r){var n,i,o,a,c,s,h,l,u,f,d,p,v=r[0],g=r[1],y=r[2];return e===t?(t[12]=e[0]*v+e[4]*g+e[8]*y+e[12],t[13]=e[1]*v+e[5]*g+e[9]*y+e[13],t[14]=e[2]*v+e[6]*g+e[10]*y+e[14],t[15]=e[3]*v+e[7]*g+e[11]*y+e[15]):(i=e[1],o=e[2],a=e[3],c=e[4],s=e[5],h=e[6],l=e[7],u=e[8],f=e[9],d=e[10],p=e[11],t[0]=n=e[0],t[1]=i,t[2]=o,t[3]=a,t[4]=c,t[5]=s,t[6]=h,t[7]=l,t[8]=u,t[9]=f,t[10]=d,t[11]=p,t[12]=n*v+c*g+u*y+e[12],t[13]=i*v+s*g+f*y+e[13],t[14]=o*v+h*g+d*y+e[14],t[15]=a*v+l*g+p*y+e[15]),t}function v(){var t=new l(3);return l!=Float32Array&&(t[0]=0,t[1]=0,t[2]=0),t}function g(t,e,r){var n=new l(3);return n[0]=t,n[1]=e,n[2]=r,n}function y(t,e,r){var n=e[0],i=e[1],o=e[2],a=r[3]*n+r[7]*i+r[11]*o+r[15];return t[0]=(r[0]*n+r[4]*i+r[8]*o+r[12])/(a=a||1),t[1]=(r[1]*n+r[5]*i+r[9]*o+r[13])/a,t[2]=(r[2]*n+r[6]*i+r[10]*o+r[14])/a,t}Math.hypot||(Math.hypot=function(){for(var t=0,e=arguments.length;e--;)t+=arguments[e]*arguments[e];return Math.sqrt(t)});m=v();var m,w={}.toString,x=function(t){return null==t},b=function(t){return e="String",w.call(t)==="[object "+e+"]";var e},E=e.Syringe.defineToken(""),S=e.Syringe.defineToken("");function C(t,e){var r=e.r;t.arc(r,r,r,0,2*Math.PI,!1)}function M(t,e){var r=e.rx,n=e.ry;if(t.ellipse)t.ellipse(r,n,r,n,0,0,2*Math.PI,!1);else{var i=r>n?r:n,o=r>n?1:r/n,a=r>n?n/r:1;t.save(),t.scale(o,a),t.arc(0,0,i,0,2*Math.PI)}}function R(t,r){var n,i,o=r.x1,a=r.y1,c=r.x2,s=r.y2,h=r.defX,l=void 0===h?0:h,u=r.defY,f=void 0===u?0:u,d=r.markerStart,p=r.markerEnd,v=r.markerStartOffset,g=r.markerEndOffset,y=0,m=0,w=0,x=0,b=0;d&&d instanceof e.DisplayObject&&v&&(n=c-o,i=s-a,b=Math.atan2(i,n),y=Math.cos(b)*(v||0),m=Math.sin(b)*(v||0)),p&&p instanceof e.DisplayObject&&g&&(n=o-c,i=a-s,b=Math.atan2(i,n),w=Math.cos(b)*(g||0),x=Math.sin(b)*(g||0)),t.moveTo(o-l+y,a-f+m),t.lineTo(c-l+w,s-f+x)}function P(t,r){var n=r.defX,i=void 0===n?0:n,o=r.defY,a=void 0===o?0:o,c=r.markerStart,s=r.markerEnd,h=r.markerStartOffset,l=r.markerEndOffset,u=r.path,f=u.zCommandIndexes,d=[].concat(u.curve);f.forEach((function(t,e){d.splice(t+e+1,0,["Z"])}));var p,v,g=d.length&&"Z"===d[d.length-1][0],y=0,m=0,w=0,x=0,b=0;if(c&&c instanceof e.DisplayObject&&h){var E=c.parentNode.getStartTangent(),S=E[0],C=E[1];p=S[0]-C[0],v=S[1]-C[1],b=Math.atan2(v,p),y=Math.cos(b)*(h||0),m=Math.sin(b)*(h||0)}if(s&&s instanceof e.DisplayObject&&l){var M=s.parentNode.getEndTangent(),R=M[0],P=M[1];p=R[0]-P[0],v=R[1]-P[1],b=Math.atan2(v,p),w=Math.cos(b)*(l||0),x=Math.sin(b)*(l||0)}for(var O=0;d.length>O;O++){var k=d[O];switch(k[0]){case"M":t.moveTo(k[1]-i+y,k[2]-a+m);break;case"C":t.bezierCurveTo(k[1]-i,k[2]-a,k[3]-i,k[4]-a,k[5]-i+(O===d.length-(g?2:1)?w:0),k[6]-a+(O===d.length-(g?2:1)?x:0));break;case"Z":t.closePath()}}}function O(t,r){var n,i,o=r.defX,a=void 0===o?0:o,c=r.defY,s=void 0===c?0:c,h=r.markerStart,l=r.markerEnd,u=r.markerStartOffset,f=r.markerEndOffset,d=r.points.points,p=d.length,v=d[0][0]-a,g=d[0][1]-s,y=d[p-1][0]-a,m=d[p-1][1]-s,w=0,x=0,b=0,E=0,S=0;h&&h instanceof e.DisplayObject&&u&&(n=d[1][0]-d[0][0],i=d[1][1]-d[0][1],S=Math.atan2(i,n),w=Math.cos(S)*(u||0),x=Math.sin(S)*(u||0)),l&&l instanceof e.DisplayObject&&f&&(n=d[p-1][0]-d[0][0],i=d[p-1][1]-d[0][1],S=Math.atan2(i,n),b=Math.cos(S)*(f||0),E=Math.sin(S)*(f||0)),t.moveTo(v+(w||b),g+(x||E));for(var C=1;p-1>C;C++){var M=d[C];t.lineTo(M[0]-a,M[1]-s)}t.lineTo(y,m)}function k(t,r){var n,i,o=r.defX,a=void 0===o?0:o,c=r.defY,s=void 0===c?0:c,h=r.markerStart,l=r.markerEnd,u=r.markerStartOffset,f=r.markerEndOffset,d=r.points.points,p=d.length,v=d[0][0]-a,g=d[0][1]-s,y=d[p-1][0]-a,m=d[p-1][1]-s,w=0,x=0,b=0,E=0,S=0;h&&h instanceof e.DisplayObject&&u&&(n=d[1][0]-d[0][0],i=d[1][1]-d[0][1],S=Math.atan2(i,n),w=Math.cos(S)*(u||0),x=Math.sin(S)*(u||0)),l&&l instanceof e.DisplayObject&&f&&(n=d[p-2][0]-d[p-1][0],i=d[p-2][1]-d[p-1][1],S=Math.atan2(i,n),b=Math.cos(S)*(f||0),E=Math.sin(S)*(f||0)),t.moveTo(v+w,g+x);for(var C=1;p-1>C;C++){var M=d[C];t.lineTo(M[0]-a,M[1]-s)}t.lineTo(y+b,m+E)}function L(t,e){var r=e.radius,n=e.width,i=e.height,o=n,a=i;if(r&&r.some((function(t){return 0!==t}))){var c=n>0?1:-1,s=i>0?1:-1,h=c+s===0,l=r.map((function(t){return e=t,r=0,n=Math.min(Math.abs(o)/2,Math.abs(a)/2),r>e?r:e>n?n:e;var e,r,n})),u=l[0],f=l[1],d=l[2],p=l[3];t.moveTo(c*u,0),t.lineTo(o-c*f,0),0!==f&&t.arc(o-c*f,s*f,f,-s*Math.PI/2,c>0?0:Math.PI,h),t.lineTo(o,a-s*d),0!==d&&t.arc(o-c*d,a-s*d,d,c>0?0:Math.PI,s>0?Math.PI/2:1.5*Math.PI,h),t.lineTo(c*p,a),0!==p&&t.arc(c*p,a-s*p,p,s>0?Math.PI/2:-Math.PI/2,c>0?Math.PI:0,h),t.lineTo(0,s*u),0!==u&&t.arc(c*u,s*u,u,c>0?Math.PI:0,s>0?1.5*Math.PI:Math.PI/2,h)}else t.rect(0,0,o,a)}e.Module((function(t){t({token:{token:S,named:e.Shape.CIRCLE},useValue:C}),t({token:{token:S,named:e.Shape.ELLIPSE},useValue:M}),t({token:{token:S,named:e.Shape.RECT},useValue:L}),t({token:{token:S,named:e.Shape.LINE},useValue:R}),t({token:{token:S,named:e.Shape.POLYLINE},useValue:k}),t({token:{token:S,named:e.Shape.POLYGON},useValue:O}),t({token:{token:S,named:e.Shape.PATH},useValue:P}),t({token:E,useFactory:function(t){return function(e){return t.container.isBoundNamed(S,e)?t.container.getNamed(S,e):null}}})}));var T=e.Syringe.defineToken(""),A=e.Syringe.defineToken("",{multiple:!1}),j=e.Syringe.defineToken("",{multiple:!1}),B=e.Syringe.defineToken("",{multiple:!1}),N=e.Syringe.defineToken("",{multiple:!1}),I=e.Syringe.defineToken("",{multiple:!1}),G=e.Syringe.defineToken("",{multiple:!1}),F=e.Syringe.defineToken("",{multiple:!1}),D=e.Syringe.defineToken("",{multiple:!1}),_=e.Syringe.defineToken("",{multiple:!1});function Y(){
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
Y=function(){return t};var t={},e=Object.prototype,r=e.hasOwnProperty,n="function"==typeof Symbol?Symbol:{},i=n.iterator||"@@iterator",o=n.asyncIterator||"@@asyncIterator",a=n.toStringTag||"@@toStringTag";function c(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{c({},"")}catch(t){c=function(t,e,r){return t[e]=r}}function s(t,e,r,n){var i=Object.create((e&&e.prototype instanceof u?e:u).prototype),o=new S(n||[]);return i._invoke=function(t,e,r){var n="suspendedStart";return function(i,o){if("executing"===n)throw new Error("Generator is already running");if("completed"===n){if("throw"===i)throw o;return M()}for(r.method=i,r.arg=o;;){var a=r.delegate;if(a){var c=x(a,r);if(c){if(c===l)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if("suspendedStart"===n)throw n="completed",r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n="executing";var s=h(t,e,r);if("normal"===s.type){if(n=r.done?"completed":"suspendedYield",s.arg===l)continue;return{value:s.arg,done:r.done}}"throw"===s.type&&(n="completed",r.method="throw",r.arg=s.arg)}}}(t,r,o),i}function h(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}t.wrap=s;var l={};function u(){}function f(){}function d(){}var p={};c(p,i,(function(){return this}));var v=Object.getPrototypeOf,g=v&&v(v(C([])));g&&g!==e&&r.call(g,i)&&(p=g);var y=d.prototype=u.prototype=Object.create(p);function m(t){["next","throw","return"].forEach((function(e){c(t,e,(function(t){return this._invoke(e,t)}))}))}function w(t,e){function n(i,o,a,c){var s=h(t[i],t,o);if("throw"!==s.type){var l=s.arg,u=l.value;return u&&"object"==typeof u&&r.call(u,"__await")?e.resolve(u.__await).then((function(t){n("next",t,a,c)}),(function(t){n("throw",t,a,c)})):e.resolve(u).then((function(t){l.value=t,a(l)}),(function(t){return n("throw",t,a,c)}))}c(s.arg)}var i;this._invoke=function(t,r){function o(){return new e((function(e,i){n(t,r,e,i)}))}return i=i?i.then(o,o):o()}}function x(t,e){var r=t.iterator[e.method];if(void 0===r){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,x(t,e),"throw"===e.method))return l;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return l}var n=h(r,t.iterator,e.arg);if("throw"===n.type)return e.method="throw",e.arg=n.arg,e.delegate=null,l;var i=n.arg;return i?i.done?(e[t.resultName]=i.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,l):i:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,l)}function b(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function E(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function S(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(b,this),this.reset(!0)}function C(t){if(t){var e=t[i];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var n=-1,o=function e(){for(;++n<t.length;)if(r.call(t,n))return e.value=t[n],e.done=!1,e;return e.value=void 0,e.done=!0,e};return o.next=o}}return{next:M}}function M(){return{value:void 0,done:!0}}return f.prototype=d,c(y,"constructor",d),c(d,"constructor",f),f.displayName=c(d,a,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===f||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,d):(t.__proto__=d,c(t,a,"GeneratorFunction")),t.prototype=Object.create(y),t},t.awrap=function(t){return{__await:t}},m(w.prototype),c(w.prototype,o,(function(){return this})),t.AsyncIterator=w,t.async=function(e,r,n,i,o){void 0===o&&(o=Promise);var a=new w(s(e,r,n,i),o);return t.isGeneratorFunction(r)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},m(y),c(y,a,"Generator"),c(y,i,(function(){return this})),c(y,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var e=[];for(var r in t)e.push(r);return e.reverse(),function r(){for(;e.length;){var n=e.pop();if(n in t)return r.value=n,r.done=!1,r}return r.done=!0,r}},t.values=C,S.prototype={constructor:S,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(E),!t)for(var e in this)"t"===e.charAt(0)&&r.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function n(r,n){return a.type="throw",a.arg=t,e.next=r,n&&(e.method="next",e.arg=void 0),!!n}for(var i=this.tryEntries.length-1;i>=0;--i){var o=this.tryEntries[i],a=o.completion;if("root"===o.tryLoc)return n("end");if(this.prev>=o.tryLoc){var c=r.call(o,"catchLoc"),s=r.call(o,"finallyLoc");if(c&&s){if(o.catchLoc>this.prev)return n(o.catchLoc,!0);if(o.finallyLoc>this.prev)return n(o.finallyLoc)}else if(c){if(o.catchLoc>this.prev)return n(o.catchLoc,!0)}else{if(!s)throw new Error("try statement without catch or finally");if(o.finallyLoc>this.prev)return n(o.finallyLoc)}}}},abrupt:function(t,e){for(var n=this.tryEntries.length-1;n>=0;--n){var i=this.tryEntries[n];if(this.prev>=i.tryLoc&&r.call(i,"finallyLoc")&&i.finallyLoc>this.prev){var o=i;break}}o&&("break"===t||"continue"===t)&&e>=o.tryLoc&&o.finallyLoc>=e&&(o=null);var a=o?o.completion:{};return a.type=t,a.arg=e,o?(this.method="next",this.next=o.finallyLoc,l):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),l},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),E(r),l}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var i=n.arg;E(r)}return i}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:C(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=void 0),l}},t}function V(t,e,r,n,i,o,a){try{var c=t[o](a),s=c.value}catch(t){return void r(t)}c.done?e(s):Promise.resolve(s).then(n,i)}function X(t){return function(){var e=this,r=arguments;return new Promise((function(n,i){var o=t.apply(e,r);function a(t){V(o,n,i,a,c,"next",t)}function c(t){V(o,n,i,a,c,"throw",t)}a(void 0)}))}}var U,W,Q=function(){function t(t){this.canvasConfig=void 0,this.imageCache={},this.gradientCache={},this.patternCache={},this.canvasConfig=t}var r=t.prototype;return r.getImageSync=function(t,e){return this.imageCache[t]?e&&e():this.getOrCreateImage(t).then((function(){e&&e()})),this.imageCache[t]},r.getOrCreateImage=function(t){var r=this;if(this.imageCache[t])return Promise.resolve(this.imageCache[t]);var n=this.canvasConfig.createImage;return new Promise((function(i,o){var a;n?a=n(t):e.isBrowser&&(a=new window.Image),a&&(a.onload=function(){i(a)},a.onerror=function(t){o(t)},a.crossOrigin="Anonymous",a.src=t,r.imageCache[t]=a)}))},r.getOrCreatePatternSync=function(t,e,r){var n=this.generatePatternKey(t);if(n&&this.patternCache[n])return this.patternCache[n];var i,o=t.image,a=t.repetition,c=(i=b(o)?this.getImageSync(o,r):o)&&e.createPattern(i,a);return n&&c&&(this.patternCache[n]=c),c},r.getOrCreateGradient=function(t,r){var n=this.generateGradientKey(t),i=t.type,o=t.steps,a=t.width,c=t.height,s=t.cx,h=t.cy,l=t.size;if(this.gradientCache[n])return this.gradientCache[n];var u=null;if(i===e.GradientType.LinearGradient){var f=e.computeLinearGradient(a,c,t.angle);u=r.createLinearGradient(f.x1,f.y1,f.x2,f.y2)}else if(i===e.GradientType.RadialGradient){var d=e.computeRadialGradient(a,c,s,h,l),p=d.x,v=d.y;u=r.createRadialGradient(p,v,0,p,v,d.r)}return u&&(o.forEach((function(t){var r,n=t.offset;n.unit===e.UnitType.kPercentage&&(null===(r=u)||void 0===r||r.addColorStop(n.value/100,t.color.toString()))})),this.gradientCache[n]=u),this.gradientCache[n]},r.generateGradientKey=function(t){var e=t.width,r=t.height,n=t.steps,i=t.angle,o=t.cx,a=t.cy,c=t.size;return"gradient-"+t.type+"-"+((null==i?void 0:i.toString())||0)+"-"+((null==o?void 0:o.toString())||0)+"-"+((null==a?void 0:a.toString())||0)+"-"+((null==c?void 0:c.toString())||0)+"-"+e+"-"+r+"-"+n.map((function(t){return""+t.offset+t.color})).join("-")},r.generatePatternKey=function(t){var e=t.image,r=t.repetition;if(b(e))return"pattern-"+e+"-"+r},t}();Q=s([e.singleton(),h(0,e.inject(e.CanvasConfig))],Q);var H=(U=function(){function t(t,e){this.imagePool=void 0,this.renderingContext=void 0,this.imagePool=t,this.renderingContext=e}return t.prototype.apply=function(t){var r=this,n=function(n){var i=n.target;if(i.nodeName===e.Shape.IMAGE){var o=i.attributes.img;b(o)&&r.imagePool.getImageSync(o,(function(){i.renderable.dirty=!0,t.dirtify()}))}},i=function(n){var i=n.target,o=n.newValue;i.nodeName===e.Shape.IMAGE&&"img"===n.attrName&&b(o)&&r.imagePool.getOrCreateImage(o).then((function(){i.renderable.dirty=!0,t.dirtify()}))};t.hooks.init.tapPromise(W.tag,X(Y().mark((function t(){return Y().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:r.renderingContext.root.addEventListener(e.ElementEvent.MOUNTED,n),r.renderingContext.root.addEventListener(e.ElementEvent.ATTR_MODIFIED,i);case 2:case"end":return t.stop()}}),t)})))),t.hooks.destroy.tap(W.tag,(function(){r.renderingContext.root.removeEventListener(e.ElementEvent.MOUNTED,n),r.renderingContext.root.removeEventListener(e.ElementEvent.ATTR_MODIFIED,i)}))},t}(),U.tag="LoadImage",W=U);H=W=s([e.singleton({contrib:e.RenderingPluginContribution}),h(0,e.inject(Q)),h(1,e.inject(e.RenderingContext))],H);e.Module((function(t){t(Q),t(H)}));var z=function(){function t(t){this.imagePool=void 0,this.imagePool=t}var r=t.prototype;return r.render=function(t,r,n,i){var o=r.fill,a=r.fillRule,c=r.opacity,s=r.fillOpacity,h=r.stroke,l=r.strokeOpacity,u=r.lineWidth,f=r.lineCap,d=r.lineJoin,p=r.shadowType,v=r.shadowColor,g=r.shadowBlur,y=r.filter,m=r.miterLimit,w=!x(o)&&!o.isNone,b=!x(h)&&!h.isNone&&u>0,E=0===o.alpha,S=!(!y||!y.length),C=!x(v)&&g>0,M=n.nodeName,R="inner"===p,P=b&&C&&(M===e.Shape.PATH||M===e.Shape.LINE||M===e.Shape.POLYLINE||E||R);w&&(t.globalAlpha=c*s,P||J(n,t,C),this.fill(t,n,o,a,i),P||this.clearShadowAndFilter(t,S,C)),b&&(t.globalAlpha=c*l,t.lineWidth=u,x(m)||(t.miterLimit=m),x(f)||(t.lineCap=f),x(d)||(t.lineJoin=d),P&&(R&&(t.globalCompositeOperation="source-atop"),J(n,t,!0),R&&(this.stroke(t,n,h,i),t.globalCompositeOperation="source-over",this.clearShadowAndFilter(t,S,!0))),this.stroke(t,n,h,i))},r.clearShadowAndFilter=function(t,e,r){if(r&&(t.shadowColor="transparent",t.shadowBlur=0),e){var n=t.filter;!x(n)&&n.indexOf("drop-shadow")>-1&&(t.filter=n.replace(/drop-shadow\([^)]*\)/,"").trim()||"none")}},r.fill=function(t,r,n,i,o){var a=this;Array.isArray(n)?n.forEach((function(e){t.fillStyle=a.getColor(e,r,t),t.fill(i)})):(e.isPattern(n)&&(t.fillStyle=this.getPattern(n,r,t,o)),t.fill(i))},r.stroke=function(t,r,n,i){var o=this;Array.isArray(n)?n.forEach((function(e){t.strokeStyle=o.getColor(e,r,t),t.stroke()})):(e.isPattern(n)&&(t.strokeStyle=this.getPattern(n,r,t,i)),t.stroke())},r.getPattern=function(t,e,r,n){return this.imagePool.getOrCreatePatternSync(t,r,(function(){e.renderable.dirty=!0,n.dirtify()}))},r.getColor=function(t,r,n){var i;if(t.type===e.GradientType.LinearGradient||t.type===e.GradientType.RadialGradient){var a=r.getGeometryBounds();i=this.imagePool.getOrCreateGradient(o({type:t.type},t.value,{width:a&&2*a.halfExtents[0]||1,height:a&&2*a.halfExtents[1]||1}),n)}return i},t}();function J(t,e,r){var n=t.parsedStyle,i=n.filter,o=n.shadowColor,a=n.shadowBlur,c=n.shadowOffsetX,s=n.shadowOffsetY;i&&i.length&&(e.filter=t.style.filter),r&&(e.shadowColor=o.toString(),e.shadowBlur=a||0,e.shadowOffsetX=c||0,e.shadowOffsetY=s||0)}z=s([e.singleton(),h(0,e.inject(Q))],z),t.ImageRenderer=function(){function t(t){this.imagePool=void 0,this.imagePool=t}return t.prototype.render=function(t,e,r){var n,i=e.img,o=e.shadowColor,a=e.shadowBlur,c=e.width,s=e.height;if(b(i)?n=this.imagePool.getImageSync(i):(c||(c=i.width),s||(s=i.height),n=i),n){J(r,t,!x(o)&&a>0);try{t.drawImage(n,0,0,c,s)}catch(t){}}},t}(),t.ImageRenderer=s([e.singleton({token:_}),h(0,e.inject(Q))],t.ImageRenderer),t.TextRenderer=function(){function t(){}var e=t.prototype;return e.render=function(t,e,r){var n=e.lineWidth,i=e.textAlign,o=e.textBaseline,a=e.lineJoin,c=e.miterLimit,s=e.letterSpacing,h=e.stroke,l=e.fill,u=e.fillOpacity,f=e.strokeOpacity,d=e.opacity,p=e.metrics,v=e.dx,g=e.dy,y=e.shadowColor,m=e.shadowBlur,w=p.lines,b=p.height,E=p.lineHeight,S=p.lineMetrics;t.font=p.font,t.lineWidth=n,t.textAlign=i,t.textBaseline=o,t.lineJoin=a,x(c)||(t.miterLimit=c);var C=0;"middle"===o?C=-b/2-E/2:"bottom"===o||"alphabetic"===o||"ideographic"===o?C=-b:"top"!==o&&"hanging"!==o||(C=-E);var M=v||0;C+=g||0,J(r,t,!x(y)&&m>0);for(var R=0;w.length>R;R++){var P=n/2+M;C+=E,x(h)||h.isNone||!n||this.drawLetterSpacing(t,w[R],S[R],i,P,C,s,u,f,d,!0),x(l)||this.drawLetterSpacing(t,w[R],S[R],i,P,C,s,u,f,d)}},e.drawLetterSpacing=function(t,e,r,n,i,o,a,c,s,h,l){if(void 0===l&&(l=!1),0!==a){var u=t.textAlign;t.textAlign="left";var f=i;"center"===n?f=i-r.width/2:"right"!==n&&"end"!==n||(f=i-r.width);for(var d=Array.from(e),p=t.measureText(e).width,v=0,g=0;d.length>g;++g){var y=d[g];l?this.strokeText(t,y,f,o,s):this.fillText(t,y,f,o,c,h),f+=p-(v=t.measureText(e.substring(g+1)).width)+a,p=v}t.textAlign=u}else l?this.strokeText(t,e,i,o,s):this.fillText(t,e,i,o,c,h)},e.fillText=function(t,e,r,n,i,o){var a,c=!x(i)&&1!==i;c&&(a=t.globalAlpha,t.globalAlpha=i*o),t.fillText(e,r,n),c&&(t.globalAlpha=a)},e.strokeText=function(t,e,r,n,i){var o,a=!x(i)&&1!==i;a&&(o=t.globalAlpha,t.globalAlpha=i),t.strokeText(e,r,n),a&&(t.globalAlpha=o)},t}(),t.TextRenderer=s([e.singleton({token:D})],t.TextRenderer),t.RectRenderer=function(t){function e(){return t.apply(this,arguments)||this}return a(e,t),e}(z),t.RectRenderer=s([e.singleton({token:B})],t.RectRenderer),t.CircleRenderer=function(t){function e(){return t.apply(this,arguments)||this}return a(e,t),e}(z),t.CircleRenderer=s([e.singleton({token:A})],t.CircleRenderer),t.EllipseRenderer=function(t){function e(){return t.apply(this,arguments)||this}return a(e,t),e}(z),t.EllipseRenderer=s([e.singleton({token:j})],t.EllipseRenderer),t.LineRenderer=function(t){function e(){return t.apply(this,arguments)||this}return a(e,t),e}(z),t.LineRenderer=s([e.singleton({token:N})],t.LineRenderer),t.PolylineRenderer=function(t){function e(){return t.apply(this,arguments)||this}return a(e,t),e}(z),t.PolylineRenderer=s([e.singleton({token:I})],t.PolylineRenderer),t.PolygonRenderer=function(t){function e(){return t.apply(this,arguments)||this}return a(e,t),e}(z),t.PolygonRenderer=s([e.singleton({token:G})],t.PolygonRenderer),t.PathRenderer=function(t){function e(){return t.apply(this,arguments)||this}return a(e,t),e}(z),t.PathRenderer=s([e.singleton({token:F})],t.PathRenderer);var K,Z,q=e.Syringe.defineToken(""),$=(K=function(){function t(t,e,r,n,i,o,a,c,s){this.canvasConfig=void 0,this.camera=void 0,this.contextService=void 0,this.renderingContext=void 0,this.pathGeneratorFactory=void 0,this.styleRendererFactory=void 0,this.displayObjectPool=void 0,this.canvasRendererPluginOptions=void 0,this.rBush=void 0,this.pathGeneratorFactoryCache={},this.styleRendererFactoryCache={},this.removedRBushNodeAABBs=[],this.renderQueue=[],this.restoreStack=[],this.clearFullScreen=!1,this.vpMatrix=u(),this.dprMatrix=u(),this.tmpMat4=u(),this.vec3a=v(),this.vec3b=v(),this.vec3c=v(),this.vec3d=v(),this.canvasConfig=t,this.camera=e,this.contextService=r,this.renderingContext=n,this.pathGeneratorFactory=i,this.styleRendererFactory=o,this.displayObjectPool=a,this.canvasRendererPluginOptions=c,this.rBush=s}var n=t.prototype;return n.apply=function(t){var n=this,o=this.renderingContext.root.ownerDocument.defaultView,a=function(t){var e=t.target.rBushNode;e.aabb&&n.removedRBushNodeAABBs.push(e.aabb)},c=function(t){var e=t.target.rBushNode;e.aabb&&n.removedRBushNodeAABBs.push(e.aabb)};t.hooks.init.tapPromise(Z.tag,i(r().mark((function t(){var i,o,s,h,l;return r().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:n.renderingContext.root.addEventListener(e.ElementEvent.UNMOUNTED,a),n.renderingContext.root.addEventListener(e.ElementEvent.CULLED,c),i=n.contextService.getDPR(),s=(o=n.canvasConfig).width,h=o.height,l=n.contextService.getContext(),n.clearRect(l,0,0,s*i,h*i);case 6:case"end":return t.stop()}}),t)})))),t.hooks.destroy.tap(Z.tag,(function(){n.renderingContext.root.removeEventListener(e.ElementEvent.UNMOUNTED,a),n.renderingContext.root.removeEventListener(e.ElementEvent.CULLED,c)})),t.hooks.beginFrame.tap(Z.tag,(function(){var e=n.contextService.getContext(),r=n.contextService.getDPR(),i=n.canvasConfig,o=i.width,a=i.height,c=n.canvasRendererPluginOptions,s=c.dirtyObjectNumThreshold,h=c.dirtyObjectRatioThreshold,l=t.getStats(),u=l.rendered,f=u/l.total;n.clearFullScreen=t.disableDirtyRectangleRendering()||u>s&&f>h,e&&(e.resetTransform(),n.clearFullScreen&&n.clearRect(e,0,0,o*r,a*r))}));var s=function e(r){r.isVisible()&&!r.isCulled()&&(n.renderDisplayObject(r,t),n.saveDirtyAABB(r)),(r.sortable.sorted||r.childNodes).forEach((function(t){e(t)}))};t.hooks.endFrame.tap(Z.tag,(function(){var r,i,a=n.contextService.getContext(),c=n.contextService.getDPR();if(r=n.dprMatrix,i=g(c,c,1),r[0]=i[0],r[1]=0,r[2]=0,r[3]=0,r[4]=0,r[5]=i[1],r[6]=0,r[7]=0,r[8]=0,r[9]=0,r[10]=i[2],r[11]=0,r[12]=0,r[13]=0,r[14]=0,r[15]=1,d(n.vpMatrix,n.dprMatrix,n.camera.getOrthoMatrix()),n.clearFullScreen)s(n.renderingContext.root);else{var h=n.safeMergeAABB.apply(n,[n.mergeDirtyAABBs(n.renderQueue)].concat(n.removedRBushNodeAABBs.map((function(t){var r=t.minX,n=t.minY,i=t.maxX,o=t.maxY,a=new e.AABB;return a.setMinMax(g(r,n,0),g(i,o,0)),a}))));if(n.removedRBushNodeAABBs=[],e.AABB.isEmpty(h))return void(n.renderQueue=[]);var l=n.convertAABB2Rect(h),u=l.x,f=l.y,p=l.width,v=l.height,m=y(n.vec3a,g(u,f,0),n.vpMatrix),w=y(n.vec3b,g(u+p,f,0),n.vpMatrix),x=y(n.vec3c,g(u,f+v,0),n.vpMatrix),b=y(n.vec3d,g(u+p,f+v,0),n.vpMatrix),E=Math.min(m[0],w[0],b[0],x[0]),S=Math.min(m[1],w[1],b[1],x[1]),C=Math.max(m[0],w[0],b[0],x[0]),M=Math.max(m[1],w[1],b[1],x[1]),R=Math.floor(E),P=Math.floor(S),O=Math.ceil(C-E),k=Math.ceil(M-S);a.save(),n.clearRect(a,R,P,O,k),a.beginPath(),a.rect(R,P,O,k),a.clip(),a.setTransform(n.vpMatrix[0],n.vpMatrix[1],n.vpMatrix[4],n.vpMatrix[5],n.vpMatrix[12],n.vpMatrix[13]),n.canvasConfig.renderer.getConfig().enableDirtyRectangleRenderingDebug&&o.dispatchEvent(new e.CustomEvent(e.CanvasEvent.DIRTY_RECTANGLE,{dirtyRect:{x:R,y:P,width:O,height:k}})),n.searchDirtyObjects(h).sort((function(t,e){return t.sortable.renderOrder-e.sortable.renderOrder})).forEach((function(e){e&&e.isVisible()&&!e.isCulled()&&n.renderDisplayObject(e,t)})),a.restore(),n.renderQueue.forEach((function(t){n.saveDirtyAABB(t)})),n.renderQueue=[]}n.restoreStack.forEach((function(){a.restore()})),n.restoreStack=[]})),t.hooks.render.tap(Z.tag,(function(t){n.clearFullScreen||n.renderQueue.push(t)}))},n.clearRect=function(t,e,r,n,i){t.clearRect(e,r,n,i);var o=this.canvasConfig.background;o&&(t.fillStyle=o,t.fillRect(e,r,n,i))},n.renderDisplayObject=function(t,r){var n=this.contextService.getContext(),i=t.nodeName,o=this.restoreStack[this.restoreStack.length-1];!o||t.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_CONTAINS||(n.restore(),this.restoreStack.pop()),void 0===this.styleRendererFactoryCache[i]&&(this.styleRendererFactoryCache[i]=this.styleRendererFactory(i));var a=this.styleRendererFactoryCache[i];void 0===this.pathGeneratorFactoryCache[i]&&(this.pathGeneratorFactoryCache[i]=this.pathGeneratorFactory(i));var c=this.pathGeneratorFactoryCache[i],s=t.parsedStyle.clipPath;if(s){this.applyWorldTransform(n,s,t.getWorldTransform()),void 0===this.pathGeneratorFactoryCache[s.nodeName]&&(this.pathGeneratorFactoryCache[s.nodeName]=this.pathGeneratorFactory(s.nodeName));var h=this.pathGeneratorFactoryCache[s.nodeName];h&&(n.save(),this.restoreStack.push(t),n.beginPath(),h(n,s.parsedStyle),n.closePath(),n.clip())}a&&(this.applyWorldTransform(n,t),n.save(),this.applyAttributesToContext(n,t)),c&&(n.beginPath(),c(n,t.parsedStyle),t.nodeName!==e.Shape.LINE&&t.nodeName!==e.Shape.PATH&&t.nodeName!==e.Shape.POLYLINE&&n.closePath()),a&&(a.render(n,t.parsedStyle,t,r),n.restore()),t.renderable.dirty=!1},n.convertAABB2Rect=function(t){var e=t.getMin(),r=t.getMax(),n=Math.floor(e[0]),i=Math.floor(e[1]);return{x:n,y:i,width:Math.ceil(r[0])-n,height:Math.ceil(r[1])-i}},n.mergeDirtyAABBs=function(t){var r=new e.AABB;return t.forEach((function(t){var e=t.getRenderBounds();r.add(e);var n=t.renderable.dirtyRenderBounds;n&&r.add(n)})),r},n.searchDirtyObjects=function(t){var e=this,r=t.getMin(),n=r[0],i=r[1],o=t.getMax();return this.rBush.search({minX:n,minY:i,maxX:o[0],maxY:o[1]}).map((function(t){return e.displayObjectPool.getByEntity(t.id)}))},n.saveDirtyAABB=function(t){var r=t.renderable;r.dirtyRenderBounds||(r.dirtyRenderBounds=new e.AABB);var n=t.getRenderBounds();n&&r.dirtyRenderBounds.update(n.center,n.halfExtents)},n.applyAttributesToContext=function(t,e){var r=e.parsedStyle,n=r.stroke,i=r.fill,o=r.opacity,a=r.lineDash,c=r.lineDashOffset;a&&t.setLineDash(a),x(c)||(t.lineDashOffset=c),x(o)||(t.globalAlpha*=o),x(n)||Array.isArray(n)||n.isNone||(t.strokeStyle=e.attributes.stroke),x(i)||Array.isArray(i)||i.isNone||(t.fillStyle=e.attributes.fill)},n.applyWorldTransform=function(t,e,r){var n=0,i=0,o=(e.parsedStyle||{}).anchor,a=o&&o[0]||0,c=o&&o[1]||0;if(0!==a||0!==c){var s=e.getGeometryBounds();n=-a*(s&&2*s.halfExtents[0]||0),i=-c*(s&&2*s.halfExtents[1]||0)}r?(f(this.tmpMat4,e.getLocalTransform()),this.vec3a[0]=n,this.vec3a[1]=i,this.vec3a[2]=0,p(this.tmpMat4,this.tmpMat4,this.vec3a),d(this.tmpMat4,r,this.tmpMat4),d(this.tmpMat4,this.vpMatrix,this.tmpMat4)):(f(this.tmpMat4,e.getWorldTransform()),this.vec3a[0]=n,this.vec3a[1]=i,this.vec3a[2]=0,p(this.tmpMat4,this.tmpMat4,this.vec3a),d(this.tmpMat4,this.vpMatrix,this.tmpMat4)),t.setTransform(this.tmpMat4[0],this.tmpMat4[1],this.tmpMat4[4],this.tmpMat4[5],this.tmpMat4[12],this.tmpMat4[13])},n.safeMergeAABB=function(){for(var t=new e.AABB,r=arguments.length,n=new Array(r),i=0;r>i;i++)n[i]=arguments[i];return n.forEach((function(e){t.add(e)})),t},t}(),K.tag="CanvasRenderer",Z=K);$=Z=s([e.singleton({contrib:e.RenderingPluginContribution}),h(0,e.inject(e.CanvasConfig)),h(1,e.inject(e.DefaultCamera)),h(2,e.inject(e.ContextService)),h(3,e.inject(e.RenderingContext)),h(4,e.inject(E)),h(5,e.inject(T)),h(6,e.inject(e.DisplayObjectPool)),h(7,e.inject(q)),h(8,e.inject(e.RBushRoot))],$);var tt=e.Module((function(r){var n;r(t.CircleRenderer),r(t.EllipseRenderer),r(t.RectRenderer),r(t.ImageRenderer),r(t.TextRenderer),r(t.LineRenderer),r(t.PolylineRenderer),r(t.PolygonRenderer),r(t.PathRenderer);var i=((n={})[e.Shape.CIRCLE]=A,n[e.Shape.ELLIPSE]=j,n[e.Shape.RECT]=B,n[e.Shape.IMAGE]=_,n[e.Shape.TEXT]=D,n[e.Shape.LINE]=N,n[e.Shape.POLYLINE]=I,n[e.Shape.POLYGON]=G,n[e.Shape.PATH]=F,n);r({token:T,useFactory:function(t){return function(e){var r=i[e];return r&&t.container.isBound(r)?t.container.get(r):null}}}),r($)})),et=function(t){function e(e){var r;return void 0===e&&(e={}),(r=t.call(this)||this).options=void 0,r.name="canvas-renderer",r.options=e,r}a(e,t);var r=e.prototype;return r.init=function(){this.container.register(q,{useValue:o({dirtyObjectNumThreshold:500,dirtyObjectRatioThreshold:.8},this.options)}),this.container.load(tt,!0)},r.destroy=function(){this.container.unload(tt),this.container.remove(q)},e}(e.AbstractRendererPlugin);t.CircleRendererContribution=A,t.EllipseRendererContribution=j,t.ImageRendererContribution=_,t.LineRendererContribution=N,t.PathRendererContribution=F,t.Plugin=et,t.PolygonRendererContribution=G,t.PolylineRendererContribution=I,t.RectRendererContribution=B,t.StyleRendererFactory=T,t.TextRendererContribution=D,Object.defineProperty(t,"__esModule",{value:!0})}));
r=function(){return t};var t={},e=Object.prototype,n=e.hasOwnProperty,i="function"==typeof Symbol?Symbol:{},o=i.iterator||"@@iterator",a=i.asyncIterator||"@@asyncIterator",s=i.toStringTag||"@@toStringTag";function c(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{c({},"")}catch(t){c=function(t,e,r){return t[e]=r}}function h(t,e,r,n){var i=Object.create((e&&e.prototype instanceof f?e:f).prototype),o=new S(n||[]);return i._invoke=function(t,e,r){var n="suspendedStart";return function(i,o){if("executing"===n)throw new Error("Generator is already running");if("completed"===n){if("throw"===i)throw o;return B()}for(r.method=i,r.arg=o;;){var a=r.delegate;if(a){var s=b(a,r);if(s){if(s===u)continue;return s}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if("suspendedStart"===n)throw n="completed",r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n="executing";var c=l(t,e,r);if("normal"===c.type){if(n=r.done?"completed":"suspendedYield",c.arg===u)continue;return{value:c.arg,done:r.done}}"throw"===c.type&&(n="completed",r.method="throw",r.arg=c.arg)}}}(t,r,o),i}function l(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}t.wrap=h;var u={};function f(){}function d(){}function p(){}var v={};c(v,o,(function(){return this}));var y=Object.getPrototypeOf,g=y&&y(y(M([])));g&&g!==e&&n.call(g,o)&&(v=g);var m=p.prototype=f.prototype=Object.create(v);function w(t){["next","throw","return"].forEach((function(e){c(t,e,(function(t){return this._invoke(e,t)}))}))}function x(t,e){function r(i,o,a,s){var c=l(t[i],t,o);if("throw"!==c.type){var h=c.arg,u=h.value;return u&&"object"==typeof u&&n.call(u,"__await")?e.resolve(u.__await).then((function(t){r("next",t,a,s)}),(function(t){r("throw",t,a,s)})):e.resolve(u).then((function(t){h.value=t,a(h)}),(function(t){return r("throw",t,a,s)}))}s(c.arg)}var i;this._invoke=function(t,n){function o(){return new e((function(e,i){r(t,n,e,i)}))}return i=i?i.then(o,o):o()}}function b(t,e){var r=t.iterator[e.method];if(void 0===r){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,b(t,e),"throw"===e.method))return u;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return u}var n=l(r,t.iterator,e.arg);if("throw"===n.type)return e.method="throw",e.arg=n.arg,e.delegate=null,u;var i=n.arg;return i?i.done?(e[t.resultName]=i.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,u):i:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,u)}function A(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function E(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function S(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(A,this),this.reset(!0)}function M(t){if(t){var e=t[o];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var r=-1,i=function e(){for(;++r<t.length;)if(n.call(t,r))return e.value=t[r],e.done=!1,e;return e.value=void 0,e.done=!0,e};return i.next=i}}return{next:B}}function B(){return{value:void 0,done:!0}}return d.prototype=p,c(m,"constructor",p),c(p,"constructor",d),d.displayName=c(p,s,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===d||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,p):(t.__proto__=p,c(t,s,"GeneratorFunction")),t.prototype=Object.create(m),t},t.awrap=function(t){return{__await:t}},w(x.prototype),c(x.prototype,a,(function(){return this})),t.AsyncIterator=x,t.async=function(e,r,n,i,o){void 0===o&&(o=Promise);var a=new x(h(e,r,n,i),o);return t.isGeneratorFunction(r)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},w(m),c(m,s,"Generator"),c(m,o,(function(){return this})),c(m,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var e=[];for(var r in t)e.push(r);return e.reverse(),function r(){for(;e.length;){var n=e.pop();if(n in t)return r.value=n,r.done=!1,r}return r.done=!0,r}},t.values=M,S.prototype={constructor:S,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(E),!t)for(var e in this)"t"===e.charAt(0)&&n.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function r(r,n){return a.type="throw",a.arg=t,e.next=r,n&&(e.method="next",e.arg=void 0),!!n}for(var i=this.tryEntries.length-1;i>=0;--i){var o=this.tryEntries[i],a=o.completion;if("root"===o.tryLoc)return r("end");if(this.prev>=o.tryLoc){var s=n.call(o,"catchLoc"),c=n.call(o,"finallyLoc");if(s&&c){if(o.catchLoc>this.prev)return r(o.catchLoc,!0);if(o.finallyLoc>this.prev)return r(o.finallyLoc)}else if(s){if(o.catchLoc>this.prev)return r(o.catchLoc,!0)}else{if(!c)throw new Error("try statement without catch or finally");if(o.finallyLoc>this.prev)return r(o.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var i=this.tryEntries[r];if(this.prev>=i.tryLoc&&n.call(i,"finallyLoc")&&i.finallyLoc>this.prev){var o=i;break}}o&&("break"===t||"continue"===t)&&e>=o.tryLoc&&o.finallyLoc>=e&&(o=null);var a=o?o.completion:{};return a.type=t,a.arg=e,o?(this.method="next",this.next=o.finallyLoc,u):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),u},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),E(r),u}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var i=n.arg;E(r)}return i}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:M(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=void 0),u}},t}function n(t,e,r,n,i,o,a){try{var s=t[o](a),c=s.value}catch(t){return void r(t)}s.done?e(c):Promise.resolve(c).then(n,i)}function i(t){return function(){var e=this,r=arguments;return new Promise((function(i,o){var a=t.apply(e,r);function s(t){n(a,i,o,s,c,"next",t)}function c(t){n(a,i,o,s,c,"throw",t)}s(void 0)}))}}function o(){return o=Object.assign?Object.assign.bind():function(t){for(var e=1;arguments.length>e;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t},o.apply(this,arguments)}function a(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,s(t,e)}function s(t,e){return s=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},s(t,e)}var c="undefined"!=typeof Float32Array?Float32Array:Array;function h(){var t=new c(16);return c!=Float32Array&&(t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[11]=0,t[12]=0,t[13]=0,t[14]=0),t[0]=1,t[5]=1,t[10]=1,t[15]=1,t}function l(t,e){return t[0]=e[0],t[1]=e[1],t[2]=e[2],t[3]=e[3],t[4]=e[4],t[5]=e[5],t[6]=e[6],t[7]=e[7],t[8]=e[8],t[9]=e[9],t[10]=e[10],t[11]=e[11],t[12]=e[12],t[13]=e[13],t[14]=e[14],t[15]=e[15],t}function u(t,e,r){var n=e[0],i=e[1],o=e[2],a=e[3],s=e[4],c=e[5],h=e[6],l=e[7],u=e[8],f=e[9],d=e[10],p=e[11],v=e[12],y=e[13],g=e[14],m=e[15],w=r[0],x=r[1],b=r[2],A=r[3];return t[0]=w*n+x*s+b*u+A*v,t[1]=w*i+x*c+b*f+A*y,t[2]=w*o+x*h+b*d+A*g,t[3]=w*a+x*l+b*p+A*m,t[4]=(w=r[4])*n+(x=r[5])*s+(b=r[6])*u+(A=r[7])*v,t[5]=w*i+x*c+b*f+A*y,t[6]=w*o+x*h+b*d+A*g,t[7]=w*a+x*l+b*p+A*m,t[8]=(w=r[8])*n+(x=r[9])*s+(b=r[10])*u+(A=r[11])*v,t[9]=w*i+x*c+b*f+A*y,t[10]=w*o+x*h+b*d+A*g,t[11]=w*a+x*l+b*p+A*m,t[12]=(w=r[12])*n+(x=r[13])*s+(b=r[14])*u+(A=r[15])*v,t[13]=w*i+x*c+b*f+A*y,t[14]=w*o+x*h+b*d+A*g,t[15]=w*a+x*l+b*p+A*m,t}function f(t,e,r){var n,i,o,a,s,c,h,l,u,f,d,p,v=r[0],y=r[1],g=r[2];return e===t?(t[12]=e[0]*v+e[4]*y+e[8]*g+e[12],t[13]=e[1]*v+e[5]*y+e[9]*g+e[13],t[14]=e[2]*v+e[6]*y+e[10]*g+e[14],t[15]=e[3]*v+e[7]*y+e[11]*g+e[15]):(i=e[1],o=e[2],a=e[3],s=e[4],c=e[5],h=e[6],l=e[7],u=e[8],f=e[9],d=e[10],p=e[11],t[0]=n=e[0],t[1]=i,t[2]=o,t[3]=a,t[4]=s,t[5]=c,t[6]=h,t[7]=l,t[8]=u,t[9]=f,t[10]=d,t[11]=p,t[12]=n*v+s*y+u*g+e[12],t[13]=i*v+c*y+f*g+e[13],t[14]=o*v+h*y+d*g+e[14],t[15]=a*v+l*y+p*g+e[15]),t}function d(){var t=new c(3);return c!=Float32Array&&(t[0]=0,t[1]=0,t[2]=0),t}function p(t,e,r){var n=new c(3);return n[0]=t,n[1]=e,n[2]=r,n}function v(t,e,r){var n=e[0],i=e[1],o=e[2],a=r[3]*n+r[7]*i+r[11]*o+r[15];return t[0]=(r[0]*n+r[4]*i+r[8]*o+r[12])/(a=a||1),t[1]=(r[1]*n+r[5]*i+r[9]*o+r[13])/a,t[2]=(r[2]*n+r[6]*i+r[10]*o+r[14])/a,t}Math.hypot||(Math.hypot=function(){for(var t=0,e=arguments.length;e--;)t+=arguments[e]*arguments[e];return Math.sqrt(t)});y=d();var y,g={}.toString,m=function(t){return null==t},w=function(t){return e="String",g.call(t)==="[object "+e+"]";var e},x=function(){function t(t){this.canvasRendererPluginOptions=void 0,this.context=void 0,this.pathGeneratorFactory=void 0,this.rBush=void 0,this.removedRBushNodeAABBs=[],this.renderQueue=[],this.restoreStack=[],this.clearFullScreen=!1,this.vpMatrix=h(),this.dprMatrix=h(),this.tmpMat4=h(),this.vec3a=d(),this.vec3b=d(),this.vec3c=d(),this.vec3d=d(),this.canvasRendererPluginOptions=t}var n=t.prototype;return n.apply=function(n){var o=this;this.context=n;var a=n.config,s=n.camera,c=n.renderingService,h=n.renderingContext,l=n.pathGeneratorFactory;this.rBush=n.rBushRoot,this.pathGeneratorFactory=l;var f=n.contextService,d=h.root.ownerDocument.defaultView,y=function(t){var e=t.target.rBushNode;e.aabb&&o.removedRBushNodeAABBs.push(e.aabb)},g=function(t){var e=t.target.rBushNode;e.aabb&&o.removedRBushNodeAABBs.push(e.aabb)};c.hooks.init.tapPromise(t.tag,i(r().mark((function t(){var n,i,s,c;return r().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:h.root.addEventListener(e.ElementEvent.UNMOUNTED,y),h.root.addEventListener(e.ElementEvent.CULLED,g),n=f.getDPR(),i=a.width,s=a.height,c=f.getContext(),o.clearRect(c,0,0,i*n,s*n,a.background);case 6:case"end":return t.stop()}}),t)})))),c.hooks.destroy.tap(t.tag,(function(){h.root.removeEventListener(e.ElementEvent.UNMOUNTED,y),h.root.removeEventListener(e.ElementEvent.CULLED,g)})),c.hooks.beginFrame.tap(t.tag,(function(){var t=f.getContext(),e=f.getDPR(),r=a.width,n=a.height,i=o.canvasRendererPluginOptions,s=i.dirtyObjectNumThreshold,h=i.dirtyObjectRatioThreshold,l=c.getStats(),u=l.rendered,d=u/l.total;o.clearFullScreen=c.disableDirtyRectangleRendering()||u>s&&d>h,t&&(t.resetTransform(),o.clearFullScreen&&o.clearRect(t,0,0,r*e,n*e,a.background))}));var m=function t(e){e.isVisible()&&!e.isCulled()&&(o.renderDisplayObject(e,f,c),o.saveDirtyAABB(e)),(e.sortable.sorted||e.childNodes).forEach((function(e){t(e)}))};c.hooks.endFrame.tap(t.tag,(function(){var t,r,n=f.getContext(),i=f.getDPR();if(t=o.dprMatrix,r=p(i,i,1),t[0]=r[0],t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=r[1],t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=r[2],t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,u(o.vpMatrix,o.dprMatrix,s.getOrthoMatrix()),o.clearFullScreen)m(h.root);else{var l=o.safeMergeAABB.apply(o,[o.mergeDirtyAABBs(o.renderQueue)].concat(o.removedRBushNodeAABBs.map((function(t){var r=t.minX,n=t.minY,i=t.maxX,o=t.maxY,a=new e.AABB;return a.setMinMax(p(r,n,0),p(i,o,0)),a}))));if(o.removedRBushNodeAABBs=[],e.AABB.isEmpty(l))return void(o.renderQueue=[]);var y=o.convertAABB2Rect(l),g=y.x,w=y.y,x=y.width,b=y.height,A=v(o.vec3a,p(g,w,0),o.vpMatrix),E=v(o.vec3b,p(g+x,w,0),o.vpMatrix),S=v(o.vec3c,p(g,w+b,0),o.vpMatrix),M=v(o.vec3d,p(g+x,w+b,0),o.vpMatrix),B=Math.min(A[0],E[0],M[0],S[0]),O=Math.min(A[1],E[1],M[1],S[1]),L=Math.max(A[0],E[0],M[0],S[0]),R=Math.max(A[1],E[1],M[1],S[1]),P=Math.floor(B),T=Math.floor(O),N=Math.ceil(L-B),k=Math.ceil(R-O);n.save(),o.clearRect(n,P,T,N,k,a.background),n.beginPath(),n.rect(P,T,N,k),n.clip(),n.setTransform(o.vpMatrix[0],o.vpMatrix[1],o.vpMatrix[4],o.vpMatrix[5],o.vpMatrix[12],o.vpMatrix[13]),a.renderer.getConfig().enableDirtyRectangleRenderingDebug&&d.dispatchEvent(new e.CustomEvent(e.CanvasEvent.DIRTY_RECTANGLE,{dirtyRect:{x:P,y:T,width:N,height:k}})),o.searchDirtyObjects(l).sort((function(t,e){return t.sortable.renderOrder-e.sortable.renderOrder})).forEach((function(t){t&&t.isVisible()&&!t.isCulled()&&o.renderDisplayObject(t,f,c)})),n.restore(),o.renderQueue.forEach((function(t){o.saveDirtyAABB(t)})),o.renderQueue=[]}o.restoreStack.forEach((function(){n.restore()})),o.restoreStack=[]})),c.hooks.render.tap(t.tag,(function(t){o.clearFullScreen||o.renderQueue.push(t)}))},n.clearRect=function(t,e,r,n,i,o){t.clearRect(e,r,n,i),o&&(t.fillStyle=o,t.fillRect(e,r,n,i))},n.renderDisplayObject=function(t,r,n){var i=r.getContext(),o=t.nodeName,a=this.restoreStack[this.restoreStack.length-1];!a||t.compareDocumentPosition(a)&Node.DOCUMENT_POSITION_CONTAINS||(i.restore(),this.restoreStack.pop());var s=this.context.styleRendererFactory[o],c=this.pathGeneratorFactory[o],h=t.parsedStyle.clipPath;if(h){this.applyWorldTransform(i,h);var l=this.pathGeneratorFactory[h.nodeName];l&&(i.save(),this.restoreStack.push(t),i.beginPath(),l(i,h.parsedStyle),i.closePath(),i.clip())}s&&(this.applyWorldTransform(i,t),i.save(),this.applyAttributesToContext(i,t)),c&&(i.beginPath(),c(i,t.parsedStyle),t.nodeName!==e.Shape.LINE&&t.nodeName!==e.Shape.PATH&&t.nodeName!==e.Shape.POLYLINE&&i.closePath()),s&&(s.render(i,t.parsedStyle,t,n),i.restore()),t.renderable.dirty=!1},n.convertAABB2Rect=function(t){var e=t.getMin(),r=t.getMax(),n=Math.floor(e[0]),i=Math.floor(e[1]);return{x:n,y:i,width:Math.ceil(r[0])-n,height:Math.ceil(r[1])-i}},n.mergeDirtyAABBs=function(t){var r=new e.AABB;return t.forEach((function(t){var e=t.getRenderBounds();r.add(e);var n=t.renderable.dirtyRenderBounds;n&&r.add(n)})),r},n.searchDirtyObjects=function(t){var r=t.getMin(),n=r[0],i=r[1],o=t.getMax();return this.rBush.search({minX:n,minY:i,maxX:o[0],maxY:o[1]}).map((function(t){return e.runtime.displayObjectPool.getByEntity(t.id)}))},n.saveDirtyAABB=function(t){var r=t.renderable;r.dirtyRenderBounds||(r.dirtyRenderBounds=new e.AABB);var n=t.getRenderBounds();n&&r.dirtyRenderBounds.update(n.center,n.halfExtents)},n.applyAttributesToContext=function(t,e){var r=e.parsedStyle,n=r.stroke,i=r.fill,o=r.opacity,a=r.lineDash,s=r.lineDashOffset;a&&t.setLineDash(a),m(s)||(t.lineDashOffset=s),m(o)||(t.globalAlpha*=o),m(n)||Array.isArray(n)||n.isNone||(t.strokeStyle=e.attributes.stroke),m(i)||Array.isArray(i)||i.isNone||(t.fillStyle=e.attributes.fill)},n.applyWorldTransform=function(t,e,r){var n=0,i=0,o=(e.parsedStyle||{}).anchor,a=o&&o[0]||0,s=o&&o[1]||0;if(0!==a||0!==s){var c=e.getGeometryBounds();n=-a*(c&&2*c.halfExtents[0]||0),i=-s*(c&&2*c.halfExtents[1]||0)}r?(l(this.tmpMat4,e.getLocalTransform()),this.vec3a[0]=n,this.vec3a[1]=i,this.vec3a[2]=0,f(this.tmpMat4,this.tmpMat4,this.vec3a),u(this.tmpMat4,r,this.tmpMat4),u(this.tmpMat4,this.vpMatrix,this.tmpMat4)):(l(this.tmpMat4,e.getWorldTransform()),this.vec3a[0]=n,this.vec3a[1]=i,this.vec3a[2]=0,f(this.tmpMat4,this.tmpMat4,this.vec3a),u(this.tmpMat4,this.vpMatrix,this.tmpMat4)),t.setTransform(this.tmpMat4[0],this.tmpMat4[1],this.tmpMat4[4],this.tmpMat4[5],this.tmpMat4[12],this.tmpMat4[13])},n.safeMergeAABB=function(){for(var t=new e.AABB,r=arguments.length,n=new Array(r),i=0;r>i;i++)n[i]=arguments[i];return n.forEach((function(e){t.add(e)})),t},t}();x.tag="CanvasRenderer";var b=function(){function t(t){this.imagePool=void 0,this.imagePool=t}var r=t.prototype;return r.render=function(t,r,n,i){var o=r.fill,a=r.fillRule,s=r.opacity,c=r.fillOpacity,h=r.stroke,l=r.strokeOpacity,u=r.lineWidth,f=r.lineCap,d=r.lineJoin,p=r.shadowType,v=r.shadowColor,y=r.shadowBlur,g=r.filter,w=r.miterLimit,x=!m(o)&&!o.isNone,b=!m(h)&&!h.isNone&&u>0,E=0===o.alpha,S=!(!g||!g.length),M=!m(v)&&y>0,B=n.nodeName,O="inner"===p,L=b&&M&&(B===e.Shape.PATH||B===e.Shape.LINE||B===e.Shape.POLYLINE||E||O);x&&(t.globalAlpha=s*c,L||A(n,t,M),this.fill(t,n,o,a,i),L||this.clearShadowAndFilter(t,S,M)),b&&(t.globalAlpha=s*l,t.lineWidth=u,m(w)||(t.miterLimit=w),m(f)||(t.lineCap=f),m(d)||(t.lineJoin=d),L&&(O&&(t.globalCompositeOperation="source-atop"),A(n,t,!0),O&&(this.stroke(t,n,h,i),t.globalCompositeOperation="source-over",this.clearShadowAndFilter(t,S,!0))),this.stroke(t,n,h,i))},r.clearShadowAndFilter=function(t,e,r){if(r&&(t.shadowColor="transparent",t.shadowBlur=0),e){var n=t.filter;!m(n)&&n.indexOf("drop-shadow")>-1&&(t.filter=n.replace(/drop-shadow\([^)]*\)/,"").trim()||"none")}},r.fill=function(t,r,n,i,o){var a=this;Array.isArray(n)?n.forEach((function(e){t.fillStyle=a.getColor(e,r,t),t.fill(i)})):(e.isPattern(n)&&(t.fillStyle=this.getPattern(n,r,t,o)),t.fill(i))},r.stroke=function(t,r,n,i){var o=this;Array.isArray(n)?n.forEach((function(e){t.strokeStyle=o.getColor(e,r,t),t.stroke()})):(e.isPattern(n)&&(t.strokeStyle=this.getPattern(n,r,t,i)),t.stroke())},r.getPattern=function(t,e,r,n){return this.imagePool.getOrCreatePatternSync(t,r,(function(){e.renderable.dirty=!0,n.dirtify()}))},r.getColor=function(t,r,n){var i;if(t.type===e.GradientType.LinearGradient||t.type===e.GradientType.RadialGradient){var a=r.getGeometryBounds();i=this.imagePool.getOrCreateGradient(o({type:t.type},t.value,{width:a&&2*a.halfExtents[0]||1,height:a&&2*a.halfExtents[1]||1}),n)}return i},t}();function A(t,e,r){var n=t.parsedStyle,i=n.filter,o=n.shadowColor,a=n.shadowBlur,s=n.shadowOffsetX,c=n.shadowOffsetY;i&&i.length&&(e.filter=t.style.filter),r&&(e.shadowColor=o.toString(),e.shadowBlur=a||0,e.shadowOffsetX=s||0,e.shadowOffsetY=c||0)}var E=function(){function t(t){this.imagePool=void 0,this.imagePool=t}return t.prototype.render=function(t,e,r){var n,i=e.img,o=e.shadowColor,a=e.shadowBlur,s=e.width,c=e.height;if(w(i)?n=this.imagePool.getImageSync(i):(s||(s=i.width),c||(c=i.height),n=i),n){A(r,t,!m(o)&&a>0);try{t.drawImage(n,0,0,s,c)}catch(t){}}},t}(),S=function(){function t(){}var e=t.prototype;return e.render=function(t,e,r){var n=e.lineWidth,i=e.textAlign,o=e.textBaseline,a=e.lineJoin,s=e.miterLimit,c=e.letterSpacing,h=e.stroke,l=e.fill,u=e.fillOpacity,f=e.strokeOpacity,d=e.opacity,p=e.metrics,v=e.dx,y=e.dy,g=e.shadowColor,w=e.shadowBlur,x=p.lines,b=p.height,E=p.lineHeight,S=p.lineMetrics;t.font=p.font,t.lineWidth=n,t.textAlign=i,t.textBaseline=o,t.lineJoin=a,m(s)||(t.miterLimit=s);var M=0;"middle"===o?M=-b/2-E/2:"bottom"===o||"alphabetic"===o||"ideographic"===o?M=-b:"top"!==o&&"hanging"!==o||(M=-E);var B=v||0;M+=y||0,A(r,t,!m(g)&&w>0);for(var O=0;x.length>O;O++){var L=n/2+B;M+=E,m(h)||h.isNone||!n||this.drawLetterSpacing(t,x[O],S[O],i,L,M,c,u,f,d,!0),m(l)||this.drawLetterSpacing(t,x[O],S[O],i,L,M,c,u,f,d)}},e.drawLetterSpacing=function(t,e,r,n,i,o,a,s,c,h,l){if(void 0===l&&(l=!1),0!==a){var u=t.textAlign;t.textAlign="left";var f=i;"center"===n?f=i-r.width/2:"right"!==n&&"end"!==n||(f=i-r.width);for(var d=Array.from(e),p=t.measureText(e).width,v=0,y=0;d.length>y;++y){var g=d[y];l?this.strokeText(t,g,f,o,c):this.fillText(t,g,f,o,s,h),f+=p-(v=t.measureText(e.substring(y+1)).width)+a,p=v}t.textAlign=u}else l?this.strokeText(t,e,i,o,c):this.fillText(t,e,i,o,s,h)},e.fillText=function(t,e,r,n,i,o){var a,s=!m(i)&&1!==i;s&&(a=t.globalAlpha,t.globalAlpha=i*o),t.fillText(e,r,n),s&&(t.globalAlpha=a)},e.strokeText=function(t,e,r,n,i){var o,a=!m(i)&&1!==i;a&&(o=t.globalAlpha,t.globalAlpha=i),t.strokeText(e,r,n),a&&(t.globalAlpha=o)},t}(),M=function(t){function e(){return t.apply(this,arguments)||this}return a(e,t),e}(b),B=function(t){function e(){return t.apply(this,arguments)||this}return a(e,t),e}(b),O=function(t){function e(){return t.apply(this,arguments)||this}return a(e,t),e}(b),L=function(t){function e(){return t.apply(this,arguments)||this}return a(e,t),e}(b),R=function(t){function e(){return t.apply(this,arguments)||this}return a(e,t),e}(b),P=function(t){function e(){return t.apply(this,arguments)||this}return a(e,t),e}(b),T=function(t){function e(){return t.apply(this,arguments)||this}return a(e,t),e}(b),N=function(t){function r(e){var r;return void 0===e&&(e={}),(r=t.call(this)||this).options=void 0,r.name="canvas-renderer",r.options=e,r}a(r,t);var n=r.prototype;return n.init=function(){var t,r=o({dirtyObjectNumThreshold:500,dirtyObjectRatioThreshold:.8},this.options),n=this.context.imagePool,i=new b(n),a=((t={})[e.Shape.CIRCLE]=i,t[e.Shape.ELLIPSE]=i,t[e.Shape.RECT]=i,t[e.Shape.IMAGE]=new E(n),t[e.Shape.TEXT]=new S,t[e.Shape.LINE]=i,t[e.Shape.POLYLINE]=i,t[e.Shape.POLYGON]=i,t[e.Shape.PATH]=i,t[e.Shape.GROUP]=void 0,t[e.Shape.HTML]=void 0,t[e.Shape.MESH]=void 0,t);this.context.defaultStyleRendererFactory=a,this.context.styleRendererFactory=a,this.addRenderingPlugin(new x(r))},n.destroy=function(){this.removeAllRenderingPlugins(),delete this.context.defaultStyleRendererFactory,delete this.context.styleRendererFactory},r}(e.AbstractRendererPlugin);t.CircleRenderer=B,t.EllipseRenderer=O,t.ImageRenderer=E,t.LineRenderer=L,t.PathRenderer=T,t.Plugin=N,t.PolygonRenderer=P,t.PolylineRenderer=R,t.RectRenderer=M,t.TextRenderer=S,Object.defineProperty(t,"__esModule",{value:!0})}));

2

dist/shapes/styles/Default.d.ts
import type { DisplayObject, ParsedBaseStyleProps, RenderingService } from '@antv/g-lite';
import { ImagePool } from '@antv/g-plugin-image-loader';
import type { ImagePool } from '@antv/g-plugin-image-loader';
import type { StyleRenderer } from './interfaces';

@@ -4,0 +4,0 @@ export declare class DefaultRenderer implements StyleRenderer {

2

dist/shapes/styles/Image.d.ts
import type { DisplayObject, ParsedImageStyleProps } from '@antv/g-lite';
import { ImagePool } from '@antv/g-plugin-image-loader';
import type { ImagePool } from '@antv/g-plugin-image-loader';
import type { StyleRenderer } from './interfaces';

@@ -4,0 +4,0 @@ export declare class ImageRenderer implements StyleRenderer {

11

dist/shapes/styles/interfaces.d.ts
import type { DisplayObject, ParsedBaseStyleProps, RenderingService } from '@antv/g-lite';
import { Syringe } from '@antv/g-lite';
export declare const StyleRendererFactory: Syringe.DefinedToken;
export interface StyleRenderer {
render: (context: CanvasRenderingContext2D, parsedStyle: ParsedBaseStyleProps, object: DisplayObject, renderingService: RenderingService) => void;
}
export declare const CircleRendererContribution: Syringe.DefinedToken;
export declare const EllipseRendererContribution: Syringe.DefinedToken;
export declare const RectRendererContribution: Syringe.DefinedToken;
export declare const LineRendererContribution: Syringe.DefinedToken;
export declare const PolylineRendererContribution: Syringe.DefinedToken;
export declare const PolygonRendererContribution: Syringe.DefinedToken;
export declare const PathRendererContribution: Syringe.DefinedToken;
export declare const TextRendererContribution: Syringe.DefinedToken;
export declare const ImageRendererContribution: Syringe.DefinedToken;
//# sourceMappingURL=interfaces.d.ts.map

10

package.json
{
"name": "@antv/g-plugin-canvas-renderer",
"version": "1.7.24",
"version": "1.7.25",
"description": "A G plugin of renderer implementation with Canvas2D API",

@@ -30,5 +30,5 @@ "keywords": [

"dependencies": {
"@antv/g-math": "^1.7.21",
"@antv/g-plugin-canvas-path-generator": "^1.1.21",
"@antv/g-plugin-image-loader": "^1.1.22",
"@antv/g-math": "^1.7.22",
"@antv/g-plugin-canvas-path-generator": "^1.1.22",
"@antv/g-plugin-image-loader": "^1.1.23",
"@antv/util": "^3.2.4",

@@ -46,3 +46,3 @@ "tslib": "^2.3.1"

},
"gitHead": "f544c40d7f0c7ef712e81bd5311fc70530dc43e7"
"gitHead": "c80e315d8611880f433168adad28dd31f2ad5980"
}
dist/tokens.d.ts
dist/tokens.d.ts.map
dist/CanvasRendererPlugin.d.ts.map

Sorry, the diff of this file is not supported yet

dist/index.d.ts.map

Sorry, the diff of this file is not supported yet

dist/index.umd.js

Sorry, the diff of this file is too big to display

dist/shapes/styles/Circle.d.ts.map

Sorry, the diff of this file is not supported yet

dist/shapes/styles/Default.d.ts.map

Sorry, the diff of this file is not supported yet

dist/shapes/styles/Ellipse.d.ts.map

Sorry, the diff of this file is not supported yet

dist/shapes/styles/Image.d.ts.map

Sorry, the diff of this file is not supported yet

dist/shapes/styles/interfaces.d.ts.map

Sorry, the diff of this file is not supported yet

dist/shapes/styles/Line.d.ts.map

Sorry, the diff of this file is not supported yet

dist/shapes/styles/Path.d.ts.map

Sorry, the diff of this file is not supported yet

dist/shapes/styles/Polygon.d.ts.map

Sorry, the diff of this file is not supported yet

dist/shapes/styles/Polyline.d.ts.map

Sorry, the diff of this file is not supported yet

dist/shapes/styles/Rect.d.ts.map

Sorry, the diff of this file is not supported yet

dist/shapes/styles/Text.d.ts.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc