@leafer/miniapp 2.1.11 → 2.2.0

package/dist/miniapp.module.js

@@ -817,6 +817,11 @@ const PointHelper = {
     toOuterOf(t, matrix, to) {
         toOuterPoint$4(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,
@@ -6985,7 +6990,7 @@ class LeafLevelList {
     }
 }
 
-const version = "2.1.11";
+const version = "2.2.0";
 
 class LeaferCanvas extends LeaferCanvasBase {
     get allowBackgroundColor() {
@@ -9788,7 +9793,7 @@ let Text = class Text extends UI {
         data.__font = `${italic ? "italic " : ""}${textCase === "small-caps" ? "small-caps " : ""}${fontWeight !== "normal" ? fontWeight + " " : ""}${fontSize || 12}px ${fontFamily || "caption"}`;
         stintSet$3(data, "__padding", padding && MathHelper.fourNumber(padding));
         stintSet$3(data, "__clipText", textOverflow !== "show" && !data.__autoSize);
-        stintSet$3(data, "__isCharMode", width || height || data.__letterSpacing || textCase !== "none");
+        stintSet$3(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() {
@@ -9813,7 +9818,7 @@ let Text = class Text extends UI {
             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() {
@@ -11416,8 +11421,10 @@ ui$5.__hit = function(inner, forceHitFill) {
     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;
@@ -11451,9 +11458,9 @@ rect.__hitFill = box$3.__hitFill = function(inner) {
 };
 
 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));
 };
 
 Group.prototype.pick = function(hitPoint, options) {
@@ -11640,7 +11647,8 @@ 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;
@@ -13002,7 +13010,8 @@ 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");
@@ -13015,8 +13024,8 @@ function layoutChar(drawData, style, width, _height) {
                 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);
@@ -13217,6 +13226,7 @@ function getDrawData$1(content, style) {
     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$3], width -= padding[right$3] + padding[left$3], !width && (width = .01); else if (!style.autoSizeAlign) x = padding[left$3];
         if (height) y = padding[top$2], height -= padding[top$2] + padding[bottom$2], !height && (height = .01); else if (!style.autoSizeAlign) y = padding[top$2];
@@ -19111,7 +19121,7 @@ const HighCurveHelper = {
     },
     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];
@@ -19136,6 +19146,7 @@ const HighCurveHelper = {
                 break;
 
               case Z$1:
+                closed = true;
                 i += 1;
 
               default:
@@ -19147,13 +19158,16 @@ const HighCurveHelper = {
         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;
@@ -19165,15 +19179,20 @@ const HighCurveHelper = {
                 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;
@@ -19184,9 +19203,9 @@ const HighCurveHelper = {
                 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;
@@ -19203,7 +19222,7 @@ const HighCurveHelper = {
                 distance = 0;
             }
             index++;
-            total += distance;
+            nowDistance += distance;
         }
         return to;
     },
@@ -19302,26 +19321,57 @@ const {updateMatrix: updateMatrix, updateAllMatrix: updateAllMatrix} = LeafHelpe
 
 const {updateBounds: updateBounds} = BranchHelper;
 
+const {toVertical: toVertical} = PointHelper;
+
 UI.addAttr("motionPath", undefined, motionPathType);
 
 UI.addAttr("motionPrecision", 1, motionPathType);
 
 UI.addAttr("motion", undefined, motionPathType);
 
+UI.addAttr("motionVertical", "below", motionPathType);
+
 UI.addAttr("motionRotation", true, motionPathType);
 
+ui$2.getMotionPath = function() {
+    return getMotionPath(this);
+};
+
 ui$2.getMotionPathData = function() {
     return getMotionPathData(getMotionPath(this));
 };
 
-ui$2.getMotionPoint = function(motionDistance) {
-    const path = getMotionPath(this);
-    const data = getMotionPathData(path);
+ui$2.getMotionContentHeight = function() {
+    return this.__layout.boxBounds.height;
+};
+
+ui$2.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;
 };
 
@@ -19353,7 +19403,11 @@ function updateMotion(leaf) {
         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);
         }
@@ -19375,7 +19429,8 @@ function getMotionPath(leaf) {
 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;
 }
 
 function stateType(defaultValue, styleName) {