leafer-game 2.1.10 → 2.2.0

package/dist/web.js

@@ -811,6 +811,11 @@ var LeaferUI = function(exports) {
         toOuterOf(t, matrix, to) {
             toOuterPoint$3(matrix, t, to);
         },
+        toVertical(t, rotation, verticalDistance, to) {
+            const r = rotation * OneRadian;
+            t.x += -Math.sin(r) * verticalDistance;
+            t.y += Math.cos(r) * verticalDistance;
+        },
         getCenter(t, to) {
             return {
                 x: t.x + (to.x - t.x) / 2,
@@ -1223,7 +1228,6 @@ var LeaferUI = function(exports) {
         },
         copyAndSpread(t, bounds, spread, isShrink, side) {
             const {x: x, y: y, width: width, height: height} = bounds;
-            if (!spread) spread = 0;
             if (isArray(spread)) {
                 const four = fourNumber$1(spread);
                 isShrink ? B.set(t, x + four[3], y + four[0], width - four[1] - four[3], height - four[2] - four[0]) : B.set(t, x - four[3], y - four[0], width + four[1] + four[3], height + four[2] + four[0]);
@@ -3367,7 +3371,8 @@ var LeaferUI = function(exports) {
                     return;
                 }
             }
-        }
+        },
+        drawPathByPoints(_drawer, _points, _closed) {}
     };
     const {M: M$2, L: L$3, C: C$1, Q: Q, Z: Z$2, N: N, D: D$1, X: X, G: G, F: F$1, O: O, P: P, U: U} = PathCommandMap;
     const {toTwoPointBounds: toTwoPointBounds, toTwoPointBoundsByQuadraticCurve: toTwoPointBoundsByQuadraticCurve, arcTo: arcTo$1, arc: arc, ellipse: ellipse$1} = BezierHelper;
@@ -6569,7 +6574,7 @@ var LeaferUI = function(exports) {
             this.levelMap = null;
         }
     }
