@leafer-ui/paint 1.0.0-beta.6 → 1.0.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/paint",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.8",
   "description": "@leafer-ui/paint",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -19,11 +19,11 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0-beta.6",
-    "@leafer-ui/color": "1.0.0-beta.6"
+    "@leafer/core": "1.0.0-beta.8",
+    "@leafer-ui/color": "1.0.0-beta.8"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-beta.6",
-    "@leafer-ui/interface": "1.0.0-beta.6"
+    "@leafer/interface": "1.0.0-beta.8",
+    "@leafer-ui/interface": "1.0.0-beta.8"
   }
 }

package/src/Fill.ts

@@ -7,7 +7,7 @@ import { drawText } from './FillText'
 
 export function fill(ui: IUI, canvas: ILeaferCanvas, fill: string | object): void {
     canvas.fillStyle = fill
-    ui.__.__font ? drawText(ui, canvas) : canvas.fill(ui.__.windingRule)
+    ui.__.__font ? drawText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill())
 }
 
 export function fills(ui: IUI, canvas: ILeaferCanvas, fills: ILeafPaint[]): void {
@@ -25,21 +25,22 @@ export function fills(ui: IUI, canvas: ILeaferCanvas, fills: ILeafPaint[]): void
 
             if (item.blendMode) canvas.blendMode = item.blendMode
 
-            __font ? drawText(ui, canvas) : canvas.fill(windingRule)
+            __font ? drawText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill())
 
             canvas.restore()
         } else {
             if (item.blendMode) {
                 canvas.saveBlendMode(item.blendMode)
 
-                __font ? drawText(ui, canvas) : canvas.fill(windingRule)
+                __font ? drawText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill())
 
                 canvas.restoreBlendMode()
             } else {
 
-                __font ? drawText(ui, canvas) : canvas.fill(windingRule)
+                __font ? drawText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill())
 
             }
         }
+
     }
 }

package/src/Shape.ts

@@ -37,7 +37,14 @@ export function shape(ui: IUI, current: ILeaferCanvas, options: IRenderOptions):
 
     } else {
 
-        bounds = shapeBounds = __world
+        if (options.matrix) {
+            scaleX *= options.matrix.a
+            scaleY *= options.matrix.d
+            bounds = shapeBounds = getOuterOf(__world, options.matrix)
+        } else {
+            bounds = shapeBounds = __world
+        }
+
         worldCanvas = canvas
     }
 

package/src/Stroke.ts

