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

package/build/index.es.js

@@ -24482,6 +24482,199 @@ class DefaultCanvasArcRender extends BaseRender {
   }
 }
 
+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);
@@ -25168,6 +25361,57 @@ class DefaultCanvasRectRender extends BaseRender {
   }
 }
 
+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);
@@ -25530,18 +25774,49 @@ class DefaultCanvasPolygonRender extends BaseRender {
   }
 }
 
-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"
   };
@@ -26965,373 +27240,40 @@ function bindTextRenderModule({
     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,
@@ -27339,97 +27281,155 @@ class DefaultCanvasArc3DRender extends BaseRender {
         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
@@ -41628,20 +41628,6 @@ class BaseMark extends GrammarItem {
     _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) => {
@@ -41679,13 +41665,7 @@ class BaseMark extends GrammarItem {
                     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);
@@ -42161,13 +42141,7 @@ class GroupMark extends BaseMark {
             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 {