@visactor/vchart 2.1.2-alpha.3 → 2.1.2-alpha.4

package/build/index.js

@@ -24488,6 +24488,199 @@
       }
     }
 
+    function drawArcPath(arc, context, cx, cy, z, outerRadius, innerRadius) {
+      const {
+          startAngle: startAngle,
+          endAngle: endAngle
+        } = arc.getParsedAngle(),
+        deltaAngle = abs$1(endAngle - startAngle),
+        clockwise = endAngle > startAngle;
+      let collapsedToLine = !1;
+      if (outerRadius < innerRadius) {
+        const temp = outerRadius;
+        outerRadius = innerRadius, innerRadius = temp;
+      }
+      if (outerRadius <= epsilon$1) context.moveTo(cx, cy, z);else if (deltaAngle >= pi2 - epsilon$1) context.moveTo(cx + outerRadius * cos$1(startAngle), cy + outerRadius * sin$1(startAngle), z), context.arc(cx, cy, outerRadius, startAngle, endAngle, !clockwise, z), innerRadius > epsilon$1 && (context.moveTo(cx + innerRadius * cos$1(endAngle), cy + innerRadius * sin$1(endAngle), z), context.arc(cx, cy, innerRadius, endAngle, startAngle, clockwise, z));else {
+        const {
+            outerDeltaAngle: outerDeltaAngle,
+            innerDeltaAngle: innerDeltaAngle,
+            outerStartAngle: outerStartAngle,
+            outerEndAngle: outerEndAngle,
+            innerEndAngle: innerEndAngle,
+            innerStartAngle: innerStartAngle
+          } = arc.getParsePadAngle(startAngle, endAngle),
+          xors = outerRadius * cos$1(outerStartAngle),
+          yors = outerRadius * sin$1(outerStartAngle),
+          xire = innerRadius * cos$1(innerEndAngle),
+          yire = innerRadius * sin$1(innerEndAngle);
+        outerDeltaAngle < .001 ? collapsedToLine = !0 : (context.moveTo(cx + xors, cy + yors, z), context.arc(cx, cy, outerRadius, outerStartAngle, outerEndAngle, !clockwise, z)), !(innerRadius > epsilon$1) || innerDeltaAngle < .001 ? (context.lineTo(cx + xire, cy + yire, z), collapsedToLine = !0) : (context.lineTo(cx + xire, cy + yire, z), context.arc(cx, cy, innerRadius, innerEndAngle, innerStartAngle, clockwise, z));
+      }
+      return context.closePath(), collapsedToLine;
+    }
+    function drawInnerOuterArcPath(arc, context, cx, cy, z1, z2, radius, getParsePadAngle) {
+      const {
+          startAngle: startAngle,
+          endAngle: endAngle
+        } = arc.getParsedAngle(),
+        deltaAngle = abs$1(endAngle - startAngle),
+        clockwise = endAngle > startAngle;
+      let collapsedToLine = !1;
+      if (radius <= epsilon$1) context.moveTo(cx, cy, z1);else if (deltaAngle >= pi2 - epsilon$1) context.moveTo(cx + radius * cos$1(startAngle), cy + radius * sin$1(startAngle), z1), context.arc(cx, cy, radius, startAngle, endAngle, !clockwise, z1), context.lineTo(cx + radius * cos$1(endAngle), cy + radius * sin$1(endAngle), z2), context.arc(cx, cy, radius, endAngle, startAngle, clockwise, z2);else {
+        const {
+            innerouterDeltaAngle: innerouterDeltaAngle,
+            innerouterStartAngle: innerouterStartAngle,
+            innerouterEndAngle: innerouterEndAngle
+          } = getParsePadAngle(startAngle, endAngle),
+          xors = radius * cos$1(innerouterStartAngle),
+          yors = radius * sin$1(innerouterStartAngle),
+          xore = radius * cos$1(innerouterEndAngle),
+          yore = radius * sin$1(innerouterEndAngle);
+        innerouterDeltaAngle < .001 ? collapsedToLine = !0 : (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));
+      }
+      return context.closePath(), collapsedToLine;
+    }
+    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$1(arc, null == params ? void 0 : params.theme).arc,
+          {
+            fill = arcAttribute.fill
+          } = arc.attribute,
+          data = this.valid(arc, arcAttribute, fillCb, strokeCb);
+        if (!data) return;
+        const {
+            fVisible: fVisible,
+            sVisible: sVisible,
+            doFill: doFill,
+            doStroke: doStroke
+          } = data,
+          z = null !== (_a = this.z) && void 0 !== _a ? _a : 0,
+          {
+            outerPadding = arcAttribute.outerPadding,
+            innerPadding = arcAttribute.innerPadding,
+            height = 10
+          } = arc.attribute;
+        let {
+          outerRadius = arcAttribute.outerRadius,
+          innerRadius = arcAttribute.innerRadius
+        } = arc.attribute;
+        outerRadius += outerPadding, innerRadius -= innerPadding;
+        const rgbArray = ColorStore.Get(fill, ColorType.Color255),
+          {
+            light: light
+          } = drawContext.stage || {},
+          face = drawContext.hack_pieFace,
+          z_face = {
+            top: z,
+            bottom: z + height
+          },
+          n_face = {
+            top: [0, 1, 0],
+            bottom: [0, -1, 0],
+            outside: [1, 0, -1],
+            inside: [1, 0, -1]
+          };
+        "bottom" === face || "top" === face ? (context.beginPath(), drawArcPath(arc, context, x, y, z_face[face], outerRadius, innerRadius), context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute), context.fillStyle = light ? light.computeColor(n_face[face], rgbArray) : fill, context.fill())), doStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke()))) : "outside" !== face && "inside" !== face || ("inside" === face && (context.save(), context.beginPath(), context.arc(x, y, innerRadius, 0, pi2, !0, z_face.top), context.clip()), context.beginPath(), drawInnerOuterArcPath(arc, context, x, y, z_face.top, z_face.bottom, "outside" === face ? outerRadius : innerRadius, (startAngle, endAngle) => {
+          const {
+            outerDeltaAngle: outerDeltaAngle,
+            innerDeltaAngle: innerDeltaAngle,
+            outerStartAngle: outerStartAngle,
+            outerEndAngle: outerEndAngle,
+            innerEndAngle: innerEndAngle,
+            innerStartAngle: innerStartAngle
+          } = arc.getParsePadAngle(startAngle, endAngle);
+          return "outside" === face ? {
+            innerouterDeltaAngle: outerDeltaAngle,
+            innerouterEndAngle: outerEndAngle,
+            innerouterStartAngle: outerStartAngle
+          } : {
+            innerouterDeltaAngle: innerDeltaAngle,
+            innerouterEndAngle: innerEndAngle,
+            innerouterStartAngle: innerStartAngle
+          };
+        }), context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute), context.fillStyle = light ? light.computeColor(n_face[face], rgbArray) : fill, context.fill())), doStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke())), "inside" === face && context.restore());
+      }
+      draw(arc, renderService, drawContext, params) {
+        const arcAttribute = getTheme$1(arc, null == params ? void 0 : params.theme).arc;
+        this._draw(arc, arcAttribute, !1, drawContext, params);
+      }
+    }
+
+    class Base3dRender extends BaseRender {
+      stroke(x, y, z, face3d, context) {
+        const vertices = face3d.vertices;
+        face3d.edges.forEach(edge => {
+          const p1 = vertices[edge[0]],
+            v1 = {
+              x: x + p1[0],
+              y: y + p1[1],
+              z: z + p1[2]
+            },
+            p2 = vertices[edge[1]],
+            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, graphic3d, graphic3dAttribute, fillCb) {
+        const rgbArray = ColorStore.Get(fillColor, ColorType.Color255),
+          vertices = face3d.vertices,
+          viewdVerticesZ = vertices.map(v => context.view(v[0], v[1], v[2])[2]),
+          sortFace = [];
+        face3d.polygons.forEach((p, i) => {
+          if (faces && !faces[i]) return;
+          sortFace.push({
+            faceIdx: i,
+            polygon: p
+          });
+          const {
+              polygon: polygon
+            } = p,
+            z1 = viewdVerticesZ[polygon[0]],
+            z2 = viewdVerticesZ[polygon[1]],
+            z3 = viewdVerticesZ[polygon[2]],
+            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: polygon,
+              normal: normal
+            } = item.polygon,
+            p1 = vertices[polygon[0]],
+            p2 = vertices[polygon[1]],
+            p3 = vertices[polygon[2]],
+            p4 = vertices[polygon[3]],
+            v1 = {
+              x: x + p1[0],
+              y: y + p1[1],
+              z: z + p1[2]
+            },
+            v2 = {
+              x: x + p2[0],
+              y: y + p2[1],
+              z: z + p2[2]
+            },
+            v3 = {
+              x: x + p3[0],
+              y: y + p3[1],
+              z: z + p3[2]
+            },
+            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(), fillCb ? fillCb(context, graphic3d && graphic3d.attribute, graphic3dAttribute) : (context.fillStyle = light ? light.computeColor(normal, rgbArray) : fillColor, context.fill());
+        });
+      }
+    }
+
     class DefaultCanvasCircleRender extends BaseRender {
       constructor(graphicRenderContributions) {
         super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = CIRCLE_NUMBER_TYPE, this.builtinContributions = [defaultCircleRenderContribution, defaultCircleBackgroundRenderContribution, defaultCircleTextureRenderContribution], this.init(graphicRenderContributions);
@@ -25174,6 +25367,57 @@
       }
     }
 
+    class DefaultCanvasRect3dRender extends Base3dRender {
+      constructor() {
+        super(...arguments), this.type = "rect3d", this.numberType = RECT3D_NUMBER_TYPE;
+      }
+      drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb) {
+        var _a, _b;
+        const rectAttribute = getTheme$1(rect, null == params ? void 0 : params.theme).rect,
+          {
+            fill = rectAttribute.fill,
+            stroke = rectAttribute.stroke,
+            x1: x1,
+            y1: y1,
+            x: originX,
+            y: originY,
+            opacity = rectAttribute.opacity,
+            fillOpacity = rectAttribute.fillOpacity,
+            lineWidth = rectAttribute.lineWidth,
+            strokeOpacity = rectAttribute.strokeOpacity,
+            visible = rectAttribute.visible,
+            drawStrokeWhenZeroWH = null !== (_a = rectAttribute.drawStrokeWhenZeroWH) && void 0 !== _a && _a
+          } = rect.attribute;
+        let {
+          width: width,
+          height: height
+        } = rect.attribute;
+        width = (null != width ? width : x1 - originX) || 0, height = (null != height ? height : y1 - originY) || 0;
+        const z = null !== (_b = this.z) && void 0 !== _b ? _b : 0,
+          fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
+          sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height, drawStrokeWhenZeroWH),
+          doFill = runFill(fill),
+          doStroke = runStroke(stroke, lineWidth);
+        if (!rect.valid || !visible) return;
+        if (!doFill && !doStroke) return;
+        if (!(fVisible || sVisible || fillCb || strokeCb)) return;
+        const {
+            light: light
+          } = drawContext.stage || {},
+          face3d = rect.findFace();
+        if (!1 !== fill) {
+          context.setCommonStyle(rect, rect.attribute, x, y, rectAttribute);
+          let fc = fill;
+          "string" != typeof fc && (fc = "black"), this.fill(x, y, z, face3d, null, fc, context, light, null, null, fillCb);
+        }
+        !1 !== stroke && (context.setStrokeStyle(rect, rect.attribute, x, y, rectAttribute), this.stroke(x, y, z, face3d, context));
+      }
+      draw(rect, renderService, drawContext) {
+        const rectAttribute = getTheme$1(rect).rect;
+        this._draw(rect, rectAttribute, !1, drawContext);
+      }
+    }
+
     class DefaultCanvasSymbolRender extends BaseRender {
       constructor(graphicRenderContributions) {
         super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = SYMBOL_NUMBER_TYPE, this.builtinContributions = [defaultSymbolRenderContribution, defaultSymbolBackgroundRenderContribution, defaultSymbolTextureRenderContribution, defaultSymbolClipRangeStrokeRenderContribution], this.init(graphicRenderContributions);
@@ -25536,18 +25780,49 @@
       }
     }
 
