@leafer/image 1.0.0-beta.8 → 1.0.0-rc.1

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@leafer/image",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-rc.1",
   "description": "@leafer/image",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
   "main": "src/index.ts",
+  "types": "types/index.d.ts",
   "files": [
-    "src"
+    "src",
+    "types",
+    "dist"
   ],
   "repository": {
     "type": "git",
@@ -19,10 +22,10 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/task": "1.0.0-beta.8",
-    "@leafer/platform": "1.0.0-beta.8"
+    "@leafer/task": "1.0.0-rc.1",
+    "@leafer/platform": "1.0.0-rc.1"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-beta.8"
+    "@leafer/interface": "1.0.0-rc.1"
   }
 }

package/src/ImageManager.ts

@@ -1,43 +1,51 @@
-import { ILeafer, ILeaferCanvasConfig, IImageManager, ILeaferImageConfig, ILeaferImage, ITaskProcessor, IFunction } 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 tasker: ITaskProcessor
+    patternTasker: new TaskProcessor(),
 
-    public map: ILeaferImageMap = {}
-
-    constructor(leafer: ILeafer, _config: ILeaferCanvasConfig) {
-        this.leafer = leafer
-        this.tasker = new TaskProcessor()
-    }
+    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) })
+    },
+
+    clearRecycled(): void {
+        const list = I.recycledList
+        if (list.length) {
+            list.forEach(image => {
+                if (!image.use && image.url) {
+                    delete I.map[image.url]
+                    image.destroy()
+                }
+            })
+            list.length = 0
+        }
+    },
 
-    public load(image: ILeaferImage, onSuccess: IFunction, onError: IFunction): void {
-        this.tasker.addParallel(async () => await image.load(onSuccess, onError))
-        if (!this.tasker.running) this.tasker.start()
+    destroy(): void {
+        I.map = {}
     }
 
-    public destory(): void {
-        this.leafer = null
-        this.map = null
-    }
+}
 
-}
+const I = ImageManager

package/src/LeaferImage.ts

@@ -0,0 +1,104 @@
+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 LeaferImage 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 || { url: '' }
+        const { url } = config
+        if (url.startsWith('data:')) {
+            if (url.startsWith('data:image/svg')) this.isSVG = true
+        } else {
+            if (url.includes('.svg')) this.isSVG = true
+        }
+        if (this.config.format === 'svg') this.isSVG = true
+    }
+
+    public load(onSuccess: IFunction, onError: IFunction): number {
+        if (!this.loading) {
+            this.loading = true
+            ImageManager.tasker.add(async () => await Platform.origin.loadImage(this.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)
+            }))
+        }
+        this.waitComplete.push(onSuccess, onError)
+        return this.waitComplete.length - 2
+    }
+
+    public unload(index: number, stopEvent?: boolean): void {
+        const l = this.waitComplete
+        if (stopEvent) {
+            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.config = { url: '' }
+        this.waitComplete.length = 0
+    }
+
+}

package/src/index.ts

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

package/types/index.d.ts

@@ -0,0 +1,27 @@
+import { ILeaferImage, InnerId, IObject, ILeaferImageConfig, IFunction, IImageManager } from '@leafer/interface';
+
+declare class LeaferImage implements ILeaferImage {
+    readonly innerId: InnerId;
+    get url(): string;
+    view: any;
+    width: number;
+    height: number;
+    isSVG: boolean;
+    get completed(): boolean;
+    ready: boolean;
+    error: IObject;
+    loading: boolean;
+    use: number;
+    config: ILeaferImageConfig;
+    protected waitComplete: IFunction[];
+    constructor(config: ILeaferImageConfig);
+    load(onSuccess: IFunction, onError: IFunction): number;
+    unload(index: number, stopEvent?: boolean): void;
+    protected onComplete(isSuccess: boolean): void;
+    getCanvas(width: number, height: number, opacity?: number, _filters?: IObject): any;
+    destroy(): void;
+}
+
+declare const ImageManager: IImageManager;
+
+export { ImageManager, LeaferImage };

package/src/LeaferImageBase.ts

@@ -1,47 +0,0 @@
-import { ILeaferImage, ILeaferImageConfig, IFunction, IObject } from '@leafer/interface'
-import { Platform } from '@leafer/platform'
-
-
-export class LeaferImageBase implements ILeaferImage {
-
-    public view: any
-
-    public width: number
-    public height: number
-
-    public ready: boolean
-
-    public options: ILeaferImageConfig
-
-    constructor(_options: ILeaferImageConfig) {
-        this.options = _options
-    }
-
-    public async load(onSuccess: IFunction, onError: IFunction): Promise<void> {
-        return Platform.origin.loadImage(this.options.url).then((img) => {
-            this.ready = true
-            this.width = img.naturalWidth || img.width
-            this.height = img.naturalHeight || img.height
-            this.view = img
-            if (onSuccess) onSuccess(this)
-        }).catch((e) => {
-            if (onError) onError(e)
-        })
-    }
-
-    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 destory(): void {
-        this.view = null
-        this.options = null
-    }
-
-}