@visactor/vrender 0.13.7 → 0.14.0-alpha.1

package/dist/index.js

@@ -9287,7 +9287,8 @@
 	    lineHeight: undefined,
 	    underline: 0,
 	    lineThrough: 0,
-	    scaleIn3d: false
+	    scaleIn3d: false,
+	    direction: 'horizontal'
 	};
 	const DefaultStyle = {
 	    opacity: 1,
@@ -9302,6 +9303,12 @@
 	    ...DefaultFillStyle,
 	    ...DefaultStrokeStyle
 	};
+	const DefaultConnectAttribute = {
+	    connectedType: 'none',
+	    connectedStyle: {},
+	    connectedX: NaN,
+	    connectedY: NaN
+	};
 	const DefaultAttribute = {
 	    strokeSeg: null,
 	    pickable: true,
@@ -9339,6 +9346,7 @@
 	};
 	const DefaultAreaAttribute = {
 	    ...DefaultAttribute,
+	    ...DefaultConnectAttribute,
 	    points: [],
 	    segments: [],
 	    curveType: 'linear',
@@ -9369,6 +9377,7 @@
 	};
 	const DefaultLineAttribute = {
 	    ...DefaultAttribute,
+	    ...DefaultConnectAttribute,
 	    points: [],
 	    segments: [],
 	    curveType: 'linear',
@@ -9508,6 +9517,36 @@
 	        this.context.setTextStyleWithoutAlignBaseline(options);
 	        return this.context.measureText(text);
 	    }
+	    clipTextVertical(verticalList, options, width) {
+	        if (verticalList.length === 0) {
+	            return { verticalList, width: 0 };
+	        }
+	        const { fontSize = 12 } = options;
+	        verticalList.forEach(item => {
+	            item.width = item.direction === 0 ? fontSize : this.measureTextWidth(item.text, options);
+	        });
+	        const out = [];
+	        let length = 0;
+	        let i = 0;
+	        for (; i < verticalList.length; i++) {
+	            if (length + verticalList[i].width < width) {
+	                length += verticalList[i].width;
+	                out.push(verticalList[i]);
+	            }
+	            else {
+	                break;
+	            }
+	        }
+	        if (verticalList[i] && verticalList[i].text.length > 1) {
+	            const clipedData = this._clipText(verticalList[i].text, options, width - length, 0, verticalList[i].text.length - 1);
+	            out.push({ ...verticalList[i], text: clipedData.str });
+	            length += clipedData.width;
+	        }
+	        return {
+	            verticalList: out,
+	            width: length
+	        };
+	    }
 	    clipText(text, options, width) {
 	        if (text.length === 0) {
 	            return { str: '', width: 0 };
@@ -9551,6 +9590,32 @@
 	        }
 	        return { str: subText, width: strWidth };
 	    }
