@leafer-ui/paint 1.0.0-rc.7 → 1.0.0-rc.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/paint",
-  "version": "1.0.0-rc.7",
+  "version": "1.0.0-rc.9",
   "description": "@leafer-ui/paint",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -22,10 +22,10 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0-rc.7"
+    "@leafer/core": "1.0.0-rc.9"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-rc.7",
-    "@leafer-ui/interface": "1.0.0-rc.7"
+    "@leafer/interface": "1.0.0-rc.9",
+    "@leafer-ui/interface": "1.0.0-rc.9"
   }
 }

package/src/paint/image/check.ts

@@ -19,7 +19,7 @@ export function checkImage(ui: IUI, canvas: ILeaferCanvas, paint: ILeafPaint, al
         const { data } = paint
 
         if (allowPaint) {
-            if (data.mode !== 'repeat') {
+            if (!data.repeat) {
                 let { width, height } = data
                 width *= abs(scaleX) * canvas.pixelRatio
                 height *= abs(scaleY) * canvas.pixelRatio

package/src/paint/image/data.ts

@@ -11,12 +11,23 @@ const { get, translate } = MatrixHelper
 export function createData(leafPaint: ILeafPaint, image: ILeaferImage, paint: IImagePaint, box: IBoundsData): void {
     let { width, height } = image
 
-    const { opacity, mode, offset, scale, rotation, blendMode } = paint
+
+    const { opacity, mode, offset, scale, size, rotation, blendMode, repeat } = paint
     const sameBox = box.width === width && box.height === height
     if (blendMode) leafPaint.blendMode = blendMode
 
     const data: ILeafPaintPatternData = leafPaint.data = { mode }
 
+    let x: number, y: number, scaleX: number, scaleY: number
+    if (offset) x = offset.x, y = offset.y
+    if (size) {
+        scaleX = (typeof size === 'number' ? size : size.width) / width
+        scaleY = (typeof size === 'number' ? size : size.height) / height
+    } else if (scale) {
+        scaleX = typeof scale === 'number' ? scale : scale.x
+        scaleY = typeof scale === 'number' ? scale : scale.y
+    }
+
     switch (mode) {
         case 'strench':
             if (!sameBox) width = box.width, height = box.height
@@ -26,10 +37,11 @@ export function createData(leafPaint: ILeafPaint, image: ILeaferImage, paint: II
             }
             break
         case 'clip':
-            if (offset || scale || rotation) clipMode(data, box, offset, scale, rotation)
+            if (offset || scaleX || rotation) clipMode(data, box, x, y, scaleX, scaleY, rotation)
             break
         case 'repeat':
-            if (!sameBox || scale || rotation) repeatMode(data, box, width, height, scale as number, rotation)
+            if (!sameBox || scaleX || rotation) repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation)
+            if (!repeat) data.repeat = 'repeat'
             break
         case 'fit':
         case 'cover':
@@ -40,4 +52,5 @@ export function createData(leafPaint: ILeafPaint, image: ILeaferImage, paint: II
     data.width = width
     data.height = height
     if (opacity) data.opacity = opacity
+    if (repeat) data.repeat = typeof repeat === 'string' ? (repeat === 'x' ? 'repeat-x' : 'repeat-y') : 'repeat'
 }

package/src/paint/image/image.ts

@@ -64,11 +64,11 @@ function hasNaturalSize(ui: IUI, attrName: string, image: ISizeData): boolean {
         d.__naturalWidth = image.width
         d.__naturalHeight = image.height
         if (!d.__getInput('width') || !d.__getInput('height')) {
+            ui.forceUpdate('width')
             if (ui.__proxyData) {
                 ui.setProxyAttr('width', ui.__.width)
                 ui.setProxyAttr('height', ui.__.height)
             }
-            ui.forceUpdate('width')
             return false
         }
     }

package/src/paint/image/mode.ts

@@ -1,9 +1,10 @@
-import { IBoundsData } from '@leafer/interface'
+import { IBoundsData, IPointData, IMatrixData, } from '@leafer/interface'
 import { MatrixHelper } from '@leafer/core'
 
-import { IMatrixData, IImagePaintMode, IPointData, ILeafPaintPatternData } from '@leafer-ui/interface'
+import { IImagePaintMode, ILeafPaintPatternData } from '@leafer-ui/interface'
 
 
+let origin = {} as IPointData
 const { get, rotateOfOuter, translate, scaleOfOuter, scale: scaleHelper, rotate } = MatrixHelper
 
 export function fillOrFitMode(data: ILeafPaintPatternData, mode: IImagePaintMode, box: IBoundsData, width: number, height: number, rotation: number): void {
@@ -22,12 +23,12 @@ export function fillOrFitMode(data: ILeafPaintPatternData, mode: IImagePaintMode
 }
 
 
-export function clipMode(data: ILeafPaintPatternData, box: IBoundsData, offset: IPointData, scale: number | IPointData, rotation: number): void {
+export function clipMode(data: ILeafPaintPatternData, box: IBoundsData, x: number, y: number, scaleX: number, scaleY: number, rotation: number): void {
     const transform: IMatrixData = get()
     translate(transform, box.x, box.y)
-    if (offset) translate(transform, offset.x, offset.y)
-    if (scale) {
-        typeof scale === 'number' ? scaleHelper(transform, scale) : scaleHelper(transform, scale.x, scale.y)
+    if (x || y) translate(transform, x, y)
+    if (scaleX) {
+        scaleHelper(transform, scaleX, scaleY)
         data.scaleX = transform.a
         data.scaleY = transform.d
     }
@@ -36,9 +37,8 @@ export function clipMode(data: ILeafPaintPatternData, box: IBoundsData, offset:
 }
 
 
-export function repeatMode(data: ILeafPaintPatternData, box: IBoundsData, width: number, height: number, scale: number, rotation: number): void {
+export function repeatMode(data: ILeafPaintPatternData, box: IBoundsData, width: number, height: number, x: number, y: number, scaleX: number, scaleY: number, rotation: number): void {
     const transform = get()
-
     if (rotation) {
         rotate(transform, rotation)
         switch (rotation) {
@@ -53,10 +53,14 @@ export function repeatMode(data: ILeafPaintPatternData, box: IBoundsData, width:
                 break
         }
     }
-    translate(transform, box.x, box.y)
-    if (scale) {
-        scaleOfOuter(transform, box, scale)
-        data.scaleX = data.scaleY = scale
+    origin.x = box.x
+    origin.y = box.y
+    if (x || y) origin.x += x, origin.y += y
+    translate(transform, origin.x, origin.y)
+    if (scaleX) {
+        scaleOfOuter(transform, origin, scaleX, scaleY)
+        data.scaleX = scaleX
+        data.scaleY = scaleY
     }
     data.transform = transform
 }

package/src/paint/image/pattern.ts

@@ -17,7 +17,7 @@ export function createPattern(ui: IUI, paint: ILeafPaint, pixelRatio: number): b
         scaleY = Math.abs(scaleY)
 
         const { image, data } = paint
-        let imageScale: number, imageMatrix: IMatrixData, { width, height, scaleX: sx, scaleY: sy, opacity, transform, mode } = data
+        let imageScale: number, imageMatrix: IMatrixData, { width, height, scaleX: sx, scaleY: sy, opacity, transform, repeat } = data
 
         if (sx) {
             imageMatrix = get()
@@ -34,7 +34,7 @@ export function createPattern(ui: IUI, paint: ILeafPaint, pixelRatio: number): b
 
         const size = width * height
 
-        if (paint.data.mode !== 'repeat') {
+        if (!repeat) {
             if (size > Platform.image.maxCacheSize) return false // same as check()
         }
 
@@ -67,7 +67,7 @@ export function createPattern(ui: IUI, paint: ILeafPaint, pixelRatio: number): b
             scale(imageMatrix, 1 / scaleX, 1 / scaleY)
         }
 
-        const pattern = Platform.canvas.createPattern(image.getCanvas(width < 1 ? 1 : width, height < 1 ? 1 : height, opacity) as any, mode === 'repeat' ? 'repeat' : (Platform.origin.noRepeat || 'no-repeat'))
+        const pattern = Platform.canvas.createPattern(image.getCanvas(width < 1 ? 1 : width, height < 1 ? 1 : height, opacity) as any, repeat || (Platform.origin.noRepeat || 'no-repeat'))
 
         try {
             if (paint.transform) paint.transform = null