-    const repeatStr = ["", "repeat-x", "repeat-y", "repeat"];
-    function resolveImageRepeatMode(repeatX, repeatY) {
-      let repeat = 0;
-      return "repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), repeat ? repeatStr[repeat] : "no-repeat";
-    }
-    function resolveImageMode({
-      repeatX = "no-repeat",
-      repeatY = "no-repeat",
-      imageMode: imageMode
-    }) {
-      const repeatMode = resolveImageRepeatMode(repeatX, repeatY);
-      return {
+    class DefaultCanvasPyramid3dRender extends Base3dRender {
+      constructor() {
+        super(...arguments), this.type = "pyramid3d", this.numberType = PYRAMID3D_NUMBER_TYPE;
+      }
+      drawShape(pyramid3d, context, x, y, drawContext, params, fillCb, strokeCb) {
+        var _a;
+        const pyramidAttribute = getTheme$1(pyramid3d, null == params ? void 0 : params.theme).polygon,
+          {
+            fill = pyramidAttribute.fill,
+            stroke = pyramidAttribute.stroke,
+            face = [!0, !0, !0, !0, !0, !0]
+          } = pyramid3d.attribute,
+          z = null !== (_a = this.z) && void 0 !== _a ? _a : 0;
+        if (!this.valid(pyramid3d, pyramidAttribute, fillCb, strokeCb)) return;
+        const {
+            light: light
+          } = drawContext.stage || {},
+          face3d = pyramid3d.findFace();
+        if (!1 !== fill) {
+          context.setCommonStyle(pyramid3d, pyramid3d.attribute, x, y, pyramidAttribute);
+          let fc = fill;
+          "string" != typeof fc && (fc = "black"), this.fill(x, y, z, face3d, face, fc, context, light, pyramid3d, pyramidAttribute, fillCb);
+        }
+        !1 !== stroke && (context.setStrokeStyle(pyramid3d, pyramid3d.attribute, x, y, pyramidAttribute), this.stroke(x, y, z, face3d, context));
+      }
+      draw(pyramid3d, renderService, drawContext) {
+        const pyramid3dAttribute = getTheme$1(pyramid3d).polygon;
+        this._draw(pyramid3d, pyramid3dAttribute, !1, drawContext);
+      }
+    }
+
+    const repeatStr = ["", "repeat-x", "repeat-y", "repeat"];
+    function resolveImageRepeatMode(repeatX, repeatY) {
+      let repeat = 0;
+      return "repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), repeat ? repeatStr[repeat] : "no-repeat";
+    }
+    function resolveImageMode({
+      repeatX = "no-repeat",
+      repeatY = "no-repeat",
+      imageMode: imageMode
+    }) {
+      const repeatMode = resolveImageRepeatMode(repeatX, repeatY);
+      return {
         repeatMode: repeatMode,
         sizingMode: "no-repeat" === repeatMode && null != imageMode ? imageMode : "fill"
       };
@@ -26971,373 +27246,40 @@
         container: container
       }) => new DefaultCanvasTextRender(createContributionProvider$1(TextRenderContribution, container))).inSingletonScope(), bind(GraphicRender).toService(TextRender), bind(TextRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, TextRenderContribution));
     }