+	    clipTextWithSuffixVertical(verticalList, options, width, suffix) {
+	        if (suffix === '') {
+	            return this.clipTextVertical(verticalList, options, width);
+	        }
+	        if (verticalList.length === 0) {
+	            return { verticalList, width: 0 };
+	        }
+	        const output = this.clipTextVertical(verticalList, options, width);
+	        if (output.verticalList.length === verticalList.length &&
+	            output.verticalList[output.verticalList.length - 1].width === verticalList[verticalList.length - 1].width) {
+	            return output;
+	        }
+	        const suffixWidth = this.measureTextWidth(suffix, options);
+	        if (suffixWidth > width) {
+	            return output;
+	        }
+	        width -= suffixWidth;
+	        const out = this.clipTextVertical(verticalList, options, width);
+	        out.width += suffixWidth;
+	        out.verticalList.push({
+	            text: suffix,
+	            direction: 1,
+	            width: suffixWidth
+	        });
+	        return out;
+	    }
 	    clipTextWithSuffix(text, options, width, suffix) {
 	        if (suffix === '') {
 	            return this.clipText(text, options, width);
@@ -17877,6 +17942,68 @@
 	function genNumberType() {
 	    return NUMBER_TYPE++;
 	}
+	exports.TextDirection = void 0;
+	(function (TextDirection) {
+	    TextDirection[TextDirection["HORIZONTAL"] = 0] = "HORIZONTAL";
+	    TextDirection[TextDirection["VERTICAL"] = 1] = "VERTICAL";
+	})(exports.TextDirection || (exports.TextDirection = {}));
+	function verticalLayout(text) {
+	    const nextCharacter = [];
+	    let flag = 0;
+	    let currStr = '';
+	    for (let i = 0; i < text.length; i++) {
+	        if (rotateText(text[i])) {
+	            if (flag) {
+	                currStr += text[i];
+	            }
+	            else {
+	                flag = 1;
+	                currStr = text[i];
+	            }
+	        }
+	        else {
+	            if (flag) {
+	                nextCharacter.push({
+	                    text: currStr,
+	                    direction: exports.TextDirection.VERTICAL
+	                });
+	                currStr = '';
+	                flag = 0;
+	            }
+	            nextCharacter.push({
+	                text: text[i],
+	                direction: exports.TextDirection.HORIZONTAL
+	            });
+	        }
+	    }
+	    if (currStr) {
+	        nextCharacter.push({
+	            text: currStr,
+	            direction: exports.TextDirection.VERTICAL
+	        });
+	    }
+	    return nextCharacter;
+	}
+	const rotateCharList = ['…', '（', '）', '—', '【', '】', '「', '」', '《', '》'];
+	const rotateCharMap = new Map();
+	rotateCharList.forEach(c => rotateCharMap.set(c, true));
+	const noRotateCharList = [''];
+	const noRotateCharMap = new Map();
+	noRotateCharList.forEach(c => noRotateCharMap.set(c, true));
+	function rotateText(c) {
+	    if (rotateCharMap.has(c)) {
+	        return true;
+	    }
+	    if (noRotateCharMap.has(c)) {
+	        return false;
+	    }
+	    const cp = c.codePointAt(0);
+	    let rotate = false;
+	    if (cp < 256) {
+	        rotate = true;
+	    }
+	    return rotate;
+	}
 
 	const ARC_NUMBER_TYPE = genNumberType();
 	const ARC3D_NUMBER_TYPE = genNumberType();
@@ -19724,6 +19851,20 @@
 	        return bounds;
 	    }
 	    updateSingallineAABBBounds(text) {
+	        const textTheme = getTheme(this).text;
+	        const { direction = textTheme.direction } = this.attribute;
+	        return direction === 'horizontal'
+	            ? this.updateHorizontalSinglelineAABBBounds(text)
+	            : this.updateVerticalSinglelineAABBBounds(text);
+	    }
+	    updateMultilineAABBBounds(text) {
+	        const textTheme = getTheme(this).text;
+	        const { direction = textTheme.direction } = this.attribute;
+	        return direction === 'horizontal'
+	            ? this.updateHorizontalMultilineAABBBounds(text)
+	            : this.updateVerticalMultilineAABBBounds(text);
+	    }
+	    updateHorizontalSinglelineAABBBounds(text) {
 	        const textTheme = getTheme(this).text;
 	        const textMeasure = application.graphicUtil.textMeasure;
 	        let width;
@@ -19770,7 +19911,63 @@
 	        }
 	        return this._AABBBounds;
 	    }
-	    updateMultilineAABBBounds(text) {
+	    updateVerticalSinglelineAABBBounds(text) {
+	        const textTheme = getTheme(this).text;
+	        const textMeasure = application.graphicUtil.textMeasure;
+	        let width;
+	        const buf = 2;
+	        const attribute = this.attribute;
+	        const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, stroke = textTheme.stroke, lineHeight = attribute.lineHeight ?? (attribute.fontSize || textTheme.fontSize) + buf, lineWidth = textTheme.lineWidth } = attribute;
+	        if (!this.shouldUpdateShape() && this.cache) {
+	            width = this.cache.clipedWidth;
+	            const dx = textDrawOffsetX(textAlign, width);
+	            const dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
+	            this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width);
+	            if (stroke) {
+	                this._AABBBounds.expand(lineWidth / 2);
+	            }
+	            return this._AABBBounds;
+	        }
+	        let verticalList = [
+	            verticalLayout(text.toString())
+	        ];
+	        if (Number.isFinite(maxLineWidth)) {
+	            if (ellipsis) {
+	                const strEllipsis = (ellipsis === true ? textTheme.ellipsis : ellipsis);
+	                const data = textMeasure.clipTextWithSuffixVertical(verticalList[0], { fontSize, fontWeight }, maxLineWidth, strEllipsis);
+	                verticalList = [data.verticalList];
+	                width = data.width;
+	            }
+	            else {
+	                const data = textMeasure.clipTextVertical(verticalList[0], { fontSize, fontWeight }, maxLineWidth);
+	                verticalList = [data.verticalList];
+	                width = data.width;
+	            }
+	            this.cache.verticalList = verticalList;
+	            this.cache.clipedWidth = width;
+	        }
+	        else {
+	            width = 0;
+	            verticalList[0].forEach(t => {
+	                const w = t.direction === exports.TextDirection.HORIZONTAL
+	                    ? fontSize
+	                    : textMeasure.measureTextWidth(t.text, { fontSize, fontWeight });
+	                width += w;
+	                t.width = w;
+	            });
+	            this.cache.verticalList = verticalList;
+	            this.cache.clipedWidth = width;
+	        }
+	        this.clearUpdateShapeTag();
+	        const dx = textDrawOffsetX(textAlign, width);
+	        const dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
+	        this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width);
+	        if (stroke) {
+	            this._AABBBounds.expand(lineWidth / 2);
+	        }
+	        return this._AABBBounds;
+	    }
+	    updateHorizontalMultilineAABBBounds(text) {
 	        const textTheme = getTheme(this).text;
 	        const attribute = this.attribute;
 	        const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, lineHeight = attribute.lineHeight || attribute.fontSize || textTheme.fontSize, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth } = attribute;