-    const version = "2.1.10";
+    const version = "2.2.0";
     const debug$5 = Debug.get("LeaferCanvas");
     class LeaferCanvas extends LeaferCanvasBase {
         set zIndex(zIndex) {
@@ -8226,8 +8231,9 @@ var LeaferUI = function(exports) {
             this.__drawPathByData(canvas, data.__pathForRender);
         }
         __drawPath(canvas) {
+            const data = this.__;
             canvas.beginPath();
-            this.__drawPathByData(canvas, this.__.path, true);
+            data.__usePointsMode ? PathDrawer.drawPathByPoints(canvas, data.points, data.closed) : this.__drawPathByData(canvas, data.path, true);
         }
         __drawPathByData(drawer, data, ignoreCornerRadius) {
             data ? PathDrawer.drawPathByData(drawer, data) : this.__drawPathByBox(drawer, ignoreCornerRadius);
@@ -8963,6 +8969,9 @@ var LeaferUI = function(exports) {
         get __tag() {
             return "Polygon";
         }
+        get isPointsMode() {
+            return this.points && !this.pathInputed;
+        }
         __updatePath() {
             const data = this.__;
             const path = data.path = [];
@@ -9023,6 +9032,9 @@ var LeaferUI = function(exports) {
         get __tag() {
             return "Line";
         }
+        get isPointsMode() {
+            return this.points && !this.pathInputed;
+        }
         get toPoint() {
             const {width: width, rotation: rotation} = this.__;
             const to = getPointData();
@@ -9158,7 +9170,7 @@ var LeaferUI = function(exports) {
             data.__font = `${italic ? "italic " : ""}${textCase === "small-caps" ? "small-caps " : ""}${fontWeight !== "normal" ? fontWeight + " " : ""}${fontSize || 12}px ${fontFamily || "caption"}`;
             stintSet$1(data, "__padding", padding && MathHelper.fourNumber(padding));
             stintSet$1(data, "__clipText", textOverflow !== "show" && !data.__autoSize);
-            stintSet$1(data, "__isCharMode", width || height || data.__letterSpacing || textCase !== "none");
+            stintSet$1(data, "__isCharMode", width || height || data.__letterSpacing || data.motionText || textCase !== "none");
             data.__textDrawData = TextConvert.getDrawData((data.__isPlacehold = data.placeholder && data.text === "") ? data.placeholder : data.text, this.__);
         }
         __updateBoxBounds() {
@@ -9183,7 +9195,7 @@ var LeaferUI = function(exports) {
                 this.__updateNaturalSize();
             } else super.__updateBoxBounds();
             if (italic) b.width += fontSize * .16;
-            DataHelper.stintSet(this, "isOverflow", !includes(b, contentBounds));
+            DataHelper.stintSet(this, "isOverflow", !includes(b, contentBounds) && !data.motionText);
             if (this.isOverflow) setList(data.__textBoxBounds = {}, [ b, contentBounds ]), layout.renderChanged = true; else data.__textBoxBounds = b;
         }
         __updateRenderSpread() {
@@ -10631,8 +10643,10 @@ var LeaferUI = function(exports) {
         if (!needHitFillPath && !needHitStrokePath) return false;
         const radiusWidth = inner.radiusX * 2;
         let hitWidth = radiusWidth;
+        let {strokeAlign: strokeAlign} = data;
+        if (data.motionText) hitWidth += data.fontSize / 2, strokeAlign = "center";
         if (needHitStrokePath) {
-            switch (data.strokeAlign) {
+            switch (strokeAlign) {
               case "inside":
                 hitWidth += strokeWidth * 2;
                 if (!needHitFillPath && this.__hitFill(inner) && this.__hitStroke(inner, hitWidth)) return true;
@@ -10662,9 +10676,9 @@ var LeaferUI = function(exports) {
         return this.__hitCanvas ? ui$4.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
     };
     exports.Text.prototype.__drawHitPath = function(canvas) {
-        const {__lineHeight: __lineHeight, fontSize: fontSize, __baseLine: __baseLine, __letterSpacing: __letterSpacing, __textDrawData: data} = this.__;
+        const data = this.__, {__lineHeight: __lineHeight, fontSize: fontSize, __baseLine: __baseLine, __letterSpacing: __letterSpacing, __textDrawData: drawData} = data;
         canvas.beginPath();
-        if (__letterSpacing < 0) this.__drawPathByBox(canvas); else data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight < fontSize ? fontSize : __lineHeight));
+        if (data.motionText) this.__drawPathByData(canvas, data.__pathForMotionText); else if (__letterSpacing < 0) this.__drawPathByBox(canvas); else drawData.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight < fontSize ? fontSize : __lineHeight));
     };
     exports.Group.prototype.pick = function(hitPoint, options) {
         options || (options = emptyData);
@@ -11015,8 +11029,7 @@ var LeaferUI = function(exports) {
         destroy() {
             if (this.view) {
                 super.destroy();
-                this.view = null;
-                this.touches = null;
+                this.view = this.touches = null;
             }
         }
     }
@@ -11059,7 +11072,8 @@ var LeaferUI = function(exports) {
     function fillPathOrText(ui, canvas, renderOptions) {
         ui.__.__font ? Paint.fillText(ui, canvas, renderOptions) : ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill();
     }
-    function fillText(ui, canvas, _renderOptions) {
+    function fillText(ui, canvas, renderOptions) {
+        if (ui.motionText) return Paint.fillMotionText(ui, canvas, renderOptions);
         const data = ui.__, {rows: rows, decorationY: decorationY} = data.__textDrawData;
         if (data.__isPlacehold && data.placeholderColor) canvas.fillStyle = data.placeholderColor;
         let row;
@@ -12292,7 +12306,8 @@ var LeaferUI = function(exports) {
     const TextMode = 2;
     function layoutChar(drawData, style, width, _height) {
         const {rows: rows} = drawData;
-        const {textAlign: textAlign, paraIndent: paraIndent, __letterSpacing: __letterSpacing} = style;
+        const {textAlign: textAlign, paraIndent: paraIndent} = style;
+        const useLetter = style.__letterSpacing || style.motionText;
         const justifyLast = width && textAlign.includes("both");
         const justify = justifyLast || width && textAlign.includes("justify");
         const justifyLetter = justify && textAlign.includes("letter");
@@ -12305,8 +12320,8 @@ var LeaferUI = function(exports) {
                     remainingWidth = width - row.width - indentWidth;
                     if (justifyLetter) addLetterWidth = remainingWidth / (row.words.reduce((total, item) => total + item.data.length, 0) - 1); else addWordWidth = wordsLength > 1 ? remainingWidth / (wordsLength - 1) : 0;
                 }
-                mode = __letterSpacing || row.isOverflow || justifyLetter ? CharMode : addWordWidth ? WordMode : TextMode;
-                if (row.isOverflow && !__letterSpacing) row.textMode = true;
+                mode = useLetter || row.isOverflow || justifyLetter ? CharMode : addWordWidth ? WordMode : TextMode;
+                if (row.isOverflow && !useLetter) row.textMode = true;
                 if (mode === TextMode) {
                     row.x += indentWidth;
                     toTextChar$1(row);
@@ -12498,6 +12513,7 @@ var LeaferUI = function(exports) {
         let width = style.__getInput("width") || 0;
         let height = style.__getInput("height") || 0;
         const {__padding: padding} = style;
+        if (style.motionText) width = height = 0;
         if (padding) {
             if (width) x = padding[left], width -= padding[right] + padding[left], !width && (width = .01); else if (!style.autoSizeAlign) x = padding[left];
             if (height) y = padding[top], height -= padding[top] + padding[bottom], !height && (height = .01); else if (!style.autoSizeAlign) y = padding[top];
@@ -14119,7 +14135,7 @@ var LeaferUI = function(exports) {
         },
         getMotionPathData(data) {
             let total = 0, distance, segments = [];
-            let i = 0, x = 0, y = 0, toX, toY, command;
+            let i = 0, x = 0, y = 0, toX, toY, command, closed;
             const len = data.length;
             while (i < len) {
                 command = data[i];
@@ -14144,6 +14160,7 @@ var LeaferUI = function(exports) {
                     break;
 
                   case Z:
+                    closed = true;
                     i += 1;
 
                   default:
@@ -14155,13 +14172,16 @@ var LeaferUI = function(exports) {
             return {
                 total: total,
                 segments: segments,
-                data: data
+                data: data,
+                closed: closed
             };
         },
-        getDistancePoint(distanceData, motionDistance, motionPrecision) {
-            const {segments: segments, data: data} = distanceData;
-            motionDistance = UnitConvert.number(motionDistance, distanceData.total);
-            let total = 0, distance, to = {};
+        getDistancePoint(distanceData, motionDistance, motionPrecision, offsetX) {
+            const {segments: segments, data: data, total: total} = distanceData;
+            motionDistance = UnitConvert.number(motionDistance, total);
+            if (offsetX) motionDistance += offsetX;
+            if (motionDistance > total) motionDistance = motionDistance % total;
+            let nowDistance = 0, distance, to = {};
             let i = 0, index = 0, x = 0, y = 0, toX, toY, command;
             let x1, y1, x2, y2, t;
             const len = data.length;
@@ -14173,15 +14193,20 @@ var LeaferUI = function(exports) {
                     toX = data[i + 1];
                     toY = data[i + 2];
                     distance = segments[index];
-                    if (total + distance >= motionDistance || !distanceData.total) {
-                        if (!i) x = toX, y = toY;
-                        tempFrom.x = x;
-                        tempFrom.y = y;
+                    if (nowDistance + distance >= motionDistance || !distanceData.total) {
                         to.x = toX;
                         to.y = toY;
-                        PointHelper.getDistancePoint(tempFrom, to, motionDistance - total, true);
-                        to.rotation = PointHelper.getAngle(tempFrom, to);
-                        return to;
+                        if (i) {
+                            tempFrom.x = x;
+                            tempFrom.y = y;
+                            PointHelper.getDistancePoint(tempFrom, to, motionDistance - nowDistance, true);
+                            to.rotation = PointHelper.getAngle(tempFrom, to);
+                            return to;
+                        } else {
+                            const nextPoint = HighCurveHelper.getDistancePoint(distanceData, motionPrecision, motionPrecision, offsetX);
+                            to.rotation = nextPoint.rotation;
+                            return to;
+                        }
                     }
                     x = toX;
                     y = toY;
@@ -14192,9 +14217,9 @@ var LeaferUI = function(exports) {
                     toX = data[i + 5];
                     toY = data[i + 6];
                     distance = segments[index];
-                    if (total + distance >= motionDistance) {
+                    if (nowDistance + distance >= motionDistance) {
                         x1 = data[i + 1], y1 = data[i + 2], x2 = data[i + 3], y2 = data[i + 4];
-                        t = HighBezierHelper.getT(motionDistance - total, distance, x, y, x1, y1, x2, y2, toX, toY, motionPrecision);
+                        t = HighBezierHelper.getT(motionDistance - nowDistance, distance, x, y, x1, y1, x2, y2, toX, toY, motionPrecision);
                         BezierHelper.getPointAndSet(t, x, y, x1, y1, x2, y2, toX, toY, to);
                         to.rotation = HighBezierHelper.getRotation(t, x, y, x1, y1, x2, y2, toX, toY);
                         return to;
@@ -14211,7 +14236,7 @@ var LeaferUI = function(exports) {
                     distance = 0;
                 }
                 index++;
-                total += distance;
+                nowDistance += distance;
             }
             return to;
         },
@@ -14302,21 +14327,48 @@ var LeaferUI = function(exports) {
     const ui$1 = exports.UI.prototype;
     const {updateMatrix: updateMatrix, updateAllMatrix: updateAllMatrix} = LeafHelper;
     const {updateBounds: updateBounds} = BranchHelper;
+    const {toVertical: toVertical} = PointHelper;
     exports.UI.addAttr("motionPath", undefined, motionPathType);
     exports.UI.addAttr("motionPrecision", 1, motionPathType);
     exports.UI.addAttr("motion", undefined, motionPathType);
+    exports.UI.addAttr("motionVertical", "below", motionPathType);
     exports.UI.addAttr("motionRotation", true, motionPathType);
+    ui$1.getMotionPath = function() {
+        return getMotionPath(this);
+    };
     ui$1.getMotionPathData = function() {
         return getMotionPathData(getMotionPath(this));
     };
-    ui$1.getMotionPoint = function(motionDistance) {
-        const path = getMotionPath(this);
-        const data = getMotionPathData(path);
+    ui$1.getMotionContentHeight = function() {
+        return this.__layout.boxBounds.height;
+    };
+    ui$1.getMotionPoint = function(motionDistance, motionVertical, pathElement, offsetX = 0, offsetY = 0) {
+        if (!pathElement) pathElement = getMotionPath(this);
+        const data = getMotionPathData(pathElement);
         if (!data.total) return {};
-        const point = HighCurveHelper.getDistancePoint(data, motionDistance, path.motionPrecision);
-        MatrixHelper.toOuterPoint(path.localTransform, point);
+        const point = HighCurveHelper.getDistancePoint(data, motionDistance, pathElement.motionPrecision, offsetX);
         const {motionRotation: motionRotation} = this;
-        if (motionRotation === false) delete point.rotation; else if (isNumber(motionRotation)) point.rotation += motionRotation;
+        if (isNumber(motionRotation)) point.rotation += motionRotation;
+        let verticalType, verticalOffset;
+        if (isObject(motionVertical)) verticalType = motionVertical.type, verticalOffset = motionVertical.offset; else if (isNumber(motionVertical)) verticalOffset = motionVertical; else verticalType = motionVertical;
+        if (verticalType !== "below" || offsetY) {
+            const {rotation: rotation} = point, height = this.getMotionContentHeight();
+            if (verticalOffset) offsetY += verticalType === "above" ? -verticalOffset : verticalOffset;
+            switch (verticalType) {
+              case "above":
+                toVertical(point, rotation, -height + offsetY);
+                break;
+
+              case "center":
+                toVertical(point, rotation, -height / 2 + offsetY);
+                break;
+
+              case "below":
+              default:
+                toVertical(point, rotation, offsetY);
+            }
+        }
+        MatrixHelper.toOuterPoint(pathElement.localTransform, point);
         return point;
     };
     ui$1.getMotionTotal = function() {
@@ -14345,7 +14397,11 @@ var LeaferUI = function(exports) {
             const data = getMotionPathData(leaf);
             if (data.total) leaf.__.__pathForRender = HighCurveHelper.getDistancePath(data, motion, leaf.motionPrecision);
         } else {
-            leaf.set(leaf.getMotionPoint(motion));
+            if (leaf.motionText) leaf.__updateMotionText(); else {
+                const point = leaf.getMotionPoint(motion);
+                if (leaf.motionRotation === false) delete point.rotation;
+                leaf.set(point);
+            }
             if (!leaf.__hasAutoLayout) {
                 if (leaf.isBranch) updateAllMatrix(leaf), updateBounds(leaf, leaf); else updateMatrix(leaf);
             }
@@ -14365,7 +14421,8 @@ var LeaferUI = function(exports) {
     function getMotionPathData(leaf) {
         const data = leaf.__;
         if (data.__pathForMotion) return data.__pathForMotion;
-        return data.__pathForMotion = HighCurveHelper.getMotionPathData(leaf.getPath(true, true));
+        const path = data.__pathForMotion = HighCurveHelper.getMotionPathData(leaf.getPath(true, true));
+        return path;
     }
     const {Yes: Yes, NoAndSkip: NoAndSkip, YesAndSkip: YesAndSkip} = exports.Answer;
     const idCondition = {}, classNameCondition = {}, tagCondition = {};