@leafer-ui/image 1.6.1 → 1.6.3

package/package.json

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

package/src/data.ts

@@ -1,5 +1,5 @@
-import { IBoundsData, ILeaferImage, IPointData, IScaleData } from '@leafer/interface'
-import { MatrixHelper, MathHelper, Bounds, AlignHelper } from '@leafer/core'
+import { IBoundsData, ILeaferImage, IScaleData } from '@leafer/interface'
+import { MatrixHelper, MathHelper, Bounds, AlignHelper, BoundsHelper, PointHelper } from '@leafer/core'
 
 import { IImagePaint, ILeafPaint, ILeafPaintPatternData } from '@leafer-ui/interface'
 
@@ -8,51 +8,50 @@ import { clipMode, fillOrFitMode, repeatMode } from './mode'
 
 const { get, translate } = MatrixHelper
 const tempBox = new Bounds()
-const tempPoint = {} as IPointData
 const tempScaleData = {} as IScaleData
+const tempImage = {} as IBoundsData
 
 export function createData(leafPaint: ILeafPaint, image: ILeaferImage, paint: IImagePaint, box: IBoundsData): void {
-    const { blendMode, changeful, sync } = paint
-    if (blendMode) leafPaint.blendMode = blendMode
+    const { changeful, sync } = paint
     if (changeful) leafPaint.changeful = changeful
     if (sync) leafPaint.sync = sync
     leafPaint.data = getPatternData(paint, box, image)
 }
 
 export function getPatternData(paint: IImagePaint, box: IBoundsData, image: ILeaferImage): ILeafPaintPatternData {
-    let { width, height } = image
     if (paint.padding) box = tempBox.set(box).shrink(paint.padding)
     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 sameBox = box.width === width && box.height === height
 
     const data: ILeafPaintPatternData = { mode }
     const swapSize = align !== 'center' && (rotation || 0) % 180 === 90
-    const swapWidth = swapSize ? height : width, swapHeight = swapSize ? width : height
+    BoundsHelper.set(tempImage, 0, 0, swapSize ? height : width, swapSize ? width : height)
 
-    let x = 0, y = 0, scaleX: number, scaleY: number
+    let scaleX: number, scaleY: number
 
-    if (!mode || mode === 'cover' || mode === 'fit') {
+    if (!mode || mode === 'cover' || mode === 'fit') { // mode 默认值为 cover
         if (!sameBox || rotation) {
-            const sw = box.width / swapWidth, sh = box.height / swapHeight
-            scaleX = scaleY = mode === 'fit' ? Math.min(sw, sh) : Math.max(sw, sh)
-            x += (box.width - width * scaleX) / 2, y += (box.height - height * scaleY) / 2
+            scaleX = scaleY = BoundsHelper.getFitScale(box, tempImage, mode !== 'fit')
+            BoundsHelper.put(box, image, align, scaleX, false, tempImage)
+            BoundsHelper.scale(tempImage, scaleX, scaleY, true)
+        }
+    } else {
+        if (scale || size) {
+            MathHelper.getScaleData(scale, size, image, tempScaleData)
+            scaleX = tempScaleData.scaleX
+            scaleY = tempScaleData.scaleY
         }
-    } else if (scale || size) {
-        MathHelper.getScaleData(scale, size, image, tempScaleData)
-        scaleX = tempScaleData.scaleX
-        scaleY = tempScaleData.scaleY
-    }
 
-    if (align) {
-        const imageBounds = { x, y, width: swapWidth, height: swapHeight }
-        if (scaleX) imageBounds.width *= scaleX, imageBounds.height *= scaleY
-        AlignHelper.toPoint(align, imageBounds, box, tempPoint, true)
-        x += tempPoint.x, y += tempPoint.y
+        if (align) {
+            if (scaleX) BoundsHelper.scale(tempImage, scaleX, scaleY, true)
+            AlignHelper.toPoint(align, tempImage, box, tempImage, true, true)
+        }
     }
 
-    if (offset) x += offset.x, y += offset.y
+    if (offset) PointHelper.move(tempImage, offset)
 
     switch (mode) {
         case 'stretch':
@@ -60,16 +59,16 @@ export function getPatternData(paint: IImagePaint, box: IBoundsData, image: ILea
             break
         case 'normal':
         case 'clip':
-            if (x || y || scaleX || rotation) clipMode(data, box, x, y, scaleX, scaleY, rotation)
+            if (tempImage.x || tempImage.y || scaleX || rotation) clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation)
             break
         case 'repeat':
-            if (!sameBox || scaleX || rotation) repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align)
+            if (!sameBox || scaleX || rotation) repeatMode(data, box, width, height, tempImage.x, tempImage.y, scaleX, scaleY, rotation, align)
             if (!repeat) data.repeat = 'repeat'
             break
         case 'fit':
         case 'cover':
         default:
-            if (scaleX) fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation)
+            if (scaleX) fillOrFitMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation)
     }
 
     if (!data.transform) {

package/src/image.ts

@@ -23,6 +23,7 @@ export function image(ui: IUI, attrName: string, paint: IImagePaint, boxBounds:
         leafPaint = cache.leafPaint
     } else {
         leafPaint = { type: paint.type, image }
+        if (image.hasAlphaPixel) leafPaint.isTransparent = true
 
         cache = image.use > 1 ? { leafPaint, paint, boxBounds: box.set(boxBounds) } : null // 只保留最后一个cache
     }
@@ -54,7 +55,7 @@ export function image(ui: IUI, attrName: string, paint: IImagePaint, boxBounds:
                 ignoreRender(ui, false)
                 if (!ui.destroyed) {
                     if (checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds)) {
-                        if (image.hasOpacityPixel) ui.__layout.hitCanvasChanged = true
+                        if (image.hasAlphaPixel) ui.__layout.hitCanvasChanged = true
                         ui.forceUpdate('surface')
                     }
                     onLoadSuccess(ui, event)
@@ -68,6 +69,18 @@ export function image(ui: IUI, attrName: string, paint: IImagePaint, boxBounds:
             }
         )
 
+        if (ui.placeholderColor) {
+            if (!ui.placeholderDelay) image.isPlacehold = true
+            else setTimeout(() => {
+                if (!image.ready) {
+                    image.isPlacehold = true
+                    ui.forceUpdate('surface')
+                }
+            }, ui.placeholderDelay)
+        }
+
+
+
     }
 
     return leafPaint

package/src/mode.ts

@@ -1,4 +1,4 @@
-import { IBoundsData, IPointData, IMatrixData, IAlign, } from '@leafer/interface'
+import { IBoundsData, IPointData, IMatrixData, IAlign } from '@leafer/interface'
 import { MatrixHelper } from '@leafer/core'
 
 import { ILeafPaintPatternData } from '@leafer-ui/interface'