@leafer-in/motion-path 1.0.6-rc1

package/dist/motion-path.js

@@ -0,0 +1,321 @@
+this.LeaferIN = this.LeaferIN || {};
+this.LeaferIN.motionPath = (function (exports, draw) {
+    'use strict';
+
+    const gaussNodes = [0.1488743389, 0.4333953941, 0.6794095682, 0.8650633666, 0.9739065285];
+    const gaussWeights = [0.2955242247, 0.2692667193, 0.2190863625, 0.1494513491, 0.0666713443];
+    const { sqrt } = Math;
+    const HighBezierHelper = {
+        getDistance(fromX, fromY, x1, y1, x2, y2, toX, toY) {
+            let distance = 0, t1, t2, d1X, d1Y, d2X, d2Y;
+            for (let i = 0; i < gaussNodes.length; i++) {
+                t1 = 0.5 * (1 + gaussNodes[i]);
+                t2 = 0.5 * (1 - gaussNodes[i]);
+                d1X = getDerivative(t1, fromX, x1, x2, toX);
+                d1Y = getDerivative(t1, fromY, y1, y2, toY);
+                d2X = getDerivative(t2, fromX, x1, x2, toX);
+                d2Y = getDerivative(t2, fromY, y1, y2, toY);
+                distance += gaussWeights[i] * (sqrt(d1X * d1X + d1Y * d1Y) + sqrt(d2X * d2X + d2Y * d2Y));
+            }
+            return distance * 0.5;
+        },
+        getDerivative(t, fromV, v1, v2, toV) {
+            const o = 1 - t;
+            return 3 * o * o * (v1 - fromV) + 6 * o * t * (v2 - v1) + 3 * t * t * (toV - v2);
+        },
+        cut(data, t, fromX, fromY, x1, y1, x2, y2, toX, toY) {
+            const o = 1 - t;
+            const ax = o * fromX + t * x1, ay = o * fromY + t * y1;
+            const mbx = o * x1 + t * x2, mby = o * y1 + t * y2;
+            const mcx = o * x2 + t * toX, mcy = o * y2 + t * toY;
+            const bx = o * ax + t * mbx, by = o * ay + t * mby;
+            const mbcx = o * mbx + t * mcx, mbcy = o * mby + t * mcy;
+            const cx = o * bx + t * mbcx, cy = o * by + t * mbcy;
+            data.push(draw.PathCommandMap.C, ax, ay, bx, by, cx, cy);
+        }
+    };
+    const { getDerivative } = HighBezierHelper;
+
+    const { M, L, C, Z } = draw.PathCommandMap;
+    const tempPoint = {}, tempFrom = {};
+    const HighCurveHelper = {
+        transform(data, matrix) {
+            let i = 0, command;
+            const len = data.length;
+            while (i < len) {
+                command = data[i];
+                switch (command) {
+                    case M:
+                    case L:
+                        HighCurveHelper.transformPoints(data, matrix, i, 1);
+                        i += 3;
+                        break;
+                    case C:
+                        HighCurveHelper.transformPoints(data, matrix, i, 3);
+                        i += 7;
+                        break;
+                    case Z:
+                        i += 1;
+                }
+            }
+        },
+        transformPoints(data, matrix, start, pointCount) {
+            for (let i = start + 1, end = i + pointCount * 2; i < end; i += 2) {
+                tempPoint.x = data[i];
+                tempPoint.y = data[i + 1];
+                draw.MatrixHelper.toOuterPoint(matrix, tempPoint);
+                data[i] = tempPoint.x;
+                data[i + 1] = tempPoint.y;
+            }
+        },
+        getMotionPathData(data) {
+            let total = 0, distance, segments = [];
+            let i = 0, x = 0, y = 0, toX, toY, command;
+            const len = data.length;
+            while (i < len) {
+                command = data[i];
+                switch (command) {
+                    case M:
+                    case L:
+                        toX = data[i + 1];
+                        toY = data[i + 2];
+                        distance = (command === L && i > 0) ? draw.PointHelper.getDistanceFrom(x, y, toX, toY) : 0;
+                        x = toX;
+                        y = toY;
+                        i += 3;
+                        break;
+                    case C:
+                        toX = data[i + 5];
+                        toY = data[i + 6];
+                        distance = HighBezierHelper.getDistance(x, y, data[i + 1], data[i + 2], data[i + 3], data[i + 4], toX, toY);
+                        x = toX;
+                        y = toY;
+                        i += 7;
+                        break;
+                    case Z:
+                        i += 1;
+                    default:
+                        distance = 0;
+                }
+                segments.push(distance);
+                total += distance;
+            }
+            return { total, segments, data };
+        },
+        getDistancePoint(distanceData, motionDistance) {
+            const { segments, data } = distanceData;
+            motionDistance = draw.UnitConvert.number(motionDistance, distanceData.total);
+            let total = 0, distance, to = {};
+            let i = 0, index = 0, x = 0, y = 0, toX, toY, command;
+            const len = data.length;
+            while (i < len) {
+                command = data[i];
+                switch (command) {
+                    case M:
+                    case L:
+                        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;
+                            to.x = toX;
+                            to.y = toY;
+                            draw.PointHelper.getDistancePoint(tempFrom, to, motionDistance - total, true);
+                            to.rotation = draw.PointHelper.getAngle(tempFrom, to);
+                            return to;
+                        }
+                        x = toX;
+                        y = toY;
+                        i += 3;
+                        break;
+                    case C:
+                        toX = data[i + 5];
+                        toY = data[i + 6];
+                        distance = segments[index];
+                        if (total + distance > motionDistance) {
+                            const x1 = data[i + 1], y1 = data[i + 2], x2 = data[i + 3], y2 = data[i + 4];
+                            motionDistance -= total;
+                            draw.BezierHelper.getPointAndSet(motionDistance / distance, x, y, x1, y1, x2, y2, toX, toY, to);
+                            draw.BezierHelper.getPointAndSet(Math.max(0, motionDistance - 0.1) / distance, x, y, x1, y1, x2, y2, toX, toY, tempFrom);
+                            to.rotation = draw.PointHelper.getAngle(tempFrom, to);
+                            return to;
+                        }
+                        x = toX;
+                        y = toY;
+                        i += 7;
+                        break;
+                    case Z:
+                        i += 1;
+                    default:
+                        distance = 0;
+                }
+                index++;
+                total += distance;
+            }
+            return to;
+        },
+        getDistancePath(distanceData, motionDistance) {
+            const { segments, data } = distanceData, path = [];
+            motionDistance = draw.UnitConvert.number(motionDistance, distanceData.total);
+            let total = 0, distance, to = {};
+            let i = 0, index = 0, x = 0, y = 0, toX, toY, command;
+            const len = data.length;
+            while (i < len) {
+                command = data[i];
+                switch (command) {
+                    case M:
+                    case L:
+                        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;
+                            to.x = toX;
+                            to.y = toY;
+                            draw.PointHelper.getDistancePoint(tempFrom, to, motionDistance - total, true);
+                            path.push(command, to.x, to.y);
+                            return path;
+                        }
+                        x = toX;
+                        y = toY;
+                        i += 3;
+                        path.push(command, x, y);
+                        break;
+                    case C:
+                        const x1 = data[i + 1], y1 = data[i + 2], x2 = data[i + 3], y2 = data[i + 4];
+                        toX = data[i + 5];
+                        toY = data[i + 6];
+                        distance = segments[index];
+                        if (total + distance > motionDistance) {
+                            HighBezierHelper.cut(path, (motionDistance - total) / distance, x, y, x1, y1, x2, y2, toX, toY);
+                            return path;
+                        }
+                        x = toX;
+                        y = toY;
+                        i += 7;
+                        path.push(command, x1, y1, x2, y2, toX, toY);
+                        break;
+                    case Z:
+                        i += 1;
+                        path.push(command);
+                    default:
+                        distance = 0;
+                }
+                index++;
+                total += distance;
+            }
+            return path;
+        }
+    };
+
+    function motionPathType(defaultValue) {
+        return draw.decorateLeafAttr(defaultValue, (key) => draw.attr({
+            set(value) {
+                this.__setAttr(key, value);
+                this.__hasMotionPath = this.motionPath || !draw.isNull(this.motion);
+                this.__layout.matrixChanged || this.__layout.matrixChange();
+            }
+        }));
+    }
+
+    draw.Transition.register('motion', function (from, to, t, target) {
+        if (!from)
+            from = 0;
+        else if (typeof from === 'object')
+            from = draw.UnitConvert.number(from, target.getMotionTotal());
+        if (!to)
+            to = 0;
+        else if (typeof to === 'object')
+            to = draw.UnitConvert.number(to, target.getMotionTotal());
+        return draw.Transition.number(from, to, t);
+    });
+    const ui = draw.UI.prototype;
+    motionPathType()(ui, 'motionPath');
+    motionPathType()(ui, 'motion');
+    motionPathType(true)(ui, 'motionRotation');
+    ui.getMotionPathData = function () {
+        const { parent } = this;
+        if (!this.motionPath && parent) {
+            const { children } = parent;
+            for (let i = 0; i < children.length; i++) {
+                if (children[i].motionPath)
+                    return children[i].getMotionPathData();
+            }
+        }
+        const data = this.__;
+        if (data.__pathForMotion)
+            return data.__pathForMotion;
+        return data.__pathForMotion = HighCurveHelper.getMotionPathData(this.getPath(true, true));
+    };
+    ui.getMotionPoint = function (motionDistance) {
+        const data = this.getMotionPathData();
+        const point = HighCurveHelper.getDistancePoint(data, motionDistance);
+        draw.MatrixHelper.toOuterPoint(this.localTransform, point);
+        return point;
+    };
+    ui.getMotionTotal = function () {
+        return this.getMotionPathData().total;
+    };
+    ui.__updateMotionPath = function () {
+        const data = this.__;
+        if (this.__layout.resized && data.__pathForMotion)
+            data.__pathForMotion = undefined;
+        if (this.motionPath) {
+            let child;
+            const { children } = this.parent;
+            for (let i = 0; i < children.length; i++) {
+                child = children[i];
+                if (!draw.isNull(child.motion))
+                    updateMotion(child);
+            }
+        }
+        else {
+            updateMotion(this);
+        }
+    };
+    function updateMotion(leaf) {
+        const { motion, motionRotation } = leaf;
+        if (draw.isNull(motion))
+            return;
+        if (leaf.motionPath) {
+            const data = leaf.getMotionPathData();
+            if (data.total)
+                leaf.__.__pathForRender = HighCurveHelper.getDistancePath(data, motion);
+        }
+        else {
+            let child;
+            const { children } = leaf.parent;
+            for (let i = 0; i < children.length; i++) {
+                child = children[i];
+                if (child.motionPath) {
+                    const data = child.getMotionPathData();
+                    if (!data.total)
+                        return;
+                    const point = child.getMotionPoint(motion);
+                    if (motionRotation === false)
+                        delete point.rotation;
+                    else {
+                        point.rotation += child.rotation;
+                        if (typeof motionRotation === 'number')
+                            point.rotation += motionRotation;
+                    }
+                    leaf.set(point);
+                    break;
+                }
+            }
+        }
+    }
+
+    exports.HighBezierHelper = HighBezierHelper;
+    exports.HighCurveHelper = HighCurveHelper;
+    exports.motionPathType = motionPathType;
+
+    return exports;
+
+})({}, LeaferUI);

