@leafer-ui/image 1.0.0-rc.10

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023-present, Chao (Leafer) Wan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @leafer-ui/image

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@leafer-ui/image",
+  "version": "1.0.0-rc.10",
+  "description": "@leafer-ui/image",
+  "author": "Chao (Leafer) Wan",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "types": "types/index.d.ts",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leaferjs/ui.git"
+  },
+  "homepage": "https://github.com/leaferjs/ui/tree/main/packages/partner/image",
+  "bugs": "https://github.com/leaferjs/ui/issues",
+  "keywords": [
+    "leafer-ui",
+    "leaferjs"
+  ],
+  "dependencies": {
+    "@leafer/core": "1.0.0-rc.10",
+    "@leafer/draw": "1.0.0-rc.10"
+  },
+  "devDependencies": {
+    "@leafer/interface": "1.0.0-rc.10",
+    "@leafer-ui/interface": "1.0.0-rc.10"
+  }
+}

package/src/check.ts

@@ -0,0 +1,60 @@
+
+import { ILeaferCanvas } from '@leafer/interface'
+import { ImageManager, Platform } from '@leafer/core'
+
+import { IUI, ILeafPaint } from '@leafer-ui/interface'
+import { Export } from '@leafer-ui/draw'
+
+import { createPattern } from './pattern'
+
+const { abs } = Math
+
+export function checkImage(ui: IUI, canvas: ILeaferCanvas, paint: ILeafPaint, allowPaint?: boolean): boolean {
+    const { scaleX, scaleY } = ui.__world
+
+    if (!paint.data || paint.patternId === scaleX + '-' + scaleY) {
+        return false
+    } else {
+
+        const { data } = paint
+
+        if (allowPaint) {
+            if (!data.repeat) {
+                let { width, height } = data
+                width *= abs(scaleX) * canvas.pixelRatio
+                height *= abs(scaleY) * canvas.pixelRatio
+                if (data.scaleX) {
+                    width *= data.scaleX
+                    height *= data.scaleY
+                }
+                allowPaint = width * height > Platform.image.maxCacheSize
+            } else {
+                allowPaint = false
+            }
+        }
+
+        if (allowPaint) {
+            canvas.save()
+            canvas.clip()
+            if (paint.blendMode) canvas.blendMode = paint.blendMode
+            if (data.opacity) canvas.opacity *= data.opacity
+            if (data.transform) canvas.transform(data.transform)
+            canvas.drawImage(paint.image.view as any, 0, 0, data.width, data.height)
+            canvas.restore()
+            return true
+        } else {
+            if (!paint.style || Export.running) {
+                createPattern(ui, paint, canvas.pixelRatio)
+            } else {
+                if (!paint.patternTask) {
+                    paint.patternTask = ImageManager.patternTasker.add(async () => {
+                        paint.patternTask = null
+                        if (canvas.bounds.hit(ui.__world)) createPattern(ui, paint, canvas.pixelRatio)
+                        ui.forceUpdate('surface')
+                    }, 300)
+                }
+            }
+            return false
+        }
+    }
+}

package/src/data.ts