@@ -8,6 +8,7 @@ import { strokeText, strokesText } from './StrokeText'
 export function stroke(ui: IUI, canvas: ILeaferCanvas, stroke: string | object): void {
     const options = ui.__
     const { strokeWidth, strokeAlign, __font } = options
+    if (!strokeWidth) return
 
     if (__font) {
 
@@ -58,6 +59,7 @@ export function stroke(ui: IUI, canvas: ILeaferCanvas, stroke: string | object):
 export function strokes(ui: IUI, canvas: ILeaferCanvas, strokes: ILeafPaint[]): void {
     const options = ui.__
     const { strokeWidth, strokeAlign, __font } = options
+    if (!strokeWidth) return
 
     if (__font) {
 

package/src/paint/conic.ts

@@ -41,11 +41,8 @@ export function conicGradient(paint: IGradientPaint, box: IBoundsData): ILeafPai
     const style = Platform.conicGradientSupport ? Platform.canvas.createConicGradient(0, realFrom.x, realFrom.y) : Platform.canvas.createRadialGradient(realFrom.x, realFrom.y, 0, realFrom.x, realFrom.y, getDistance(realFrom, realTo))
     applyStops(style, paint.stops, opacity)
 
-    return {
-        type,
-        blendMode,
-        style,
-        transform
-    }
+    const data: ILeafPaint = { type, style, transform }
+    if (blendMode) data.blendMode = blendMode
+    return data
 
 }

package/src/paint/image.ts

@@ -1,4 +1,4 @@
-import { IBoundsData } from '@leafer/interface'
+import { IBoundsData, ISizeData } from '@leafer/interface'
 import { Platform, MatrixHelper, ImageEvent } from '@leafer/core'
 
 import { IUI, IImagePaint, ILeafPaint, IMatrixData, IImagePaintMode, IPointData } from '@leafer-ui/interface'
@@ -7,53 +7,54 @@ import { IUI, IImagePaint, ILeafPaint, IMatrixData, IImagePaintMode, IPointData
 const { get, rotateOfOuter, translate, scaleOfOuter, scale: scaleHelper, rotate } = MatrixHelper
 
 export function image(ui: IUI, attrName: string, paint: IImagePaint, box: IBoundsData): ILeafPaint {
-    let { type, blendMode } = paint
-    let leaferPaint: ILeafPaint = {
-        type,
-        blendMode,
-        style: 'rgba(255,255,255,0)'
-    }
+    const { type, blendMode } = paint
+    let leaferPaint: ILeafPaint = { type, style: 'rgba(255,255,255,0)' }
+    if (blendMode) leaferPaint.blendMode = blendMode
 
     const { imageManager } = ui.leafer
     const image = imageManager.get(paint)
 
     if (image.ready) {
 
-        let transform: IMatrixData
-        let { opacity, mode, offset, scale, rotation } = paint
-        let { width, height } = image
-        const sameBox = box.width === width && box.height === height
-
-        switch (mode) {
-            case 'strench':
-                if (!sameBox) width = box.width, height = box.height
-                if (box.x || box.y) {
-                    transform = get()
-                    translate(transform, box.x, box.y)
-                }
-                break
-            case 'clip':
-                if (offset || scale || rotation) transform = getClipTransform(box, offset, scale, rotation)
-                break
-            case 'repeat':
-                if (!sameBox || scale || rotation) transform = getRepeatTransform(box, width, height, scale as number, rotation)
-                break
-            case 'fit':
-            case 'cover':
-            default:
-                if (!sameBox || rotation) transform = getFillOrFitTransform(mode, box, width, height, rotation)
-        }
+        if (hasSize(ui, attrName, image)) {
+
+            let transform: IMatrixData
+            let { opacity, mode, offset, scale, rotation } = paint
+            let { width, height } = image
+            const sameBox = box.width === width && box.height === height
+
+            switch (mode) {
+                case 'strench':
+                    if (!sameBox) width = box.width, height = box.height
+                    if (box.x || box.y) {
+                        transform = get()
+                        translate(transform, box.x, box.y)
+                    }
+                    break
+                case 'clip':
+                    if (offset || scale || rotation) transform = getClipTransform(box, offset, scale, rotation)
+                    break
+                case 'repeat':
+                    if (!sameBox || scale || rotation) transform = getRepeatTransform(box, width, height, scale as number, rotation)
+                    break
+                case 'fit':
+                case 'cover':
+                default:
+                    if (!sameBox || rotation) transform = getFillOrFitTransform(mode, box, width, height, rotation)
+            }
 
-        leaferPaint.style = createPattern(image.getCanvas(width, height, opacity), transform, mode === 'repeat')
+            leaferPaint.style = createPattern(image.getCanvas(width, height, opacity), transform, mode === 'repeat')
+
+        }
 
     } else {
 
         imageManager.load(image,
             () => {
-                if (!ui.__.__getInput('width')) ui.width = image.width
-                if (!ui.__.__getInput('height')) ui.height = image.height
-                ui.forceUpdate('width')
-                ui.emitEvent(new ImageEvent(ImageEvent.LOADED, ui, image, attrName, paint))
+                if (ui.leafer) {
+                    if (hasSize(ui, attrName, image)) ui.forceUpdate('width')
+                    ui.emitEvent(new ImageEvent(ImageEvent.LOADED, ui, image, attrName, paint))
+                }
             },
             (error) => {
                 ui.emitEvent(new ImageEvent(ImageEvent.ERROR, ui, image, attrName, paint, error))
@@ -65,6 +66,23 @@ export function image(ui: IUI, attrName: string, paint: IImagePaint, box: IBound
     return leaferPaint
 }
 
+function hasSize(ui: IUI, attrName: string, image: ISizeData): boolean {
+    const { __: data } = ui
+
+    if (attrName === 'fill' && data) {
+        if (!data.__naturalWidth || !data.__naturalHeight) {
+            data.__naturalWidth = image.width
+            data.__naturalHeight = image.height
+            if (!data.__getInput('width') || !data.__getInput('height')) {
+                ui.forceUpdate('width')
+                return false
+            }
+        }
+    }
+
+    return true
+}
+
 function getFillOrFitTransform(mode: IImagePaintMode, box: IBoundsData, width: number, height: number, rotation: number): IMatrixData {
     const transform: IMatrixData = get()
     const swap = rotation && rotation !== 180

package/src/paint/linear.ts

@@ -18,11 +18,9 @@ export function linearGradient(paint: IGradientPaint, box: IBoundsData): ILeafPa
     const style = Platform.canvas.createLinearGradient(box.x + from.x * box.width, box.y + from.y * box.height, box.x + to.x * box.width, box.y + to.y * box.height)
     applyStops(style, paint.stops, opacity)
 
-    return {
-        type,
-        blendMode,
-        style
-    }
+    const data: ILeafPaint = { type, style }
+    if (blendMode) data.blendMode = blendMode
+    return data
 
 }
 

package/src/paint/radial.ts

@@ -37,11 +37,8 @@ export function radialGradient(paint: IGradientPaint, box: IBoundsData): ILeafPa
     const style = Platform.canvas.createRadialGradient(realFrom.x, realFrom.y, 0, realFrom.x, realFrom.y, getDistance(realFrom, realTo))
     applyStops(style, paint.stops, opacity)
 
-    return {
-        type,
-        blendMode,
-        style,
-        transform
-    }
+    const data: ILeafPaint = { type, style, transform }
+    if (blendMode) data.blendMode = blendMode
+    return data
 
 }