@leafer/image 1.0.0-beta → 1.0.0-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer/image",
-  "version": "1.0.0-beta",
+  "version": "1.0.0-beta.10",
   "description": "@leafer/image",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -18,7 +18,11 @@
     "leafer",
     "leaferjs"
   ],
+  "dependencies": {
+    "@leafer/task": "1.0.0-beta.10",
+    "@leafer/platform": "1.0.0-beta.10"
+  },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-beta"
+    "@leafer/interface": "1.0.0-beta.10"
   }
 }

package/src/ImageManager.ts

@@ -1,34 +1,52 @@
-import { ILeafer, ILeaferCanvasConfig, IImageManager, ILeaferImageConfig, ILeaferImage } from '@leafer/interface'
+import { IImageManager, ILeaferImageConfig, ILeaferImage } from '@leafer/interface'
 import { Creator } from '@leafer/platform'
+import { TaskProcessor } from '@leafer/task'
 
+export const ImageManager: IImageManager = {
 
-interface ILeaferImageMap {
-    [name: string]: ILeaferImage
-}
-
+    map: {},
 
-export class ImageManager implements IImageManager {
+    recycledList: [],
 
-    public leafer: ILeafer
+    tasker: new TaskProcessor(),
 
-    public map: ILeaferImageMap = {}
+    patternTasker: new TaskProcessor(),
 
-    constructor(leafer: ILeafer, _config: ILeaferCanvasConfig) {
-        this.leafer = leafer
-    }
+    get isComplete() { return I.tasker.isComplete && I.patternTasker.isComplete },
 
-    public get(config: ILeaferImageConfig): ILeaferImage {
-        let image = this.map[config.url]
+    get(config: ILeaferImageConfig): ILeaferImage {
+        let image = I.map[config.url]
         if (!image) {
             image = Creator.image(config)
-            this.map[config.url] = image
+            I.map[config.url] = image
         }
+        image.use++
         return image
-    }
+    },
+
+    recycle(image: ILeaferImage): void {
+        image.use--
+        setTimeout(() => { if (!image.use) I.recycledList.push(image) }, 0)
+    },
+
+    clearRecycled(): void {
+        const list = I.recycledList
+        if (list.length) {
+            list.forEach(image => {
+                if (!image.use) {
+                    delete I.map[image.url]
+                    image.destroy()
+                }
+            })
+            list.length = 0
+        }
+    },
 
-    public destory(): void {
-        this.leafer = null
-        this.map = null
+    destroy(): void {
+        I.map = {}
+        I.tasker = null
     }
 
-}
+}
+
+const I = ImageManager

package/src/LeaferImageBase.ts

@@ -0,0 +1,101 @@
+import { ILeaferImage, ILeaferImageConfig, IFunction, IObject, InnerId } from '@leafer/interface'
+import { Platform } from '@leafer/platform'
+import { IncrementId } from '@leafer/math'
+import { ImageManager } from './ImageManager'
+
+
+const { IMAGE, create } = IncrementId
+
+export class LeaferImageBase implements ILeaferImage {
+
+    public readonly innerId: InnerId
+    public get url() { return this.config.url }
+
+    public view: any
+
+    public width: number
+    public height: number
+
+    public isSVG: boolean
+
+    public get completed() { return this.ready || !!this.error }
+
+    public ready: boolean
+    public error: IObject
+    public loading: boolean
+
+    public use = 0
+
+    public config: ILeaferImageConfig
+
+    protected waitComplete: IFunction[] = []
+
+    constructor(config: ILeaferImageConfig) {
+        this.innerId = create(IMAGE)
+        this.config = config
+        const { url } = config
+        if (url.startsWith('data:')) {
+            if (url.startsWith('data:image/svg')) this.isSVG = true
+        } else {
+            if (url.includes('.svg')) this.isSVG = true
+        }
+    }
+
+    public load(onSuccess: IFunction, onError: IFunction): number {
+        if (!this.loading) {
+            this.loading = true
+            ImageManager.tasker.addParallel(async () => await Platform.origin.loadImage(this.config.url).then((img) => {
+                this.ready = true
+                this.width = img.naturalWidth || img.width
+                this.height = img.naturalHeight || img.height
+                this.view = img
+                this.onComplete(true)
+            }).catch((e) => {
+                this.error = e
+                this.onComplete(false)
+            }), null, true)
+        }
+        this.waitComplete.push(onSuccess, onError)
+        return this.waitComplete.length - 2
+    }
+
+    public unload(index: number): void {
+        const l = this.waitComplete
+        const error = l[index + 1]
+        if (error) error({ type: 'stop' })
+        l[index] = l[index + 1] = undefined
+    }
+
+    protected onComplete(isSuccess: boolean): void {
+        let odd: number
+        this.waitComplete.forEach((item, index) => {
+            odd = index % 2
+            if (item) {
+                if (isSuccess) {
+                    if (!odd) item(this)
+                } else {
+                    if (odd) item(this.error)
+                }
+            }
+        })
+        this.waitComplete.length = 0
+        this.loading = false
+    }
+
+    public getCanvas(width: number, height: number, opacity?: number, _filters?: IObject): any {
+        width || (width = this.width)
+        height || (height = this.height)
+        const canvas = Platform.origin.createCanvas(width, height)
+        const ctx = canvas.getContext('2d')
+        if (opacity) ctx.globalAlpha = opacity
+        ctx.drawImage(this.view, 0, 0, width, height)
+        return canvas
+    }
+
+    public destroy(): void {
+        this.view = null
+        this.config = null
+        this.waitComplete.length = 0
+    }
+
+}

package/src/index.ts

@@ -1,2 +1,2 @@
-export { ImageManager } from './ImageManager'
-
+export { LeaferImageBase } from './LeaferImageBase'
+export { ImageManager } from './ImageManager'