@leafer-ui/image 1.6.6 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/image",
-  "version": "1.6.6",
+  "version": "1.7.0",
   "description": "@leafer-ui/image",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -22,11 +22,11 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.6.6",
-    "@leafer-ui/draw": "1.6.6"
+    "@leafer/core": "1.7.0",
+    "@leafer-ui/draw": "1.7.0"
   },
   "devDependencies": {
-    "@leafer/interface": "1.6.6",
-    "@leafer-ui/interface": "1.6.6"
+    "@leafer/interface": "1.7.0",
+    "@leafer-ui/interface": "1.7.0"
   }
 }

package/src/data.ts

@@ -12,9 +12,10 @@ const tempScaleData = {} as IScaleData
 const tempImage = {} as IBoundsData
 
 export function createData(leafPaint: ILeafPaint, image: ILeaferImage, paint: IImagePaint, box: IBoundsData): void {
-    const { changeful, sync } = paint
+    const { changeful, sync, editing } = paint
     if (changeful) leafPaint.changeful = changeful
     if (sync) leafPaint.sync = sync
+    if (editing) leafPaint.editing = editing
     leafPaint.data = getPatternData(paint, box, image)
 }
 
@@ -23,7 +24,7 @@ export function getPatternData(paint: IImagePaint, box: IBoundsData, image: ILea
     if (paint.mode === 'strench' as string) paint.mode = 'stretch' // 兼容代码，后续可移除
 
     let { width, height } = image
-    const { opacity, mode, align, offset, scale, size, rotation, repeat, filters } = paint
+    const { opacity, mode, align, offset, scale, size, rotation, skew, repeat, filters } = paint
     const sameBox = box.width === width && box.height === height
 
     const data: ILeafPaintPatternData = { mode }
@@ -59,7 +60,7 @@ export function getPatternData(paint: IImagePaint, box: IBoundsData, image: ILea
             break
         case 'normal':
         case 'clip':
-            if (tempImage.x || tempImage.y || scaleX || rotation) clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation)
+            if (tempImage.x || tempImage.y || scaleX || rotation || skew) clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew)
             break
         case 'repeat':
             if (!sameBox || scaleX || rotation) repeatMode(data, box, width, height, tempImage.x, tempImage.y, scaleX, scaleY, rotation, align)

package/src/image.ts

@@ -60,12 +60,12 @@ export function image(ui: IUI, attrName: string, paint: IImagePaint, boxBounds:
                     }
                     onLoadSuccess(ui, event)
                 }
-                leafPaint.loadId = null
+                leafPaint.loadId = undefined
             },
             (error) => {
                 ignoreRender(ui, false)
                 onLoadError(ui, event, error)
-                leafPaint.loadId = null
+                leafPaint.loadId = undefined
             }
         )
 

package/src/mode.ts

@@ -5,7 +5,7 @@ import { ILeafPaintPatternData } from '@leafer-ui/interface'
 
 
 let origin = {} as IPointData
-const { get, rotateOfOuter, translate, scaleOfOuter, scale: scaleHelper, rotate } = MatrixHelper
+const { get, rotateOfOuter, translate, scaleOfOuter, scale: scaleHelper, rotate, skew: skewHelper } = MatrixHelper
 
 export function fillOrFitMode(data: ILeafPaintPatternData, box: IBoundsData, x: number, y: number, scaleX: number, scaleY: number, rotation: number): void {
     const transform: IMatrixData = get()
@@ -16,11 +16,13 @@ export function fillOrFitMode(data: ILeafPaintPatternData, box: IBoundsData, x:
 }
 
 
-export function clipMode(data: ILeafPaintPatternData, box: IBoundsData, x: number, y: number, scaleX: number, scaleY: number, rotation: number): void {
+export function clipMode(data: ILeafPaintPatternData, box: IBoundsData, x: number, y: number, scaleX: number, scaleY: number, rotation: number, skew: IPointData): void {
+    // rotate -> skew -> scale -> translate
     const transform: IMatrixData = get()
-    translate(transform, box.x + x, box.y + y)
-    if (scaleX) scaleHelper(transform, scaleX, scaleY)
     if (rotation) rotate(transform, rotation)
+    if (skew) skewHelper(transform, skew.x, skew.y)
+    if (scaleX) scaleHelper(transform, scaleX, scaleY)
+    translate(transform, box.x + x, box.y + y)
     data.transform = transform
 }
 

package/src/pattern.ts

@@ -21,6 +21,8 @@ export function createPattern(ui: IUI, paint: ILeafPaint, pixelRatio: number): b
         let imageScale: number, imageMatrix: IMatrixData, { width, height, scaleX: sx, scaleY: sy, transform, repeat } = data
 
         if (sx) {
+            sx = abs(sx) // maybe -1
+            sy = abs(sy)
             imageMatrix = get()
             copy(imageMatrix, transform)
             scale(imageMatrix, 1 / sx, 1 / sy)