@visactor/vrender-core 0.17.0 → 0.17.1-alpha.2

package/dist/index.js

@@ -12082,7 +12082,7 @@
     const SYMBOL_NUMBER_TYPE = genNumberType();
     const TEXT_NUMBER_TYPE = genNumberType();
     const GraphicService = Symbol.for('GraphicService');
-    const GraphicCreator = Symbol.for('GraphicCreator');
+    const GraphicCreator$1 = Symbol.for('GraphicCreator');
     const SVG_ATTRIBUTE_MAP = {
         'stroke-linecap': 'lineCap',
         'stroke-linejoin': 'lineJoin',
@@ -17136,6 +17136,58 @@
     }
     Pyramid3d.NOWORK_ANIMATE_ATTR = NOWORK_ANIMATE_ATTR;
 
+    class ShadowRoot extends Group {
+        constructor(graphic) {
+            super({ x: 0, y: 0 });
+            this.type = 'shadowroot';
+            this.shadowHost = graphic;
+        }
+        addUpdateBoundTag() {
+            super.addUpdateBoundTag();
+            if (this.shadowHost) {
+                this.shadowHost.addUpdateBoundTag();
+            }
+        }
+        addUpdateShapeAndBoundsTag() {
+            super.addUpdateShapeAndBoundsTag();
+            if (this.shadowHost) {
+                this.shadowHost.addUpdateBoundTag();
+            }
+        }
+        tryUpdateGlobalTransMatrix(clearTag = true) {
+            if (this.shouldUpdateGlobalMatrix()) {
+                const m = this.transMatrix;
+                if (!this._globalTransMatrix) {
+                    this._globalTransMatrix = m.clone();
+                }
+                else {
+                    this._globalTransMatrix.setValue(m.a, m.b, m.c, m.d, m.e, m.f);
+                }
+                this.doUpdateGlobalMatrix();
+                clearTag && this.clearUpdateGlobalPositionTag();
+            }
+            return this._globalTransMatrix;
+        }
+        doUpdateGlobalMatrix() {
+            if (this.shadowHost) {
+                const parentMatrix = this.shadowHost.globalTransMatrix;
+                this._globalTransMatrix.multiply(parentMatrix.a, parentMatrix.b, parentMatrix.c, parentMatrix.d, parentMatrix.e, parentMatrix.f);
+            }
+        }
+        tryUpdateGlobalAABBBounds() {
+            if (!this._globalAABBBounds) {
+                this._globalAABBBounds = this._AABBBounds.clone();
+            }
+            else {
+                this._globalAABBBounds.setValue(this._AABBBounds.x1, this._AABBBounds.y1, this._AABBBounds.x2, this._AABBBounds.y2);
+            }
+            if (this.shadowHost) {
+                this._globalAABBBounds.transformWithMatrix(this.shadowHost.globalTransMatrix);
+            }
+            return this._globalAABBBounds;
+        }
+    }
+
     class DefaultOuterBorderBoundsContribution {
         updateBounds(attribute, theme, aabbBounds, graphic) {
             const { outerBorder, shadowBlur = theme.shadowBlur } = attribute;
@@ -18249,143 +18301,41 @@
     };
     exports.DefaultGraphicService = __decorate([
         injectable(),
-        __param(0, inject(GraphicCreator)),
+        __param(0, inject(GraphicCreator$1)),
         __metadata("design:paramtypes", [Object])
     ], exports.DefaultGraphicService);
 
-    class ShadowRoot extends Group {
-        constructor(graphic) {
-            super({ x: 0, y: 0 });
-            this.type = 'shadowroot';
-            this.shadowHost = graphic;
-        }
-        addUpdateBoundTag() {
-            super.addUpdateBoundTag();
-            if (this.shadowHost) {
-                this.shadowHost.addUpdateBoundTag();
-            }
-        }
-        addUpdateShapeAndBoundsTag() {
-            super.addUpdateShapeAndBoundsTag();
-            if (this.shadowHost) {
-                this.shadowHost.addUpdateBoundTag();
-            }
-        }
-        tryUpdateGlobalTransMatrix(clearTag = true) {
-            if (this.shouldUpdateGlobalMatrix()) {
-                const m = this.transMatrix;
-                if (!this._globalTransMatrix) {
-                    this._globalTransMatrix = m.clone();
-                }
-                else {
-                    this._globalTransMatrix.setValue(m.a, m.b, m.c, m.d, m.e, m.f);
-                }
-                this.doUpdateGlobalMatrix();
-                clearTag && this.clearUpdateGlobalPositionTag();
-            }
-            return this._globalTransMatrix;
+    class GraphicCreator {
+        constructor() {
+            this.store = new Map();
         }
-        doUpdateGlobalMatrix() {
-            if (this.shadowHost) {
-                const parentMatrix = this.shadowHost.globalTransMatrix;
-                this._globalTransMatrix.multiply(parentMatrix.a, parentMatrix.b, parentMatrix.c, parentMatrix.d, parentMatrix.e, parentMatrix.f);
-            }
+        RegisterGraphicCreator(name, cb) {
+            this.store.set(name, cb);
+            this[name] = cb;
         }
-        tryUpdateGlobalAABBBounds() {
-            if (!this._globalAABBBounds) {
-                this._globalAABBBounds = this._AABBBounds.clone();
-            }
-            else {
-                this._globalAABBBounds.setValue(this._AABBBounds.x1, this._AABBBounds.y1, this._AABBBounds.x2, this._AABBBounds.y2);
-            }
-            if (this.shadowHost) {
-                this._globalAABBBounds.transformWithMatrix(this.shadowHost.globalTransMatrix);
+        CreateGraphic(name, params) {
+            const cb = this.store.get(name);
+            if (!cb) {
+                return null;
             }
-            return this._globalAABBBounds;
+            return cb(params);
         }
     }
+    const graphicCreator = new GraphicCreator();
 
-    function createArc(attributes) {
-        return new Arc(attributes);
-    }
-    function createArc3d(attributes) {
-        return new Arc3d(attributes);
-    }
-    function createPyramid3d(attributes) {
-        return new Pyramid3d(attributes);
-    }
-    function createArea(attributes) {
-        return new Area(attributes);
-    }
-    function createCircle(attributes) {
-        return new Circle(attributes);
-    }
-    function createGroup(attributes) {
-        return new Group(attributes);
-    }
-    function createLine(attributes) {
-        return new Line$1(attributes);
-    }
-    function createPath(attributes) {
-        return new Path(attributes);
-    }
-    function createRect(attributes) {
-        return new Rect(attributes);
-    }
-    function createRect3d(attributes) {
-        return new Rect3d(attributes);
-    }
-    function createGlyph(attributes) {
-        return new Glyph(attributes);
-    }
-    function createText(attributes) {
-        return new Text(attributes);
-    }
-    function createWrapText(attributes) {
-        return new WrapText(attributes);
-    }
-    function createSymbol(attributes) {
-        return new Symbol$1(attributes);
-    }
-    function createImage(attributes) {
-        return new Image(attributes);
-    }
-    function createPolygon(attributes) {
-        return new Polygon(attributes);
-    }
-    function createShadowRoot(graphic) {
-        return new ShadowRoot(graphic);
-    }
-    function createRichText(attributes) {
-        return new RichText(attributes);
-    }
-    const graphicCreator = {
-        arc: createArc,
-        area: createArea,
-        circle: createCircle,
-        group: createGroup,
-        image: createImage,
-        line: createLine,
-        path: createPath,
-        rect: createRect,
-        rect3d: createRect3d,
-        symbol: createSymbol,
-        text: createText,
-        richtext: createRichText,
-        polygon: createPolygon,
-        shadowRoot: createShadowRoot,
-        wrapText: createWrapText
-    };
-
-    const text = createText({
-        text: ''
-    });
+    let text;
     function getTextBounds(params) {
+        if (!text) {
+            text = graphicCreator.CreateGraphic('text', {});
+        }
         text.setAttributes(params);
         return text.AABBBounds;
     }
-    const richText = createRichText({});
+    let richText;
     function getRichTextBounds(params) {
+        if (!richText) {
+            richText = graphicCreator.CreateGraphic('text', {});
+        }
         richText.setAttributes(params);
         return richText.AABBBounds;
     }
@@ -22009,7 +21959,7 @@
 
     var graphicModule = new ContainerModule(bind => {
         bind(GraphicService).to(exports.DefaultGraphicService).inSingletonScope();
-        bind(GraphicCreator).toConstantValue(graphicCreator);
+        bind(GraphicCreator$1).toConstantValue(graphicCreator);
     });
 
     const AutoEnablePlugins = Symbol.for('AutoEnablePlugins');
@@ -22491,11 +22441,6 @@
     class DebugDrawItemInterceptorContribution {
         constructor() {
             this.order = 1;
-            this.interceptors = [
-                new ShadowRootDrawItemInterceptorContribution(),
-                new Canvas3DDrawItemInterceptor(),
-                new InteractiveDrawItemInterceptorContribution()
-            ];
         }
         afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
             if (graphic.attribute._debug_bounds) {
@@ -22625,7 +22570,7 @@
             var _a;
             let group = interactiveLayer.getElementById('_interactive_group');
             if (!group) {
-                group = createGroup({});
+                group = graphicCreator.CreateGraphic('group', {});
                 group.id = '_interactive_group';
                 interactiveLayer.add(group);
             }
@@ -23599,1068 +23544,459 @@
         __metadata("design:paramtypes", [Array, Object, Object, Object])
     ], DefaultIncrementalDrawContribution);
 
-    let DefaultCanvasRect3dRender = class DefaultCanvasRect3dRender extends BaseRender {
+    var renderModule = new ContainerModule(bind => {
+        bind(DefaultBaseBackgroundRenderContribution).toSelf().inSingletonScope();
+        bind(DefaultBaseTextureRenderContribution).toSelf().inSingletonScope();
+        bind(DrawContribution).to(DefaultDrawContribution);
+        bind(IncrementalDrawContribution).to(DefaultIncrementalDrawContribution);
+        bind(GroupRender).to(DefaultCanvasGroupRender).inSingletonScope();
+        bind(GraphicRender).toService(GroupRender);
+        bindContributionProvider(bind, GroupRenderContribution);
+        bind(exports.DefaultBaseInteractiveRenderContribution).toSelf().inSingletonScope();
+        bindContributionProvider(bind, InteractiveSubRenderContribution);
+        bindContributionProvider(bind, GraphicRender);
+        bind(CommonDrawItemInterceptorContribution).toSelf().inSingletonScope();
+        bind(DrawItemInterceptor).toService(CommonDrawItemInterceptorContribution);
+        bindContributionProvider(bind, DrawItemInterceptor);
+    });
+
+    function load(container) {
+        container.load(renderModule);
+    }
+
+    container.load(coreModule);
+    container.load(graphicModule);
+    container.load(renderModule$1);
+    container.load(pickModule);
+    container.load(pluginModule);
+    load$1(container);
+    load(container);
+    const vglobal = container.get(VGlobal);
+    application.global = vglobal;
+    const graphicUtil = container.get(GraphicUtil);
+    application.graphicUtil = graphicUtil;
+    const transformUtil = container.get(TransformUtil);
+    application.transformUtil = transformUtil;
+    const graphicService = container.get(GraphicService);
+    application.graphicService = graphicService;
+    const layerService = container.get(LayerService);
+    application.layerService = layerService;
+
+    class AutoRenderPlugin {
         constructor() {
-            super(...arguments);
-            this.type = 'rect3d';
-            this.numberType = RECT3D_NUMBER_TYPE;
+            this.name = 'AutoRenderPlugin';
+            this.activeEvent = 'onRegister';
+            this._uid = Generator.GenAutoIncrementId();
+            this.key = this.name + this._uid;
         }
-        drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb) {
-            var _a;
-            const rectAttribute = getTheme(rect, params === null || params === void 0 ? void 0 : params.theme).rect3d;
-            const { fill = rectAttribute.fill, stroke = rectAttribute.stroke, width = rectAttribute.width, height = rectAttribute.height, opacity = rectAttribute.opacity, fillOpacity = rectAttribute.fillOpacity, lineWidth = rectAttribute.lineWidth, strokeOpacity = rectAttribute.strokeOpacity, visible = rectAttribute.visible } = rect.attribute;
-            const z = (_a = this.z) !== null && _a !== void 0 ? _a : 0;
-            const fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill);
-            const sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height);
-            const doFill = runFill(fill);
-            const doStroke = runStroke(stroke, lineWidth);
-            if (!(rect.valid && visible)) {
-                return;
-            }
-            if (!(doFill || doStroke)) {
-                return;
-            }
-            if (!(fVisible || sVisible || fillCb || strokeCb)) {
-                return;
-            }
-            const { light, camera } = drawContext.stage || {};
-            const face3d = rect.findFace();
-            if (fill !== false) {
-                context.setCommonStyle(rect, rect.attribute, x, y, rectAttribute);
-                let fc = fill;
-                if (typeof fc !== 'string') {
-                    fc = 'black';
+        activate(context) {
+            this.pluginService = context;
+            application.graphicService.hooks.onAttributeUpdate.tap(this.key, graphic => {
+                if (graphic.glyphHost) {
+                    graphic = graphic.glyphHost;
+                }
+                if (graphic.stage === context.stage && graphic.stage != null) {
+                    graphic.stage.renderNextFrame();
                 }
-                this.fill(x, y, z, face3d, fc, context, light, fillCb);
-            }
-            if (stroke !== false) {
-                context.setStrokeStyle(rect, rect.attribute, x, y, rectAttribute);
-                this.stroke(x, y, z, face3d, context);
-            }
-        }
-        stroke(x, y, z, face3d, context) {
-            const vertices = face3d.vertices;
-            face3d.edges.forEach(edge => {
-                const p1 = vertices[edge[0]];
-                const v1 = {
-                    x: x + p1[0],
-                    y: y + p1[1],
-                    z: z + p1[2]
-                };
-                const p2 = vertices[edge[1]];
-                const v2 = {
-                    x: x + p2[0],
-                    y: y + p2[1],
-                    z: z + p2[2]
-                };
-                context.beginPath();
-                context.moveTo(v1.x, v1.y, v1.z);
-                context.lineTo(v2.x, v2.y, v2.z);
-                context.stroke();
             });
-        }
-        fill(x, y, z, face3d, fillColor, context, light, fillCb) {
-            const rgbArray = ColorStore.Get(fillColor, exports.ColorType.Color255);
-            const vertices = face3d.vertices;
-            const viewdVerticesZ = vertices.map(v => {
-                return context.view(v[0], v[1], v[2])[2];
+            application.graphicService.hooks.onSetStage.tap(this.key, graphic => {
+                if (graphic.glyphHost) {
+                    graphic = graphic.glyphHost;
+                }
+                if (graphic.stage === context.stage && graphic.stage != null) {
+                    graphic.stage.renderNextFrame();
+                }
             });
-            const sortFace = [];
-            face3d.polygons.forEach((p, i) => {
-                sortFace.push({
-                    faceIdx: i,
-                    polygon: p
+        }
+        deactivate(context) {
+            application.graphicService.hooks.onAttributeUpdate.taps =
+                application.graphicService.hooks.onAttributeUpdate.taps.filter(item => {
+                    return item.name !== this.key;
                 });
-                const { polygon, normal } = p;
-                const z1 = viewdVerticesZ[polygon[0]];
-                const z2 = viewdVerticesZ[polygon[1]];
-                const z3 = viewdVerticesZ[polygon[2]];
-                const z4 = viewdVerticesZ[polygon[3]];
-                p.ave_z = z1 + z2 + z3 + z4;
-            });
-            sortFace.sort((a, b) => b.polygon.ave_z - a.polygon.ave_z);
-            sortFace.forEach(item => {
-                const { polygon, normal } = item.polygon;
-                const p1 = vertices[polygon[0]];
-                const p2 = vertices[polygon[1]];
-                const p3 = vertices[polygon[2]];
-                const p4 = vertices[polygon[3]];
-                const v1 = {
-                    x: x + p1[0],
-                    y: y + p1[1],
-                    z: z + p1[2]
-                };
-                const v2 = {
-                    x: x + p2[0],
-                    y: y + p2[1],
-                    z: z + p2[2]
-                };
-                const v3 = {
-                    x: x + p3[0],
-                    y: y + p3[1],
-                    z: z + p3[2]
-                };
-                const v4 = {
-                    x: x + p4[0],
-                    y: y + p4[1],
-                    z: z + p4[2]
-                };
-                context.beginPath();
-                context.moveTo(v1.x, v1.y, v1.z);
-                context.lineTo(v2.x, v2.y, v2.z);
-                context.lineTo(v3.x, v3.y, v3.z);
-                context.lineTo(v4.x, v4.y, v4.z);
-                context.closePath();
-                if (fillCb) {
-                    fillCb(context, null, null);
-                }
-                else {
-                    context.fillStyle = light ? light.computeColor(normal, rgbArray) : fillColor;
-                    context.fill();
-                }
+            application.graphicService.hooks.onSetStage.taps = application.graphicService.hooks.onSetStage.taps.filter(item => {
+                return item.name !== this.key;
             });
         }
-        draw(rect, renderService, drawContext) {
-            const rectAttribute = getTheme(rect).rect;
-            this._draw(rect, rectAttribute, false, drawContext);
-        }
-    };
-    DefaultCanvasRect3dRender = __decorate([
-        injectable()
-    ], DefaultCanvasRect3dRender);
+    }
 
-    let DefaultCanvasRichTextRender = class DefaultCanvasRichTextRender extends BaseRender {
+    class ViewTransform3dPlugin {
         constructor() {
-            super();
-            this.numberType = RICHTEXT_NUMBER_TYPE;
-            this.builtinContributions = [defaultTextBackgroundRenderContribution];
-            this.init();
-        }
-        drawShape(richtext, context, x, y, drawContext) {
-            const richtextAttribute = getTheme(richtext).richtext;
-            const { strokeOpacity = richtextAttribute.strokeOpacity, opacity = richtextAttribute.opacity, fillOpacity = richtextAttribute.fillOpacity, visible = richtextAttribute.visible } = richtext.attribute;
-            if (!(richtext.valid && visible)) {
-                return;
-            }
-            const fVisible = fillVisible(opacity, fillOpacity, true);
-            const sVisible = fillVisible(opacity, strokeOpacity, true);
-            if (!fVisible) {
-                return;
-            }
-            context.translate(x, y);
-            this.beforeRenderStep(richtext, context, x, y, fVisible, sVisible, fVisible, sVisible, richtextAttribute, drawContext);
-            const frame = richtext.getFrameCache();
-            frame.draw(context, this.drawIcon);
-            this.afterRenderStep(richtext, context, x, y, fVisible, sVisible, fVisible, sVisible, richtextAttribute, drawContext);
-        }
-        drawIcon(icon, context, x, y, baseline) {
-            var _a;
-            const richtextIconAttribute = getTheme(icon).richtextIcon;
-            const { width = richtextIconAttribute.width, height = richtextIconAttribute.height, opacity = richtextIconAttribute.opacity, image: url, backgroundFill = richtextIconAttribute.backgroundFill, backgroundFillOpacity = richtextIconAttribute.backgroundFillOpacity, backgroundStroke = richtextIconAttribute.backgroundStroke, backgroundStrokeOpacity = richtextIconAttribute.backgroundStrokeOpacity, backgroundRadius = richtextIconAttribute.backgroundRadius, margin } = icon.attribute;
-            const { backgroundWidth = width, backgroundHeight = height } = icon.attribute;
-            if (margin) {
-                x += icon._marginArray[3];
-                y += icon._marginArray[0];
-            }
-            if (icon._hovered) {
-                const expandX = (backgroundWidth - width) / 2;
-                const expandY = (backgroundHeight - height) / 2;
-                if (backgroundRadius === 0) {
-                    context.beginPath();
-                    context.rect(x - expandX, y - expandY, backgroundWidth, backgroundHeight);
+            this.name = 'ViewTransform3dPlugin';
+            this.activeEvent = 'onRegister';
+            this._uid = Generator.GenAutoIncrementId();
+            this.key = this.name + this._uid;
+            this.onMouseDown = (e) => {
+                if (!this.option3d) {
+                    this.option3d = this.pluginService.stage.option3d;
                 }
-                else {
-                    context.beginPath();
-                    createRectPath(context, x - expandX, y - expandY, backgroundWidth, backgroundHeight, backgroundRadius);
+                if (!this.option3d) {
+                    return;
                 }
-                if (backgroundFill) {
-                    context.globalAlpha = backgroundFillOpacity;
-                    context.fillStyle = backgroundFill;
-                    context.fill();
+                this.mousedown = true;
+                this.pageX = e.page.x;
+                this.pageY = e.page.y;
+            };
+            this.onMouseUp = (e) => {
+                if (!this.option3d) {
+                    this.option3d = this.pluginService.stage.option3d;
                 }
-                if (backgroundStroke) {
-                    context.globalAlpha = backgroundStrokeOpacity;
-                    context.strokeStyle = backgroundStroke;
-                    context.stroke();
+                if (!this.option3d) {
+                    return;
                 }
-            }
-            const res = url && ((_a = icon === null || icon === void 0 ? void 0 : icon.resources) === null || _a === void 0 ? void 0 : _a.get(url));
-            if (!res || res.state !== 'success') {
-                return;
-            }
-            context.globalAlpha = opacity;
-            context.drawImage(res.data, x, y, width, height);
+                this.mousedown = false;
+            };
+            this.onMouseMove = (e) => {
+                var _a, _b;
+                const stage = this.pluginService.stage;
+                if (!this.option3d) {
+                    this.option3d = stage.option3d;
+                }
+                if (!this.option3d) {
+                    return;
+                }
+                if (this.mousedown) {
+                    if (!this.pageX || !this.pageY) {
+                        this.pageX = e.page.x;
+                        this.pageY = e.page.y;
+                    }
+                    else {
+                        const deltaX = e.page.x - this.pageX;
+                        const deltaY = e.page.y - this.pageY;
+                        this.pageX = e.page.x;
+                        this.pageY = e.page.y;
+                        const angle1 = deltaX / 100;
+                        const angle2 = deltaY / 100;
+                        this.option3d.alpha = ((_a = this.option3d.alpha) !== null && _a !== void 0 ? _a : 0) + angle1;
+                        this.option3d.beta = ((_b = this.option3d.beta) !== null && _b !== void 0 ? _b : 0) + angle2;
+                        stage.set3dOptions(this.option3d);
+                        stage.renderNextFrame();
+                    }
+                }
+            };
         }
-        draw(richtext, renderService, drawContext) {
-            const richtextAttribute = getTheme(richtext).richtext;
-            this._draw(richtext, richtextAttribute, false, drawContext);
+        activate(context) {
+            this.pluginService = context;
+            const stage = context.stage;
+            this.option3d = stage.option3d;
+            stage.addEventListener('mousedown', this.onMouseDown);
+            stage.addEventListener('mouseup', this.onMouseUp);
+            stage.addEventListener('mousemove', this.onMouseMove);
         }
-    };
-    DefaultCanvasRichTextRender = __decorate([
-        injectable(),
-        __metadata("design:paramtypes", [])
-    ], DefaultCanvasRichTextRender);
+        deactivate(context) {
+            const stage = context.stage;
+            stage.removeEventListener('mousedown', this.onMouseDown);
+            stage.removeEventListener('mouseup', this.onMouseUp);
+            stage.removeEventListener('mousemove', this.onMouseMove);
+        }
+    }
 
-    let DefaultCanvasGlyphRender = class DefaultCanvasGlyphRender {
+    class IncrementalAutoRenderPlugin {
         constructor() {
-            this.numberType = GLYPH_NUMBER_TYPE;
+            this.name = 'IncrementalAutoRenderPlugin';
+            this.activeEvent = 'onRegister';
+            this.nextFrameRenderGroupSet = new Set();
+            this.willNextFrameRender = false;
+            this.nextUserParams = {};
+            this._uid = Generator.GenAutoIncrementId();
+            this.key = this.name + this._uid;
         }
-        drawShape(glyph, context, x, y, drawContext, params, fillCb, strokeCb) {
-            if (!drawContext.drawContribution) {
-                return;
-            }
-            glyph.getSubGraphic().forEach(item => {
-                const renderer = drawContext.drawContribution.getRenderContribution(item);
-                if (renderer && renderer.drawShape) {
-                    renderer.drawShape(item, context, x, y, drawContext, params, fillCb, strokeCb);
+        activate(context) {
+            this.pluginService = context;
+            application.graphicService.hooks.onAddIncremental.tap(this.key, (graphic, group, stage) => {
+                if (graphic.glyphHost) {
+                    graphic = graphic.glyphHost;
+                }
+                if (graphic.stage === context.stage && graphic.stage != null) {
+                    this.nextUserParams.startAtId = group._uid;
+                    this.renderNextFrame(group);
+                }
+            });
+            application.graphicService.hooks.onClearIncremental.tap(this.key, (group, stage) => {
+                if (group.stage === context.stage && group.stage != null) {
+                    this.nextUserParams.startAtId = group._uid;
+                    this.nextUserParams.restartIncremental = true;
+                    this.renderNextFrame(group);
                 }
             });
         }
-        draw(glyph, renderService, drawContext, params) {
-            const { context } = drawContext;
-            if (!context) {
-                return;
-            }
-            context.highPerformanceSave();
-            if (!drawContext.drawContribution) {
-                return;
-            }
-            const glyphTheme = getTheme(glyph);
-            const subGraphic = glyph.getSubGraphic();
-            subGraphic.length &&
-                subGraphic.forEach(g => {
-                    drawContext.drawContribution.renderItem(g, drawContext, { theme: glyphTheme });
+        deactivate(context) {
+            application.graphicService.hooks.onAddIncremental.taps =
+                application.graphicService.hooks.onAddIncremental.taps.filter(item => {
+                    return item.name !== this.key;
+                });
+            application.graphicService.hooks.onClearIncremental.taps =
+                application.graphicService.hooks.onClearIncremental.taps.filter(item => {
+                    return item.name !== this.key;
                 });
-            context.highPerformanceRestore();
         }
-    };
-    DefaultCanvasGlyphRender = __decorate([
-        injectable()
-    ], DefaultCanvasGlyphRender);
-
-    function drawArcPath(arc, context, cx, cy, z, outerRadius, innerRadius) {
-        const { startAngle, endAngle } = arc.getParsedAngle();
-        const deltaAngle = vutils.abs(endAngle - startAngle);
-        const clockwise = endAngle > startAngle;
-        let collapsedToLine = false;
-        if (outerRadius < innerRadius) {
-            const temp = outerRadius;
-            outerRadius = innerRadius;
-            innerRadius = temp;
+        renderNextFrame(group) {
+            this.nextFrameRenderGroupSet.add(group);
+            if (!this.willNextFrameRender) {
+                this.willNextFrameRender = true;
+                application.global.getRequestAnimationFrame()(() => {
+                    this._doRenderInThisFrame();
+                    this.willNextFrameRender = false;
+                });
+            }
         }
-        if (outerRadius <= vutils.epsilon) {
-            context.moveTo(cx, cy, z);
+        _doRenderInThisFrame() {
+            const stage = this.pluginService.stage;
+            if (this.nextFrameRenderGroupSet.size) {
+                this.nextFrameRenderGroupSet.forEach(group => {
+                    const layer = group.layer;
+                    if (!layer || !group.layer.subLayers) {
+                        return;
+                    }
+                    const subLayer = group.layer.subLayers.get(group._uid);
+                    if (!subLayer || !subLayer.drawContribution) {
+                        return;
+                    }
+                    subLayer.drawContribution.draw(stage.renderService, Object.assign({ x: stage.x, y: stage.y, width: layer.viewWidth, height: layer.viewHeight, stage,
+                        layer, clear: 'transparent', renderService: stage.renderService, updateBounds: false, startAtId: group._uid, context: subLayer.layer.getNativeHandler().getContext() }, this.nextUserParams));
+                });
+                this.nextUserParams = {};
+                this.nextFrameRenderGroupSet.clear();
+            }
         }
-        else if (deltaAngle >= vutils.pi2 - vutils.epsilon) {
-            context.moveTo(cx + outerRadius * vutils.cos(startAngle), cy + outerRadius * vutils.sin(startAngle), z);
-            context.arc(cx, cy, outerRadius, startAngle, endAngle, !clockwise, z);
-            if (innerRadius > vutils.epsilon) {
-                context.moveTo(cx + innerRadius * vutils.cos(endAngle), cy + innerRadius * vutils.sin(endAngle), z);
-                context.arc(cx, cy, innerRadius, endAngle, startAngle, clockwise, z);
+    }
+
+    class HtmlAttributePlugin {
+        constructor() {
+            this.name = 'HtmlAttributePlugin';
+            this.activeEvent = 'onRegister';
+            this._uid = Generator.GenAutoIncrementId();
+            this.key = this.name + this._uid;
+        }
+        activate(context) {
+            this.pluginService = context;
+            context.stage.hooks.afterRender.tap(this.key, stage => {
+                if (!(stage && stage === this.pluginService.stage)) {
+                    return;
+                }
+                this.drawHTML(context.stage.renderService);
+            });
+            application.graphicService.hooks.onRelease.tap(this.key, graphic => {
+                this.removeDom(graphic);
+            });
+        }
+        deactivate(context) {
+            context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter(item => {
+                return item.name !== this.key;
+            });
+        }
+        drawHTML(renderService) {
+            if (application.global.env === 'browser') {
+                renderService.renderTreeRoots
+                    .sort((a, b) => {
+                    var _a, _b;
+                    return ((_a = a.attribute.zIndex) !== null && _a !== void 0 ? _a : DefaultAttribute.zIndex) - ((_b = b.attribute.zIndex) !== null && _b !== void 0 ? _b : DefaultAttribute.zIndex);
+                })
+                    .forEach(group => {
+                    this.renderGroupHTML(group);
+                });
             }
         }
-        else {
-            const { outerDeltaAngle, innerDeltaAngle, outerStartAngle, outerEndAngle, innerEndAngle, innerStartAngle } = arc.getParsePadAngle(startAngle, endAngle);
-            const xors = outerRadius * vutils.cos(outerStartAngle);
-            const yors = outerRadius * vutils.sin(outerStartAngle);
-            const xire = innerRadius * vutils.cos(innerEndAngle);
-            const yire = innerRadius * vutils.sin(innerEndAngle);
-            if (outerDeltaAngle < 0.001) {
-                collapsedToLine = true;
+        renderGroupHTML(group) {
+            this.renderGraphicHTML(group);
+            group.forEachChildren((g) => {
+                if (g.isContainer) {
+                    this.renderGroupHTML(g);
+                }
+                else {
+                    this.renderGraphicHTML(g);
+                }
+            });
+        }
+        removeDom(graphic) {
+            if (graphic.bindDom && graphic.bindDom.size) {
+                graphic.bindDom.forEach(item => {
+                    item.dom && item.dom.parentElement.removeChild(item.dom);
+                });
+                graphic.bindDom.clear();
+            }
+        }
+        renderGraphicHTML(graphic) {
+            const { html } = graphic.attribute;
+            if (!html) {
+                if (graphic.bindDom && graphic.bindDom.size) {
+                    graphic.bindDom.forEach(item => {
+                        item.dom && item.dom.parentElement.removeChild(item.dom);
+                    });
+                    graphic.bindDom.clear();
+                }
+                return;
+            }
+            const stage = graphic.stage;
+            if (!stage) {
+                return;
+            }
+            const { dom, container, width, height, style, anchorType = 'boundsLeftTop' } = html;
+            if (!graphic.bindDom) {
+                graphic.bindDom = new Map();
+            }
+            const lastDom = graphic.bindDom.get(dom);
+            if (lastDom && !(container && container !== lastDom.container)) {
+                return;
+            }
+            graphic.bindDom.forEach(({ wrapGroup }) => {
+                application.global.removeDom(wrapGroup);
+            });
+            let nativeDom;
+            if (typeof dom === 'string') {
+                nativeDom = new DOMParser().parseFromString(dom, 'text/html').firstChild;
             }
             else {
-                context.moveTo(cx + xors, cy + yors, z);
-                context.arc(cx, cy, outerRadius, outerStartAngle, outerEndAngle, !clockwise, z);
+                nativeDom = dom;
             }
-            if (!(innerRadius > vutils.epsilon) || innerDeltaAngle < 0.001) {
-                context.lineTo(cx + xire, cy + yire, z);
-                collapsedToLine = true;
+            let nativeContainer;
+            const _container = container || (stage.params.enableHtmlAttribute === true ? null : stage.params.enableHtmlAttribute);
+            if (_container) {
+                if (typeof _container === 'string') {
+                    nativeContainer = application.global.getElementById(_container);
+                }
+                else {
+                    nativeContainer = _container;
+                }
             }
             else {
-                context.lineTo(cx + xire, cy + yire, z);
-                context.arc(cx, cy, innerRadius, innerEndAngle, innerStartAngle, clockwise, z);
+                nativeContainer = graphic.stage.window.getContainer();
             }
-        }
-        context.closePath();
-        return collapsedToLine;
-    }
-    function drawInnerOuterArcPath(arc, context, cx, cy, z1, z2, radius, getParsePadAngle) {
-        const { startAngle, endAngle } = arc.getParsedAngle();
-        const deltaAngle = vutils.abs(endAngle - startAngle);
-        const clockwise = endAngle > startAngle;
-        let collapsedToLine = false;
-        if (radius <= vutils.epsilon) {
-            context.moveTo(cx, cy, z1);
-        }
-        else if (deltaAngle >= vutils.pi2 - vutils.epsilon) {
-            context.moveTo(cx + radius * vutils.cos(startAngle), cy + radius * vutils.sin(startAngle), z1);
-            context.arc(cx, cy, radius, startAngle, endAngle, !clockwise, z1);
-            context.lineTo(cx + radius * vutils.cos(endAngle), cy + radius * vutils.sin(endAngle), z2);
-            context.arc(cx, cy, radius, endAngle, startAngle, clockwise, z2);
-        }
-        else {
-            const { innerouterDeltaAngle, innerouterStartAngle, innerouterEndAngle } = getParsePadAngle(startAngle, endAngle);
-            const xors = radius * vutils.cos(innerouterStartAngle);
-            const yors = radius * vutils.sin(innerouterStartAngle);
-            const xore = radius * vutils.cos(innerouterEndAngle);
-            const yore = radius * vutils.sin(innerouterEndAngle);
-            if (innerouterDeltaAngle < 0.001) {
-                collapsedToLine = true;
+            const wrapGroup = application.global.createDom({ tagName: 'div', width, height, style, parent: nativeContainer });
+            if (wrapGroup) {
+                wrapGroup.appendChild(nativeDom);
+                graphic.bindDom.set(dom, { dom: nativeDom, container, wrapGroup: wrapGroup });
+            }
+            wrapGroup.style.pointerEvents = 'none';
+            if (!wrapGroup.style.position) {
+                wrapGroup.style.position = 'absolute';
+                nativeContainer.style.position = 'relative';
+            }
+            let left = 0;
+            let top = 0;
+            if (anchorType === 'position') {
+                const matrix = graphic.transMatrix;
+                left = matrix.e;
+                top = matrix.f;
             }
             else {
-                context.moveTo(cx + xors, cy + yors, z1);
-                context.arc(cx, cy, radius, innerouterStartAngle, innerouterEndAngle, !clockwise, z1);
-                context.lineTo(cx + xore, cy + yore, z2);
-                context.arc(cx, cy, radius, innerouterEndAngle, innerouterStartAngle, clockwise, z2);
+                const b = graphic.AABBBounds;
+                left = b.x1;
+                top = b.y1;
             }
+            const containerTL = application.global.getElementTopLeft(nativeContainer, false);
+            const windowTL = stage.window.getTopLeft(false);
+            const offsetX = left + windowTL.left - containerTL.left;
+            const offsetTop = top + windowTL.top - containerTL.top;
+            wrapGroup.style.left = `${offsetX}px`;
+            wrapGroup.style.top = `${offsetTop}px`;
         }
-        context.closePath();
-        return collapsedToLine;
     }
-    let DefaultCanvasArc3DRender = class DefaultCanvasArc3DRender extends BaseRender {
+
+    const globalBounds = new vutils.AABBBounds();
+    class DirtyBoundsPlugin {
         constructor() {
-            super(...arguments);
-            this.numberType = ARC3D_NUMBER_TYPE;
+            this.name = 'DirtyBoundsPlugin';
+            this.activeEvent = 'onRegister';
+            this._uid = Generator.GenAutoIncrementId();
+            this.key = this.name + this._uid;
         }
-        drawShape(arc, context, x, y, drawContext, params, fillCb, strokeCb) {
-            var _a;
-            const arcAttribute = getTheme(arc, params === null || params === void 0 ? void 0 : params.theme).arc;
-            const { fill = arcAttribute.fill } = arc.attribute;
-            const data = this.valid(arc, arcAttribute, fillCb, strokeCb);
-            if (!data) {
-                return;
-            }
-            const { fVisible, sVisible, doFill, doStroke } = data;
-            const z = (_a = this.z) !== null && _a !== void 0 ? _a : 0;
-            const { outerRadius = arcAttribute.outerRadius, innerRadius = arcAttribute.innerRadius, height = 10 } = arc.attribute;
-            const rgbArray = ColorStore.Get(fill, exports.ColorType.Color255);
-            const { light } = drawContext.stage || {};
-            const face = drawContext.hack_pieFace;
-            const z_face = {
-                top: z,
-                bottom: z + height
-            };
-            const n_face = {
-                top: [0, 1, 0],
-                bottom: [0, -1, 0],
-                outside: [1, 0, -1],
-                inside: [1, 0, -1]
-            };
-            if (face === 'bottom' || face === 'top') {
-                context.beginPath();
-                drawArcPath(arc, context, x, y, z_face[face], outerRadius, innerRadius);
-                context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute);
-                if (doFill) {
-                    if (fillCb) {
-                        fillCb(context, arc.attribute, arcAttribute);
-                    }
-                    else if (fVisible) {
-                        context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute);
-                        context.fillStyle = light ? light.computeColor(n_face[face], rgbArray) : fill;
-                        context.fill();
-                    }
+        activate(context) {
+            this.pluginService = context;
+            context.stage.hooks.afterRender.tap(this.key, stage => {
+                if (!(stage && stage === this.pluginService.stage)) {
+                    return;
                 }
-                if (doStroke) {
-                    if (strokeCb) {
-                        strokeCb(context, arc.attribute, arcAttribute);
-                    }
-                    else if (sVisible) {
-                        context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute);
-                        context.stroke();
-                    }
+                stage.dirtyBounds.clear();
+            });
+            application.graphicService.hooks.beforeUpdateAABBBounds.tap(this.key, (graphic, stage, willUpdate, bounds) => {
+                if (graphic.glyphHost) {
+                    graphic = graphic.glyphHost;
                 }
-            }
-            else if (face === 'outside' || face === 'inside') {
-                if (face === 'inside') {
-                    context.save();
-                    context.beginPath();
-                    context.arc(x, y, innerRadius, 0, vutils.pi2, true, z_face.top);
-                    context.clip();
+                if (!(stage && stage === this.pluginService.stage && stage.renderCount)) {
+                    return;
                 }
-                context.beginPath();
-                drawInnerOuterArcPath(arc, context, x, y, z_face.top, z_face.bottom, face === 'outside' ? outerRadius : innerRadius, (startAngle, endAngle) => {
-                    const { outerDeltaAngle, innerDeltaAngle, outerStartAngle, outerEndAngle, innerEndAngle, innerStartAngle } = arc.getParsePadAngle(startAngle, endAngle);
-                    if (face === 'outside') {
-                        return {
-                            innerouterDeltaAngle: outerDeltaAngle,
-                            innerouterEndAngle: outerEndAngle,
-                            innerouterStartAngle: outerStartAngle
-                        };
-                    }
-                    return {
-                        innerouterDeltaAngle: innerDeltaAngle,
-                        innerouterEndAngle: innerEndAngle,
-                        innerouterStartAngle: innerStartAngle
-                    };
-                });
-                context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute);
-                if (doFill) {
-                    if (fillCb) {
-                        fillCb(context, arc.attribute, arcAttribute);
-                    }
-                    else if (fVisible) {
-                        context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute);
-                        context.fillStyle = light ? light.computeColor(n_face[face], rgbArray) : fill;
-                        context.fill();
-                    }
+                if (graphic.isContainer && !graphic.shouldSelfChangeUpdateAABBBounds()) {
+                    return;
                 }
-                if (doStroke) {
-                    if (strokeCb) {
-                        strokeCb(context, arc.attribute, arcAttribute);
-                    }
-                    else if (sVisible) {
-                        context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute);
-                        context.stroke();
-                    }
+                if (willUpdate) {
+                    globalBounds.setValue(bounds.x1, bounds.y1, bounds.x2, bounds.y2);
+                    stage.dirty(globalBounds, graphic.parent && graphic.parent.globalTransMatrix);
                 }
-                if (face === 'inside') {
-                    context.restore();
+            });
+            application.graphicService.hooks.afterUpdateAABBBounds.tap(this.key, (graphic, stage, bounds, params, selfChange) => {
+                if (!(stage && stage === this.pluginService.stage && stage.renderCount)) {
+                    return;
                 }
-            }
+                if (graphic.isContainer && !selfChange) {
+                    return;
+                }
+                stage.dirty(params.globalAABBBounds);
+            });
+            application.graphicService.hooks.onRemove.tap(this.key, (graphic) => {
+                const stage = graphic.stage;
+                if (!(stage && stage === this.pluginService.stage && stage.renderCount)) {
+                    return;
+                }
+                if (stage) {
+                    stage.dirty(graphic.globalAABBBounds);
+                }
+            });
         }
-        draw(arc, renderService, drawContext, params) {
-            const arcAttribute = getTheme(arc, params === null || params === void 0 ? void 0 : params.theme).arc;
-            this._draw(arc, arcAttribute, false, drawContext, params);
+        deactivate(context) {
+            application.graphicService.hooks.beforeUpdateAABBBounds.taps =
+                application.graphicService.hooks.beforeUpdateAABBBounds.taps.filter(item => {
+                    return item.name !== this.key;
+                });
+            application.graphicService.hooks.afterUpdateAABBBounds.taps =
+                application.graphicService.hooks.afterUpdateAABBBounds.taps.filter(item => {
+                    return item.name !== this.key;
+                });
+            context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter(item => {
+                return item.name !== this.key;
+            });
+            application.graphicService.hooks.onRemove.taps = application.graphicService.hooks.onRemove.taps.filter(item => {
+                return item.name !== this.key;
+            });
         }
-    };
-    DefaultCanvasArc3DRender = __decorate([
-        injectable()
-    ], DefaultCanvasArc3DRender);
+    }
 
-    let DefaultCanvasPyramid3dRender = class DefaultCanvasPyramid3dRender extends BaseRender {
+    const _tempBounds = new vutils.AABBBounds();
+    class FlexLayoutPlugin {
         constructor() {
-            super(...arguments);
-            this.type = 'pyramid3d';
-            this.numberType = PYRAMID3D_NUMBER_TYPE;
+            this.name = 'FlexLayoutPlugin';
+            this.activeEvent = 'onRegister';
+            this.id = Generator.GenAutoIncrementId();
+            this.key = this.name + this.id;
+            this.tempBounds = new vutils.AABBBounds();
         }
-        drawShape(pyramid3d, context, x, y, drawContext, params, fillCb, strokeCb) {
-            var _a;
-            const pyramidAttribute = getTheme(pyramid3d, params === null || params === void 0 ? void 0 : params.theme).polygon;
-            const { fill = pyramidAttribute.fill, stroke = pyramidAttribute.stroke, face = [true, true, true, true, true, true] } = pyramid3d.attribute;
-            const z = (_a = this.z) !== null && _a !== void 0 ? _a : 0;
-            const data = this.valid(pyramid3d, pyramidAttribute, fillCb, strokeCb);
-            if (!data) {
+        tryLayout(graphic) {
+            const p = graphic.parent;
+            if (!p || !graphic.needUpdateLayout()) {
                 return;
             }
-            const { light, camera } = drawContext.stage || {};
-            const face3d = pyramid3d.findFace();
-            if (fill !== false) {
-                context.setCommonStyle(pyramid3d, pyramid3d.attribute, x, y, pyramidAttribute);
-                let fc = fill;
-                if (typeof fc !== 'string') {
-                    fc = 'black';
-                }
-                this.fill(x, y, z, face3d, face, fc, context, light, camera, pyramid3d, pyramidAttribute, fillCb);
-            }
-            if (stroke !== false) {
-                context.setStrokeStyle(pyramid3d, pyramid3d.attribute, x, y, pyramidAttribute);
-                this.stroke(x, y, z, face3d, context);
+            const theme = getTheme(p).group;
+            const { display = theme.display } = p.attribute;
+            if (display !== 'flex') {
+                return;
             }
-        }
-        stroke(x, y, z, face3d, context) {
-            const vertices = face3d.vertices;
-            face3d.edges.forEach(p => {
-                const p1 = vertices[p[0]];
-                const p2 = vertices[p[1]];
-                const v1 = {
-                    x: x + p1[0],
-                    y: y + p1[1],
-                    z: z + p1[2]
-                };
-                const v2 = {
-                    x: x + p2[0],
-                    y: y + p2[1],
-                    z: z + p2[2]
-                };
-                context.beginPath();
-                context.moveTo(v1.x, v1.y, v1.z);
-                context.lineTo(v2.x, v2.y, v2.z);
-                context.stroke();
-            });
-        }
-        fill(x, y, z, face3d, faces, fillColor, context, light, camera, pyramid3d, pyramid3dAttribute, fillCb) {
-            const rgbArray = ColorStore.Get(fillColor, exports.ColorType.Color255);
-            const vertices = face3d.vertices;
-            const viewdVerticesZ = vertices.map(v => {
-                return context.view(v[0], v[1], v[2])[2];
-            });
-            const sortFace = [];
-            face3d.polygons.forEach((p, i) => {
-                if (!faces[i]) {
-                    return;
-                }
-                sortFace.push({
-                    faceIdx: i,
-                    polygon: p
-                });
-                const { polygon, normal } = p;
-                const z1 = viewdVerticesZ[polygon[0]];
-                const z2 = viewdVerticesZ[polygon[1]];
-                const z3 = viewdVerticesZ[polygon[2]];
-                const z4 = viewdVerticesZ[polygon[3]];
-                p.ave_z = z1 + z2 + z3 + z4;
-            });
-            sortFace.sort((a, b) => b.polygon.ave_z - a.polygon.ave_z);
-            sortFace.forEach(item => {
-                const { polygon, normal } = item.polygon;
-                const p1 = vertices[polygon[0]];
-                const p2 = vertices[polygon[1]];
-                const p3 = vertices[polygon[2]];
-                const p4 = vertices[polygon[3]];
-                const v1 = {
-                    x: x + p1[0],
-                    y: y + p1[1],
-                    z: z + p1[2]
-                };
-                const v2 = {
-                    x: x + p2[0],
-                    y: y + p2[1],
-                    z: z + p2[2]
-                };
-                const v3 = {
-                    x: x + p3[0],
-                    y: y + p3[1],
-                    z: z + p3[2]
-                };
-                const v4 = {
-                    x: x + p4[0],
-                    y: y + p4[1],
-                    z: z + p4[2]
-                };
-                context.beginPath();
-                context.moveTo(v1.x, v1.y, v1.z);
-                context.lineTo(v2.x, v2.y, v2.z);
-                context.lineTo(v3.x, v3.y, v3.z);
-                context.lineTo(v4.x, v4.y, v4.z);
-                context.closePath();
-                if (fillCb) {
-                    fillCb(context, pyramid3d.attribute, pyramid3dAttribute);
+            const { flexDirection = theme.flexDirection, flexWrap = theme.flexWrap, justifyContent = theme.justifyContent, alignItems = theme.alignItems, alignContent = theme.alignContent, clip = theme.clip } = p.attribute;
+            let childrenWidth = 0;
+            let childrenHeight = 0;
+            let boundsLegal = 0;
+            p.forEachChildren((child) => {
+                const bounds = child.AABBBounds;
+                if (flexDirection === 'column' || flexDirection === 'column-reverse') {
+                    childrenHeight += bounds.height();
+                    childrenWidth = Math.max(childrenWidth, bounds.width());
                 }
                 else {
-                    context.fillStyle = light ? light.computeColor(normal, rgbArray) : fillColor;
-                    context.fill();
+                    childrenWidth += bounds.width();
+                    childrenHeight = Math.max(childrenHeight, bounds.height());
                 }
-            });
-        }
-        draw(pyramid3d, renderService, drawContext) {
-            const pyramid3dAttribute = getTheme(pyramid3d).polygon;
-            this._draw(pyramid3d, pyramid3dAttribute, false, drawContext);
-        }
-    };
-    DefaultCanvasPyramid3dRender = __decorate([
-        injectable()
-    ], DefaultCanvasPyramid3dRender);
-
-    var renderModule = new ContainerModule(bind => {
-        bind(DefaultBaseBackgroundRenderContribution).toSelf().inSingletonScope();
-        bind(DefaultBaseTextureRenderContribution).toSelf().inSingletonScope();
-        bind(DrawContribution).to(DefaultDrawContribution);
-        bind(IncrementalDrawContribution).to(DefaultIncrementalDrawContribution);
-        bind(exports.DefaultCanvasCircleRender).toSelf().inSingletonScope();
-        bind(CircleRender).to(exports.DefaultCanvasCircleRender).inSingletonScope();
-        bind(GraphicRender).toService(CircleRender);
-        bindContributionProvider(bind, CircleRenderContribution);
-        bind(exports.DefaultCanvasRectRender).toSelf().inSingletonScope();
-        bind(RectRender).to(exports.DefaultCanvasRectRender).inSingletonScope();
-        bind(GraphicRender).toService(RectRender);
-        bind(Rect3DRender).to(DefaultCanvasRect3dRender).inSingletonScope();
-        bind(GraphicRender).toService(Rect3DRender);
-        bindContributionProvider(bind, RectRenderContribution);
-        bind(TextRender).to(exports.DefaultCanvasTextRender).inSingletonScope();
-        bind(GraphicRender).toService(TextRender);
-        bindContributionProvider(bind, TextRenderContribution);
-        bind(exports.DefaultCanvasPathRender).toSelf().inSingletonScope();
-        bind(PathRender).to(exports.DefaultCanvasPathRender).inSingletonScope();
-        bind(GraphicRender).toService(PathRender);
-        bindContributionProvider(bind, PathRenderContribution);
-        bind(exports.DefaultCanvasSymbolRender).toSelf().inSingletonScope();
-        bind(SymbolRender).to(exports.DefaultCanvasSymbolRender).inSingletonScope();
-        bind(GraphicRender).toService(SymbolRender);
-        bindContributionProvider(bind, SymbolRenderContribution);
-        bind(exports.DefaultCanvasArcRender).toSelf().inSingletonScope();
-        bind(ArcRender).to(exports.DefaultCanvasArcRender).inSingletonScope();
-        bind(GraphicRender).toService(ArcRender);
-        bind(Arc3dRender).to(DefaultCanvasArc3DRender).inSingletonScope();
-        bind(GraphicRender).toService(Arc3dRender);
-        bindContributionProvider(bind, ArcRenderContribution);
-        bind(exports.DefaultCanvasLineRender).toSelf().inSingletonScope();
-        bind(LineRender).to(exports.DefaultCanvasLineRender).inSingletonScope();
-        bind(GraphicRender).toService(LineRender);
-        bind(DefaultIncrementalCanvasLineRender).toSelf().inSingletonScope();
-        bind(DefaultIncrementalCanvasAreaRender).toSelf().inSingletonScope();
-        bind(exports.DefaultCanvasAreaRender).toSelf().inSingletonScope();
-        bind(AreaRender).to(exports.DefaultCanvasAreaRender).inSingletonScope();
-        bind(GraphicRender).toService(AreaRender);
-        bindContributionProvider(bind, AreaRenderContribution);
-        bind(GroupRender).to(DefaultCanvasGroupRender).inSingletonScope();
-        bind(GraphicRender).toService(GroupRender);
-        bindContributionProvider(bind, GroupRenderContribution);
-        bind(PolygonRender).to(exports.DefaultCanvasPolygonRender).inSingletonScope();
-        bind(GraphicRender).toService(PolygonRender);
-        bindContributionProvider(bind, PolygonRenderContribution);
-        bind(GlyphRender).to(DefaultCanvasGlyphRender).inSingletonScope();
-        bind(GraphicRender).toService(GlyphRender);
-        bind(ImageRender).to(exports.DefaultCanvasImageRender).inSingletonScope();
-        bind(GraphicRender).toService(ImageRender);
-        bindContributionProvider(bind, ImageRenderContribution);
-        bind(RichTextRender).to(DefaultCanvasRichTextRender).inSingletonScope();
-        bind(GraphicRender).toService(RichTextRender);
-        bind(Pyramid3dRender).to(DefaultCanvasPyramid3dRender).inSingletonScope();
-        bind(GraphicRender).toService(Pyramid3dRender);
-        bind(exports.DefaultBaseInteractiveRenderContribution).toSelf().inSingletonScope();
-        bind(TextRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution);
-        bind(ArcRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution);
-        bind(PathRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution);
-        bind(SymbolRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution);
-        bind(RectRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution);
-        bind(ImageRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution);
-        bind(CircleRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution);
-        bind(AreaRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution);
-        bind(PolygonRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution);
-        bindContributionProvider(bind, InteractiveSubRenderContribution);
-        bindContributionProvider(bind, GraphicRender);
-        bind(CommonDrawItemInterceptorContribution).toSelf().inSingletonScope();
-        bind(DrawItemInterceptor).toService(CommonDrawItemInterceptorContribution);
-        bindContributionProvider(bind, DrawItemInterceptor);
-    });
-
-    function load(container) {
-        container.load(renderModule);
-    }
-
-    container.load(coreModule);
-    container.load(graphicModule);
-    container.load(renderModule$1);
-    container.load(pickModule);
-    container.load(pluginModule);
-    load$1(container);
-    load(container);
-    const vglobal = container.get(VGlobal);
-    application.global = vglobal;
-    const graphicUtil = container.get(GraphicUtil);
-    application.graphicUtil = graphicUtil;
-    const transformUtil = container.get(TransformUtil);
-    application.transformUtil = transformUtil;
-    const graphicService = container.get(GraphicService);
-    application.graphicService = graphicService;
-    const layerService = container.get(LayerService);
-    application.layerService = layerService;
-
-    class AutoRenderPlugin {
-        constructor() {
-            this.name = 'AutoRenderPlugin';
-            this.activeEvent = 'onRegister';
-            this._uid = Generator.GenAutoIncrementId();
-            this.key = this.name + this._uid;
-        }
-        activate(context) {
-            this.pluginService = context;
-            application.graphicService.hooks.onAttributeUpdate.tap(this.key, graphic => {
-                if (graphic.glyphHost) {
-                    graphic = graphic.glyphHost;
-                }
-                if (graphic.stage === context.stage && graphic.stage != null) {
-                    graphic.stage.renderNextFrame();
-                }
-            });
-            application.graphicService.hooks.onSetStage.tap(this.key, graphic => {
-                if (graphic.glyphHost) {
-                    graphic = graphic.glyphHost;
-                }
-                if (graphic.stage === context.stage && graphic.stage != null) {
-                    graphic.stage.renderNextFrame();
-                }
-            });
-        }
-        deactivate(context) {
-            application.graphicService.hooks.onAttributeUpdate.taps =
-                application.graphicService.hooks.onAttributeUpdate.taps.filter(item => {
-                    return item.name !== this.key;
-                });
-            application.graphicService.hooks.onSetStage.taps = application.graphicService.hooks.onSetStage.taps.filter(item => {
-                return item.name !== this.key;
-            });
-        }
-    }
-
-    class ViewTransform3dPlugin {
-        constructor() {
-            this.name = 'ViewTransform3dPlugin';
-            this.activeEvent = 'onRegister';
-            this._uid = Generator.GenAutoIncrementId();
-            this.key = this.name + this._uid;
-            this.onMouseDown = (e) => {
-                if (!this.option3d) {
-                    this.option3d = this.pluginService.stage.option3d;
-                }
-                if (!this.option3d) {
-                    return;
-                }
-                this.mousedown = true;
-                this.pageX = e.page.x;
-                this.pageY = e.page.y;
-            };
-            this.onMouseUp = (e) => {
-                if (!this.option3d) {
-                    this.option3d = this.pluginService.stage.option3d;
-                }
-                if (!this.option3d) {
-                    return;
-                }
-                this.mousedown = false;
-            };
-            this.onMouseMove = (e) => {
-                var _a, _b;
-                const stage = this.pluginService.stage;
-                if (!this.option3d) {
-                    this.option3d = stage.option3d;
-                }
-                if (!this.option3d) {
-                    return;
-                }
-                if (this.mousedown) {
-                    if (!this.pageX || !this.pageY) {
-                        this.pageX = e.page.x;
-                        this.pageY = e.page.y;
-                    }
-                    else {
-                        const deltaX = e.page.x - this.pageX;
-                        const deltaY = e.page.y - this.pageY;
-                        this.pageX = e.page.x;
-                        this.pageY = e.page.y;
-                        const angle1 = deltaX / 100;
-                        const angle2 = deltaY / 100;
-                        this.option3d.alpha = ((_a = this.option3d.alpha) !== null && _a !== void 0 ? _a : 0) + angle1;
-                        this.option3d.beta = ((_b = this.option3d.beta) !== null && _b !== void 0 ? _b : 0) + angle2;
-                        stage.set3dOptions(this.option3d);
-                        stage.renderNextFrame();
-                    }
-                }
-            };
-        }
-        activate(context) {
-            this.pluginService = context;
-            const stage = context.stage;
-            this.option3d = stage.option3d;
-            stage.addEventListener('mousedown', this.onMouseDown);
-            stage.addEventListener('mouseup', this.onMouseUp);
-            stage.addEventListener('mousemove', this.onMouseMove);
-        }
-        deactivate(context) {
-            const stage = context.stage;
-            stage.removeEventListener('mousedown', this.onMouseDown);
-            stage.removeEventListener('mouseup', this.onMouseUp);
-            stage.removeEventListener('mousemove', this.onMouseMove);
-        }
-    }
-
-    class IncrementalAutoRenderPlugin {
-        constructor() {
-            this.name = 'IncrementalAutoRenderPlugin';
-            this.activeEvent = 'onRegister';
-            this.nextFrameRenderGroupSet = new Set();
-            this.willNextFrameRender = false;
-            this.nextUserParams = {};
-            this._uid = Generator.GenAutoIncrementId();
-            this.key = this.name + this._uid;
-        }
-        activate(context) {
-            this.pluginService = context;
-            application.graphicService.hooks.onAddIncremental.tap(this.key, (graphic, group, stage) => {
-                if (graphic.glyphHost) {
-                    graphic = graphic.glyphHost;
-                }
-                if (graphic.stage === context.stage && graphic.stage != null) {
-                    this.nextUserParams.startAtId = group._uid;
-                    this.renderNextFrame(group);
-                }
-            });
-            application.graphicService.hooks.onClearIncremental.tap(this.key, (group, stage) => {
-                if (group.stage === context.stage && group.stage != null) {
-                    this.nextUserParams.startAtId = group._uid;
-                    this.nextUserParams.restartIncremental = true;
-                    this.renderNextFrame(group);
-                }
-            });
-        }
-        deactivate(context) {
-            application.graphicService.hooks.onAddIncremental.taps =
-                application.graphicService.hooks.onAddIncremental.taps.filter(item => {
-                    return item.name !== this.key;
-                });
-            application.graphicService.hooks.onClearIncremental.taps =
-                application.graphicService.hooks.onClearIncremental.taps.filter(item => {
-                    return item.name !== this.key;
-                });
-        }
-        renderNextFrame(group) {
-            this.nextFrameRenderGroupSet.add(group);
-            if (!this.willNextFrameRender) {
-                this.willNextFrameRender = true;
-                application.global.getRequestAnimationFrame()(() => {
-                    this._doRenderInThisFrame();
-                    this.willNextFrameRender = false;
-                });
-            }
-        }
-        _doRenderInThisFrame() {
-            const stage = this.pluginService.stage;
-            if (this.nextFrameRenderGroupSet.size) {
-                this.nextFrameRenderGroupSet.forEach(group => {
-                    const layer = group.layer;
-                    if (!layer || !group.layer.subLayers) {
-                        return;
-                    }
-                    const subLayer = group.layer.subLayers.get(group._uid);
-                    if (!subLayer || !subLayer.drawContribution) {
-                        return;
-                    }
-                    subLayer.drawContribution.draw(stage.renderService, Object.assign({ x: stage.x, y: stage.y, width: layer.viewWidth, height: layer.viewHeight, stage,
-                        layer, clear: 'transparent', renderService: stage.renderService, updateBounds: false, startAtId: group._uid, context: subLayer.layer.getNativeHandler().getContext() }, this.nextUserParams));
-                });
-                this.nextUserParams = {};
-                this.nextFrameRenderGroupSet.clear();
-            }
-        }
-    }
-
-    class HtmlAttributePlugin {
-        constructor() {
-            this.name = 'HtmlAttributePlugin';
-            this.activeEvent = 'onRegister';
-            this._uid = Generator.GenAutoIncrementId();
-            this.key = this.name + this._uid;
-        }
-        activate(context) {
-            this.pluginService = context;
-            context.stage.hooks.afterRender.tap(this.key, stage => {
-                if (!(stage && stage === this.pluginService.stage)) {
-                    return;
-                }
-                this.drawHTML(context.stage.renderService);
-            });
-            application.graphicService.hooks.onRelease.tap(this.key, graphic => {
-                this.removeDom(graphic);
-            });
-        }
-        deactivate(context) {
-            context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter(item => {
-                return item.name !== this.key;
-            });
-        }
-        drawHTML(renderService) {
-            if (application.global.env === 'browser') {
-                renderService.renderTreeRoots
-                    .sort((a, b) => {
-                    var _a, _b;
-                    return ((_a = a.attribute.zIndex) !== null && _a !== void 0 ? _a : DefaultAttribute.zIndex) - ((_b = b.attribute.zIndex) !== null && _b !== void 0 ? _b : DefaultAttribute.zIndex);
-                })
-                    .forEach(group => {
-                    this.renderGroupHTML(group);
-                });
-            }
-        }
-        renderGroupHTML(group) {
-            this.renderGraphicHTML(group);
-            group.forEachChildren((g) => {
-                if (g.isContainer) {
-                    this.renderGroupHTML(g);
-                }
-                else {
-                    this.renderGraphicHTML(g);
-                }
-            });
-        }
-        removeDom(graphic) {
-            if (graphic.bindDom && graphic.bindDom.size) {
-                graphic.bindDom.forEach(item => {
-                    item.dom && item.dom.parentElement.removeChild(item.dom);
-                });
-                graphic.bindDom.clear();
-            }
-        }
-        renderGraphicHTML(graphic) {
-            const { html } = graphic.attribute;
-            if (!html) {
-                if (graphic.bindDom && graphic.bindDom.size) {
-                    graphic.bindDom.forEach(item => {
-                        item.dom && item.dom.parentElement.removeChild(item.dom);
-                    });
-                    graphic.bindDom.clear();
-                }
-                return;
-            }
-            const stage = graphic.stage;
-            if (!stage) {
-                return;
-            }
-            const { dom, container, width, height, style, anchorType = 'boundsLeftTop' } = html;
-            if (!graphic.bindDom) {
-                graphic.bindDom = new Map();
-            }
-            const lastDom = graphic.bindDom.get(dom);
-            if (lastDom && !(container && container !== lastDom.container)) {
-                return;
-            }
-            graphic.bindDom.forEach(({ wrapGroup }) => {
-                application.global.removeDom(wrapGroup);
-            });
-            let nativeDom;
-            if (typeof dom === 'string') {
-                nativeDom = new DOMParser().parseFromString(dom, 'text/html').firstChild;
-            }
-            else {
-                nativeDom = dom;
-            }
-            let nativeContainer;
-            const _container = container || (stage.params.enableHtmlAttribute === true ? null : stage.params.enableHtmlAttribute);
-            if (_container) {
-                if (typeof _container === 'string') {
-                    nativeContainer = application.global.getElementById(_container);
-                }
-                else {
-                    nativeContainer = _container;
-                }
-            }
-            else {
-                nativeContainer = graphic.stage.window.getContainer();
-            }
-            const wrapGroup = application.global.createDom({ tagName: 'div', width, height, style, parent: nativeContainer });
-            if (wrapGroup) {
-                wrapGroup.appendChild(nativeDom);
-                graphic.bindDom.set(dom, { dom: nativeDom, container, wrapGroup: wrapGroup });
-            }
-            wrapGroup.style.pointerEvents = 'none';
-            if (!wrapGroup.style.position) {
-                wrapGroup.style.position = 'absolute';
-                nativeContainer.style.position = 'relative';
-            }
-            let left = 0;
-            let top = 0;
-            if (anchorType === 'position') {
-                const matrix = graphic.transMatrix;
-                left = matrix.e;
-                top = matrix.f;
-            }
-            else {
-                const b = graphic.AABBBounds;
-                left = b.x1;
-                top = b.y1;
-            }
-            const containerTL = application.global.getElementTopLeft(nativeContainer, false);
-            const windowTL = stage.window.getTopLeft(false);
-            const offsetX = left + windowTL.left - containerTL.left;
-            const offsetTop = top + windowTL.top - containerTL.top;
-            wrapGroup.style.left = `${offsetX}px`;
-            wrapGroup.style.top = `${offsetTop}px`;
-        }
-    }
-
-    const globalBounds = new vutils.AABBBounds();
-    class DirtyBoundsPlugin {
-        constructor() {
-            this.name = 'DirtyBoundsPlugin';
-            this.activeEvent = 'onRegister';
-            this._uid = Generator.GenAutoIncrementId();
-            this.key = this.name + this._uid;
-        }
-        activate(context) {
-            this.pluginService = context;
-            context.stage.hooks.afterRender.tap(this.key, stage => {
-                if (!(stage && stage === this.pluginService.stage)) {
-                    return;
-                }
-                stage.dirtyBounds.clear();
-            });
-            application.graphicService.hooks.beforeUpdateAABBBounds.tap(this.key, (graphic, stage, willUpdate, bounds) => {
-                if (graphic.glyphHost) {
-                    graphic = graphic.glyphHost;
-                }
-                if (!(stage && stage === this.pluginService.stage && stage.renderCount)) {
-                    return;
-                }
-                if (graphic.isContainer && !graphic.shouldSelfChangeUpdateAABBBounds()) {
-                    return;
-                }
-                if (willUpdate) {
-                    globalBounds.setValue(bounds.x1, bounds.y1, bounds.x2, bounds.y2);
-                    stage.dirty(globalBounds, graphic.parent && graphic.parent.globalTransMatrix);
-                }
-            });
-            application.graphicService.hooks.afterUpdateAABBBounds.tap(this.key, (graphic, stage, bounds, params, selfChange) => {
-                if (!(stage && stage === this.pluginService.stage && stage.renderCount)) {
-                    return;
-                }
-                if (graphic.isContainer && !selfChange) {
-                    return;
-                }
-                stage.dirty(params.globalAABBBounds);
-            });
-            application.graphicService.hooks.onRemove.tap(this.key, (graphic) => {
-                const stage = graphic.stage;
-                if (!(stage && stage === this.pluginService.stage && stage.renderCount)) {
-                    return;
-                }
-                if (stage) {
-                    stage.dirty(graphic.globalAABBBounds);
-                }
-            });
-        }
-        deactivate(context) {
-            application.graphicService.hooks.beforeUpdateAABBBounds.taps =
-                application.graphicService.hooks.beforeUpdateAABBBounds.taps.filter(item => {
-                    return item.name !== this.key;
-                });
-            application.graphicService.hooks.afterUpdateAABBBounds.taps =
-                application.graphicService.hooks.afterUpdateAABBBounds.taps.filter(item => {
-                    return item.name !== this.key;
-                });
-            context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter(item => {
-                return item.name !== this.key;
-            });
-            application.graphicService.hooks.onRemove.taps = application.graphicService.hooks.onRemove.taps.filter(item => {
-                return item.name !== this.key;
-            });
-        }
-    }
-
-    const _tempBounds = new vutils.AABBBounds();
-    class FlexLayoutPlugin {
-        constructor() {
-            this.name = 'FlexLayoutPlugin';
-            this.activeEvent = 'onRegister';
-            this.id = Generator.GenAutoIncrementId();
-            this.key = this.name + this.id;
-            this.tempBounds = new vutils.AABBBounds();
-        }
-        tryLayout(graphic) {
-            const p = graphic.parent;
-            if (!p || !graphic.needUpdateLayout()) {
-                return;
-            }
-            const theme = getTheme(p).group;
-            const { display = theme.display } = p.attribute;
-            if (display !== 'flex') {
-                return;
-            }
-            const { flexDirection = theme.flexDirection, flexWrap = theme.flexWrap, justifyContent = theme.justifyContent, alignItems = theme.alignItems, alignContent = theme.alignContent, clip = theme.clip } = p.attribute;
-            let childrenWidth = 0;
-            let childrenHeight = 0;
-            let boundsLegal = 0;
-            p.forEachChildren((child) => {
-                const bounds = child.AABBBounds;
-                if (flexDirection === 'column' || flexDirection === 'column-reverse') {
-                    childrenHeight += bounds.height();
-                    childrenWidth = Math.max(childrenWidth, bounds.width());
-                }
-                else {
-                    childrenWidth += bounds.width();
-                    childrenHeight = Math.max(childrenHeight, bounds.height());
-                }
-                boundsLegal += bounds.x1;
-                boundsLegal += bounds.y1;
-                boundsLegal += bounds.x2;
-                boundsLegal += bounds.y2;
+                boundsLegal += bounds.x1;
+                boundsLegal += bounds.y1;
+                boundsLegal += bounds.x2;
+                boundsLegal += bounds.y2;
             });
             if (!isFinite(boundsLegal)) {
                 return;
@@ -26076,802 +25412,1531 @@
         getLineDash() {
             return [];
         }
-        isPointInPath(x, y) {
-            this.matrix.transformPoint({ x, y }, globalPoint);
-            return contain(this.path.commandList, globalPoint.x, globalPoint.y);
+        isPointInPath(x, y) {
+            this.matrix.transformPoint({ x, y }, globalPoint);
+            return contain(this.path.commandList, globalPoint.x, globalPoint.y);
+        }
+        isPointInStroke(x, y) {
+            if (!this.lineWidth) {
+                return false;
+            }
+            this.matrix.transformPoint({ x, y }, globalPoint);
+            const lineWidth = getScaledStroke(this, this.lineWidth, this.dpr);
+            return containStroke(this.path.commandList, lineWidth, globalPoint.x, globalPoint.y);
+        }
+        measureText(text) {
+            throw new Error('不支持measureText');
+        }
+        putImageData(imagedata, dx, dy) {
+            throw new Error('不支持measureText');
+        }
+        setLineDash(segments) {
+            return;
+        }
+        stroke(path) {
+            return;
+        }
+        strokeRect(x, y, width, height) {
+            this.path.rect(x, y, width, height);
+        }
+        strokeText(text, x, y) {
+            return;
+        }
+        drawImage() {
+            return;
+        }
+        setCommonStyle(params, attribute, offsetX, offsetY, defaultParams) {
+            return;
+        }
+        _setCommonStyle(params, offsetX, offsetY, defaultParams) {
+            return;
+        }
+        setStrokeStyle(params, attribute, offsetX, offsetY, defaultParams) {
+            return;
+        }
+        _setStrokeStyle(params, offsetX, offsetY, defaultParams) {
+            return;
+        }
+        setTextStyleWithoutAlignBaseline(params, defaultParams) {
+            return;
+        }
+        setTextStyle(params, defaultParams) {
+            return;
+        }
+        draw() {
+            return;
+        }
+        clearMatrix(setTransform = true, dpr = this.dpr) {
+            this.setTransformFromMatrix(initMatrix, setTransform, dpr);
+        }
+        onlyTranslate(dpr = this.dpr) {
+            return this.matrix.a === dpr && this.matrix.b === 0 && this.matrix.c === 0 && this.matrix.d === dpr;
+        }
+        release(...params) {
+            this.stack.forEach(m => matrixAllocate.free(m));
+            this.stack.length = 0;
+            return;
+        }
+    };
+    exports.EmptyContext2d = __decorate([
+        injectable(),
+        __metadata("design:paramtypes", [Object, Number])
+    ], exports.EmptyContext2d);
+
+    const DefaultConfig = {
+        WIDTH: 500,
+        HEIGHT: 500,
+        DPR: 1
+    };
+    exports.BaseCanvas = class BaseCanvas {
+        get displayWidth() {
+            return this._pixelWidth / this._dpr;
+        }
+        get displayHeight() {
+            return this._pixelHeight / this._dpr;
+        }
+        get id() {
+            return this._id;
+        }
+        get x() {
+            return this._x;
+        }
+        set x(_x) {
+            this._x = _x;
+        }
+        get y() {
+            return this._y;
+        }
+        set y(_y) {
+            this._y = _y;
+        }
+        get nativeCanvas() {
+            return this._nativeCanvas;
+        }
+        get width() {
+            return this._pixelWidth;
+        }
+        set width(width) {
+            this._pixelWidth = width;
+            this._displayWidth = width / (this._dpr || 1);
+        }
+        get height() {
+            return this._pixelHeight;
+        }
+        set height(height) {
+            this._pixelHeight = height;
+            this._displayHeight = height / (this._dpr || 1);
+        }
+        getContext(str) {
+            return this._context;
+        }
+        get visiable() {
+            return this._visiable;
+        }
+        set visiable(visiable) {
+            this._visiable = visiable;
+            visiable ? this.show() : this.hide();
+        }
+        get dpr() {
+            return this._dpr;
+        }
+        set dpr(dpr) {
+            this._dpr = dpr;
+            this.resize(this._displayWidth, this._displayHeight);
+        }
+        constructor(params) {
+            var _a;
+            const { nativeCanvas, width = DefaultConfig.WIDTH, height = DefaultConfig.HEIGHT, dpr = DefaultConfig.DPR, x, y, id, canvasControled = true } = params;
+            const offsetX = 0;
+            const offsetY = 0;
+            this._x = x !== null && x !== void 0 ? x : offsetX;
+            this._y = y !== null && y !== void 0 ? y : offsetY;
+            this._pixelWidth = width * dpr;
+            this._pixelHeight = height * dpr;
+            this._visiable = params.visiable !== false;
+            this.controled = canvasControled;
+            this._displayWidth = width;
+            this._displayHeight = height;
+            this._dpr = dpr;
+            this._nativeCanvas = nativeCanvas;
+            this._id = (_a = nativeCanvas.id) !== null && _a !== void 0 ? _a : id;
+            if (id) {
+                nativeCanvas.id = id;
+            }
+            this.init(params);
+        }
+        getNativeCanvas() {
+            return this._nativeCanvas;
+        }
+        hide() {
+            return;
+        }
+        show() {
+            return;
+        }
+        applyPosition() {
+            return;
+        }
+        resetStyle(params) {
+            return;
+        }
+        resize(width, height) {
+            return;
+        }
+        toDataURL(mimeType, quality) {
+            return '';
+        }
+        readPixels(x, y, w, h) {
+            return this._context.getImageData(x, y, w, h);
+        }
+        convertToBlob(options) {
+            throw new Error('暂未实现');
+        }
+        transferToImageBitmap() {
+            throw new Error('暂未实现');
+        }
+        release(...params) {
+            if (this.controled) {
+                this._nativeCanvas.parentElement && this._nativeCanvas.parentElement.removeChild(this._nativeCanvas);
+            }
+        }
+    };
+    exports.BaseCanvas.env = 'browser';
+    exports.BaseCanvas = __decorate([
+        injectable(),
+        __metadata("design:paramtypes", [Object])
+    ], exports.BaseCanvas);
+
+    exports.BaseEnvContribution = class BaseEnvContribution {
+        configure(service, ...p) {
+            if (service.env === this.type) {
+                service.setActiveEnvContribution(this);
+            }
+        }
+        getNativeAABBBounds(dom) {
+            return new vutils.AABBBounds();
+        }
+        removeDom(dom) {
+            return false;
+        }
+        createDom(params) {
+            return null;
+        }
+        getDynamicCanvasCount() {
+            return 999;
+        }
+        getStaticCanvasCount() {
+            return 999;
+        }
+        getElementById(str) {
+            return document.getElementById(str);
+        }
+        getRootElement() {
+            return document.body;
         }
-        isPointInStroke(x, y) {
-            if (!this.lineWidth) {
-                return false;
-            }
-            this.matrix.transformPoint({ x, y }, globalPoint);
-            const lineWidth = getScaledStroke(this, this.lineWidth, this.dpr);
-            return containStroke(this.path.commandList, lineWidth, globalPoint.x, globalPoint.y);
+        loadJson(url) {
+            const jsonPromise = fetch(url).then(data => data.json());
+            jsonPromise
+                .then(json => {
+                return {
+                    data: json,
+                    state: 'success'
+                };
+            })
+                .catch(() => {
+                return {
+                    data: null,
+                    state: 'fail'
+                };
+            });
+            return jsonPromise;
         }
-        measureText(text) {
-            throw new Error('不支持measureText');
+        loadArrayBuffer(url) {
+            const arrayBufferPromise = fetch(url).then(data => data.arrayBuffer());
+            return arrayBufferPromise
+                .then((arrayBuffer) => {
+                return {
+                    data: arrayBuffer,
+                    loadState: 'success'
+                };
+            })
+                .catch(() => {
+                return {
+                    data: null,
+                    loadState: 'fail'
+                };
+            });
         }
-        putImageData(imagedata, dx, dy) {
-            throw new Error('不支持measureText');
+        loadBlob(url) {
+            const blobPromise = fetch(url).then(data => data.blob());
+            return blobPromise
+                .then((blob) => {
+                return {
+                    data: blob,
+                    loadState: 'success'
+                };
+            })
+                .catch(() => {
+                return {
+                    data: null,
+                    loadState: 'fail'
+                };
+            });
         }
-        setLineDash(segments) {
-            return;
+        getElementTop(dom, baseWindow) {
+            return 0;
         }
-        stroke(path) {
-            return;
+        getElementLeft(dom, baseWindow) {
+            return 0;
         }
-        strokeRect(x, y, width, height) {
-            this.path.rect(x, y, width, height);
+        getElementTopLeft(dom, baseWindow) {
+            return { top: 0, left: 0 };
         }
-        strokeText(text, x, y) {
-            return;
+    };
+    exports.BaseEnvContribution = __decorate([
+        injectable()
+    ], exports.BaseEnvContribution);
+
+    exports.BaseWindowHandlerContribution = class BaseWindowHandlerContribution {
+        constructor() {
+            this._uid = Generator.GenAutoIncrementId();
         }
-        drawImage() {
-            return;
+        onChange(cb) {
+            this._onChangeCb = cb;
         }
-        setCommonStyle(params, attribute, offsetX, offsetY, defaultParams) {
-            return;
+        configure(window, global) {
+            if (global.env === this.type) {
+                window.setWindowHandler(this);
+            }
         }
-        _setCommonStyle(params, offsetX, offsetY, defaultParams) {
-            return;
+        release(...params) {
+            this.releaseWindow();
         }
-        setStrokeStyle(params, attribute, offsetX, offsetY, defaultParams) {
-            return;
+        isVisible(bbox) {
+            return true;
         }
-        _setStrokeStyle(params, offsetX, offsetY, defaultParams) {
+        onVisibleChange(cb) {
             return;
         }
-        setTextStyleWithoutAlignBaseline(params, defaultParams) {
-            return;
+        getTopLeft(baseWindow) {
+            return {
+                top: 0,
+                left: 0
+            };
         }
-        setTextStyle(params, defaultParams) {
-            return;
+    };
+    exports.BaseWindowHandlerContribution = __decorate([
+        injectable(),
+        __metadata("design:paramtypes", [])
+    ], exports.BaseWindowHandlerContribution);
+
+    exports.DefaultPickService = class DefaultPickService {
+        constructor(pickItemInterceptorContributions) {
+            this.pickItemInterceptorContributions = pickItemInterceptorContributions;
+            this.type = 'default';
+            this.global = application.global;
         }
-        draw() {
-            return;
+        _init() {
+            this.InterceptorContributions = this.pickItemInterceptorContributions
+                .getContributions()
+                .sort((a, b) => a.order - b.order);
         }
-        clearMatrix(setTransform = true, dpr = this.dpr) {
-            this.setTransformFromMatrix(initMatrix, setTransform, dpr);
+        pick(graphics, point, params) {
+            let result = {
+                graphic: null,
+                group: null
+            };
+            params.pickerService = this;
+            let offsetX = 0;
+            let offsetY = 0;
+            if (params && params.bounds) {
+                if (!params.bounds.contains(point.x, point.y)) {
+                    return result;
+                }
+                offsetX = params.bounds.x1;
+                offsetY = params.bounds.y1;
+            }
+            if (this.pickContext) {
+                this.pickContext.inuse = true;
+            }
+            params.pickContext = this.pickContext;
+            this.pickContext && this.pickContext.clearMatrix(true, 1);
+            const parentMatrix = new vutils.Matrix(1, 0, 0, 1, offsetX, offsetY);
+            let group;
+            for (let i = graphics.length - 1; i >= 0; i--) {
+                if (graphics[i].isContainer) {
+                    result = this.pickGroup(graphics[i], point, parentMatrix, params);
+                }
+                else {
+                    result = this.pickItem(graphics[i], point, parentMatrix, params);
+                }
+                if (result.graphic) {
+                    break;
+                }
+                if (!group) {
+                    group = result.group;
+                }
+            }
+            if (!result.graphic) {
+                result.group = group;
+            }
+            if (this.pickContext) {
+                this.pickContext.inuse = false;
+            }
+            if (result.graphic) {
+                let g = result.graphic;
+                while (g.parent) {
+                    g = g.parent;
+                }
+                if (g.shadowHost) {
+                    result.params = {
+                        shadowTarget: result.graphic
+                    };
+                    result.graphic = g.shadowHost;
+                }
+            }
+            return result;
         }
-        onlyTranslate(dpr = this.dpr) {
-            return this.matrix.a === dpr && this.matrix.b === 0 && this.matrix.c === 0 && this.matrix.d === dpr;
+        containsPoint(graphic, point, params) {
+            var _a;
+            return !!((_a = this.pickItem(graphic, point, null, params !== null && params !== void 0 ? params : { pickContext: this.pickContext, pickerService: this })) === null || _a === void 0 ? void 0 : _a.graphic);
+        }
+        pickGroup(group, point, parentMatrix, params) {
+            let result = {
+                group: null,
+                graphic: null
+            };
+            if (group.attribute.visibleAll === false) {
+                return result;
+            }
+            const context = params.pickContext;
+            const lastMatrix = context.modelMatrix;
+            if (context.camera) {
+                const m = group.transMatrix;
+                const matrix = mat4Allocate.allocate();
+                mat3Tomat4(matrix, m);
+                if (lastMatrix) {
+                    if (matrix) {
+                        const m = mat4Allocate.allocate();
+                        context.modelMatrix = multiplyMat4Mat4(m, lastMatrix, matrix);
+                        mat4Allocate.free(matrix);
+                    }
+                }
+                else {
+                    mat3Tomat4(matrix, group.globalTransMatrix);
+                    context.modelMatrix = matrix;
+                }
+            }
+            if (this.InterceptorContributions.length) {
+                for (let i = 0; i < this.InterceptorContributions.length; i++) {
+                    const drawContribution = this.InterceptorContributions[i];
+                    if (drawContribution.beforePickItem) {
+                        const result = drawContribution.beforePickItem(group, this, point, params, { parentMatrix });
+                        if (result) {
+                            if (context.modelMatrix !== lastMatrix) {
+                                mat4Allocate.free(context.modelMatrix);
+                            }
+                            context.modelMatrix = lastMatrix;
+                            return result;
+                        }
+                    }
+                }
+            }
+            const transMatrix = group.transMatrix;
+            const currentGroupMatrix = matrixAllocate.allocateByObj(parentMatrix);
+            const newPoint = new vutils.Point(point.x, point.y);
+            currentGroupMatrix.transformPoint(newPoint, newPoint);
+            const insideGroup = group.AABBBounds.containsPoint(newPoint);
+            if (!insideGroup && !group.stage.camera) {
+                return result;
+            }
+            const pickedItem = this.pickItem(group, newPoint.clone(), parentMatrix, params);
+            if (pickedItem && pickedItem.graphic) {
+                result.graphic = pickedItem.graphic;
+                result.params = pickedItem.params;
+            }
+            const groupPicked = group.attribute.pickable !== false && insideGroup;
+            currentGroupMatrix.multiply(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f);
+            if (group.attribute.childrenPickable !== false && !(pickedItem && pickedItem.graphic)) {
+                foreach(group, DefaultAttribute.zIndex, (graphic) => {
+                    if (graphic.isContainer) {
+                        const newPoint = new vutils.Point(point.x, point.y);
+                        const theme = getTheme(group).group;
+                        const { scrollX = theme.scrollX, scrollY = theme.scrollY } = group.attribute;
+                        newPoint.x -= scrollX;
+                        newPoint.y -= scrollY;
+                        result = this.pickGroup(graphic, newPoint, currentGroupMatrix, params);
+                    }
+                    else {
+                        const newPoint = new vutils.Point(point.x, point.y);
+                        currentGroupMatrix.transformPoint(newPoint, newPoint);
+                        const theme = getTheme(group).group;
+                        const { scrollX = theme.scrollX, scrollY = theme.scrollY } = group.attribute;
+                        newPoint.x -= scrollX;
+                        newPoint.y -= scrollY;
+                        const pickedItem = this.pickItem(graphic, newPoint, parentMatrix, params);
+                        if (pickedItem && pickedItem.graphic) {
+                            result.graphic = pickedItem.graphic;
+                            result.params = pickedItem.params;
+                        }
+                    }
+                    return !!result.graphic || !!result.group;
+                }, true, !!context.camera);
+            }
+            if (context.modelMatrix !== lastMatrix) {
+                mat4Allocate.free(context.modelMatrix);
+            }
+            context.modelMatrix = lastMatrix;
+            if (!result.graphic && !result.group && groupPicked && !group.stage.camera) {
+                result.group = group;
+            }
+            matrixAllocate.free(currentGroupMatrix);
+            return result;
         }
-        release(...params) {
-            this.stack.forEach(m => matrixAllocate.free(m));
-            this.stack.length = 0;
-            return;
+        selectPicker(graphic) {
+            const picker = this.pickerMap.get(graphic.numberType);
+            if (!picker) {
+                return null;
+            }
+            return picker;
         }
     };
-    exports.EmptyContext2d = __decorate([
+    exports.DefaultPickService = __decorate([
         injectable(),
-        __metadata("design:paramtypes", [Object, Number])
-    ], exports.EmptyContext2d);
+        __param(0, inject(ContributionProvider)),
+        __param(0, named(PickItemInterceptor)),
+        __metadata("design:paramtypes", [Object])
+    ], exports.DefaultPickService);
 
-    const DefaultConfig = {
-        WIDTH: 500,
-        HEIGHT: 500,
-        DPR: 1
-    };
-    exports.BaseCanvas = class BaseCanvas {
-        get displayWidth() {
-            return this._pixelWidth / this._dpr;
-        }
-        get displayHeight() {
-            return this._pixelHeight / this._dpr;
-        }
-        get id() {
-            return this._id;
-        }
-        get x() {
-            return this._x;
-        }
-        set x(_x) {
-            this._x = _x;
-        }
-        get y() {
-            return this._y;
-        }
-        set y(_y) {
-            this._y = _y;
-        }
-        get nativeCanvas() {
-            return this._nativeCanvas;
-        }
-        get width() {
-            return this._pixelWidth;
-        }
-        set width(width) {
-            this._pixelWidth = width;
-            this._displayWidth = width / (this._dpr || 1);
-        }
-        get height() {
-            return this._pixelHeight;
-        }
-        set height(height) {
-            this._pixelHeight = height;
-            this._displayHeight = height / (this._dpr || 1);
-        }
-        getContext(str) {
-            return this._context;
-        }
-        get visiable() {
-            return this._visiable;
+    exports.DefaultGlobalPickerService = class DefaultGlobalPickerService {
+        constructor() {
+            this.global = application.global;
+            this.global.hooks.onSetEnv.tap('global-picker-service', (lastEnv, env, global) => {
+                this.configure(global, env);
+            });
+            this.configure(this.global, this.global.env);
         }
-        set visiable(visiable) {
-            this._visiable = visiable;
-            visiable ? this.show() : this.hide();
+        configure(global, env) {
         }
-        get dpr() {
-            return this._dpr;
+        pick(graphics, point, params) {
+            let result = {
+                graphic: null,
+                group: null
+            };
+            const parentMatrix = new vutils.Matrix(1, 0, 0, 1, 0, 0);
+            let group;
+            for (let i = 0; i < graphics.length; i++) {
+                if (graphics[i].isContainer) {
+                    result = this.pickGroup(graphics[i], point, parentMatrix, params);
+                }
+                else {
+                    const data = this.pickItem(graphics[i], point, parentMatrix, params);
+                    if (data) {
+                        result.graphic = data.graphic;
+                        result.params = data.params;
+                    }
+                }
+                if (result.graphic) {
+                    break;
+                }
+                if (!group) {
+                    group = result.group;
+                }
+            }
+            if (!result.graphic) {
+                result.group = group;
+            }
+            if (result.graphic) {
+                let g = result.graphic;
+                while (g.parent) {
+                    g = g.parent;
+                }
+                if (g.shadowHost) {
+                    result.params = {
+                        shadowTarget: result.graphic
+                    };
+                    result.graphic = g.shadowHost;
+                }
+            }
+            return result;
         }
-        set dpr(dpr) {
-            this._dpr = dpr;
-            this.resize(this._displayWidth, this._displayHeight);
+        containsPoint(graphic, point, params) {
+            return !!this.pickItem(graphic, point, null, params);
         }
-        constructor(params) {
-            var _a;
-            const { nativeCanvas, width = DefaultConfig.WIDTH, height = DefaultConfig.HEIGHT, dpr = DefaultConfig.DPR, x, y, id, canvasControled = true } = params;
-            const offsetX = 0;
-            const offsetY = 0;
-            this._x = x !== null && x !== void 0 ? x : offsetX;
-            this._y = y !== null && y !== void 0 ? y : offsetY;
-            this._pixelWidth = width * dpr;
-            this._pixelHeight = height * dpr;
-            this._visiable = params.visiable !== false;
-            this.controled = canvasControled;
-            this._displayWidth = width;
-            this._displayHeight = height;
-            this._dpr = dpr;
-            this._nativeCanvas = nativeCanvas;
-            this._id = (_a = nativeCanvas.id) !== null && _a !== void 0 ? _a : id;
-            if (id) {
-                nativeCanvas.id = id;
+        pickGroup(group, point, parentMatrix, params) {
+            let result = {
+                group: null,
+                graphic: null
+            };
+            if (group.attribute.visibleAll === false) {
+                return result;
             }
-            this.init(params);
-        }
-        getNativeCanvas() {
-            return this._nativeCanvas;
+            const transMatrix = group.transMatrix;
+            const newPoint = new vutils.Point(point.x, point.y);
+            parentMatrix.transformPoint(newPoint, newPoint);
+            const insideGroup = group.AABBBounds.containsPoint(newPoint);
+            if (!insideGroup) {
+                return result;
+            }
+            const groupPicked = group.attribute.pickable !== false && insideGroup;
+            parentMatrix.multiply(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f);
+            if (group.attribute.childrenPickable !== false) {
+                group.forEachChildren((graphic) => {
+                    if (graphic.isContainer) {
+                        result = this.pickGroup(graphic, point, parentMatrix, params);
+                    }
+                    else {
+                        const newPoint = new vutils.Point(point.x, point.y);
+                        parentMatrix.transformPoint(newPoint, newPoint);
+                        const data = this.pickItem(graphic, newPoint, parentMatrix, params);
+                        if (data) {
+                            result.graphic = data.graphic;
+                            result.params = data.params;
+                        }
+                    }
+                    return !!result.graphic || !!result.group;
+                });
+            }
+            if (!result.graphic && !result.group && groupPicked) {
+                result.group = group;
+            }
+            return result;
         }
-        hide() {
-            return;
+        pickItem(graphic, point, parentMatrix, params) {
+            if (graphic.attribute.pickable === false) {
+                return null;
+            }
+            if (graphic.AABBBounds.containsPoint(point)) {
+                return {
+                    graphic: graphic
+                };
+            }
+            return null;
         }
-        show() {
-            return;
+    };
+    exports.DefaultGlobalPickerService = __decorate([
+        injectable(),
+        __metadata("design:paramtypes", [])
+    ], exports.DefaultGlobalPickerService);
+
+    class DefaultGraphicAllocate {
+        constructor() {
+            this.pools = [];
         }
-        applyPosition() {
-            return;
+        free(d) {
+            this.pools.push(d);
         }
-        resetStyle(params) {
-            return;
+        get length() {
+            return this.pools.length;
         }
-        resize(width, height) {
-            return;
+        release(...params) {
+            this.pools = [];
         }
-        toDataURL(mimeType, quality) {
-            return '';
+    }
+    class DefaultRectAllocate extends DefaultGraphicAllocate {
+        allocate(attribute) {
+            if (!this.pools.length) {
+                return application.graphicService.creator.rect(attribute);
+            }
+            const g = this.pools.pop();
+            g.initAttributes(attribute);
+            return g;
         }
-        readPixels(x, y, w, h) {
-            return this._context.getImageData(x, y, w, h);
+        allocateByObj(rect) {
+            if (!this.pools.length) {
+                return application.graphicService.creator.rect(rect.attribute);
+            }
+            const g = this.pools.pop();
+            g.initAttributes(rect.attribute);
+            return g;
         }
-        convertToBlob(options) {
-            throw new Error('暂未实现');
+    }
+    const defaultRectAllocate = new DefaultRectAllocate();
+    class DefaultArcAllocate extends DefaultGraphicAllocate {
+        allocate(attribute) {
+            if (!this.pools.length) {
+                return application.graphicService.creator.arc(attribute);
+            }
+            const g = this.pools.pop();
+            g.initAttributes(attribute);
+            return g;
         }
-        transferToImageBitmap() {
-            throw new Error('暂未实现');
+        allocateByObj(arc) {
+            if (!this.pools.length) {
+                return application.graphicService.creator.arc(arc.attribute);
+            }
+            const g = this.pools.pop();
+            g.initAttributes(arc.attribute);
+            return g;
         }
-        release(...params) {
-            if (this.controled) {
-                this._nativeCanvas.parentElement && this._nativeCanvas.parentElement.removeChild(this._nativeCanvas);
+    }
+    const defaultArcAllocate = new DefaultArcAllocate();
+    class DefaultAreaAllocate extends DefaultGraphicAllocate {
+        allocate(attribute) {
+            if (!this.pools.length) {
+                return application.graphicService.creator.area(attribute);
             }
+            const g = this.pools.pop();
+            g.initAttributes(attribute);
+            return g;
         }
-    };
-    exports.BaseCanvas.env = 'browser';
-    exports.BaseCanvas = __decorate([
-        injectable(),
-        __metadata("design:paramtypes", [Object])
-    ], exports.BaseCanvas);
-
-    exports.BaseEnvContribution = class BaseEnvContribution {
-        configure(service, ...p) {
-            if (service.env === this.type) {
-                service.setActiveEnvContribution(this);
+        allocateByObj(area) {
+            if (!this.pools.length) {
+                return application.graphicService.creator.area(area.attribute);
             }
+            const g = this.pools.pop();
+            g.initAttributes(area.attribute);
+            return g;
         }
-        getNativeAABBBounds(dom) {
-            return new vutils.AABBBounds();
+    }
+    const defaultAreaAllocate = new DefaultAreaAllocate();
+    class DefaultCircleAllocate extends DefaultGraphicAllocate {
+        allocate(attribute) {
+            if (!this.pools.length) {
+                return application.graphicService.creator.circle(attribute);
+            }
+            const g = this.pools.pop();
+            g.initAttributes(attribute);
+            return g;
         }
-        removeDom(dom) {
-            return false;
+        allocateByObj(area) {
+            if (!this.pools.length) {
+                return application.graphicService.creator.circle(area.attribute);
+            }
+            const g = this.pools.pop();
+            g.initAttributes(area.attribute);
+            return g;
         }
-        createDom(params) {
-            return null;
+    }
+    const defaultCircleAllocate = new DefaultCircleAllocate();
+    class DefaultLineAllocate extends DefaultGraphicAllocate {
+        allocate(attribute) {
+            if (!this.pools.length) {
+                return application.graphicService.creator.line(attribute);
+            }
+            const g = this.pools.pop();
+            g.initAttributes(attribute);
+            return g;
         }
-        getDynamicCanvasCount() {
-            return 999;
+        allocateByObj(line) {
+            if (!this.pools.length) {
+                return application.graphicService.creator.line(line.attribute);
+            }
+            const g = this.pools.pop();
+            g.initAttributes(line.attribute);
+            return g;
         }
-        getStaticCanvasCount() {
-            return 999;
+    }
+    const defaultLineAllocate = new DefaultLineAllocate();
+    class DefaultPathAllocate extends DefaultGraphicAllocate {
+        allocate(attribute) {
+            if (!this.pools.length) {
+                return application.graphicService.creator.path(attribute);
+            }
+            const g = this.pools.pop();
+            g.initAttributes(attribute);
+            return g;
         }
-        getElementById(str) {
-            return document.getElementById(str);
+        allocateByObj(path) {
+            if (!this.pools.length) {
+                return application.graphicService.creator.path(path.attribute);
+            }
+            const g = this.pools.pop();
+            g.initAttributes(path.attribute);
+            return g;
         }
-        getRootElement() {
-            return document.body;
+    }
+    const defaultPathAllocate = new DefaultPathAllocate();
+    class DefaultSymbolAllocate extends DefaultGraphicAllocate {
+        allocate(attribute) {
+            if (!this.pools.length) {
+                return application.graphicService.creator.symbol(attribute);
+            }
+            const g = this.pools.pop();
+            g.initAttributes(attribute);
+            return g;
         }
-        loadJson(url) {
-            const jsonPromise = fetch(url).then(data => data.json());
-            jsonPromise
-                .then(json => {
-                return {
-                    data: json,
-                    state: 'success'
-                };
-            })
-                .catch(() => {
-                return {
-                    data: null,
-                    state: 'fail'
-                };
-            });
-            return jsonPromise;
+        allocateByObj(symbol) {
+            if (!this.pools.length) {
+                return application.graphicService.creator.symbol(symbol.attribute);
+            }
+            const g = this.pools.pop();
+            g.initAttributes(symbol.attribute);
+            return g;
         }
-        loadArrayBuffer(url) {
-            const arrayBufferPromise = fetch(url).then(data => data.arrayBuffer());
-            return arrayBufferPromise
-                .then((arrayBuffer) => {
-                return {
-                    data: arrayBuffer,
-                    loadState: 'success'
-                };
-            })
-                .catch(() => {
-                return {
-                    data: null,
-                    loadState: 'fail'
-                };
-            });
+    }
+    const defaultSymbolAllocate = new DefaultSymbolAllocate();
+    class DefaultTextAllocate extends DefaultGraphicAllocate {
+        allocate(attribute) {
+            if (!this.pools.length) {
+                return application.graphicService.creator.text(attribute);
+            }
+            const g = this.pools.pop();
+            g.initAttributes(attribute);
+            return g;
         }
-        loadBlob(url) {
-            const blobPromise = fetch(url).then(data => data.blob());
-            return blobPromise
-                .then((blob) => {
-                return {
-                    data: blob,
-                    loadState: 'success'
-                };
-            })
-                .catch(() => {
-                return {
-                    data: null,
-                    loadState: 'fail'
-                };
-            });
+        allocateByObj(text) {
+            if (!this.pools.length) {
+                return application.graphicService.creator.text(text.attribute);
+            }
+            const g = this.pools.pop();
+            g.initAttributes(text.attribute);
+            return g;
         }
-        getElementTop(dom, baseWindow) {
-            return 0;
+    }
+    const defaultTextAllocate = new DefaultTextAllocate();
+    class DefaultGraphicMemoryManager {
+        constructor() {
+            this.map = {
+                text: defaultTextAllocate,
+                symbol: defaultSymbolAllocate
+            };
         }
-        getElementLeft(dom, baseWindow) {
-            return 0;
+        gc(g) {
+            if (g.isContainer) {
+                g.forEachChildren(i => this.gc(i));
+            }
+            else {
+                this.gcItem(g);
+            }
         }
-        getElementTopLeft(dom, baseWindow) {
-            return { top: 0, left: 0 };
+        gcItem(g) {
+            const allocate = this.map[g.type];
+            if (allocate) {
+                allocate.free(g);
+            }
         }
-    };
-    exports.BaseEnvContribution = __decorate([
-        injectable()
-    ], exports.BaseEnvContribution);
+    }
+    const defaultGraphicMemoryManager = new DefaultGraphicMemoryManager();
 
-    exports.BaseWindowHandlerContribution = class BaseWindowHandlerContribution {
-        constructor() {
-            this._uid = Generator.GenAutoIncrementId();
-        }
-        onChange(cb) {
-            this._onChangeCb = cb;
+    let loadArcModule = false;
+    const arcModule = new ContainerModule(bind => {
+        if (loadArcModule) {
+            return;
         }
-        configure(window, global) {
-            if (global.env === this.type) {
-                window.setWindowHandler(this);
-            }
+        loadArcModule = true;
+        bind(exports.DefaultCanvasArcRender).toSelf().inSingletonScope();
+        bind(ArcRender).to(exports.DefaultCanvasArcRender).inSingletonScope();
+        bind(GraphicRender).toService(ArcRender);
+        bind(ArcRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution);
+        bindContributionProvider(bind, ArcRenderContribution);
+    });
+
+    let loadRectModule = false;
+    const rectModule = new ContainerModule(bind => {
+        if (loadRectModule) {
+            return;
         }
-        release(...params) {
-            this.releaseWindow();
+        loadRectModule = true;
+        bind(exports.DefaultCanvasRectRender).toSelf().inSingletonScope();
+        bind(RectRender).to(exports.DefaultCanvasRectRender).inSingletonScope();
+        bind(GraphicRender).toService(RectRender);
+        bind(RectRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution);
+        bindContributionProvider(bind, RectRenderContribution);
+    });
+
+    let loadLineModule = false;
+    const lineModule = new ContainerModule(bind => {
+        if (loadLineModule) {
+            return;
         }
-        isVisible(bbox) {
-            return true;
+        loadLineModule = true;
+        bind(exports.DefaultCanvasLineRender).toSelf().inSingletonScope();
+        bind(DefaultIncrementalCanvasLineRender).toSelf().inSingletonScope();
+        bind(LineRender).to(exports.DefaultCanvasLineRender).inSingletonScope();
+        bind(GraphicRender).toService(LineRender);
+    });
+
+    let loadAreaModule = false;
+    const areaModule = new ContainerModule(bind => {
+        if (loadAreaModule) {
+            return;
         }
-        onVisibleChange(cb) {
+        loadAreaModule = true;
+        bind(exports.DefaultCanvasAreaRender).toSelf().inSingletonScope();
+        bind(AreaRender).to(exports.DefaultCanvasAreaRender).inSingletonScope();
+        bind(GraphicRender).toService(AreaRender);
+        bind(AreaRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution);
+        bindContributionProvider(bind, AreaRenderContribution);
+        bind(DefaultIncrementalCanvasAreaRender).toSelf().inSingletonScope();
+    });
+
+    let loadSymbolModule = false;
+    const symbolModule = new ContainerModule(bind => {
+        if (loadSymbolModule) {
             return;
         }
-        getTopLeft(baseWindow) {
-            return {
-                top: 0,
-                left: 0
-            };
+        loadSymbolModule = true;
+        bind(exports.DefaultCanvasSymbolRender).toSelf().inSingletonScope();
+        bind(SymbolRender).to(exports.DefaultCanvasSymbolRender).inSingletonScope();
+        bind(GraphicRender).toService(SymbolRender);
+        bind(SymbolRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution);
+        bindContributionProvider(bind, SymbolRenderContribution);
+    });
+
+    let loadCircleModule = false;
+    const circleModule = new ContainerModule(bind => {
+        if (loadCircleModule) {
+            return;
         }
-    };
-    exports.BaseWindowHandlerContribution = __decorate([
-        injectable(),
-        __metadata("design:paramtypes", [])
-    ], exports.BaseWindowHandlerContribution);
+        loadCircleModule = true;
+        bind(exports.DefaultCanvasCircleRender).toSelf().inSingletonScope();
+        bind(CircleRender).to(exports.DefaultCanvasCircleRender).inSingletonScope();
+        bind(GraphicRender).toService(CircleRender);
+        bind(CircleRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution);
+        bindContributionProvider(bind, CircleRenderContribution);
+    });
 
-    exports.DefaultPickService = class DefaultPickService {
-        constructor(pickItemInterceptorContributions) {
-            this.pickItemInterceptorContributions = pickItemInterceptorContributions;
-            this.type = 'default';
-            this.global = application.global;
+    let loadTextModule = false;
+    const textModule = new ContainerModule(bind => {
+        if (loadTextModule) {
+            return;
         }
-        _init() {
-            this.InterceptorContributions = this.pickItemInterceptorContributions
-                .getContributions()
-                .sort((a, b) => a.order - b.order);
+        loadTextModule = true;
+        bind(TextRender).to(exports.DefaultCanvasTextRender).inSingletonScope();
+        bind(GraphicRender).toService(TextRender);
+        bind(TextRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution);
+        bindContributionProvider(bind, TextRenderContribution);
+    });
+
+    let loadPathModule = false;
+    const pathModule = new ContainerModule(bind => {
+        if (loadPathModule) {
+            return;
         }
-        pick(graphics, point, params) {
-            let result = {
-                graphic: null,
-                group: null
-            };
-            params.pickerService = this;
-            let offsetX = 0;
-            let offsetY = 0;
-            if (params && params.bounds) {
-                if (!params.bounds.contains(point.x, point.y)) {
-                    return result;
-                }
-                offsetX = params.bounds.x1;
-                offsetY = params.bounds.y1;
-            }
-            if (this.pickContext) {
-                this.pickContext.inuse = true;
-            }
-            params.pickContext = this.pickContext;
-            this.pickContext && this.pickContext.clearMatrix(true, 1);
-            const parentMatrix = new vutils.Matrix(1, 0, 0, 1, offsetX, offsetY);
-            let group;
-            for (let i = graphics.length - 1; i >= 0; i--) {
-                if (graphics[i].isContainer) {
-                    result = this.pickGroup(graphics[i], point, parentMatrix, params);
-                }
-                else {
-                    result = this.pickItem(graphics[i], point, parentMatrix, params);
-                }
-                if (result.graphic) {
-                    break;
-                }
-                if (!group) {
-                    group = result.group;
-                }
-            }
-            if (!result.graphic) {
-                result.group = group;
-            }
-            if (this.pickContext) {
-                this.pickContext.inuse = false;
-            }
-            if (result.graphic) {
-                let g = result.graphic;
-                while (g.parent) {
-                    g = g.parent;
-                }
-                if (g.shadowHost) {
-                    result.params = {
-                        shadowTarget: result.graphic
-                    };
-                    result.graphic = g.shadowHost;
-                }
-            }
-            return result;
+        loadPathModule = true;
+        bind(exports.DefaultCanvasPathRender).toSelf().inSingletonScope();
+        bind(PathRender).to(exports.DefaultCanvasPathRender).inSingletonScope();
+        bind(GraphicRender).toService(PathRender);
+        bind(PathRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution);
+        bindContributionProvider(bind, PathRenderContribution);
+    });
+
+    let loadPolygonModule = false;
+    const polygonModule = new ContainerModule(bind => {
+        if (loadPolygonModule) {
+            return;
         }
-        containsPoint(graphic, point, params) {
-            var _a;
-            return !!((_a = this.pickItem(graphic, point, null, params !== null && params !== void 0 ? params : { pickContext: this.pickContext, pickerService: this })) === null || _a === void 0 ? void 0 : _a.graphic);
+        loadPolygonModule = true;
+        bind(PolygonRender).to(exports.DefaultCanvasPolygonRender).inSingletonScope();
+        bind(GraphicRender).toService(PolygonRender);
+        bind(PolygonRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution);
+        bindContributionProvider(bind, PolygonRenderContribution);
+    });
+
+    let DefaultCanvasGlyphRender = class DefaultCanvasGlyphRender {
+        constructor() {
+            this.numberType = GLYPH_NUMBER_TYPE;
         }
-        pickGroup(group, point, parentMatrix, params) {
-            let result = {
-                group: null,
-                graphic: null
-            };
-            if (group.attribute.visibleAll === false) {
-                return result;
-            }
-            const context = params.pickContext;
-            const lastMatrix = context.modelMatrix;
-            if (context.camera) {
-                const m = group.transMatrix;
-                const matrix = mat4Allocate.allocate();
-                mat3Tomat4(matrix, m);
-                if (lastMatrix) {
-                    if (matrix) {
-                        const m = mat4Allocate.allocate();
-                        context.modelMatrix = multiplyMat4Mat4(m, lastMatrix, matrix);
-                        mat4Allocate.free(matrix);
-                    }
-                }
-                else {
-                    mat3Tomat4(matrix, group.globalTransMatrix);
-                    context.modelMatrix = matrix;
-                }
+        drawShape(glyph, context, x, y, drawContext, params, fillCb, strokeCb) {
+            if (!drawContext.drawContribution) {
+                return;
             }
-            if (this.InterceptorContributions.length) {
-                for (let i = 0; i < this.InterceptorContributions.length; i++) {
-                    const drawContribution = this.InterceptorContributions[i];
-                    if (drawContribution.beforePickItem) {
-                        const result = drawContribution.beforePickItem(group, this, point, params, { parentMatrix });
-                        if (result) {
-                            if (context.modelMatrix !== lastMatrix) {
-                                mat4Allocate.free(context.modelMatrix);
-                            }
-                            context.modelMatrix = lastMatrix;
-                            return result;
-                        }
-                    }
+            glyph.getSubGraphic().forEach(item => {
+                const renderer = drawContext.drawContribution.getRenderContribution(item);
+                if (renderer && renderer.drawShape) {
+                    renderer.drawShape(item, context, x, y, drawContext, params, fillCb, strokeCb);
                 }
-            }
-            const transMatrix = group.transMatrix;
-            const currentGroupMatrix = matrixAllocate.allocateByObj(parentMatrix);
-            const newPoint = new vutils.Point(point.x, point.y);
-            currentGroupMatrix.transformPoint(newPoint, newPoint);
-            const insideGroup = group.AABBBounds.containsPoint(newPoint);
-            if (!insideGroup && !group.stage.camera) {
-                return result;
-            }
-            const pickedItem = this.pickItem(group, newPoint.clone(), parentMatrix, params);
-            if (pickedItem && pickedItem.graphic) {
-                result.graphic = pickedItem.graphic;
-                result.params = pickedItem.params;
-            }
-            const groupPicked = group.attribute.pickable !== false && insideGroup;
-            currentGroupMatrix.multiply(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f);
-            if (group.attribute.childrenPickable !== false && !(pickedItem && pickedItem.graphic)) {
-                foreach(group, DefaultAttribute.zIndex, (graphic) => {
-                    if (graphic.isContainer) {
-                        const newPoint = new vutils.Point(point.x, point.y);
-                        const theme = getTheme(group).group;
-                        const { scrollX = theme.scrollX, scrollY = theme.scrollY } = group.attribute;
-                        newPoint.x -= scrollX;
-                        newPoint.y -= scrollY;
-                        result = this.pickGroup(graphic, newPoint, currentGroupMatrix, params);
-                    }
-                    else {
-                        const newPoint = new vutils.Point(point.x, point.y);
-                        currentGroupMatrix.transformPoint(newPoint, newPoint);
-                        const theme = getTheme(group).group;
-                        const { scrollX = theme.scrollX, scrollY = theme.scrollY } = group.attribute;
-                        newPoint.x -= scrollX;
-                        newPoint.y -= scrollY;
-                        const pickedItem = this.pickItem(graphic, newPoint, parentMatrix, params);
-                        if (pickedItem && pickedItem.graphic) {
-                            result.graphic = pickedItem.graphic;
-                            result.params = pickedItem.params;
-                        }
-                    }
-                    return !!result.graphic || !!result.group;
-                }, true, !!context.camera);
-            }
-            if (context.modelMatrix !== lastMatrix) {
-                mat4Allocate.free(context.modelMatrix);
-            }
-            context.modelMatrix = lastMatrix;
-            if (!result.graphic && !result.group && groupPicked && !group.stage.camera) {
-                result.group = group;
-            }
-            matrixAllocate.free(currentGroupMatrix);
-            return result;
+            });
         }
-        selectPicker(graphic) {
-            const picker = this.pickerMap.get(graphic.numberType);
-            if (!picker) {
-                return null;
+        draw(glyph, renderService, drawContext, params) {
+            const { context } = drawContext;
+            if (!context) {
+                return;
             }
-            return picker;
+            context.highPerformanceSave();
+            if (!drawContext.drawContribution) {
+                return;
+            }
+            const glyphTheme = getTheme(glyph);
+            const subGraphic = glyph.getSubGraphic();
+            subGraphic.length &&
+                subGraphic.forEach(g => {
+                    drawContext.drawContribution.renderItem(g, drawContext, { theme: glyphTheme });
+                });
+            context.highPerformanceRestore();
         }
     };
-    exports.DefaultPickService = __decorate([
-        injectable(),
-        __param(0, inject(ContributionProvider)),
-        __param(0, named(PickItemInterceptor)),
-        __metadata("design:paramtypes", [Object])
-    ], exports.DefaultPickService);
+    DefaultCanvasGlyphRender = __decorate([
+        injectable()
+    ], DefaultCanvasGlyphRender);
 
-    exports.DefaultGlobalPickerService = class DefaultGlobalPickerService {
+    let loadGlyphModule = false;
+    const glyphModule = new ContainerModule(bind => {
+        if (loadGlyphModule) {
+            return;
+        }
+        loadGlyphModule = true;
+        bind(GlyphRender).to(DefaultCanvasGlyphRender).inSingletonScope();
+        bind(GraphicRender).toService(GlyphRender);
+    });
+
+    let DefaultCanvasRichTextRender = class DefaultCanvasRichTextRender extends BaseRender {
         constructor() {
-            this.global = application.global;
-            this.global.hooks.onSetEnv.tap('global-picker-service', (lastEnv, env, global) => {
-                this.configure(global, env);
-            });
-            this.configure(this.global, this.global.env);
+            super();
+            this.numberType = RICHTEXT_NUMBER_TYPE;
+            this.builtinContributions = [defaultTextBackgroundRenderContribution];
+            this.init();
         }
-        configure(global, env) {
+        drawShape(richtext, context, x, y, drawContext) {
+            const richtextAttribute = getTheme(richtext).richtext;
+            const { strokeOpacity = richtextAttribute.strokeOpacity, opacity = richtextAttribute.opacity, fillOpacity = richtextAttribute.fillOpacity, visible = richtextAttribute.visible } = richtext.attribute;
+            if (!(richtext.valid && visible)) {
+                return;
+            }
+            const fVisible = fillVisible(opacity, fillOpacity, true);
+            const sVisible = fillVisible(opacity, strokeOpacity, true);
+            if (!fVisible) {
+                return;
+            }
+            context.translate(x, y);
+            this.beforeRenderStep(richtext, context, x, y, fVisible, sVisible, fVisible, sVisible, richtextAttribute, drawContext);
+            const frame = richtext.getFrameCache();
+            frame.draw(context, this.drawIcon);
+            this.afterRenderStep(richtext, context, x, y, fVisible, sVisible, fVisible, sVisible, richtextAttribute, drawContext);
         }
-        pick(graphics, point, params) {
-            let result = {
-                graphic: null,
-                group: null
-            };
-            const parentMatrix = new vutils.Matrix(1, 0, 0, 1, 0, 0);
-            let group;
-            for (let i = 0; i < graphics.length; i++) {
-                if (graphics[i].isContainer) {
-                    result = this.pickGroup(graphics[i], point, parentMatrix, params);
+        drawIcon(icon, context, x, y, baseline) {
+            var _a;
+            const richtextIconAttribute = getTheme(icon).richtextIcon;
+            const { width = richtextIconAttribute.width, height = richtextIconAttribute.height, opacity = richtextIconAttribute.opacity, image: url, backgroundFill = richtextIconAttribute.backgroundFill, backgroundFillOpacity = richtextIconAttribute.backgroundFillOpacity, backgroundStroke = richtextIconAttribute.backgroundStroke, backgroundStrokeOpacity = richtextIconAttribute.backgroundStrokeOpacity, backgroundRadius = richtextIconAttribute.backgroundRadius, margin } = icon.attribute;
+            const { backgroundWidth = width, backgroundHeight = height } = icon.attribute;
+            if (margin) {
+                x += icon._marginArray[3];
+                y += icon._marginArray[0];
+            }
+            if (icon._hovered) {
+                const expandX = (backgroundWidth - width) / 2;
+                const expandY = (backgroundHeight - height) / 2;
+                if (backgroundRadius === 0) {
+                    context.beginPath();
+                    context.rect(x - expandX, y - expandY, backgroundWidth, backgroundHeight);
                 }
                 else {
-                    const data = this.pickItem(graphics[i], point, parentMatrix, params);
-                    if (data) {
-                        result.graphic = data.graphic;
-                        result.params = data.params;
-                    }
+                    context.beginPath();
+                    createRectPath(context, x - expandX, y - expandY, backgroundWidth, backgroundHeight, backgroundRadius);
                 }
-                if (result.graphic) {
-                    break;
+                if (backgroundFill) {
+                    context.globalAlpha = backgroundFillOpacity;
+                    context.fillStyle = backgroundFill;
+                    context.fill();
                 }
-                if (!group) {
-                    group = result.group;
+                if (backgroundStroke) {
+                    context.globalAlpha = backgroundStrokeOpacity;
+                    context.strokeStyle = backgroundStroke;
+                    context.stroke();
                 }
             }
-            if (!result.graphic) {
-                result.group = group;
-            }
-            if (result.graphic) {
-                let g = result.graphic;
-                while (g.parent) {
-                    g = g.parent;
-                }
-                if (g.shadowHost) {
-                    result.params = {
-                        shadowTarget: result.graphic
-                    };
-                    result.graphic = g.shadowHost;
-                }
+            const res = url && ((_a = icon === null || icon === void 0 ? void 0 : icon.resources) === null || _a === void 0 ? void 0 : _a.get(url));
+            if (!res || res.state !== 'success') {
+                return;
             }
-            return result;
+            context.globalAlpha = opacity;
+            context.drawImage(res.data, x, y, width, height);
         }
-        containsPoint(graphic, point, params) {
-            return !!this.pickItem(graphic, point, null, params);
+        draw(richtext, renderService, drawContext) {
+            const richtextAttribute = getTheme(richtext).richtext;
+            this._draw(richtext, richtextAttribute, false, drawContext);
         }
-        pickGroup(group, point, parentMatrix, params) {
-            let result = {
-                group: null,
-                graphic: null
-            };
-            if (group.attribute.visibleAll === false) {
-                return result;
+    };
+    DefaultCanvasRichTextRender = __decorate([
+        injectable(),
+        __metadata("design:paramtypes", [])
+    ], DefaultCanvasRichTextRender);
+
+    let loadRichtextModule = false;
+    const richtextModule = new ContainerModule(bind => {
+        if (loadRichtextModule) {
+            return;
+        }
+        loadRichtextModule = true;
+        bind(RichTextRender).to(DefaultCanvasRichTextRender).inSingletonScope();
+        bind(GraphicRender).toService(RichTextRender);
+    });
+
+    let loadImageModule = false;
+    const imageModule = new ContainerModule(bind => {
+        if (loadImageModule) {
+            return;
+        }
+        loadImageModule = true;
+        bind(ImageRender).to(exports.DefaultCanvasImageRender).inSingletonScope();
+        bind(GraphicRender).toService(ImageRender);
+        bind(ImageRenderContribution).toService(exports.DefaultBaseInteractiveRenderContribution);
+        bindContributionProvider(bind, ImageRenderContribution);
+    });
+
+    let DefaultCanvasRect3dRender = class DefaultCanvasRect3dRender extends BaseRender {
+        constructor() {
+            super(...arguments);
+            this.type = 'rect3d';
+            this.numberType = RECT3D_NUMBER_TYPE;
+        }
+        drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb) {
+            var _a;
+            const rectAttribute = getTheme(rect, params === null || params === void 0 ? void 0 : params.theme).rect3d;
+            const { fill = rectAttribute.fill, stroke = rectAttribute.stroke, width = rectAttribute.width, height = rectAttribute.height, opacity = rectAttribute.opacity, fillOpacity = rectAttribute.fillOpacity, lineWidth = rectAttribute.lineWidth, strokeOpacity = rectAttribute.strokeOpacity, visible = rectAttribute.visible } = rect.attribute;
+            const z = (_a = this.z) !== null && _a !== void 0 ? _a : 0;
+            const fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill);
+            const sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height);
+            const doFill = runFill(fill);
+            const doStroke = runStroke(stroke, lineWidth);
+            if (!(rect.valid && visible)) {
+                return;
             }
-            const transMatrix = group.transMatrix;
-            const newPoint = new vutils.Point(point.x, point.y);
-            parentMatrix.transformPoint(newPoint, newPoint);
-            const insideGroup = group.AABBBounds.containsPoint(newPoint);
-            if (!insideGroup) {
-                return result;
+            if (!(doFill || doStroke)) {
+                return;
             }
-            const groupPicked = group.attribute.pickable !== false && insideGroup;
-            parentMatrix.multiply(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f);
-            if (group.attribute.childrenPickable !== false) {
-                group.forEachChildren((graphic) => {
-                    if (graphic.isContainer) {
-                        result = this.pickGroup(graphic, point, parentMatrix, params);
-                    }
-                    else {
-                        const newPoint = new vutils.Point(point.x, point.y);
-                        parentMatrix.transformPoint(newPoint, newPoint);
-                        const data = this.pickItem(graphic, newPoint, parentMatrix, params);
-                        if (data) {
-                            result.graphic = data.graphic;
-                            result.params = data.params;
-                        }
-                    }
-                    return !!result.graphic || !!result.group;
-                });
+            if (!(fVisible || sVisible || fillCb || strokeCb)) {
+                return;
             }
-            if (!result.graphic && !result.group && groupPicked) {
-                result.group = group;
+            const { light, camera } = drawContext.stage || {};
+            const face3d = rect.findFace();
+            if (fill !== false) {
+                context.setCommonStyle(rect, rect.attribute, x, y, rectAttribute);
+                let fc = fill;
+                if (typeof fc !== 'string') {
+                    fc = 'black';
+                }
+                this.fill(x, y, z, face3d, fc, context, light, fillCb);
             }
-            return result;
-        }
-        pickItem(graphic, point, parentMatrix, params) {
-            if (graphic.attribute.pickable === false) {
-                return null;
+            if (stroke !== false) {
+                context.setStrokeStyle(rect, rect.attribute, x, y, rectAttribute);
+                this.stroke(x, y, z, face3d, context);
             }
-            if (graphic.AABBBounds.containsPoint(point)) {
-                return {
-                    graphic: graphic
+        }
+        stroke(x, y, z, face3d, context) {
+            const vertices = face3d.vertices;
+            face3d.edges.forEach(edge => {
+                const p1 = vertices[edge[0]];
+                const v1 = {
+                    x: x + p1[0],
+                    y: y + p1[1],
+                    z: z + p1[2]
+                };
+                const p2 = vertices[edge[1]];
+                const v2 = {
+                    x: x + p2[0],
+                    y: y + p2[1],
+                    z: z + p2[2]
+                };
+                context.beginPath();
+                context.moveTo(v1.x, v1.y, v1.z);
+                context.lineTo(v2.x, v2.y, v2.z);
+                context.stroke();
+            });
+        }
+        fill(x, y, z, face3d, fillColor, context, light, fillCb) {
+            const rgbArray = ColorStore.Get(fillColor, exports.ColorType.Color255);
+            const vertices = face3d.vertices;
+            const viewdVerticesZ = vertices.map(v => {
+                return context.view(v[0], v[1], v[2])[2];
+            });
+            const sortFace = [];
+            face3d.polygons.forEach((p, i) => {
+                sortFace.push({
+                    faceIdx: i,
+                    polygon: p
+                });
+                const { polygon, normal } = p;
+                const z1 = viewdVerticesZ[polygon[0]];
+                const z2 = viewdVerticesZ[polygon[1]];
+                const z3 = viewdVerticesZ[polygon[2]];
+                const z4 = viewdVerticesZ[polygon[3]];
+                p.ave_z = z1 + z2 + z3 + z4;
+            });
+            sortFace.sort((a, b) => b.polygon.ave_z - a.polygon.ave_z);
+            sortFace.forEach(item => {
+                const { polygon, normal } = item.polygon;
+                const p1 = vertices[polygon[0]];
+                const p2 = vertices[polygon[1]];
+                const p3 = vertices[polygon[2]];
+                const p4 = vertices[polygon[3]];
+                const v1 = {
+                    x: x + p1[0],
+                    y: y + p1[1],
+                    z: z + p1[2]
                 };
-            }
-            return null;
+                const v2 = {
+                    x: x + p2[0],
+                    y: y + p2[1],
+                    z: z + p2[2]
+                };
+                const v3 = {
+                    x: x + p3[0],
+                    y: y + p3[1],
+                    z: z + p3[2]
+                };
+                const v4 = {
+                    x: x + p4[0],
+                    y: y + p4[1],
+                    z: z + p4[2]
+                };
+                context.beginPath();
+                context.moveTo(v1.x, v1.y, v1.z);
+                context.lineTo(v2.x, v2.y, v2.z);
+                context.lineTo(v3.x, v3.y, v3.z);
+                context.lineTo(v4.x, v4.y, v4.z);
+                context.closePath();
+                if (fillCb) {
+                    fillCb(context, null, null);
+                }
+                else {
+                    context.fillStyle = light ? light.computeColor(normal, rgbArray) : fillColor;
+                    context.fill();
+                }
+            });
+        }
+        draw(rect, renderService, drawContext) {
+            const rectAttribute = getTheme(rect).rect;
+            this._draw(rect, rectAttribute, false, drawContext);
         }
     };
-    exports.DefaultGlobalPickerService = __decorate([
-        injectable(),
-        __metadata("design:paramtypes", [])
-    ], exports.DefaultGlobalPickerService);
+    DefaultCanvasRect3dRender = __decorate([
+        injectable()
+    ], DefaultCanvasRect3dRender);
 
-    class DefaultGraphicAllocate {
-        constructor() {
-            this.pools = [];
-        }
-        free(d) {
-            this.pools.push(d);
+    let loadRect3dModule = false;
+    const rect3dModule = new ContainerModule(bind => {
+        if (loadRect3dModule) {
+            return;
         }
-        get length() {
-            return this.pools.length;
+        loadRect3dModule = true;
+        bind(Rect3DRender).to(DefaultCanvasRect3dRender).inSingletonScope();
+        bind(GraphicRender).toService(Rect3DRender);
+    });
+
+    function drawArcPath(arc, context, cx, cy, z, outerRadius, innerRadius) {
+        const { startAngle, endAngle } = arc.getParsedAngle();
+        const deltaAngle = vutils.abs(endAngle - startAngle);
+        const clockwise = endAngle > startAngle;
+        let collapsedToLine = false;
+        if (outerRadius < innerRadius) {
+            const temp = outerRadius;
+            outerRadius = innerRadius;
+            innerRadius = temp;
         }
-        release(...params) {
-            this.pools = [];
+        if (outerRadius <= vutils.epsilon) {
+            context.moveTo(cx, cy, z);
         }
-    }
-    class DefaultRectAllocate extends DefaultGraphicAllocate {
-        allocate(attribute) {
-            if (!this.pools.length) {
-                return application.graphicService.creator.rect(attribute);
+        else if (deltaAngle >= vutils.pi2 - vutils.epsilon) {
+            context.moveTo(cx + outerRadius * vutils.cos(startAngle), cy + outerRadius * vutils.sin(startAngle), z);
+            context.arc(cx, cy, outerRadius, startAngle, endAngle, !clockwise, z);
+            if (innerRadius > vutils.epsilon) {
+                context.moveTo(cx + innerRadius * vutils.cos(endAngle), cy + innerRadius * vutils.sin(endAngle), z);
+                context.arc(cx, cy, innerRadius, endAngle, startAngle, clockwise, z);
             }
-            const g = this.pools.pop();
-            g.initAttributes(attribute);
-            return g;
         }
-        allocateByObj(rect) {
-            if (!this.pools.length) {
-                return application.graphicService.creator.rect(rect.attribute);
+        else {
+            const { outerDeltaAngle, innerDeltaAngle, outerStartAngle, outerEndAngle, innerEndAngle, innerStartAngle } = arc.getParsePadAngle(startAngle, endAngle);
+            const xors = outerRadius * vutils.cos(outerStartAngle);
+            const yors = outerRadius * vutils.sin(outerStartAngle);
+            const xire = innerRadius * vutils.cos(innerEndAngle);
+            const yire = innerRadius * vutils.sin(innerEndAngle);
+            if (outerDeltaAngle < 0.001) {
+                collapsedToLine = true;
             }
-            const g = this.pools.pop();
-            g.initAttributes(rect.attribute);
-            return g;
-        }
-    }
-    const defaultRectAllocate = new DefaultRectAllocate();
-    class DefaultArcAllocate extends DefaultGraphicAllocate {
-        allocate(attribute) {
-            if (!this.pools.length) {
-                return application.graphicService.creator.arc(attribute);
+            else {
+                context.moveTo(cx + xors, cy + yors, z);
+                context.arc(cx, cy, outerRadius, outerStartAngle, outerEndAngle, !clockwise, z);
             }
-            const g = this.pools.pop();
-            g.initAttributes(attribute);
-            return g;
-        }
-        allocateByObj(arc) {
-            if (!this.pools.length) {
-                return application.graphicService.creator.arc(arc.attribute);
+            if (!(innerRadius > vutils.epsilon) || innerDeltaAngle < 0.001) {
+                context.lineTo(cx + xire, cy + yire, z);
+                collapsedToLine = true;
+            }
+            else {
+                context.lineTo(cx + xire, cy + yire, z);
+                context.arc(cx, cy, innerRadius, innerEndAngle, innerStartAngle, clockwise, z);
             }
-            const g = this.pools.pop();
-            g.initAttributes(arc.attribute);
-            return g;
         }
+        context.closePath();
+        return collapsedToLine;
     }
-    const defaultArcAllocate = new DefaultArcAllocate();
-    class DefaultAreaAllocate extends DefaultGraphicAllocate {
-        allocate(attribute) {
-            if (!this.pools.length) {
-                return application.graphicService.creator.area(attribute);
-            }
-            const g = this.pools.pop();
-            g.initAttributes(attribute);
-            return g;
+    function drawInnerOuterArcPath(arc, context, cx, cy, z1, z2, radius, getParsePadAngle) {
+        const { startAngle, endAngle } = arc.getParsedAngle();
+        const deltaAngle = vutils.abs(endAngle - startAngle);
+        const clockwise = endAngle > startAngle;
+        let collapsedToLine = false;
+        if (radius <= vutils.epsilon) {
+            context.moveTo(cx, cy, z1);
         }
-        allocateByObj(area) {
-            if (!this.pools.length) {
-                return application.graphicService.creator.area(area.attribute);
-            }
-            const g = this.pools.pop();
-            g.initAttributes(area.attribute);
-            return g;
+        else if (deltaAngle >= vutils.pi2 - vutils.epsilon) {
+            context.moveTo(cx + radius * vutils.cos(startAngle), cy + radius * vutils.sin(startAngle), z1);
+            context.arc(cx, cy, radius, startAngle, endAngle, !clockwise, z1);
+            context.lineTo(cx + radius * vutils.cos(endAngle), cy + radius * vutils.sin(endAngle), z2);
+            context.arc(cx, cy, radius, endAngle, startAngle, clockwise, z2);
         }
-    }
-    const defaultAreaAllocate = new DefaultAreaAllocate();
-    class DefaultCircleAllocate extends DefaultGraphicAllocate {
-        allocate(attribute) {
-            if (!this.pools.length) {
-                return application.graphicService.creator.circle(attribute);
+        else {
+            const { innerouterDeltaAngle, innerouterStartAngle, innerouterEndAngle } = getParsePadAngle(startAngle, endAngle);
+            const xors = radius * vutils.cos(innerouterStartAngle);
+            const yors = radius * vutils.sin(innerouterStartAngle);
+            const xore = radius * vutils.cos(innerouterEndAngle);
+            const yore = radius * vutils.sin(innerouterEndAngle);
+            if (innerouterDeltaAngle < 0.001) {
+                collapsedToLine = true;
             }
-            const g = this.pools.pop();
-            g.initAttributes(attribute);
-            return g;
-        }
-        allocateByObj(area) {
-            if (!this.pools.length) {
-                return application.graphicService.creator.circle(area.attribute);
+            else {
+                context.moveTo(cx + xors, cy + yors, z1);
+                context.arc(cx, cy, radius, innerouterStartAngle, innerouterEndAngle, !clockwise, z1);
+                context.lineTo(cx + xore, cy + yore, z2);
+                context.arc(cx, cy, radius, innerouterEndAngle, innerouterStartAngle, clockwise, z2);
             }
-            const g = this.pools.pop();
-            g.initAttributes(area.attribute);
-            return g;
         }
+        context.closePath();
+        return collapsedToLine;
     }
-    const defaultCircleAllocate = new DefaultCircleAllocate();
-    class DefaultLineAllocate extends DefaultGraphicAllocate {
-        allocate(attribute) {
-            if (!this.pools.length) {
-                return application.graphicService.creator.line(attribute);
+    let DefaultCanvasArc3DRender = class DefaultCanvasArc3DRender extends BaseRender {
+        constructor() {
+            super(...arguments);
+            this.numberType = ARC3D_NUMBER_TYPE;
+        }
+        drawShape(arc, context, x, y, drawContext, params, fillCb, strokeCb) {
+            var _a;
+            const arcAttribute = getTheme(arc, params === null || params === void 0 ? void 0 : params.theme).arc;
+            const { fill = arcAttribute.fill } = arc.attribute;
+            const data = this.valid(arc, arcAttribute, fillCb, strokeCb);
+            if (!data) {
+                return;
+            }
+            const { fVisible, sVisible, doFill, doStroke } = data;
+            const z = (_a = this.z) !== null && _a !== void 0 ? _a : 0;
+            const { outerRadius = arcAttribute.outerRadius, innerRadius = arcAttribute.innerRadius, height = 10 } = arc.attribute;
+            const rgbArray = ColorStore.Get(fill, exports.ColorType.Color255);
+            const { light } = drawContext.stage || {};
+            const face = drawContext.hack_pieFace;
+            const z_face = {
+                top: z,
+                bottom: z + height
+            };
+            const n_face = {
+                top: [0, 1, 0],
+                bottom: [0, -1, 0],
+                outside: [1, 0, -1],
+                inside: [1, 0, -1]
+            };
+            if (face === 'bottom' || face === 'top') {
+                context.beginPath();
+                drawArcPath(arc, context, x, y, z_face[face], outerRadius, innerRadius);
+                context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute);
+                if (doFill) {
+                    if (fillCb) {
+                        fillCb(context, arc.attribute, arcAttribute);
+                    }
+                    else if (fVisible) {
+                        context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute);
+                        context.fillStyle = light ? light.computeColor(n_face[face], rgbArray) : fill;
+                        context.fill();
+                    }
+                }
+                if (doStroke) {
+                    if (strokeCb) {
+                        strokeCb(context, arc.attribute, arcAttribute);
+                    }
+                    else if (sVisible) {
+                        context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute);
+                        context.stroke();
+                    }
+                }
+            }
+            else if (face === 'outside' || face === 'inside') {
+                if (face === 'inside') {
+                    context.save();
+                    context.beginPath();
+                    context.arc(x, y, innerRadius, 0, vutils.pi2, true, z_face.top);
+                    context.clip();
+                }
+                context.beginPath();
+                drawInnerOuterArcPath(arc, context, x, y, z_face.top, z_face.bottom, face === 'outside' ? outerRadius : innerRadius, (startAngle, endAngle) => {
+                    const { outerDeltaAngle, innerDeltaAngle, outerStartAngle, outerEndAngle, innerEndAngle, innerStartAngle } = arc.getParsePadAngle(startAngle, endAngle);
+                    if (face === 'outside') {
+                        return {
+                            innerouterDeltaAngle: outerDeltaAngle,
+                            innerouterEndAngle: outerEndAngle,
+                            innerouterStartAngle: outerStartAngle
+                        };
+                    }
+                    return {
+                        innerouterDeltaAngle: innerDeltaAngle,
+                        innerouterEndAngle: innerEndAngle,
+                        innerouterStartAngle: innerStartAngle
+                    };
+                });
+                context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute);
+                if (doFill) {
+                    if (fillCb) {
+                        fillCb(context, arc.attribute, arcAttribute);
+                    }
+                    else if (fVisible) {
+                        context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute);
+                        context.fillStyle = light ? light.computeColor(n_face[face], rgbArray) : fill;
+                        context.fill();
+                    }
+                }
+                if (doStroke) {
+                    if (strokeCb) {
+                        strokeCb(context, arc.attribute, arcAttribute);
+                    }
+                    else if (sVisible) {
+                        context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute);
+                        context.stroke();
+                    }
+                }
+                if (face === 'inside') {
+                    context.restore();
+                }
             }
-            const g = this.pools.pop();
-            g.initAttributes(attribute);
-            return g;
         }
-        allocateByObj(line) {
-            if (!this.pools.length) {
-                return application.graphicService.creator.line(line.attribute);
-            }
-            const g = this.pools.pop();
-            g.initAttributes(line.attribute);
-            return g;
+        draw(arc, renderService, drawContext, params) {
+            const arcAttribute = getTheme(arc, params === null || params === void 0 ? void 0 : params.theme).arc;
+            this._draw(arc, arcAttribute, false, drawContext, params);
         }
-    }
-    const defaultLineAllocate = new DefaultLineAllocate();
-    class DefaultPathAllocate extends DefaultGraphicAllocate {
-        allocate(attribute) {
-            if (!this.pools.length) {
-                return application.graphicService.creator.path(attribute);
-            }
-            const g = this.pools.pop();
-            g.initAttributes(attribute);
-            return g;
+    };
+    DefaultCanvasArc3DRender = __decorate([
+        injectable()
+    ], DefaultCanvasArc3DRender);
+
+    let loadArc3dModule = false;
+    const arc3dModule = new ContainerModule(bind => {
+        if (loadArc3dModule) {
+            return;
         }
-        allocateByObj(path) {
-            if (!this.pools.length) {
-                return application.graphicService.creator.path(path.attribute);
-            }
-            const g = this.pools.pop();
-            g.initAttributes(path.attribute);
-            return g;
+        loadArc3dModule = true;
+        bind(Arc3dRender).to(DefaultCanvasArc3DRender).inSingletonScope();
+        bind(GraphicRender).toService(Arc3dRender);
+    });
+
+    let DefaultCanvasPyramid3dRender = class DefaultCanvasPyramid3dRender extends BaseRender {
+        constructor() {
+            super(...arguments);
+            this.type = 'pyramid3d';
+            this.numberType = PYRAMID3D_NUMBER_TYPE;
         }
-    }
-    const defaultPathAllocate = new DefaultPathAllocate();
-    class DefaultSymbolAllocate extends DefaultGraphicAllocate {
-        allocate(attribute) {
-            if (!this.pools.length) {
-                return application.graphicService.creator.symbol(attribute);
+        drawShape(pyramid3d, context, x, y, drawContext, params, fillCb, strokeCb) {
+            var _a;
+            const pyramidAttribute = getTheme(pyramid3d, params === null || params === void 0 ? void 0 : params.theme).polygon;
+            const { fill = pyramidAttribute.fill, stroke = pyramidAttribute.stroke, face = [true, true, true, true, true, true] } = pyramid3d.attribute;
+            const z = (_a = this.z) !== null && _a !== void 0 ? _a : 0;
+            const data = this.valid(pyramid3d, pyramidAttribute, fillCb, strokeCb);
+            if (!data) {
+                return;
             }
-            const g = this.pools.pop();
-            g.initAttributes(attribute);
-            return g;
-        }
-        allocateByObj(symbol) {
-            if (!this.pools.length) {
-                return application.graphicService.creator.symbol(symbol.attribute);
+            const { light, camera } = drawContext.stage || {};
+            const face3d = pyramid3d.findFace();
+            if (fill !== false) {
+                context.setCommonStyle(pyramid3d, pyramid3d.attribute, x, y, pyramidAttribute);
+                let fc = fill;
+                if (typeof fc !== 'string') {
+                    fc = 'black';
+                }
+                this.fill(x, y, z, face3d, face, fc, context, light, camera, pyramid3d, pyramidAttribute, fillCb);
             }
-            const g = this.pools.pop();
-            g.initAttributes(symbol.attribute);
-            return g;
-        }
-    }
-    const defaultSymbolAllocate = new DefaultSymbolAllocate();
-    class DefaultTextAllocate extends DefaultGraphicAllocate {
-        allocate(attribute) {
-            if (!this.pools.length) {
-                return application.graphicService.creator.text(attribute);
+            if (stroke !== false) {
+                context.setStrokeStyle(pyramid3d, pyramid3d.attribute, x, y, pyramidAttribute);
+                this.stroke(x, y, z, face3d, context);
             }
-            const g = this.pools.pop();
-            g.initAttributes(attribute);
-            return g;
         }
-        allocateByObj(text) {
-            if (!this.pools.length) {
-                return application.graphicService.creator.text(text.attribute);
-            }
-            const g = this.pools.pop();
-            g.initAttributes(text.attribute);
-            return g;
+        stroke(x, y, z, face3d, context) {
+            const vertices = face3d.vertices;
+            face3d.edges.forEach(p => {
+                const p1 = vertices[p[0]];
+                const p2 = vertices[p[1]];
+                const v1 = {
+                    x: x + p1[0],
+                    y: y + p1[1],
+                    z: z + p1[2]
+                };
+                const v2 = {
+                    x: x + p2[0],
+                    y: y + p2[1],
+                    z: z + p2[2]
+                };
+                context.beginPath();
+                context.moveTo(v1.x, v1.y, v1.z);
+                context.lineTo(v2.x, v2.y, v2.z);
+                context.stroke();
+            });
         }
-    }
-    const defaultTextAllocate = new DefaultTextAllocate();
-    class DefaultGraphicMemoryManager {
-        constructor() {
-            this.map = {
-                text: defaultTextAllocate,
-                symbol: defaultSymbolAllocate
-            };
+        fill(x, y, z, face3d, faces, fillColor, context, light, camera, pyramid3d, pyramid3dAttribute, fillCb) {
+            const rgbArray = ColorStore.Get(fillColor, exports.ColorType.Color255);
+            const vertices = face3d.vertices;
+            const viewdVerticesZ = vertices.map(v => {
+                return context.view(v[0], v[1], v[2])[2];
+            });
+            const sortFace = [];
+            face3d.polygons.forEach((p, i) => {
+                if (!faces[i]) {
+                    return;
+                }
+                sortFace.push({
+                    faceIdx: i,
+                    polygon: p
+                });
+                const { polygon, normal } = p;
+                const z1 = viewdVerticesZ[polygon[0]];
+                const z2 = viewdVerticesZ[polygon[1]];
+                const z3 = viewdVerticesZ[polygon[2]];
+                const z4 = viewdVerticesZ[polygon[3]];
+                p.ave_z = z1 + z2 + z3 + z4;
+            });
+            sortFace.sort((a, b) => b.polygon.ave_z - a.polygon.ave_z);
+            sortFace.forEach(item => {
+                const { polygon, normal } = item.polygon;
+                const p1 = vertices[polygon[0]];
+                const p2 = vertices[polygon[1]];
+                const p3 = vertices[polygon[2]];
+                const p4 = vertices[polygon[3]];
+                const v1 = {
+                    x: x + p1[0],
+                    y: y + p1[1],
+                    z: z + p1[2]
+                };
+                const v2 = {
+                    x: x + p2[0],
+                    y: y + p2[1],
+                    z: z + p2[2]
+                };
+                const v3 = {
+                    x: x + p3[0],
+                    y: y + p3[1],
+                    z: z + p3[2]
+                };
+                const v4 = {
+                    x: x + p4[0],
+                    y: y + p4[1],
+                    z: z + p4[2]
+                };
+                context.beginPath();
+                context.moveTo(v1.x, v1.y, v1.z);
+                context.lineTo(v2.x, v2.y, v2.z);
+                context.lineTo(v3.x, v3.y, v3.z);
+                context.lineTo(v4.x, v4.y, v4.z);
+                context.closePath();
+                if (fillCb) {
+                    fillCb(context, pyramid3d.attribute, pyramid3dAttribute);
+                }
+                else {
+                    context.fillStyle = light ? light.computeColor(normal, rgbArray) : fillColor;
+                    context.fill();
+                }
+            });
         }
-        gc(g) {
-            if (g.isContainer) {
-                g.forEachChildren(i => this.gc(i));
-            }
-            else {
-                this.gcItem(g);
-            }
+        draw(pyramid3d, renderService, drawContext) {
+            const pyramid3dAttribute = getTheme(pyramid3d).polygon;
+            this._draw(pyramid3d, pyramid3dAttribute, false, drawContext);
         }
-        gcItem(g) {
-            const allocate = this.map[g.type];
-            if (allocate) {
-                allocate.free(g);
-            }
+    };
+    DefaultCanvasPyramid3dRender = __decorate([
+        injectable()
+    ], DefaultCanvasPyramid3dRender);
+
+    let loadPyramid3dModule = false;
+    const pyramid3dModule = new ContainerModule(bind => {
+        if (loadPyramid3dModule) {
+            return;
         }
-    }
-    const defaultGraphicMemoryManager = new DefaultGraphicMemoryManager();
+        loadPyramid3dModule = true;
+        bind(Pyramid3dRender).to(DefaultCanvasPyramid3dRender).inSingletonScope();
+        bind(GraphicRender).toService(Pyramid3dRender);
+    });
 
     exports.ACustomAnimate = ACustomAnimate;
     exports.ARC3D_NUMBER_TYPE = ARC3D_NUMBER_TYPE;
@@ -26987,7 +27052,7 @@
     exports.GlyphRender = GlyphRender;
     exports.Graphic = Graphic;
     exports.GraphicAnimate = GraphicAnimate;
-    exports.GraphicCreator = GraphicCreator;
+    exports.GraphicCreator = GraphicCreator$1;
     exports.GraphicPicker = GraphicPicker;
     exports.GraphicRender = GraphicRender;
     exports.GraphicService = GraphicService;
@@ -27062,6 +27127,7 @@
     exports.SVG_PARSE_ATTRIBUTE_MAP_KEYS = SVG_PARSE_ATTRIBUTE_MAP_KEYS;
     exports.SYMBOL_NUMBER_TYPE = SYMBOL_NUMBER_TYPE;
     exports.SegContext = SegContext;
+    exports.ShadowRoot = ShadowRoot;
     exports.SplitRectAfterRenderContribution = SplitRectAfterRenderContribution;
     exports.SplitRectBeforeRenderContribution = SplitRectBeforeRenderContribution;
     exports.Stage = Stage;
@@ -27094,6 +27160,9 @@
     exports.alignSubpath = alignSubpath;
     exports.application = application;
     exports.applyTransformOnBezierCurves = applyTransformOnBezierCurves;
+    exports.arc3dModule = arc3dModule;
+    exports.arcModule = arcModule;
+    exports.areaModule = areaModule;
     exports.bezier = bezier;
     exports.bezierCurversToPath = bezierCurversToPath;
     exports.binarySplitPolygon = binarySplitPolygon;
@@ -27108,35 +27177,18 @@
     exports.canvasAllocate = canvasAllocate;
     exports.centroidOfSubpath = centroidOfSubpath;
     exports.circleBounds = circleBounds;
+    exports.circleModule = circleModule;
     exports.clock = clock;
     exports.cloneGraphic = cloneGraphic;
     exports.colorEqual = colorEqual;
     exports.colorStringInterpolationToStr = colorStringInterpolationToStr;
     exports.container = container;
     exports.cornerTangents = cornerTangents;
-    exports.createArc = createArc;
-    exports.createArc3d = createArc3d;
-    exports.createArea = createArea;
-    exports.createCircle = createCircle;
     exports.createColor = createColor;
     exports.createConicalGradient = createConicalGradient;
-    exports.createGlyph = createGlyph;
-    exports.createGroup = createGroup;
-    exports.createImage = createImage;
-    exports.createLine = createLine;
     exports.createMat4 = createMat4;
-    exports.createPath = createPath;
-    exports.createPolygon = createPolygon;
-    exports.createPyramid3d = createPyramid3d;
-    exports.createRect = createRect;
-    exports.createRect3d = createRect3d;
     exports.createRectPath = createRectPath;
-    exports.createRichText = createRichText;
-    exports.createShadowRoot = createShadowRoot;
     exports.createStage = createStage;
-    exports.createSymbol = createSymbol;
-    exports.createText = createText;
-    exports.createWrapText = createWrapText;
     exports.cubicCalc = cubicCalc;
     exports.cubicLength = cubicLength;
     exports.cubicPointAt = cubicPointAt;
@@ -27206,9 +27258,11 @@
     exports.getTheme = getTheme;
     exports.getThemeFromGroup = getThemeFromGroup;
     exports.globalTheme = globalTheme;
+    exports.glyphModule = glyphModule;
     exports.graphicCreator = graphicCreator;
     exports.graphicService = graphicService;
     exports.graphicUtil = graphicUtil;
+    exports.imageModule = imageModule;
     exports.incrementalAddTo = incrementalAddTo;
     exports.inject = inject;
     exports.injectable = injectable;
@@ -27224,6 +27278,7 @@
     exports.isTransformKey = isTransformKey;
     exports.isXML = isXML;
     exports.layerService = layerService;
+    exports.lineModule = lineModule;
     exports.lookAt = lookAt;
     exports.mat3Tomat4 = mat3Tomat4;
     exports.mat4Allocate = mat4Allocate;
@@ -27241,6 +27296,7 @@
     exports.parsePadding = parsePadding;
     exports.parseStroke = parseStroke;
     exports.parseSvgPath = parseSvgPath;
+    exports.pathModule = pathModule;
     exports.pathToBezierCurves = pathToBezierCurves;
     exports.point = point$2;
     exports.pointEqual = pointEqual;
@@ -27248,12 +27304,17 @@
     exports.pointInterpolationHighPerformance = pointInterpolationHighPerformance;
     exports.pointsEqual = pointsEqual;
     exports.pointsInterpolation = pointsInterpolation;
+    exports.polygonModule = polygonModule;
+    exports.pyramid3dModule = pyramid3dModule;
     exports.rafBasedSto = rafBasedSto;
+    exports.rect3dModule = rect3dModule;
     exports.rectFillVisible = rectFillVisible;
+    exports.rectModule = rectModule;
     exports.rectStrokeVisible = rectStrokeVisible;
     exports.recursiveCallBinarySplit = recursiveCallBinarySplit;
     exports.renderCommandList = renderCommandList;
     exports.rewriteProto = rewriteProto;
+    exports.richtextModule = richtextModule;
     exports.rotateX = rotateX;
     exports.rotateY = rotateY;
     exports.runFill = runFill;
@@ -27274,9 +27335,11 @@
     exports.splitToGrids = splitToGrids;
     exports.strCommandMap = strCommandMap;
     exports.strokeVisible = strokeVisible;
+    exports.symbolModule = symbolModule;
     exports.textDrawOffsetX = textDrawOffsetX;
     exports.textDrawOffsetY = textDrawOffsetY;
     exports.textLayoutOffsetY = textLayoutOffsetY;
+    exports.textModule = textModule;
     exports.transformKeys = transformKeys;
     exports.transformMat4 = transformMat4;
     exports.transformUtil = transformUtil;