@visactor/vrender 0.14.0-alpha.2 → 0.14.0-alpha.4

package/dist/index.js

@@ -9291,7 +9291,8 @@
 	    underline: 0,
 	    lineThrough: 0,
 	    scaleIn3d: false,
-	    direction: 'horizontal'
+	    direction: 'horizontal',
+	    wordBreak: 'break-all'
 	};
 	const DefaultStyle = {
 	    opacity: 1,
@@ -9476,6 +9477,170 @@
 	    opacity: 1
 	};
 
+	class Application {
+	    global;
+	    graphicUtil;
+	    graphicService;
+	    transformUtil;
+	    layerService;
+	}
+	const application = new Application();
+
+	const DIRECTION_KEY = {
+	    horizontal: {
+	        width: 'width',
+	        height: 'height',
+	        left: 'left',
+	        top: 'top',
+	        x: 'x',
+	        y: 'y',
+	        bottom: 'bottom'
+	    },
+	    vertical: {
+	        width: 'height',
+	        height: 'width',
+	        left: 'top',
+	        top: 'left',
+	        x: 'y',
+	        y: 'x',
+	        bottom: 'right'
+	    }
+	};
+	const defaultFormatting = {
+	    fontSize: 16,
+	    fontFamily: 'sans-serif',
+	    fill: true,
+	    stroke: false,
+	    fontWeight: 'normal',
+	    lineHeight: 'normal',
+	    fontStyle: 'normal',
+	    textDecoration: 'none',
+	    textAlign: 'left',
+	    script: 'normal'
+	};
+	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;
+	    }
+	    ctx.globalAlpha = 1;
+	    ctx.fillStyle = fillStyle;
+	    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'
+	    });
+	}
+	function applyStrokeStyle(ctx, character) {
+	    const strokeStyle = (character && character.stroke) || defaultFormatting.stroke;
+	    if (!strokeStyle) {
+	        ctx.globalAlpha = 0;
+	        return;
+	    }
+	    ctx.globalAlpha = 1;
+	    ctx.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'
+	    });
+	}
+	function getStrByWithCanvas(desc, width, character, guessIndex, needTestLetter) {
+	    if (!width || width <= 0) {
+	        return 0;
+	    }
+	    const textMeasure = application.graphicUtil.textMeasure;
+	    let index = guessIndex;
+	    let temp = desc.slice(0, index);
+	    let tempWidth = Math.floor(textMeasure.measureText(temp, character).width);
+	    let tempNext = desc.slice(0, index + 1);
+	    let tempWidthNext = Math.floor(textMeasure.measureText(tempNext, character).width);
+	    while (tempWidth > width || tempWidthNext <= width) {
+	        if (tempWidth > width) {
+	            index--;
+	        }
+	        else {
+	            index++;
+	        }
+	        if (index > desc.length) {
+	            index = desc.length;
+	            break;
+	        }
+	        else if (index < 0) {
+	            index = 0;
+	            break;
+	        }
+	        temp = desc.slice(0, index);
+	        tempWidth = Math.floor(textMeasure.measureText(temp, character).width);
+	        tempNext = desc.slice(0, index + 1);
+	        tempWidthNext = Math.floor(textMeasure.measureText(tempNext, character).width);
+	    }
+	    if (needTestLetter) {
+	        index = testLetter(desc, index);
+	    }
+	    return index;
+	}
+	function testLetter(string, index) {
+	    let i = index;
+	    while ((regLetter.test(string[i - 1]) && regLetter.test(string[i])) ||
+	        regPunctuation.test(string[i])) {
+	        i--;
+	        if (i <= 0) {
+	            return index;
+	        }
+	    }
+	    return i;
+	}
+	function measureTextCanvas(text, character) {
+	    const textMeasure = application.graphicUtil.textMeasure;
+	    const measurement = textMeasure.measureText(text, character);
+	    const result = {
+	        ascent: 0,
+	        height: 0,
+	        descent: 0,
+	        width: 0
+	    };
+	    if (typeof measurement.actualBoundingBoxAscent !== 'number' ||
+	        typeof measurement.actualBoundingBoxDescent !== 'number') {
+	        result.width = Math.floor(measurement.width);
+	        result.height = character.fontSize || 0;
+	        result.ascent = result.height;
+	        result.descent = 0;
+	    }
+	    else {
+	        result.width = Math.floor(measurement.width);
+	        result.height = Math.floor(measurement.actualBoundingBoxAscent + measurement.actualBoundingBoxDescent);
+	        result.ascent = Math.floor(measurement.actualBoundingBoxAscent);
+	        result.descent = result.height - result.ascent;
+	    }
+	    return result;
+	}
+
 	let ATextMeasure = class ATextMeasure {
 	    release;
 	    canvas;
@@ -9527,7 +9692,7 @@
 	        this.context.setTextStyleWithoutAlignBaseline(options);
 	        return this.context.measureText(text);
 	    }
