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

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@leafer/image",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.0-rc.10",
   "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,11 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/task": "1.0.0-beta.9",
-    "@leafer/platform": "1.0.0-beta.9"
+    "@leafer/task": "1.0.0-rc.10",
+    "@leafer/file": "1.0.0-rc.10",
+    "@leafer/platform": "1.0.0-rc.10"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-beta.9"
+    "@leafer/interface": "1.0.0-rc.10"
   }
 }

package/src/ImageManager.ts

@@ -1,43 +1,68 @@
-import { ILeafer, ILeaferCanvasConfig, IImageManager, ILeaferImageConfig, ILeaferImage, ITaskProcessor, IFunction } from '@leafer/interface'
+import { IImageManager, ILeaferImageConfig, ILeaferImage, IExportFileType } from '@leafer/interface'
 import { Creator } from '@leafer/platform'
+import { FileHelper } from '@leafer/file'
 import { TaskProcessor } from '@leafer/task'
 
 
-interface ILeaferImageMap {
-    [name: string]: ILeaferImage
-}
-
+export const ImageManager: IImageManager = {
 
-export class ImageManager implements IImageManager {
+    map: {},
 
-    public leafer: ILeafer
+    recycledList: [],
 
-    public tasker: ITaskProcessor
+    tasker: new TaskProcessor(),
 
-    public map: ILeaferImageMap = {}
+    patternTasker: new TaskProcessor(),
 
-    constructor(leafer: ILeafer, _config: ILeaferCanvasConfig) {
-        this.leafer = leafer
-        this.tasker = new TaskProcessor()
-    }
+    get isComplete() { return I.tasker.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
-    }
+    },
 
-    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()
-    }
+    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
+        }
+    },
+
+    hasOpacityPixel(config: ILeaferImageConfig): boolean {
+        return FileHelper.opacityTypes.some(item => I.isFormat(item, config))
+    },
+
+    isFormat(format: IExportFileType, config: ILeaferImageConfig): boolean {
+        if (config.format === format) return true
+        const { url } = config
+        if (url.startsWith('data:')) {
+            if (url.startsWith('data:' + FileHelper.mineType(format))) return true
+        } else {
+            if (url.includes('.' + format) || url.includes('.' + FileHelper.upperCaseTypeMap[format])) return true
+        }
+        return false
+    },
 
-    public destroy(): void {
-        this.leafer = null
-        this.map = null
+    destroy(): void {
+        I.map = {}
     }
 
-}
+}
+
+const I = ImageManager

package/src/LeaferImage.ts

@@ -0,0 +1,125 @@
+import { ILeaferImage, ILeaferImageConfig, IFunction, IObject, InnerId, IMatrixData, ICanvasPattern, ILeaferImageCacheCanvas, ILeaferImagePatternPaint } 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 hasOpacityPixel: boolean // check png / svg / webp
+
+    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[] = []
+
+    protected cache: ILeaferImageCacheCanvas
+
+    constructor(config: ILeaferImageConfig) {
+        this.innerId = create(IMAGE)
+        this.config = config || { url: '' }
+        this.isSVG = ImageManager.isFormat('svg', config)
+        this.hasOpacityPixel = ImageManager.hasOpacityPixel(config)
+    }
+
+    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)
+
+        if (this.cache) { // when use > 1, check cache
+            let { params, data } = this.cache
+            for (let i in params) { if (params[i] !== arguments[i]) { data = null; break } }
+            if (data) return data
+        }
+
+        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)
+
+        this.cache = this.use > 1 ? { data: canvas, params: arguments } : null
+
+        return canvas
+    }
+
+    public getPattern(canvas: any, repeat: string | null, transform?: IMatrixData, paint?: ILeaferImagePatternPaint): ICanvasPattern {
+        const pattern = Platform.canvas.createPattern(canvas, repeat)
+        try {
+            if (transform && pattern.setTransform) {
+                pattern.setTransform(transform) // maybe error 
+                transform = null
+            }
+        } catch { }
+        if (paint) paint.transform = transform
+        return pattern
+    }
+
+    public destroy(): void {
+        this.config = { url: '' }
+        this.cache = null
+        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,30 @@
+import { ILeaferImage, InnerId, IObject, ILeaferImageConfig, IFunction, ILeaferImageCacheCanvas, IMatrixData, ILeaferImagePatternPaint, ICanvasPattern, IImageManager } from '@leafer/interface';
+
+declare class LeaferImage implements ILeaferImage {
+    readonly innerId: InnerId;
+    get url(): string;
+    view: any;
+    width: number;
+    height: number;
+    isSVG: boolean;
+    hasOpacityPixel: boolean;
+    get completed(): boolean;
+    ready: boolean;
+    error: IObject;
+    loading: boolean;
+    use: number;
+    config: ILeaferImageConfig;
+    protected waitComplete: IFunction[];
+    protected cache: ILeaferImageCacheCanvas;
+    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;
+    getPattern(canvas: any, repeat: string | null, transform?: IMatrixData, paint?: ILeaferImagePatternPaint): ICanvasPattern;
+    destroy(): void;
+}
+
+declare const ImageManager: IImageManager;
+
+export { ImageManager, LeaferImage };

package/src/LeaferImageBase.ts

@@ -1,49 +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 error: IObject
-
-    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) => {
-            this.error = 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 destroy(): void {
-        this.view = null
-        this.options = null
-    }
-
-}