leafer-ui 1.0.0-rc.2 → 1.0.0-rc.4

package/dist/web.js

@@ -650,7 +650,7 @@ var LeaferUI = (function (exports) {
         },
         getFitMatrix(t, put) {
             const scale = Math.min(1, Math.min(t.width / put.width, t.height / put.height));
-            return new Matrix(scale, 0, 0, scale, -put.x * scale, -put.y * scale);
+            return new Matrix(scale, 0, 0, scale, -Math.ceil(put.x * scale), -Math.ceil(put.y * scale));
         },
         getSpread(t, spreadX, spreadY) {
             const n = {};
@@ -1051,6 +1051,9 @@ var LeaferUI = (function (exports) {
                 }
             }
         },
+        has(type) {
+            return !!this.nameList[type];
+        },
         get(type, ...params) {
             return new nameList[type](...params);
         }
@@ -4591,7 +4594,8 @@ var LeaferUI = (function (exports) {
                     dragDistance: 2,
                     swipeDistance: 20,
                     ignoreMove: false
-                }
+                },
+                cursor: {}
             };
             this.tapCount = 0;
             this.downKeyMap = {};
@@ -4817,6 +4821,8 @@ var LeaferUI = (function (exports) {
             this.hoverData = data;
         }
         updateCursor(data) {
+            if (this.config.cursor.stop)
+                return;
             if (!data) {
                 this.updateHoverData();
                 data = this.hoverData;
@@ -4829,17 +4835,16 @@ var LeaferUI = (function (exports) {
             }
             else if (!data || this.dragger.dragging)
                 return;
-            const path = data.path;
             let leaf;
+            let cursor;
+            const { path } = data;
             for (let i = 0, len = path.length; i < len; i++) {
                 leaf = path.list[i];
-                if (leaf.cursor) {
-                    const { cursor } = leaf;
-                    this.setCursor(cursor === 'grab' ? (this.downData ? 'grabbing' : cursor) : cursor);
-                    return;
-                }
+                cursor = leaf.cursor;
+                if (cursor)
+                    break;
             }
-            this.setCursor('default');
+            this.setCursor(cursor);
         }
         setCursor(cursor) {
             this.cursor = cursor;
@@ -5161,6 +5166,8 @@ var LeaferUI = (function (exports) {
             this.on(type, listener, { once: true, capture });
         },
         emit(type, event, capture) {
+            if (!event && EventCreator.has(type))
+                event = EventCreator.get(type, { type, target: this, current: this });
             const map = __getListenerMap(this, capture);
             const list = map[type];
             if (list) {
@@ -5455,7 +5462,7 @@ var LeaferUI = (function (exports) {
                     const tempCanvas = canvas.getSameCanvas(true);
                     this.__draw(tempCanvas, options);
                     const blendMode = this.__.isEraser ? 'destination-out' : this.__.blendMode;
-                    if (options.matrix || this.__hasMirror) {
+                    if (this.__hasMirror || options.matrix) {
                         canvas.copyWorldByReset(tempCanvas, null, null, blendMode);
                     }
                     else {
@@ -5524,7 +5531,12 @@ var LeaferUI = (function (exports) {
                     this.__renderBranch(tempCanvas, options);
                     canvas.opacity = this.__worldOpacity;
                     const blendMode = this.__.isEraser ? 'destination-out' : this.__.blendMode;
-                    options.matrix ? canvas.copyWorld(tempCanvas, null, null, blendMode) : canvas.copyWorld(tempCanvas, this.__world, this.__world, blendMode);
+                    if (this.__hasMirror || options.matrix) {
+                        canvas.copyWorld(tempCanvas, null, null, blendMode);
+                    }
+                    else {
+                        canvas.copyWorld(tempCanvas, this.__world, this.__world, blendMode);
+                    }
                     tempCanvas.recycle();
                 }
                 else {
@@ -7423,7 +7435,7 @@ var LeaferUI = (function (exports) {
             if (typeof value === 'string' || !value) {
                 if (this.__isFills) {
                     this.__removeInput('fill');
-                    Paint.recycleImage(this, 'fill');
+                    Paint.recycleImage('fill', this);
                     this.__isFills = false;
                 }
                 this._fill = value;
@@ -7439,7 +7451,7 @@ var LeaferUI = (function (exports) {
             if (typeof value === 'string' || !value) {
                 if (this.__isStrokes) {
                     this.__removeInput('stroke');
-                    Paint.recycleImage(this, 'stroke');
+                    Paint.recycleImage('stroke', this);
                     this.__isStrokes = false;
                 }
                 this._stroke = value;
@@ -7691,11 +7703,11 @@ var LeaferUI = (function (exports) {
             const { fill, stroke, __drawAfterFill } = this.__;
             this.__drawRenderPath(canvas);
             if (fill)
-                Paint.fill(this, canvas, fill);
+                Paint.fill(fill, this, canvas);
             if (__drawAfterFill)
                 this.__drawAfterFill(canvas, options);
             if (stroke)
-                Paint.stroke(this, canvas, stroke);
+                Paint.stroke(stroke, this, canvas, options);
         },
         __draw(canvas, options) {
             if (this.__.__complex) {
@@ -7707,40 +7719,40 @@ var LeaferUI = (function (exports) {
                     if (shadow)
                         Effect.shadow(this, canvas, shape, options);
                     if (fill)
-                        this.__.__isFills ? Paint.fills(this, canvas, fill) : Paint.fill(this, canvas, fill);
+                        this.__.__isFills ? Paint.fills(fill, this, canvas) : Paint.fill(fill, this, canvas);
                     if (__drawAfterFill)
                         this.__drawAfterFill(canvas, options);
                     if (innerShadow)
                         Effect.innerShadow(this, canvas, shape, options);
                     if (stroke)
-                        this.__.__isStrokes ? Paint.strokes(this, canvas, stroke) : Paint.stroke(this, canvas, stroke);
+                        this.__.__isStrokes ? Paint.strokes(stroke, this, canvas, options) : Paint.stroke(stroke, this, canvas, options);
                     if (shape.worldCanvas)
                         shape.worldCanvas.recycle();
                     shape.canvas.recycle();
                 }
                 else {
                     if (fill)
-                        this.__.__isFills ? Paint.fills(this, canvas, fill) : Paint.fill(this, canvas, fill);
+                        this.__.__isFills ? Paint.fills(fill, this, canvas) : Paint.fill(fill, this, canvas);
                     if (__drawAfterFill)
                         this.__drawAfterFill(canvas, options);
                     if (stroke)
-                        this.__.__isStrokes ? Paint.strokes(this, canvas, stroke) : Paint.stroke(this, canvas, stroke);
+                        this.__.__isStrokes ? Paint.strokes(stroke, this, canvas, options) : Paint.stroke(stroke, this, canvas, options);
                 }
             }
             else {
                 this.__drawFast(canvas, options);
             }
         },
-        __renderShape(canvas, options) {
+        __renderShape(canvas, renderOptions) {
             if (!this.__worldOpacity)
                 return;
-            canvas.setWorld(this.__world, options.matrix);
+            canvas.setWorld(this.__world, renderOptions.matrix);
             const { fill, stroke } = this.__;
             this.__drawRenderPath(canvas);
             if (fill)
-                Paint.fill(this, canvas, '#000000');
+                Paint.fill('#000000', this, canvas);
             if (stroke)
-                Paint.stroke(this, canvas, '#000000');
+                Paint.stroke('#000000', this, canvas, renderOptions);
         }
     };
 
@@ -7809,9 +7821,9 @@ var LeaferUI = (function (exports) {
             if (this.__.__input) {
                 const { fill, stroke } = this.__.__input;
                 if (fill)
-                    Paint.compute(this, 'fill');
+                    Paint.compute('fill', this);
                 if (stroke)
-                    Paint.compute(this, 'stroke');
+                    Paint.compute('stroke', this);
             }
         }
         __updateRenderPath() {
@@ -7928,7 +7940,7 @@ var LeaferUI = (function (exports) {
         hitType()
     ], exports.UI.prototype, "hitRadius", void 0);
     __decorate([
-        cursorType('default')
+        cursorType('')
     ], exports.UI.prototype, "cursor", void 0);
     __decorate([
         surfaceType()
@@ -8275,14 +8287,19 @@ var LeaferUI = (function (exports) {
         __updateRenderPath() {
             if (this.__.points && this.__.curve) {
                 drawPoints$1(this.__.__pathForRender = [], this.__.points, this.__.curve, true);
-                this.__updateNaturalSize();
             }
             else {
                 super.__updateRenderPath();
             }
         }
         __updateBoxBounds() {
-            this.__.points ? toBounds$2(this.__.path, this.__layout.boxBounds) : super.__updateBoxBounds();
+            if (this.__.points) {
+                toBounds$2(this.__.__pathForRender, this.__layout.boxBounds);
+                this.__updateNaturalSize();
+            }
+            else {
+                super.__updateBoxBounds();
+            }
         }
     };
     __decorate([
@@ -8376,7 +8393,7 @@ var LeaferUI = (function (exports) {
         }
         __updateBoxBounds() {
             if (this.points) {
-                toBounds$1(this.__.path, this.__layout.boxBounds);
+                toBounds$1(this.__.__pathForRender, this.__layout.boxBounds);
                 this.__updateNaturalSize();
             }
             else {
@@ -9386,7 +9403,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    function recycleImage(data, attrName) {
+    function recycleImage(attrName, data) {
         const paints = (attrName === 'fill' ? data._fill : data._stroke);
         if (paints instanceof Array) {
             let image, recycleMap, input, url;
@@ -9431,11 +9448,11 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    function fill(ui, canvas, fill) {
+    function fill(fill, ui, canvas) {
         canvas.fillStyle = fill;
         ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
     }
-    function fills(ui, canvas, fills) {
+    function fills(fills, ui, canvas) {
         let item;
         const { windingRule, __font } = ui.__;
         for (let i = 0, len = fills.length; i < len; i++) {
@@ -9466,32 +9483,37 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    function strokeText(ui, canvas, stroke) {
+    function strokeText(stroke, ui, canvas, renderOptions) {
         const { strokeAlign } = ui.__;
         const isStrokes = typeof stroke !== 'string';
         switch (strokeAlign) {
             case 'center':
                 canvas.setStroke(isStrokes ? undefined : stroke, ui.__.strokeWidth, ui.__);
-                isStrokes ? drawStrokesStyle(ui, stroke, canvas, true) : drawTextStroke(ui, canvas);
+                isStrokes ? drawStrokesStyle(stroke, true, ui, canvas) : drawTextStroke(ui, canvas);
                 break;
             case 'inside':
-                drawAlignStroke(ui, canvas, stroke, 'inside', isStrokes);
+                drawAlignStroke('inside', stroke, isStrokes, ui, canvas, renderOptions);
                 break;
             case 'outside':
-                drawAlignStroke(ui, canvas, stroke, 'outside', isStrokes);
+                drawAlignStroke('outside', stroke, isStrokes, ui, canvas, renderOptions);
                 break;
         }
     }
-    function drawAlignStroke(ui, canvas, stroke, align, isStrokes) {
+    function drawAlignStroke(align, stroke, isStrokes, ui, canvas, renderOptions) {
         const { strokeWidth, __font } = ui.__;
         const out = canvas.getSameCanvas(true);
         out.setStroke(isStrokes ? undefined : stroke, strokeWidth * 2, ui.__);
         out.font = __font;
-        isStrokes ? drawStrokesStyle(ui, stroke, out, true) : drawTextStroke(ui, out);
+        isStrokes ? drawStrokesStyle(stroke, true, ui, out) : drawTextStroke(ui, out);
         out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
         fillText(ui, out);
         out.blendMode = 'normal';
-        canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds);
+        if (ui.__hasMirror || renderOptions.matrix) {
+            canvas.copyWorldByReset(out);
+        }
+        else {
+            canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds);
+        }
         out.recycle();
     }
     function drawTextStroke(ui, canvas) {
@@ -9511,7 +9533,7 @@ var LeaferUI = (function (exports) {
                 canvas.strokeRect(row.x, row.y + decorationY, row.width, decorationHeight);
         }
     }
-    function drawStrokesStyle(ui, strokes, canvas, isText) {
+    function drawStrokesStyle(strokes, isText, ui, canvas) {
         let item;
         for (let i = 0, len = strokes.length; i < len; i++) {
             item = strokes[i];
@@ -9531,13 +9553,13 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    function stroke(ui, canvas, stroke) {
+    function stroke(stroke, ui, canvas, renderOptions) {
         const options = ui.__;
         const { strokeWidth, strokeAlign, __font } = options;
         if (!strokeWidth)
             return;
         if (__font) {
-            strokeText(ui, canvas, stroke);
+            strokeText(stroke, ui, canvas, renderOptions);
         }
         else {
             switch (strokeAlign) {
@@ -9559,31 +9581,36 @@ var LeaferUI = (function (exports) {
                     out.stroke();
                     options.windingRule ? out.clip(options.windingRule) : out.clip();
                     out.clearWorld(ui.__layout.renderBounds);
-                    canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds);
+                    if (ui.__hasMirror || renderOptions.matrix) {
+                        canvas.copyWorldByReset(out);
+                    }
+                    else {
+                        canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds);
+                    }
                     out.recycle();
                     break;
             }
         }
     }
-    function strokes(ui, canvas, strokes) {
+    function strokes(strokes, ui, canvas, renderOptions) {
         const options = ui.__;
         const { strokeWidth, strokeAlign, __font } = options;
         if (!strokeWidth)
             return;
         if (__font) {
-            strokeText(ui, canvas, strokes);
+            strokeText(strokes, ui, canvas, renderOptions);
         }
         else {
             switch (strokeAlign) {
                 case 'center':
                     canvas.setStroke(undefined, strokeWidth, options);
-                    drawStrokesStyle(ui, strokes, canvas);
+                    drawStrokesStyle(strokes, false, ui, canvas);
                     break;
                 case 'inside':
                     canvas.save();
                     canvas.setStroke(undefined, strokeWidth * 2, options);
                     options.windingRule ? canvas.clip(options.windingRule) : canvas.clip();
-                    drawStrokesStyle(ui, strokes, canvas);
+                    drawStrokesStyle(strokes, false, ui, canvas);
                     canvas.restore();
                     break;
                 case 'outside':
@@ -9591,10 +9618,15 @@ var LeaferUI = (function (exports) {
                     const out = canvas.getSameCanvas(true);
                     ui.__drawRenderPath(out);
                     out.setStroke(undefined, strokeWidth * 2, ui.__);
-                    drawStrokesStyle(ui, strokes, out);
+                    drawStrokesStyle(strokes, false, ui, out);
                     options.windingRule ? out.clip(options.windingRule) : out.clip();
                     out.clearWorld(renderBounds);
-                    canvas.copyWorldToInner(out, ui.__world, renderBounds);
+                    if (ui.__hasMirror || renderOptions.matrix) {
+                        canvas.copyWorldByReset(out);
+                    }
+                    else {
+                        canvas.copyWorldToInner(out, ui.__world, renderBounds);
+                    }
                     out.recycle();
                     break;
             }
@@ -9726,21 +9758,21 @@ var LeaferUI = (function (exports) {
     }
 
     let recycleMap;
-    function compute(ui, attrName) {
+    function compute(attrName, ui) {
         const value = [];
         let item;
         let paints = ui.__.__input[attrName];
         if (!(paints instanceof Array))
             paints = [paints];
-        recycleMap = recycleImage(ui.__, attrName);
+        recycleMap = recycleImage(attrName, ui.__);
         for (let i = 0, len = paints.length; i < len; i++) {
-            item = getLeafPaint(ui, paints[i], attrName);
+            item = getLeafPaint(attrName, paints[i], ui);
             if (item)
                 value.push(item);
         }
         ui.__['_' + attrName] = value.length ? value : undefined;
     }
-    function getLeafPaint(ui, paint, attrName) {
+    function getLeafPaint(attrName, paint, ui) {
         if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0)
             return undefined;
         const { boxBounds } = ui.__layout;
@@ -9778,7 +9810,7 @@ var LeaferUI = (function (exports) {
     const { copy, toOffsetOutBounds: toOffsetOutBounds$1 } = BoundsHelper;
     const tempBounds = {};
     const offsetOutBounds$1 = {};
-    function shadow(ui, current, shape, _options) {
+    function shadow(ui, current, shape, renderOptions) {
         let copyBounds, spreadScale;
         const { __world, __layout } = ui;
         const { shadow } = ui.__;
@@ -9800,7 +9832,7 @@ var LeaferUI = (function (exports) {
                 }
                 worldCanvas ? other.copyWorld(worldCanvas, __world, __world, 'destination-out') : other.copyWorld(shape.canvas, shapeBounds, bounds, 'destination-out');
             }
-            if (ui.__hasMirror) {
+            if (ui.__hasMirror || renderOptions.matrix) {
                 current.copyWorldByReset(other, copyBounds, __world, item.blendMode);
             }
             else {
@@ -9840,7 +9872,7 @@ var LeaferUI = (function (exports) {
 
     const { toOffsetOutBounds } = BoundsHelper;
     const offsetOutBounds = {};
-    function innerShadow(ui, current, shape, _options) {
+    function innerShadow(ui, current, shape, renderOptions) {
         let copyBounds, spreadScale;
         const { __world, __layout: __layout } = ui;
         const { innerShadow } = ui.__;
@@ -9864,7 +9896,7 @@ var LeaferUI = (function (exports) {
                 copyBounds = bounds;
             }
             other.fillWorld(copyBounds, item.color, 'source-in');
-            if (ui.__hasMirror) {
+            if (ui.__hasMirror || renderOptions.matrix) {
                 current.copyWorldByReset(other, copyBounds, __world, item.blendMode);
             }
             else {
@@ -10002,7 +10034,7 @@ var LeaferUI = (function (exports) {
     const { trimRight } = TextRowHelper;
     const { Letter, Single, Before, After, Symbol, Break } = CharType;
     let word, row, wordWidth, rowWidth, realWidth;
-    let char, charWidth, charType, lastCharType, langBreak, afterBreak, paraStart;
+    let char, charWidth, startCharSize, charSize, charType, lastCharType, langBreak, afterBreak, paraStart;
     let textDrawData, rows = [], bounds;
     function createRows(drawData, content, style) {
         textDrawData = drawData;
@@ -10015,7 +10047,7 @@ var LeaferUI = (function (exports) {
         if (charMode) {
             paraStart = true;
             lastCharType = null;
-            wordWidth = rowWidth = 0;
+            startCharSize = charWidth = charSize = wordWidth = rowWidth = 0;
             word = { data: [] }, row = { words: [] };
             for (let i = 0, len = content.length; i < len; i++) {
                 char = content[i];
@@ -10031,8 +10063,11 @@ var LeaferUI = (function (exports) {
                     if (charType === Letter && textCase !== 'none')
                         char = getTextCase(char, textCase, !wordWidth);
                     charWidth = canvas.measureText(char).width;
-                    if (__letterSpacing)
+                    if (__letterSpacing) {
+                        if (__letterSpacing < 0)
+                            charSize = charWidth;
                         charWidth += __letterSpacing;
+                    }
                     langBreak = (charType === Single && (lastCharType === Single || lastCharType === Letter)) || (lastCharType === Single && charType !== After);
                     afterBreak = ((charType === Before || charType === Single) && (lastCharType === Symbol || lastCharType === After));
                     realWidth = paraStart && paraIndent ? width - paraIndent : width;
@@ -10082,6 +10117,8 @@ var LeaferUI = (function (exports) {
         }
     }
     function addChar(char, width) {
+        if (charSize && !startCharSize)
+            startCharSize = charSize;
         word.data.push({ char, width });
         wordWidth += width;
     }
@@ -10098,6 +10135,11 @@ var LeaferUI = (function (exports) {
             row.paraStart = true;
             paraStart = false;
         }
+        if (charSize) {
+            row.startCharSize = startCharSize;
+            row.endCharSize = charSize;
+            startCharSize = 0;
+        }
         row.width = rowWidth;
         if (bounds.width)
             trimRight(row);
@@ -10171,7 +10213,7 @@ var LeaferUI = (function (exports) {
 
     function layoutText(drawData, style) {
         const { rows, bounds } = drawData;
-        const { __lineHeight, __baseLine, textAlign, verticalAlign, paraSpacing, textOverflow } = style;
+        const { __lineHeight, __baseLine, __letterSpacing, textAlign, verticalAlign, paraSpacing, textOverflow } = style;
         let { x, y, width, height } = bounds, realHeight = __lineHeight * rows.length + (paraSpacing ? paraSpacing * (drawData.paraNumber - 1) : 0);
         let starY = __baseLine;
         if (textOverflow !== 'show' && realHeight > height) {
@@ -10188,7 +10230,7 @@ var LeaferUI = (function (exports) {
             }
         }
         starY += y;
-        let row;
+        let row, rowX, rowWidth;
         for (let i = 0, len = rows.length; i < len; i++) {
             row = rows[i];
             row.x = x;
@@ -10207,20 +10249,22 @@ var LeaferUI = (function (exports) {
                 row.isOverflow = true;
                 drawData.overflow = i + 1;
             }
-            if (row.width < 0) {
-                const charWidth = row.words[0].data[0].width;
-                const rowX = row.x + row.width;
-                if (rowX < bounds.x)
-                    bounds.x = rowX - charWidth;
-                if (-row.width > bounds.width)
-                    bounds.width = -row.width + style.fontSize + charWidth;
-            }
-            else {
-                if (row.x < bounds.x)
-                    bounds.x = row.x;
-                if (row.width > bounds.width)
-                    bounds.width = row.width;
+            rowX = row.x;
+            rowWidth = row.width;
+            if (__letterSpacing < 0) {
+                if (row.width < 0) {
+                    rowWidth = -row.width + style.fontSize + __letterSpacing;
+                    rowX -= rowWidth;
+                    rowWidth += style.fontSize;
+                }
+                else {
+                    rowWidth -= __letterSpacing;
+                }
             }
+            if (rowX < bounds.x)
+                bounds.x = rowX;
+            if (rowWidth > bounds.width)
+                bounds.width = rowWidth;
         }
         bounds.y = y;
         bounds.height = realHeight;
@@ -10272,10 +10316,9 @@ var LeaferUI = (function (exports) {
             if (typeof content !== 'string')
                 content = String(content);
             let x = 0, y = 0;
-            let { width, height, padding } = style;
-            const { textDecoration, textOverflow, __font } = style;
-            if (!width)
-                width = 0;
+            let width = style.__getInput('width') || 0;
+            let height = style.__getInput('height') || 0;
+            const { textDecoration, textOverflow, __font, padding } = style;
             if (padding) {
                 const [top, right, bottom, left] = MathHelper.fourNumber(padding);
                 if (width) {