@visactor/vrender-kits 0.19.19 → 0.20.0-alpha.1

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import { injectable, inject, DefaultCanvasArcRender, ARC_NUMBER_TYPE, getTheme, CustomPath2D, drawArcPath, DefaultCanvasAreaRender, drawAreaSegments, DefaultCanvasCircleRender, CIRCLE_NUMBER_TYPE, DefaultCanvasLineRender, drawSegments, DefaultCanvasPathRender, PATH_NUMBER_TYPE, DefaultCanvasRectRender, RECT_NUMBER_TYPE, DefaultCanvasSymbolRender, BaseRender, SYMBOL_NUMBER_TYPE, ContainerModule, GraphicRender, graphicCreator, Group, clock, application, WILDCARD, DefaultFillStyle, DefaultStrokeStyle, DefaultTextStyle, matrixAllocate, transformMat4, createColor, getScaledStroke, getContextFont, createConicalGradient, BaseCanvas, CanvasFactory, Context2dFactory, ContributionProvider, named, DrawContribution, PickItemInterceptor, DefaultPickService, canvasAllocate, GROUP_NUMBER_TYPE, bindContributionProvider, PickerService, WindowHandlerContribution, BaseWindowHandlerContribution, BaseEnvContribution, Generator, EnvContribution, container, VGlobal, EmptyContext2d, ArcRender, AreaRender, AREA_NUMBER_TYPE, CircleRender, GlyphRender, GLYPH_NUMBER_TYPE, IMAGE_NUMBER_TYPE, LineRender, LINE_NUMBER_TYPE, PolygonRender, POLYGON_NUMBER_TYPE, PathRender, RectRender, SymbolRender, TEXT_NUMBER_TYPE, rafBasedSto, vglobal, RafBasedSTO, mat4Allocate, TextRender, textLayoutOffsetY, textDrawOffsetX, RichTextRender, RICHTEXT_NUMBER_TYPE, Rect3DRender, RECT3D_NUMBER_TYPE, Arc3dRender, ARC3D_NUMBER_TYPE, Pyramid3dRender, PYRAMID3D_NUMBER_TYPE, isBrowserEnv, registerArcGraphic, arcModule, registerArc3dGraphic, arc3dModule, registerAreaGraphic, areaModule, registerCircleGraphic, circleModule, registerGlyphGraphic, glyphModule, registerGroupGraphic, registerImageGraphic, imageModule, registerLineGraphic, lineModule, registerPathGraphic, pathModule, registerPolygonGraphic, polygonModule, registerPyramid3dGraphic, pyramid3dModule, registerRectGraphic, rectModule, registerRect3dGraphic, rect3dModule, registerRichtextGraphic, richtextModule, registerShadowRootGraphic, registerSymbolGraphic, symbolModule, registerTextGraphic, textModule, registerWrapTextGraphic } from '@visactor/vrender-core';
-import { isString, isArray, EventEmitter, Matrix, Logger, pi2, pi, AABBBounds, isValidNumber, isNumber, isFunction } from '@visactor/vutils';
+import { injectable, inject, DefaultCanvasArcRender, ARC_NUMBER_TYPE, getTheme, CustomPath2D, drawArcPath, DefaultCanvasAreaRender, drawAreaSegments, DefaultCanvasCircleRender, CIRCLE_NUMBER_TYPE, DefaultCanvasLineRender, drawSegments, DefaultCanvasPathRender, PATH_NUMBER_TYPE, DefaultCanvasRectRender, RECT_NUMBER_TYPE, DefaultCanvasSymbolRender, BaseRender, SYMBOL_NUMBER_TYPE, ContainerModule, GraphicRender, graphicCreator, Group, clock, application, WILDCARD, DefaultFillStyle, DefaultStrokeStyle, DefaultTextStyle, matrixAllocate, transformMat4, createColor, getScaledStroke, createConicalGradient, BaseCanvas, CanvasFactory, Context2dFactory, ContributionProvider, named, DrawContribution, PickItemInterceptor, DefaultPickService, canvasAllocate, GROUP_NUMBER_TYPE, bindContributionProvider, PickerService, WindowHandlerContribution, BaseWindowHandlerContribution, BaseEnvContribution, Generator, EnvContribution, container, VGlobal, EmptyContext2d, ArcRender, AreaRender, AREA_NUMBER_TYPE, CircleRender, GLYPH_NUMBER_TYPE, GlyphRender, IMAGE_NUMBER_TYPE, LineRender, LINE_NUMBER_TYPE, PolygonRender, POLYGON_NUMBER_TYPE, PathRender, RectRender, SymbolRender, TEXT_NUMBER_TYPE, rafBasedSto, vglobal, RafBasedSTO, mat4Allocate, TextRender, textLayoutOffsetY, textDrawOffsetX, RichTextRender, RICHTEXT_NUMBER_TYPE, Rect3DRender, RECT3D_NUMBER_TYPE, Arc3dRender, ARC3D_NUMBER_TYPE, Pyramid3dRender, PYRAMID3D_NUMBER_TYPE, isBrowserEnv, registerArcGraphic, arcModule, registerArc3dGraphic, registerDirectionalLight, registerOrthoCamera, arc3dModule, registerAreaGraphic, areaModule, registerCircleGraphic, circleModule, registerGlyphGraphic, glyphModule, registerGroupGraphic, registerImageGraphic, imageModule, registerLineGraphic, lineModule, registerPathGraphic, pathModule, registerPolygonGraphic, polygonModule, registerPyramid3dGraphic, pyramid3dModule, registerRectGraphic, rectModule, registerRect3dGraphic, rect3dModule, registerRichtextGraphic, richtextModule, registerShadowRootGraphic, registerSymbolGraphic, symbolModule, registerTextGraphic, textModule, registerWrapTextGraphic } from '@visactor/vrender-core';
+import { isString, isArray, EventEmitter, Matrix, Logger, getContextFont, pi2, pi, AABBBounds, isValidNumber, isNumber, isFunction } from '@visactor/vutils';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -1546,8 +1546,17 @@ const defaultRouthThemeSpec = {
     fixedDecimalPlaceDigits: undefined
 };
 