package/dist/motion-path.min.cjs

@@ -0,0 +1 @@
+"use strict";var t=require("@leafer-ui/draw");const e=[.1488743389,.4333953941,.6794095682,.8650633666,.9739065285],o=[.2955242247,.2692667193,.2190863625,.1494513491,.0666713443],{sqrt:n}=Math,a={getDistance(t,a,r,s,h,c,l,u){let g,P,f,p,m,_,M=0;for(let d=0;d<e.length;d++)g=.5*(1+e[d]),P=.5*(1-e[d]),f=i(g,t,r,h,l),p=i(g,a,s,c,u),m=i(P,t,r,h,l),_=i(P,a,s,c,u),M+=o[d]*(n(f*f+p*p)+n(m*m+_*_));return.5*M},getDerivative(t,e,o,n,a){const i=1-t;return 3*i*i*(o-e)+6*i*t*(n-o)+3*t*t*(a-n)},cut(e,o,n,a,i,r,s,h,c,l){const u=1-o,g=u*n+o*i,P=u*a+o*r,f=u*i+o*s,p=u*r+o*h,m=u*g+o*f,_=u*P+o*p,M=u*m+o*(u*f+o*(u*s+o*c)),d=u*_+o*(u*p+o*(u*h+o*l));e.push(t.PathCommandMap.C,g,P,m,_,M,d)}},{getDerivative:i}=a,{M:r,L:s,C:h,Z:c}=t.PathCommandMap,l={},u={},g={transform(t,e){let o,n=0;const a=t.length;for(;n<a;)switch(o=t[n],o){case r:case s:g.transformPoints(t,e,n,1),n+=3;break;case h:g.transformPoints(t,e,n,3),n+=7;break;case c:n+=1}},transformPoints(e,o,n,a){for(let i=n+1,r=i+2*a;i<r;i+=2)l.x=e[i],l.y=e[i+1],t.MatrixHelper.toOuterPoint(o,l),e[i]=l.x,e[i+1]=l.y},getMotionPathData(e){let o,n,i,l,u=0,g=[],P=0,f=0,p=0;const m=e.length;for(;P<m;){switch(l=e[P],l){case r:case s:n=e[P+1],i=e[P+2],o=l===s&&P>0?t.PointHelper.getDistanceFrom(f,p,n,i):0,f=n,p=i,P+=3;break;case h:n=e[P+5],i=e[P+6],o=a.getDistance(f,p,e[P+1],e[P+2],e[P+3],e[P+4],n,i),f=n,p=i,P+=7;break;case c:P+=1;default:o=0}g.push(o),u+=o}return{total:u,segments:g,data:e}},getDistancePoint(e,o){const{segments:n,data:a}=e;o=t.UnitConvert.number(o,e.total);let i,l,g,P,f=0,p={},m=0,_=0,M=0,d=0;const D=a.length;for(;m<D;){switch(P=a[m],P){case r:case s:if(l=a[m+1],g=a[m+2],i=n[_],f+i>o||!e.total)return m||(M=l,d=g),u.x=M,u.y=d,p.x=l,p.y=g,t.PointHelper.getDistancePoint(u,p,o-f,!0),p.rotation=t.PointHelper.getAngle(u,p),p;M=l,d=g,m+=3;break;case h:if(l=a[m+5],g=a[m+6],i=n[_],f+i>o){const e=a[m+1],n=a[m+2],r=a[m+3],s=a[m+4];return o-=f,t.BezierHelper.getPointAndSet(o/i,M,d,e,n,r,s,l,g,p),t.BezierHelper.getPointAndSet(Math.max(0,o-.1)/i,M,d,e,n,r,s,l,g,u),p.rotation=t.PointHelper.getAngle(u,p),p}M=l,d=g,m+=7;break;case c:m+=1;default:i=0}_++,f+=i}return p},getDistancePath(e,o){const{segments:n,data:i}=e,l=[];o=t.UnitConvert.number(o,e.total);let g,P,f,p,m=0,_={},M=0,d=0,D=0,b=0;const x=i.length;for(;M<x;){switch(p=i[M],p){case r:case s:if(P=i[M+1],f=i[M+2],g=n[d],m+g>o||!e.total)return M||(D=P,b=f),u.x=D,u.y=b,_.x=P,_.y=f,t.PointHelper.getDistancePoint(u,_,o-m,!0),l.push(p,_.x,_.y),l;D=P,b=f,M+=3,l.push(p,D,b);break;case h:const x=i[M+1],y=i[M+2],H=i[M+3],v=i[M+4];if(P=i[M+5],f=i[M+6],g=n[d],m+g>o)return a.cut(l,(o-m)/g,D,b,x,y,H,v,P,f),l;D=P,b=f,M+=7,l.push(p,x,y,H,v,P,f);break;case c:M+=1,l.push(p);default:g=0}d++,m+=g}return l}};function P(e){return t.decorateLeafAttr(e,(e=>t.attr({set(o){this.__setAttr(e,o),this.__hasMotionPath=this.motionPath||!t.isNull(this.motion),this.__layout.matrixChanged||this.__layout.matrixChange()}})))}t.Transition.register("motion",(function(e,o,n,a){return e?"object"==typeof e&&(e=t.UnitConvert.number(e,a.getMotionTotal())):e=0,o?"object"==typeof o&&(o=t.UnitConvert.number(o,a.getMotionTotal())):o=0,t.Transition.number(e,o,n)}));const f=t.UI.prototype;function p(e){const{motion:o,motionRotation:n}=e;if(!t.isNull(o))if(e.motionPath){const t=e.getMotionPathData();t.total&&(e.__.__pathForRender=g.getDistancePath(t,o))}else{let t;const{children:a}=e.parent;for(let i=0;i<a.length;i++)if(t=a[i],t.motionPath){if(!t.getMotionPathData().total)return;const a=t.getMotionPoint(o);!1===n?delete a.rotation:(a.rotation+=t.rotation,"number"==typeof n&&(a.rotation+=n)),e.set(a);break}}}P()(f,"motionPath"),P()(f,"motion"),P(!0)(f,"motionRotation"),f.getMotionPathData=function(){const{parent:t}=this;if(!this.motionPath&&t){const{children:e}=t;for(let t=0;t<e.length;t++)if(e[t].motionPath)return e[t].getMotionPathData()}const e=this.__;return e.__pathForMotion?e.__pathForMotion:e.__pathForMotion=g.getMotionPathData(this.getPath(!0,!0))},f.getMotionPoint=function(e){const o=this.getMotionPathData(),n=g.getDistancePoint(o,e);return t.MatrixHelper.toOuterPoint(this.localTransform,n),n},f.getMotionTotal=function(){return this.getMotionPathData().total},f.__updateMotionPath=function(){const e=this.__;if(this.__layout.resized&&e.__pathForMotion&&(e.__pathForMotion=void 0),this.motionPath){let e;const{children:o}=this.parent;for(let n=0;n<o.length;n++)e=o[n],t.isNull(e.motion)||p(e)}else p(this)},exports.HighBezierHelper=a,exports.HighCurveHelper=g,exports.motionPathType=P;

