@leafer-ui/image 1.7.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/image",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "@leafer-ui/image",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -22,11 +22,11 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.7.0",
-    "@leafer-ui/draw": "1.7.0"
+    "@leafer/core": "1.9.0",
+    "@leafer-ui/draw": "1.9.0"
   },
   "devDependencies": {
-    "@leafer/interface": "1.7.0",
-    "@leafer-ui/interface": "1.7.0"
+    "@leafer/interface": "1.9.0",
+    "@leafer-ui/interface": "1.9.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)) {
@@ -21,10 +19,10 @@ export function checkImage(ui: IUI, canvas: ILeaferCanvas, paint: ILeafPaint, al
             if (data.repeat) {
                 allowDraw = false
             } else {
-                if (!(paint.changeful || ResizeEvent.isResizing(ui) || Export.running)) {
+                if (!(paint.changeful || (Platform.name === 'miniapp' && ResizeEvent.isResizing(ui)) || Export.running)) { //  小程序resize过程中直接绘制原图（绕过垃圾回收bug)
                     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

@@ -1,5 +1,5 @@
-import { IBoundsData, ILeaferImage, IScaleData } from '@leafer/interface'
-import { MatrixHelper, MathHelper, Bounds, AlignHelper, BoundsHelper, PointHelper } from '@leafer/core'
+import { IBoundsData, IGap, ILeaferImage, IPointData, IPointGap, IScaleData } from '@leafer/interface'
+import { MatrixHelper, MathHelper, Bounds, AlignHelper, BoundsHelper, PointHelper, isObject, isString } from '@leafer/core'
 
 import { IImagePaint, ILeafPaint, ILeafPaintPatternData } from '@leafer-ui/interface'
 
@@ -12,10 +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, editing } = paint
+    const { changeful, sync, 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)
 }
 
@@ -24,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, skew, repeat, filters } = paint
+    const { opacity, mode, align, offset, scale, size, rotation, skew, clipSize, repeat, gap, filters } = paint
     const sameBox = box.width === width && box.height === height
 
     const data: ILeafPaintPatternData = { mode }
@@ -46,9 +46,9 @@ export function getPatternData(paint: IImagePaint, box: IBoundsData, image: ILea
             scaleY = tempScaleData.scaleY
         }
 
-        if (align) {
+        if (align || gap || repeat) {
             if (scaleX) BoundsHelper.scale(tempImage, scaleX, scaleY, true)
-            AlignHelper.toPoint(align, tempImage, box, tempImage, true, true)
+            if (align) AlignHelper.toPoint(align, tempImage, box, tempImage, true, true)
         }
     }
 
@@ -60,11 +60,13 @@ export function getPatternData(paint: IImagePaint, box: IBoundsData, image: ILea
             break
         case 'normal':
         case 'clip':
-            if (tempImage.x || tempImage.y || scaleX || rotation || skew) clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew)
+            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)
+            if (!sameBox || scaleX || rotation || skew) repeatMode(data, box, width, height, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, align, paint.freeTransform)
             if (!repeat) data.repeat = 'repeat'
+            const count = isObject(repeat)
+            if (gap || count) data.gap = getGapData(gap, count && repeat, tempImage.width, tempImage.height, box)
             break
         case 'fit':
         case 'cover':
@@ -88,6 +90,21 @@ export function getPatternData(paint: IImagePaint, box: IBoundsData, image: ILea
     data.height = height
     if (opacity) data.opacity = opacity
     if (filters) data.filters = filters
-    if (repeat) data.repeat = typeof repeat === 'string' ? (repeat === 'x' ? 'repeat-x' : 'repeat-y') : 'repeat'
+    if (repeat) data.repeat = isString(repeat) ? (repeat === 'x' ? 'repeat-x' : 'repeat-y') : 'repeat'
     return data
+}
+
+
+function getGapData(gap: IGap | IPointGap, repeat: IPointData, width: number, height: number, box: IBoundsData): IPointData {
+    let xGap: IGap, yGap: IGap
+    if (isObject(gap)) xGap = gap.x, yGap = gap.y
+    else xGap = yGap = gap
+    return { x: getGapValue(xGap, width, box.width, repeat && repeat.x), y: getGapValue(yGap, height, box.height, repeat && repeat.y) }
+}
+
+function getGapValue(gap: IGap, size: number, totalSize: number, rows: number): number {
+    const auto = isString(gap) || rows
+    const remain = rows ? totalSize - rows * size : totalSize % size
+    const value = auto ? remain / ((rows || Math.floor(totalSize / size)) - 1) : gap
+    return gap === 'auto' ? (value < 0 ? 0 : value) : value
 }

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, skew: skewHelper } = 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()
@@ -15,41 +15,51 @@ export function fillOrFitMode(data: ILeafPaintPatternData, box: IBoundsData, x:
     data.transform = transform
 }
 