@@ -0,0 +1,55 @@
+import { IBoundsData, ILeaferImage } from '@leafer/interface'
+import { MatrixHelper } from '@leafer/core'
+
+import { IImagePaint, ILeafPaint, ILeafPaintPatternData } from '@leafer-ui/interface'
+
+import { clipMode, fillOrFitMode, repeatMode } from './mode'
+
+
+const { get, translate } = MatrixHelper
+
+export function createData(leafPaint: ILeafPaint, image: ILeaferImage, paint: IImagePaint, box: IBoundsData): void {
+    let { width, height } = image
+
+    const { opacity, mode, 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 }
+
+    let x: number, y: number, scaleX: number, scaleY: number
+    if (offset) x = offset.x, y = offset.y
+    if (size) {
+        scaleX = (typeof size === 'number' ? size : size.width) / width
+        scaleY = (typeof size === 'number' ? size : size.height) / height
+    } else if (scale) {
+        scaleX = typeof scale === 'number' ? scale : scale.x
+        scaleY = typeof scale === 'number' ? scale : scale.y
+    }
+
+    switch (mode) {
+        case 'strench':
+            if (!sameBox) width = box.width, height = box.height
+            if (box.x || box.y) {
+                data.transform = get()
+                translate(data.transform, box.x, box.y)
+            }
+            break
+        case 'clip':
+            if (offset || 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 (!repeat) data.repeat = 'repeat'
+            break
+        case 'fit':
+        case 'cover':
+        default:
+            if (!sameBox || rotation) fillOrFitMode(data, mode, box, width, height, rotation)
+    }
+
+    data.width = width
+    data.height = height
+    if (opacity) data.opacity = opacity
+    if (repeat) data.repeat = typeof repeat === 'string' ? (repeat === 'x' ? 'repeat-x' : 'repeat-y') : 'repeat'
+}

package/src/image.ts

@@ -0,0 +1,110 @@
+import { IBoundsData, IImageEvent, ILeaferImage, IObject } from '@leafer/interface'
+import { Bounds, BoundsHelper, ImageEvent, ImageManager } from '@leafer/core'
+
+import { IUI, IImagePaint, ILeafPaint } from '@leafer-ui/interface'
+
+import { createData } from './data'
+
+
+interface IImagePaintCache {
+    leafPaint: ILeafPaint
+    paint: IImagePaint
+    boxBounds: IBoundsData
+}
+
+let cache: IImagePaintCache, box = new Bounds()
+const { isSame } = BoundsHelper
+
+export function image(ui: IUI, attrName: string, paint: IImagePaint, boxBounds: IBoundsData, firstUse: boolean): ILeafPaint {
+    let leafPaint: ILeafPaint, event: IImageEvent
+    const image = ImageManager.get(paint)
+
+    if (cache && paint === cache.paint && isSame(boxBounds, cache.boxBounds)) {
+        leafPaint = cache.leafPaint
+    } else {
+        leafPaint = { type: paint.type }
+        leafPaint.image = image
+
+        cache = image.use > 1 ? { leafPaint, paint, boxBounds: box.set(boxBounds) } : null
+    }
+
+    if (firstUse || image.loading) event = { image, attrName, attrValue: paint }
+
+    if (image.ready) {
+
+        checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds)
+
+        if (firstUse) {
+            onLoad(ui, event)
+            onLoadSuccess(ui, event)
+        }
+
+    } else if (image.error) {
+
+        if (firstUse) onLoadError(ui, event, image.error)
+
+    } else { // need load
+
+        if (firstUse) onLoad(ui, event)
+
+        leafPaint.loadId = image.load(
+            () => {
+                if (!ui.destroyed) {
+                    if (checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds)) ui.forceUpdate('surface')
+                    onLoadSuccess(ui, event)
+                }
+                leafPaint.loadId = null
+            },
+            (error) => {
+                onLoadError(ui, event, error)
+                leafPaint.loadId = null
+            }
+        )
+
+    }
+
+    return leafPaint
+}
+
+
+function checkSizeAndCreateData(ui: IUI, attrName: string, paint: IImagePaint, image: ILeaferImage, leafPaint: ILeafPaint, boxBounds: IBoundsData): boolean {
+    if (attrName === 'fill' && !ui.__.__naturalWidth) {
+        const data = ui.__
+        data.__naturalWidth = image.width
+        data.__naturalHeight = image.height
+        if (data.__autoWidth || data.__autoHeight) {
+            ui.forceUpdate('width')
+            if (ui.__proxyData) {
+                ui.setProxyAttr('width', data.width)
+                ui.setProxyAttr('height', data.height)
+            }
+            return false
+        }
+    }
+
+    if (!leafPaint.data) createData(leafPaint, image, paint, boxBounds)
+    return true
+}
+
+
+
+function onLoad(ui: IUI, event: IImageEvent): void {
+    emit(ui, ImageEvent.LOAD, event)
+}
+
+
+function onLoadSuccess(ui: IUI, event: IImageEvent): void {
+    emit(ui, ImageEvent.LOADED, event)
+}
+
+
+function onLoadError(ui: IUI, event: IImageEvent, error: string | IObject,): void {
+    event.error = error
+    ui.forceUpdate('surface')
+    emit(ui, ImageEvent.ERROR, event)
+}
+
+
+function emit(ui: IUI, type: string, data: IImageEvent): void {
+    if (ui.hasEvent(type)) ui.emitEvent(new ImageEvent(type, data))
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+import { IPaintImageModule } from '@leafer-ui/interface'
+
+import { image } from './image'
+import { createData } from './data'
+import { fillOrFitMode, clipMode, repeatMode } from './mode'
+import { createPattern } from './pattern'
+import { checkImage } from './check'
+import { recycleImage } from './recycle'
+
+
+export const PaintImageModule: IPaintImageModule = {
+    image,
+    createData,
+    fillOrFitMode,
+    clipMode,
+    repeatMode,
+    createPattern,
+    checkImage,
+    recycleImage
+}

package/src/mode.ts

@@ -0,0 +1,66 @@
+import { IBoundsData, IPointData, IMatrixData, } from '@leafer/interface'
+import { MatrixHelper } from '@leafer/core'
+
+import { IImagePaintMode, 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 {
+    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)
+    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
+    }
+    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 {
+    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
+        }
+    }
+    origin.x = box.x
+    origin.y = box.y
+    if (x || y) origin.x += x, origin.y += y
+    translate(transform, origin.x, origin.y)
+    if (scaleX) {
+        scaleOfOuter(transform, origin, scaleX, scaleY)
+        data.scaleX = scaleX
+        data.scaleY = scaleY
+    }
+    data.transform = transform
+}