package/dist/motion-path.min.js

@@ -0,0 +1 @@
+this.LeaferIN=this.LeaferIN||{},this.LeaferIN.motionPath=function(t,e){"use strict";const o=[.1488743389,.4333953941,.6794095682,.8650633666,.9739065285],n=[.2955242247,.2692667193,.2190863625,.1494513491,.0666713443],{sqrt:a}=Math,i={getDistance(t,e,i,s,h,c,l,u){let g,f,P,m,p,_,M=0;for(let d=0;d<o.length;d++)g=.5*(1+o[d]),f=.5*(1-o[d]),P=r(g,t,i,h,l),m=r(g,e,s,c,u),p=r(f,t,i,h,l),_=r(f,e,s,c,u),M+=n[d]*(a(P*P+m*m)+a(p*p+_*_));return.5*M},getDerivative(t,e,o,n,a){const i=1-t;return 3*i*i*(o-e)+6*i*t*(n-o)+3*t*t*(a-n)},cut(t,o,n,a,i,r,s,h,c,l){const u=1-o,g=u*n+o*i,f=u*a+o*r,P=u*i+o*s,m=u*r+o*h,p=u*g+o*P,_=u*f+o*m,M=u*p+o*(u*P+o*(u*s+o*c)),d=u*_+o*(u*m+o*(u*h+o*l));t.push(e.PathCommandMap.C,g,f,p,_,M,d)}},{getDerivative:r}=i,{M:s,L:h,C:c,Z:l}=e.PathCommandMap,u={},g={},f={transform(t,e){let o,n=0;const a=t.length;for(;n<a;)switch(o=t[n],o){case s:case h:f.transformPoints(t,e,n,1),n+=3;break;case c:f.transformPoints(t,e,n,3),n+=7;break;case l:n+=1}},transformPoints(t,o,n,a){for(let i=n+1,r=i+2*a;i<r;i+=2)u.x=t[i],u.y=t[i+1],e.MatrixHelper.toOuterPoint(o,u),t[i]=u.x,t[i+1]=u.y},getMotionPathData(t){let o,n,a,r,u=0,g=[],f=0,P=0,m=0;const p=t.length;for(;f<p;){switch(r=t[f],r){case s:case h:n=t[f+1],a=t[f+2],o=r===h&&f>0?e.PointHelper.getDistanceFrom(P,m,n,a):0,P=n,m=a,f+=3;break;case c:n=t[f+5],a=t[f+6],o=i.getDistance(P,m,t[f+1],t[f+2],t[f+3],t[f+4],n,a),P=n,m=a,f+=7;break;case l:f+=1;default:o=0}g.push(o),u+=o}return{total:u,segments:g,data:t}},getDistancePoint(t,o){const{segments:n,data:a}=t;o=e.UnitConvert.number(o,t.total);let i,r,u,f,P=0,m={},p=0,_=0,M=0,d=0;const D=a.length;for(;p<D;){switch(f=a[p],f){case s:case h:if(r=a[p+1],u=a[p+2],i=n[_],P+i>o||!t.total)return p||(M=r,d=u),g.x=M,g.y=d,m.x=r,m.y=u,e.PointHelper.getDistancePoint(g,m,o-P,!0),m.rotation=e.PointHelper.getAngle(g,m),m;M=r,d=u,p+=3;break;case c:if(r=a[p+5],u=a[p+6],i=n[_],P+i>o){const t=a[p+1],n=a[p+2],s=a[p+3],h=a[p+4];return o-=P,e.BezierHelper.getPointAndSet(o/i,M,d,t,n,s,h,r,u,m),e.BezierHelper.getPointAndSet(Math.max(0,o-.1)/i,M,d,t,n,s,h,r,u,g),m.rotation=e.PointHelper.getAngle(g,m),m}M=r,d=u,p+=7;break;case l:p+=1;default:i=0}_++,P+=i}return m},getDistancePath(t,o){const{segments:n,data:a}=t,r=[];o=e.UnitConvert.number(o,t.total);let u,f,P,m,p=0,_={},M=0,d=0,D=0,b=0;const y=a.length;for(;M<y;){switch(m=a[M],m){case s:case h:if(f=a[M+1],P=a[M+2],u=n[d],p+u>o||!t.total)return M||(D=f,b=P),g.x=D,g.y=b,_.x=f,_.y=P,e.PointHelper.getDistancePoint(g,_,o-p,!0),r.push(m,_.x,_.y),r;D=f,b=P,M+=3,r.push(m,D,b);break;case c:const y=a[M+1],H=a[M+2],x=a[M+3],C=a[M+4];if(f=a[M+5],P=a[M+6],u=n[d],p+u>o)return i.cut(r,(o-p)/u,D,b,y,H,x,C,f,P),r;D=f,b=P,M+=7,r.push(m,y,H,x,C,f,P);break;case l:M+=1,r.push(m);default:u=0}d++,p+=u}return r}};function P(t){return e.decorateLeafAttr(t,(t=>e.attr({set(o){this.__setAttr(t,o),this.__hasMotionPath=this.motionPath||!e.isNull(this.motion),this.__layout.matrixChanged||this.__layout.matrixChange()}})))}e.Transition.register("motion",(function(t,o,n,a){return t?"object"==typeof t&&(t=e.UnitConvert.number(t,a.getMotionTotal())):t=0,o?"object"==typeof o&&(o=e.UnitConvert.number(o,a.getMotionTotal())):o=0,e.Transition.number(t,o,n)}));const m=e.UI.prototype;function p(t){const{motion:o,motionRotation:n}=t;if(!e.isNull(o))if(t.motionPath){const e=t.getMotionPathData();e.total&&(t.__.__pathForRender=f.getDistancePath(e,o))}else{let e;const{children:a}=t.parent;for(let i=0;i<a.length;i++)if(e=a[i],e.motionPath){if(!e.getMotionPathData().total)return;const a=e.getMotionPoint(o);!1===n?delete a.rotation:(a.rotation+=e.rotation,"number"==typeof n&&(a.rotation+=n)),t.set(a);break}}}return P()(m,"motionPath"),P()(m,"motion"),P(!0)(m,"motionRotation"),m.getMotionPathData=function(){const{parent:t}=this;if(!this.motionPath&&t){const{children:e}=t;for(let t=0;t<e.length;t++)if(e[t].motionPath)return e[t].getMotionPathData()}const e=this.__;return e.__pathForMotion?e.__pathForMotion:e.__pathForMotion=f.getMotionPathData(this.getPath(!0,!0))},m.getMotionPoint=function(t){const o=this.getMotionPathData(),n=f.getDistancePoint(o,t);return e.MatrixHelper.toOuterPoint(this.localTransform,n),n},m.getMotionTotal=function(){return this.getMotionPathData().total},m.__updateMotionPath=function(){const t=this.__;if(this.__layout.resized&&t.__pathForMotion&&(t.__pathForMotion=void 0),this.motionPath){let t;const{children:o}=this.parent;for(let n=0;n<o.length;n++)t=o[n],e.isNull(t.motion)||p(t)}else p(this)},t.HighBezierHelper=i,t.HighCurveHelper=f,t.motionPathType=P,t}({},LeaferUI);

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@leafer-in/motion-path",
+  "version": "1.0.6-rc1",
+  "description": "@leafer-in/motion-path",
+  "author": "Chao (Leafer) Wan",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/motion-path.esm.js",
+  "exports": {
+    "import": "./dist/motion-path.esm.js",
+    "require": "./dist/motion-path.cjs",
+    "types": "./types/index.d.ts"
+  },
+  "types": "types/index.d.ts",
+  "unpkg": "dist/motion-path.js",
+  "jsdelivr": "dist/motion-path.js",
+  "files": ["src","types","dist"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leaferjs/leafer-in.git"
+  },
+  "homepage": "https://github.com/leaferjs/leafer-in/tree/main/packages/motion-path",
+  "bugs": "https://github.com/leaferjs/leafer-in/issues",
+  "keywords": [
+    "leafer motion path",
+    "leafer-motion-path",
+    "leafer-in",
+    "motion-path",
+    "leafer-ui",
+    "leaferjs"
+  ],
+  "dependencies": {
+    "@leafer-ui/draw": "^1.0.6",
+    "@leafer-ui/interface": "^1.0.6",
+    "@leafer-in/interface": "^1.0.6"
+  }
+}

