@visactor/vrender-core 0.20.0-alpha.0 → 0.20.0-alpha.1

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, PointService, Point, abs, max, min, atan2, Matrix, pi2, Logger, pi, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, isString, has, isUndefined, isArray, cos, sin, pointAt, isNumber, getDecimalPlaces, getAngleByPoint, isNumberClose, isNil, Bounds, getIntersectPoint, Color, DEFAULT_COLORS, normalTransform, isValidUrl, isBase64, epsilon, acos, sqrt, LRU, lowerCamelCaseToMiddle, transformBoundsWithMatrix, arrayEqual, getRectIntersect, isRectIntersect, clampAngleByRadian, asin, calculateAnchorOfBounds, styleStringToObject } from '@visactor/vutils';
+import { tau, halfPi as halfPi$1, AABBBounds, degreeToRadian, PointService, Point, abs, max, min, atan2, Matrix, pi2, Logger, isPointInLine, pi, TextMeasure, EventEmitter, isBoolean, isObject, isFunction, isString, has, isUndefined, isArray, cos, sin, pointAt, isNumber, getDecimalPlaces, isValidNumber, clamp, getAngleByPoint, isNumberClose, isNil, Bounds, getIntersectPoint, Color, DEFAULT_COLORS, normalTransform, isValidUrl, isBase64, epsilon, acos, sqrt, LRU, lowerCamelCaseToMiddle, transformBoundsWithMatrix, arrayEqual, getRectIntersect, isRectIntersect, getContextFont, clampAngleByRadian, asin, merge, calculateAnchorOfBounds, styleStringToObject } from '@visactor/vutils';
 
 class Generator {
     static GenAutoIncrementId() {
@@ -2790,7 +2790,7 @@ class CustomPath2D extends CurvePath {
         for (let i = 0, len = commandStrList.length; i < len; ++i) {
             current = commandStrList[i];
             if (sX !== 1 || sY !== 1) {
-                current = scale$1(current, sX, sY);
+                current = scale(current, sX, sY);
             }
             switch (current[0]) {
                 case 'l':
@@ -3040,7 +3040,7 @@ class CustomPath2D extends CurvePath {
     }
 }
 const temp = ['l', 0, 0, 0, 0, 0, 0, 0];
-function scale$1(current, sX, sY) {
+function scale(current, sX, sY) {
     const c = (temp[0] = current[0]);
     if (c === 'a' || c === 'A') {
         temp[1] = sX * current[1];
@@ -3173,7 +3173,7 @@ const DefaultRectAttribute = Object.assign(Object.assign({}, DefaultAttribute),
 const DefaultRect3dAttribute = Object.assign(Object.assign({}, DefaultAttribute), { width: 0, height: 0, x1: 0, y1: 0, cornerRadius: 0, length: 0 });
 const DefaultSymbolAttribute = Object.assign(Object.assign({}, DefaultAttribute), { symbolType: 'circle', size: 10, keepDirIn3d: true });
 const DefaultTextAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultTextStyle), { strokeBoundsBuffer: 0, keepDirIn3d: true });
-const DefaultRichTextAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultTextStyle), { width: 300, height: 300, ellipsis: true, wordBreak: 'break-word', verticalDirection: 'top', textAlign: 'left', textBaseline: 'top', layoutDirection: 'horizontal', textConfig: [], disableAutoWrapLine: false, maxHeight: undefined, maxWidth: undefined, singleLine: false });
+const DefaultRichTextAttribute = Object.assign(Object.assign(Object.assign({}, DefaultAttribute), DefaultTextStyle), { editable: false, width: 300, height: 300, ellipsis: true, wordBreak: 'break-word', verticalDirection: 'top', textAlign: 'left', textBaseline: 'top', layoutDirection: 'horizontal', textConfig: [], disableAutoWrapLine: false, maxHeight: undefined, maxWidth: undefined, singleLine: false });
 const DefaultImageAttribute = Object.assign(Object.assign({ repeatX: 'no-repeat', repeatY: 'no-repeat', image: '', width: 0, height: 0 }, DefaultAttribute), { fill: true, cornerRadius: 0 });
 const DefaultRichTextIconAttribute = Object.assign(Object.assign({}, DefaultImageAttribute), { backgroundShowMode: 'never', backgroundWidth: 0, backgroundHeight: 0, textAlign: 'left', textBaseline: 'middle', direction: 'horizontal', margin: 0, id: '', width: 20, height: 20, backgroundFill: 'rgba(101, 117, 168, 0.1)', backgroundFillOpacity: 1, backgroundStroke: false, backgroundStrokeOpacity: 1, backgroundRadius: 4, opacity: 1 });
 
@@ -3216,15 +3216,7 @@ const defaultFormatting = {
 const regLetter = /\w|\(|\)|-/;
 const regPunctuation = /[.?!,;:/，。？！、；：]/;
 const regFirstSpace = /\S/;
-function applyFillStyle(ctx, character) {
-    const fillStyle = (character && character.fill) || defaultFormatting.fill;
-    if (!fillStyle) {
-        ctx.globalAlpha = 0;
-        return;
-    }
-    const { fillOpacity = 1, opacity = 1 } = character;
-    ctx.globalAlpha = fillOpacity * opacity;
-    ctx.fillStyle = fillStyle;
+const setTextStyle = (ctx, character) => {
     let fontSize = character.fontSize || 16;
     switch (character.script) {
         case 'super':
@@ -3240,6 +3232,17 @@ function applyFillStyle(ctx, character) {
         fontSize,
         fontFamily: character.fontFamily || 'sans-serif'
     });
+};
+function applyFillStyle(ctx, character) {
+    const fillStyle = (character && character.fill) || defaultFormatting.fill;
+    if (!fillStyle) {
+        ctx.globalAlpha = 0;
+        return;
+    }
+    const { fillOpacity = 1, opacity = 1 } = character;
+    ctx.globalAlpha = fillOpacity * opacity;
+    ctx.fillStyle = fillStyle;
+    setTextStyle(ctx, character);
 }
 function applyStrokeStyle(ctx, character) {
     const strokeStyle = (character && character.stroke) || defaultFormatting.stroke;
@@ -3251,21 +3254,7 @@ function applyStrokeStyle(ctx, character) {
     ctx.globalAlpha = strokeOpacity * opacity;
     ctx.lineWidth = character && typeof character.lineWidth === 'number' ? character.lineWidth : 1;
     ctx.strokeStyle = strokeStyle;
-    let fontSize = character.fontSize || 16;
-    switch (character.script) {
-        case 'super':
-        case 'sub':
-            fontSize *= 0.8;
-            break;
-    }
-    ctx.setTextStyle({
-        textAlign: 'left',
-        textBaseline: character.textBaseline || 'alphabetic',
-        fontStyle: character.fontStyle || '',
-        fontWeight: character.fontWeight || '',
-        fontSize,
-        fontFamily: character.fontFamily || 'sans-serif'
-    });
+    setTextStyle(ctx, character);
 }
 function getStrByWithCanvas(desc, width, character, guessIndex, needTestLetter) {
     if (!width || width <= 0) {
@@ -3834,21 +3823,6 @@ function normalizeRadian(angle) {
     }
     return angle;
 }
-function windingLine(x0, y0, x1, y1, x, y) {
-    if ((y > y0 && y > y1) || (y < y0 && y < y1)) {
-        return 0;
-    }
-    if (y1 === y0) {
-        return 0;
-    }
-    const t = (y - y0) / (y1 - y0);
-    let dir = y1 < y0 ? 1 : -1;
-    if (t === 1 || t === 0) {
-        dir = y1 < y0 ? 0.5 : -0.5;
-    }
-    const x_ = t * (x1 - x0) + x0;
-    return x_ === x ? Infinity : x_ > x ? dir : 0;
-}
 function containQuadStroke(x0, y0, x1, y1, x2, y2, lineWidth, x, y) {
     if (lineWidth === 0) {
         return false;
@@ -4229,7 +4203,7 @@ function containPath(commands, lineWidth, isStroke, x, y) {
         const isFirst = i === 0;
         if (command[0] === enumCommandMap.M && i > 1) {
             if (!isStroke) {
-                w += windingLine(xi, yi, x0, y0, x, y);
+                w += isPointInLine(xi, yi, x0, y0, x, y);
             }
         }
         if (isFirst) {
@@ -4270,7 +4244,7 @@ function containPath(commands, lineWidth, isStroke, x, y) {
                     }
                 }
                 else {
-                    w += windingLine(xi, yi, c1, c2, x, y) || 0;
+                    w += isPointInLine(xi, yi, c1, c2, x, y) || 0;
                 }
                 xi = c1;
                 yi = c2;
@@ -4303,7 +4277,7 @@ function containPath(commands, lineWidth, isStroke, x, y) {
                 x1 = Math.cos(theta) * c3 + c1;
                 y1 = Math.sin(theta) * c3 + c2;
                 if (!isFirst) {
-                    w += windingLine(xi, yi, x1, y1, x, y);
+                    w += isPointInLine(xi, yi, x1, y1, x, y);
                 }
                 else {
                     x0 = x1;
@@ -4334,8 +4308,8 @@ function containPath(commands, lineWidth, isStroke, x, y) {
                     }
                 }
                 else {
-                    w += windingLine(x1, y0, x1, y1, x, y);
-                    w += windingLine(x0, y1, x0, y0, x, y);
+                    w += isPointInLine(x1, y0, x1, y1, x, y);
+                    w += isPointInLine(x0, y1, x0, y0, x, y);
                 }
                 break;
             case enumCommandMap.Z:
@@ -4345,7 +4319,7 @@ function containPath(commands, lineWidth, isStroke, x, y) {
                     }
                 }
                 else {
-                    w += windingLine(xi, yi, x0, y0, x, y);
+                    w += isPointInLine(xi, yi, x0, y0, x, y);
                 }
                 xi = x0;
                 yi = y0;
@@ -4353,7 +4327,7 @@ function containPath(commands, lineWidth, isStroke, x, y) {
         }
     }
     if (!isStroke && !isAroundEqual(yi, y0)) {
-        w += windingLine(xi, yi, x0, y0, x, y) || 0;
+        w += isPointInLine(xi, yi, x0, y0, x, y) || 0;
     }
     return w !== 0;
 }
@@ -7429,7 +7403,7 @@ class ACustomAnimate {
         return;
     }
     getEndProps() {
-        return;
+        return this.to;
     }
     getFromProps() {
         return this.from;
@@ -7528,7 +7502,7 @@ class Animate {
             const stage = this.target.stage;
             stage && stage.renderNextFrame();
         }
-        if (this.subAnimates.length === 1 && this.tailAnimate.duration === customAnimate.duration) {
+        if (this.subAnimates.length === 1 && this.tailAnimate.totalDuration === customAnimate.duration) {
             this.trySetAttribute(customAnimate.getFromProps(), customAnimate.mode);
         }
         return this;
@@ -8851,8 +8825,10 @@ class MotionPath extends ACustomAnimate {
 }
 class TagPointsUpdate extends ACustomAnimate {
     constructor(from, to, duration, easing, params) {
+        var _a, _b;
         super(from, to, duration, easing, params);
-        this.newPointAnimateType = (params === null || params === void 0 ? void 0 : params.newPointAnimateType) === 'appear' ? 'appear' : 'grow';
+        this.newPointAnimateType = (_a = params === null || params === void 0 ? void 0 : params.newPointAnimateType) !== null && _a !== void 0 ? _a : 'grow';
+        this.clipRangeByDimension = (_b = params === null || params === void 0 ? void 0 : params.clipRangeByDimension) !== null && _b !== void 0 ? _b : 'x';
     }
     onBind() {
         var _a, _b;
@@ -8884,6 +8860,24 @@ class TagPointsUpdate extends ACustomAnimate {
                 break;
             }
         }
+        if (this.newPointAnimateType === 'clip') {
+            if (this.toPoints.length !== 0) {
+                if (Number.isFinite(lastMatchedIndex)) {
+                    this.clipRange =
+                        this.toPoints[lastMatchedIndex][this.clipRangeByDimension] /
+                            this.toPoints[this.toPoints.length - 1][this.clipRangeByDimension];
+                    if (!isValidNumber(this.clipRange)) {
+                        this.clipRange = 0;
+                    }
+                    else {
+                        this.clipRange = clamp(this.clipRange, 0, 1);
+                    }
+                }
+                else {
+                    this.clipRange = 0;
+                }
+            }
+        }
         let prevMatchedPoint = this.toPoints[0];
         this.interpolatePoints = this.toPoints.map((point, index) => {
             const matchedPoint = tagMap.get(point.context);
@@ -8891,7 +8885,7 @@ class TagPointsUpdate extends ACustomAnimate {
                 prevMatchedPoint = matchedPoint;
                 return [matchedPoint, point];
             }
-            if (this.newPointAnimateType === 'appear') {
+            if (this.newPointAnimateType === 'appear' || this.newPointAnimateType === 'clip') {
                 return [point, point];
             }
             if (index < firstMatchedIndex && firstMatchedPoint) {
@@ -8917,6 +8911,9 @@ class TagPointsUpdate extends ACustomAnimate {
             newPoint.context = point.context;
             return newPoint;
         });
+        if (this.clipRange) {
+            out.clipRange = this.clipRange + (1 - this.clipRange) * ratio;
+        }
         out.points = this.points;
     }
 }
@@ -9123,62 +9120,6 @@ class RotateBySphereAnimate extends ACustomAnimate {
         cb && cb(out);
     }
 }
-class GroupFadeIn extends ACustomAnimate {
-    getEndProps() {
-        return {};
-    }
-    onBind() {
-        this.target.setTheme({
-            common: {
-                opacity: 0
-            }
-        });
-        return;
-    }
-    onEnd() {
-        this.target.setTheme({
-            common: {
-                opacity: 1
-            }
-        });
-        return;
-    }
-    onUpdate(end, ratio, out) {
-        this.target.setTheme({
-            common: {
-                opacity: ratio
-            }
-        });
-    }
-}
-class GroupFadeOut extends ACustomAnimate {
-    getEndProps() {
-        return {};
-    }
-    onBind() {
-        this.target.setTheme({
-            common: {
-                opacity: 1
-            }
-        });
-        return;
-    }
-    onEnd() {
-        this.target.setTheme({
-            common: {
-                opacity: 0
-            }
-        });
-        return;
-    }
-    onUpdate(end, ratio, out) {
-        this.target.setTheme({
-            common: {
-                opacity: 1 - ratio
-            }
-        });
-    }
-}
 class AttributeAnimate extends ACustomAnimate {
     constructor(to, duration, easing) {
         super({}, to, duration, easing);
@@ -10756,6 +10697,63 @@ const multiToOneMorph = (fromGraphics, toGraphic, animationConfig) => {
     }
 };
 
+class GroupFadeIn extends ACustomAnimate {
+    getEndProps() {
+        return {};
+    }
+    onBind() {
+        this.target.setTheme({
+            common: {
+                opacity: 0
+            }
+        });
+        return;
+    }
+    onEnd() {
+        this.target.setTheme({
+            common: {
+                opacity: 1
+            }
+        });
+        return;
+    }
+    onUpdate(end, ratio, out) {
+        this.target.setTheme({
+            common: {
+                opacity: ratio
+            }
+        });
+    }
+}
+class GroupFadeOut extends ACustomAnimate {
+    getEndProps() {
+        return {};
+    }
+    onBind() {
+        this.target.setTheme({
+            common: {
+                opacity: 1
+            }
+        });
+        return;
+    }
+    onEnd() {
+        this.target.setTheme({
+            common: {
+                opacity: 0
+            }
+        });
+        return;
+    }
+    onUpdate(end, ratio, out) {
+        this.target.setTheme({
+            common: {
+                opacity: 1 - ratio
+            }
+        });
+    }
+}
+
 const PARALLEL_NUMBER = 10;
 class ResourceLoader {
     static GetImage(url, mark) {
@@ -13183,9 +13181,7 @@ function drawArcPath$1(arc, context, cx, cy, outerRadius, innerRadius, partStrok
     const clockwise = endAngle > startAngle;
     let collapsedToLine = false;
     if (outerRadius < innerRadius) {
-        const temp = outerRadius;
-        outerRadius = innerRadius;
-        innerRadius = temp;
+        [innerRadius, outerRadius] = [outerRadius, innerRadius];
     }
     if (outerRadius <= epsilon) {
         context.moveTo(cx, cy);
@@ -13558,19 +13554,6 @@ const TextRenderContribution = Symbol.for('TextRenderContribution');
 const CommonRenderContribution = Symbol.for('CommonRenderContribution');
 const InteractiveSubRenderContribution = Symbol.for('InteractiveSubRenderContribution');
 
-function getContextFont(text, defaultAttr = {}, fontSizeScale) {
-    if (!fontSizeScale) {
-        fontSizeScale = 1;
-    }
-    const { fontStyle = defaultAttr.fontStyle, fontVariant = defaultAttr.fontVariant, fontWeight = defaultAttr.fontWeight, fontSize = defaultAttr.fontSize, fontFamily = defaultAttr.fontFamily } = text;
-    return ('' +
-        (fontStyle ? fontStyle + ' ' : '') +
-        (fontVariant ? fontVariant + ' ' : '') +
-        (fontWeight ? fontWeight + ' ' : '') +
-        fontSize * fontSizeScale +
-        'px ' +
-        (fontFamily ? fontFamily : 'sans-serif'));
-}
 function textDrawOffsetY(baseline, h) {
     const offset = baseline === 'top'
         ? Math.ceil(0.79 * h)
@@ -13661,109 +13644,7 @@ class DefaultSymbolOuterBorderBoundsContribution extends DefaultOuterBorderBound
     }
 }
 
-const MatrixAllocate = Symbol.for('MatrixAllocate');
-const Mat4Allocate = Symbol.for('Mat4Allocate');
-function createMat4() {
-    return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
-}
-class DefaultMatrixAllocate {
-    constructor() {
-        this.pools = [];
-    }
-    allocate(a, b, c, d, e, f) {
-        if (!this.pools.length) {
-            return new Matrix(a, b, c, d, e, f);
-        }
-        const m = this.pools.pop();
-        m.a = a;
-        m.b = b;
-        m.c = c;
-        m.d = d;
-        m.e = e;
-        m.f = f;
-        return m;
-    }
-    allocateByObj(matrix) {
-        if (!this.pools.length) {
-            return new Matrix(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
-        }
-        const m = this.pools.pop();
-        m.a = matrix.a;
-        m.b = matrix.b;
-        m.c = matrix.c;
-        m.d = matrix.d;
-        m.e = matrix.e;
-        m.f = matrix.f;
-        return m;
-    }
-    free(d) {
-        this.pools.push(d);
-    }
-    get length() {
-        return this.pools.length;
-    }
-    release(...params) {
-        this.pools = [];
-    }
-}
-class DefaultMat4Allocate {
-    constructor() {
-        this.pools = [];
-    }
-    static identity(out) {
-        out[0] = 1;
-        out[1] = 0;
-        out[2] = 0;
-        out[3] = 0;
-        out[4] = 0;
-        out[5] = 1;
-        out[6] = 0;
-        out[7] = 0;
-        out[8] = 0;
-        out[9] = 0;
-        out[10] = 1;
-        out[11] = 0;
-        out[12] = 0;
-        out[13] = 0;
-        out[14] = 0;
-        out[15] = 1;
-        return out;
-    }
-    allocate() {
-        if (!this.pools.length) {
-            return createMat4();
-        }
-        const m = this.pools.pop();
-        DefaultMat4Allocate.identity(m);
-        return m;
-    }
-    allocateByObj(d) {
-        let m;
-        if (!this.pools.length) {
-            m = createMat4();
-        }
-        else {
-            m = this.pools.pop();
-        }
-        for (let i = 0; i < m.length; i++) {
-            m[i] = d[i];
-        }
-        return m;
-    }
-    free(m) {
-        m && this.pools.push(m);
-    }
-    get length() {
-        return this.pools.length;
-    }
-    release(...params) {
-        this.pools = [];
-    }
-}
-const matrixAllocate = new DefaultMatrixAllocate();
-const mat4Allocate = new DefaultMat4Allocate();
-
-function identity(out) {
+function identityMat4(out) {
     out[0] = 1;
     out[1] = 0;
     out[2] = 0;
@@ -13998,7 +13879,7 @@ function multiplyMat4Mat3(out, a, b) {
     out[15] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
     return out;
 }
-function scale(out, a, v) {
+function scaleMat4(out, a, v) {
     const x = v[0];
     const y = v[1];
     const z = v[2];
@@ -14071,6 +13952,204 @@ function multiplyMat4Mat4(out, a, b) {
     out[15] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
     return out;
 }
+function lookAt(out, eye, center, up) {
+    let x0;
+    let x1;
+    let x2;
+    let y0;
+    let y1;
+    let y2;
+    let z0;
+    let z1;
+    let z2;
+    let len;
+    const eyex = eye[0];
+    const eyey = eye[1];
+    const eyez = eye[2];
+    const upx = up[0];
+    const upy = up[1];
+    const upz = up[2];
+    const centerx = center[0];
+    const centery = center[1];
+    const centerz = center[2];
+    if (Math.abs(eyex - centerx) < epsilon && Math.abs(eyey - centery) < epsilon && Math.abs(eyez - centerz) < epsilon) {
+        return identityMat4(out);
+    }
+    z0 = eyex - centerx;
+    z1 = eyey - centery;
+    z2 = eyez - centerz;
+    len = 1 / Math.hypot(z0, z1, z2);
+    z0 *= len;
+    z1 *= len;
+    z2 *= len;
+    x0 = upy * z2 - upz * z1;
+    x1 = upz * z0 - upx * z2;
+    x2 = upx * z1 - upy * z0;
+    len = Math.hypot(x0, x1, x2);
+    if (!len) {
+        x0 = 0;
+        x1 = 0;
+        x2 = 0;
+    }
+    else {
+        len = 1 / len;
+        x0 *= len;
+        x1 *= len;
+        x2 *= len;
+    }
+    y0 = z1 * x2 - z2 * x1;
+    y1 = z2 * x0 - z0 * x2;
+    y2 = z0 * x1 - z1 * x0;
+    len = Math.hypot(y0, y1, y2);
+    if (!len) {
+        y0 = 0;
+        y1 = 0;
+        y2 = 0;
+    }
+    else {
+        len = 1 / len;
+        y0 *= len;
+        y1 *= len;
+        y2 *= len;
+    }
+    out[0] = x0;
+    out[1] = y0;
+    out[2] = z0;
+    out[3] = 0;
+    out[4] = x1;
+    out[5] = y1;
+    out[6] = z1;
+    out[7] = 0;
+    out[8] = x2;
+    out[9] = y2;
+    out[10] = z2;
+    out[11] = 0;
+    out[12] = -(x0 * eyex + x1 * eyey + x2 * eyez);
+    out[13] = -(y0 * eyex + y1 * eyey + y2 * eyez);
+    out[14] = -(z0 * eyex + z1 * eyey + z2 * eyez);
+    out[15] = 1;
+    return out;
+}
+function ortho(out, left, right, bottom, top, near, far) {
+    const lr = 1 / (left - right);
+    const bt = 1 / (bottom - top);
+    const nf = 1 / (near - far);
+    out[0] = -2 * lr;
+    out[1] = 0;
+    out[2] = 0;
+    out[3] = 0;
+    out[4] = 0;
+    out[5] = -2 * bt;
+    out[6] = 0;
+    out[7] = 0;
+    out[8] = 0;
+    out[9] = 0;
+    out[10] = 2 * nf;
+    out[11] = 0;
+    out[12] = (left + right) * lr;
+    out[13] = (top + bottom) * bt;
+    out[14] = (far + near) * nf;
+    out[15] = 1;
+    return out;
+}
+function transformMat4(out, a, m) {
+    const x = a[0];
+    const y = a[1];
+    const z = a[2];
+    let w = m[3] * x + m[7] * y + m[11] * z + m[15];
+    w = w || 1.0;
+    out[0] = (m[0] * x + m[4] * y + m[8] * z + m[12]) / w;
+    out[1] = (m[1] * x + m[5] * y + m[9] * z + m[13]) / w;
+    out[2] = (m[2] * x + m[6] * y + m[10] * z + m[14]) / w;
+    return out;
+}
+
+const MatrixAllocate = Symbol.for('MatrixAllocate');
+const Mat4Allocate = Symbol.for('Mat4Allocate');
+function createMat4() {
+    return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+}
+class DefaultMatrixAllocate {
+    constructor() {
+        this.pools = [];
+    }
+    allocate(a, b, c, d, e, f) {
+        if (!this.pools.length) {
+            return new Matrix(a, b, c, d, e, f);
+        }
+        const m = this.pools.pop();
+        m.a = a;
+        m.b = b;
+        m.c = c;
+        m.d = d;
+        m.e = e;
+        m.f = f;
+        return m;
+    }
+    allocateByObj(matrix) {
+        if (!this.pools.length) {
+            return new Matrix(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
+        }
+        const m = this.pools.pop();
+        m.a = matrix.a;
+        m.b = matrix.b;
+        m.c = matrix.c;
+        m.d = matrix.d;
+        m.e = matrix.e;
+        m.f = matrix.f;
+        return m;
+    }
+    free(d) {
+        this.pools.push(d);
+    }
+    get length() {
+        return this.pools.length;
+    }
+    release(...params) {
+        this.pools = [];
+    }
+}
+class DefaultMat4Allocate {
+    constructor() {
+        this.pools = [];
+    }
+    static identity(out) {
+        return identityMat4(out);
+    }
+    allocate() {
+        if (!this.pools.length) {
+            return createMat4();
+        }
+        const m = this.pools.pop();
+        DefaultMat4Allocate.identity(m);
+        return m;
+    }
+    allocateByObj(d) {
+        let m;
+        if (!this.pools.length) {
+            m = createMat4();
+        }
+        else {
+            m = this.pools.pop();
+        }
+        for (let i = 0; i < m.length; i++) {
+            m[i] = d[i];
+        }
+        return m;
+    }
+    free(m) {
+        m && this.pools.push(m);
+    }
+    get length() {
+        return this.pools.length;
+    }
+    release(...params) {
+        this.pools = [];
+    }
+}
+const matrixAllocate = new DefaultMatrixAllocate();
+const mat4Allocate = new DefaultMat4Allocate();
+
 function getExtraModelMatrix(dx, dy, graphic) {
     const { alpha, beta } = graphic.attribute;
     if (!alpha && !beta) {
@@ -14136,13 +14215,13 @@ function getModelMatrix(out, graphic, theme) {
         }
         _anchor[2] = (_a = anchor3d[2]) !== null && _a !== void 0 ? _a : 0;
     }
-    identity(out);
+    identityMat4(out);
     translate(out, out, [x + dx, y + dy, z + dz]);
     translate(out, out, [_anchor[0], _anchor[1], _anchor[2]]);
     rotateX(out, out, beta);
     rotateY(out, out, alpha);
     translate(out, out, [-_anchor[0], -_anchor[1], _anchor[2]]);
-    scale(out, out, [scaleX, scaleY, scaleZ]);
+    scaleMat4(out, out, [scaleX, scaleY, scaleZ]);
     if (angle) {
         const m = mat4Allocate.allocate();
         const _anchor = [0, 0];
@@ -14265,7 +14344,9 @@ let DefaultGraphicService = class DefaultGraphicService {
             const { x1, y1, x, y } = attribute;
             width = width !== null && width !== void 0 ? width : x1 - x;
             height = height !== null && height !== void 0 ? height : y1 - y;
-            aabbBounds.set(0, 0, width || 0, height || 0);
+            if (isFinite(width) || isFinite(height) || isFinite(x) || isFinite(y)) {
+                aabbBounds.set(0, 0, width || 0, height || 0);
+            }
         }
         const tb1 = this.tempAABBBounds1;
         const tb2 = this.tempAABBBounds2;
@@ -14283,7 +14364,7 @@ let DefaultGraphicService = class DefaultGraphicService {
     updateGroupAABBBounds(attribute, groupTheme, aabbBounds, graphic) {
         const originalAABBBounds = aabbBounds;
         aabbBounds = aabbBounds.clone();
-        const { width, height, path, clip = groupTheme.clip } = attribute;
+        const { width, height, path, clip = groupTheme.clip, display } = attribute;
         if (path && path.length) {
             path.forEach(g => {
                 aabbBounds.union(g.AABBBounds);
@@ -14521,19 +14602,23 @@ let DefaultGraphicService = class DefaultGraphicService {
         return aabbBounds;
     }
     updateLineAABBBoundsByPoints(attribute, lineTheme, aabbBounds, graphic) {
-        const { points = lineTheme.points } = attribute;
+        const { points = lineTheme.points, connectedType } = attribute;
         const b = aabbBounds;
         points.forEach(p => {
-            b.add(p.x, p.y);
+            if (p.defined !== false || connectedType === 'zero') {
+                b.add(p.x, p.y);
+            }
         });
         return b;
     }
     updateLineAABBBoundsBySegments(attribute, lineTheme, aabbBounds, graphic) {
-        const { segments = lineTheme.segments } = attribute;
+        const { segments = lineTheme.segments, connectedType } = attribute;
         const b = aabbBounds;
         segments.forEach(s => {
             s.points.forEach(p => {
-                b.add(p.x, p.y);
+                if (p.defined !== false || connectedType === 'zero') {
+                    b.add(p.x, p.y);
+                }
             });
         });
         return b;
@@ -15379,7 +15464,7 @@ function getScaledStroke(context, width, dpr) {
     strokeWidth = (strokeWidth / Math.abs(scaleX + scaleY)) * 2 * dpr;
     return strokeWidth;
 }
-function createColor(context, c, params, offsetX, offsetY) {
+function createColor(context, c, params, offsetX = 0, offsetY = 0) {
     if (!c || c === true) {
         return 'black';
     }
@@ -15400,89 +15485,49 @@ function createColor(context, c, params, offsetX, offsetY) {
     if (typeof color === 'string') {
         return color;
     }
-    if (color.gradient === 'linear') {
-        result = createLinearGradient(context, color, params, offsetX, offsetY);
-    }
-    else if (color.gradient === 'conical') {
-        result = createConicGradient(context, color, params, offsetX, offsetY);
-    }
-    else if (color.gradient === 'radial') {
-        result = createRadialGradient(context, color, params, offsetX, offsetY);
+    if (params.AABBBounds && (!params.attribute || params.attribute.scaleX !== 0 || params.attribute.scaleY !== 0)) {
+        const bounds = params.AABBBounds;
+        let w = bounds.x2 - bounds.x1;
+        let h = bounds.y2 - bounds.y1;
+        let x = bounds.x1 - offsetX;
+        let y = bounds.y1 - offsetY;
+        if (params.attribute) {
+            const { scaleX = 1, scaleY = 1 } = params.attribute;
+            w /= scaleX;
+            h /= scaleY;
+            x /= scaleX;
+            y /= scaleY;
+        }
+        if (color.gradient === 'linear') {
+            result = createLinearGradient(context, color, x, y, w, h);
+        }
+        else if (color.gradient === 'conical') {
+            result = createConicGradient(context, color, x, y, w, h);
+        }
+        else if (color.gradient === 'radial') {
+            result = createRadialGradient(context, color, x, y, w, h);
+        }
     }
     return result || 'orange';
 }
-function createLinearGradient(context, color, params, offsetX = 0, offsetY = 0) {
+function createLinearGradient(context, color, x, y, w, h) {
     var _a, _b, _c, _d;
-    const bounds = params.AABBBounds;
-    if (!bounds) {
-        return;
-    }
-    let w = bounds.x2 - bounds.x1;
-    let h = bounds.y2 - bounds.y1;
-    let x = bounds.x1 - offsetX;
-    let y = bounds.y1 - offsetY;
-    if (params.attribute) {
-        const { scaleX = 1, scaleY = 1 } = params.attribute;
-        if (scaleX * scaleY === 0) {
-            return;
-        }
-        w /= scaleX;
-        h /= scaleY;
-        x /= scaleX;
-        y /= scaleY;
-    }
     const canvasGradient = context.createLinearGradient(x + ((_a = color.x0) !== null && _a !== void 0 ? _a : 0) * w, y + ((_b = color.y0) !== null && _b !== void 0 ? _b : 0) * h, x + ((_c = color.x1) !== null && _c !== void 0 ? _c : 1) * w, y + ((_d = color.y1) !== null && _d !== void 0 ? _d : 0) * h);
     color.stops.forEach(stop => {
         canvasGradient.addColorStop(stop.offset, stop.color);
     });
     return canvasGradient;
 }
-function createRadialGradient(context, color, params, offsetX = 0, offsetY = 0) {
+function createRadialGradient(context, color, x, y, w, h) {
     var _a, _b, _c, _d, _e, _f;
-    const bounds = params.AABBBounds;
-    if (!bounds) {
-        return;
-    }
-    let w = bounds.x2 - bounds.x1;
-    let h = bounds.y2 - bounds.y1;
-    let x = bounds.x1 - offsetX;
-    let y = bounds.y1 - offsetY;
-    if (params.attribute) {
-        const { scaleX = 1, scaleY = 1 } = params.attribute;
-        if (scaleX * scaleY === 0) {
-            return;
-        }
-        x /= scaleX;
-        y /= scaleY;
-        w /= scaleX;
-        h /= scaleY;
-    }
     const canvasGradient = context.createRadialGradient(x + ((_a = color.x0) !== null && _a !== void 0 ? _a : 0.5) * w, y + ((_b = color.y0) !== null && _b !== void 0 ? _b : 0.5) * h, Math.max(w, h) * ((_c = color.r0) !== null && _c !== void 0 ? _c : 0), x + ((_d = color.x1) !== null && _d !== void 0 ? _d : 0.5) * w, y + ((_e = color.y1) !== null && _e !== void 0 ? _e : 0.5) * h, Math.max(w, h) * ((_f = color.r1) !== null && _f !== void 0 ? _f : 0.5));
     color.stops.forEach(stop => {
         canvasGradient.addColorStop(stop.offset, stop.color);
     });
     return canvasGradient;
 }
-function createConicGradient(context, color, params, offsetX = 0, offsetY = 0) {
+function createConicGradient(context, color, x, y, w, h) {
     var _a, _b;
-    const bounds = params.AABBBounds;
-    if (!bounds) {
-        return;
-    }
-    let w = bounds.x2 - bounds.x1;
-    let h = bounds.y2 - bounds.y1;
-    let x = bounds.x1 - offsetX;
-    let y = bounds.y1 - offsetY;
-    if (params.attribute) {
-        const { scaleX = 1, scaleY = 1 } = params.attribute;
-        if (scaleX * scaleY === 0) {
-            return;
-        }
-        w /= scaleX;
-        h /= scaleY;
-        x /= scaleX;
-        y /= scaleY;
-    }
     const canvasGradient = context.createConicGradient(x + ((_a = color.x) !== null && _a !== void 0 ? _a : 0) * w, y + ((_b = color.y) !== null && _b !== void 0 ? _b : 0) * h, color.startAngle, color.endAngle);
     color.stops.forEach(stop => {
         canvasGradient.addColorStop(stop.offset, stop.color);
@@ -16303,9 +16348,7 @@ let DefaultCanvasArcRender = class DefaultCanvasArcRender extends BaseRender {
         const clockwise = endAngle > startAngle;
         let collapsedToLine = false;
         if (outerRadius < innerRadius) {
-            const temp = outerRadius;
-            outerRadius = innerRadius;
-            innerRadius = temp;
+            [innerRadius, outerRadius] = [outerRadius, innerRadius];
         }
         const cornerRadius = arc.getParsedCornerRadius();
         const { outerDeltaAngle, innerDeltaAngle, outerStartAngle, outerEndAngle, innerEndAngle, innerStartAngle } = arc.getParsePadAngle(startAngle, endAngle);
@@ -16588,9 +16631,45 @@ function drawSegItem(ctx, curve, endPercent, params) {
     }
 }
 
-function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
+function drawEachCurve(path, curve, lastCurve, defined0, offsetX, offsetY, offsetZ) {
     var _a;
-    const { offsetX = 0, offsetY = 0, offsetZ = 0, mode = 'none', drawConnect = false, zeroX = 0, zeroY = 0 } = params || {};
+    let p0 = curve.p0;
+    let newDefined0 = defined0;
+    if (lastCurve && lastCurve.originP1 === lastCurve.originP2) {
+        p0 = lastCurve.p0;
+    }
+    if (curve.defined) {
+        if (!defined0) {
+            path.lineTo(p0.x + offsetX, p0.y + offsetY, offsetZ);
+            newDefined0 = !defined0;
+        }
+    }
+    else {
+        const { originP1, originP2 } = curve;
+        let validP;
+        if (originP1 && originP1.defined !== false) {
+            validP = p0;
+        }
+        else if (originP1 && originP2.defined !== false) {
+            validP = (_a = curve.p3) !== null && _a !== void 0 ? _a : curve.p1;
+        }
+        if (defined0) {
+            newDefined0 = !defined0;
+            const x = validP ? validP.x : curve.p0.x;
+            const y = validP ? validP.y : curve.p0.y;
+            path.moveTo(x + offsetX, y + offsetY, offsetZ);
+        }
+        else {
+            if (validP) {
+                newDefined0 = !defined0;
+                path.lineTo(validP.x + offsetX, validP.y + offsetY, offsetZ);
+            }
+        }
+    }
+    return newDefined0;
+}
+function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
+    const { offsetX = 0, offsetY = 0, offsetZ = 0, mode = 'none', drawConnect = false } = params || {};
     if (drawConnect && mode === 'none') {
         return;
     }
@@ -16604,51 +16683,19 @@ function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
             let defined0 = true;
             let lastCurve;
             curves.forEach((curve, i) => {
-                var _a;
-                let p0 = curve.p0;
                 if (curve.originP1 === curve.originP2) {
                     lastCurve = curve;
                     return;
                 }
-                if (lastCurve && lastCurve.originP1 === lastCurve.originP2) {
-                    p0 = lastCurve.p0;
-                }
-                if (curve.defined) {
-                    if (!defined0) {
-                        path.lineTo(p0.x + offsetX, p0.y + offsetY, offsetZ);
-                        defined0 = !defined0;
-                    }
-                }
-                else {
-                    const { originP1, originP2 } = curve;
-                    let validP;
-                    if (originP1 && originP1.defined !== false) {
-                        validP = p0;
-                    }
-                    else if (originP1 && originP2.defined !== false) {
-                        validP = (_a = curve.p3) !== null && _a !== void 0 ? _a : curve.p1;
-                    }
-                    if (defined0) {
-                        defined0 = !defined0;
-                        const x = validP ? validP.x : curve.p0.x;
-                        const y = validP ? validP.y : curve.p0.y;
-                        path.moveTo(x + offsetX, y + offsetY, offsetZ);
-                    }
-                    else {
-                        if (validP) {
-                            defined0 = !defined0;
-                            path.lineTo(validP.x + offsetX, validP.y + offsetY, offsetZ);
-                        }
-                    }
-                }
-                lastCurve = curve;
-            });
-        }
-        else {
-            curves.forEach(curve => {
-                if (!curve.defined) {
-                    needMoveTo = true;
-                    return;
+                defined0 = drawEachCurve(path, curve, lastCurve, defined0, offsetX, offsetY, offsetZ);
+                lastCurve = curve;
+            });
+        }
+        else {
+            curves.forEach(curve => {
+                if (!curve.defined) {
+                    needMoveTo = true;
+                    return;
                 }
                 if (needMoveTo) {
                     path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ);
@@ -16686,42 +16733,11 @@ function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
             break;
         }
         if (drawConnect) {
-            let p0 = curve.p0;
             if (curve.originP1 === curve.originP2) {
                 lastCurve = curve;
                 continue;
             }
-            if (lastCurve && lastCurve.originP1 === lastCurve.originP2) {
-                p0 = lastCurve.p0;
-            }
-            if (curve.defined) {
-                if (!defined0) {
-                    path.lineTo(p0.x + offsetX, p0.y + offsetY, offsetZ);
-                    defined0 = !defined0;
-                }
-            }
-            else {
-                const { originP1, originP2 } = curve;
-                let validP;
-                if (originP1 && originP1.defined !== false) {
-                    validP = p0;
-                }
-                else if (originP1 && originP2.defined !== false) {
-                    validP = (_a = curve.p3) !== null && _a !== void 0 ? _a : curve.p1;
-                }
-                if (defined0) {
-                    defined0 = !defined0;
-                    const x = validP ? validP.x : curve.p0.x;
-                    const y = validP ? validP.y : curve.p0.y;
-                    path.moveTo(x + offsetX, y + offsetY, offsetZ);
-                }
-                else {
-                    if (validP) {
-                        defined0 = !defined0;
-                        path.lineTo(validP.x + offsetX, validP.y + offsetY, offsetZ);
-                    }
-                }
-            }
+            defined0 = drawEachCurve(path, curve, lastCurve, defined0, offsetX, offsetY, offsetZ);
             lastCurve = curve;
         }
         else {
@@ -17592,7 +17608,13 @@ let DefaultCanvasAreaRender = class DefaultCanvasAreaRender extends BaseRender {
         }
         const xTotalLength = abs(endP.x - startP.x);
         const yTotalLength = abs(endP.y - startP.y);
-        if (!Number.isFinite(xTotalLength + yTotalLength)) {
+        if (endP.x1 == null) {
+            direction = Direction$1.ROW;
+        }
+        else if (endP.y1 == null) {
+            direction = Direction$1.COLUMN;
+        }
+        else if (!Number.isFinite(xTotalLength + yTotalLength)) {
             direction = Direction$1.ROW;
         }
         else {
@@ -17827,73 +17849,46 @@ let DefaultCanvasSymbolRender = class DefaultCanvasSymbolRender extends BaseRend
         const { keepDirIn3d = symbolAttribute.keepDirIn3d } = symbol.attribute;
         const z = (_a = this.z) !== null && _a !== void 0 ? _a : 0;
         context.beginPath();
+        const callback = (p, a) => {
+            var _a, _b, _c;
+            if (symbol._parsedPath.svgCache) {
+                const obj = Object.assign({}, a);
+                obj.fill = (_a = a.fill) !== null && _a !== void 0 ? _a : symbol.attribute.fill;
+                obj.opacity = (_b = a.fill) !== null && _b !== void 0 ? _b : symbol.attribute.opacity;
+                obj.fillOpacity = symbol.attribute.fillOpacity;
+                obj.stroke = (_c = a.stroke) !== null && _c !== void 0 ? _c : symbol.attribute.stroke;
+                a = obj;
+            }
+            if (a.fill) {
+                if (fillCb) {
+                    fillCb(context, symbol.attribute, symbolAttribute);
+                }
+                else {
+                    context.setCommonStyle(symbol, a, originX - x, originY - y, symbolAttribute);
+                    context.fill();
+                }
+            }
+            if (a.stroke) {
+                if (strokeCb) {
+                    strokeCb(context, symbol.attribute, symbolAttribute);
+                }
+                else {
+                    context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute);
+                    context.stroke();
+                }
+            }
+        };
         if (keepDirIn3d && context.camera && context.project) {
             const p = context.project(x, y, z);
             const camera = context.camera;
             context.camera = null;
-            if (parsedPath.draw(context, isArray(size) ? [size[0] * scaleX, size[1] * scaleY] : size * scaleX, p.x, p.y, undefined, (p, a) => {
-                var _a, _b, _c;
-                if (symbol._parsedPath.svgCache) {
-                    const obj = Object.assign({}, a);
-                    obj.fill = (_a = a.fill) !== null && _a !== void 0 ? _a : symbol.attribute.fill;
-                    obj.opacity = (_b = a.fill) !== null && _b !== void 0 ? _b : symbol.attribute.opacity;
-                    obj.fillOpacity = symbol.attribute.fillOpacity;
-                    obj.stroke = (_c = a.stroke) !== null && _c !== void 0 ? _c : symbol.attribute.stroke;
-                    a = obj;
-                }
-                if (a.fill) {
-                    if (fillCb) {
-                        fillCb(context, symbol.attribute, symbolAttribute);
-                    }
-                    else {
-                        context.setCommonStyle(symbol, a, originX - x, originY - y, symbolAttribute);
-                        context.fill();
-                    }
-                }
-                if (a.stroke) {
-                    if (strokeCb) {
-                        strokeCb(context, symbol.attribute, symbolAttribute);
-                    }
-                    else {
-                        context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute);
-                        context.stroke();
-                    }
-                }
-            }) === false) {
+            if (parsedPath.draw(context, isArray(size) ? [size[0] * scaleX, size[1] * scaleY] : size * scaleX, p.x, p.y, undefined, callback) === false) {
                 context.closePath();
             }
             context.camera = camera;
         }
         else {
-            if (parsedPath.draw(context, size, x, y, z, (p, a) => {
-                var _a, _b, _c;
-                if (symbol._parsedPath.svgCache) {
-                    const obj = Object.assign({}, a);
-                    obj.fill = (_a = a.fill) !== null && _a !== void 0 ? _a : symbol.attribute.fill;
-                    obj.opacity = (_b = a.opacity) !== null && _b !== void 0 ? _b : symbol.attribute.opacity;
-                    obj.fillOpacity = symbol.attribute.fillOpacity;
-                    obj.stroke = (_c = a.stroke) !== null && _c !== void 0 ? _c : symbol.attribute.stroke;
-                    a = obj;
-                }
-                if (a.fill) {
-                    if (fillCb) {
-                        fillCb(context, symbol.attribute, symbolAttribute);
-                    }
-                    else {
-                        context.setCommonStyle(symbol, a, originX - x, originY - y, symbolAttribute);
-                        context.fill();
-                    }
-                }
-                if (a.stroke) {
-                    if (strokeCb) {
-                        strokeCb(context, symbol.attribute, symbolAttribute);
-                    }
-                    else {
-                        context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute);
-                        context.stroke();
-                    }
-                }
-            }) === false) {
+            if (parsedPath.draw(context, size, x, y, z, callback) === false) {
                 context.closePath();
             }
         }
@@ -18611,6 +18606,103 @@ const ImageRender = Symbol.for('ImageRender');
 const RenderSelector = Symbol.for('RenderSelector');
 const DrawContribution = Symbol.for('DrawContribution');
 
+const draw3dItem = (context, graphic, callback, output) => {
+    let isPie = false;
+    let is3d = false;
+    graphic.forEachChildren((c) => {
+        isPie = c.numberType === ARC3D_NUMBER_TYPE;
+        return !isPie;
+    });
+    graphic.forEachChildren((c) => {
+        is3d = !!c.findFace;
+        return !is3d;
+    });
+    let result;
+    if (isPie) {
+        const children = graphic.getChildren();
+        const sortedChildren = [...children];
+        sortedChildren.sort((a, b) => {
+            var _a, _b, _c, _d;
+            let angle1 = ((_b = (_a = a.attribute.startAngle) !== null && _a !== void 0 ? _a : 0 + a.attribute.endAngle) !== null && _b !== void 0 ? _b : 0) / 2;
+            let angle2 = ((_d = (_c = b.attribute.startAngle) !== null && _c !== void 0 ? _c : 0 + b.attribute.endAngle) !== null && _d !== void 0 ? _d : 0) / 2;
+            while (angle1 < 0) {
+                angle1 += pi2;
+            }
+            while (angle2 < 0) {
+                angle2 += pi2;
+            }
+            return angle2 - angle1;
+        });
+        sortedChildren.forEach(c => {
+            c._next = null;
+            c._prev = null;
+        });
+        graphic.removeAllChild();
+        graphic.update();
+        sortedChildren.forEach(c => {
+            graphic.appendChild(c);
+        });
+        output.hack_pieFace = 'outside';
+        result = callback(isPie, is3d);
+        if (!result || !result.graphic) {
+            output.hack_pieFace = 'inside';
+            result = callback(isPie, is3d);
+        }
+        if (!result || !result.graphic) {
+            output.hack_pieFace = 'top';
+            result = callback(isPie, is3d);
+        }
+        graphic.removeAllChild();
+        children.forEach(c => {
+            c._next = null;
+            c._prev = null;
+        });
+        children.forEach(c => {
+            graphic.appendChild(c);
+        });
+    }
+    else if (is3d) {
+        const children = graphic.getChildren();
+        const zChildren = children.map(g => {
+            const face3d = g.findFace();
+            const vertices = face3d.vertices;
+            const viewdVerticesZ = vertices.map(v => {
+                var _a;
+                return context.view(v[0], v[1], (_a = v[2] + g.attribute.z) !== null && _a !== void 0 ? _a : 0)[2];
+            });
+            const ave_z = viewdVerticesZ.reduce((a, b) => a + b, 0);
+            return {
+                ave_z,
+                g
+            };
+        });
+        zChildren.sort((a, b) => b.ave_z - a.ave_z);
+        graphic.removeAllChild();
+        zChildren.forEach(i => {
+            i.g._next = null;
+            i.g._prev = null;
+        });
+        graphic.update();
+        zChildren.forEach(i => {
+            graphic.add(i.g);
+        });
+        result = callback(isPie, is3d);
+        graphic.removeAllChild();
+        children.forEach(g => {
+            g._next = null;
+            g._prev = null;
+        });
+        graphic.update();
+        children.forEach(g => {
+            graphic.add(g);
+        });
+    }
+    else {
+        result = callback(isPie, is3d);
+    }
+    return result;
+};
+
 const DrawItemInterceptor = Symbol.for('DrawItemInterceptor');
 const tempDirtyBounds = new AABBBounds();
 const tempBackupDirtyBounds = new AABBBounds();
@@ -18619,13 +18711,25 @@ class ShadowRootDrawItemInterceptorContribution {
         this.order = 1;
     }
     afterDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        if (graphic.attribute.shadowRootIdx > 0 || !graphic.attribute.shadowRootIdx) {
+        if (graphic.attribute.shadowRootIdx == null &&
+            graphic.shadowRoot &&
+            graphic.shadowRoot.attribute.shadowRootIdx < 0) {
+            return false;
+        }
+        if (graphic.attribute.shadowRootIdx > 0 ||
+            !graphic.attribute.shadowRootIdx ||
+            (graphic.shadowRoot && graphic.shadowRoot.attribute.shadowRootIdx > 0)) {
             this.drawItem(graphic, renderService, drawContext, drawContribution, params);
         }
         return false;
     }
     beforeDrawItem(graphic, renderService, drawContext, drawContribution, params) {
-        if (graphic.attribute.shadowRootIdx < 0) {
+        if (graphic.attribute.shadowRootIdx == null &&
+            graphic.shadowRoot &&
+            graphic.shadowRoot.attribute.shadowRootIdx > 0) {
+            return false;
+        }
+        if (graphic.attribute.shadowRootIdx < 0 || (graphic.shadowRoot && graphic.shadowRoot.attribute.shadowRootIdx < 0)) {
             this.drawItem(graphic, renderService, drawContext, drawContribution, params);
         }
         return false;
@@ -18835,95 +18939,9 @@ class Canvas3DDrawItemInterceptor {
         }
         context.setTransform(1, 0, 0, 1, 0, 0, true);
         if (graphic.isContainer) {
-            let isPie = false;
-            let is3d = false;
-            graphic.forEachChildren((c) => {
-                isPie = c.numberType === ARC3D_NUMBER_TYPE;
-                return !isPie;
-            });
-            graphic.forEachChildren((c) => {
-                is3d = !!c.findFace;
-                return !is3d;
-            });
-            if (isPie) {
-                const children = graphic.getChildren();
-                const sortedChildren = [...children];
-                sortedChildren.sort((a, b) => {
-                    var _a, _b, _c, _d;
-                    let angle1 = (((_a = a.attribute.startAngle) !== null && _a !== void 0 ? _a : 0) + ((_b = a.attribute.endAngle) !== null && _b !== void 0 ? _b : 0)) / 2;
-                    let angle2 = (((_c = b.attribute.startAngle) !== null && _c !== void 0 ? _c : 0) + ((_d = b.attribute.endAngle) !== null && _d !== void 0 ? _d : 0)) / 2;
-                    while (angle1 < 0) {
-                        angle1 += pi2;
-                    }
-                    while (angle2 < 0) {
-                        angle2 += pi2;
-                    }
-                    return angle2 - angle1;
-                });
-                sortedChildren.forEach(c => {
-                    c._next = null;
-                    c._prev = null;
-                });
-                graphic.removeAllChild();
-                graphic.update();
-                sortedChildren.forEach(c => {
-                    graphic.appendChild(c);
-                });
-                const m = graphic.parent.globalTransMatrix;
-                drawContext.hack_pieFace = 'outside';
-                drawContribution.renderGroup(graphic, drawContext, m);
-                drawContext.hack_pieFace = 'inside';
-                drawContribution.renderGroup(graphic, drawContext, m);
-                drawContext.hack_pieFace = 'top';
-                drawContribution.renderGroup(graphic, drawContext, m);
-                graphic.removeAllChild();
-                children.forEach(c => {
-                    c._next = null;
-                    c._prev = null;
-                });
-                children.forEach(c => {
-                    graphic.appendChild(c);
-                });
-            }
-            else if (is3d) {
-                const children = graphic.getChildren();
-                const zChildren = children.map(g => {
-                    const face3d = g.findFace();
-                    const vertices = face3d.vertices;
-                    const viewdVerticesZ = vertices.map(v => {
-                        var _a;
-                        return context.view(v[0], v[1], (_a = v[2] + g.attribute.z) !== null && _a !== void 0 ? _a : 0)[2];
-                    });
-                    const ave_z = viewdVerticesZ.reduce((a, b) => a + b, 0);
-                    return {
-                        ave_z,
-                        g
-                    };
-                });
-                zChildren.sort((a, b) => b.ave_z - a.ave_z);
-                graphic.removeAllChild();
-                zChildren.forEach(i => {
-                    i.g._next = null;
-                    i.g._prev = null;
-                });
-                graphic.update();
-                zChildren.forEach(i => {
-                    graphic.add(i.g);
-                });
-                drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix, true);
-                graphic.removeAllChild();
-                children.forEach(g => {
-                    g._next = null;
-                    g._prev = null;
-                });
-                graphic.update();
-                children.forEach(g => {
-                    graphic.add(g);
-                });
-            }
-            else {
-                drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix);
-            }
+            draw3dItem(context, graphic, (isPie, is3d) => {
+                return drawContribution.renderGroup(graphic, drawContext, graphic.parent.globalTransMatrix, !isPie && is3d);
+            }, drawContext);
         }
         else {
             drawContribution.renderItem(graphic, drawContext);
@@ -19083,99 +19101,9 @@ let Canvas3DPickItemInterceptor = class Canvas3DPickItemInterceptor {
         this.initCanvasCtx(context);
         context.camera = stage.camera;
         if (graphic.isContainer) {
-            let isPie = false;
-            let is3d = false;
-            graphic.forEachChildren((c) => {
-                isPie = c.numberType === ARC3D_NUMBER_TYPE;
-                return !isPie;
-            });
-            graphic.forEachChildren((c) => {
-                is3d = !!c.findFace;
-                return !is3d;
-            });
-            let result;
-            if (isPie) {
-                const children = graphic.getChildren();
-                const sortedChildren = [...children];
-                sortedChildren.sort((a, b) => {
-                    var _a, _b, _c, _d;
-                    let angle1 = ((_b = (_a = a.attribute.startAngle) !== null && _a !== void 0 ? _a : 0 + a.attribute.endAngle) !== null && _b !== void 0 ? _b : 0) / 2;
-                    let angle2 = ((_d = (_c = b.attribute.startAngle) !== null && _c !== void 0 ? _c : 0 + b.attribute.endAngle) !== null && _d !== void 0 ? _d : 0) / 2;
-                    while (angle1 < 0) {
-                        angle1 += pi2;
-                    }
-                    while (angle2 < 0) {
-                        angle2 += pi2;
-                    }
-                    return angle2 - angle1;
-                });
-                sortedChildren.forEach(c => {
-                    c._next = null;
-                    c._prev = null;
-                });
-                graphic.removeAllChild();
-                graphic.update();
-                sortedChildren.forEach(c => {
-                    graphic.appendChild(c);
-                });
-                pickParams.hack_pieFace = 'outside';
-                result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams);
-                if (!result.graphic) {
-                    pickParams.hack_pieFace = 'inside';
-                    result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams);
-                }
-                if (!result.graphic) {
-                    pickParams.hack_pieFace = 'top';
-                    result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams);
-                }
-                graphic.removeAllChild();
-                children.forEach(c => {
-                    c._next = null;
-                    c._prev = null;
-                });
-                children.forEach(c => {
-                    graphic.appendChild(c);
-                });
-            }
-            else if (is3d) {
-                const children = graphic.getChildren();
-                const zChildren = children.map(g => {
-                    const face3d = g.findFace();
-                    const vertices = face3d.vertices;
-                    const viewdVerticesZ = vertices.map(v => {
-                        var _a;
-                        return context.view(v[0], v[1], (_a = v[2] + g.attribute.z) !== null && _a !== void 0 ? _a : 0)[2];
-                    });
-                    const ave_z = viewdVerticesZ.reduce((a, b) => a + b, 0);
-                    return {
-                        ave_z,
-                        g
-                    };
-                });
-                zChildren.sort((a, b) => b.ave_z - a.ave_z);
-                graphic.removeAllChild();
-                zChildren.forEach(i => {
-                    i.g._next = null;
-                    i.g._prev = null;
-                });
-                graphic.update();
-                zChildren.forEach(i => {
-                    graphic.add(i.g);
-                });
-                result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams);
-                graphic.removeAllChild();
-                children.forEach(g => {
-                    g._next = null;
-                    g._prev = null;
-                });
-                graphic.update();
-                children.forEach(g => {
-                    graphic.add(g);
-                });
-            }
-            else {
-                result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams);
-            }
+            const result = draw3dItem(context, graphic, () => {
+                return pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams);
+            }, pickParams);
             context.camera = null;
             pickParams.in3dInterceptor = false;
             context.restore();
@@ -19537,9 +19465,23 @@ function load$1(container) {
     container.load(layerHandlerModules);
 }
 
-function foreach(graphic, defaultZIndex, cb, reverse = false, sort3d = false) {
+function parseChildMap(graphic, defaultZIndex, reverse) {
     const childMap = {};
     const zIdxArray = [];
+    graphic.forEachChildren((item) => {
+        const { zIndex = defaultZIndex } = item.attribute;
+        if (childMap[zIndex]) {
+            childMap[zIndex].push(item);
+        }
+        else {
+            childMap[zIndex] = [item];
+            zIdxArray.push(zIndex);
+        }
+    }, reverse);
+    zIdxArray.sort((a, b) => (reverse ? b - a : a - b));
+    return { childMap, zIdxArray };
+}
+function foreach(graphic, defaultZIndex, cb, reverse = false, sort3d = false) {
     let needSort = false;
     if (sort3d) {
         needSort = true;
@@ -19559,17 +19501,7 @@ function foreach(graphic, defaultZIndex, cb, reverse = false, sort3d = false) {
         }, reverse);
     }
     if (needSort) {
-        graphic.forEachChildren((item) => {
-            const { zIndex = defaultZIndex } = item.attribute;
-            if (childMap[zIndex]) {
-                childMap[zIndex].push(item);
-            }
-            else {
-                childMap[zIndex] = [item];
-                zIdxArray.push(zIndex);
-            }
-        }, reverse);
-        zIdxArray.sort((a, b) => (reverse ? b - a : a - b));
+        const { childMap, zIdxArray } = parseChildMap(graphic, defaultZIndex, reverse);
         let skip = false;
         for (let i = 0; i < zIdxArray.length; i++) {
             if (skip) {
@@ -19601,8 +19533,6 @@ function foreachAsync(graphic, defaultZIndex, cb, reverse = false) {
     });
 }
 function findNextGraphic(graphic, id, defaultZIndex, reverse = false) {
-    const childMap = {};
-    const zIdxArray = [];
     let needSort = false;
     let lastZIndex;
     graphic.forEachChildren((item, i) => {
@@ -19617,17 +19547,7 @@ function findNextGraphic(graphic, id, defaultZIndex, reverse = false) {
     let result = null;
     let next = false;
     if (needSort) {
-        graphic.forEachChildren((item) => {
-            const { zIndex = defaultZIndex } = item.attribute;
-            if (childMap[zIndex]) {
-                childMap[zIndex].push(item);
-            }
-            else {
-                childMap[zIndex] = [item];
-                zIdxArray.push(zIndex);
-            }
-        }, reverse);
-        zIdxArray.sort((a, b) => (reverse ? b - a : a - b));
+        const { childMap, zIdxArray } = parseChildMap(graphic, defaultZIndex, reverse);
         let skip = false;
         for (let i = 0; i < zIdxArray.length; i++) {
             if (skip) {
@@ -22055,19 +21975,7 @@ class CustomSymbolClass {
         return false;
     }
     draw(ctx, size, x, y, z, cb) {
-        if (this.isSvg) {
-            if (!this.svgCache) {
-                return false;
-            }
-            this.svgCache.forEach(item => {
-                ctx.beginPath();
-                renderCommandList(item.path.commandList, ctx, x, y, size, size);
-                cb && cb(item.path, item.attribute);
-            });
-            return false;
-        }
-        renderCommandList(this.path.commandList, ctx, x, y, size, size);
-        return false;
+        return this.drawOffset(ctx, size, x, y, 0, z, cb);
     }
     bounds(size, bounds) {
         if (this.isSvg) {
@@ -23712,10 +23620,11 @@ class RichText extends Graphic {
             fillOpacity,
             strokeOpacity }, config);
     }
-    doUpdateFrameCache() {
+    doUpdateFrameCache(tc) {
         var _a;
-        const { textConfig = [], maxWidth, maxHeight, width, height, ellipsis, wordBreak, verticalDirection, textAlign, textBaseline, layoutDirection, singleLine, disableAutoWrapLine } = this.attribute;
+        const { textConfig: _tc = [], maxWidth, maxHeight, width, height, ellipsis, wordBreak, verticalDirection, textAlign, textBaseline, layoutDirection, singleLine, disableAutoWrapLine } = this.attribute;
         const paragraphs = [];
+        const textConfig = tc !== null && tc !== void 0 ? tc : _tc;
         for (let i = 0; i < textConfig.length; i++) {
             if ('image' in textConfig[i]) {
                 const config = this.combinedStyleToCharacter(textConfig[i]);
@@ -25640,6 +25549,9 @@ class Stage extends Group {
         throw new Error('暂不支持');
     }
     createLayer(canvasId, layerMode) {
+        if (this.releaseStatus === 'released') {
+            return;
+        }
         const layer = this.layerService.createLayer(this, {
             main: false,
             layerMode,
@@ -25660,6 +25572,9 @@ class Stage extends Group {
         return this.removeChild(this.findChildByUid(ILayerId));
     }
     tryInitInteractiveLayer() {
+        if (this.releaseStatus === 'released') {
+            return;
+        }
         if (this.supportInteractiveLayer && !this.interactiveLayer) {
             this.interactiveLayer = this.createLayer();
             this.interactiveLayer.name = '_builtin_interactive';
@@ -25671,6 +25586,9 @@ class Stage extends Group {
         this.window.clearViewBox(color);
     }
     render(layers, params) {
+        if (this.releaseStatus === 'released') {
+            return;
+        }
         this.ticker.start();
         this.timeline.resume();
         const state = this.state;
@@ -25718,6 +25636,9 @@ class Stage extends Group {
         }
     }
     _doRenderInThisFrame() {
+        if (this.releaseStatus === 'released') {
+            return;
+        }
         this.timeline.resume();
         this.ticker.start();
         const state = this.state;
@@ -25773,6 +25694,9 @@ class Stage extends Group {
         rerender && this.render();
     }
     resize(w, h, rerender = true) {
+        if (this.releaseStatus === 'released') {
+            return;
+        }
         if (!this.window.hasSubView()) {
             this.viewBox.setValue(this.viewBox.x1, this.viewBox.y1, this.viewBox.x1 + w, this.viewBox.y1 + h);
         }
@@ -25784,6 +25708,9 @@ class Stage extends Group {
         rerender && this.render();
     }
     resizeView(w, h, rerender = true) {
+        if (this.releaseStatus === 'released') {
+            return;
+        }
         this.viewBox.setValue(this.viewBox.x1, this.viewBox.y1, this.viewBox.x1 + w, this.viewBox.y1 + h);
         this.forEachChildren(c => {
             c.resizeView(w, h);
@@ -25823,6 +25750,9 @@ class Stage extends Group {
         throw new Error('暂不支持');
     }
     pick(x, y) {
+        if (this.releaseStatus === 'released') {
+            return;
+        }
         if (!this.pickerService) {
             this.pickerService = container.get(PickerService);
         }
@@ -25859,6 +25789,9 @@ class Stage extends Group {
         return;
     }
     dirty(b, matrix) {
+        if (this.releaseStatus === 'released') {
+            return;
+        }
         if (matrix) {
             b.transformWithMatrix(matrix);
         }
@@ -25872,6 +25805,9 @@ class Stage extends Group {
         return layer[0];
     }
     renderTo(window) {
+        if (this.releaseStatus === 'released') {
+            return;
+        }
         this.forEachChildren((layer, i) => {
             layer.drawTo(window, {
                 renderService: this.renderService,
@@ -25884,6 +25820,9 @@ class Stage extends Group {
         });
     }
     renderToNewWindow(fullImage = true, viewBox) {
+        if (this.releaseStatus === 'released') {
+            return;
+        }
         const window = container.get(VWindow);
         const x1 = viewBox ? -viewBox.x1 : 0;
         const y1 = viewBox ? -viewBox.y1 : 0;
@@ -25917,6 +25856,9 @@ class Stage extends Group {
         return window;
     }
     toCanvas(fullImage = true, viewBox) {
+        if (this.releaseStatus === 'released') {
+            return;
+        }
         const window = this.renderToNewWindow(fullImage, viewBox);
         const c = window.getNativeHandler();
         if (c.nativeCanvas) {
@@ -26515,177 +26457,14 @@ const registerDirectionalLight = () => {
     Factory.registerPlugin('DirectionalLight', DirectionalLight);
 };
 
-function lookAt(out, eye, center, up) {
-    let x0;
-    let x1;
-    let x2;
-    let y0;
-    let y1;
-    let y2;
-    let z0;
-    let z1;
-    let z2;
-    let len;
-    const eyex = eye[0];
-    const eyey = eye[1];
-    const eyez = eye[2];
-    const upx = up[0];
-    const upy = up[1];
-    const upz = up[2];
-    const centerx = center[0];
-    const centery = center[1];
-    const centerz = center[2];
-    if (Math.abs(eyex - centerx) < epsilon && Math.abs(eyey - centery) < epsilon && Math.abs(eyez - centerz) < epsilon) {
-        return DefaultMat4Allocate.identity(out);
+class OrthoCamera {
+    set params(params) {
+        this._params = Object.assign({}, params);
+        this._projectionMatrixCached = this.forceGetProjectionMatrix();
+        this._viewMatrixCached = this.forceGetViewMatrix();
     }
-    z0 = eyex - centerx;
-    z1 = eyey - centery;
-    z2 = eyez - centerz;
-    len = 1 / Math.hypot(z0, z1, z2);
-    z0 *= len;
-    z1 *= len;
-    z2 *= len;
-    x0 = upy * z2 - upz * z1;
-    x1 = upz * z0 - upx * z2;
-    x2 = upx * z1 - upy * z0;
-    len = Math.hypot(x0, x1, x2);
-    if (!len) {
-        x0 = 0;
-        x1 = 0;
-        x2 = 0;
-    }
-    else {
-        len = 1 / len;
-        x0 *= len;
-        x1 *= len;
-        x2 *= len;
-    }
-    y0 = z1 * x2 - z2 * x1;
-    y1 = z2 * x0 - z0 * x2;
-    y2 = z0 * x1 - z1 * x0;
-    len = Math.hypot(y0, y1, y2);
-    if (!len) {
-        y0 = 0;
-        y1 = 0;
-        y2 = 0;
-    }
-    else {
-        len = 1 / len;
-        y0 *= len;
-        y1 *= len;
-        y2 *= len;
-    }
-    out[0] = x0;
-    out[1] = y0;
-    out[2] = z0;
-    out[3] = 0;
-    out[4] = x1;
-    out[5] = y1;
-    out[6] = z1;
-    out[7] = 0;
-    out[8] = x2;
-    out[9] = y2;
-    out[10] = z2;
-    out[11] = 0;
-    out[12] = -(x0 * eyex + x1 * eyey + x2 * eyez);
-    out[13] = -(y0 * eyex + y1 * eyey + y2 * eyez);
-    out[14] = -(z0 * eyex + z1 * eyey + z2 * eyez);
-    out[15] = 1;
-    return out;
-}
-function ortho(out, left, right, bottom, top, near, far) {
-    const lr = 1 / (left - right);
-    const bt = 1 / (bottom - top);
-    const nf = 1 / (near - far);
-    out[0] = -2 * lr;
-    out[1] = 0;
-    out[2] = 0;
-    out[3] = 0;
-    out[4] = 0;
-    out[5] = -2 * bt;
-    out[6] = 0;
-    out[7] = 0;
-    out[8] = 0;
-    out[9] = 0;
-    out[10] = 2 * nf;
-    out[11] = 0;
-    out[12] = (left + right) * lr;
-    out[13] = (top + bottom) * bt;
-    out[14] = (far + near) * nf;
-    out[15] = 1;
-    return out;
-}
-function multiply(out, a, b) {
-    const a00 = a[0];
-    const a01 = a[1];
-    const a02 = a[2];
-    const a03 = a[3];
-    const a10 = a[4];
-    const a11 = a[5];
-    const a12 = a[6];
-    const a13 = a[7];
-    const a20 = a[8];
-    const a21 = a[9];
-    const a22 = a[10];
-    const a23 = a[11];
-    const a30 = a[12];
-    const a31 = a[13];
-    const a32 = a[14];
-    const a33 = a[15];
-    let b0 = b[0];
-    let b1 = b[1];
-    let b2 = b[2];
-    let b3 = b[3];
-    out[0] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
-    out[1] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
-    out[2] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
-    out[3] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
-    b0 = b[4];
-    b1 = b[5];
-    b2 = b[6];
-    b3 = b[7];
-    out[4] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
-    out[5] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
-    out[6] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
-    out[7] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
-    b0 = b[8];
-    b1 = b[9];
-    b2 = b[10];
-    b3 = b[11];
-    out[8] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
-    out[9] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
-    out[10] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
-    out[11] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
-    b0 = b[12];
-    b1 = b[13];
-    b2 = b[14];
-    b3 = b[15];
-    out[12] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
-    out[13] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
-    out[14] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
-    out[15] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
-    return out;
-}
-function transformMat4(out, a, m) {
-    const x = a[0];
-    const y = a[1];
-    const z = a[2];
-    let w = m[3] * x + m[7] * y + m[11] * z + m[15];
-    w = w || 1.0;
-    out[0] = (m[0] * x + m[4] * y + m[8] * z + m[12]) / w;
-    out[1] = (m[1] * x + m[5] * y + m[9] * z + m[13]) / w;
-    out[2] = (m[2] * x + m[6] * y + m[10] * z + m[14]) / w;
-    return out;
-}
-
-class OrthoCamera {
-    set params(params) {
-        this._params = Object.assign({}, params);
-        this._projectionMatrixCached = this.forceGetProjectionMatrix();
-        this._viewMatrixCached = this.forceGetViewMatrix();
-    }
-    get params() {
-        return Object.assign({}, this._params);
+    get params() {
+        return Object.assign({}, this._params);
     }
     constructor(params) {
         this.params = params;
@@ -26705,7 +26484,7 @@ class OrthoCamera {
         if (!this._vp) {
             this._vp = mat4Allocate.allocate();
         }
-        this._vp = multiply(this._vp, this.getProjectionMatrix(), this.getViewMatrix());
+        this._vp = multiplyMat4Mat4(this._vp, this.getProjectionMatrix(), this.getViewMatrix());
         return this._viewMatrixCached;
     }
     getProjectionMatrix() {
@@ -26723,7 +26502,7 @@ class OrthoCamera {
         if (!this._vp) {
             this._vp = mat4Allocate.allocate();
         }
-        this._vp = multiply(this._vp, this.getProjectionMatrix(), this.getViewMatrix());
+        this._vp = multiplyMat4Mat4(this._vp, this.getProjectionMatrix(), this.getViewMatrix());
         return this._projectionMatrixCached;
     }
     getField() {
@@ -27117,6 +26896,594 @@ function flatten_simplify(points, tolerance, highestQuality) {
     return points;
 }
 
+function findCursorIndexIgnoreLinebreak(textConfig, cursorIndex) {
+    let index = 0;
+    for (index = 0; index < textConfig.length; index++) {
+        const c = textConfig[index];
+        if (!(c.text && c.text === '\n')) {
+            cursorIndex--;
+        }
+        if (cursorIndex < 0) {
+            break;
+        }
+    }
+    return index;
+}
+class EditModule {
+    constructor(container) {
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Delete' || e.key === 'Backspace') {
+                this.handleInput({ data: null, type: 'Backspace' });
+            }
+        };
+        this.handleCompositionStart = () => {
+            const { textConfig = [] } = this.currRt.attribute;
+            const cursorIndex = findCursorIndexIgnoreLinebreak(textConfig, this.cursorIndex);
+            const lastConfig = textConfig[cursorIndex];
+            textConfig.splice(cursorIndex + 1, 0, Object.assign(Object.assign({}, lastConfig), { text: '' }));
+            this.isComposing = true;
+        };
+        this.handleCompositionEnd = () => {
+            this.isComposing = false;
+            const { textConfig = [] } = this.currRt.attribute;
+            const curIdx = findCursorIndexIgnoreLinebreak(textConfig, this.cursorIndex + 1);
+            const lastConfig = textConfig[curIdx];
+            textConfig.splice(curIdx, 1);
+            const text = lastConfig.text;
+            const textList = Array.from(text.toString());
+            for (let i = 0; i < textList.length; i++) {
+                textConfig.splice(i + curIdx, 0, Object.assign(Object.assign({}, lastConfig), { text: textList[i] }));
+            }
+            this.currRt.setAttributes({ textConfig });
+            this.onChangeCbList.forEach(cb => {
+                cb(text, this.isComposing, this.cursorIndex + textList.length, this.currRt, 'right');
+            });
+        };
+        this.handleInput = (ev) => {
+            if (!this.currRt) {
+                return;
+            }
+            let str = ev.data;
+            if (ev.type !== 'Backspace' && !str) {
+                str = '\n';
+            }
+            const { textConfig = [] } = this.currRt.attribute;
+            let startIdx = this.selectionStartCursorIdx;
+            let endIdx = this.cursorIndex;
+            if (startIdx > endIdx) {
+                [startIdx, endIdx] = [endIdx, startIdx];
+            }
+            this.selectionStartCursorIdx = startIdx;
+            this.cursorIndex = startIdx;
+            startIdx = findCursorIndexIgnoreLinebreak(textConfig, startIdx);
+            const delta = this.selectionStartCursorIdx - startIdx;
+            endIdx = findCursorIndexIgnoreLinebreak(textConfig, endIdx);
+            const lastConfig = textConfig[startIdx + (this.isComposing ? 1 : 0)];
+            let currConfig = lastConfig;
+            if (ev.type === 'Backspace' && !this.isComposing) {
+                if (startIdx !== endIdx) {
+                    textConfig.splice(startIdx + 1, endIdx - startIdx);
+                }
+                else {
+                    textConfig.splice(startIdx, 1);
+                    startIdx -= 1;
+                }
+            }
+            else {
+                if (startIdx !== endIdx) {
+                    textConfig.splice(startIdx + 1, endIdx - startIdx);
+                }
+                if (!this.isComposing) {
+                    currConfig = Object.assign(Object.assign({}, lastConfig), { text: '' });
+                    startIdx += 1;
+                    textConfig.splice(startIdx, 0, currConfig);
+                }
+                currConfig.text = str;
+            }
+            this.currRt.setAttributes({ textConfig });
+            if (!this.isComposing) {
+                this.onChangeCbList.forEach(cb => {
+                    cb(str, this.isComposing, startIdx + delta, this.currRt, str === '\n' ? 'left' : 'right');
+                });
+            }
+            else {
+                this.onInputCbList.forEach(cb => {
+                    cb(str, this.isComposing, startIdx + delta, this.currRt, str === '\n' ? 'left' : 'right');
+                });
+            }
+        };
+        this.container = container !== null && container !== void 0 ? container : document.body;
+        const textAreaDom = document.createElement('textarea');
+        textAreaDom.autocomplete = 'off';
+        textAreaDom.innerText = '';
+        this.applyStyle(textAreaDom);
+        this.container.append(textAreaDom);
+        this.textAreaDom = textAreaDom;
+        this.isComposing = false;
+        this.onInputCbList = [];
+        this.onChangeCbList = [];
+    }
+    onInput(cb) {
+        this.onInputCbList.push(cb);
+    }
+    onChange(cb) {
+        this.onChangeCbList.push(cb);
+    }
+    applyStyle(textAreaDom) {
+        textAreaDom.setAttribute('style', `width: 100px; height: 30px; left: 0; position: absolute; z-index: -1; outline: none; resize: none; border: none; overflow: hidden; color: transparent; user-select: none; caret-color: transparent;background-color: transparent;`);
+        textAreaDom.addEventListener('input', this.handleInput);
+        textAreaDom.addEventListener('compositionstart', this.handleCompositionStart);
+        textAreaDom.addEventListener('compositionend', this.handleCompositionEnd);
+        window.addEventListener('keydown', this.handleKeyDown);
+    }
+    moveTo(x, y, rt, cursorIndex, selectionStartCursorIdx) {
+        this.textAreaDom.style.left = `${x}px`;
+        this.textAreaDom.style.top = `${y}px`;
+        setTimeout(() => {
+            this.textAreaDom.focus();
+            this.textAreaDom.setSelectionRange(0, 0);
+        });
+        this.currRt = rt;
+        this.cursorIndex = cursorIndex;
+        this.selectionStartCursorIdx = selectionStartCursorIdx;
+    }
+    release() {
+        this.textAreaDom.removeEventListener('input', this.handleInput);
+        this.textAreaDom.removeEventListener('compositionstart', this.handleCompositionStart);
+        this.textAreaDom.removeEventListener('compositionend', this.handleCompositionEnd);
+        window.removeEventListener('keydown', this.handleKeyDown);
+    }
+}
+
+class Selection {
+    constructor(cacheSelectionStartCursorIdx, cacheCurCursorIdx, selectionStartCursorIdx, curCursorIdx, rt) {
+        this.curCursorIdx = curCursorIdx;
+        this.selectionStartCursorIdx = selectionStartCursorIdx;
+        this.cacheCurCursorIdx = cacheCurCursorIdx;
+        this.cacheSelectionStartCursorIdx = cacheSelectionStartCursorIdx;
+        this.rt = rt;
+    }
+    hasFormat(key) {
+        return this.getFormat(key) != null;
+    }
+    getFormat(key) {
+        if (!this.rt) {
+            return null;
+        }
+        const config = this.rt.attribute.textConfig;
+        const val = config[this.selectionStartCursorIdx + 1][key];
+        if (val == null) {
+            return null;
+        }
+        for (let i = this.selectionStartCursorIdx + 2; i <= this.curCursorIdx; i++) {
+            const item = config[i];
+            if (val === item[key]) {
+                continue;
+            }
+            return null;
+        }
+        return val;
+    }
+    getAllFormat(key) {
+        if (!this.rt) {
+            return [];
+        }
+        const config = this.rt.attribute.textConfig;
+        const val = config[this.selectionStartCursorIdx + 1][key];
+        const set = new Set();
+        set.add(val);
+        for (let i = this.selectionStartCursorIdx + 2; i <= this.curCursorIdx; i++) {
+            const item = config[i];
+            set.add(item[key]);
+        }
+        const list = Array.from(set.values());
+        return list;
+    }
+}
+const FORMAT_TEXT_COMMAND = 'FORMAT_TEXT_COMMAND';
+const FORMAT_ELEMENT_COMMAND = 'FORMAT_ELEMENT_COMMAND';
+class RichTextEditPlugin {
+    constructor() {
+        this.name = 'RichTextEditPlugin';
+        this.activeEvent = 'onRegister';
+        this._uid = Generator.GenAutoIncrementId();
+        this.key = this.name + this._uid;
+        this.editing = false;
+        this.pointerDown = false;
+        this.handleInput = (text, isComposing, cursorIdx, rt, orient) => {
+            const p = this.getPointByColumnIdx(cursorIdx, rt, orient);
+            this.hideSelection();
+            this.setCursor(p.x, p.y1, p.y2);
+            this.updateCbs.forEach(cb => cb('input', this));
+        };
+        this.handleChange = (text, isComposing, cursorIdx, rt, orient) => {
+            const p = this.getPointByColumnIdx(cursorIdx, rt, orient);
+            this.curCursorIdx = cursorIdx;
+            this.selectionStartCursorIdx = cursorIdx;
+            this.setCursorAndTextArea(p.x, p.y1, p.y2, rt);
+            this.hideSelection();
+            this.updateCbs.forEach(cb => cb('change', this));
+        };
+        this.handleMove = (e) => {
+            if (!this.isRichtext(e)) {
+                return;
+            }
+            this.currRt = e.target;
+            this.handleEnter(e);
+            e.target.once('pointerleave', this.handleLeave);
+            this.showSelection(e);
+        };
+        this.handlePointerDown = (e) => {
+            if (this.editing) {
+                this.onFocus(e);
+            }
+            else {
+                this.deFocus(e);
+            }
+            this.applyUpdate();
+            this.pointerDown = true;
+            this.updateCbs.forEach(cb => cb(this.editing ? 'onfocus' : 'defocus', this));
+        };
+        this.handlePointerUp = (e) => {
+            this.pointerDown = false;
+        };
+        this.handleEnter = (e) => {
+            this.editing = true;
+            this.pluginService.stage.setCursor('text');
+        };
+        this.handleLeave = (e) => {
+            this.editing = false;
+            this.pluginService.stage.setCursor('default');
+        };
+        this.commandCbs = new Map();
+        this.commandCbs.set(FORMAT_TEXT_COMMAND, [this.formatTextCommandCb]);
+        this.updateCbs = [];
+    }
+    getSelection() {
+        if (this.selectionStartCursorIdx &&
+            this.curCursorIdx &&
+            this.selectionStartCursorIdx !== this.curCursorIdx &&
+            this.currRt) {
+            return new Selection(this.selectionStartCursorIdx, this.curCursorIdx, findCursorIndexIgnoreLinebreak(this.currRt.attribute.textConfig, this.selectionStartCursorIdx), findCursorIndexIgnoreLinebreak(this.currRt.attribute.textConfig, this.curCursorIdx), this.currRt);
+        }
+        return null;
+    }
+    formatTextCommandCb(payload, p) {
+        const rt = p.currRt;
+        if (!rt) {
+            return;
+        }
+        const selectionData = p.getSelection();
+        if (!selectionData) {
+            return;
+        }
+        const { selectionStartCursorIdx, curCursorIdx } = selectionData;
+        const config = rt.attribute.textConfig.slice(selectionStartCursorIdx + 1, curCursorIdx + 1);
+        if (payload === 'bold') {
+            config.forEach((item) => (item.fontWeight = 'bold'));
+        }
+        else if (payload === 'italic') {
+            config.forEach((item) => (item.fontStyle = 'italic'));
+        }
+        else if (payload === 'underline') {
+            config.forEach((item) => (item.underline = true));
+        }
+        else if (payload === 'lineThrough') {
+            config.forEach((item) => (item.lineThrough = true));
+        }
+        else if (isObject(payload)) {
+            config.forEach((item) => merge(item, payload));
+        }
+        rt.setAttributes(rt.attribute);
+    }
+    dispatchCommand(command, payload) {
+        const cbs = this.commandCbs.get(command);
+        cbs && cbs.forEach(cb => cb(payload, this));
+        this.updateCbs.forEach(cb => cb('dispatch', this));
+    }
+    registerCommand(command, cb) {
+        const cbs = this.commandCbs.get(command) || [];
+        cbs.push(cb);
+    }
+    registerUpdateListener(cb) {
+        const cbs = this.updateCbs || [];
+        cbs.push(cb);
+    }
+    activate(context) {
+        this.pluginService = context;
+        this.editModule = new EditModule();
+        context.stage.on('pointermove', this.handleMove);
+        context.stage.on('pointerdown', this.handlePointerDown);
+        context.stage.on('pointerup', this.handlePointerUp);
+        context.stage.on('pointerleave', this.handlePointerUp);
+        this.editModule.onInput(this.handleInput);
+        this.editModule.onChange(this.handleChange);
+    }
+    showSelection(e) {
+        const cache = e.target.getFrameCache();
+        if (!(cache && this.editBg)) {
+            return;
+        }
+        if (this.pointerDown) {
+            let p0 = this.lastPoint;
+            let p1 = this.getEventPosition(e);
+            let line1Info = this.getLineByPoint(cache, p1);
+            const column1 = this.getColumnByLinePoint(line1Info, p1);
+            const y1 = line1Info.top;
+            const y2 = line1Info.top + line1Info.height;
+            let x = column1.left + column1.width;
+            let cursorIndex = this.getColumnIndex(cache, column1);
+            if (p1.x < column1.left + column1.width / 2) {
+                x = column1.left;
+                cursorIndex -= 1;
+            }
+            p1.x = x;
+            p1.y = (y1 + y2) / 2;
+            let line0Info = this.getLineByPoint(cache, p0);
+            if (p0.y > p1.y || (p0.y === p1.y && p0.x > p1.x)) {
+                [p0, p1] = [p1, p0];
+                [line1Info, line0Info] = [line0Info, line1Info];
+            }
+            this.editBg.removeAllChild();
+            if (line0Info === line1Info) {
+                const column0 = this.getColumnByLinePoint(line0Info, p0);
+                this.editBg.setAttributes({
+                    x: p0.x,
+                    y: line0Info.top,
+                    width: p1.x - p0.x,
+                    height: column0.height,
+                    fill: '#336df4',
+                    fillOpacity: 0.2
+                });
+            }
+            else {
+                this.editBg.setAttributes({ x: 0, y: line0Info.top, width: 0, height: 0 });
+                const startIdx = cache.lines.findIndex(item => item === line0Info);
+                const endIdx = cache.lines.findIndex(item => item === line1Info);
+                let y = 0;
+                for (let i = startIdx; i <= endIdx; i++) {
+                    const line = cache.lines[i];
+                    if (i === startIdx) {
+                        const p = line.paragraphs[line.paragraphs.length - 1];
+                        this.editBg.add(createRect({
+                            x: p0.x,
+                            y,
+                            width: p.left + p.width - p0.x,
+                            height: line.height,
+                            fill: '#336df4',
+                            fillOpacity: 0.2
+                        }));
+                    }
+                    else if (i === endIdx) {
+                        const p = line.paragraphs[0];
+                        this.editBg.add(createRect({
+                            x: p.left,
+                            y,
+                            width: p1.x - p.left,
+                            height: line.height,
+                            fill: '#336df4',
+                            fillOpacity: 0.2
+                        }));
+                    }
+                    else {
+                        const p0 = line.paragraphs[0];
+                        const p1 = line.paragraphs[line.paragraphs.length - 1];
+                        this.editBg.add(createRect({
+                            x: p0.left,
+                            y,
+                            width: p1.left + p1.width - p0.left,
+                            height: line.height,
+                            fill: '#336df4',
+                            fillOpacity: 0.2
+                        }));
+                    }
+                    y += line.height;
+                }
+            }
+            this.curCursorIdx = cursorIndex;
+            this.setCursorAndTextArea(x, y1 + 2, y2 - 2, e.target);
+            this.applyUpdate();
+            this.updateCbs.forEach(cb => cb('selection', this));
+        }
+    }
+    hideSelection() {
+        if (this.editBg) {
+            this.editBg.removeAllChild();
+            this.editBg.setAttributes({ fill: 'transparent' });
+        }
+    }
+    isRichtext(e) {
+        return !!(e.target && e.target.type === 'richtext' && e.target.attribute.editable);
+    }
+    getEventPosition(e) {
+        const p = this.pluginService.stage.eventPointTransform(e);
+        const p1 = { x: 0, y: 0 };
+        e.target.globalTransMatrix.transformPoint(p, p1);
+        return p1;
+    }
+    getLineByPoint(cache, p1) {
+        let lineInfo = cache.lines[0];
+        for (let i = 0; i < cache.lines.length; i++) {
+            if (lineInfo.top <= p1.y && lineInfo.top + lineInfo.height >= p1.y) {
+                break;
+            }
+            lineInfo = cache.lines[i + 1];
+        }
+        return lineInfo;
+    }
+    getColumnByLinePoint(lineInfo, p1) {
+        let columnInfo = lineInfo.paragraphs[0];
+        for (let i = 0; i < lineInfo.paragraphs.length; i++) {
+            if (columnInfo.left <= p1.x && columnInfo.left + columnInfo.width >= p1.x) {
+                break;
+            }
+            columnInfo = lineInfo.paragraphs[i];
+        }
+        return columnInfo;
+    }
+    onFocus(e) {
+        this.deFocus(e);
+        const target = e.target;
+        this.tryUpdateRichtext(target);
+        const shadowRoot = target.attachShadow();
+        shadowRoot.setAttributes({ shadowRootIdx: -1 });
+        const cache = target.getFrameCache();
+        if (!cache) {
+            return;
+        }
+        if (!this.editLine) {
+            const line = createLine({ x: 0, y: 0, lineWidth: 1, stroke: 'black' });
+            line
+                .animate()
+                .to({ opacity: 1 }, 10, 'linear')
+                .wait(700)
+                .to({ opacity: 0 }, 10, 'linear')
+                .wait(700)
+                .loop(Infinity);
+            this.editLine = line;
+            const g = createGroup({ x: 0, y: 0, width: 0, height: 0 });
+            this.editBg = g;
+            shadowRoot.add(this.editLine);
+            shadowRoot.add(this.editBg);
+        }
+        const p1 = this.getEventPosition(e);
+        const lineInfo = this.getLineByPoint(cache, p1);
+        if (lineInfo) {
+            const columnInfo = this.getColumnByLinePoint(lineInfo, p1);
+            if (!columnInfo) {
+                return;
+            }
+            let y1 = lineInfo.top;
+            let y2 = lineInfo.top + lineInfo.height;
+            let x = columnInfo.left + columnInfo.width;
+            y1 += 2;
+            y2 -= 2;
+            let cursorIndex = this.getColumnIndex(cache, columnInfo);
+            if (p1.x < columnInfo.left + columnInfo.width / 2) {
+                x = columnInfo.left;
+                cursorIndex -= 1;
+            }
+            this.lastPoint = { x, y: (y1 + y2) / 2 };
+            this.curCursorIdx = cursorIndex;
+            this.selectionStartCursorIdx = cursorIndex;
+            this.setCursorAndTextArea(x, y1, y2, target);
+        }
+    }
+    getPointByColumnIdx(idx, rt, orient) {
+        const cache = rt.getFrameCache();
+        const { lineInfo, columnInfo } = this.getColumnByIndex(cache, idx);
+        let y1 = lineInfo.top;
+        let y2 = lineInfo.top + lineInfo.height;
+        const x = columnInfo.left + (orient === 'left' ? 0 : columnInfo.width);
+        y1 += 2;
+        y2 -= 2;
+        return { x, y1, y2 };
+    }
+    getColumnIndex(cache, cInfo) {
+        let inputIndex = -1;
+        for (let i = 0; i < cache.lines.length; i++) {
+            const line = cache.lines[i];
+            for (let j = 0; j < line.paragraphs.length; j++) {
+                inputIndex++;
+                if (cInfo === line.paragraphs[j]) {
+                    return inputIndex;
+                }
+            }
+        }
+        return -1;
+    }
+    getColumnByIndex(cache, index) {
+        let inputIndex = -1;
+        for (let i = 0; i < cache.lines.length; i++) {
+            const lineInfo = cache.lines[i];
+            for (let j = 0; j < lineInfo.paragraphs.length; j++) {
+                const columnInfo = lineInfo.paragraphs[j];
+                inputIndex++;
+                if (inputIndex === index) {
+                    return {
+                        lineInfo,
+                        columnInfo
+                    };
+                }
+            }
+        }
+        return null;
+    }
+    setCursorAndTextArea(x, y1, y2, rt) {
+        this.editLine.setAttributes({
+            points: [
+                { x, y: y1 },
+                { x, y: y2 }
+            ]
+        });
+        const out = { x: 0, y: 0 };
+        rt.globalTransMatrix.getInverse().transformPoint({ x, y: y1 }, out);
+        const { left, top } = this.pluginService.stage.window.getBoundingClientRect();
+        out.x += left;
+        out.y += top;
+        this.editModule.moveTo(out.x, out.y, rt, this.curCursorIdx, this.selectionStartCursorIdx);
+    }
+    setCursor(x, y1, y2) {
+        this.editLine.setAttributes({
+            points: [
+                { x, y: y1 },
+                { x, y: y2 }
+            ]
+        });
+    }
+    applyUpdate() {
+        this.pluginService.stage.renderNextFrame();
+    }
+    deFocus(e) {
+        const target = e.target;
+        target.detachShadow();
+        this.currRt = null;
+        if (this.editLine) {
+            this.editLine.parent.removeChild(this.editLine);
+            this.editLine.release();
+            this.editLine = null;
+            this.editBg.parent.removeChild(this.editBg);
+            this.editBg.release();
+            this.editBg = null;
+        }
+    }
+    splitText(text) {
+        return Array.from(text);
+    }
+    tryUpdateRichtext(richtext) {
+        const cache = richtext.getFrameCache();
+        if (!cache.lines.every(line => line.paragraphs.every(item => !(item.text && isString(item.text) && this.splitText(item.text).length > 1)))) {
+            const tc = [];
+            richtext.attribute.textConfig.forEach((item) => {
+                const textList = this.splitText(item.text.toString());
+                if (isString(item.text) && textList.length > 1) {
+                    for (let i = 0; i < textList.length; i++) {
+                        const t = textList[i];
+                        tc.push(Object.assign(Object.assign({}, item), { text: t }));
+                    }
+                }
+                else {
+                    tc.push(item);
+                }
+            });
+            richtext.setAttributes({ textConfig: tc });
+            richtext.doUpdateFrameCache(tc);
+        }
+    }
+    onSelect() {
+        return;
+    }
+    deactivate(context) {
+        context.stage.off('pointermove', this.handleMove);
+        context.stage.off('pointerdown', this.handlePointerDown);
+        context.stage.off('pointerup', this.handlePointerUp);
+        context.stage.off('pointerleave', this.handlePointerUp);
+    }
+    release() {
+        this.editModule.release();
+    }
+}
+
 class DefaultGraphicAllocate {
     constructor() {
         this.pools = [];
@@ -27567,48 +27934,7 @@ const imageModule = new ContainerModule(bind => {
     bindContributionProvider(bind, ImageRenderContribution);
 });
 
-let DefaultCanvasRect3dRender = class DefaultCanvasRect3dRender extends BaseRender {
-    constructor() {
-        super(...arguments);
-        this.type = 'rect3d';
-        this.numberType = RECT3D_NUMBER_TYPE;
-    }
-    drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb) {
-        var _a;
-        const rectAttribute = getTheme(rect, params === null || params === void 0 ? void 0 : params.theme).rect;
-        const { fill = rectAttribute.fill, stroke = rectAttribute.stroke, x1, y1, x: originX, y: originY, opacity = rectAttribute.opacity, fillOpacity = rectAttribute.fillOpacity, lineWidth = rectAttribute.lineWidth, strokeOpacity = rectAttribute.strokeOpacity, visible = rectAttribute.visible } = rect.attribute;
-        let { width, height } = rect.attribute;
-        width = (width !== null && width !== void 0 ? width : x1 - originX) || 0;
-        height = (height !== null && height !== void 0 ? height : y1 - originY) || 0;
-        const z = (_a = this.z) !== null && _a !== void 0 ? _a : 0;
-        const fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill);
-        const sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height);
-        const doFill = runFill(fill);
-        const doStroke = runStroke(stroke, lineWidth);
-        if (!(rect.valid && visible)) {
-            return;
-        }
-        if (!(doFill || doStroke)) {
-            return;
-        }
-        if (!(fVisible || sVisible || fillCb || strokeCb)) {
-            return;
-        }
-        const { light, camera } = drawContext.stage || {};
-        const face3d = rect.findFace();
-        if (fill !== false) {
-            context.setCommonStyle(rect, rect.attribute, x, y, rectAttribute);
-            let fc = fill;
-            if (typeof fc !== 'string') {
-                fc = 'black';
-            }
-            this.fill(x, y, z, face3d, fc, context, light, fillCb);
-        }
-        if (stroke !== false) {
-            context.setStrokeStyle(rect, rect.attribute, x, y, rectAttribute);
-            this.stroke(x, y, z, face3d, context);
-        }
-    }
+class Base3dRender extends BaseRender {
     stroke(x, y, z, face3d, context) {
         const vertices = face3d.vertices;
         face3d.edges.forEach(edge => {
@@ -27630,7 +27956,7 @@ let DefaultCanvasRect3dRender = class DefaultCanvasRect3dRender extends BaseRend
             context.stroke();
         });
     }
-    fill(x, y, z, face3d, fillColor, context, light, fillCb) {
+    fill(x, y, z, face3d, faces, fillColor, context, light, graphic3d, graphic3dAttribute, fillCb) {
         const rgbArray = ColorStore.Get(fillColor, ColorType.Color255);
         const vertices = face3d.vertices;
         const viewdVerticesZ = vertices.map(v => {
@@ -27638,11 +27964,14 @@ let DefaultCanvasRect3dRender = class DefaultCanvasRect3dRender extends BaseRend
         });
         const sortFace = [];
         face3d.polygons.forEach((p, i) => {
+            if (faces && !faces[i]) {
+                return;
+            }
             sortFace.push({
                 faceIdx: i,
                 polygon: p
             });
-            const { polygon, normal } = p;
+            const { polygon } = p;
             const z1 = viewdVerticesZ[polygon[0]];
             const z2 = viewdVerticesZ[polygon[1]];
             const z3 = viewdVerticesZ[polygon[2]];
@@ -27683,7 +28012,7 @@ let DefaultCanvasRect3dRender = class DefaultCanvasRect3dRender extends BaseRend
             context.lineTo(v4.x, v4.y, v4.z);
             context.closePath();
             if (fillCb) {
-                fillCb(context, null, null);
+                fillCb(context, graphic3d && graphic3d.attribute, graphic3dAttribute);
             }
             else {
                 context.fillStyle = light ? light.computeColor(normal, rgbArray) : fillColor;
@@ -27691,6 +28020,50 @@ let DefaultCanvasRect3dRender = class DefaultCanvasRect3dRender extends BaseRend
             }
         });
     }
+}
+
+let DefaultCanvasRect3dRender = 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;
+        const rectAttribute = getTheme(rect, params === null || params === void 0 ? void 0 : params.theme).rect;
+        const { fill = rectAttribute.fill, stroke = rectAttribute.stroke, x1, y1, x: originX, y: originY, opacity = rectAttribute.opacity, fillOpacity = rectAttribute.fillOpacity, lineWidth = rectAttribute.lineWidth, strokeOpacity = rectAttribute.strokeOpacity, visible = rectAttribute.visible } = rect.attribute;
+        let { width, height } = rect.attribute;
+        width = (width !== null && width !== void 0 ? width : x1 - originX) || 0;
+        height = (height !== null && height !== void 0 ? height : y1 - originY) || 0;
+        const z = (_a = this.z) !== null && _a !== void 0 ? _a : 0;
+        const fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill);
+        const sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height);
+        const doFill = runFill(fill);
+        const doStroke = runStroke(stroke, lineWidth);
+        if (!(rect.valid && visible)) {
+            return;
+        }
+        if (!(doFill || doStroke)) {
+            return;
+        }
+        if (!(fVisible || sVisible || fillCb || strokeCb)) {
+            return;
+        }
+        const { light } = drawContext.stage || {};
+        const face3d = rect.findFace();
+        if (fill !== false) {
+            context.setCommonStyle(rect, rect.attribute, x, y, rectAttribute);
+            let fc = fill;
+            if (typeof fc !== 'string') {
+                fc = 'black';
+            }
+            this.fill(x, y, z, face3d, null, fc, context, light, null, null, fillCb);
+        }
+        if (stroke !== false) {
+            context.setStrokeStyle(rect, rect.attribute, x, y, rectAttribute);
+            this.stroke(x, y, z, face3d, context);
+        }
+    }
     draw(rect, renderService, drawContext) {
         const rectAttribute = getTheme(rect).rect;
         this._draw(rect, rectAttribute, false, drawContext);
@@ -27912,7 +28285,7 @@ const arc3dModule = new ContainerModule(bind => {
     bind(GraphicRender).toService(Arc3dRender);
 });
 
-let DefaultCanvasPyramid3dRender = class DefaultCanvasPyramid3dRender extends BaseRender {
+let DefaultCanvasPyramid3dRender = class DefaultCanvasPyramid3dRender extends Base3dRender {
     constructor() {
         super(...arguments);
         this.type = 'pyramid3d';
@@ -27927,7 +28300,7 @@ let DefaultCanvasPyramid3dRender = class DefaultCanvasPyramid3dRender extends Ba
         if (!data) {
             return;
         }
-        const { light, camera } = drawContext.stage || {};
+        const { light } = drawContext.stage || {};
         const face3d = pyramid3d.findFace();
         if (fill !== false) {
             context.setCommonStyle(pyramid3d, pyramid3d.attribute, x, y, pyramidAttribute);
@@ -27935,98 +28308,13 @@ let DefaultCanvasPyramid3dRender = class DefaultCanvasPyramid3dRender extends Ba
             if (typeof fc !== 'string') {
                 fc = 'black';
             }
-            this.fill(x, y, z, face3d, face, fc, context, light, camera, pyramid3d, pyramidAttribute, fillCb);
+            this.fill(x, y, z, face3d, face, fc, context, light, pyramid3d, pyramidAttribute, fillCb);
         }
         if (stroke !== false) {
             context.setStrokeStyle(pyramid3d, pyramid3d.attribute, x, y, pyramidAttribute);
             this.stroke(x, y, z, face3d, context);
         }
     }
-    stroke(x, y, z, face3d, context) {
-        const vertices = face3d.vertices;
-        face3d.edges.forEach(p => {
-            const p1 = vertices[p[0]];
-            const p2 = vertices[p[1]];
-            const v1 = {
-                x: x + p1[0],
-                y: y + p1[1],
-                z: z + p1[2]
-            };
-            const v2 = {
-                x: x + p2[0],
-                y: y + p2[1],
-                z: z + p2[2]
-            };
-            context.beginPath();
-            context.moveTo(v1.x, v1.y, v1.z);
-            context.lineTo(v2.x, v2.y, v2.z);
-            context.stroke();
-        });
-    }
-    fill(x, y, z, face3d, faces, fillColor, context, light, camera, pyramid3d, pyramid3dAttribute, fillCb) {
-        const rgbArray = ColorStore.Get(fillColor, ColorType.Color255);
-        const vertices = face3d.vertices;
-        const viewdVerticesZ = vertices.map(v => {
-            return context.view(v[0], v[1], v[2])[2];
-        });
-        const sortFace = [];
-        face3d.polygons.forEach((p, i) => {
-            if (!faces[i]) {
-                return;
-            }
-            sortFace.push({
-                faceIdx: i,
-                polygon: p
-            });
-            const { polygon, normal } = p;
-            const z1 = viewdVerticesZ[polygon[0]];
-            const z2 = viewdVerticesZ[polygon[1]];
-            const z3 = viewdVerticesZ[polygon[2]];
-            const z4 = viewdVerticesZ[polygon[3]];
-            p.ave_z = z1 + z2 + z3 + z4;
-        });
-        sortFace.sort((a, b) => b.polygon.ave_z - a.polygon.ave_z);
-        sortFace.forEach(item => {
-            const { polygon, normal } = item.polygon;
-            const p1 = vertices[polygon[0]];
-            const p2 = vertices[polygon[1]];
-            const p3 = vertices[polygon[2]];
-            const p4 = vertices[polygon[3]];
-            const v1 = {
-                x: x + p1[0],
-                y: y + p1[1],
-                z: z + p1[2]
-            };
-            const v2 = {
-                x: x + p2[0],
-                y: y + p2[1],
-                z: z + p2[2]
-            };
-            const v3 = {
-                x: x + p3[0],
-                y: y + p3[1],
-                z: z + p3[2]
-            };
-            const v4 = {
-                x: x + p4[0],
-                y: y + p4[1],
-                z: z + p4[2]
-            };
-            context.beginPath();
-            context.moveTo(v1.x, v1.y, v1.z);
-            context.lineTo(v2.x, v2.y, v2.z);
-            context.lineTo(v3.x, v3.y, v3.z);
-            context.lineTo(v4.x, v4.y, v4.z);
-            context.closePath();
-            if (fillCb) {
-                fillCb(context, pyramid3d.attribute, pyramid3dAttribute);
-            }
-            else {
-                context.fillStyle = light ? light.computeColor(normal, rgbArray) : fillColor;
-                context.fill();
-            }
-        });
-    }
     draw(pyramid3d, renderService, drawContext) {
         const pyramid3dAttribute = getTheme(pyramid3d).polygon;
         this._draw(pyramid3d, pyramid3dAttribute, false, drawContext);
@@ -28364,7 +28652,7 @@ class HtmlAttributePlugin {
     }
 }
 const registerHtmlAttributePlugin = () => {
-    Factory.registerPlugin('ReactAttributePlugin', HtmlAttributePlugin);
+    Factory.registerPlugin('HtmlAttributePlugin', HtmlAttributePlugin);
 };
 
 class ReactAttributePlugin extends HtmlAttributePlugin {
@@ -28380,13 +28668,16 @@ class ReactAttributePlugin extends HtmlAttributePlugin {
         if (!this.htmlMap || !this.htmlMap[id]) {
             return;
         }
-        const { root, wrapContainer } = this.htmlMap[id];
+        const { root, wrapContainer, unmount } = this.htmlMap[id];
         if (root) {
             const raf = application.global.getRequestAnimationFrame();
             raf(() => {
                 root.unmount();
             });
         }
+        else if (unmount) {
+            unmount();
+        }
         wrapContainer && application.global.removeDom(wrapContainer);
         this.htmlMap[id] = null;
     }
@@ -28402,7 +28693,7 @@ class ReactAttributePlugin extends HtmlAttributePlugin {
         }
         const ReactDOM = stage.params.ReactDOM;
         const { element, container } = react;
-        if (!(element && ReactDOM && ReactDOM.createRoot)) {
+        if (!(element && ReactDOM && (ReactDOM.createRoot || ReactDOM.render))) {
             return;
         }
         const id = isNil(react.id) ? `${(_a = graphic.id) !== null && _a !== void 0 ? _a : graphic._uid}_react` : react.id;
@@ -28412,16 +28703,35 @@ class ReactAttributePlugin extends HtmlAttributePlugin {
         if (!this.htmlMap || !this.htmlMap[id]) {
             const { wrapContainer, nativeContainer } = this.getWrapContainer(stage, container);
             if (wrapContainer) {
-                const root = ReactDOM.createRoot(wrapContainer);
-                root.render(element);
                 if (!this.htmlMap) {
                     this.htmlMap = {};
                 }
-                this.htmlMap[id] = { root, wrapContainer, nativeContainer, container, renderId: this.renderId };
+                if (ReactDOM.createRoot) {
+                    const root = ReactDOM.createRoot(wrapContainer);
+                    root.render(element);
+                    this.htmlMap[id] = { root, wrapContainer, nativeContainer, container, renderId: this.renderId };
+                }
+                else {
+                    ReactDOM.render(element, wrapContainer);
+                    this.htmlMap[id] = {
+                        wrapContainer,
+                        nativeContainer,
+                        container,
+                        renderId: this.renderId,
+                        unmount: () => {
+                            ReactDOM.unmountComponentAtNode(wrapContainer);
+                        }
+                    };
+                }
             }
         }
         else {
-            this.htmlMap[id].root.render(element);
+            if (ReactDOM.createRoot) {
+                this.htmlMap[id].root.render(element);
+            }
+            else {
+                ReactDOM.render(element, this.htmlMap[id].wrapContainer);
+            }
         }
         if (!this.htmlMap || !this.htmlMap[id]) {
             return;
@@ -28435,4 +28745,4 @@ const registerReactAttributePlugin = () => {
     Factory.registerPlugin('ReactAttributePlugin', ReactAttributePlugin);
 };
 
-export { ACustomAnimate, ARC3D_NUMBER_TYPE, ARC_NUMBER_TYPE, AREA_NUMBER_TYPE, AbstractGraphicRender, Animate, AnimateGroup, AnimateGroup1, AnimateMode, AnimateStatus, AnimateStepType, Application, Arc, Arc3d, Arc3dRender, ArcRender, ArcRenderContribution, Area, AreaRender, AreaRenderContribution, AttributeAnimate, AttributeUpdateType, AutoEnablePlugins, BaseCanvas, BaseEnvContribution, BaseRender, BaseRenderContributionTime, BaseWindowHandlerContribution, Basis, BeforeRenderConstribution, BoundsContext, BoundsPicker, CIRCLE_NUMBER_TYPE, Canvas3DDrawItemInterceptor, Canvas3DPickItemInterceptor, CanvasFactory, CanvasTextLayout, CbAnimate, Circle, CircleRender, CircleRenderContribution, ClipAngleAnimate, ClipDirectionAnimate, ClipGraphicAnimate, ClipRadiusAnimate, ColorInterpolate, ColorStore, ColorType, CommonDrawItemInterceptorContribution, CommonRenderContribution, Container, ContainerModule, Context2dFactory, ContributionProvider, CurveContext, CurveTypeEnum, CustomEvent, CustomPath2D, CustomSymbolClass, DebugDrawItemInterceptorContribution, DefaultArcAllocate, DefaultArcAttribute, DefaultArcRenderContribution, DefaultAreaAllocate, DefaultAreaAttribute, DefaultAreaTextureRenderContribution, DefaultAttribute, DefaultBaseBackgroundRenderContribution, DefaultBaseInteractiveRenderContribution, DefaultBaseTextureRenderContribution, DefaultCanvasAllocate, DefaultCanvasArcRender, DefaultCanvasAreaRender, DefaultCanvasCircleRender, DefaultCanvasImageRender, DefaultCanvasLineRender, DefaultCanvasPathRender, DefaultCanvasPolygonRender, DefaultCanvasRectRender, DefaultCanvasSymbolRender, DefaultCanvasTextRender, DefaultCircleAllocate, DefaultCircleAttribute, DefaultCircleRenderContribution, DefaultConnectAttribute, DefaultDebugAttribute, DefaultFillStyle, DefaultGlobal, DefaultGlobalPickerService, DefaultGlyphAttribute, DefaultGraphicAllocate, DefaultGraphicMemoryManager, DefaultGraphicService, DefaultGraphicUtil, DefaultGroupAttribute, DefaultGroupBackgroundRenderContribution, DefaultImageAttribute, DefaultImageBackgroundRenderContribution, DefaultImageRenderContribution, DefaultLayerService, DefaultLayout, DefaultLineAllocate, DefaultLineAttribute, DefaultMat4Allocate, DefaultMatrixAllocate, DefaultMorphingAnimateConfig, DefaultPathAllocate, DefaultPathAttribute, DefaultPickService, DefaultPickStyle, DefaultPolygonAttribute, DefaultRect3dAttribute, DefaultRectAllocate, DefaultRectAttribute, DefaultRectRenderContribution, DefaultRenderService, DefaultRichTextAttribute, DefaultRichTextIconAttribute, DefaultStateAnimateConfig, DefaultStrokeStyle, DefaultStyle, DefaultSymbolAllocate, DefaultSymbolAttribute, DefaultSymbolRenderContribution, DefaultTextAllocate, DefaultTextAttribute, DefaultTextMeasureContribution, DefaultTextStyle, DefaultTicker, DefaultTimeline, DefaultTransform, DefaultTransformUtil, DefaultWindow, Direction$1 as Direction, DirectionalLight, DrawContribution, DrawItemInterceptor, DynamicLayerHandlerContribution, Edge, EmptyContext2d, EnvContribution, EventManager, EventSystem, EventTarget, Factory, FadeInPlus, FederatedEvent, FederatedMouseEvent, FederatedPointerEvent, FederatedWheelEvent, GLYPH_NUMBER_TYPE, GRAPHIC_UPDATE_TAG_KEY, GROUP_NUMBER_TYPE, Generator, GlobalPickerService, Glyph, GlyphRender, Graphic, GraphicAnimate, GraphicCreator$1 as GraphicCreator, GraphicPicker, GraphicRender, GraphicService, GraphicUtil, Group, GroupFadeIn, GroupFadeOut, GroupRender, GroupRenderContribution, GroupUpdateAABBBoundsMode, HtmlAttributePlugin, IContainPointMode, IMAGE_NUMBER_TYPE, Image, ImageRender, ImageRenderContribution, IncreaseCount, IncrementalDrawContribution, InputText, InteractiveDrawItemInterceptorContribution, InteractivePickItemInterceptorContribution, InteractiveSubRenderContribution, LINE_NUMBER_TYPE, Layer, LayerService, Line$1 as Line, LineRender, Linear, LinearClosed, ManualTickHandler, ManualTicker, Mat4Allocate, MatrixAllocate, Meteor, MonotoneX, MonotoneY, MorphingPath, MotionPath, MultiToOneMorphingPath, NOWORK_ANIMATE_ATTR, Node, OrthoCamera, PATH_NUMBER_TYPE, POLYGON_NUMBER_TYPE, PURE_STYLE_KEY, PYRAMID3D_NUMBER_TYPE, Path, PathRender, PathRenderContribution, PickItemInterceptor, PickerService, PluginService, Polygon, PolygonRender, PolygonRenderContribution, Pyramid3d, Pyramid3dRender, RAFTickHandler, RECT3D_NUMBER_TYPE, RECT_NUMBER_TYPE, RICHTEXT_NUMBER_TYPE, RafBasedSTO, ReactAttributePlugin, Rect, Rect3DRender, Rect3d, RectRender, RectRenderContribution, ReflectSegContext, RenderSelector, RenderService, ResourceLoader, RichText, RichTextRender, RotateBySphereAnimate, SVG_ATTRIBUTE_MAP, SVG_ATTRIBUTE_MAP_KEYS, SVG_PARSE_ATTRIBUTE_MAP, SVG_PARSE_ATTRIBUTE_MAP_KEYS, SYMBOL_NUMBER_TYPE, SegContext, ShadowRoot, ShadowRootDrawItemInterceptorContribution, ShadowRootPickItemInterceptorContribution, SplitRectAfterRenderContribution, SplitRectBeforeRenderContribution, Stage, StaticLayerHandlerContribution, Step$1 as Step, StreamLight, SubAnimate, Symbol$1 as Symbol, SymbolRender, SymbolRenderContribution, TEXT_NUMBER_TYPE, TagPointsUpdate, Text, TextDirection, TextMeasureContribution, TextRender, TextRenderContribution, Theme, TimeOutTickHandler, TransformUtil, UpdateTag, VGlobal, VWindow, VirtualLayerHandlerContribution, WILDCARD, WindowHandlerContribution, WrapText, XMLParser, _interpolateColor, addArcToBezierPath, addAttributeToPrototype, alignBezierCurves, alignSubpath, application, applyTransformOnBezierCurves, arc3dModule, arcModule, areaModule, bezier, bezierCurversToPath, binarySplitPolygon, bindContributionProvider, bindContributionProviderNoSingletonScope, boundStroke, builtInSymbolStrMap, builtinSymbols, builtinSymbolsMap, calcLineCache, calculateLineHeight, canvasAllocate, centroidOfSubpath, circleBounds, circleModule, clock, cloneGraphic, colorEqual, colorStringInterpolationToStr, container, cornerTangents, createArc, createArc3d, createArea, createCircle, createColor, createConicalGradient, createGlyph, createGroup, createImage, createLine, createMat4, createPath, createPolygon, createPyramid3d, createRect, createRect3d, createRectPath, createRichText, createShadowRoot, createStage, createSymbol, createText, createWrapText, cubicCalc, cubicLength, cubicPointAt, cubicSubdivide, defaultArcAllocate, defaultArcBackgroundRenderContribution, defaultArcRenderContribution, defaultArcTextureRenderContribution, defaultAreaAllocate, defaultBaseBackgroundRenderContribution, defaultBaseTextureRenderContribution, defaultCircleAllocate, defaultCircleBackgroundRenderContribution, defaultCircleRenderContribution, defaultCircleTextureRenderContribution, defaultGraphicMemoryManager, defaultGroupBackgroundRenderContribution, defaultImageBackgroundRenderContribution, defaultImageRenderContribution, defaultLineAllocate, defaultPathAllocate, defaultRectAllocate, defaultRectBackgroundRenderContribution, defaultRectRenderContribution, defaultRectTextureRenderContribution, defaultSymbolAllocate, defaultSymbolBackgroundRenderContribution, defaultSymbolRenderContribution, defaultSymbolTextureRenderContribution, defaultTextAllocate, defaultTicker, defaultTimeline, drawArc, drawArcPath$1 as drawArcPath, drawAreaSegments, drawIncrementalAreaSegments, drawIncrementalSegments, drawPathProxy, drawSegments, enumCommandMap, fillVisible, findBestMorphingRotation, findNextGraphic, flatten_simplify, foreach, foreachAsync, genBasisSegments, genBasisTypeSegments, genLinearClosedSegments, genLinearClosedTypeSegments, genLinearSegments, genLinearTypeSegments, genMonotoneXSegments, genMonotoneXTypeSegments, genMonotoneYSegments, genMonotoneYTypeSegments, genNumberType, genStepSegments, genStepTypeSegments, getAttributeFromDefaultAttrList, getConicGradientAt, getContextFont, getCurrentEnv, getExtraModelMatrix, getModelMatrix, getRichTextBounds, getScaledStroke, getTextBounds, getTheme, getThemeFromGroup, globalTheme, glyphModule, graphicCreator, graphicService, graphicUtil, imageModule, incrementalAddTo, inject, injectable, interpolateColor, interpolateGradientConicalColor, interpolateGradientLinearColor, interpolateGradientRadialColor, interpolatePureColorArray, intersect, isBrowserEnv, isNodeEnv, isSvg, isTransformKey, isXML, layerService, lineModule, lookAt, mat3Tomat4, mat4Allocate, matrixAllocate, morphPath, multiInject, multiToOneMorph, multiply, multiplyMat4Mat3, multiplyMat4Mat4, named, newThemeObj, oneToMultiMorph, ortho, parsePadding, parseStroke, parseSvgPath, pathModule, pathToBezierCurves, point$2 as point, pointEqual, pointInterpolation, pointInterpolationHighPerformance, pointsEqual, pointsInterpolation, polygonModule, preLoadAllModule, pyramid3dModule, rafBasedSto, rect3dModule, rectFillVisible, rectModule, rectStrokeVisible, recursiveCallBinarySplit, registerArc3dGraphic, registerArcGraphic, registerAreaGraphic, registerCircleGraphic, registerDirectionalLight, registerGlyphGraphic, registerGroupGraphic, registerHtmlAttributePlugin, registerImageGraphic, registerLineGraphic, registerOrthoCamera, registerPathGraphic, registerPolygonGraphic, registerPyramid3dGraphic, registerReactAttributePlugin, registerRect3dGraphic, registerRectGraphic, registerRichtextGraphic, registerShadowRootGraphic, registerSymbolGraphic, registerTextGraphic, registerWrapTextGraphic, renderCommandList, rewriteProto, richtextModule, rotateX, rotateY, runFill, runStroke, segments, shouldUseMat4, snapLength, splitArc, splitArea, splitCircle, splitGraphic, splitLine, splitPath, splitPolygon, splitRect, splitToGrids, strCommandMap, strokeVisible, symbolModule, textAttributesToStyle, textDrawOffsetX, textDrawOffsetY, textLayoutOffsetY, textModule, transformKeys, transformMat4, transformUtil, translate, verticalLayout, vglobal, waitForAllSubLayers, wrapCanvas, wrapContext, xul };
+export { ACustomAnimate, ARC3D_NUMBER_TYPE, ARC_NUMBER_TYPE, AREA_NUMBER_TYPE, AbstractGraphicRender, Animate, AnimateGroup, AnimateGroup1, AnimateMode, AnimateStatus, AnimateStepType, Application, Arc, Arc3d, Arc3dRender, ArcRender, ArcRenderContribution, Area, AreaRender, AreaRenderContribution, AttributeAnimate, AttributeUpdateType, AutoEnablePlugins, BaseCanvas, BaseEnvContribution, BaseRender, BaseRenderContributionTime, BaseWindowHandlerContribution, Basis, BeforeRenderConstribution, BoundsContext, BoundsPicker, CIRCLE_NUMBER_TYPE, Canvas3DDrawItemInterceptor, Canvas3DPickItemInterceptor, CanvasFactory, CanvasTextLayout, CbAnimate, Circle, CircleRender, CircleRenderContribution, ClipAngleAnimate, ClipDirectionAnimate, ClipGraphicAnimate, ClipRadiusAnimate, ColorInterpolate, ColorStore, ColorType, CommonDrawItemInterceptorContribution, CommonRenderContribution, Container, ContainerModule, Context2dFactory, ContributionProvider, CurveContext, CurveTypeEnum, CustomEvent, CustomPath2D, CustomSymbolClass, DebugDrawItemInterceptorContribution, DefaultArcAllocate, DefaultArcAttribute, DefaultArcRenderContribution, DefaultAreaAllocate, DefaultAreaAttribute, DefaultAreaTextureRenderContribution, DefaultAttribute, DefaultBaseBackgroundRenderContribution, DefaultBaseInteractiveRenderContribution, DefaultBaseTextureRenderContribution, DefaultCanvasAllocate, DefaultCanvasArcRender, DefaultCanvasAreaRender, DefaultCanvasCircleRender, DefaultCanvasImageRender, DefaultCanvasLineRender, DefaultCanvasPathRender, DefaultCanvasPolygonRender, DefaultCanvasRectRender, DefaultCanvasSymbolRender, DefaultCanvasTextRender, DefaultCircleAllocate, DefaultCircleAttribute, DefaultCircleRenderContribution, DefaultConnectAttribute, DefaultDebugAttribute, DefaultFillStyle, DefaultGlobal, DefaultGlobalPickerService, DefaultGlyphAttribute, DefaultGraphicAllocate, DefaultGraphicMemoryManager, DefaultGraphicService, DefaultGraphicUtil, DefaultGroupAttribute, DefaultGroupBackgroundRenderContribution, DefaultImageAttribute, DefaultImageBackgroundRenderContribution, DefaultImageRenderContribution, DefaultLayerService, DefaultLayout, DefaultLineAllocate, DefaultLineAttribute, DefaultMat4Allocate, DefaultMatrixAllocate, DefaultMorphingAnimateConfig, DefaultPathAllocate, DefaultPathAttribute, DefaultPickService, DefaultPickStyle, DefaultPolygonAttribute, DefaultRect3dAttribute, DefaultRectAllocate, DefaultRectAttribute, DefaultRectRenderContribution, DefaultRenderService, DefaultRichTextAttribute, DefaultRichTextIconAttribute, DefaultStateAnimateConfig, DefaultStrokeStyle, DefaultStyle, DefaultSymbolAllocate, DefaultSymbolAttribute, DefaultSymbolRenderContribution, DefaultTextAllocate, DefaultTextAttribute, DefaultTextMeasureContribution, DefaultTextStyle, DefaultTicker, DefaultTimeline, DefaultTransform, DefaultTransformUtil, DefaultWindow, Direction$1 as Direction, DirectionalLight, DrawContribution, DrawItemInterceptor, DynamicLayerHandlerContribution, Edge, EmptyContext2d, EnvContribution, EventManager, EventSystem, EventTarget, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, Factory, FadeInPlus, FederatedEvent, FederatedMouseEvent, FederatedPointerEvent, FederatedWheelEvent, GLYPH_NUMBER_TYPE, GRAPHIC_UPDATE_TAG_KEY, GROUP_NUMBER_TYPE, Generator, GlobalPickerService, Glyph, GlyphRender, Graphic, GraphicAnimate, GraphicCreator$1 as GraphicCreator, GraphicPicker, GraphicRender, GraphicService, GraphicUtil, Group, GroupFadeIn, GroupFadeOut, GroupRender, GroupRenderContribution, GroupUpdateAABBBoundsMode, HtmlAttributePlugin, IContainPointMode, IMAGE_NUMBER_TYPE, Image, ImageRender, ImageRenderContribution, IncreaseCount, IncrementalDrawContribution, InputText, InteractiveDrawItemInterceptorContribution, InteractivePickItemInterceptorContribution, InteractiveSubRenderContribution, LINE_NUMBER_TYPE, Layer, LayerService, Line$1 as Line, LineRender, Linear, LinearClosed, ManualTickHandler, ManualTicker, Mat4Allocate, MatrixAllocate, Meteor, MonotoneX, MonotoneY, MorphingPath, MotionPath, MultiToOneMorphingPath, NOWORK_ANIMATE_ATTR, Node, OrthoCamera, PATH_NUMBER_TYPE, POLYGON_NUMBER_TYPE, PURE_STYLE_KEY, PYRAMID3D_NUMBER_TYPE, Path, PathRender, PathRenderContribution, PickItemInterceptor, PickerService, PluginService, Polygon, PolygonRender, PolygonRenderContribution, Pyramid3d, Pyramid3dRender, RAFTickHandler, RECT3D_NUMBER_TYPE, RECT_NUMBER_TYPE, RICHTEXT_NUMBER_TYPE, RafBasedSTO, ReactAttributePlugin, Rect, Rect3DRender, Rect3d, RectRender, RectRenderContribution, ReflectSegContext, RenderSelector, RenderService, ResourceLoader, RichText, RichTextEditPlugin, RichTextRender, RotateBySphereAnimate, SVG_ATTRIBUTE_MAP, SVG_ATTRIBUTE_MAP_KEYS, SVG_PARSE_ATTRIBUTE_MAP, SVG_PARSE_ATTRIBUTE_MAP_KEYS, SYMBOL_NUMBER_TYPE, SegContext, ShadowRoot, ShadowRootDrawItemInterceptorContribution, ShadowRootPickItemInterceptorContribution, SplitRectAfterRenderContribution, SplitRectBeforeRenderContribution, Stage, StaticLayerHandlerContribution, Step$1 as Step, StreamLight, SubAnimate, Symbol$1 as Symbol, SymbolRender, SymbolRenderContribution, TEXT_NUMBER_TYPE, TagPointsUpdate, Text, TextDirection, TextMeasureContribution, TextRender, TextRenderContribution, Theme, TimeOutTickHandler, TransformUtil, UpdateTag, VGlobal, VWindow, VirtualLayerHandlerContribution, WILDCARD, WindowHandlerContribution, WrapText, XMLParser, _interpolateColor, addArcToBezierPath, addAttributeToPrototype, alignBezierCurves, alignSubpath, application, applyTransformOnBezierCurves, arc3dModule, arcModule, areaModule, bezier, bezierCurversToPath, binarySplitPolygon, bindContributionProvider, bindContributionProviderNoSingletonScope, boundStroke, builtInSymbolStrMap, builtinSymbols, builtinSymbolsMap, calcLineCache, calculateLineHeight, canvasAllocate, centroidOfSubpath, circleBounds, circleModule, clock, cloneGraphic, colorEqual, colorStringInterpolationToStr, container, cornerTangents, createArc, createArc3d, createArea, createCircle, createColor, createConicalGradient, createGlyph, createGroup, createImage, createLine, createMat4, createPath, createPolygon, createPyramid3d, createRect, createRect3d, createRectPath, createRichText, createShadowRoot, createStage, createSymbol, createText, createWrapText, cubicCalc, cubicLength, cubicPointAt, cubicSubdivide, defaultArcAllocate, defaultArcBackgroundRenderContribution, defaultArcRenderContribution, defaultArcTextureRenderContribution, defaultAreaAllocate, defaultBaseBackgroundRenderContribution, defaultBaseTextureRenderContribution, defaultCircleAllocate, defaultCircleBackgroundRenderContribution, defaultCircleRenderContribution, defaultCircleTextureRenderContribution, defaultGraphicMemoryManager, defaultGroupBackgroundRenderContribution, defaultImageBackgroundRenderContribution, defaultImageRenderContribution, defaultLineAllocate, defaultPathAllocate, defaultRectAllocate, defaultRectBackgroundRenderContribution, defaultRectRenderContribution, defaultRectTextureRenderContribution, defaultSymbolAllocate, defaultSymbolBackgroundRenderContribution, defaultSymbolRenderContribution, defaultSymbolTextureRenderContribution, defaultTextAllocate, defaultTicker, defaultTimeline, drawArc, drawArcPath$1 as drawArcPath, drawAreaSegments, drawIncrementalAreaSegments, drawIncrementalSegments, drawPathProxy, drawSegments, enumCommandMap, fillVisible, findBestMorphingRotation, findNextGraphic, flatten_simplify, foreach, foreachAsync, genBasisSegments, genBasisTypeSegments, genLinearClosedSegments, genLinearClosedTypeSegments, genLinearSegments, genLinearTypeSegments, genMonotoneXSegments, genMonotoneXTypeSegments, genMonotoneYSegments, genMonotoneYTypeSegments, genNumberType, genStepSegments, genStepTypeSegments, getAttributeFromDefaultAttrList, getConicGradientAt, getCurrentEnv, getExtraModelMatrix, getModelMatrix, getRichTextBounds, getScaledStroke, getTextBounds, getTheme, getThemeFromGroup, globalTheme, glyphModule, graphicCreator, graphicService, graphicUtil, identityMat4, imageModule, incrementalAddTo, inject, injectable, interpolateColor, interpolateGradientConicalColor, interpolateGradientLinearColor, interpolateGradientRadialColor, interpolatePureColorArray, intersect, isBrowserEnv, isNodeEnv, isSvg, isTransformKey, isXML, layerService, lineModule, lookAt, mat3Tomat4, mat4Allocate, matrixAllocate, morphPath, multiInject, multiToOneMorph, multiplyMat4Mat3, multiplyMat4Mat4, named, newThemeObj, oneToMultiMorph, ortho, parsePadding, parseStroke, parseSvgPath, pathModule, pathToBezierCurves, point$2 as point, pointEqual, pointInterpolation, pointInterpolationHighPerformance, pointsEqual, pointsInterpolation, polygonModule, preLoadAllModule, pyramid3dModule, rafBasedSto, rect3dModule, rectFillVisible, rectModule, rectStrokeVisible, recursiveCallBinarySplit, registerArc3dGraphic, registerArcGraphic, registerAreaGraphic, registerCircleGraphic, registerDirectionalLight, registerGlyphGraphic, registerGroupGraphic, registerHtmlAttributePlugin, registerImageGraphic, registerLineGraphic, registerOrthoCamera, registerPathGraphic, registerPolygonGraphic, registerPyramid3dGraphic, registerReactAttributePlugin, registerRect3dGraphic, registerRectGraphic, registerRichtextGraphic, registerShadowRootGraphic, registerSymbolGraphic, registerTextGraphic, registerWrapTextGraphic, renderCommandList, rewriteProto, richtextModule, rotateX, rotateY, rotateZ, runFill, runStroke, scaleMat4, segments, shouldUseMat4, snapLength, splitArc, splitArea, splitCircle, splitGraphic, splitLine, splitPath, splitPolygon, splitRect, splitToGrids, strCommandMap, strokeVisible, symbolModule, textAttributesToStyle, textDrawOffsetX, textDrawOffsetY, textLayoutOffsetY, textModule, transformKeys, transformMat4, transformUtil, translate, verticalLayout, vglobal, waitForAllSubLayers, wrapCanvas, wrapContext, xul };