@@ -19794,6 +19991,71 @@
 	        }
 	        return this._AABBBounds;
 	    }
+	    updateVerticalMultilineAABBBounds(text) {
+	        const textTheme = getTheme(this).text;
+	        const textMeasure = application.graphicUtil.textMeasure;
+	        let width;
+	        const buf = 2;
+	        const attribute = this.attribute;
+	        const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, stroke = textTheme.stroke, lineHeight = attribute.lineHeight ?? (attribute.fontSize || textTheme.fontSize) + buf, lineWidth = textTheme.lineWidth } = attribute;
+	        width = 0;
+	        if (!this.shouldUpdateShape() && this.cache) {
+	            this.cache.verticalList.forEach(item => {
+	                const w = item.reduce((a, b) => a + b.width, 0);
+	                width = max(w, width);
+	            });
+	            const dx = textDrawOffsetX(textAlign, width);
+	            const height = this.cache.verticalList.length * lineHeight;
+	            const dy = textLayoutOffsetY(textBaseline, height, fontSize);
+	            this._AABBBounds.set(dy, dx, dy + height, dx + width);
+	            if (stroke) {
+	                this._AABBBounds.expand(lineWidth / 2);
+	            }
+	            return this._AABBBounds;
+	        }
+	        const verticalLists = text.map(str => {
+	            return verticalLayout(str.toString());
+	        });
+	        verticalLists.forEach((verticalData, i) => {
+	            if (Number.isFinite(maxLineWidth)) {
+	                if (ellipsis) {
+	                    const strEllipsis = (ellipsis === true ? textTheme.ellipsis : ellipsis);
+	                    const data = textMeasure.clipTextWithSuffixVertical(verticalData, { fontSize, fontWeight }, maxLineWidth, strEllipsis);
+	                    verticalLists[i] = data.verticalList;
+	                    width = data.width;
+	                }
+	                else {
+	                    const data = textMeasure.clipTextVertical(verticalData, { fontSize, fontWeight }, maxLineWidth);
+	                    verticalLists[i] = data.verticalList;
+	                    width = data.width;
+	                }
+	            }
+	            else {
+	                width = 0;
+	                verticalData.forEach(t => {
+	                    const w = t.direction === exports.TextDirection.HORIZONTAL
+	                        ? fontSize
+	                        : textMeasure.measureTextWidth(t.text, { fontSize, fontWeight });
+	                    width += w;
+	                    t.width = w;
+	                });
+	            }
+	        });
+	        this.cache.verticalList = verticalLists;
+	        this.clearUpdateShapeTag();
+	        this.cache.verticalList.forEach(item => {
+	            const w = item.reduce((a, b) => a + b.width, 0);
+	            width = max(w, width);
+	        });
+	        const dx = textDrawOffsetX(textAlign, width);
+	        const height = this.cache.verticalList.length * lineHeight;
+	        const dy = textLayoutOffsetY(textBaseline, height, fontSize);
+	        this._AABBBounds.set(dy, dx, dy + height, dx + width);
+	        if (stroke) {
+	            this._AABBBounds.expand(lineWidth / 2);
+	        }
+	        return this._AABBBounds;
+	    }
 	    tryUpdateOBBBounds() {
 	        throw new Error('暂不支持');
 	    }
@@ -24400,24 +24662,50 @@
 	], exports.BaseRender);
 
 	function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
+	    const { offsetX = 0, offsetY = 0, offsetZ = 0, mode = 'none', drawConnect = false, zeroX = 0, zeroY = 0 } = params || {};
+	    if (drawConnect && mode === 'none') {
+	        return;
+	    }
 	    if (!segPath) {
 	        return;
 	    }
