@leafer/image 1.0.0-rc.9 → 1.0.0

package/package.json

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

package/src/ImageManager.ts

@@ -33,7 +33,7 @@ export const ImageManager: IImageManager = {
 
     clearRecycled(): void {
         const list = I.recycledList
-        if (list.length) {
+        if (list.length > 100) { // cache 100
             list.forEach(image => {
                 if (!image.use && image.url) {
                     delete I.map[image.url]
@@ -44,7 +44,7 @@ export const ImageManager: IImageManager = {
         }
     },
 
-    isPixel(config: ILeaferImageConfig): boolean {
+    hasOpacityPixel(config: ILeaferImageConfig): boolean {
         return FileHelper.opacityTypes.some(item => I.isFormat(item, config))
     },
 
@@ -61,6 +61,7 @@ export const ImageManager: IImageManager = {
 
     destroy(): void {
         I.map = {}
+        I.recycledList = []
     }
 
 }

package/src/LeaferImage.ts

@@ -1,4 +1,4 @@
-import { ILeaferImage, ILeaferImageConfig, IFunction, IObject, InnerId } from '@leafer/interface'
+import { ILeaferImage, ILeaferImageConfig, IFunction, IObject, InnerId, IMatrixData, ICanvasPattern, ILeaferImageCacheCanvas, ILeaferImagePatternPaint } from '@leafer/interface'
 import { Platform } from '@leafer/platform'
 import { IncrementId } from '@leafer/math'
 
@@ -18,6 +18,7 @@ export class LeaferImage implements ILeaferImage {
     public height: number
 
     public isSVG: boolean
+    public hasOpacityPixel: boolean // check png / svg / webp
 
     public get completed() { return this.ready || !!this.error }
 
@@ -31,10 +32,13 @@ export class LeaferImage implements ILeaferImage {
 
     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 {
@@ -83,15 +87,38 @@ export class LeaferImage implements ILeaferImage {
     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/types/index.d.ts

@@ -1,4 +1,4 @@
-import { ILeaferImage, InnerId, IObject, ILeaferImageConfig, IFunction, IImageManager } from '@leafer/interface';
+import { ILeaferImage, InnerId, IObject, ILeaferImageConfig, IFunction, ILeaferImageCacheCanvas, IMatrixData, ILeaferImagePatternPaint, ICanvasPattern, IImageManager } from '@leafer/interface';
 
 declare class LeaferImage implements ILeaferImage {
     readonly innerId: InnerId;
@@ -7,6 +7,7 @@ declare class LeaferImage implements ILeaferImage {
     width: number;
     height: number;
     isSVG: boolean;
+    hasOpacityPixel: boolean;
     get completed(): boolean;
     ready: boolean;
     error: IObject;
@@ -14,11 +15,13 @@ declare class LeaferImage implements ILeaferImage {
     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;
 }