@visactor/vrender-core 1.1.11-alpha.1 → 1.1.12

package/dist/index.es.js

@@ -133,12 +133,17 @@ class SyncHook extends Hook {
     }
 }
 
+const GENERATOR_STATE_SYMBOL = Symbol.for('@visactor/vrender-core/generator-state');
+function getGeneratorState() {
+    const scope = globalThis;
+    return scope[GENERATOR_STATE_SYMBOL] || (scope[GENERATOR_STATE_SYMBOL] = { autoIncrementId: 0 });
+}
+const generatorState = getGeneratorState();
 class Generator {
     static GenAutoIncrementId() {
-        return Generator.auto_increment_id++;
+        return generatorState.autoIncrementId++;
     }
 }
-Generator.auto_increment_id = 0;
 
 class Application {
 }
@@ -11020,6 +11025,7 @@ class Graphic extends Node {
                 this.commitBaseAttributeBySingleKey(key, value, !!forceUpdateTag, context);
             }
             else {
+                this.detachAttributeFromBaseAttributes();
                 const nextAttrs = { [key]: value };
                 this.applyBaseAttributes(nextAttrs);
                 this.commitBaseAttributeMutation(!!forceUpdateTag, context);
@@ -12752,6 +12758,8 @@ const TEXT_UPDATE_TAG_KEY = [
     'fontSize',
     'fontFamily',
     'fontWeight',
+    'fontStyle',
+    'fontVariant',
     'ellipsis',
     'lineHeight',
     'direction',
@@ -12921,7 +12929,7 @@ class Text extends Graphic {
         var _a, _b;
         const textTheme = this.getGraphicTheme();
         const attribute = this.attribute;
-        const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, wrap = textTheme.wrap, measureMode = textTheme.measureMode, lineWidth = textTheme.lineWidth, whiteSpace = textTheme.whiteSpace, suffixPosition = textTheme.suffixPosition, ignoreBuf = textTheme.ignoreBuf, keepCenterInLine = textTheme.keepCenterInLine } = attribute;
+        const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, fontStyle = textTheme.fontStyle, fontVariant = textTheme.fontVariant, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, wrap = textTheme.wrap, measureMode = textTheme.measureMode, lineWidth = textTheme.lineWidth, whiteSpace = textTheme.whiteSpace, suffixPosition = textTheme.suffixPosition, ignoreBuf = textTheme.ignoreBuf, keepCenterInLine = textTheme.keepCenterInLine } = attribute;
         const buf = ignoreBuf ? 0 : this.guessLineHeightBuf(fontSize);
         const lineHeight = this.getLineHeight(attribute, textTheme, buf);
         if (whiteSpace === 'normal' || wrap) {
@@ -12936,7 +12944,7 @@ class Text extends Graphic {
             return this._AABBBounds;
         }
         const textMeasure = application.graphicUtil.getTextMeasureInstance(this.textMeasureId || ((_b = this.stage) === null || _b === void 0 ? void 0 : _b.textMeasureId));
-        const layoutObj = new CanvasTextLayout(fontFamily, { fontSize, fontWeight, fontFamily, lineHeight }, textMeasure);
+        const layoutObj = new CanvasTextLayout(fontFamily, { fontSize, fontWeight, fontFamily, fontStyle, fontVariant, lineHeight }, textMeasure);
         const layoutData = layoutObj.GetLayoutByLines(text, textAlign, textBaseline, lineHeight, ellipsis === true ? textTheme.ellipsis : ellipsis || undefined, false, {
             lineWidth: maxLineWidth,
             suffixPosition,
@@ -12955,7 +12963,7 @@ class Text extends Graphic {
     updateWrapAABBBounds(text) {
         var _a, _b, _c, _d;
         const textTheme = this.getGraphicTheme();
-        const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, wordBreak = textTheme.wordBreak, fontWeight = textTheme.fontWeight, ignoreBuf = textTheme.ignoreBuf, measureMode = textTheme.measureMode, suffixPosition = textTheme.suffixPosition, heightLimit = 0, lineClamp, keepCenterInLine = textTheme.keepCenterInLine } = this.attribute;
+        const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, wordBreak = textTheme.wordBreak, fontWeight = textTheme.fontWeight, fontStyle = textTheme.fontStyle, fontVariant = textTheme.fontVariant, ignoreBuf = textTheme.ignoreBuf, measureMode = textTheme.measureMode, suffixPosition = textTheme.suffixPosition, heightLimit = 0, lineClamp, keepCenterInLine = textTheme.keepCenterInLine } = this.attribute;
         const buf = ignoreBuf ? 0 : this.guessLineHeightBuf(fontSize);
         const lineHeight = this.getLineHeight(this.attribute, textTheme, buf);
         if (!this.shouldUpdateShape() && ((_a = this.cache) === null || _a === void 0 ? void 0 : _a.layoutData)) {
@@ -12967,7 +12975,7 @@ class Text extends Graphic {
             return this._AABBBounds;
         }
         const textMeasure = application.graphicUtil.getTextMeasureInstance(this.textMeasureId || ((_b = this.stage) === null || _b === void 0 ? void 0 : _b.textMeasureId));
-        const textOptions = { fontSize, fontWeight, fontFamily, lineHeight };
+        const textOptions = { fontSize, fontWeight, fontFamily, fontStyle, fontVariant, lineHeight };
         const layoutObj = new CanvasTextLayout(fontFamily, textOptions, textMeasure);
         const lines = isArray(text) ? text.map(l => l.toString()) : [text.toString()];
         const linesLayout = [];
@@ -13087,7 +13095,7 @@ class Text extends Graphic {
         const textMeasure = application.graphicUtil.getTextMeasureInstance(this.textMeasureId || ((_a = this.stage) === null || _a === void 0 ? void 0 : _a.textMeasureId));
         let width;
         const attribute = this.attribute;
-        const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, fontFamily = textTheme.fontFamily, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, verticalMode = textTheme.verticalMode, suffixPosition = textTheme.suffixPosition } = attribute;
+        const { maxLineWidth = textTheme.maxLineWidth, ellipsis = textTheme.ellipsis, fontFamily = textTheme.fontFamily, fontSize = textTheme.fontSize, fontWeight = textTheme.fontWeight, fontStyle = textTheme.fontStyle, fontVariant = textTheme.fontVariant, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, verticalMode = textTheme.verticalMode, suffixPosition = textTheme.suffixPosition } = attribute;
         const lineHeight = this.getLineHeight(attribute, textTheme, 0);
         let { textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline } = attribute;
         if (!verticalMode) {
@@ -13117,12 +13125,12 @@ class Text extends Graphic {
             if (Number.isFinite(maxLineWidth)) {
                 if (ellipsis) {
                     const strEllipsis = (ellipsis === true ? textTheme.ellipsis : ellipsis);
-                    const data = textMeasure.clipTextWithSuffixVertical(verticalData, { fontSize, fontWeight, fontFamily }, maxLineWidth, strEllipsis, false, suffixPosition);
+                    const data = textMeasure.clipTextWithSuffixVertical(verticalData, { fontSize, fontWeight, fontFamily, fontStyle, fontVariant }, maxLineWidth, strEllipsis, false, suffixPosition);
                     verticalLists[i] = data.verticalList;
                     width = data.width;
                 }
                 else {
-                    const data = textMeasure.clipTextVertical(verticalData, { fontSize, fontWeight, fontFamily }, maxLineWidth, false);
+                    const data = textMeasure.clipTextVertical(verticalData, { fontSize, fontWeight, fontFamily, fontStyle, fontVariant }, maxLineWidth, false);
                     verticalLists[i] = data.verticalList;
                     width = data.width;
                 }
@@ -13132,7 +13140,7 @@ class Text extends Graphic {
                 verticalData.forEach(t => {
                     const w = t.direction === TextDirection.HORIZONTAL
                         ? fontSize
-                        : textMeasure.measureTextWidth(t.text, { fontSize, fontWeight, fontFamily });
+                        : textMeasure.measureTextWidth(t.text, { fontSize, fontWeight, fontFamily, fontStyle, fontVariant });
                     width += w;
                     t.width = w;
                 });
@@ -13217,7 +13225,7 @@ class WrapText extends Text {
     updateMultilineAABBBounds(text) {
         var _a, _b, _c, _d, _e;
         const textTheme = this.getGraphicTheme();
-        const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, wordBreak = textTheme.wordBreak, fontWeight = textTheme.fontWeight, ignoreBuf = textTheme.ignoreBuf, heightLimit = 0, suffixPosition = textTheme.suffixPosition, lineClamp } = this.attribute;
+        const { fontFamily = textTheme.fontFamily, textAlign = textTheme.textAlign, textBaseline = textTheme.textBaseline, fontSize = textTheme.fontSize, ellipsis = textTheme.ellipsis, maxLineWidth, stroke = textTheme.stroke, lineWidth = textTheme.lineWidth, wordBreak = textTheme.wordBreak, fontWeight = textTheme.fontWeight, fontStyle = textTheme.fontStyle, fontVariant = textTheme.fontVariant, ignoreBuf = textTheme.ignoreBuf, heightLimit = 0, suffixPosition = textTheme.suffixPosition, lineClamp } = this.attribute;
         const lineHeight = (_a = calculateLineHeight(this.attribute.lineHeight, this.attribute.fontSize || textTheme.fontSize)) !== null && _a !== void 0 ? _a : (this.attribute.fontSize || textTheme.fontSize);
         const buf = ignoreBuf ? 0 : 2;
         if (!this.shouldUpdateShape() && ((_b = this.cache) === null || _b === void 0 ? void 0 : _b.layoutData)) {
@@ -13229,7 +13237,7 @@ class WrapText extends Text {
             return this._AABBBounds;
         }
         const textMeasure = application.graphicUtil.getTextMeasureInstance(this.textMeasureId || ((_c = this.stage) === null || _c === void 0 ? void 0 : _c.textMeasureId));
-        const layoutObj = new CanvasTextLayout(fontFamily, { fontSize, fontWeight, fontFamily }, textMeasure);
+        const layoutObj = new CanvasTextLayout(fontFamily, { fontSize, fontWeight, fontFamily, fontStyle, fontVariant }, textMeasure);
         const lines = text.map(l => l.toString());
         const linesLayout = [];
         const bboxWH = [0, 0];
@@ -13538,21 +13546,21 @@ let Line$1 = class Line extends Graphic {
         return aabbBounds;
     }
     updateLineAABBBoundsByPoints(attribute, lineTheme, aabbBounds, graphic) {
-        const { points = lineTheme.points, connectedType } = attribute;
+        const { points = lineTheme.points } = attribute;
         const b = aabbBounds;
         points.forEach(p => {
-            if (p.defined !== false || connectedType === 'connect') {
+            if (p.defined !== false) {
                 b.add(p.x, p.y);
             }
         });
         return b;
     }
     updateLineAABBBoundsBySegments(attribute, lineTheme, aabbBounds, graphic) {
-        const { segments = lineTheme.segments, connectedType } = attribute;
+        const { segments = lineTheme.segments } = attribute;
         const b = aabbBounds;
         segments.forEach(s => {
             s.points.forEach(p => {
-                if (p.defined !== false || connectedType === 'connect') {
+                if (p.defined !== false) {
                     b.add(p.x, p.y);
                 }
             });
@@ -15905,7 +15913,14 @@ function createPath(attributes) {
     return new Path(attributes);
 }
 
-const AREA_UPDATE_TAG_KEY = ['segments', 'points', 'curveType', 'curveTension', ...GRAPHIC_UPDATE_TAG_KEY];
+const AREA_UPDATE_TAG_KEY = [
+    'segments',
+    'points',
+    'curveType',
+    'curveTension',
+    'connectedType',
+    ...GRAPHIC_UPDATE_TAG_KEY
+];
 class Area extends Graphic {
     constructor(params) {
         super(params);
@@ -15954,6 +15969,9 @@ class Area extends Graphic {
         const b = aabbBounds;
         points.forEach(p => {
             var _a, _b;
+            if (p.defined === false) {
+                return;
+            }
             b.add(p.x, p.y);
             b.add((_a = p.x1) !== null && _a !== void 0 ? _a : p.x, (_b = p.y1) !== null && _b !== void 0 ? _b : p.y);
         });
@@ -15965,6 +15983,9 @@ class Area extends Graphic {
         segments.forEach(s => {
             s.points.forEach(p => {
                 var _a, _b;
+                if (p.defined === false) {
+                    return;
+                }
                 b.add(p.x, p.y);
                 b.add((_a = p.x1) !== null && _a !== void 0 ? _a : p.x, (_b = p.y1) !== null && _b !== void 0 ? _b : p.y);
             });
@@ -24877,6 +24898,142 @@ function drawSegItem(ctx, curve, endPercent, params) {
     }
 }
 
+function getAreaPointRuns(points, connectedType, startPoint) {
+    const runs = [];
+    if (!points.some(p => p.defined === false)) {
+        const run = startPoint ? [startPoint, ...points] : points;
+        if (run.length) {
+            runs.push(run);
+        }
+        return { runs, tail: run[run.length - 1] };
+    }
+    let run = startPoint ? [startPoint] : [];
+    for (let i = 0; i < points.length; i++) {
+        const point = points[i];
+        if (point.defined !== false) {
+            run.push(point);
+        }
+        else if (connectedType !== 'connect') {
+            if (run.length) {
+                runs.push(run);
+            }
+            run = [];
+        }
+    }
+    if (run.length) {
+        runs.push(run);
+    }
+    return { runs, tail: run[run.length - 1] };
+}
+function joinAreaPaths(paths) {
+    var _a;
+    if (paths.length === 1) {
+        return paths[0];
+    }
+    const curves = [];
+    for (let i = 0; i < paths.length; i++) {
+        const next = paths[i].curves;
+        if (curves.length) {
+            const previous = curves[curves.length - 1];
+            const gap = new LineCurve((_a = previous.p3) !== null && _a !== void 0 ? _a : previous.p1, next[0].p0);
+            gap.defined = false;
+            gap.originP1 = previous.originP2;
+            gap.originP2 = next[0].originP1;
+            curves.push(gap);
+        }
+        for (let j = 0; j < next.length; j++) {
+            curves.push(next[j]);
+        }
+    }
+    const path = paths[paths.length - 1];
+    path.curves = curves;
+    path.length = NaN;
+    return path;
+}
+function compileAreaRuns(runs, curveType, curveTension, sourceSegmentIndex, topStart, bottomStart) {
+    var _a, _b, _c, _d;
+    const tops = [];
+    const bottoms = [];
+    const bottomType = curveType === 'stepBefore' ? 'stepAfter' : curveType === 'stepAfter' ? 'stepBefore' : curveType;
+    for (let i = 0; i < runs.length; i++) {
+        const points = runs[i];
+        const startPoint = i === 0 ? topStart : undefined;
+        if (points.length < 2 - Number(!!startPoint)) {
+            continue;
+        }
+        const bottomPoints = [];
+        for (let j = points.length - 1; j >= 0; j--) {
+            const p = points[j];
+            bottomPoints.push({ x: (_a = p.x1) !== null && _a !== void 0 ? _a : p.x, y: (_b = p.y1) !== null && _b !== void 0 ? _b : p.y });
+        }
+        if (i === 0 && bottomStart) {
+            bottomPoints.push({ x: (_c = bottomStart.x1) !== null && _c !== void 0 ? _c : bottomStart.x, y: (_d = bottomStart.y1) !== null && _d !== void 0 ? _d : bottomStart.y });
+        }
+        const top = calcLineCache(points, curveType, { startPoint, curveTension });
+        const bottom = calcLineCache(bottomPoints, bottomType, { curveTension });
+        if ((top === null || top === void 0 ? void 0 : top.curves.length) && (bottom === null || bottom === void 0 ? void 0 : bottom.curves.length)) {
+            tops.push(top);
+            bottoms.push(bottom);
+        }
+    }
+    if (!tops.length) {
+        return null;
+    }
+    return {
+        top: joinAreaPaths(tops),
+        bottom: joinAreaPaths(bottoms.reverse()),
+        sourceSegmentIndex,
+        direction: Direction.ROW
+    };
+}
+function calcAreaCache(points, segments, curveType, connectedType, curveTension) {
+    var _a;
+    const caches = [];
+    let tail;
+    let topTail;
+    let first;
+    let last;
+    const count = segments ? segments.length : 1;
+    for (let i = 0; i < count; i++) {
+        const segmentPoints = segments ? segments[i].points : points !== null && points !== void 0 ? points : [];
+        const result = getAreaPointRuns(segmentPoints, connectedType);
+        const canContinue = connectedType === 'connect' || ((_a = segmentPoints[0]) === null || _a === void 0 ? void 0 : _a.defined) !== false;
+        if (result.runs.length) {
+            first = first !== null && first !== void 0 ? first : result.runs[0][0];
+            const lastRun = result.runs[result.runs.length - 1];
+            last = lastRun[lastRun.length - 1];
+        }
+        const cache = compileAreaRuns(result.runs, curveType, curveTension, i, canContinue ? topTail : undefined, canContinue ? tail : undefined);
+        if (cache) {
+            caches.push(cache);
+        }
+        if (result.tail) {
+            tail = result.tail;
+            const lastRun = result.runs[result.runs.length - 1];
+            topTail =
+                cache && (result.runs.length === 1 || lastRun.length > 1) ? { x: cache.top.endX, y: cache.top.endY } : tail;
+        }
+        else if (connectedType !== 'connect' && segmentPoints.length) {
+            tail = topTail = undefined;
+        }
+    }
+    if (!caches.length) {
+        return null;
+    }
+    let direction = Direction.ROW;
+    if (last.x1 != null) {
+        const dx = abs(last.x - first.x);
+        const dy = abs(last.y - first.y);
+        if (last.y1 == null || (Number.isFinite(dx + dy) && dy >= dx)) {
+            direction = Direction.COLUMN;
+        }
+    }
+    for (let i = 0; i < caches.length; i++) {
+        caches[i].direction = direction;
+    }
+    return segments ? caches : caches[0];
+}
+
 function drawEachCurve(path, curve, lastCurve, defined0, offsetX, offsetY, offsetZ) {
     var _a;
     let p0 = curve.p0;
@@ -25012,31 +25169,27 @@ function drawIncrementalSegments(path, lastSeg, segments, params) {
     });
 }
 function drawIncrementalAreaSegments(path, lastSeg, segments, params) {
-    const { offsetX = 0, offsetY = 0 } = params || {};
-    const { points } = segments;
-    const definedPointsList = [];
-    for (let i = 0; i < points.length; i++) {
-        if (points[i].defined === false) ;
-    }
-    definedPointsList.push(points);
-    definedPointsList.forEach((points, i) => {
-        var _a, _b, _c, _d;
-        const startP = lastSeg && i === 0 ? lastSeg.points[lastSeg.points.length - 1] : points[0];
-        path.moveTo(startP.x + offsetX, startP.y + offsetY);
-        points.forEach(p => {
-            if (p.defined === false) {
-                path.moveTo(p.x + offsetX, p.y + offsetY);
-                return;
-            }
-            path.lineTo(p.x + offsetX, p.y + offsetY);
-        });
-        for (let i = points.length - 1; i >= 0; i--) {
-            const p = points[i];
+    var _a, _b;
+    const { offsetX = 0, offsetY = 0, connectedType = 'none' } = params || {};
+    const startPoint = params && 'startPoint' in params
+        ? params.startPoint
+        : lastSeg && getAreaPointRuns(lastSeg.points, connectedType).tail;
+    const { runs } = getAreaPointRuns(segments.points, connectedType, startPoint);
+    for (let i = 0; i < runs.length; i++) {
+        const points = runs[i];
+        if (points.length < 2) {
+            continue;
+        }
+        path.moveTo(points[0].x + offsetX, points[0].y + offsetY);
+        for (let j = 1; j < points.length; j++) {
+            path.lineTo(points[j].x + offsetX, points[j].y + offsetY);
+        }
+        for (let j = points.length - 1; j >= 0; j--) {
+            const p = points[j];
             path.lineTo((_a = p.x1) !== null && _a !== void 0 ? _a : p.x, (_b = p.y1) !== null && _b !== void 0 ? _b : p.y);
         }
-        path.lineTo((_c = startP.x1) !== null && _c !== void 0 ? _c : startP.x, (_d = startP.y1) !== null && _d !== void 0 ? _d : startP.y);
         path.closePath();
-    });
+    }
 }
 
 class DefaultCanvasLineRender extends BaseRender {
@@ -25465,7 +25618,6 @@ class DefaultCanvasAreaRender extends BaseRender {
         _runStroke();
     }
     drawShape(area, context, x, y, drawContext, params, fillCb, strokeCb) {
-        var _a, _b, _c, _d, _e, _f;
         const areaAttribute = getTheme(area, params === null || params === void 0 ? void 0 : params.theme).area;
         const { fill = areaAttribute.fill, stroke = areaAttribute.stroke, fillOpacity = areaAttribute.fillOpacity, z = areaAttribute.z, strokeOpacity = areaAttribute.strokeOpacity, curveTension = areaAttribute.curveTension, connectedType = areaAttribute.connectedType } = area.attribute;
         const data = this.valid(area, areaAttribute, fillCb, strokeCb);
@@ -25479,104 +25631,24 @@ class DefaultCanvasAreaRender extends BaseRender {
         if (closePath && curveType === 'linear') {
             curveType = 'linearClosed';
         }
-        function parsePoint(points, connectedType) {
-            if (connectedType !== 'connect') {
-                return points;
-            }
-            return points.filter(p => p.defined !== false);
-        }
         if (clipRange === 1 && !segments && !points.some(p => p.defined === false) && curveType === 'linear') {
             return this.drawLinearAreaHighPerformance(area, context, !!fill, doStroke, fillOpacity, strokeOpacity, x, y, areaAttribute, drawContext, params, fillCb, strokeCb);
         }
         if (area.shouldUpdateShape()) {
-            if (segments && segments.length) {
-                let startPoint;
-                let lastTopSeg;
-                const topCaches = segments
-                    .map((seg, index) => {
-                    if (seg.points.length <= 1) {
-                        if (index === 0) {
-                            seg.points[0] && (lastTopSeg = { endX: seg.points[0].x, endY: seg.points[0].y });
-                            return null;
-                        }
-                    }
-                    if (index === 1) {
-                        startPoint = { x: lastTopSeg.endX, y: lastTopSeg.endY };
-                    }
-                    else if (index > 1) {
-                        startPoint.x = lastTopSeg.endX;
-                        startPoint.y = lastTopSeg.endY;
-                    }
-                    const data = calcLineCache(parsePoint(seg.points, connectedType), curveType, {
-                        startPoint,
-                        curveTension
-                    });
-                    lastTopSeg = data;
-                    return data;
-                })
-                    .filter(item => !!item);
-                let lastBottomSeg;
-                const bottomCaches = [];
-                for (let i = segments.length - 1; i >= 0; i--) {
-                    const points = segments[i].points;
-                    const bottomPoints = [];
-                    for (let i = points.length - 1; i >= 0; i--) {
-                        bottomPoints.push({
-                            x: (_a = points[i].x1) !== null && _a !== void 0 ? _a : points[i].x,
-                            y: (_b = points[i].y1) !== null && _b !== void 0 ? _b : points[i].y
-                        });
-                    }
-                    if (i !== 0) {
-                        const lastSegmentPoints = segments[i - 1].points;
-                        const endPoint = lastSegmentPoints[lastSegmentPoints.length - 1];
-                        endPoint &&
-                            bottomPoints.push({
-                                x: (_c = endPoint.x1) !== null && _c !== void 0 ? _c : endPoint.x,
-                                y: (_d = endPoint.y1) !== null && _d !== void 0 ? _d : endPoint.y
-                            });
-                    }
-                    if (bottomPoints.length > 1) {
-                        lastBottomSeg = calcLineCache(parsePoint(bottomPoints, connectedType), curveType === 'stepBefore' ? 'stepAfter' : curveType === 'stepAfter' ? 'stepBefore' : curveType, { curveTension });
-                        bottomCaches.unshift(lastBottomSeg);
-                    }
-                }
-                area.cacheArea = bottomCaches.map((item, index) => ({
-                    top: topCaches[index],
-                    bottom: item
-                }));
-            }
-            else if (points && points.length) {
-                const topPoints = parsePoint(points, connectedType);
-                const bottomPoints = [];
-                for (let i = topPoints.length - 1; i >= 0; i--) {
-                    bottomPoints.push({
-                        x: (_e = topPoints[i].x1) !== null && _e !== void 0 ? _e : topPoints[i].x,
-                        y: (_f = topPoints[i].y1) !== null && _f !== void 0 ? _f : topPoints[i].y
-                    });
-                }
-                const topCache = calcLineCache(topPoints, curveType, { curveTension });
-                const bottomCache = calcLineCache(bottomPoints, curveType === 'stepBefore' ? 'stepAfter' : curveType === 'stepAfter' ? 'stepBefore' : curveType, { curveTension });
-                area.cacheArea = { top: topCache, bottom: bottomCache };
-            }
-            else {
-                area.cacheArea = null;
-                area.clearUpdateShapeTag();
-                return;
-            }
+            area.cacheArea = calcAreaCache(points, segments, curveType, connectedType, curveTension);
             area.clearUpdateShapeTag();
         }
+        if (!area.cacheArea) {
+            return;
+        }
         if (Array.isArray(area.cacheArea)) {
-            const segments = area.attribute.segments.filter(item => item.points.length);
-            if (segments[0].points.length === 1) {
-                segments.shift();
-            }
             if (clipRange === 1) {
                 let skip = false;
-                area.cacheArea.forEach((cache, index) => {
+                area.cacheArea.forEach(cache => {
                     if (skip) {
                         return;
                     }
-                    skip = this.drawSegmentItem(context, cache, doFill, fillOpacity, doStroke, strokeOpacity, segments[index], [areaAttribute, area.attribute], clipRange, x, y, z, area, drawContext, fillCb, strokeCb);
+                    skip = this.drawSegmentItem(context, cache, doFill, fillOpacity, doStroke, strokeOpacity, segments[cache.sourceSegmentIndex], [areaAttribute, area.attribute], clipRange, x, y, z, area, drawContext, fillCb, strokeCb);
                 });
             }
             else {
@@ -25584,7 +25656,7 @@ class DefaultCanvasAreaRender extends BaseRender {
                 const totalDrawLength = clipRange * totalLength;
                 let drawedLengthUntilLast = 0;
                 let skip = false;
-                area.cacheArea.forEach((cache, index) => {
+                area.cacheArea.forEach(cache => {
                     if (skip) {
                         return;
                     }
@@ -25592,7 +25664,7 @@ class DefaultCanvasAreaRender extends BaseRender {
                     const _cr = (totalDrawLength - drawedLengthUntilLast) / curSegLength;
                     drawedLengthUntilLast += curSegLength;
                     if (_cr > 0) {
-                        skip = this.drawSegmentItem(context, cache, doFill, fillOpacity, doStroke, strokeOpacity, segments[index], [areaAttribute, area.attribute], min(_cr, 1), x, y, z, area, drawContext, fillCb, strokeCb);
+                        skip = this.drawSegmentItem(context, cache, doFill, fillOpacity, doStroke, strokeOpacity, segments[cache.sourceSegmentIndex], [areaAttribute, area.attribute], min(_cr, 1), x, y, z, area, drawContext, fillCb, strokeCb);
                     }
                 });
             }
@@ -25609,6 +25681,7 @@ class DefaultCanvasAreaRender extends BaseRender {
         return this._drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, fillCb, strokeCb);
     }
     _drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, fillCb, strokeCb) {
+        var _a;
         if (!(cache &&
             cache.top &&
             cache.bottom &&
@@ -25620,34 +25693,7 @@ class DefaultCanvasAreaRender extends BaseRender {
         }
         context.beginPath();
         const ret = false;
-        const { points, segments } = area.attribute;
-        let direction = Direction.ROW;
-        let endP;
-        let startP;
-        if (segments) {
-            const endSeg = segments[segments.length - 1];
-            const startSeg = segments[0];
-            startP = startSeg.points[0];
-            endP = endSeg.points[endSeg.points.length - 1];
-        }
-        else {
-            startP = points[0];
-            endP = points[points.length - 1];
-        }
-        const xTotalLength = abs(endP.x - startP.x);
-        const yTotalLength = abs(endP.y - startP.y);
-        if (endP.x1 == null) {
-            direction = Direction.ROW;
-        }
-        else if (endP.y1 == null) {
-            direction = Direction.COLUMN;
-        }
-        else if (!Number.isFinite(xTotalLength + yTotalLength)) {
-            direction = Direction.ROW;
-        }
-        else {
-            direction = xTotalLength > yTotalLength ? Direction.ROW : Direction.COLUMN;
-        }
+        const direction = (_a = cache.direction) !== null && _a !== void 0 ? _a : cache.top.direction;
         drawAreaSegments(context, cache, clipRange, {
             offsetX,
             offsetY,
@@ -27288,6 +27334,21 @@ function createMiniappApp(options = {}) {
     return new MiniappEntry(options);
 }
 
+function previousPoint(segments, index, connectedType) {
+    for (let i = index - 1; i >= 0; i--) {
+        const points = segments[i].points;
+        for (let j = points.length - 1; j >= 0; j--) {
+            const point = points[j];
+            if (point.defined !== false) {
+                return point;
+            }
+            if (connectedType !== 'connect') {
+                return undefined;
+            }
+        }
+    }
+    return undefined;
+}
 class DefaultIncrementalCanvasAreaRender extends DefaultCanvasAreaRender {
     constructor() {
         super(...arguments);
@@ -27301,7 +27362,7 @@ class DefaultIncrementalCanvasAreaRender extends DefaultCanvasAreaRender {
                 return;
             }
             const areaAttribute = getTheme(area).area;
-            const { fill = areaAttribute.fill, fillOpacity = areaAttribute.fillOpacity, opacity = areaAttribute.opacity, visible = areaAttribute.visible } = area.attribute;
+            const { fill = areaAttribute.fill, fillOpacity = areaAttribute.fillOpacity, opacity = areaAttribute.opacity, visible = areaAttribute.visible, connectedType = areaAttribute.connectedType } = area.attribute;
             const fVisible = fillVisible(opacity, fillOpacity, fill);
             const doFill = runFill(fill);
             if (!(area.valid && visible)) {
@@ -27313,22 +27374,33 @@ class DefaultIncrementalCanvasAreaRender extends DefaultCanvasAreaRender {
             if (!(fVisible || fillCb)) {
                 return;
             }
-            for (let i = startAtIdx; i < startAtIdx + length; i++) {
-                this.drawIncreaseSegment(area, context, segments[i - 1], segments[i], area.attribute.segments[i], [areaAttribute, area.attribute], x, y);
+            const endIndex = Math.min(startAtIdx + length, segments.length);
+            for (let i = startAtIdx; i < endIndex; i++) {
+                if (!segments[i].points.some(p => p.defined !== false)) {
+                    continue;
+                }
+                this.drawIncreaseSegment(area, context, segments[i - 1], segments[i], area.attribute.segments[i], [areaAttribute, area.attribute], x, y, { connectedType, startPoint: previousPoint(segments, i, connectedType) });
             }
         }
         else {
             super.drawShape(area, context, x, y, drawContext, params, fillCb);
         }
     }
-    drawIncreaseSegment(area, context, lastSeg, seg, attribute, defaultAttribute, offsetX, offsetY) {
+    drawIncreaseSegment(area, context, lastSeg, seg, attribute, defaultAttribute, offsetX, offsetY, continuity) {
+        var _a, _b;
         if (!seg) {
             return;
         }
+        const connectedType = (_b = (_a = continuity === null || continuity === void 0 ? void 0 : continuity.connectedType) !== null && _a !== void 0 ? _a : area.attribute.connectedType) !== null && _b !== void 0 ? _b : getTheme(area).area.connectedType;
+        const startPoint = continuity
+            ? continuity.startPoint
+            : lastSeg && getAreaPointRuns(lastSeg.points, connectedType).tail;
         context.beginPath();
         drawIncrementalAreaSegments(context.camera ? context : context.nativeContext, lastSeg, seg, {
             offsetX,
-            offsetY
+            offsetY,
+            connectedType,
+            startPoint
         });
         context.setShadowBlendStyle && context.setShadowBlendStyle(area, attribute, defaultAttribute);
         context.setCommonStyle(area, attribute, offsetX, offsetY, defaultAttribute);

package/es/canvas/conical-gradient.js

@@ -123,4 +123,4 @@ export function createConicalGradient(context, stops, x, y, deltaAngle, startAng
     pattern && ConicalPatternStore.Set(stops, x, y, startAngle, endAngle, pattern, width, height), 
     pattern;
 }
-//# sourceMappingURL=conical-gradient.js.map
+//# sourceMappingURL=conical-gradient.js.map

package/es/canvas/constants.js

@@ -1,4 +1,4 @@
 export const CanvasFactory = Symbol.for("CanvasFactory");
 
 export const Context2dFactory = Symbol.for("Context2dFactory");
-//# sourceMappingURL=constants.js.map
+//# sourceMappingURL=constants.js.map

package/es/canvas/empty-context.js

@@ -206,4 +206,4 @@ export class EmptyContext2d {
         this.stack.forEach((m => matrixAllocate.free(m))), this.stack.length = 0;
     }
 }
-//# sourceMappingURL=empty-context.js.map
+//# sourceMappingURL=empty-context.js.map

package/es/canvas/index.js

@@ -5,4 +5,4 @@ export * from "./empty-context";
 export * from "./contributions/base-canvas";
 
 export * from "./conical-gradient";
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/es/canvas/util.js

@@ -382,4 +382,4 @@ export function contain(commands, x, y) {
 export function containStroke(commands, lineWidth, x, y) {
     return containPath(commands, lineWidth, !0, x, y);
 }
-//# sourceMappingURL=util.js.map
+//# sourceMappingURL=util.js.map