-	    const { offsetX = 0, offsetY = 0, offsetZ = 0 } = params || {};
 	    let needMoveTo = true;
 	    const { curves } = segPath;
 	    if (percent >= 1) {
-	        curves.forEach(curve => {
-	            if (!curve.defined) {
-	                needMoveTo = true;
-	                return;
-	            }
-	            if (needMoveTo) {
-	                path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ);
-	            }
-	            drawSegItem$1(path, curve, 1, params);
-	            needMoveTo = false;
-	        });
+	        if (drawConnect) {
+	            curves.forEach((curve, i) => {
+	                if (curve.defined) {
+	                    if (needMoveTo && i !== 0) {
+	                        path.lineTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ);
+	                    }
+	                    needMoveTo = false;
+	                }
+	                else {
+	                    if (!needMoveTo) {
+	                        path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ);
+	                    }
+	                    else {
+	                        if (mode === 'zero') {
+	                            path.lineTo((isFinite(zeroX) ? zeroX : curve.p0.x) + offsetX, (isFinite(zeroY) ? zeroY : curve.p0.y) + offsetY, offsetZ);
+	                        }
+	                    }
+	                    needMoveTo = true;
+	                }
+	            });
+	        }
+	        else {
+	            curves.forEach(curve => {
+	                if (!curve.defined) {
+	                    needMoveTo = true;
+	                    return;
+	                }
+	                if (needMoveTo) {
+	                    path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ);
+	                }
+	                drawSegItem$1(path, curve, 1, params);
+	                needMoveTo = false;
+	            });
+	        }
 	        return;
 	    }
 	    if (percent <= 0) {
@@ -24444,15 +24732,36 @@
 	        if (_p < 0) {
 	            break;
 	        }
-	        if (!curve.defined) {
-	            needMoveTo = true;
-	            continue;
+	        if (drawConnect) {
+	            if (curve.defined) {
+	                if (needMoveTo && i !== 0) {
+	                    path.lineTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ);
+	                }
+	                needMoveTo = false;
+	            }
+	            else {
+	                if (!needMoveTo) {
+	                    path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ);
+	                }
+	                else {
+	                    if (mode === 'zero') {
+	                        path.lineTo((isFinite(zeroX) ? zeroX : curve.p0.x) + offsetX, (isFinite(zeroY) ? zeroY : curve.p0.y) + offsetY, offsetZ);
+	                    }
+	                }
+	                needMoveTo = true;
+	            }
 	        }
-	        if (needMoveTo) {
-	            path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ);
+	        else {
+	            if (!curve.defined) {
+	                needMoveTo = true;
+	                continue;
+	            }
+	            if (needMoveTo) {
+	                path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ);
+	            }
+	            drawSegItem$1(path, curve, min(_p, 1), params);
+	            needMoveTo = false;
 	        }
-	        drawSegItem$1(path, curve, min(_p, 1), params);
-	        needMoveTo = false;
 	    }
 	}
 	function drawIncrementalSegments(path, lastSeg, segments, params) {
@@ -24575,6 +24884,60 @@
 	                context.stroke();
 	            }
 	        }
