@leafer-ui/paint 1.0.0-beta.10 → 1.0.0-beta.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/paint",
-  "version": "1.0.0-beta.10",
+  "version": "1.0.0-beta.12",
   "description": "@leafer-ui/paint",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -19,11 +19,11 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0-beta.10",
-    "@leafer-ui/color": "1.0.0-beta.10"
+    "@leafer/core": "1.0.0-beta.12",
+    "@leafer-ui/color": "1.0.0-beta.12"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-beta.10",
-    "@leafer-ui/interface": "1.0.0-beta.10"
+    "@leafer/interface": "1.0.0-beta.12",
+    "@leafer-ui/interface": "1.0.0-beta.12"
   }
 }

package/src/Compute.ts

@@ -5,6 +5,7 @@ import { image } from "./paint/image/image"
 import { linearGradient } from './paint/linear'
 import { radialGradient } from "./paint/radial"
 import { conicGradient } from "./paint/conic"
+import { recycleImage } from './paint/image'
 
 
 let recycleMap: IBooleanMap
@@ -16,7 +17,7 @@ export function compute(ui: IUI, attrName: string): void {
 
     if (!(paints instanceof Array)) paints = [paints]
 
-    recycleMap = ui.__.__recycleImage(attrName)
+    recycleMap = recycleImage(ui.__, attrName)
 
     for (let i = 0, len = paints.length; i < len; i++) {
         item = getLeafPaint(ui, paints[i], attrName)

package/src/index.ts

@@ -3,4 +3,5 @@ export { fillText } from './FillText'
 export { stroke, strokes } from './Stroke'
 export { strokeText, drawTextStroke } from './StrokeText'
 export { shape } from './Shape'
-export { compute } from './Compute'
+export { compute } from './Compute'
+export { recycleImage } from './paint/image'

package/src/paint/image/check.ts

@@ -8,16 +8,17 @@ import { createPattern } from './pattern'
 
 
 export function checkImage(ui: IUI, canvas: ILeaferCanvas, paint: ILeafPaint, allowPaint?: boolean): boolean {
-    let { width, height } = ui.__world
+    const { scaleX, scaleY } = ui.__world
 
-    if (!paint.data || paint.patternId === width + height) {
+    if (!paint.data || paint.patternId === scaleX + scaleY) {
         return false
     } else {
 
         if (allowPaint) {
             if (paint.image.isSVG && paint.data.mode !== 'repeat') {
-                width *= canvas.pixelRatio
-                height *= canvas.pixelRatio
+                let { width, height } = paint.data
+                width *= scaleX * canvas.pixelRatio
+                height *= scaleY * canvas.pixelRatio
                 allowPaint = width > 4096 || height > 4096
             } else {
                 allowPaint = false
@@ -35,12 +36,13 @@ export function checkImage(ui: IUI, canvas: ILeaferCanvas, paint: ILeafPaint, al
             canvas.restore()
             return true
         } else {
-            ImageManager.patternTasker.addParallel(() => {
-                if (canvas.bounds.hit(ui.__world)) {
-                    createPattern(ui, paint, canvas.pixelRatio)
-                    ui.forceUpdate('surface')
-                }
-            }, null, true)
+            if (!paint.style) {
+                createPattern(ui, paint, canvas.pixelRatio)
+            } else {
+                ImageManager.patternTasker.add(async () => {
+                    if (canvas.bounds.hit(ui.__world) && createPattern(ui, paint, canvas.pixelRatio)) ui.forceUpdate('surface')
+                }, 300)
+            }
             return false
         }
     }

package/src/paint/image/data.ts

@@ -1,15 +1,14 @@
 import { IBoundsData, ILeaferImage } from '@leafer/interface'
 import { MatrixHelper } from '@leafer/core'
 
-import { IUI, IImagePaint, ILeafPaint, ILeafPaintPatternData } from '@leafer-ui/interface'
+import { IImagePaint, ILeafPaint, ILeafPaintPatternData } from '@leafer-ui/interface'
 
 import { clipMode, fillOrFitMode, repeatMode } from './mode'
-import { createPattern } from './pattern'
 
 
 const { get, translate } = MatrixHelper
 
-export function createData(ui: IUI, leafPaint: ILeafPaint, image: ILeaferImage, paint: IImagePaint, box: IBoundsData): void {
+export function createData(leafPaint: ILeafPaint, image: ILeaferImage, paint: IImagePaint, box: IBoundsData): void {
     let { width, height } = image
 
     const { opacity, mode, offset, scale, rotation, blendMode } = paint
@@ -41,7 +40,4 @@ export function createData(ui: IUI, leafPaint: ILeafPaint, image: ILeaferImage,
     data.width = width
     data.height = height
     if (opacity) data.opacity = opacity
-
-    const canvas = ui.leafer && ui.leafer.canvas
-    if (canvas && canvas.bounds.hit(ui.__world)) createPattern(ui, leafPaint, canvas.pixelRatio)
 }

package/src/paint/image/image.ts

@@ -6,51 +6,51 @@ import { IUI, IImagePaint, ILeafPaint } from '@leafer-ui/interface'
 import { createData } from './data'
 
 
-export function image(ui: IUI, attrName: string, attrValue: IImagePaint, box: IBoundsData, first: boolean): ILeafPaint {
+export function image(ui: IUI, attrName: string, attrValue: IImagePaint, box: IBoundsData, firstUse: boolean): ILeafPaint {
     const leafPaint: ILeafPaint = { type: attrValue.type }
     const image = leafPaint.image = ImageManager.get(attrValue)
 
-    if (image.ready && hasNaturalSize(ui, attrName, image)) createData(ui, leafPaint, image, attrValue, box)
+    const event: IImageEvent = (firstUse || image.loading) && { target: ui, image, attrName, attrValue }
 
-    if (first) {
+    if (image.ready) {
 
-        const event: IImageEvent = { target: ui, image, attrName, attrValue }
-
-        if (image.ready) {
+        if (hasNaturalSize(ui, attrName, image)) createData(leafPaint, image, attrValue, box)
 
+        if (firstUse) {
             emit(ImageEvent.LOAD, event)
             emit(ImageEvent.LOADED, event)
+        }
 
-        } else if (image.error) {
+    } else if (image.error) {
 
+        if (firstUse) {
             ui.forceUpdate('surface')
             event.error = image.error
             emit(ImageEvent.ERROR, event)
+        }
 
-        } else {
-
-            emit(ImageEvent.LOAD, event)
+    } else {
 
-            leafPaint.loadId = image.load(
-                () => {
-                    if (ui.__) {
+        if (firstUse) emit(ImageEvent.LOAD, event)
 
-                        if (hasNaturalSize(ui, attrName, image)) {
-                            createData(ui, leafPaint, image, attrValue, box)
-                            ui.forceUpdate('surface')
-                        }
+        leafPaint.loadId = image.load(
+            () => {
+                if (!ui.destroyed) {
 
-                        emit(ImageEvent.LOADED, event)
+                    if (hasNaturalSize(ui, attrName, image)) {
+                        createData(leafPaint, image, attrValue, box)
+                        ui.forceUpdate('surface')
                     }
-                },
-                (error) => {
-                    ui.forceUpdate('surface')
-                    event.error = error
-                    emit(ImageEvent.ERROR, event)
-                }
-            )
 
-        }
+                    emit(ImageEvent.LOADED, event)
+                }
+            },
+            (error) => {
+                ui.forceUpdate('surface')
+                event.error = error
+                emit(ImageEvent.ERROR, event)
+            }
+        )
 
     }
 

package/src/paint/image/index.ts

@@ -1,2 +1,4 @@
 export { image } from './image'
 export { checkImage } from './check'
+export { recycleImage } from './recycle'
+

package/src/paint/image/pattern.ts

@@ -5,64 +5,77 @@ import { IUI, ILeafPaint, IMatrixData } from '@leafer-ui/interface'
 
 const { get, scale: scaleHelper, copy } = MatrixHelper
 
-export function createPattern(ui: IUI, paint: ILeafPaint, pixelRatio: number): void {
-    const id = ui.__world.width + ui.__world.height
+export function createPattern(ui: IUI, paint: ILeafPaint, pixelRatio: number): boolean {
 
-    if (paint.patternId !== id) {
+    let { scaleX, scaleY } = ui.__world
+
+    const id = scaleX + scaleY
+
+    if (paint.patternId !== id && !ui.destroyed) {
 
         paint.patternId = id
 
-        let scale: number, matrix: IMatrixData, { a, d } = ui.__world, { width, height, scaleX, scaleY, opacity, transform, mode } = paint.data
+        const { image, data } = paint
+        const maxWidth = image.isSVG ? 4096 : Math.min(image.width, 4096)
+        const maxHeight = image.isSVG ? 4096 : Math.min(image.height, 4096)
+        let scale: number, matrix: IMatrixData, { width, height, scaleX: sx, scaleY: sy, opacity, transform, mode } = data
 
-        if (scaleX) {
+        if (sx) {
             matrix = get()
             copy(matrix, transform)
-            scaleHelper(matrix, 1 / scaleX, 1 / scaleY)
-            a *= scaleX
-            d *= scaleY
+            scaleHelper(matrix, 1 / sx, 1 / sy)
+            scaleX *= sx
+            scaleY *= sy
         }
 
-        a *= pixelRatio
-        d *= pixelRatio
-        width *= a
-        height *= d
-
-        const { image } = paint
-        const maxWidth = image.isSVG ? 4096 : Math.min(image.width, 4096)
-        const maxHeight = image.isSVG ? 4096 : Math.min(image.height, 4096)
+        scaleX *= pixelRatio
+        scaleY *= pixelRatio
+        width *= scaleX
+        height *= scaleY
 
         if (width > maxWidth || height > maxHeight) {
             scale = Math.max(width / maxWidth, height / maxHeight)
+        } else if (width < 32 || height < 32) {
+            scale = Math.min(width / 32, height / 32)
+        }
 
-            a /= scale
-            d /= scale
+        if (scale) {
+            scaleX /= scale
+            scaleY /= scale
             width /= scale
             height /= scale
         }
 
-        if (scaleX) {
-            a /= scaleX
-            d /= scaleY
+        if (sx) {
+            scaleX /= sx
+            scaleY /= sy
         }
 
-        if (transform || a !== 1 || d !== 1) {
+        if (transform || scaleX !== 1 || scaleY !== 1) {
             if (!matrix) {
                 matrix = get()
                 if (transform) copy(matrix, transform)
             }
-            scaleHelper(matrix, 1 / a, 1 / d)
+            scaleHelper(matrix, 1 / scaleX, 1 / scaleY)
         }
 
-        const style = Platform.canvas.createPattern(paint.image.getCanvas(width, height, opacity) as any, mode === 'repeat' ? 'repeat' : (Platform.origin.noRepeat || 'no-repeat'))
-
-        paint.transform = null
+        const style = Platform.canvas.createPattern(image.getCanvas(width, height, opacity) as any, mode === 'repeat' ? 'repeat' : (Platform.origin.noRepeat || 'no-repeat'))
 
         try {
+            if (paint.transform) paint.transform = null
             if (matrix) style.setTransform ? style.setTransform(matrix) : paint.transform = matrix
         } catch (e) {
             paint.transform = matrix
         }
 
         paint.style = style
+
+        return true
+
+    } else {
+
+        return false
+
     }
+
 }

package/src/paint/image/recycle.ts

@@ -0,0 +1,41 @@
+import { IBooleanMap, ILeaferImage } from '@leafer/interface'
+import { ImageManager } from '@leafer/core'
+
+import { IImagePaint, ILeafPaint, IUIData } from '@leafer-ui/interface'
+
+
+export function recycleImage(data: IUIData, attrName: string): IBooleanMap {
+    const paints = (attrName === 'fill' ? data._fill : data._stroke) 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
+}