-let RoughCanvasArcRender = class RoughCanvasArcRender {
+class RoughBaseRender {
+    drawShape(graphic, ctx, x, y, drawContext, params, fillCb, strokeCb) {
+        if (this.canvasRenderer.drawShape) {
+            return this.canvasRenderer.drawShape(graphic, ctx, x, y, drawContext, params, fillCb, strokeCb);
+        }
+    }
+}
+
+let RoughCanvasArcRender = class RoughCanvasArcRender extends RoughBaseRender {
     constructor(canvasRenderer) {
+        super();
         this.canvasRenderer = canvasRenderer;
         this.style = 'rough';
         this.type = 'arc';
@@ -1605,11 +1614,6 @@ let RoughCanvasArcRender = class RoughCanvasArcRender {
         });
         context.highPerformanceRestore();
     }
-    drawShape(graphic, ctx, x, y, drawContext, params, fillCb, strokeCb) {
-        if (this.canvasRenderer.drawShape) {
-            return this.canvasRenderer.drawShape(graphic, ctx, x, y, drawContext, params, fillCb, strokeCb);
-        }
-    }
 };
 RoughCanvasArcRender = __decorate([
     injectable(),
@@ -1681,8 +1685,9 @@ RoughCanvasAreaRender = __decorate([
     injectable()
 ], RoughCanvasAreaRender);
 
-let RoughCanvasCircleRender = class RoughCanvasCircleRender {
+let RoughCanvasCircleRender = class RoughCanvasCircleRender extends RoughBaseRender {
     constructor(canvasRenderer) {
+        super();
         this.canvasRenderer = canvasRenderer;
         this.style = 'rough';
         this.type = 'circle';
@@ -1714,11 +1719,6 @@ let RoughCanvasCircleRender = class RoughCanvasCircleRender {
             roughness: 0.5
         });
     }
-    drawShape(graphic, ctx, x, y, drawContext, params, fillCb, strokeCb) {
-        if (this.canvasRenderer.drawShape) {
-            return this.canvasRenderer.drawShape(graphic, ctx, x, y, drawContext, params, fillCb, strokeCb);
-        }
-    }
 };
 RoughCanvasCircleRender = __decorate([
     injectable(),
@@ -1791,8 +1791,9 @@ RoughCanvasLineRender = __decorate([
     injectable()
 ], RoughCanvasLineRender);
 
-let RoughCanvasPathRender = class RoughCanvasPathRender {
+let RoughCanvasPathRender = class RoughCanvasPathRender extends RoughBaseRender {
     constructor(canvasRenderer) {
+        super();
         this.canvasRenderer = canvasRenderer;
         this.style = 'rough';
         this.type = 'path';
@@ -1839,11 +1840,6 @@ let RoughCanvasPathRender = class RoughCanvasPathRender {
         }
         context.highPerformanceRestore();
     }
-    drawShape(graphic, ctx, x, y, drawContext, params, fillCb, strokeCb) {
-        if (this.canvasRenderer.drawShape) {
-            return this.canvasRenderer.drawShape(graphic, ctx, x, y, drawContext, params, fillCb, strokeCb);
-        }
-    }
 };
 RoughCanvasPathRender = __decorate([
     injectable(),
@@ -1851,8 +1847,9 @@ RoughCanvasPathRender = __decorate([
     __metadata("design:paramtypes", [Object])
 ], RoughCanvasPathRender);
 
-let RoughCanvasRectRender = class RoughCanvasRectRender {
+let RoughCanvasRectRender = class RoughCanvasRectRender extends RoughBaseRender {
     constructor(canvasRenderer) {
+        super();
         this.canvasRenderer = canvasRenderer;
         this.style = 'rough';
         this.type = 'rect';
@@ -1911,11 +1908,6 @@ let RoughCanvasRectRender = class RoughCanvasRectRender {
         });
         context.highPerformanceRestore();
     }
-    drawShape(graphic, ctx, x, y, drawContext, params, fillCb, strokeCb) {
-        if (this.canvasRenderer.drawShape) {
-            return this.canvasRenderer.drawShape(graphic, ctx, x, y, drawContext, params, fillCb, strokeCb);
-        }
-    }
 };
 RoughCanvasRectRender = __decorate([
     injectable(),
@@ -4558,39 +4550,34 @@ const m = new ContainerModule(bind => {
 });
 m.__vloaded = false;
 
-let DefaultMathArcPicker = class DefaultMathArcPicker {
-    constructor(canvasRenderer) {
-        this.canvasRenderer = canvasRenderer;
-        this.type = 'arc';
-        this.numberType = ARC_NUMBER_TYPE;
-    }
-    contains(arc, point, params) {
-        if (!arc.AABBBounds.containsPoint(point)) {
+class PickerBase {
+    contains(graphic, point, params) {
+        if (!graphic.AABBBounds.containsPoint(point)) {
             return false;
         }
-        if (arc.attribute.pickMode === 'imprecise') {
+        if (graphic.attribute.pickMode === 'imprecise') {
             return true;
         }
         const { pickContext } = params !== null && params !== void 0 ? params : {};
         if (!pickContext) {
             return false;
         }
-        const arcAttribute = getTheme(arc).arc;
+        const attribute = getTheme(graphic)[graphic.type];
         pickContext.highPerformanceSave();
-        let { x = arcAttribute.x, y = arcAttribute.y } = arc.attribute;
-        if (!arc.transMatrix.onlyTranslate()) {
+        let { x = attribute.x, y = attribute.y } = graphic.attribute;
+        if (!graphic.transMatrix.onlyTranslate()) {
             x = 0;
             y = 0;
-            pickContext.transformFromMatrix(arc.transMatrix, true);
+            pickContext.transformFromMatrix(graphic.transMatrix, true);
         }
         else {
-            const point = arc.getOffsetXY(arcAttribute);
+            const point = graphic.getOffsetXY(attribute);
             x += point.x;
             y += point.y;
             pickContext.setTransformForCurrent();
         }
         let picked = false;
-        this.canvasRenderer.drawShape(arc, pickContext, x, y, {}, null, (context, arcAttribute, themeAttribute) => {
+        this.canvasRenderer.drawShape(graphic, pickContext, x, y, {}, null, (context, arcAttribute, themeAttribute) => {
             if (picked) {
                 return true;
             }
@@ -4602,13 +4589,22 @@ let DefaultMathArcPicker = class DefaultMathArcPicker {
             }
             const lineWidth = arcAttribute.lineWidth || themeAttribute.lineWidth;
             const pickStrokeBuffer = arcAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-            pickContext.lineWidth = lineWidth + pickStrokeBuffer;
+            pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr);
             picked = context.isPointInStroke(point.x, point.y);
             return picked;
         });
         pickContext.highPerformanceRestore();
         return picked;
     }
+}
+
+let DefaultMathArcPicker = class DefaultMathArcPicker extends PickerBase {
+    constructor(canvasRenderer) {
+        super();
+        this.canvasRenderer = canvasRenderer;
+        this.type = 'arc';
+        this.numberType = ARC_NUMBER_TYPE;
+    }
 };
 DefaultMathArcPicker = __decorate([
     injectable(),
@@ -4626,48 +4622,13 @@ const arcMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) =>
     bind(MathPickerContribution).toService(MathArcPicker);
 });
 
-let DefaultMathAreaPicker = class DefaultMathAreaPicker {
+let DefaultMathAreaPicker = class DefaultMathAreaPicker extends PickerBase {
     constructor(canvasRenderer) {
+        super();
         this.canvasRenderer = canvasRenderer;
         this.type = 'area';
         this.numberType = AREA_NUMBER_TYPE;
     }
-    contains(area, point, params) {
-        if (!area.AABBBounds.containsPoint(point)) {
-            return false;
-        }
-        if (area.attribute.pickMode === 'imprecise') {
-            return true;
-        }
-        const { pickContext } = params !== null && params !== void 0 ? params : {};
-        if (!pickContext) {
-            return false;
-        }
-        const areaAttribute = getTheme(area).area;
-        let { x = areaAttribute.x, y = areaAttribute.y } = area.attribute;
-        pickContext.highPerformanceSave();
-        if (!area.transMatrix.onlyTranslate()) {
-            x = 0;
-            y = 0;
-            pickContext.transformFromMatrix(area.transMatrix, true);
-        }
-        else {
-            const point = area.getOffsetXY(areaAttribute);
-            x += point.x;
-            y += point.y;
-            pickContext.setTransformForCurrent();
-        }
-        let picked = false;
-        this.canvasRenderer.drawShape(area, pickContext, x, y, {}, null, context => {
-            if (picked) {
-                return true;
-            }
-            picked = context.isPointInPath(point.x, point.y);
-            return picked;
-        });
-        pickContext.highPerformanceRestore();
-        return picked;
-    }
 };
 DefaultMathAreaPicker = __decorate([
     injectable(),
@@ -4685,57 +4646,13 @@ const areaMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) =
     bind(MathPickerContribution).toService(MathAreaPicker);
 });
 
-let DefaultMathCirclePicker = class DefaultMathCirclePicker {
+let DefaultMathCirclePicker = class DefaultMathCirclePicker extends PickerBase {
     constructor(canvasRenderer) {
+        super();
         this.canvasRenderer = canvasRenderer;
         this.type = 'circle';
         this.numberType = CIRCLE_NUMBER_TYPE;
     }
-    contains(circle, point, params) {
-        if (!circle.AABBBounds.containsPoint(point)) {
-            return false;
-        }
-        if (circle.attribute.pickMode === 'imprecise') {
-            return true;
-        }
-        const { pickContext } = params !== null && params !== void 0 ? params : {};
-        if (!pickContext) {
-            return false;
-        }
-        const circleAttribute = getTheme(circle).circle;
-        let { x = circleAttribute.x, y = circleAttribute.y } = circle.attribute;
-        pickContext.highPerformanceSave();
-        if (!circle.transMatrix.onlyTranslate()) {
-            x = 0;
-            y = 0;
-            pickContext.transformFromMatrix(circle.transMatrix, true);
-        }
-        else {
-            const point = circle.getOffsetXY(circleAttribute);
-            x += point.x;
-            y += point.y;
-            pickContext.setTransformForCurrent();
-        }
-        let picked = false;
-        this.canvasRenderer.drawShape(circle, pickContext, x, y, {}, null, (context, circleAttribute, themeAttribute) => {
-            if (picked) {
-                return true;
-            }
-            picked = context.isPointInPath(point.x, point.y);
-            return picked;
-        }, (context, circleAttribute, themeAttribute) => {
-            if (picked) {
-                return true;
-            }
-            const lineWidth = circleAttribute.lineWidth || themeAttribute.lineWidth;
-            const pickStrokeBuffer = circleAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-            pickContext.lineWidth = lineWidth + pickStrokeBuffer;
-            picked = context.isPointInStroke(point.x, point.y);
-            return picked;
-        });
-        pickContext.highPerformanceRestore();
-        return picked;
-    }
 };
 DefaultMathCirclePicker = __decorate([
     injectable(),
@@ -4753,9 +4670,8 @@ const circleMathPickModule = new ContainerModule((bind, unbind, isBound, rebind)
     bind(MathPickerContribution).toService(MathCirclePicker);
 });
 
-let DefaultMathGlyphPicker = class DefaultMathGlyphPicker {
-    constructor(canvasRenderer) {
-        this.canvasRenderer = canvasRenderer;
+class GlyphPickerBase {
+    constructor() {
         this.type = 'glyph';
         this.numberType = GLYPH_NUMBER_TYPE;
     }
@@ -4777,12 +4693,20 @@ let DefaultMathGlyphPicker = class DefaultMathGlyphPicker {
                 if (picked) {
                     return;
                 }
-                picked = !!pickerService.pickItem(g, point, null, params);
+                const data = pickerService.pickItem(g, point, null, params);
+                picked = !!(data && data.graphic);
             });
             return picked;
         }
         return false;
     }
+}
+
+let DefaultMathGlyphPicker = class DefaultMathGlyphPicker extends GlyphPickerBase {
+    constructor(canvasRenderer) {
+        super();
+        this.canvasRenderer = canvasRenderer;
+    }
 };
 DefaultMathGlyphPicker = __decorate([
     injectable(),
@@ -4830,57 +4754,13 @@ const imageMathPickModule = new ContainerModule((bind, unbind, isBound, rebind)
     bind(DefaultMathImagePicker).toService(MathImagePicker);
 });
 
-let DefaultMathLinePicker = class DefaultMathLinePicker {
+let DefaultMathLinePicker = class DefaultMathLinePicker extends PickerBase {
     constructor(canvasRenderer) {
+        super();
         this.canvasRenderer = canvasRenderer;
         this.type = 'line';
         this.numberType = LINE_NUMBER_TYPE;
     }
-    contains(line, point, params) {
-        if (!line.AABBBounds.containsPoint(point)) {
-            return false;
-        }
-        if (line.attribute.pickMode === 'imprecise') {
-            return true;
-        }
-        const { pickContext } = params !== null && params !== void 0 ? params : {};
-        if (!pickContext) {
-            return false;
-        }
-        const lineAttribute = getTheme(line).line;
-        let { x = lineAttribute.x, y = lineAttribute.y } = line.attribute;
-        pickContext.highPerformanceSave();
-        if (!line.transMatrix.onlyTranslate()) {
-            x = 0;
-            y = 0;
-            pickContext.transformFromMatrix(line.transMatrix, true);
-        }
-        else {
-            const point = line.getOffsetXY(lineAttribute);
-            x += point.x;
-            y += point.y;
-            pickContext.setTransformForCurrent();
-        }
-        let picked = false;
-        this.canvasRenderer.drawShape(line, pickContext, x, y, {}, null, context => {
-            if (picked) {
-                return true;
-            }
-            picked = context.isPointInPath(point.x, point.y);
-            return picked;
-        }, (context, circleAttribute, themeAttribute) => {
-            if (picked) {
-                return true;
-            }
-            const lineWidth = circleAttribute.lineWidth || themeAttribute.lineWidth;
-            const pickStrokeBuffer = circleAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-            pickContext.lineWidth = lineWidth + pickStrokeBuffer;
-            picked = context.isPointInStroke(point.x, point.y);
-            return picked;
-        });
-        pickContext.highPerformanceRestore();
-        return picked;
-    }
 };
 DefaultMathLinePicker = __decorate([
     injectable(),
@@ -4898,54 +4778,13 @@ const lineMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) =
     bind(MathPickerContribution).toService(MathLinePicker);
 });
 
-let DefaultMathPolygonPicker = class DefaultMathPolygonPicker {
+let DefaultMathPolygonPicker = class DefaultMathPolygonPicker extends PickerBase {
     constructor(canvasRenderer) {
+        super();
         this.canvasRenderer = canvasRenderer;
         this.type = 'polygon';
         this.numberType = POLYGON_NUMBER_TYPE;
     }
-    contains(polygon, point, params) {
-        if (!polygon.AABBBounds.contains(point.x, point.y)) {
-            return false;
-        }
-        const { pickContext } = params !== null && params !== void 0 ? params : {};
-        if (!pickContext) {
-            return false;
-        }
-        const pathAttribute = getTheme(polygon).polygon;
-        let { x = pathAttribute.x, y = pathAttribute.y } = polygon.attribute;
-        pickContext.highPerformanceSave();
-        if (!polygon.transMatrix.onlyTranslate()) {
-            x = 0;
-            y = 0;
-            pickContext.transformFromMatrix(polygon.transMatrix, true);
-        }
-        else {
-            const point = polygon.getOffsetXY(pathAttribute);
-            x += point.x;
-            y += point.y;
-            pickContext.setTransformForCurrent();
-        }
-        let picked = false;
-        this.canvasRenderer.drawShape(polygon, pickContext, x, y, {}, null, (context, pathAttribute, themeAttribute) => {
-            if (picked) {
-                return true;
-            }
-            picked = context.isPointInPath(point.x, point.y);
-            return picked;
-        }, (context, pathAttribute, themeAttribute) => {
-            if (picked) {
-                return true;
-            }
-            const lineWidth = pathAttribute.lineWidth || themeAttribute.lineWidth;
-            const pickStrokeBuffer = pathAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-            pickContext.lineWidth = lineWidth + pickStrokeBuffer;
-            picked = context.isPointInStroke(point.x, point.y);
-            return picked;
-        });
-        pickContext.highPerformanceRestore();
-        return picked;
-    }
 };
 DefaultMathPolygonPicker = __decorate([
     injectable(),
@@ -4963,57 +4802,13 @@ const polygonMathPickModule = new ContainerModule((bind, unbind, isBound, rebind
     bind(MathPickerContribution).toService(MathPolygonPicker);
 });
 
-let DefaultMathPathPicker = class DefaultMathPathPicker {
+let DefaultMathPathPicker = class DefaultMathPathPicker extends PickerBase {
     constructor(canvasRenderer) {
+        super();
         this.canvasRenderer = canvasRenderer;
         this.type = 'path';
         this.numberType = PATH_NUMBER_TYPE;
     }
-    contains(path, point, params) {
-        if (!path.AABBBounds.containsPoint(point)) {
-            return false;
-        }
-        if (path.attribute.pickMode === 'imprecise') {
-            return true;
-        }
-        const { pickContext } = params !== null && params !== void 0 ? params : {};
-        if (!pickContext) {
-            return false;
-        }
-        const pathAttribute = getTheme(path).path;
-        let { x = pathAttribute.x, y = pathAttribute.y } = path.attribute;
-        pickContext.highPerformanceSave();
-        if (!path.transMatrix.onlyTranslate()) {
-            x = 0;
-            y = 0;
-            pickContext.transformFromMatrix(path.transMatrix, true);
-        }
-        else {
-            const point = path.getOffsetXY(pathAttribute);
-            x += point.x;
-            y += point.y;
-            pickContext.setTransformForCurrent();
-        }
-        let picked = false;
-        this.canvasRenderer.drawShape(path, pickContext, x, y, {}, null, (context, pathAttribute, themeAttribute) => {
-            if (picked) {
-                return true;
-            }
-            picked = context.isPointInPath(point.x, point.y);
-            return picked;
-        }, (context, pathAttribute, themeAttribute) => {
-            if (picked) {
-                return true;
-            }
-            const lineWidth = pathAttribute.lineWidth || themeAttribute.lineWidth;
-            const pickStrokeBuffer = pathAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-            pickContext.lineWidth = lineWidth + pickStrokeBuffer;
-            picked = context.isPointInStroke(point.x, point.y);
-            return picked;
-        });
-        pickContext.highPerformanceRestore();
-        return picked;
-    }
 };
 DefaultMathPathPicker = __decorate([
     injectable(),
@@ -5031,10 +4826,9 @@ const pathMathPickModule = new ContainerModule((bind, unbind, isBound, rebind) =
     bind(MathPickerContribution).toService(MathPathPicker);
 });
 
-const _bounds$1 = new AABBBounds();
-let DefaultMathRectPicker = class DefaultMathRectPicker {
-    constructor(canvasRenderer) {
-        this.canvasRenderer = canvasRenderer;
+const _bounds = new AABBBounds();
+class RectPickerBase {
+    constructor() {
         this.type = 'rect';
         this.numberType = RECT_NUMBER_TYPE;
     }
@@ -5068,6 +4862,7 @@ let DefaultMathRectPicker = class DefaultMathRectPicker {
         }
         let picked = true;
         if (!onlyTranslate ||
+            rect.shadowRoot ||
             (isNumber(cornerRadius, true) && cornerRadius !== 0) ||
             (isArray(cornerRadius) && cornerRadius.some(num => num !== 0))) {
             picked = false;
@@ -5083,26 +4878,33 @@ let DefaultMathRectPicker = class DefaultMathRectPicker {
                 }
                 const lineWidth = rectAttribute.lineWidth || themeAttribute.lineWidth;
                 const pickStrokeBuffer = rectAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-                pickContext.lineWidth = lineWidth + pickStrokeBuffer;
+                pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr);
                 picked = context.isPointInStroke(point.x, point.y);
                 return picked;
             });
         }
-        else if (picked) {
+        else {
             const { fill = rectAttribute.fill, stroke = rectAttribute.stroke, lineWidth = rectAttribute.lineWidth } = rect.attribute;
             if (fill) {
                 picked = true;
             }
             else if (stroke) {
                 const bounds = rect.AABBBounds;
-                _bounds$1.setValue(bounds.x1, bounds.y1, bounds.x2, bounds.y2);
-                _bounds$1.expand(-lineWidth / 2);
-                picked = !_bounds$1.containsPoint(point);
+                _bounds.setValue(bounds.x1, bounds.y1, bounds.x2, bounds.y2);
+                _bounds.expand(-lineWidth / 2);
+                picked = !_bounds.containsPoint(point);
             }
         }
         pickContext.highPerformanceRestore();
         return picked;
     }
+}
+
+let DefaultMathRectPicker = class DefaultMathRectPicker extends RectPickerBase {
+    constructor(canvasRenderer) {
+        super();
+        this.canvasRenderer = canvasRenderer;
+    }
 };
 DefaultMathRectPicker = __decorate([
     injectable(),
@@ -5130,57 +4932,13 @@ const richTextMathPickModule = new ContainerModule((bind, unbind, isBound, rebin
     bind(DefaultMathImagePicker).toService(MathImagePicker);
 });
 
-let DefaultMathSymbolPicker = class DefaultMathSymbolPicker {
+let DefaultMathSymbolPicker = class DefaultMathSymbolPicker extends PickerBase {
     constructor(canvasRenderer) {
+        super();
         this.canvasRenderer = canvasRenderer;
         this.type = 'symbol';
         this.numberType = SYMBOL_NUMBER_TYPE;
     }
-    contains(symbol, point, params) {
-        if (!symbol.AABBBounds.containsPoint(point)) {
-            return false;
-        }
-        if (symbol.attribute.pickMode === 'imprecise') {
-            return true;
-        }
-        const { pickContext } = params !== null && params !== void 0 ? params : {};
-        if (!pickContext) {
-            return false;
-        }
-        const symbolAttribute = getTheme(symbol).symbol;
-        let { x = symbolAttribute.x, y = symbolAttribute.y } = symbol.attribute;
-        pickContext.highPerformanceSave();
-        if (!symbol.transMatrix.onlyTranslate()) {
-            x = 0;
-            y = 0;
-            pickContext.transformFromMatrix(symbol.transMatrix, true);
-        }
-        else {
-            const point = symbol.getOffsetXY(symbolAttribute);
-            x += point.x;
-            y += point.y;
-            pickContext.setTransformForCurrent();
-        }
-        let picked = false;
-        this.canvasRenderer.drawShape(symbol, pickContext, x, y, {}, null, (context, symbolAttribute, themeAttribute) => {
-            if (picked) {
-                return true;
-            }
-            picked = context.isPointInPath(point.x, point.y);
-            return picked;
-        }, (context, symbolAttribute, themeAttribute) => {
-            if (picked) {
-                return true;
-            }
-            const lineWidth = symbolAttribute.lineWidth || themeAttribute.lineWidth;
-            const pickStrokeBuffer = symbolAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-            pickContext.lineWidth = lineWidth + pickStrokeBuffer;
-            picked = context.isPointInStroke(point.x, point.y);
-            return picked;
-        });
-        pickContext.highPerformanceRestore();
-        return picked;
-    }
 };
 DefaultMathSymbolPicker = __decorate([
     injectable(),
@@ -7984,57 +7742,13 @@ function initHarmonyEnv() {
     loadHarmonyEnv(container);
 }
 
-let DefaultCanvasArcPicker = class DefaultCanvasArcPicker {
+let DefaultCanvasArcPicker = class DefaultCanvasArcPicker extends PickerBase {
     constructor(canvasRenderer) {
+        super();
         this.canvasRenderer = canvasRenderer;
         this.type = 'arc';
         this.numberType = ARC_NUMBER_TYPE;
     }
-    contains(arc, point, params) {
-        if (!arc.AABBBounds.containsPoint(point)) {
-            return false;
-        }
-        if (arc.attribute.pickMode === 'imprecise') {
-            return true;
-        }
-        const { pickContext } = params !== null && params !== void 0 ? params : {};
-        if (!pickContext) {
-            return false;
-        }
-        const arcAttribute = getTheme(arc).arc;
-        pickContext.highPerformanceSave();
-        let { x = arcAttribute.x, y = arcAttribute.y } = arc.attribute;
-        if (!arc.transMatrix.onlyTranslate()) {
-            x = 0;
-            y = 0;
-            pickContext.transformFromMatrix(arc.transMatrix, true);
-        }
-        else {
-            const point = arc.getOffsetXY(arcAttribute);
-            x += point.x;
-            y += point.y;
-            pickContext.setTransformForCurrent();
-        }
-        let picked = false;
-        this.canvasRenderer.drawShape(arc, pickContext, x, y, {}, null, (context, arcAttribute, themeAttribute) => {
-            if (picked) {
-                return true;
-            }
-            picked = context.isPointInPath(point.x, point.y);
-            return picked;
-        }, (context, arcAttribute, themeAttribute) => {
-            if (picked) {
-                return true;
-            }
-            const lineWidth = arcAttribute.lineWidth || themeAttribute.lineWidth;
-            const pickStrokeBuffer = arcAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-            pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr);
-            picked = context.isPointInStroke(point.x, point.y);
-            return picked;
-        });
-        pickContext.highPerformanceRestore();
-        return picked;
-    }
 };
 DefaultCanvasArcPicker = __decorate([
     injectable(),
@@ -8052,78 +7766,10 @@ const arcCanvasPickModule = new ContainerModule((bind, unbind, isBound, rebind)
     bind(CanvasPickerContribution).toService(CanvasArcPicker);
 });
 
-const _bounds = new AABBBounds();
-let DefaultCanvasRectPicker = class DefaultCanvasRectPicker {
+let DefaultCanvasRectPicker = class DefaultCanvasRectPicker extends RectPickerBase {
     constructor(canvasRenderer) {
+        super();
         this.canvasRenderer = canvasRenderer;
-        this.type = 'rect';
-        this.numberType = RECT_NUMBER_TYPE;
-    }
-    contains(rect, point, params) {
-        if (!rect.AABBBounds.containsPoint(point)) {
-            return false;
-        }
-        if (rect.attribute.pickMode === 'imprecise') {
-            return true;
-        }
-        const { pickContext } = params !== null && params !== void 0 ? params : {};
-        if (!pickContext) {
-            return false;
-        }
-        const rectAttribute = getTheme(rect).rect;
-        const { cornerRadius = rectAttribute.cornerRadius } = rect.attribute;
-        let { x = rectAttribute.x, y = rectAttribute.y } = rect.attribute;
-        pickContext.highPerformanceSave();
-        let onlyTranslate = true;
-        if (!rect.transMatrix.onlyTranslate()) {
-            x = 0;
-            y = 0;
-            onlyTranslate = false;
-            pickContext.transformFromMatrix(rect.transMatrix, true);
-        }
-        else {
-            const point = rect.getOffsetXY(rectAttribute);
-            x += point.x;
-            y += point.y;
-            pickContext.setTransformForCurrent();
-        }
-        let picked = true;
-        if (!onlyTranslate ||
-            rect.shadowRoot ||
-            (isNumber(cornerRadius, true) && cornerRadius !== 0) ||
-            (isArray(cornerRadius) && cornerRadius.some(num => num !== 0))) {
-            picked = false;
-            this.canvasRenderer.drawShape(rect, pickContext, x, y, {}, null, (context, rectAttribute, themeAttribute) => {
-                if (picked) {
-                    return true;
-                }
-                picked = context.isPointInPath(point.x, point.y);
-                return picked;
-            }, (context, rectAttribute, themeAttribute) => {
-                if (picked) {
-                    return true;
-                }
-                const lineWidth = rectAttribute.lineWidth || themeAttribute.lineWidth;
-                const pickStrokeBuffer = rectAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-                pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr);
-                picked = context.isPointInStroke(point.x, point.y);
-                return picked;
-            });
-        }
-        else {
-            const { fill = rectAttribute.fill, stroke = rectAttribute.stroke, lineWidth = rectAttribute.lineWidth } = rect.attribute;
-            if (fill) {
-                picked = true;
-            }
-            else if (stroke) {
-                const bounds = rect.AABBBounds;
-                _bounds.setValue(bounds.x1, bounds.y1, bounds.x2, bounds.y2);
-                _bounds.expand(-lineWidth / 2);
-                picked = !_bounds.containsPoint(point);
-            }
-        }
-        pickContext.highPerformanceRestore();
-        return picked;
     }
 };
 DefaultCanvasRectPicker = __decorate([
@@ -8142,24 +7788,12 @@ const rectCanvasPickModule = new ContainerModule((bind, unbind, isBound, rebind)
     bind(CanvasPickerContribution).toService(CanvasRectPicker);
 });
 
-let BasePicker = class BasePicker extends BaseRender {
-};
-BasePicker = __decorate([
-    injectable()
-], BasePicker);
-
-let DefaultCanvasLinePicker = class DefaultCanvasLinePicker extends BasePicker {
-    constructor(canvasRenderer) {
-        super();
-        this.canvasRenderer = canvasRenderer;
-        this.type = 'line';
-        this.numberType = LINE_NUMBER_TYPE;
-    }
-    contains(line, point, params) {
-        if (!line.AABBBounds.containsPoint(point)) {
+class BaseLinePicker extends BaseRender {
+    contains(graphic, point, params) {
+        if (!graphic.AABBBounds.containsPoint(point)) {
             return false;
         }
-        if (line.attribute.pickMode === 'imprecise') {
+        if (graphic.attribute.pickMode === 'imprecise') {
             return true;
         }
         const { pickContext } = params !== null && params !== void 0 ? params : {};
@@ -8167,19 +7801,19 @@ let DefaultCanvasLinePicker = class DefaultCanvasLinePicker extends BasePicker {
             return false;
         }
         pickContext.highPerformanceSave();
-        const lineAttribute = getTheme(line).line;
-        const data = this.transform(line, lineAttribute, pickContext);
+        const lineAttribute = getTheme(graphic)[graphic.type];
+        const data = this.transform(graphic, lineAttribute, pickContext);
         const { x, y, z, lastModelMatrix } = data;
         let pickPoint = point;
         if (pickContext.camera) {
             pickPoint = point.clone();
-            const globalMatrix = line.parent.globalTransMatrix;
+            const globalMatrix = graphic.parent.globalTransMatrix;
             pickPoint.x = globalMatrix.a * point.x + globalMatrix.c * point.y + globalMatrix.e;
             pickPoint.y = globalMatrix.b * point.x + globalMatrix.d * point.y + globalMatrix.f;
         }
         this.canvasRenderer.z = z;
         let picked = false;
-        this.canvasRenderer.drawShape(line, pickContext, x, y, {}, null, context => {
+        this.canvasRenderer.drawShape(graphic, pickContext, x, y, {}, null, context => {
             if (picked) {
                 return true;
             }
@@ -8203,6 +7837,15 @@ let DefaultCanvasLinePicker = class DefaultCanvasLinePicker extends BasePicker {
         pickContext.highPerformanceRestore();
         return picked;
     }
+}
+
+let DefaultCanvasLinePicker = class DefaultCanvasLinePicker extends BaseLinePicker {
+    constructor(canvasRenderer) {
+        super();
+        this.canvasRenderer = canvasRenderer;
+        this.type = 'line';
+        this.numberType = LINE_NUMBER_TYPE;
+    }
 };
 DefaultCanvasLinePicker = __decorate([
     injectable(),
@@ -8220,64 +7863,13 @@ const lineCanvasPickModule = new ContainerModule((bind, unbind, isBound, rebind)
     bind(CanvasPickerContribution).toService(CanvasLinePicker);
 });
 
-let DefaultCanvasAreaPicker = class DefaultCanvasAreaPicker {
+let DefaultCanvasAreaPicker = class DefaultCanvasAreaPicker extends PickerBase {
     constructor(canvasRenderer) {
+        super();
         this.canvasRenderer = canvasRenderer;
         this.type = 'area';
         this.numberType = AREA_NUMBER_TYPE;
     }
-    contains(area, point, params) {
-        if (!area.AABBBounds.containsPoint(point)) {
-            return false;
-        }
-        if (area.attribute.pickMode === 'imprecise') {
-            return true;
-        }
-        const { pickContext } = params !== null && params !== void 0 ? params : {};
-        if (!pickContext) {
-            return false;
-        }
-        const areaAttribute = getTheme(area).area;
-        let { x = areaAttribute.x, y = areaAttribute.y } = area.attribute;
-        const { fillPickable = areaAttribute.fillPickable, strokePickable = areaAttribute.strokePickable } = area.attribute;
-        pickContext.highPerformanceSave();
-        if (!area.transMatrix.onlyTranslate()) {
-            x = 0;
-            y = 0;
-            pickContext.transformFromMatrix(area.transMatrix, true);
-        }
-        else {
-            const point = area.getOffsetXY(areaAttribute);
-            x += point.x;
-            y += point.y;
-            pickContext.setTransformForCurrent();
-        }
-        let picked = false;
-        this.canvasRenderer.drawShape(area, pickContext, x, y, {}, null, context => {
-            if (picked) {
-                return true;
-            }
-            if (!fillPickable) {
-                return false;
-            }
-            picked = context.isPointInPath(point.x, point.y);
-            return picked;
-        }, (context, areaAttribute, themeAttribute) => {
-            if (picked) {
-                return true;
-            }
-            if (!strokePickable) {
-                return false;
-            }
-            const lineWidth = areaAttribute.lineWidth || themeAttribute.lineWidth;
-            const pickStrokeBuffer = areaAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-            pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr);
-            picked = context.isPointInStroke(point.x, point.y);
-            return picked;
-        });
-        pickContext.highPerformanceRestore();
-        return picked;
-    }
 };
 DefaultCanvasAreaPicker = __decorate([
     injectable(),
@@ -8295,7 +7887,44 @@ const areaCanvasPickModule = new ContainerModule((bind, unbind, isBound, rebind)
     bind(CanvasPickerContribution).toService(CanvasAreaPicker);
 });
 
-let DefaultCanvasSymbolPicker = class DefaultCanvasSymbolPicker extends BasePicker {
+class Base3dPicker extends BaseRender {
+    contains(graphic, point, params) {
+        var _a;
+        const { pickContext } = params !== null && params !== void 0 ? params : {};
+        if (!pickContext) {
+            return false;
+        }
+        const attribute = getTheme(graphic)[(_a = this.themeType) !== null && _a !== void 0 ? _a : graphic.type];
+        pickContext.highPerformanceSave();
+        const data = this.transform(graphic, attribute, pickContext);
+        const { x, y, z, lastModelMatrix } = data;
+        let pickPoint = point;
+        if (pickContext.camera) {
+            pickPoint = point.clone();
+            const globalMatrix = graphic.parent.globalTransMatrix;
+            pickPoint.x = globalMatrix.a * point.x + globalMatrix.c * point.y + globalMatrix.e;
+            pickPoint.y = globalMatrix.b * point.x + globalMatrix.d * point.y + globalMatrix.f;
+        }
+        this.canvasRenderer.z = z;
+        let picked = false;
+        this.canvasRenderer.drawShape(graphic, pickContext, x, y, params, null, (context, arc3dAttribute, themeAttribute) => {
+            if (picked) {
+                return true;
+            }
+            picked = context.isPointInPath(pickPoint.x, pickPoint.y);
+            return picked;
+        });
+        this.canvasRenderer.z = 0;
+        if (pickContext.modelMatrix !== lastModelMatrix) {
+            mat4Allocate.free(pickContext.modelMatrix);
+        }
+        pickContext.modelMatrix = lastModelMatrix;
+        pickContext.highPerformanceRestore();
+        return picked;
+    }
+}
+
+let DefaultCanvasSymbolPicker = class DefaultCanvasSymbolPicker extends Base3dPicker {
     constructor(canvasRenderer) {
         super();
         this.canvasRenderer = canvasRenderer;
@@ -8370,57 +7999,13 @@ const symbolCanvasPickModule = new ContainerModule((bind, unbind, isBound, rebin
     bind(CanvasPickerContribution).toService(CanvasSymbolPicker);
 });
 
-let DefaultCanvasCirclePicker = class DefaultCanvasCirclePicker {
+let DefaultCanvasCirclePicker = class DefaultCanvasCirclePicker extends PickerBase {
     constructor(canvasRenderer) {
+        super();
         this.canvasRenderer = canvasRenderer;
         this.type = 'circle';
         this.numberType = CIRCLE_NUMBER_TYPE;
     }
-    contains(circle, point, params) {
-        if (!circle.AABBBounds.containsPoint(point)) {
-            return false;
-        }
-        if (circle.attribute.pickMode === 'imprecise') {
-            return true;
-        }
-        const { pickContext } = params !== null && params !== void 0 ? params : {};
-        if (!pickContext) {
-            return false;
-        }
-        const circleAttribute = getTheme(circle).circle;
-        let { x = circleAttribute.x, y = circleAttribute.y } = circle.attribute;
-        pickContext.highPerformanceSave();
-        if (!circle.transMatrix.onlyTranslate()) {
-            x = 0;
-            y = 0;
-            pickContext.transformFromMatrix(circle.transMatrix, true);
-        }
-        else {
-            const point = circle.getOffsetXY(circleAttribute);
-            x += point.x;
-            y += point.y;
-            pickContext.setTransformForCurrent();
-        }
-        let picked = false;
-        this.canvasRenderer.drawShape(circle, pickContext, x, y, {}, null, (context, circleAttribute, themeAttribute) => {
-            if (picked) {
-                return true;
-            }
-            picked = context.isPointInPath(point.x, point.y);
-            return picked;
-        }, (context, circleAttribute, themeAttribute) => {
-            if (picked) {
-                return true;
-            }
-            const lineWidth = circleAttribute.lineWidth || themeAttribute.lineWidth;
-            const pickStrokeBuffer = circleAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-            pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr);
-            picked = context.isPointInStroke(point.x, point.y);
-            return picked;
-        });
-        pickContext.highPerformanceRestore();
-        return picked;
-    }
 };
 DefaultCanvasCirclePicker = __decorate([
     injectable(),
@@ -8438,7 +8023,7 @@ const circleCanvasPickModule = new ContainerModule((bind, unbind, isBound, rebin
     bind(CanvasPickerContribution).toService(CanvasCirclePicker);
 });
 
-let DefaultCanvasTextPicker = class DefaultCanvasTextPicker extends BasePicker {
+let DefaultCanvasTextPicker = class DefaultCanvasTextPicker extends Base3dPicker {
     constructor(canvasRenderer) {
         super();
         this.canvasRenderer = canvasRenderer;
@@ -8513,61 +8098,13 @@ const textCanvasPickModule = new ContainerModule((bind, unbind, isBound, rebind)
     bind(CanvasPickerContribution).toService(CanvasTextPicker);
 });
 
-let DefaultCanvasPathPicker = class DefaultCanvasPathPicker extends BasePicker {
+let DefaultCanvasPathPicker = class DefaultCanvasPathPicker extends BaseLinePicker {
     constructor(canvasRenderer) {
         super();
         this.canvasRenderer = canvasRenderer;
         this.type = 'path';
         this.numberType = PATH_NUMBER_TYPE;
     }
-    contains(path, point, params) {
-        if (!path.AABBBounds.containsPoint(point)) {
-            return false;
-        }
-        if (path.attribute.pickMode === 'imprecise') {
-            return true;
-        }
-        const { pickContext } = params !== null && params !== void 0 ? params : {};
-        if (!pickContext) {
-            return false;
-        }
-        const pathAttribute = getTheme(path).path;
-        pickContext.highPerformanceSave();
-        const data = this.transform(path, pathAttribute, pickContext);
-        const { x, y, z, lastModelMatrix } = data;
-        let pickPoint = point;
-        if (pickContext.camera) {
-            pickPoint = point.clone();
-            const globalMatrix = path.parent.globalTransMatrix;
-            pickPoint.x = globalMatrix.a * point.x + globalMatrix.c * point.y + globalMatrix.e;
-            pickPoint.y = globalMatrix.b * point.x + globalMatrix.d * point.y + globalMatrix.f;
-        }
-        this.canvasRenderer.z = z;
-        let picked = false;
-        this.canvasRenderer.drawShape(path, pickContext, x, y, {}, null, (context, pathAttribute, themeAttribute) => {
-            if (picked) {
-                return true;
-            }
-            picked = context.isPointInPath(pickPoint.x, pickPoint.y);
-            return picked;
-        }, (context, pathAttribute, themeAttribute) => {
-            if (picked) {
-                return true;
-            }
-            const lineWidth = pathAttribute.lineWidth || themeAttribute.lineWidth;
-            const pickStrokeBuffer = pathAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-            pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr);
-            picked = context.isPointInStroke(pickPoint.x, pickPoint.y);
-            return picked;
-        });
-        this.canvasRenderer.z = 0;
-        if (pickContext.modelMatrix !== lastModelMatrix) {
-            mat4Allocate.free(pickContext.modelMatrix);
-        }
-        pickContext.modelMatrix = lastModelMatrix;
-        pickContext.highPerformanceRestore();
-        return picked;
-    }
 };
 DefaultCanvasPathPicker = __decorate([
     injectable(),
@@ -8585,57 +8122,13 @@ const pathCanvasPickModule = new ContainerModule((bind, unbind, isBound, rebind)
     bind(CanvasPickerContribution).toService(CanvasPathPicker);
 });
 
-let DefaultCanvasPolygonPicker = class DefaultCanvasPolygonPicker {
+let DefaultCanvasPolygonPicker = class DefaultCanvasPolygonPicker extends PickerBase {
     constructor(canvasRenderer) {
+        super();
         this.canvasRenderer = canvasRenderer;
         this.type = 'polygon';
         this.numberType = POLYGON_NUMBER_TYPE;
     }
-    contains(polygon, point, params) {
-        if (!polygon.AABBBounds.contains(point.x, point.y)) {
-            return false;
-        }
-        if (polygon.attribute.pickMode === 'imprecise') {
-            return true;
-        }
-        const { pickContext } = params !== null && params !== void 0 ? params : {};
-        if (!pickContext) {
-            return false;
-        }
-        const polygonAttribute = getTheme(polygon).polygon;
-        let { x = polygonAttribute.x, y = polygonAttribute.y } = polygon.attribute;
-        pickContext.highPerformanceSave();
-        if (!polygon.transMatrix.onlyTranslate()) {
-            x = 0;
-            y = 0;
-            pickContext.transformFromMatrix(polygon.transMatrix, true);
-        }
-        else {
-            const point = polygon.getOffsetXY(polygonAttribute);
-            x += point.x;
-            y += point.y;
-            pickContext.setTransformForCurrent();
-        }
-        let picked = false;
-        this.canvasRenderer.drawShape(polygon, pickContext, x, y, {}, null, (context, pathAttribute, themeAttribute) => {
-            if (picked) {
-                return true;
-            }
-            picked = context.isPointInPath(point.x, point.y);
-            return picked;
-        }, (context, pathAttribute, themeAttribute) => {
-            if (picked) {
-                return true;
-            }
-            const lineWidth = pathAttribute.lineWidth || themeAttribute.lineWidth;
-            const pickStrokeBuffer = pathAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
-            pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr);
-            picked = context.isPointInStroke(point.x, point.y);
-            return picked;
-        });
-        pickContext.highPerformanceRestore();
-        return picked;
-    }
 };
 DefaultCanvasPolygonPicker = __decorate([
     injectable(),
@@ -8653,36 +8146,10 @@ const polygonCanvasPickModule = new ContainerModule((bind, unbind, isBound, rebi
     bind(CanvasPickerContribution).toService(CanvasPolygonPicker);
 });
 
-let DefaultCanvasGlyphPicker = class DefaultCanvasGlyphPicker {
+let DefaultCanvasGlyphPicker = class DefaultCanvasGlyphPicker extends GlyphPickerBase {
     constructor(canvasRenderer) {
+        super();
         this.canvasRenderer = canvasRenderer;
-        this.type = 'glyph';
-        this.numberType = GLYPH_NUMBER_TYPE;
-    }
-    contains(glyph, point, params) {
-        if (!glyph.AABBBounds.containsPoint(point)) {
-            return false;
-        }
-        if (glyph.attribute.pickMode === 'imprecise') {
-            return true;
-        }
-        const { pickContext } = params !== null && params !== void 0 ? params : {};
-        if (!pickContext) {
-            return false;
-        }
-        const pickerService = params === null || params === void 0 ? void 0 : params.pickerService;
-        if (pickerService) {
-            let picked = false;
-            glyph.getSubGraphic().forEach(g => {
-                if (picked) {
-                    return;
-                }
-                const data = pickerService.pickItem(g, point, null, params);
-                picked = !!(data && data.graphic);
-            });
-            return picked;
-        }
-        return false;
     }
 };
 DefaultCanvasGlyphPicker = __decorate([
@@ -8760,46 +8227,13 @@ const imageCanvasPickModule = new ContainerModule((bind, unbind, isBound, rebind
     bind(CanvasPickerContribution).toService(CanvasImagePicker);
 });
 
-new AABBBounds();
-let DefaultCanvasRect3dPicker = class DefaultCanvasRect3dPicker extends BasePicker {
+let DefaultCanvasRect3dPicker = class DefaultCanvasRect3dPicker extends Base3dPicker {
     constructor(canvasRenderer) {
         super();
         this.canvasRenderer = canvasRenderer;
         this.type = 'rect3d';
         this.numberType = RECT3D_NUMBER_TYPE;
-    }
-    contains(rect, point, params) {
-        const { pickContext } = params !== null && params !== void 0 ? params : {};
-        if (!pickContext) {
-            return false;
-        }
-        const rectAttribute = getTheme(rect).rect;
-        pickContext.highPerformanceSave();
-        const data = this.transform(rect, rectAttribute, pickContext);
-        const { x, y, z, lastModelMatrix } = data;
-        let pickPoint = point;
-        if (pickContext.camera) {
-            pickPoint = point.clone();
-            const globalMatrix = rect.parent.globalTransMatrix;
-            pickPoint.x = globalMatrix.a * point.x + globalMatrix.c * point.y + globalMatrix.e;
-            pickPoint.y = globalMatrix.b * point.x + globalMatrix.d * point.y + globalMatrix.f;
-        }
-        this.canvasRenderer.z = z;
-        let picked = false;
-        this.canvasRenderer.drawShape(rect, pickContext, x, y, params, null, (context, arc3dAttribute, themeAttribute) => {
-            if (picked) {
-                return true;
-            }
-            picked = context.isPointInPath(pickPoint.x, pickPoint.y);
-            return picked;
-        });
-        this.canvasRenderer.z = 0;
-        if (pickContext.modelMatrix !== lastModelMatrix) {
-            mat4Allocate.free(pickContext.modelMatrix);
-        }
-        pickContext.modelMatrix = lastModelMatrix;
-        pickContext.highPerformanceRestore();
-        return picked;
+        this.themeType = 'rect';
     }
 };
 DefaultCanvasRect3dPicker = __decorate([
@@ -8818,45 +8252,13 @@ const rect3dCanvasPickModule = new ContainerModule((bind, unbind, isBound, rebin
     bind(CanvasPickerContribution).toService(CanvasRect3dPicker);
 });
 
-let DefaultCanvasArc3dPicker = class DefaultCanvasArc3dPicker extends BasePicker {
+let DefaultCanvasArc3dPicker = class DefaultCanvasArc3dPicker extends Base3dPicker {
     constructor(canvasRenderer) {
         super();
         this.canvasRenderer = canvasRenderer;
         this.type = 'arc3d';
         this.numberType = ARC3D_NUMBER_TYPE;
-    }
-    contains(arc3d, point, params) {
-        const { pickContext } = params !== null && params !== void 0 ? params : {};
-        if (!pickContext) {
-            return false;
-        }
-        const arc3dAttribute = getTheme(arc3d).arc;
-        pickContext.highPerformanceSave();
-        const data = this.transform(arc3d, arc3dAttribute, pickContext);
-        const { x, y, z, lastModelMatrix } = data;
-        let pickPoint = point;
-        if (pickContext.camera) {
-            pickPoint = point.clone();
-            const globalMatrix = arc3d.parent.globalTransMatrix;
-            pickPoint.x = globalMatrix.a * point.x + globalMatrix.c * point.y + globalMatrix.e;
-            pickPoint.y = globalMatrix.b * point.x + globalMatrix.d * point.y + globalMatrix.f;
-        }
-        this.canvasRenderer.z = z;
-        let picked = false;
-        this.canvasRenderer.drawShape(arc3d, pickContext, x, y, params, null, (context, arc3dAttribute, themeAttribute) => {
-            if (picked) {
-                return true;
-            }
-            picked = context.isPointInPath(pickPoint.x, pickPoint.y);
-            return picked;
-        });
-        this.canvasRenderer.z = 0;
-        if (pickContext.modelMatrix !== lastModelMatrix) {
-            mat4Allocate.free(pickContext.modelMatrix);
-        }
-        pickContext.modelMatrix = lastModelMatrix;
-        pickContext.highPerformanceRestore();
-        return picked;
+        this.themeType = 'arc';
     }
 };
 DefaultCanvasArc3dPicker = __decorate([
@@ -8875,47 +8277,13 @@ const arc3dCanvasPickModule = new ContainerModule((bind, unbind, isBound, rebind
     bind(CanvasPickerContribution).toService(CanvasArc3dPicker);
 });
 
-let DefaultCanvasPyramid3dPicker = class DefaultCanvasPyramid3dPicker extends BasePicker {
+let DefaultCanvasPyramid3dPicker = class DefaultCanvasPyramid3dPicker extends Base3dPicker {
     constructor(canvasRenderer) {
         super();
         this.canvasRenderer = canvasRenderer;
         this.type = 'pyramid3d';
         this.numberType = PYRAMID3D_NUMBER_TYPE;
-    }
-    contains(pyramid3d, point, params) {
-        const { pickContext } = params !== null && params !== void 0 ? params : {};
-        if (!pickContext) {
-            return false;
-        }
-        const pyramid3dAttribute = getTheme(pyramid3d).polygon;
-        pickContext.highPerformanceSave();
-        const data = this.transform(pyramid3d, pyramid3dAttribute, pickContext);
-        const { x, y, z, lastModelMatrix } = data;
-        let pickPoint = point;
-        if (pickContext.camera) {
-            pickPoint = point.clone();
-            const globalMatrix = pyramid3d.parent.globalTransMatrix;
-            pickPoint.x = globalMatrix.a * point.x + globalMatrix.c * point.y + globalMatrix.e;
-            pickPoint.y = globalMatrix.b * point.x + globalMatrix.d * point.y + globalMatrix.f;
-        }
-        this.canvasRenderer.z = z;
-        let picked = false;
-        this.canvasRenderer.drawShape(pyramid3d, pickContext, x, y, {}, null, (context, pyramid3dAttribute, themeAttribute) => {
-            if (picked) {
-                return true;
-            }
-            picked = context.isPointInPath(pickPoint.x, pickPoint.y);
-            return picked;
-        }, (context, pyramid3dAttribute, themeAttribute) => {
-            return false;
-        });
-        this.canvasRenderer.z = 0;
-        if (pickContext.modelMatrix !== lastModelMatrix) {
-            mat4Allocate.free(pickContext.modelMatrix);
-        }
-        pickContext.modelMatrix = lastModelMatrix;
-        pickContext.highPerformanceRestore();
-        return picked;
+        this.themeType = 'polygon';
     }
 };
 DefaultCanvasPyramid3dPicker = __decorate([
@@ -8954,6 +8322,8 @@ function _registerArc3d() {
     }
     _registerArc3d.__loaded = true;
     registerArc3dGraphic();
+    registerDirectionalLight();
+    registerOrthoCamera();
     container.load(arc3dModule);
     container.load(browser ? arc3dCanvasPickModule : arc3dCanvasPickModule);
 }
@@ -9060,6 +8430,8 @@ function _registerPyramid3d() {
     }
     _registerPyramid3d.__loaded = true;
     registerPyramid3dGraphic();
+    registerDirectionalLight();
+    registerOrthoCamera();
     container.load(pyramid3dModule);
     container.load(browser ? pyramid3dCanvasPickModule : pyramid3dCanvasPickModule);
 }