package/src/HighBezierHelper.ts

@@ -0,0 +1,50 @@
+import { IPathCommandData } from '@leafer-ui/interface'
+import { PathCommandMap } from '@leafer-ui/draw'
+
+
+// 高斯-勒让德积分节点和权重
+const gaussNodes = [0.1488743389, 0.4333953941, 0.6794095682, 0.8650633666, 0.9739065285]
+const gaussWeights = [0.2955242247, 0.2692667193, 0.2190863625, 0.1494513491, 0.0666713443]
+
+const { sqrt } = Math
+
+export const HighBezierHelper = {
+
+    getDistance(fromX: number, fromY: number, x1: number, y1: number, x2: number, y2: number, toX: number, toY: number): number {
+        let distance = 0, t1: number, t2: number, d1X: number, d1Y: number, d2X: number, d2Y: number
+        for (let i = 0; i < gaussNodes.length; i++) {
+            t1 = 0.5 * (1 + gaussNodes[i])
+            t2 = 0.5 * (1 - gaussNodes[i])
+
+            d1X = getDerivative(t1, fromX, x1, x2, toX)
+            d1Y = getDerivative(t1, fromY, y1, y2, toY)
+
+            d2X = getDerivative(t2, fromX, x1, x2, toX)
+            d2Y = getDerivative(t2, fromY, y1, y2, toY)
+
+            distance += gaussWeights[i] * (sqrt(d1X * d1X + d1Y * d1Y) + sqrt(d2X * d2X + d2Y * d2Y))
+        }
+        return distance * 0.5
+    },
+
+    getDerivative(t: number, fromV: number, v1: number, v2: number, toV: number): number { // 导数
+        const o = 1 - t
+        return 3 * o * o * (v1 - fromV) + 6 * o * t * (v2 - v1) + 3 * t * t * (toV - v2)
+    },
+
+    cut(data: IPathCommandData, t: number, fromX: number, fromY: number, x1: number, y1: number, x2: number, y2: number, toX: number, toY: number) {
+        const o = 1 - t
+        const ax = o * fromX + t * x1, ay = o * fromY + t * y1
+        const mbx = o * x1 + t * x2, mby = o * y1 + t * y2
+        const mcx = o * x2 + t * toX, mcy = o * y2 + t * toY
+
+        const bx = o * ax + t * mbx, by = o * ay + t * mby
+        const mbcx = o * mbx + t * mcx, mbcy = o * mby + t * mcy
+
+        const cx = o * bx + t * mbcx, cy = o * by + t * mbcy
+        data.push(PathCommandMap.C, ax, ay, bx, by, cx, cy)
+    }
+
+}
+
+const { getDerivative } = HighBezierHelper

