@leafer/image 1.0.0-rc.2 → 1.0.0-rc.21

package/package.json

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

package/src/ImageManager.ts

@@ -1,7 +1,9 @@
-import { IImageManager, ILeaferImageConfig, ILeaferImage } 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'
 
+
 export const ImageManager: IImageManager = {
 
     map: {},
@@ -12,7 +14,7 @@ export const ImageManager: IImageManager = {
 
     patternTasker: new TaskProcessor(),
 
-    get isComplete() { return I.tasker.isComplete && I.patternTasker.isComplete },
+    get isComplete() { return I.tasker.isComplete },
 
     get(config: ILeaferImageConfig): ILeaferImage {
         let image = I.map[config.url]
@@ -31,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]
@@ -42,8 +44,24 @@ export const ImageManager: IImageManager = {
         }
     },
 
+    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
+    },
+
     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,16 +32,13 @@ export class LeaferImage implements ILeaferImage {
 
     protected waitComplete: IFunction[] = []
 
+    protected cache: ILeaferImageCacheCanvas
+
     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
+        this.isSVG = ImageManager.isFormat('svg', config)
+        this.hasOpacityPixel = ImageManager.hasOpacityPixel(config)
     }
 
     public load(onSuccess: IFunction, onError: IFunction): number {
@@ -89,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;
 }