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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/paint",
-  "version": "1.0.0-beta.7",
+  "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.7",
-    "@leafer-ui/color": "1.0.0-beta.7"
+    "@leafer/core": "1.0.0-beta.8",
+    "@leafer-ui/color": "1.0.0-beta.8"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-beta.7",
-    "@leafer-ui/interface": "1.0.0-beta.7"
+    "@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

@@ -16,7 +16,7 @@ export function image(ui: IUI, attrName: string, paint: IImagePaint, box: IBound
 
     if (image.ready) {
 
-        if (!autoSize(ui, image)) {
+        if (hasSize(ui, attrName, image)) {
 
             let transform: IMatrixData
             let { opacity, mode, offset, scale, rotation } = paint
@@ -52,7 +52,7 @@ export function image(ui: IUI, attrName: string, paint: IImagePaint, box: IBound
         imageManager.load(image,
             () => {
                 if (ui.leafer) {
-                    if (!autoSize(ui, image)) ui.forceUpdate('width')
+                    if (hasSize(ui, attrName, image)) ui.forceUpdate('width')
                     ui.emitEvent(new ImageEvent(ImageEvent.LOADED, ui, image, attrName, paint))
                 }
             },
@@ -66,20 +66,21 @@ export function image(ui: IUI, attrName: string, paint: IImagePaint, box: IBound
     return leaferPaint
 }
 
-function autoSize(ui: IUI, image: ISizeData): boolean {
-    let auto: boolean
+function hasSize(ui: IUI, attrName: string, image: ISizeData): boolean {
     const { __: data } = ui
-    if (data) {
-        if (!data.__getInput('width')) {
-            auto = true
-            ui.width = image.width
-        }
-        if (!data.__getInput('height')) {
-            auto = true
-            ui.height = image.height
+
+    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 auto
+
+    return true
 }
 
 function getFillOrFitTransform(mode: IImagePaintMode, box: IBoundsData, width: number, height: number, rotation: number): IMatrixData {

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
 
 }