package/src/HighCurveHelper.ts

@@ -0,0 +1,212 @@
+import { IMatrixData, IPathCommandData, IMotionPathData, IRotationPointData, IPointData, IUnitData } from '@leafer-ui/interface'
+import { BezierHelper, MatrixHelper, PathCommandMap, PointHelper, UnitConvert } from '@leafer-ui/draw'
+
+import { HighBezierHelper } from './HighBezierHelper'
+
+
+const { M, L, C, Z } = PathCommandMap
+const tempPoint = {} as IPointData, tempFrom = {} as IPointData
+
+export const HighCurveHelper = {
+
+    transform(data: IPathCommandData, matrix: IMatrixData): void {
+        let i: number = 0, command: number
+
+        const len = data.length
+        while (i < len) {
+            command = data[i]
+            switch (command) {
+                case M: //moveto(x, y)
+                case L: //lineto(x, y)
+                    HighCurveHelper.transformPoints(data, matrix, i, 1)
+                    i += 3
+                    break
+                case C: //bezierCurveTo(x1, y1, x2, y2, x,y)
+                    HighCurveHelper.transformPoints(data, matrix, i, 3)
+                    i += 7
+                    break
+                case Z: //closepath()
+                    i += 1
+            }
+        }
+    },
+
+    transformPoints(data: IPathCommandData, matrix: IMatrixData, start: number, pointCount: number): void {
+        for (let i = start + 1, end = i + pointCount * 2; i < end; i += 2) {
+            tempPoint.x = data[i]
+            tempPoint.y = data[i + 1]
+            MatrixHelper.toOuterPoint(matrix, tempPoint)
+            data[i] = tempPoint.x
+            data[i + 1] = tempPoint.y
+        }
+    },
+
+    getMotionPathData(data: IPathCommandData): IMotionPathData {
+        let total = 0, distance: number, segments: number[] = []
+        let i = 0, x = 0, y = 0, toX: number, toY: number, command: number
+
+        const len = data.length
+        while (i < len) {
+            command = data[i]
+            switch (command) {
+                case M: //moveto(x, y)
+                case L: //lineto(x, y)
+                    toX = data[i + 1]
+                    toY = data[i + 2]
+                    distance = (command === L && i > 0) ? PointHelper.getDistanceFrom(x, y, toX, toY) : 0
+                    x = toX
+                    y = toY
+                    i += 3
+                    break
+                case C: //bezierCurveTo(x1, y1, x2, y2, x,y)
+                    toX = data[i + 5]
+                    toY = data[i + 6]
+                    distance = HighBezierHelper.getDistance(x, y, data[i + 1], data[i + 2], data[i + 3], data[i + 4], toX, toY)
+                    x = toX
+                    y = toY
+                    i += 7
+                    break
+                case Z: //closepath()
+                    i += 1
+                default:
+                    distance = 0
+
+            }
+
+            segments.push(distance)
+            total += distance
+        }
+
+        return { total, segments, data }
+
+    },
+
+
+    getDistancePoint(distanceData: IMotionPathData, motionDistance: number | IUnitData): IRotationPointData {
+        const { segments, data } = distanceData
+        motionDistance = UnitConvert.number(motionDistance, distanceData.total)
+
+        let total = 0, distance: number, to = {} as IRotationPointData
+        let i = 0, index = 0, x: number = 0, y: number = 0, toX: number, toY: number, command: number
+
+        const len = data.length
+        while (i < len) {
+            command = data[i]
+            switch (command) {
+                case M: //moveto(x, y)
+                case L: //lineto(x, y)
+                    toX = data[i + 1]
+                    toY = data[i + 2]
+                    distance = segments[index]
+
+                    if (total + distance > motionDistance || !distanceData.total) {
+                        if (!i) x = toX, y = toY // first M
+                        tempFrom.x = x
+                        tempFrom.y = y
+                        to.x = toX
+                        to.y = toY
+                        PointHelper.getDistancePoint(tempFrom, to, motionDistance - total, true)
+                        to.rotation = PointHelper.getAngle(tempFrom, to)
+                        return to
+                    }
+
+                    x = toX
+                    y = toY
+                    i += 3
+                    break
+                case C: //bezierCurveTo(x1, y1, x2, y2, x,y)
+                    toX = data[i + 5]
+                    toY = data[i + 6]
+                    distance = segments[index]
+
+                    if (total + distance > motionDistance) {
+                        const x1 = data[i + 1], y1 = data[i + 2], x2 = data[i + 3], y2 = data[i + 4]
+                        motionDistance -= total
+                        BezierHelper.getPointAndSet(motionDistance / distance, x, y, x1, y1, x2, y2, toX, toY, to)
+                        BezierHelper.getPointAndSet(Math.max(0, motionDistance - 0.1) / distance, x, y, x1, y1, x2, y2, toX, toY, tempFrom)
+                        to.rotation = PointHelper.getAngle(tempFrom, to)
+                        return to
+                    }
+
+                    x = toX
+                    y = toY
+                    i += 7
+                    break
+                case Z: //closepath()
+                    i += 1
+                default:
+                    distance = 0
+            }
+
+            index++
+            total += distance
+        }
+
+        return to
+    },
+
+    getDistancePath(distanceData: IMotionPathData, motionDistance: number | IUnitData): IPathCommandData {
+        const { segments, data } = distanceData, path: IPathCommandData = []
+        motionDistance = UnitConvert.number(motionDistance, distanceData.total)
+
+        let total = 0, distance: number, to = {} as IRotationPointData
+        let i = 0, index = 0, x: number = 0, y: number = 0, toX: number, toY: number, command: number
+
+        const len = data.length
+        while (i < len) {
+            command = data[i]
+            switch (command) {
+                case M: //moveto(x, y)
+                case L: //lineto(x, y)
+                    toX = data[i + 1]
+                    toY = data[i + 2]
+                    distance = segments[index]
+
+                    if (total + distance > motionDistance || !distanceData.total) {
+                        if (!i) x = toX, y = toY // first M
+                        tempFrom.x = x
+                        tempFrom.y = y
+                        to.x = toX
+                        to.y = toY
+                        PointHelper.getDistancePoint(tempFrom, to, motionDistance - total, true)
+                        path.push(command, to.x, to.y)
+                        return path
+                    }
+
+                    x = toX
+                    y = toY
+                    i += 3
+                    path.push(command, x, y)
+                    break
+                case C: //bezierCurveTo(x1, y1, x2, y2, x,y)
+                    const x1 = data[i + 1], y1 = data[i + 2], x2 = data[i + 3], y2 = data[i + 4]
+                    toX = data[i + 5]
+                    toY = data[i + 6]
+                    distance = segments[index]
+
+                    if (total + distance > motionDistance) {
+                        HighBezierHelper.cut(path, (motionDistance - total) / distance, x, y, x1, y1, x2, y2, toX, toY)
+                        return path
+                    }
+
+                    x = toX
+                    y = toY
+                    i += 7
+                    path.push(command, x1, y1, x2, y2, toX, toY)
+                    break
+                case Z: //closepath()
+                    i += 1
+                    path.push(command)
+                default:
+                    distance = 0
+
+            }
+
+            index++
+            total += distance
+        }
+
+        return path
+    }
+
+}

package/src/decorator.ts

@@ -0,0 +1,12 @@
+import { IValue } from '@leafer-ui/interface'
+import { decorateLeafAttr, attr, isNull } from '@leafer-ui/draw'
+
+export function motionPathType(defaultValue?: IValue) {
+    return decorateLeafAttr(defaultValue, (key: string) => attr({
+        set(value: any) {
+            this.__setAttr(key, value)
+            this.__hasMotionPath = this.motionPath || !isNull(this.motion)
+            this.__layout.matrixChanged || this.__layout.matrixChange()
+        }
+    }))
+}