+	        let { connectedType, connectedX, connectedY, connectedStyle } = attribute;
+	        if (isArray(defaultAttribute)) {
+	            connectedType = connectedType ?? defaultAttribute[0].connectedType ?? defaultAttribute[1].connectedType;
+	            connectedX = connectedX ?? defaultAttribute[0].connectedX ?? defaultAttribute[1].connectedX;
+	            connectedY = connectedY ?? defaultAttribute[0].connectedY ?? defaultAttribute[1].connectedY;
+	            connectedStyle = connectedStyle ?? defaultAttribute[0].connectedStyle ?? defaultAttribute[1].connectedStyle;
+	        }
+	        else {
+	            connectedType = connectedType ?? defaultAttribute.connectedType;
+	            connectedX = connectedX ?? defaultAttribute.connectedX;
+	            connectedY = connectedY ?? defaultAttribute.connectedY;
+	            connectedStyle = connectedStyle ?? defaultAttribute.connectedStyle;
+	        }
+	        if (connectedType !== 'connect' && connectedType !== 'zero') {
+	            connectedType = 'none';
+	        }
+	        if (connectedType !== 'none') {
+	            context.beginPath();
+	            drawSegments(context.camera ? context : context.nativeContext, cache, clipRange, clipRangeByDimension, {
+	                offsetX,
+	                offsetY,
+	                offsetZ: z,
+	                drawConnect: true,
+	                mode: connectedType,
+	                zeroX: connectedX,
+	                zeroY: connectedY
+	            });
+	            const da = [];
+	            if (isArray(defaultAttribute)) {
+	                defaultAttribute.forEach(i => da.push(i));
+	            }
+	            else {
+	                da.push(defaultAttribute);
+	            }
+	            da.push(attribute);
+	            if (fill !== false) {
+	                if (fillCb) {
+	                    fillCb(context, attribute, defaultAttribute);
+	                }
+	                else if (fillOpacity) {
+	                    context.setCommonStyle(line, connectedStyle, originX - offsetX, originY - offsetY, da);
+	                    context.fill();
+	                }
+	            }
+	            if (stroke !== false) {
+	                if (strokeCb) {
+	                    strokeCb(context, attribute, defaultAttribute);
+	                }
+	                else if (strokeOpacity) {
+	                    context.setStrokeStyle(line, connectedStyle, originX - offsetX, originY - offsetY, da);
+	                    context.stroke();
+	                }
+	            }
+	        }
 	        return !!ret;
 	    }
 	    drawShape(line, context, x, y, drawContext, params, fillCb, strokeCb) {
@@ -24667,33 +25030,63 @@
 	], exports.DefaultCanvasLineRender);
 
 	function drawAreaSegments(path, segPath, percent, params) {
+	    const { drawConnect = false, mode = 'none' } = params || {};
+	    if (drawConnect && mode === 'none') {
+	        return;
+	    }
 	    const { top, bottom } = segPath;
 	    if (percent >= 1) {
 	        const topList = [];
 	        const bottomList = [];
 	        let lastDefined = true;
-	        for (let i = 0, n = top.curves.length; i < n; i++) {
-	            const topCurve = top.curves[i];
-	            if (lastDefined !== topCurve.defined) {
-	                if (lastDefined) {
-	                    drawAreaBlock(path, topList, bottomList, params);
-	                    topList.length = 0;
-	                    bottomList.length = 0;
+	        if (drawConnect) {
+	            for (let i = 0, n = top.curves.length; i < n; i++) {
+	                const topCurve = top.curves[i];
+	                if (lastDefined !== topCurve.defined) {
+	                    if (!lastDefined) {
+	                        drawAreaConnectBlock(path, topList, bottomList, params);
+	                        topList.length = 0;
+	                        bottomList.length = 0;
+	                    }
+	                    else {
+	                        topList.push(topCurve);
+	                        bottomList.push(bottom.curves[n - i - 1]);
+	                    }
+	                    lastDefined = !lastDefined;
 	                }
 	                else {
-	                    topList.push(topCurve);
-	                    bottomList.push(bottom.curves[n - i - 1]);
+	                    if (!lastDefined) {
+	                        topList.push(topCurve);
+	                        bottomList.push(bottom.curves[n - i - 1]);
+	                    }
 	                }
-	                lastDefined = !lastDefined;
 	            }
-	            else {
-	                if (lastDefined) {
-	                    topList.push(topCurve);
-	                    bottomList.push(bottom.curves[n - i - 1]);
+	            drawAreaBlock(path, topList, bottomList, params);
+	        }
+	        else {
+	            for (let i = 0, n = top.curves.length; i < n; i++) {
+	                const topCurve = top.curves[i];
+	                if (lastDefined !== topCurve.defined) {
+	                    if (lastDefined) {
+	                        drawAreaBlock(path, topList, bottomList, params);
+	                        topList.length = 0;
+	                        bottomList.length = 0;
+	                    }
+	                    else {
+	                        topList.push(topCurve);
+	                        bottomList.push(bottom.curves[n - i - 1]);
+	                    }
+	                    lastDefined = !lastDefined;
+	                }
+	                else {
+	                    if (lastDefined) {
+	                        topList.push(topCurve);
+	                        bottomList.push(bottom.curves[n - i - 1]);
+	                    }
 	                }
 	            }
+	            drawAreaBlock(path, topList, bottomList, params);
 	        }
-	        drawAreaBlock(path, topList, bottomList, params);
 	        return;
 	    }
 	    if (percent <= 0) {
@@ -24770,6 +25163,23 @@
 	    }
 	    drawAreaBlock(path, topList, bottomList, params);
 	}
+	function drawAreaConnectBlock(path, topList, bottomList, params) {
+	    if (topList.length < 2) {
+	        return;
+	    }
+	    const { offsetX = 0, offsetY = 0, offsetZ = 0, mode } = params || {};
+	    let curve = topList[0];
+	    path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ);
+	    curve = topList[topList.length - 1];
+	    let end = curve.p3 || curve.p1;
+	    path.lineTo(end.x + offsetX, end.y + offsetY, offsetZ);
+	    curve = bottomList[bottomList.length - 1];
+	    path.lineTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ);
+	    curve = bottomList[0];
+	    end = curve.p3 || curve.p1;
+	    path.lineTo(end.x + offsetX, end.y + offsetY, offsetZ);
+	    path.closePath();
+	}
 	function drawAreaBlock(path, topList, bottomList, params) {
 	    const { offsetX = 0, offsetY = 0, offsetZ = 0 } = params || {};
 	    let needMoveTo = true;
@@ -24931,7 +25341,7 @@
 	                area.cacheArea = { top: topCache, bottom: bottomCache };
 	            }
 	            else {
-	                area.cache = null;
+	                area.cacheArea = null;
 	                area.clearUpdateShapeTag();
 	                return;
 	            }
@@ -24993,6 +25403,45 @@
 	        context.highPerformanceRestore();
 	    }
 	    drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, fillCb, strokeCb) {
+	        let ret = false;
+	        ret =
+	            ret ||
+	                this._drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, false, fillCb, strokeCb);
+	        ret =
+	            ret ||
+	                this._drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, true, fillCb, strokeCb);
+	        return ret;
+	    }
+	    _drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, connect, fillCb, strokeCb) {
+	        let { connectedType, connectedX, connectedY, connectedStyle } = attribute;
+	        const da = [];
+	        if (connect) {
+	            if (isArray(defaultAttribute)) {
+	                connectedType = connectedType ?? defaultAttribute[0].connectedType ?? defaultAttribute[1].connectedType;
+	                connectedX = connectedX ?? defaultAttribute[0].connectedX ?? defaultAttribute[1].connectedX;
+	                connectedY = connectedY ?? defaultAttribute[0].connectedY ?? defaultAttribute[1].connectedY;
+	                connectedStyle = connectedStyle ?? defaultAttribute[0].connectedStyle ?? defaultAttribute[1].connectedStyle;
+	            }
+	            else {
+	                connectedType = connectedType ?? defaultAttribute.connectedType;
+	                connectedX = connectedX ?? defaultAttribute.connectedX;
+	                connectedY = connectedY ?? defaultAttribute.connectedY;
+	                connectedStyle = connectedStyle ?? defaultAttribute.connectedStyle;
+	            }
+	            if (connectedType !== 'connect' && connectedType !== 'zero') {
+	                connectedType = 'none';
+	            }
+	            if (isArray(defaultAttribute)) {
+	                defaultAttribute.forEach(i => da.push(i));
+	            }
+	            else {
+	                da.push(defaultAttribute);
+	            }
+	            da.push(attribute);
+	        }
+	        if (connect && connectedType === 'none') {
+	            return false;
+	        }
 	        if (!cache) {
 	            return;
 	        }
@@ -25001,7 +25450,11 @@
 	        drawAreaSegments(context.camera ? context : context.nativeContext, cache, clipRange, {
 	            offsetX,
 	            offsetY,
-	            offsetZ
+	            offsetZ,
+	            drawConnect: connect,
+	            mode: connectedType,
+	            zeroX: connectedX,
+	            zeroY: connectedY
 	        });
 	        if (!this._areaRenderContribitions) {
 	            this._areaRenderContribitions = this.areaRenderContribitions.getContributions() || [];
@@ -25019,7 +25472,7 @@
 	                fillCb(context, attribute, defaultAttribute);
 	            }
 	            else if (fillOpacity) {
-	                context.setCommonStyle(area, attribute, originX - offsetX, originY - offsetY, defaultAttribute);
+	                context.setCommonStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute);
 	                context.fill();
 	            }
 	        }
