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

package/dist/web.module.js

@@ -647,7 +647,7 @@ const BoundsHelper = {
     },
     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 = {};
@@ -1048,6 +1048,9 @@ const EventCreator = {
             }
         }
     },
+    has(type) {
+        return !!this.nameList[type];
+    },
     get(type, ...params) {
         return new nameList[type](...params);
     }
@@ -4588,7 +4591,8 @@ class InteractionBase {
                 dragDistance: 2,
                 swipeDistance: 20,
                 ignoreMove: false
-            }
+            },
+            cursor: {}
         };
         this.tapCount = 0;
         this.downKeyMap = {};
@@ -4814,6 +4818,8 @@ class InteractionBase {
         this.hoverData = data;
     }
     updateCursor(data) {
+        if (this.config.cursor.stop)
+            return;
         if (!data) {
             this.updateHoverData();
             data = this.hoverData;
@@ -4826,17 +4832,16 @@ class InteractionBase {
         }
         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;
@@ -5158,6 +5163,8 @@ const LeafEventer = {
         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) {
@@ -5452,7 +5459,7 @@ const LeafRender = {
                 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 {
@@ -5521,7 +5528,12 @@ const BranchRender = {
                 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 {
@@ -7420,7 +7432,7 @@ class UIData extends LeafData {
         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;
@@ -7436,7 +7448,7 @@ class UIData extends LeafData {
         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;
@@ -7688,11 +7700,11 @@ const UIRender = {
         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) {
@@ -7704,40 +7716,40 @@ const UIRender = {
                 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);
     }
 };
 
@@ -7806,9 +7818,9 @@ let UI = UI_1 = class UI extends Leaf {
         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() {
@@ -7925,7 +7937,7 @@ __decorate([
     hitType()
 ], UI.prototype, "hitRadius", void 0);
 __decorate([
-    cursorType('default')
+    cursorType('')
 ], UI.prototype, "cursor", void 0);
 __decorate([
     surfaceType()
@@ -8272,14 +8284,19 @@ let Polygon = class Polygon extends UI {
     __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([
@@ -8373,7 +8390,7 @@ let Line = class Line extends UI {
     }
     __updateBoxBounds() {
         if (this.points) {
-            toBounds$1(this.__.path, this.__layout.boxBounds);
+            toBounds$1(this.__.__pathForRender, this.__layout.boxBounds);
             this.__updateNaturalSize();
         }
         else {
@@ -9383,7 +9400,7 @@ function checkImage(ui, canvas, paint, allowPaint) {
     }
 }
 
-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;
@@ -9428,11 +9445,11 @@ function fillText(ui, canvas) {
     }
 }
 
-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++) {
@@ -9463,32 +9480,37 @@ function fills(ui, canvas, fills) {
     }
 }
 
-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) {
@@ -9508,7 +9530,7 @@ function drawTextStroke(ui, canvas) {
             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];
@@ -9528,13 +9550,13 @@ function drawStrokesStyle(ui, strokes, canvas, isText) {
     }
 }
 
-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) {
@@ -9556,31 +9578,36 @@ function stroke(ui, canvas, stroke) {
                 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':
@@ -9588,10 +9615,15 @@ function strokes(ui, canvas, strokes) {
                 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;
         }
@@ -9723,21 +9755,21 @@ function conicGradient(paint, box) {
 }
 
 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;
@@ -9775,7 +9807,7 @@ var UIPaint = /*#__PURE__*/Object.freeze({
 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.__;
@@ -9797,7 +9829,7 @@ function shadow(ui, current, shape, _options) {
             }
             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 {
@@ -9837,7 +9869,7 @@ function drawWorldShadow(canvas, outBounds, spreadScale, shape) {
 
 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.__;
@@ -9861,7 +9893,7 @@ function innerShadow(ui, current, shape, _options) {
             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 {
@@ -9999,7 +10031,7 @@ function getTextCase(char, textCase, firstChar) {
 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;
@@ -10012,7 +10044,7 @@ function createRows(drawData, content, style) {
     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];
@@ -10028,8 +10060,11 @@ function createRows(drawData, content, style) {
                 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;
@@ -10079,6 +10114,8 @@ function createRows(drawData, content, style) {
     }
 }
 function addChar(char, width) {
+    if (charSize && !startCharSize)
+        startCharSize = charSize;
     word.data.push({ char, width });
     wordWidth += width;
 }
@@ -10095,6 +10132,11 @@ function addRow() {
         row.paraStart = true;
         paraStart = false;
     }
+    if (charSize) {
+        row.startCharSize = startCharSize;
+        row.endCharSize = charSize;
+        startCharSize = 0;
+    }
     row.width = rowWidth;
     if (bounds.width)
         trimRight(row);
@@ -10168,7 +10210,7 @@ function toChar(data, charX, rowData) {
 
 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) {
@@ -10185,7 +10227,7 @@ function layoutText(drawData, style) {
         }
     }
     starY += y;
-    let row;
+    let row, rowX, rowWidth;
     for (let i = 0, len = rows.length; i < len; i++) {
         row = rows[i];
         row.x = x;
@@ -10204,20 +10246,22 @@ function layoutText(drawData, style) {
             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;
@@ -10269,10 +10313,9 @@ const TextConvert = {
         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) {