-
-export function clipMode(data: ILeafPaintPatternData, box: IBoundsData, x: number, y: number, scaleX: number, scaleY: number, rotation: number, skew: IPointData): void {
-    // rotate -> skew -> scale -> translate
+export function clipMode(data: ILeafPaintPatternData, box: IBoundsData, x: number, y: number, scaleX: number, scaleY: number, rotation: number, skew: IPointData, clipSize?: ISizeData): void {
     const transform: IMatrixData = get()
-    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)
+    layout(transform, box, x, y, scaleX, scaleY, rotation, skew)
+    if (clipSize) {
+        tempMatrix.a = box.width / clipSize.width, tempMatrix.d = box.height / clipSize.height
+        multiplyParent(transform, tempMatrix)
+    }
     data.transform = transform
 }
 
-
-export function repeatMode(data: ILeafPaintPatternData, box: IBoundsData, width: number, height: number, x: number, y: number, scaleX: number, scaleY: number, rotation: number, align: IAlign): void {
+export function repeatMode(data: ILeafPaintPatternData, box: IBoundsData, width: number, height: number, x: number, y: number, scaleX: number, scaleY: number, rotation: number, skew: IPointData, align: IAlign, freeTransform?: boolean): void {
     const transform = get()
-    if (rotation) {
-        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
+    if (freeTransform) { // 自由变换
+        layout(transform, box, x, y, scaleX, scaleY, rotation, skew)
+    } else {
+        if (rotation) {
+            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 + x
+        origin.y = box.y + y
+        translate(transform, origin.x, origin.y)
+        if (scaleX) scaleOfOuter(transform, origin, scaleX, scaleY)
     }
-    origin.x = box.x + x
-    origin.y = box.y + y
-    translate(transform, origin.x, origin.y)
-    if (scaleX) scaleOfOuter(transform, origin, scaleX, scaleY)
     data.transform = transform
-}
+}
+
+function layout(transform: IMatrixData, box: IBoundsData, x: number, y: number, scaleX: number, scaleY: number, rotation: number, skew: IPointData) {
+    // rotate -> skew -> scale -> translate
+    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)
+}

package/src/pattern.ts

@@ -1,24 +1,25 @@
-import { Platform, MatrixHelper, ImageManager } from '@leafer/core'
+import { Platform, MatrixHelper } from '@leafer/core'
 
 import { IUI, ILeafPaint, IMatrixData } from '@leafer-ui/interface'
 
 
 const { get, scale, copy } = MatrixHelper
-const { ceil, abs } = Math
+const { floor, max, 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
+        let imageScale: number, imageMatrix: IMatrixData, { width, height, scaleX: sx, scaleY: sy, transform, repeat, gap } = data
+
+        scaleX *= pixelRatio
+        scaleY *= pixelRatio
+
+        const xGap = gap && (gap.x * scaleX)
+        const yGap = gap && (gap.y * scaleY)
 
         if (sx) {
             sx = abs(sx) // maybe -1
@@ -30,8 +31,6 @@ export function createPattern(ui: IUI, paint: ILeafPaint, pixelRatio: number): b
             scaleY *= sy
         }
 
-        scaleX *= pixelRatio
-        scaleY *= pixelRatio
         width *= scaleX
         height *= scaleY
 
@@ -70,7 +69,12 @@ export function createPattern(ui: IUI, paint: ILeafPaint, pixelRatio: number): b
             scale(imageMatrix, 1 / scaleX, 1 / scaleY)
         }
 
-        const canvas = image.getCanvas(ceil(width) || 1, ceil(height) || 1, data.opacity, data.filters)
+        if (imageMatrix) {
+            const canvasWidth = width + (xGap || 0), canvasHeight = height + (yGap || 0)
+            scale(imageMatrix, canvasWidth / max(floor(canvasWidth), 1), canvasHeight / max(floor(canvasHeight), 1)) // 缩放至floor画布宽高的状态
+        }
+
+        const canvas = image.getCanvas(width, height, data.opacity, data.filters, xGap, yGap)
         const pattern = image.getPattern(canvas, repeat || (Platform.origin.noRepeat || 'no-repeat'), imageMatrix, paint)
 
         paint.style = pattern

package/src/recycle.ts

@@ -1,5 +1,5 @@
 import { IBooleanMap, ILeaferImage, IObject } from '@leafer/interface'
-import { ImageManager } from '@leafer/core'
+import { ImageManager, isArray } from '@leafer/core'
 
 import { IImagePaint, ILeafPaint, IPaintAttr, IUIData } from '@leafer-ui/interface'
 
@@ -7,7 +7,7 @@ import { IImagePaint, ILeafPaint, IPaintAttr, IUIData } from '@leafer-ui/interfa
 export function recycleImage(attrName: IPaintAttr, data: IUIData): IBooleanMap {
     const paints: ILeafPaint[] = (data as IObject)['_' + attrName]
 
-    if (paints instanceof Array) {
+    if (isArray(paints)) {
 
         let paint: ILeafPaint, image: ILeaferImage, recycleMap: IBooleanMap, input: IImagePaint[], url: string
 
@@ -26,7 +26,7 @@ export function recycleImage(attrName: IPaintAttr, data: IUIData): IBooleanMap {
                 if (image.loading) {
                     if (!input) {
                         input = (data.__input && data.__input[attrName]) || []
-                        if (!(input instanceof Array)) input = [input]
+                        if (!isArray(input)) input = [input]
                     }
                     image.unload(paints[i].loadId, !input.some((item: IImagePaint) => item.url === url))
                 }