@@ -25042,10 +25495,14 @@
 	                    drawSegments(context.camera ? context : context.nativeContext, stroke[0] ? cache.top : cache.bottom, clipRange, 'auto', {
 	                        offsetX,
 	                        offsetY,
-	                        offsetZ
+	                        offsetZ,
+	                        drawConnect: connect,
+	                        mode: connectedType,
+	                        zeroX: connectedX,
+	                        zeroY: connectedY
 	                    });
 	                }
-	                context.setStrokeStyle(area, attribute, originX - offsetX, originY - offsetY, defaultAttribute);
+	                context.setStrokeStyle(area, connect ? connectedStyle : attribute, originX - offsetX, originY - offsetY, connect ? da : defaultAttribute);
 	                context.stroke();
 	            }
 	        }
@@ -25471,7 +25928,7 @@
 	    }
 	    drawShape(text, context, x, y, drawContext, params, fillCb, strokeCb) {
 	        const textAttribute = getTheme(text, params?.theme).text;
-	        const { text: str, fill = textAttribute.fill, stroke = textAttribute.stroke, fillOpacity = textAttribute.fillOpacity, strokeOpacity = textAttribute.strokeOpacity, opacity = textAttribute.opacity, lineWidth = textAttribute.lineWidth, visible = textAttribute.visible, underline = textAttribute.underline, lineThrough = textAttribute.lineThrough, keepDirIn3d = textAttribute.keepDirIn3d, fontSize = textAttribute.fontSize, textBaseline = textAttribute.textBaseline, x: originX = textAttribute.x, y: originY = textAttribute.y } = text.attribute;
+	        const { text: str, fill = textAttribute.fill, stroke = textAttribute.stroke, fillOpacity = textAttribute.fillOpacity, strokeOpacity = textAttribute.strokeOpacity, opacity = textAttribute.opacity, lineWidth = textAttribute.lineWidth, visible = textAttribute.visible, underline = textAttribute.underline, lineThrough = textAttribute.lineThrough, keepDirIn3d = textAttribute.keepDirIn3d, direction = textAttribute.direction, fontSize = textAttribute.fontSize, textBaseline = textAttribute.textBaseline, textAlign = textAttribute.textAlign, x: originX = textAttribute.x, y: originY = textAttribute.y } = text.attribute;
 	        const lineHeight = text.attribute.lineHeight ?? fontSize;
 	        const fVisible = fillVisible(opacity, fillOpacity, fill);
 	        const sVisible = strokeVisible(opacity, strokeOpacity);
@@ -25505,23 +25962,24 @@
 	        });
 	        context.setShadowStyle && context.setShadowStyle(text, text.attribute, textAttribute);
 	        transform3dMatrixToContextMatrix && this.transformUseContext2d(text, textAttribute, z, context);
