leafer-ui 2.1.11 → 2.2.1

package/dist/web.module.js

@@ -856,6 +856,11 @@ const PointHelper = {
     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,
@@ -4526,11 +4531,15 @@ function affectRenderBoundsType(defaultValue) {
 function surfaceType(defaultValue) {
     return decorateLeafAttr(defaultValue, key => attr({
         set(value) {
-            this.__setAttr(key, value) && (this.__layout.surfaceChanged || this.__layout.surfaceChange());
+            this.__setAttr(key, value) && doSurfaceType(this);
         }
     }));
 }
 
+function doSurfaceType(leaf) {
+    leaf.__layout.surfaceChanged || leaf.__layout.surfaceChange();
+}
+
 function dimType(defaultValue) {
     return decorateLeafAttr(defaultValue, key => attr({
         set(value) {
@@ -4596,12 +4605,12 @@ function sortType(defaultValue) {
     }));
 }
 
-function maskType(defaultValue) {
+function maskType(defaultValue, updateSelf) {
     return decorateLeafAttr(defaultValue, key => attr({
         set(value) {
             if (this.__setAttr(key, value)) {
                 this.__layout.boxChanged || this.__layout.boxChange();
-                this.waitParent(() => {
+                updateSelf ? this.__updateMask() : this.waitParent(() => {
                     this.parent.__updateMask(value);
                 });
             }
@@ -6253,7 +6262,8 @@ const BranchRender = {
         if (this.__worldOpacity && hasSize(nowWorld)) {
             const data = this.__;
             if (data.__useDim) {
-                if (data.dim) options.dimOpacity = data.dim === true ? .2 : data.dim; else if (data.bright && !options.topRendering) return options.topList.add(this); else if (data.dimskip) options.dimOpacity && (options.dimOpacity = 0);
+                if (data.bright && !options.topRendering) return options.topList.add(this);
+                if (data.dim) options.dimOpacity = data.dim === true ? .2 : data.dim; else if (data.dimskip) options.dimOpacity && (options.dimOpacity = 0);
             }
             if (data.__single && !this.isBranchLeaf) {
                 if (data.eraser === "path") return this.__renderEraser(canvas, options);
@@ -6277,6 +6287,7 @@ const BranchRender = {
                 child = children[i];
                 excludeRenderBounds$1(child, options) || (child.__hasComplex ? LeafHelper.renderComplex(child, canvas, options) : child.__render(canvas, options));
             }
+            if (this.__hasMask === 0) this.__rerenderMask(canvas, options);
         }
     },
     __clip(canvas, options) {
@@ -6493,11 +6504,19 @@ let Leaf = class Leaf {
     updateLayout() {
         this.__layout.update();
     }
-    forceUpdate(attrName) {
-        if (isUndefined(attrName)) attrName = "width"; else if (attrName === "surface") attrName = "blendMode";
-        const value = this.__.__getInput(attrName);
-        this.__[attrName] = isUndefined(value) ? null : undefined;
-        this[attrName] = value;
+    forceUpdate(typeOrAttrName) {
+        let quick;
+        if (!typeOrAttrName || typeOrAttrName === "bounds") doBoundsType(this), quick = true; else if (typeOrAttrName === "surface") doSurfaceType(this), 
+        quick = true; else if (typeOrAttrName === "stroke") doStrokeType(this), quick = true;
+        if (quick) {
+            const {leafer: leafer} = this;
+            return leafer && leafer.watcher && leafer.watcher.__onAttrChange({
+                target: this
+            });
+        }
+        const value = this.__.__getInput(typeOrAttrName);
+        this.__[typeOrAttrName] = isUndefined(value) ? null : undefined;
+        this[typeOrAttrName] = value;
     }
     forceRender(_bounds, _sync) {
         this.forceUpdate("surface");
@@ -6516,7 +6535,8 @@ let Leaf = class Leaf {
         canvas.restore();
     }
     __updateMask(_value) {
-        this.__hasMask = this.children.some(item => item.__.mask && item.__.visible && item.__.opacity);
+        const hasMask = this.children.some(item => item.__.mask && item.__.visible && item.__.opacity);
+        this.__hasMask = this.__.maskskip ? hasMask && 0 : hasMask;
     }
     __getNowWorld(options) {
         if (options.matrix) {
@@ -6985,7 +7005,7 @@ class LeafLevelList {
     }
 }
 
-const version = "2.1.11";
+const version = "2.2.1";
 
 const debug$5 = Debug.get("LeaferCanvas");
 
@@ -7897,7 +7917,7 @@ class Picker {
             for (let i = 0, len = list.length; i < len; i++) {
                 find = list[i];
                 if (ignoreHittable || LeafHelper.worldHittable(find)) {
-                    this.hitChild(find, point);
+                    this.hitChild(find, find.hitThrough ? this.point : point);
                     if (findList.length) {
                         if (find.isBranchLeaf && list.some(item => item !== find && LeafHelper.hasParent(item, find))) {
                             findList.reset();
@@ -7910,7 +7930,7 @@ class Picker {
         }
         if (bottomList) {
             for (let i = 0, len = bottomList.length; i < len; i++) {
-                this.hitChild(bottomList[i].target, this.point, bottomList[i].proxy);
+                this.hitChild(bottomList[i].target, this.point, undefined, bottomList[i].proxy);
                 if (findList.length) return findList.list[0];
             }
         }
@@ -7968,42 +7988,38 @@ class Picker {
     hitBranch(branch) {
         this.eachFind(branch.children, branch.__onlyHitMask);
     }
-    eachFind(children, hitMask) {
+    eachFind(children, onlyHitMask) {
         let child, hit, data;
         const {point: point} = this, len = children.length;
         for (let i = len - 1; i > -1; i--) {
             child = children[i], data = child.__;
-            if (!data.visible || hitMask && !data.mask) continue;
+            if (!data.visible || onlyHitMask && !data.mask) continue;
             hit = hitRadiusPoint$1(child.__world, data.hitRadius ? copyRadiusPoint$1(tempPoint$1, point, data.hitRadius) : point);
             if (child.isBranch) {
                 if (hit || child.__ignoreHitWorld) {
                     if (child.isBranchLeaf && data.__clipAfterFill && !child.__hitWorld(point, true)) continue;
                     if (child.topChildren) this.eachFind(child.topChildren, false);
                     this.eachFind(child.children, child.__onlyHitMask);
-                    if (child.isBranchLeaf) this.hitChild(child, point);
+                    if (child.isBranchLeaf) this.hitChild(child, point, onlyHitMask);
                 }
             } else {
-                if (hit) this.hitChild(child, point);
+                if (hit) this.hitChild(child, point, onlyHitMask);
             }
         }
     }
-    hitChild(child, point, proxy) {
+    hitChild(child, point, onlyHitMask, proxy) {
         if (this.exclude && this.exclude.has(child)) return;
-        if (child.__hitWorld(point)) {
-            const {parent: parent} = child;
-            if (parent && parent.__hasMask && !child.__.mask) {
-                let findMasks = [], item;
-                const {children: children} = parent;
-                for (let i = 0, len = children.length; i < len; i++) {
-                    item = children[i];
-                    if (item.__.mask) findMasks.push(item);
-                    if (item === child) {
-                        if (findMasks && !findMasks.every(value => value.__hitWorld(point))) return;
-                        break;
-                    }
-                }
+        if (child.__hitWorld(point, onlyHitMask && child.mask === "path" ? true : undefined)) {
+            const {parent: parent, mask: mask} = child;
+            if (parent && parent.__hasMask && mask && !(mask === "clipping" || mask === "clipping-path")) {
+                if (!parent.children.some(item => !item.mask && item.__hitWorld(point))) return;
             }
-            this.findList.add(proxy || child);
+            const leaf = proxy || child, {hitThrough: hitThrough} = child, {findList: findList} = this;
+            if (hitThrough) {
+                const index = findList.list.findIndex(item => item[hitThrough] === child[hitThrough]);
+                if (index > 0) return findList.addAt(leaf, index);
+            }
+            findList.add(leaf);
         }
     }
     clear() {
@@ -8865,6 +8881,8 @@ __decorate([ dataType(false) ], UI.prototype, "editable", void 0);
 
 __decorate([ hitType(true) ], UI.prototype, "hittable", void 0);
 
+__decorate([ hitType() ], UI.prototype, "hitThrough", void 0);
+
 __decorate([ hitType("path") ], UI.prototype, "hitFill", void 0);
 
 __decorate([ strokeType("path") ], UI.prototype, "hitStroke", void 0);
@@ -9823,7 +9841,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$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() {
@@ -9848,7 +9866,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() {
@@ -10698,6 +10716,7 @@ class Dragger {
     }
     dragEnd(data) {
         if (!this.dragging && !this.moving) return;
+        setTimeout(() => this.interaction.pointerMove(data));
         if (this.checkDragEndAnimate(data)) return;
         this.dragEndReal(data);
     }
@@ -11451,8 +11470,10 @@ ui$1.__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;
@@ -11486,9 +11507,9 @@ rect.__hitFill = box$1.__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) {
@@ -11895,7 +11916,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;
@@ -12287,7 +12309,7 @@ function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds
         data.__naturalWidth = image.width / data.pixelRatio;
         data.__naturalHeight = image.height / data.pixelRatio;
         if (data.__autoSide) {
-            ui.forceUpdate("width");
+            ui.forceUpdate();
             LeafHelper.updateBounds(ui);
             ui.__layout.boundsChanged = true;
             if (ui.__proxyData) {
@@ -13257,7 +13279,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");
@@ -13270,8 +13293,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);
@@ -13472,6 +13495,7 @@ function getDrawData(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], 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];
@@ -13565,4 +13589,4 @@ Object.assign(Creator, {
 
 useCanvas();
 
-export { AlignHelper, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsEvent, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragBoundsHelper, DragEvent$1 as DragEvent, Dragger, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, FourNumberHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferFilm, LeaferImage, LeaferVideo, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MyDragEvent, MyImage, MyPointerEvent, MyTouchEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathCommandNodeHelper, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNodeHandleType, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent$1 as PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TouchEvent, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, UnitConvertHelper, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, createAttr, createDescriptor, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, dimType, doBoundsType, doStrokeType, effectType, emptyData, eraserType, extraPropertyEventMap, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isArray, isData, isEmptyData, isFinite, isNull, isNumber, isObject, isString, isUndefined, layoutProcessor, leaferTransformAttrMap, maskType, naturalBoundsType, opacityType, path, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, scrollType, sortType, strokeType, surfaceType, tempBounds$2 as tempBounds, tempMatrix$2 as tempMatrix, tempPoint$4 as tempPoint, tryToNumber, useCanvas, useModule, version, visibleType, zoomLayerType };
+export { AlignHelper, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsEvent, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragBoundsHelper, DragEvent$1 as DragEvent, Dragger, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, FourNumberHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferFilm, LeaferImage, LeaferVideo, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MyDragEvent, MyImage, MyPointerEvent, MyTouchEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathCommandNodeHelper, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNodeHandleType, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent$1 as PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TouchEvent, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, UnitConvertHelper, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, createAttr, createDescriptor, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, dimType, doBoundsType, doStrokeType, doSurfaceType, effectType, emptyData, eraserType, extraPropertyEventMap, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isArray, isData, isEmptyData, isFinite, isNull, isNumber, isObject, isString, isUndefined, layoutProcessor, leaferTransformAttrMap, maskType, naturalBoundsType, opacityType, path, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, scrollType, sortType, strokeType, surfaceType, tempBounds$2 as tempBounds, tempMatrix$2 as tempMatrix, tempPoint$4 as tempPoint, tryToNumber, useCanvas, useModule, version, visibleType, zoomLayerType };