-    const textModule = bindTextRenderModule;
-
-    const loadedPathModuleContexts = new WeakSet();
-    function bindPathRenderModule({
-      bind: bind
-    }) {
-      isBindingContextLoaded(loadedPathModuleContexts, bind) || (bind(DefaultCanvasPathRender).toDynamicValue(({
-        container: container
-      }) => new DefaultCanvasPathRender(createContributionProvider$1(PathRenderContribution, container))).inSingletonScope(), bind(PathRender).toService(DefaultCanvasPathRender), bind(GraphicRender).toService(PathRender), bind(PathRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, PathRenderContribution));
-    }
-    const pathModule = bindPathRenderModule;
-
-    const loadedPolygonModuleContexts = new WeakSet();
-    function bindPolygonRenderModule({
-      bind: bind
-    }) {
-      isBindingContextLoaded(loadedPolygonModuleContexts, bind) || (bind(PolygonRender).toDynamicValue(({
-        container: container
-      }) => new DefaultCanvasPolygonRender(createContributionProvider$1(PolygonRenderContribution, container))).inSingletonScope(), bind(GraphicRender).toService(PolygonRender), bind(PolygonRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, PolygonRenderContribution));
-    }
-    const polygonModule = bindPolygonRenderModule;
-
-    class DefaultCanvasStarRender extends BaseRender {
-      constructor(graphicRenderContributions) {
-        super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = STAR_NUMBER_TYPE, this.builtinContributions = [defaultStarBackgroundRenderContribution, defaultStarTextureRenderContribution], this.init(graphicRenderContributions);
-      }
-      drawShape(star, context, x, y, drawContext, params, fillCb, strokeCb) {
-        const starAttribute = getTheme$1(star, null == params ? void 0 : params.theme).star,
-          {
-            x: originX = starAttribute.x,
-            y: originY = starAttribute.y,
-            fillStrokeOrder = starAttribute.fillStrokeOrder
-          } = star.attribute,
-          data = this.valid(star, starAttribute, fillCb, strokeCb);
-        if (!data) return;
-        const {
-            fVisible: fVisible,
-            sVisible: sVisible,
-            doFill: doFill,
-            doStroke: doStroke
-          } = data,
-          points = star.getCachedPoints();
-        context.beginPath(), points && points.length && points.forEach((point, index) => {
-          0 === index ? context.moveTo(x + point.x, y + point.y) : context.lineTo(x + point.x, y + point.y);
-        }), context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(star, star.attribute, starAttribute), this.beforeRenderStep(star, context, x, y, doFill, doStroke, fVisible, sVisible, starAttribute, drawContext, fillCb, strokeCb);
-        const _runFill = () => {
-            doFill && (fillCb ? fillCb(context, star.attribute, starAttribute) : fVisible && (context.setCommonStyle(star, star.attribute, originX - x, originY - y, starAttribute), context.fill()));
-          },
-          _runStroke = () => {
-            doStroke && (strokeCb ? strokeCb(context, star.attribute, starAttribute) : sVisible && (context.setStrokeStyle(star, star.attribute, originX - x, originY - y, starAttribute), context.stroke()));
-          };
-        fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(star, context, x, y, doFill, doStroke, fVisible, sVisible, starAttribute, drawContext, fillCb, strokeCb);
-      }
-      draw(star, renderService, drawContext, params) {
-        const starAttribute = getTheme$1(star, null == params ? void 0 : params.theme).star;
-        this._draw(star, starAttribute, !1, drawContext, params);
-      }
-    }
-
-    const loadedStarModuleContexts = new WeakSet();
-    function bindStarRenderModule({
-      bind: bind
-    }) {
-      isBindingContextLoaded(loadedStarModuleContexts, bind) || (bind(DefaultCanvasStarRender).toDynamicValue(({
-        container: container
-      }) => new DefaultCanvasStarRender(createContributionProvider$1(StarRenderContribution, container))).inSingletonScope(), bind(StarRender).toService(DefaultCanvasStarRender), bind(GraphicRender).toService(StarRender), bindContributionProvider(bind, StarRenderContribution));
-    }
-    const starModule = bindStarRenderModule;
-
-    class DefaultCanvasGlyphRender {
-      constructor() {
-        this.numberType = GLYPH_NUMBER_TYPE;
-      }
-      reInit() {}
-      drawShape(glyph, context, x, y, drawContext, params, fillCb, strokeCb) {
-        drawContext.drawContribution && glyph.getSubGraphic().forEach(item => {
-          const renderer = drawContext.drawContribution.getRenderContribution(item);
-          renderer && renderer.drawShape && renderer.drawShape(item, context, x, y, drawContext, params, fillCb, strokeCb);
-        });
-      }
-      draw(glyph, renderService, drawContext, params) {
-        const {
-          context: context
-        } = drawContext;
-        if (!context) return;
-        if (context.highPerformanceSave(), !drawContext.drawContribution) return;
-        const glyphTheme = getTheme$1(glyph),
-          subGraphic = glyph.getSubGraphic();
-        subGraphic.length && subGraphic.forEach(g => {
-          drawContext.drawContribution.renderItem(g, drawContext, {
-            theme: glyphTheme
-          });
-        }), context.highPerformanceRestore();
-      }
-    }
-
-    const loadedGlyphModuleContexts = new WeakSet();
-    function bindGlyphRenderModule({
-      bind: bind
-    }) {
-      isBindingContextLoaded(loadedGlyphModuleContexts, bind) || (bind(DefaultCanvasGlyphRender).toDynamicValue(() => new DefaultCanvasGlyphRender()).inSingletonScope(), bind(GlyphRender).toService(DefaultCanvasGlyphRender), bind(GraphicRender).toService(GlyphRender));
-    }
-    const glyphModule = bindGlyphRenderModule;
-
-    class DefaultCanvasRichTextRender extends BaseRender {
-      constructor() {
-        super(), this.numberType = RICHTEXT_NUMBER_TYPE, this.builtinContributions = [defaultTextBackgroundRenderContribution], this.init();
-      }
-      drawShape(richtext, context, x, y, drawContext) {
-        const richtextAttribute = getTheme$1(richtext).richtext,
-          {
-            strokeOpacity = richtextAttribute.strokeOpacity,
-            opacity = richtextAttribute.opacity,
-            fillOpacity = richtextAttribute.fillOpacity,
-            visible = richtextAttribute.visible
-          } = richtext.attribute;
-        if (!richtext.valid || !visible) return;
-        const fVisible = fillVisible(opacity, fillOpacity, !0),
-          sVisible = fillVisible(opacity, strokeOpacity, !0);
-        if (!fVisible) return;
-        context.setShadowBlendStyle && context.setShadowBlendStyle(richtext, richtext.attribute, richtextAttribute), context.translate(x, y), this.beforeRenderStep(richtext, context, x, y, fVisible, sVisible, fVisible, sVisible, richtextAttribute, drawContext);
-        richtext.getFrameCache().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$1(icon).richtextIcon,
-          {
-            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: margin
-          } = icon.attribute,
-          {
-            backgroundWidth = width,
-            backgroundHeight = height
-          } = icon.attribute;
-        if (margin && (x += icon._marginArray[3], y += icon._marginArray[0]), icon._hovered) {
-          const expandX = (backgroundWidth - width) / 2,
-            expandY = (backgroundHeight - height) / 2;
-          0 === backgroundRadius ? (context.beginPath(), context.rect(x - expandX, y - expandY, backgroundWidth, backgroundHeight)) : (context.beginPath(), createRectPath(context, x - expandX, y - expandY, backgroundWidth, backgroundHeight, backgroundRadius, !0)), backgroundFill && (context.globalAlpha = backgroundFillOpacity, context.fillStyle = backgroundFill, context.fill()), backgroundStroke && (context.globalAlpha = backgroundStrokeOpacity, context.strokeStyle = backgroundStroke, context.stroke());
-        }
-        const res = url && (null === (_a = null == icon ? void 0 : icon.resources) || void 0 === _a ? void 0 : _a.get(url));
-        res && "success" === res.state && (context.globalAlpha = opacity, context.drawImage(res.data, x, y, width, height));
-      }
-      draw(richtext, renderService, drawContext) {
-        const richtextAttribute = getTheme$1(richtext).richtext;
-        this._draw(richtext, richtextAttribute, !1, drawContext);
-      }
-    }
-
-    const loadedRichtextModuleContexts = new WeakSet();
-    function bindRichtextRenderModule({
-      bind: bind
-    }) {
-      isBindingContextLoaded(loadedRichtextModuleContexts, bind) || (bind(DefaultCanvasRichTextRender).toDynamicValue(() => new DefaultCanvasRichTextRender()).inSingletonScope(), bind(RichTextRender).toService(DefaultCanvasRichTextRender), bind(GraphicRender).toService(RichTextRender));
-    }
-    const richtextModule = bindRichtextRenderModule;
-
-    const loadedImageModuleContexts = new WeakSet();
-    function bindImageRenderModule({
-      bind: bind
-    }) {
-      isBindingContextLoaded(loadedImageModuleContexts, bind) || (bind(ImageRender).toDynamicValue(({
-        container: container
-      }) => new DefaultCanvasImageRender(createContributionProvider$1(ImageRenderContribution, container))).inSingletonScope(), bind(GraphicRender).toService(ImageRender), bind(ImageRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, ImageRenderContribution));
-    }
-    const imageModule = bindImageRenderModule;
-
-    class Base3dRender extends BaseRender {
-      stroke(x, y, z, face3d, context) {
-        const vertices = face3d.vertices;
-        face3d.edges.forEach(edge => {
-          const p1 = vertices[edge[0]],
-            v1 = {
-              x: x + p1[0],
-              y: y + p1[1],
-              z: z + p1[2]
-            },
-            p2 = vertices[edge[1]],
-            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, graphic3d, graphic3dAttribute, fillCb) {
-        const rgbArray = ColorStore.Get(fillColor, ColorType.Color255),
-          vertices = face3d.vertices,
-          viewdVerticesZ = vertices.map(v => context.view(v[0], v[1], v[2])[2]),
-          sortFace = [];
-        face3d.polygons.forEach((p, i) => {
-          if (faces && !faces[i]) return;
-          sortFace.push({
-            faceIdx: i,
-            polygon: p
-          });
-          const {
-              polygon: polygon
-            } = p,
-            z1 = viewdVerticesZ[polygon[0]],
-            z2 = viewdVerticesZ[polygon[1]],
-            z3 = viewdVerticesZ[polygon[2]],
-            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: polygon,
-              normal: normal
-            } = item.polygon,
-            p1 = vertices[polygon[0]],
-            p2 = vertices[polygon[1]],
-            p3 = vertices[polygon[2]],
-            p4 = vertices[polygon[3]],
-            v1 = {
-              x: x + p1[0],
-              y: y + p1[1],
-              z: z + p1[2]
-            },
-            v2 = {
-              x: x + p2[0],
-              y: y + p2[1],
-              z: z + p2[2]
-            },
-            v3 = {
-              x: x + p3[0],
-              y: y + p3[1],
-              z: z + p3[2]
-            },
-            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(), fillCb ? fillCb(context, graphic3d && graphic3d.attribute, graphic3dAttribute) : (context.fillStyle = light ? light.computeColor(normal, rgbArray) : fillColor, context.fill());
-        });
-      }
-    }
-
-    class DefaultCanvasRect3dRender extends Base3dRender {
-      constructor() {
-        super(...arguments), this.type = "rect3d", this.numberType = RECT3D_NUMBER_TYPE;
-      }
-      drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb) {
-        var _a, _b;
-        const rectAttribute = getTheme$1(rect, null == params ? void 0 : params.theme).rect,
-          {
-            fill = rectAttribute.fill,
-            stroke = rectAttribute.stroke,
-            x1: x1,
-            y1: y1,
-            x: originX,
-            y: originY,
-            opacity = rectAttribute.opacity,
-            fillOpacity = rectAttribute.fillOpacity,
-            lineWidth = rectAttribute.lineWidth,
-            strokeOpacity = rectAttribute.strokeOpacity,
-            visible = rectAttribute.visible,
-            drawStrokeWhenZeroWH = null !== (_a = rectAttribute.drawStrokeWhenZeroWH) && void 0 !== _a && _a
-          } = rect.attribute;
-        let {
-          width: width,
-          height: height
-        } = rect.attribute;
-        width = (null != width ? width : x1 - originX) || 0, height = (null != height ? height : y1 - originY) || 0;
-        const z = null !== (_b = this.z) && void 0 !== _b ? _b : 0,
-          fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
-          sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height, drawStrokeWhenZeroWH),
-          doFill = runFill(fill),
-          doStroke = runStroke(stroke, lineWidth);
-        if (!rect.valid || !visible) return;
-        if (!doFill && !doStroke) return;
-        if (!(fVisible || sVisible || fillCb || strokeCb)) return;
-        const {
-            light: light
-          } = drawContext.stage || {},
-          face3d = rect.findFace();
-        if (!1 !== fill) {
-          context.setCommonStyle(rect, rect.attribute, x, y, rectAttribute);
-          let fc = fill;
-          "string" != typeof fc && (fc = "black"), this.fill(x, y, z, face3d, null, fc, context, light, null, null, fillCb);
-        }
-        !1 !== stroke && (context.setStrokeStyle(rect, rect.attribute, x, y, rectAttribute), this.stroke(x, y, z, face3d, context));
-      }
-      draw(rect, renderService, drawContext) {
-        const rectAttribute = getTheme$1(rect).rect;
-        this._draw(rect, rectAttribute, !1, drawContext);
-      }
-    }
-
-    const loadedRect3dModuleContexts = new WeakSet();
-    function bindRect3dRenderModule({
-      bind: bind
-    }) {
-      isBindingContextLoaded(loadedRect3dModuleContexts, bind) || (bind(DefaultCanvasRect3dRender).toDynamicValue(() => new DefaultCanvasRect3dRender()).inSingletonScope(), bind(Rect3DRender).toService(DefaultCanvasRect3dRender), bind(GraphicRender).toService(Rect3DRender));
-    }
-    const rect3dModule = bindRect3dRenderModule;
-
-    function drawArcPath(arc, context, cx, cy, z, outerRadius, innerRadius) {
-      const {
-          startAngle: startAngle,
-          endAngle: endAngle
-        } = arc.getParsedAngle(),
-        deltaAngle = abs$1(endAngle - startAngle),
-        clockwise = endAngle > startAngle;
-      let collapsedToLine = !1;
-      if (outerRadius < innerRadius) {
-        const temp = outerRadius;
-        outerRadius = innerRadius, innerRadius = temp;
-      }
-      if (outerRadius <= epsilon$1) context.moveTo(cx, cy, z);else if (deltaAngle >= pi2 - epsilon$1) context.moveTo(cx + outerRadius * cos$1(startAngle), cy + outerRadius * sin$1(startAngle), z), context.arc(cx, cy, outerRadius, startAngle, endAngle, !clockwise, z), innerRadius > epsilon$1 && (context.moveTo(cx + innerRadius * cos$1(endAngle), cy + innerRadius * sin$1(endAngle), z), context.arc(cx, cy, innerRadius, endAngle, startAngle, clockwise, z));else {
-        const {
-            outerDeltaAngle: outerDeltaAngle,
-            innerDeltaAngle: innerDeltaAngle,
-            outerStartAngle: outerStartAngle,
-            outerEndAngle: outerEndAngle,
-            innerEndAngle: innerEndAngle,
-            innerStartAngle: innerStartAngle
-          } = arc.getParsePadAngle(startAngle, endAngle),
-          xors = outerRadius * cos$1(outerStartAngle),
-          yors = outerRadius * sin$1(outerStartAngle),
-          xire = innerRadius * cos$1(innerEndAngle),
-          yire = innerRadius * sin$1(innerEndAngle);
-        outerDeltaAngle < .001 ? collapsedToLine = !0 : (context.moveTo(cx + xors, cy + yors, z), context.arc(cx, cy, outerRadius, outerStartAngle, outerEndAngle, !clockwise, z)), !(innerRadius > epsilon$1) || innerDeltaAngle < .001 ? (context.lineTo(cx + xire, cy + yire, z), collapsedToLine = !0) : (context.lineTo(cx + xire, cy + yire, z), context.arc(cx, cy, innerRadius, innerEndAngle, innerStartAngle, clockwise, z));
-      }
-      return context.closePath(), collapsedToLine;
-    }
-    function drawInnerOuterArcPath(arc, context, cx, cy, z1, z2, radius, getParsePadAngle) {
-      const {
-          startAngle: startAngle,
-          endAngle: endAngle
-        } = arc.getParsedAngle(),
-        deltaAngle = abs$1(endAngle - startAngle),
-        clockwise = endAngle > startAngle;
-      let collapsedToLine = !1;
-      if (radius <= epsilon$1) context.moveTo(cx, cy, z1);else if (deltaAngle >= pi2 - epsilon$1) context.moveTo(cx + radius * cos$1(startAngle), cy + radius * sin$1(startAngle), z1), context.arc(cx, cy, radius, startAngle, endAngle, !clockwise, z1), context.lineTo(cx + radius * cos$1(endAngle), cy + radius * sin$1(endAngle), z2), context.arc(cx, cy, radius, endAngle, startAngle, clockwise, z2);else {
-        const {
-            innerouterDeltaAngle: innerouterDeltaAngle,
-            innerouterStartAngle: innerouterStartAngle,
-            innerouterEndAngle: innerouterEndAngle
-          } = getParsePadAngle(startAngle, endAngle),
-          xors = radius * cos$1(innerouterStartAngle),
-          yors = radius * sin$1(innerouterStartAngle),
-          xore = radius * cos$1(innerouterEndAngle),
-          yore = radius * sin$1(innerouterEndAngle);
-        innerouterDeltaAngle < .001 ? collapsedToLine = !0 : (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));
-      }
-      return context.closePath(), collapsedToLine;
-    }
-    class DefaultCanvasArc3DRender extends BaseRender {
-      constructor() {
-        super(...arguments), this.numberType = ARC3D_NUMBER_TYPE;
+    const textModule = bindTextRenderModule;
+
+    const loadedPathModuleContexts = new WeakSet();
+    function bindPathRenderModule({
+      bind: bind
+    }) {
+      isBindingContextLoaded(loadedPathModuleContexts, bind) || (bind(DefaultCanvasPathRender).toDynamicValue(({
+        container: container
+      }) => new DefaultCanvasPathRender(createContributionProvider$1(PathRenderContribution, container))).inSingletonScope(), bind(PathRender).toService(DefaultCanvasPathRender), bind(GraphicRender).toService(PathRender), bind(PathRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, PathRenderContribution));
+    }
+    const pathModule = bindPathRenderModule;
+
+    const loadedPolygonModuleContexts = new WeakSet();
+    function bindPolygonRenderModule({
+      bind: bind
+    }) {
+      isBindingContextLoaded(loadedPolygonModuleContexts, bind) || (bind(PolygonRender).toDynamicValue(({
+        container: container
+      }) => new DefaultCanvasPolygonRender(createContributionProvider$1(PolygonRenderContribution, container))).inSingletonScope(), bind(GraphicRender).toService(PolygonRender), bind(PolygonRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, PolygonRenderContribution));
+    }
+    const polygonModule = bindPolygonRenderModule;
+
+    class DefaultCanvasStarRender extends BaseRender {
+      constructor(graphicRenderContributions) {
+        super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = STAR_NUMBER_TYPE, this.builtinContributions = [defaultStarBackgroundRenderContribution, defaultStarTextureRenderContribution], this.init(graphicRenderContributions);
       }
-      drawShape(arc, context, x, y, drawContext, params, fillCb, strokeCb) {
-        var _a;
-        const arcAttribute = getTheme$1(arc, null == params ? void 0 : params.theme).arc,
+      drawShape(star, context, x, y, drawContext, params, fillCb, strokeCb) {
+        const starAttribute = getTheme$1(star, null == params ? void 0 : params.theme).star,
           {
-            fill = arcAttribute.fill
-          } = arc.attribute,
-          data = this.valid(arc, arcAttribute, fillCb, strokeCb);
+            x: originX = starAttribute.x,
+            y: originY = starAttribute.y,
+            fillStrokeOrder = starAttribute.fillStrokeOrder
+          } = star.attribute,
+          data = this.valid(star, starAttribute, fillCb, strokeCb);
         if (!data) return;
         const {
             fVisible: fVisible,
@@ -27345,97 +27287,155 @@
             doFill: doFill,
             doStroke: doStroke
           } = data,
-          z = null !== (_a = this.z) && void 0 !== _a ? _a : 0,
-          {
-            outerPadding = arcAttribute.outerPadding,
-            innerPadding = arcAttribute.innerPadding,
-            height = 10
-          } = arc.attribute;
-        let {
-          outerRadius = arcAttribute.outerRadius,
-          innerRadius = arcAttribute.innerRadius
-        } = arc.attribute;
-        outerRadius += outerPadding, innerRadius -= innerPadding;
-        const rgbArray = ColorStore.Get(fill, ColorType.Color255),
-          {
-            light: light
-          } = drawContext.stage || {},
-          face = drawContext.hack_pieFace,
-          z_face = {
-            top: z,
-            bottom: z + height
+          points = star.getCachedPoints();
+        context.beginPath(), points && points.length && points.forEach((point, index) => {
+          0 === index ? context.moveTo(x + point.x, y + point.y) : context.lineTo(x + point.x, y + point.y);
+        }), context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(star, star.attribute, starAttribute), this.beforeRenderStep(star, context, x, y, doFill, doStroke, fVisible, sVisible, starAttribute, drawContext, fillCb, strokeCb);
+        const _runFill = () => {
+            doFill && (fillCb ? fillCb(context, star.attribute, starAttribute) : fVisible && (context.setCommonStyle(star, star.attribute, originX - x, originY - y, starAttribute), context.fill()));
           },
-          n_face = {
-            top: [0, 1, 0],
-            bottom: [0, -1, 0],
-            outside: [1, 0, -1],
-            inside: [1, 0, -1]
-          };
-        "bottom" === face || "top" === face ? (context.beginPath(), drawArcPath(arc, context, x, y, z_face[face], outerRadius, innerRadius), context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute), context.fillStyle = light ? light.computeColor(n_face[face], rgbArray) : fill, context.fill())), doStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke()))) : "outside" !== face && "inside" !== face || ("inside" === face && (context.save(), context.beginPath(), context.arc(x, y, innerRadius, 0, pi2, !0, z_face.top), context.clip()), context.beginPath(), drawInnerOuterArcPath(arc, context, x, y, z_face.top, z_face.bottom, "outside" === face ? outerRadius : innerRadius, (startAngle, endAngle) => {
-          const {
-            outerDeltaAngle: outerDeltaAngle,
-            innerDeltaAngle: innerDeltaAngle,
-            outerStartAngle: outerStartAngle,
-            outerEndAngle: outerEndAngle,
-            innerEndAngle: innerEndAngle,
-            innerStartAngle: innerStartAngle
-          } = arc.getParsePadAngle(startAngle, endAngle);
-          return "outside" === face ? {
-            innerouterDeltaAngle: outerDeltaAngle,
-            innerouterEndAngle: outerEndAngle,
-            innerouterStartAngle: outerStartAngle
-          } : {
-            innerouterDeltaAngle: innerDeltaAngle,
-            innerouterEndAngle: innerEndAngle,
-            innerouterStartAngle: innerStartAngle
+          _runStroke = () => {
+            doStroke && (strokeCb ? strokeCb(context, star.attribute, starAttribute) : sVisible && (context.setStrokeStyle(star, star.attribute, originX - x, originY - y, starAttribute), context.stroke()));
           };
-        }), context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute), context.fillStyle = light ? light.computeColor(n_face[face], rgbArray) : fill, context.fill())), doStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke())), "inside" === face && context.restore());
+        fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this.afterRenderStep(star, context, x, y, doFill, doStroke, fVisible, sVisible, starAttribute, drawContext, fillCb, strokeCb);
       }
