@leafer-ui/image 1.6.7 → 1.8.0

package/package.json

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

package/src/check.ts

@@ -7,10 +7,8 @@ import { Export } from '@leafer-ui/draw'
 import { createPattern } from './pattern'
 
 
-const { abs } = Math
-
 export function checkImage(ui: IUI, canvas: ILeaferCanvas, paint: ILeafPaint, allowDraw?: boolean): boolean {
-    const { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld
+    const { scaleX, scaleY } = ui.getRenderScaleData(true, paint.scaleFixed)
     const { pixelRatio } = canvas, { data } = paint
 
     if (!data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !Export.running)) {
@@ -23,8 +21,8 @@ export function checkImage(ui: IUI, canvas: ILeaferCanvas, paint: ILeafPaint, al
             } else {
                 if (!(paint.changeful || ResizeEvent.isResizing(ui) || Export.running)) {
                     let { width, height } = data
-                    width *= abs(scaleX) * pixelRatio
-                    height *= abs(scaleY) * pixelRatio
+                    width *= scaleX * pixelRatio
+                    height *= scaleY * pixelRatio
                     if (data.scaleX) {
                         width *= data.scaleX
                         height *= data.scaleY
@@ -35,6 +33,10 @@ export function checkImage(ui: IUI, canvas: ILeaferCanvas, paint: ILeafPaint, al
         }
 
         if (allowDraw) {
+            if (ui.__.__isFastShadow) { // fix: 快速阴影时，直接 drawImage 会无阴影，需fill一下
+                canvas.fillStyle = paint.style || '#000'
+                canvas.fill()
+            }
             drawImage(ui, canvas, paint, data) // 直接绘制图像，不生成图案
             return true
         } else {

package/src/data.ts

@@ -12,9 +12,11 @@ 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, scaleFixed } = paint
     if (changeful) leafPaint.changeful = changeful
     if (sync) leafPaint.sync = sync
+    if (editing) leafPaint.editing = editing
+    if (scaleFixed) leafPaint.scaleFixed = scaleFixed
     leafPaint.data = getPatternData(paint, box, image)
 }
 
@@ -23,7 +25,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, clipSize, repeat, filters } = paint
     const sameBox = box.width === width && box.height === height
 
     const data: ILeafPaintPatternData = { mode }
@@ -59,7 +61,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 || clipSize || rotation || skew) clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, paint.clipSize)
             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

@@ -1,11 +1,11 @@
-import { IBoundsData, IPointData, IMatrixData, IAlign } from '@leafer/interface'
-import { MatrixHelper } from '@leafer/core'
+import { IBoundsData, IPointData, IMatrixData, IAlign, ISizeData } from '@leafer/interface'
+import { getMatrixData, MatrixHelper } from '@leafer/core'
 
 import { ILeafPaintPatternData } from '@leafer-ui/interface'
 
 
-let origin = {} as IPointData
-const { get, rotateOfOuter, translate, scaleOfOuter, scale: scaleHelper, rotate } = MatrixHelper
+let origin = {} as IPointData, tempMatrix = getMatrixData()
+const { get, rotateOfOuter, translate, scaleOfOuter, multiplyParent, 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,17 @@ 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, clipSize?: ISizeData): 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)
+    if (clipSize) {
+        tempMatrix.a = box.width / clipSize.width, tempMatrix.d = box.height / clipSize.height
+        multiplyParent(transform, tempMatrix)
+    }
     data.transform = transform
 }
 

package/src/pattern.ts

@@ -1,4 +1,4 @@
-import { Platform, MatrixHelper, ImageManager } from '@leafer/core'
+import { Platform, MatrixHelper } from '@leafer/core'
 
 import { IUI, ILeafPaint, IMatrixData } from '@leafer-ui/interface'
 
@@ -7,20 +7,17 @@ const { get, scale, copy } = MatrixHelper
 const { ceil, abs } = Math
 
 export function createPattern(ui: IUI, paint: ILeafPaint, pixelRatio: number): boolean {
-
-    let { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld
-
+    let { scaleX, scaleY } = ui.getRenderScaleData(true, paint.scaleFixed)
     const id = scaleX + '-' + scaleY + '-' + pixelRatio
 
     if (paint.patternId !== id && !ui.destroyed) {
 
-        scaleX = abs(scaleX) // maybe -1
-        scaleY = abs(scaleY)
-
         const { image, data } = paint
         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)