-	    clipTextVertical(verticalList, options, width) {
+	    clipTextVertical(verticalList, options, width, wordBreak) {
 	        if (verticalList.length === 0) {
 	            return { verticalList, width: 0 };
 	        }
@@ -9549,7 +9714,24 @@
 	        }
 	        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 });
+	            if (wordBreak && clipedData.str !== verticalList[i].text) {
+	                let text = '';
+	                let length = 0;
+	                for (let j = 0; j < i; j++) {
+	                    const item = verticalList[j];
+	                    text += item.text;
+	                    length += item.text.length;
+	                }
+	                text += verticalList[i].text;
+	                const totalLength = length + clipedData.str.length;
+	                let index = testLetter(text, totalLength);
+	                index = index - length;
+	                if (index !== clipedData.str.length - 1) {
+	                    clipedData.str = clipedData.str.substring(0, index);
+	                    clipedData.width = this.measureTextWidth(clipedData.str, options);
+	                }
+	            }
+	            out.push({ ...verticalList[i], text: clipedData.str, width: clipedData.width });
 	            length += clipedData.width;
 	        }
 	        return {
@@ -9557,7 +9739,7 @@
 	            width: length
 	        };
 	    }
-	    clipText(text, options, width) {
+	    clipText(text, options, width, wordBreak) {
 	        if (text.length === 0) {
 	            return { str: '', width: 0 };
 	        }
@@ -9569,7 +9751,15 @@
 	        if (length > width) {
 	            return { str: '', width: 0 };
 	        }
-	        return this._clipText(text, options, width, 0, text.length - 1);
+	        const data = this._clipText(text, options, width, 0, text.length - 1);
+	        if (wordBreak && data.str !== text) {
+	            const index = testLetter(text, data.str.length);
+	            if (index !== data.str.length) {
+	                data.str = text.substring(0, index);
+	                data.width = this.measureTextWidth(data.str, options);
+	            }
+	        }
+	        return data;
 	    }
 	    _clipText(text, options, width, leftIdx, rightIdx) {
 	        const middleIdx = Math.floor((leftIdx + rightIdx) / 2);
@@ -9600,14 +9790,14 @@
 	        }
 	        return { str: subText, width: strWidth };
 	    }