package/src/pattern.ts

@@ -0,0 +1,85 @@
+import { Platform, MatrixHelper } from '@leafer/core'
+
+import { IUI, ILeafPaint, IMatrixData } from '@leafer-ui/interface'
+
+
+const { get, scale, copy } = MatrixHelper
+const { round, abs } = Math
+
+export function createPattern(ui: IUI, paint: ILeafPaint, pixelRatio: number): boolean {
+
+    let { scaleX, scaleY } = ui.__world
+
+    const id = scaleX + '-' + scaleY
+
+    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, opacity, transform, repeat } = data
+
+        if (sx) {
+            imageMatrix = get()
+            copy(imageMatrix, transform)
+            scale(imageMatrix, 1 / sx, 1 / sy)
+            scaleX *= sx
+            scaleY *= sy
+        }
+
+        scaleX *= pixelRatio
+        scaleY *= pixelRatio
+        width *= scaleX
+        height *= scaleY
+
+        const size = width * height
+
+        if (!repeat) {
+            if (size > Platform.image.maxCacheSize) return false // same as check()
+        }
+
+        let maxSize = Platform.image.maxPatternSize
+
+        if (!image.isSVG) {
+            const imageSize = image.width * image.height
+            if (maxSize > imageSize) maxSize = imageSize
+        }
+
+        if (size > maxSize) imageScale = Math.sqrt(size / maxSize)
+
+        if (imageScale) {
+            scaleX /= imageScale
+            scaleY /= imageScale
+            width /= imageScale
+            height /= imageScale
+        }
+
+        if (sx) {
+            scaleX /= sx
+            scaleY /= sy
+        }
+
+        if (transform || scaleX !== 1 || scaleY !== 1) {
+            if (!imageMatrix) {
+                imageMatrix = get()
+                if (transform) copy(imageMatrix, transform)
+            }
+            scale(imageMatrix, 1 / scaleX, 1 / scaleY)
+        }
+
+        const canvas = image.getCanvas(width < 1 ? 1 : round(width), height < 1 ? 1 : round(height), opacity)
+        const pattern = image.getPattern(canvas, repeat || (Platform.origin.noRepeat || 'no-repeat'), imageMatrix, paint)
+
+        paint.style = pattern
+        paint.patternId = id
+
+        return true
+
+    } else {
+
+        return false
+
+    }
+
+}

package/src/recycle.ts

@@ -0,0 +1,41 @@
+import { IBooleanMap, ILeaferImage, IObject } from '@leafer/interface'
+import { ImageManager } from '@leafer/core'
+
+import { IImagePaint, ILeafPaint, IPaintAttr, IUIData } from '@leafer-ui/interface'
+
+
+export function recycleImage(attrName: IPaintAttr, data: IUIData): IBooleanMap {
+    const paints = (data as IObject)['_' + attrName] as ILeafPaint[]
+
+    if (paints instanceof Array) {
+
+        let image: ILeaferImage, recycleMap: IBooleanMap, input: IImagePaint[], url: string
+
+        for (let i = 0, len = paints.length; i < len; i++) {
+
+            image = paints[i].image
+            url = image && image.url
+
+            if (url) {
+                if (!recycleMap) recycleMap = {}
+                recycleMap[url] = true
+                ImageManager.recycle(image)
+
+                // stop load
+                if (image.loading) {
+                    if (!input) {
+                        input = (data.__input && data.__input[attrName]) || []
+                        if (!(input instanceof Array)) input = [input]
+                    }
+                    image.unload(paints[i].loadId, !input.some((item: IImagePaint) => item.url === url))
+                }
+            }
+
+        }
+
+        return recycleMap
+
+    }
+
+    return null
+}

package/types/index.d.ts

@@ -0,0 +1,5 @@
+import { IPaintImageModule } from '@leafer-ui/interface';
+
+declare const PaintImageModule: IPaintImageModule;
+
+export { PaintImageModule };