@leafer-ui/image 1.0.0-rc.21 → 1.0.0-rc.23

package/package.json

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

package/src/data.ts

@@ -1,5 +1,5 @@
-import { IBoundsData, ILeaferImage } from '@leafer/interface'
-import { MatrixHelper, Bounds } from '@leafer/core'
+import { IBoundsData, ILeaferImage, IPointData } from '@leafer/interface'
+import { MatrixHelper, Bounds, AlignHelper } from '@leafer/core'
 
 import { IImagePaint, ILeafPaint, ILeafPaintPatternData } from '@leafer-ui/interface'
 
@@ -8,20 +8,29 @@ import { clipMode, fillOrFitMode, repeatMode } from './mode'
 
 const { get, translate } = MatrixHelper
 const tempBox = new Bounds()
+const tempPoint = {} as IPointData
 
 export function createData(leafPaint: ILeafPaint, image: ILeaferImage, paint: IImagePaint, box: IBoundsData): void {
     let { width, height } = image
     if (paint.padding) box = tempBox.set(box).shrink(paint.padding)
 
-    const { opacity, mode, offset, scale, size, rotation, blendMode, repeat } = paint
+    const { opacity, mode, align, 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 }
+    const swapSize = align !== 'center' && (rotation || 0) % 180 === 90
+    const swapWidth = swapSize ? height : width, swapHeight = swapSize ? width : height
 
-    let x: number, y: number, scaleX: number, scaleY: number
-    if (offset) x = offset.x, y = offset.y
-    if (size) {
+    let x = 0, y = 0, scaleX: number, scaleY: number
+
+    if (!mode || mode === 'cover' || mode === 'fit') {
+        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
+        }
+    } else if (size) {
         scaleX = (typeof size === 'number' ? size : size.width) / width
         scaleY = (typeof size === 'number' ? size : size.height) / height
     } else if (scale) {
@@ -29,21 +38,31 @@ export function createData(leafPaint: ILeafPaint, image: ILeaferImage, paint: II
         scaleY = typeof scale === 'number' ? scale : scale.y
     }
 
+    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 (offset) x += offset.x, y += offset.y
+
     switch (mode) {
         case 'strench':
             if (!sameBox) width = box.width, height = box.height
             break
+        case 'normal':
         case 'clip':
-            if (offset || scaleX || rotation) clipMode(data, box, x, y, scaleX, scaleY, rotation)
+            if (x || y || scaleX || rotation) clipMode(data, box, x, y, scaleX, scaleY, rotation)
             break
         case 'repeat':
-            if (!sameBox || scaleX || rotation) repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation)
+            if (!sameBox || scaleX || rotation) repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align)
             if (!repeat) data.repeat = 'repeat'
             break
         case 'fit':
         case 'cover':
         default:
-            if (!sameBox || rotation) fillOrFitMode(data, mode, box, width, height, rotation)
+            if (scaleX) fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation)
     }
 
     if (!data.transform) {
@@ -53,6 +72,11 @@ export function createData(leafPaint: ILeafPaint, image: ILeaferImage, paint: II
         }
     }
 
+    if (scaleX && mode !== 'strench') {
+        data.scaleX = scaleX
+        data.scaleY = scaleY
+    }
+
     data.width = width
     data.height = height
     if (opacity) data.opacity = opacity

package/src/mode.ts

@@ -1,66 +1,53 @@
-import { IBoundsData, IPointData, IMatrixData, } from '@leafer/interface'
+import { IBoundsData, IPointData, IMatrixData, IAlign, } from '@leafer/interface'
 import { MatrixHelper } from '@leafer/core'
 
-import { IImagePaintMode, ILeafPaintPatternData } from '@leafer-ui/interface'
+import { 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 {
+export function fillOrFitMode(data: ILeafPaintPatternData, box: IBoundsData, x: number, y: number, scaleX: number, scaleY: number, rotation: number): void {
     const transform: IMatrixData = get()
-    const swap = rotation && rotation !== 180
-    const sw = box.width / (swap ? height : width)
-    const sh = box.height / (swap ? width : height)
-    const scale = mode === 'fit' ? Math.min(sw, sh) : Math.max(sw, sh)
-    const x = box.x + (box.width - width * scale) / 2
-    const y = box.y + (box.height - height * scale) / 2
-    translate(transform, x, y)
-    scaleHelper(transform, scale)
+    translate(transform, box.x + x, box.y + y)
+    scaleHelper(transform, scaleX, scaleY)
     if (rotation) rotateOfOuter(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation)
-    data.scaleX = data.scaleY = scale
     data.transform = transform
 }
 
 
 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 (x || y) translate(transform, x, y)
-    if (scaleX) {
-        scaleHelper(transform, scaleX, scaleY)
-        data.scaleX = transform.a
-        data.scaleY = transform.d
-    }
+    translate(transform, box.x + x, box.y + y)
+    if (scaleX) scaleHelper(transform, scaleX, scaleY)
     if (rotation) rotate(transform, rotation)
     data.transform = transform
 }
 
 
-export function repeatMode(data: ILeafPaintPatternData, box: IBoundsData, width: number, height: number, x: number, y: number, scaleX: number, scaleY: 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, align: IAlign): void {
     const transform = get()
     if (rotation) {
-        rotate(transform, rotation)
-        switch (rotation) {
-            case 90:
-                translate(transform, height, 0)
-                break
-            case 180:
-                translate(transform, width, height)
-                break
-            case 270:
-                translate(transform, 0, width)
-                break
+        if (align === 'center') {
+            rotateOfOuter(transform, { x: width / 2, y: height / 2 }, rotation)
+        } else {
+            rotate(transform, rotation)
+            switch (rotation) {
+                case 90:
+                    translate(transform, height, 0)
+                    break
+                case 180:
+                    translate(transform, width, height)
+                    break
+                case 270:
+                    translate(transform, 0, width)
+                    break
+            }
         }
     }
-    origin.x = box.x
-    origin.y = box.y
-    if (x || y) origin.x += x, origin.y += y
+    origin.x = box.x + x
+    origin.y = box.y + y
     translate(transform, origin.x, origin.y)
-    if (scaleX) {
-        scaleOfOuter(transform, origin, scaleX, scaleY)
-        data.scaleX = scaleX
-        data.scaleY = scaleY
-    }
+    if (scaleX) scaleOfOuter(transform, origin, scaleX, scaleY)
     data.transform = transform
 }