-	    clipTextWithSuffixVertical(verticalList, options, width, suffix) {
+	    clipTextWithSuffixVertical(verticalList, options, width, suffix, wordBreak) {
 	        if (suffix === '') {
-	            return this.clipTextVertical(verticalList, options, width);
+	            return this.clipTextVertical(verticalList, options, width, wordBreak);
 	        }
 	        if (verticalList.length === 0) {
 	            return { verticalList, width: 0 };
 	        }
-	        const output = this.clipTextVertical(verticalList, options, width);
+	        const output = this.clipTextVertical(verticalList, options, width, wordBreak);
 	        if (output.verticalList.length === verticalList.length &&
 	            output.verticalList[output.verticalList.length - 1].width === verticalList[verticalList.length - 1].width) {
 	            return output;
@@ -9617,7 +9807,7 @@
 	            return output;
 	        }
 	        width -= suffixWidth;
-	        const out = this.clipTextVertical(verticalList, options, width);
+	        const out = this.clipTextVertical(verticalList, options, width, wordBreak);
 	        out.width += suffixWidth;
 	        out.verticalList.push({
 	            text: suffix,
@@ -9626,9 +9816,9 @@
 	        });
 	        return out;
 	    }
-	    clipTextWithSuffix(text, options, width, suffix) {
+	    clipTextWithSuffix(text, options, width, suffix, wordBreak) {
 	        if (suffix === '') {
-	            return this.clipText(text, options, width);
+	            return this.clipText(text, options, width, wordBreak);
 	        }
 	        if (text.length === 0) {
 	            return { str: '', width: 0 };
@@ -9643,6 +9833,13 @@
 	        }
 	        width -= suffixWidth;
 	        const data = this._clipText(text, options, width, 0, text.length - 1);
+	        if (wordBreak && data.str !== text) {
+	            const index = testLetter(text, data.str.length);
+	            if (index !== data.str.length) {
+	                data.str = text.substring(0, index);
+	                data.width = this.measureTextWidth(data.str, options);
+	            }
+	        }
 	        data.str += suffix;
 	        data.width += suffixWidth;
 	        return data;
@@ -9661,15 +9858,6 @@
 
 	const container = new Container();
 
-	class Application {
-	    global;
-	    graphicUtil;
-	    graphicService;
-	    transformUtil;
-	    layerService;
-	}
-	const application = new Application();
-
 	const CanvasFactory = Symbol.for('CanvasFactory');
 	const Context2dFactory = Symbol.for('Context2dFactory');
 
@@ -17088,6 +17276,9 @@
 	        }
 	        return point;
 	    }
+	    onAnimateBind(animate) {
+	        this._emitCustomEvent('animate-bind', animate);
+	    }
 	    tryUpdateAABBBounds(full) {
 	        if (!this.shouldUpdateAABBBounds()) {
 	            return this._AABBBounds;
@@ -19663,12 +19854,12 @@
 	        }
 	        return bbox;
 	    }
-	    GetLayout(str, width, height, textAlign, textBaseline, lineHeight, suffix, miniApp) {
+	    GetLayout(str, width, height, textAlign, textBaseline, lineHeight, suffix, wordBreak, miniApp) {
 	        const linesLayout = [];
 	        const bboxWH = [width, height];
 	        const bboxOffset = [0, 0];
 	        while (str.length > 0) {
-	            const { str: clipText } = this.textMeasure.clipTextWithSuffix(str, this.textOptions, width, suffix);
+	            const { str: clipText } = this.textMeasure.clipTextWithSuffix(str, this.textOptions, width, suffix, wordBreak);
 	            linesLayout.push({
 	                str: clipText,
 	                width: this.textMeasure.measureTextWidth(clipText, this.textOptions)
@@ -19697,7 +19888,7 @@
 	        };
 	        return this.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline, lineHeight);
 	    }
-	    GetLayoutByLines(lines, textAlign, textBaseline, lineHeight, suffix = '', lineWidth) {
+	    GetLayoutByLines(lines, textAlign, textBaseline, lineHeight, suffix = '', wordBreak, lineWidth) {
 	        lines = lines.map(l => l.toString());
 	        const linesLayout = [];
 	        const bboxWH = [0, 0];
@@ -19706,7 +19897,7 @@
 	            for (let i = 0, len = lines.length; i < len; i++) {
 	                width = Math.min(this.textMeasure.measureTextWidth(lines[i], this.textOptions), lineWidth);
 	                linesLayout.push({
-	                    str: this.textMeasure.clipTextWithSuffix(lines[i], this.textOptions, width, suffix).str,
+	                    str: this.textMeasure.clipTextWithSuffix(lines[i], this.textOptions, width, suffix, wordBreak).str,
 	                    width
 	                });
 	            }
@@ -19881,7 +20072,7 @@
 	        let str;
 	        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;
+	        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, wordBreak = textTheme.wordBreak } = attribute;
 	        if (!this.shouldUpdateShape() && this.cache) {
 	            width = this.cache.clipedWidth;
 	            const dx = textDrawOffsetX(textAlign, width);
@@ -19895,12 +20086,12 @@
 	        if (Number.isFinite(maxLineWidth)) {
 	            if (ellipsis) {
 	                const strEllipsis = (ellipsis === true ? textTheme.ellipsis : ellipsis);
-	                const data = textMeasure.clipTextWithSuffix(text.toString(), { fontSize, fontWeight }, maxLineWidth, strEllipsis);
+	                const data = textMeasure.clipTextWithSuffix(text.toString(), { fontSize, fontWeight }, maxLineWidth, strEllipsis, wordBreak === 'break-word');
 	                str = data.str;
 	                width = data.width;
 	            }
 	            else {
-	                const data = textMeasure.clipText(text.toString(), { fontSize, fontWeight }, maxLineWidth);
+	                const data = textMeasure.clipText(text.toString(), { fontSize, fontWeight }, maxLineWidth, wordBreak === 'break-word');
 	                str = data.str;
 	                width = data.width;
 	            }
@@ -19927,7 +20118,7 @@
 	        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;
+	        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, wordBreak = textTheme.wordBreak } = attribute;
 	        if (!this.shouldUpdateShape() && this.cache) {
 	            width = this.cache.clipedWidth;
 	            const dx = textDrawOffsetX(textAlign, width);
@@ -19944,12 +20135,12 @@
 	        if (Number.isFinite(maxLineWidth)) {
 	            if (ellipsis) {
 	                const strEllipsis = (ellipsis === true ? textTheme.ellipsis : ellipsis);
-	                const data = textMeasure.clipTextWithSuffixVertical(verticalList[0], { fontSize, fontWeight }, maxLineWidth, strEllipsis);
+	                const data = textMeasure.clipTextWithSuffixVertical(verticalList[0], { fontSize, fontWeight }, maxLineWidth, strEllipsis, wordBreak === 'break-word');
 	                verticalList = [data.verticalList];
 	                width = data.width;
 	            }
 	            else {
-	                const data = textMeasure.clipTextVertical(verticalList[0], { fontSize, fontWeight }, maxLineWidth);
+	                const data = textMeasure.clipTextVertical(verticalList[0], { fontSize, fontWeight }, maxLineWidth, wordBreak === 'break-word');
 	                verticalList = [data.verticalList];
 	                width = data.width;
 	            }
@@ -19980,7 +20171,7 @@
 	    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;
+	        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, wordBreak = textTheme.wordBreak } = attribute;
 	        if (!this.shouldUpdateShape() && this.cache?.layoutData) {
 	            const bbox = this.cache.layoutData.bbox;
 	            this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height);
@@ -19991,7 +20182,7 @@
 	        }
 	        const textMeasure = application.graphicUtil.textMeasure;
 	        const layoutObj = new CanvasTextLayout(fontFamily, { fontSize, fontWeight }, textMeasure);
-	        const layoutData = layoutObj.GetLayoutByLines(text, textAlign, textBaseline, lineHeight, ellipsis === true ? textTheme.ellipsis : ellipsis || undefined, maxLineWidth);
+	        const layoutData = layoutObj.GetLayoutByLines(text, textAlign, textBaseline, lineHeight, ellipsis === true ? textTheme.ellipsis : ellipsis || undefined, wordBreak === 'break-word', maxLineWidth);
 	        const { bbox } = layoutData;
 	        this.cache.layoutData = layoutData;
 	        this.clearUpdateShapeTag();
@@ -20007,7 +20198,7 @@
 	        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;
+	        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, wordBreak = textTheme.wordBreak } = attribute;
 	        width = 0;
 	        if (!this.shouldUpdateShape() && this.cache) {
 	            this.cache.verticalList.forEach(item => {
@@ -20030,12 +20221,12 @@
 	            if (Number.isFinite(maxLineWidth)) {
 	                if (ellipsis) {
 	                    const strEllipsis = (ellipsis === true ? textTheme.ellipsis : ellipsis);
-	                    const data = textMeasure.clipTextWithSuffixVertical(verticalData, { fontSize, fontWeight }, maxLineWidth, strEllipsis);
+	                    const data = textMeasure.clipTextWithSuffixVertical(verticalData, { fontSize, fontWeight }, maxLineWidth, strEllipsis, wordBreak === 'break-word');
 	                    verticalLists[i] = data.verticalList;
 	                    width = data.width;
 	                }
 	                else {
-	                    const data = textMeasure.clipTextVertical(verticalData, { fontSize, fontWeight }, maxLineWidth);
+	                    const data = textMeasure.clipTextVertical(verticalData, { fontSize, fontWeight }, maxLineWidth, wordBreak === 'break-word');
 	                    verticalLists[i] = data.verticalList;
 	                    width = data.width;
 	                }
@@ -21210,161 +21401,6 @@
 	    }
 	}
 
-	const DIRECTION_KEY = {
-	    horizontal: {
-	        width: 'width',
-	        height: 'height',
-	        left: 'left',
-	        top: 'top',
-	        x: 'x',
-	        y: 'y',
-	        bottom: 'bottom'
-	    },
-	    vertical: {
-	        width: 'height',
-	        height: 'width',
-	        left: 'top',
-	        top: 'left',
-	        x: 'y',
-	        y: 'x',
-	        bottom: 'right'
-	    }
-	};
-	const defaultFormatting = {
-	    fontSize: 16,
-	    fontFamily: 'sans-serif',
-	    fill: true,
-	    stroke: false,
-	    fontWeight: 'normal',
-	    lineHeight: 'normal',
-	    fontStyle: 'normal',
-	    textDecoration: 'none',
-	    textAlign: 'left',
-	    script: 'normal'
-	};
-	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;
-	    }
-	    ctx.globalAlpha = 1;
-	    ctx.fillStyle = fillStyle;
-	    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'
-	    });
-	}
-	function applyStrokeStyle(ctx, character) {
-	    const strokeStyle = (character && character.stroke) || defaultFormatting.stroke;
-	    if (!strokeStyle) {
-	        ctx.globalAlpha = 0;
-	        return;
-	    }
-	    ctx.globalAlpha = 1;
-	    ctx.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'
-	    });
-	}
-	function getStrByWithCanvas(desc, width, character, guessIndex, needTestLetter) {
-	    if (!width || width <= 0) {
-	        return 0;
-	    }
-	    const textMeasure = application.graphicUtil.textMeasure;
-	    let index = guessIndex;
-	    let temp = desc.slice(0, index);
-	    let tempWidth = Math.floor(textMeasure.measureText(temp, character).width);
-	    let tempNext = desc.slice(0, index + 1);
-	    let tempWidthNext = Math.floor(textMeasure.measureText(tempNext, character).width);
-	    while (tempWidth > width || tempWidthNext <= width) {
-	        if (tempWidth > width) {
-	            index--;
-	        }
-	        else {
-	            index++;
-	        }
-	        if (index > desc.length) {
-	            index = desc.length;
-	            break;
-	        }
-	        else if (index < 0) {
-	            index = 0;
-	            break;
-	        }
-	        temp = desc.slice(0, index);
-	        tempWidth = Math.floor(textMeasure.measureText(temp, character).width);
-	        tempNext = desc.slice(0, index + 1);
-	        tempWidthNext = Math.floor(textMeasure.measureText(tempNext, character).width);
-	    }
-	    if (needTestLetter) {
-	        index = testLetter(desc, index);
-	    }
-	    return index;
-	}
-	function testLetter(string, index) {
-	    let i = index;
-	    while ((regLetter.test(string[i - 1]) && regLetter.test(string[i])) ||
-	        regPunctuation.test(string[i])) {
-	        i--;
-	        if (i <= 0) {
-	            return index;
-	        }
-	    }
-	    return i;
-	}
-	function measureTextCanvas(text, character) {
-	    const textMeasure = application.graphicUtil.textMeasure;
-	    const measurement = textMeasure.measureText(text, character);
-	    const result = {
-	        ascent: 0,
-	        height: 0,
-	        descent: 0,
-	        width: 0
-	    };
-	    if (typeof measurement.actualBoundingBoxAscent !== 'number' ||
-	        typeof measurement.actualBoundingBoxDescent !== 'number') {
-	        result.width = Math.floor(measurement.width);
-	        result.height = character.fontSize || 0;
-	        result.ascent = result.height;
-	        result.descent = 0;
-	    }
-	    else {
-	        result.width = Math.floor(measurement.width);
-	        result.height = Math.floor(measurement.actualBoundingBoxAscent + measurement.actualBoundingBoxDescent);
-	        result.ascent = Math.floor(measurement.actualBoundingBoxAscent);
-	        result.descent = result.height - result.ascent;
-	    }
-	    return result;
-	}
-
 	class Frame {
 	    left;
 	    top;
@@ -24679,13 +24715,13 @@
 	    if (!segPath) {
 	        return;
 	    }
-	    let needMoveTo = true;
+	    let needMoveTo = !drawConnect;
 	    const { curves } = segPath;
 	    if (percent >= 1) {
 	        if (drawConnect) {
 	            curves.forEach((curve, i) => {
 	                if (curve.defined) {
-	                    if (needMoveTo && i !== 0) {
+	                    if (needMoveTo) {
 	                        path.lineTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ);
 	                    }
 	                    needMoveTo = false;
@@ -24744,7 +24780,7 @@
 	        }
 	        if (drawConnect) {
 	            if (curve.defined) {
-	                if (needMoveTo && i !== 0) {
+	                if (needMoveTo) {
 	                    path.lineTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ);
 	                }
 	                needMoveTo = false;
@@ -37152,7 +37188,7 @@
 	    'rect'
 	];
 
-	const version = "0.14.0-alpha.2";
+	const version = "0.14.0-alpha.4";
 
 	exports.ACustomAnimate = ACustomAnimate;
 	exports.ARC3D_NUMBER_TYPE = ARC3D_NUMBER_TYPE;