-	        if (Array.isArray(str)) {
-	            context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z);
-	            const { multilineLayout } = text;
-	            if (!multilineLayout) {
-	                context.highPerformanceRestore();
-	                return;
+	        const drawText = (t, offsetX, offsetY, direction) => {
+	            let _x = x + offsetX;
+	            const _y = y + offsetY;
+	            if (direction) {
+	                context.highPerformanceSave();
+	                _x += fontSize;
+	                const matrix = matrixAllocate.allocate(1, 0, 0, 1, 0, 0);
+	                matrix.rotateByCenter(Math.PI / 2, _x, _y);
+	                context.transformFromMatrix(matrix, true);
+	                matrixAllocate.free(matrix);
 	            }
-	            const { xOffset, yOffset } = multilineLayout.bbox;
 	            if (doStroke) {
 	                if (strokeCb) {
 	                    strokeCb(context, text.attribute, textAttribute);
 	                }
 	                else if (sVisible) {
 	                    context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute);
-	                    multilineLayout.lines.forEach(line => {
-	                        context.strokeText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z);
-	                    });
+	                    context.strokeText(t, _x, _y, z);
 	                }
 	            }
 	            if (doFill) {
@@ -25530,45 +25988,134 @@
 	                }
 	                else if (fVisible) {
 	                    context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute);
-	                    multilineLayout.lines.forEach(line => {
-	                        context.fillText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z);
-	                        this.drawMultiUnderLine(underline, lineThrough, text, (line.leftOffset || 0) + x, (line.topOffset || 0) + yOffset + y, z, line.width, textAttribute, context);
-	                    });
+	                    context.fillText(t, _x, _y, z);
+	                    this.drawUnderLine(underline, lineThrough, text, _x, _y, z, textAttribute, context);
 	                }
 	            }
-	        }
-	        else {
-	            context.setTextStyle(text.attribute, textAttribute, z);
-	            const t = text.clipedText;
-	            let dy = 0;
-	            if (lineHeight !== fontSize) {
-	                if (textBaseline === 'top') {
-	                    dy = (lineHeight - fontSize) / 2;
+	            if (direction) {
+	                context.highPerformanceRestore();
+	                context.setTransformForCurrent();
+	            }
+	        };
+	        if (Array.isArray(str)) {
+	            context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z);
+	            if (direction === 'horizontal') {
+	                const { multilineLayout } = text;
+	                if (!multilineLayout) {
+	                    context.highPerformanceRestore();
+	                    return;
+	                }
+	                const { xOffset, yOffset } = multilineLayout.bbox;
+	                if (doStroke) {
+	                    if (strokeCb) {
+	                        strokeCb(context, text.attribute, textAttribute);
+	                    }
+	                    else if (sVisible) {
+	                        context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute);
+	                        multilineLayout.lines.forEach(line => {
+	                            context.strokeText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z);
+	                        });
+	                    }
 	                }
-	                else if (textBaseline === 'middle') ;
-	                else if (textBaseline === 'bottom') {
-	                    dy = -(lineHeight - fontSize) / 2;
+	                if (doFill) {
+	                    if (fillCb) {
+	                        fillCb(context, text.attribute, textAttribute);
+	                    }
+	                    else if (fVisible) {
+	                        context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute);
+	                        multilineLayout.lines.forEach(line => {
+	                            context.fillText(line.str, (line.leftOffset || 0) + xOffset + x, (line.topOffset || 0) + yOffset + y, z);
+	                            this.drawMultiUnderLine(underline, lineThrough, text, (line.leftOffset || 0) + x, (line.topOffset || 0) + yOffset + y, z, line.width, textAttribute, context);
+	                        });
+	                    }
 	                }
-	                else ;
 	            }