-      draw(arc, renderService, drawContext, params) {
-        const arcAttribute = getTheme$1(arc, null == params ? void 0 : params.theme).arc;
-        this._draw(arc, arcAttribute, !1, drawContext, params);
+      draw(star, renderService, drawContext, params) {
+        const starAttribute = getTheme$1(star, null == params ? void 0 : params.theme).star;
+        this._draw(star, starAttribute, !1, drawContext, params);
       }
     }
 
-    const loadedArc3dModuleContexts = new WeakSet();
-    function bindArc3dRenderModule({
+    const loadedStarModuleContexts = new WeakSet();
+    function bindStarRenderModule({
       bind: bind
     }) {
-      isBindingContextLoaded(loadedArc3dModuleContexts, bind) || (bind(DefaultCanvasArc3DRender).toDynamicValue(() => new DefaultCanvasArc3DRender()).inSingletonScope(), bind(Arc3dRender).toService(DefaultCanvasArc3DRender), bind(GraphicRender).toService(Arc3dRender));
+      isBindingContextLoaded(loadedStarModuleContexts, bind) || (bind(DefaultCanvasStarRender).toDynamicValue(({
+        container: container
+      }) => new DefaultCanvasStarRender(createContributionProvider$1(StarRenderContribution, container))).inSingletonScope(), bind(StarRender).toService(DefaultCanvasStarRender), bind(GraphicRender).toService(StarRender), bindContributionProvider(bind, StarRenderContribution));
     }
-    const arc3dModule = bindArc3dRenderModule;
+    const starModule = bindStarRenderModule;
 
-    class DefaultCanvasPyramid3dRender extends Base3dRender {
+    class DefaultCanvasGlyphRender {
       constructor() {
-        super(...arguments), this.type = "pyramid3d", this.numberType = PYRAMID3D_NUMBER_TYPE;
+        this.numberType = GLYPH_NUMBER_TYPE;
       }
-      drawShape(pyramid3d, context, x, y, drawContext, params, fillCb, strokeCb) {
+      reInit() {}
+      drawShape(glyph, context, x, y, drawContext, params, fillCb, strokeCb) {
+        drawContext.drawContribution && glyph.getSubGraphic().forEach(item => {
+          const renderer = drawContext.drawContribution.getRenderContribution(item);
+          renderer && renderer.drawShape && renderer.drawShape(item, context, x, y, drawContext, params, fillCb, strokeCb);
+        });
+      }
+      draw(glyph, renderService, drawContext, params) {
+        const {
+          context: context
+        } = drawContext;
+        if (!context) return;
+        if (context.highPerformanceSave(), !drawContext.drawContribution) return;
+        const glyphTheme = getTheme$1(glyph),
+          subGraphic = glyph.getSubGraphic();
+        subGraphic.length && subGraphic.forEach(g => {
+          drawContext.drawContribution.renderItem(g, drawContext, {
+            theme: glyphTheme
+          });
+        }), context.highPerformanceRestore();
+      }
+    }
+
+    const loadedGlyphModuleContexts = new WeakSet();
+    function bindGlyphRenderModule({
+      bind: bind
+    }) {
+      isBindingContextLoaded(loadedGlyphModuleContexts, bind) || (bind(DefaultCanvasGlyphRender).toDynamicValue(() => new DefaultCanvasGlyphRender()).inSingletonScope(), bind(GlyphRender).toService(DefaultCanvasGlyphRender), bind(GraphicRender).toService(GlyphRender));
+    }
+    const glyphModule = bindGlyphRenderModule;
+
+    class DefaultCanvasRichTextRender extends BaseRender {
+      constructor() {
+        super(), this.numberType = RICHTEXT_NUMBER_TYPE, this.builtinContributions = [defaultTextBackgroundRenderContribution], this.init();
+      }
+      drawShape(richtext, context, x, y, drawContext) {
+        const richtextAttribute = getTheme$1(richtext).richtext,
+          {
+            strokeOpacity = richtextAttribute.strokeOpacity,
+            opacity = richtextAttribute.opacity,
+            fillOpacity = richtextAttribute.fillOpacity,
+            visible = richtextAttribute.visible
+          } = richtext.attribute;
+        if (!richtext.valid || !visible) return;
+        const fVisible = fillVisible(opacity, fillOpacity, !0),
+          sVisible = fillVisible(opacity, strokeOpacity, !0);
+        if (!fVisible) return;
+        context.setShadowBlendStyle && context.setShadowBlendStyle(richtext, richtext.attribute, richtextAttribute), context.translate(x, y), this.beforeRenderStep(richtext, context, x, y, fVisible, sVisible, fVisible, sVisible, richtextAttribute, drawContext);
+        richtext.getFrameCache().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 pyramidAttribute = getTheme$1(pyramid3d, null == params ? void 0 : params.theme).polygon,
+        const richtextIconAttribute = getTheme$1(icon).richtextIcon,
           {
-            fill = pyramidAttribute.fill,
-            stroke = pyramidAttribute.stroke,
-            face = [!0, !0, !0, !0, !0, !0]
-          } = pyramid3d.attribute,
-          z = null !== (_a = this.z) && void 0 !== _a ? _a : 0;
-        if (!this.valid(pyramid3d, pyramidAttribute, fillCb, strokeCb)) return;
-        const {
-            light: light
-          } = drawContext.stage || {},
-          face3d = pyramid3d.findFace();
-        if (!1 !== fill) {
-          context.setCommonStyle(pyramid3d, pyramid3d.attribute, x, y, pyramidAttribute);
-          let fc = fill;
-          "string" != typeof fc && (fc = "black"), this.fill(x, y, z, face3d, face, fc, context, light, pyramid3d, pyramidAttribute, fillCb);
+            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: margin
+          } = icon.attribute,
+          {
+            backgroundWidth = width,
+            backgroundHeight = height
+          } = icon.attribute;
+        if (margin && (x += icon._marginArray[3], y += icon._marginArray[0]), icon._hovered) {
+          const expandX = (backgroundWidth - width) / 2,
+            expandY = (backgroundHeight - height) / 2;
+          0 === backgroundRadius ? (context.beginPath(), context.rect(x - expandX, y - expandY, backgroundWidth, backgroundHeight)) : (context.beginPath(), createRectPath(context, x - expandX, y - expandY, backgroundWidth, backgroundHeight, backgroundRadius, !0)), backgroundFill && (context.globalAlpha = backgroundFillOpacity, context.fillStyle = backgroundFill, context.fill()), backgroundStroke && (context.globalAlpha = backgroundStrokeOpacity, context.strokeStyle = backgroundStroke, context.stroke());
         }
-        !1 !== stroke && (context.setStrokeStyle(pyramid3d, pyramid3d.attribute, x, y, pyramidAttribute), this.stroke(x, y, z, face3d, context));
+        const res = url && (null === (_a = null == icon ? void 0 : icon.resources) || void 0 === _a ? void 0 : _a.get(url));
+        res && "success" === res.state && (context.globalAlpha = opacity, context.drawImage(res.data, x, y, width, height));
       }
-      draw(pyramid3d, renderService, drawContext) {
-        const pyramid3dAttribute = getTheme$1(pyramid3d).polygon;
-        this._draw(pyramid3d, pyramid3dAttribute, !1, drawContext);
+      draw(richtext, renderService, drawContext) {
+        const richtextAttribute = getTheme$1(richtext).richtext;
+        this._draw(richtext, richtextAttribute, !1, drawContext);
       }
     }
 
+    const loadedRichtextModuleContexts = new WeakSet();
+    function bindRichtextRenderModule({
+      bind: bind
+    }) {
+      isBindingContextLoaded(loadedRichtextModuleContexts, bind) || (bind(DefaultCanvasRichTextRender).toDynamicValue(() => new DefaultCanvasRichTextRender()).inSingletonScope(), bind(RichTextRender).toService(DefaultCanvasRichTextRender), bind(GraphicRender).toService(RichTextRender));
+    }
+    const richtextModule = bindRichtextRenderModule;
+
+    const loadedImageModuleContexts = new WeakSet();
+    function bindImageRenderModule({
+      bind: bind
+    }) {
+      isBindingContextLoaded(loadedImageModuleContexts, bind) || (bind(ImageRender).toDynamicValue(({
+        container: container
+      }) => new DefaultCanvasImageRender(createContributionProvider$1(ImageRenderContribution, container))).inSingletonScope(), bind(GraphicRender).toService(ImageRender), bind(ImageRenderContribution).toService(DefaultBaseInteractiveRenderContribution), bindContributionProvider(bind, ImageRenderContribution));
+    }
+    const imageModule = bindImageRenderModule;
+
+    const loadedRect3dModuleContexts = new WeakSet();
+    function bindRect3dRenderModule({
+      bind: bind
+    }) {
+      isBindingContextLoaded(loadedRect3dModuleContexts, bind) || (bind(DefaultCanvasRect3dRender).toDynamicValue(() => new DefaultCanvasRect3dRender()).inSingletonScope(), bind(Rect3DRender).toService(DefaultCanvasRect3dRender), bind(GraphicRender).toService(Rect3DRender));
+    }
+    const rect3dModule = bindRect3dRenderModule;
+
+    const loadedArc3dModuleContexts = new WeakSet();
+    function bindArc3dRenderModule({
+      bind: bind
+    }) {
+      isBindingContextLoaded(loadedArc3dModuleContexts, bind) || (bind(DefaultCanvasArc3DRender).toDynamicValue(() => new DefaultCanvasArc3DRender()).inSingletonScope(), bind(Arc3dRender).toService(DefaultCanvasArc3DRender), bind(GraphicRender).toService(Arc3dRender));
+    }
+    const arc3dModule = bindArc3dRenderModule;
+
     const loadedPyramid3dModuleContexts = new WeakSet();
     function bindPyramid3dRenderModule({
       bind: bind
@@ -41634,20 +41634,6 @@
         _hasDiffAttrs(g) {
             return !!g.context.diffAttrs && Object.keys(g.context.diffAttrs).length > 0;
         }
-        _commitPreventedAnimationStaticAttrs(g, attrs) {
-            var _a, _b;
-            if (!attrs || !Object.keys(attrs).length) {
-                return;
-            }
-            const graphic = g;
-            (_a = graphic.setFinalAttributes) === null || _a === void 0 ? void 0 : _a.call(graphic, attrs);
-            if (graphic._commitAnimationStaticAttributes) {
-                graphic._commitAnimationStaticAttributes(attrs);
-            }
-            else {
-                (_b = graphic.commitInternalBaseAttributes) === null || _b === void 0 ? void 0 : _b.call(graphic, attrs);
-            }
-        }
         _runApplyGraphic(graphics) {
             const hasAnimation = this.hasAnimation();
             graphics.forEach((g, index) => {
@@ -41685,13 +41671,7 @@
                         g.context.reusing = false;
                     }
                     else if (!hasStateAnimation) {
-                        if (hasAnimation) {
-                            g.setAttributesAndPreventAnimate(diffAttrs);
-                            this._commitPreventedAnimationStaticAttrs(g, diffAttrs);
-                        }
-                        else {
-                            g.setAttributes(diffAttrs);
-                        }
+                        hasAnimation ? g.setAttributesAndPreventAnimate(diffAttrs) : g.setAttributes(diffAttrs);
                     }
                     if (!((_b = this.renderContext) === null || _b === void 0 ? void 0 : _b.progressive) && this._product && g.parent !== this._product) {
                         this._product.appendChild(g);
@@ -42167,13 +42147,7 @@
                 const diffAttrs = getDiffAttributesOfGraphic(this._product, newAttrs);
                 this._product.context.diffAttrs = diffAttrs;
                 if (!this.hasAnimationByState(this._product.context.animationState)) {
-                    if (hasAnimation) {
-                        this._product.setAttributesAndPreventAnimate(diffAttrs);
-                        this._commitPreventedAnimationStaticAttrs(this._product, diffAttrs);
-                    }
-                    else {
-                        this._product.setAttributes(diffAttrs);
-                    }
+                    hasAnimation ? this._product.setAttributesAndPreventAnimate(diffAttrs) : this._product.setAttributes(diffAttrs);
                 }
             }
             else {