-	            if (doStroke) {
-	                if (strokeCb) {
-	                    strokeCb(context, text.attribute, textAttribute);
+	            else {
+	                const cache = text.cache;
+	                const { verticalList } = cache;
+	                context.textAlign = 'left';
+	                context.textBaseline = 'top';
+	                const totalHeight = lineHeight * verticalList.length;
+	                let totalW = 0;
+	                verticalList.forEach(verticalData => {
+	                    const _w = verticalData.reduce((a, b) => a + (b.width || 0), 0);
+	                    totalW = max(_w, totalW);
+	                });
+	                let offsetY = 0;
+	                let offsetX = 0;
+	                if (textBaseline === 'bottom') {
+	                    offsetX = -totalHeight;
 	                }
-	                else if (sVisible) {
-	                    context.setStrokeStyle(text, text.attribute, originX - x, originY - y, textAttribute);
-	                    context.strokeText(t, x, y + dy, z);
+	                else if (textBaseline === 'middle') {
+	                    offsetX = -totalHeight / 2;
+	                }
+	                if (textAlign === 'center') {
+	                    offsetY -= totalW / 2;
+	                }
+	                else if (textAlign === 'right') {
+	                    offsetY -= totalW;
 	                }
+	                verticalList.forEach((verticalData, i) => {
+	                    const currentW = verticalData.reduce((a, b) => a + (b.width || 0), 0);
+	                    const dw = totalW - currentW;
+	                    let currentOffsetY = offsetY;
+	                    if (textAlign === 'center') {
+	                        currentOffsetY += dw / 2;
+	                    }
+	                    else if (textAlign === 'right') {
+	                        currentOffsetY += dw;
+	                    }
+	                    verticalData.forEach(item => {
+	                        const { text, width, direction } = item;
+	                        drawText(text, totalHeight - (i + 1) * lineHeight + offsetX, currentOffsetY, direction);
+	                        currentOffsetY += width;
+	                    });
+	                });
 	            }
-	            if (doFill) {
-	                if (fillCb) {
-	                    fillCb(context, text.attribute, textAttribute);
+	        }
+	        else {
+	            const cache = text.cache;
+	            if (direction === 'horizontal') {
+	                context.setTextStyle(text.attribute, textAttribute, z);
+	                const t = text.clipedText;
+	                let dy = 0;
+	                if (lineHeight !== fontSize) {
+	                    if (textBaseline === 'top') {
+	                        dy = (lineHeight - fontSize) / 2;
+	                    }
+	                    else if (textBaseline === 'middle') ;
+	                    else if (textBaseline === 'bottom') {
+	                        dy = -(lineHeight - fontSize) / 2;
+	                    }
+	                    else ;
 	                }
-	                else if (fVisible) {
-	                    context.setCommonStyle(text, text.attribute, originX - x, originY - y, textAttribute);
-	                    context.fillText(t, x, y + dy, z);
-	                    this.drawUnderLine(underline, lineThrough, text, x, y + dy, z, textAttribute, context);
+	                drawText(t, 0, dy, 0);
+	            }
+	            else if (cache) {
+	                context.setTextStyleWithoutAlignBaseline(text.attribute, textAttribute, z);
+	                const { verticalList } = cache;
+	                let offsetY = 0;
+	                const totalW = verticalList[0].reduce((a, b) => a + (b.width || 0), 0);
+	                let offsetX = 0;
+	                if (textBaseline === 'bottom') {
+	                    offsetX = -lineHeight;
 	                }
+	                else if (textBaseline === 'middle') {
+	                    offsetX = -lineHeight / 2;
+	                }
+	                if (textAlign === 'center') {
+	                    offsetY -= totalW / 2;
+	                }
+	                else if (textAlign === 'right') {
+	                    offsetY -= totalW;
+	                }
+	                context.textAlign = 'left';
+	                context.textBaseline = 'top';
+	                verticalList[0].forEach(item => {
+	                    const { text, width, direction } = item;
+	                    drawText(text, offsetX, offsetY, direction);
+	                    offsetY += width;
+	                });
 	            }
 	        }
 	        transform3dMatrixToContextMatrix && this.restoreTransformUseContext2d(text, textAttribute, z, context);
@@ -36343,7 +36890,7 @@
 	    'rect'
 	];
 
-	const version = "0.13.7";
+	const version = "0.14.0-alpha.1";
 
 	exports.ACustomAnimate = ACustomAnimate;
 	exports.ARC3D_NUMBER_TYPE = ARC3D_NUMBER_TYPE;
@@ -36388,6 +36935,7 @@
 	exports.DefaultAreaAttribute = DefaultAreaAttribute;
 	exports.DefaultAttribute = DefaultAttribute;
 	exports.DefaultCircleAttribute = DefaultCircleAttribute;
+	exports.DefaultConnectAttribute = DefaultConnectAttribute;
 	exports.DefaultFillStyle = DefaultFillStyle;
 	exports.DefaultGlyphAttribute = DefaultGlyphAttribute;
 	exports.DefaultGroupAttribute = DefaultGroupAttribute;
@@ -36656,6 +37204,7 @@
 	exports.transformUtil = transformUtil;
 	exports.translate = translate;
 	exports.version = version;
+	exports.verticalLayout = verticalLayout;
 	exports.waitForAllSubLayers = waitForAllSubLayers;
 	exports.wrapCanvas = wrapCanvas;
 	exports.wrapContext = wrapContext;