feat:web support image resource

doric-web/dist/index.js

@@ -7362,7 +7362,15 @@ var doric_web = (function (exports, axios, sandbox) {
 	        super.blend(props);
 	    }
 	    blendProps(v, propName, prop) {
+	        var _a;
 	        switch (propName) {
+	            case 'image':
+	                (_a = resourceManager.load(prop)) === null || _a === void 0 ? void 0 : _a.then(e => {
+	                    this.loadIntoTarget(v, e);
+	                }).catch(e => {
+	                    this.loadIntoTarget(v, '');
+	                });
+	                break;
 	            case 'imageUrl':
 	            case 'imageBase64':
 	                this.loadIntoTarget(v, prop);
@@ -7404,6 +7412,7 @@ var doric_web = (function (exports, axios, sandbox) {
 	        }
 	    }
 	    loadIntoTarget(v, src) {
+	        v.style.removeProperty('background-color');
 	        if (this.placeHolderImage) {
 	            v.src = this.placeHolderImage;
 	        }
@@ -7414,27 +7423,29 @@ var doric_web = (function (exports, axios, sandbox) {
 	            v.style.backgroundColor = toRGBAString(this.placeHolderColor);
 	        }
 	        v.onload = () => {
-	            if (this.placeHolderColor) {
+	            v.style.removeProperty('background-color');
-	                v.style.removeProperty('background-color');
+	            if (v.src === src && this.onloadFuncId) {
-	            }
-	            if (this.onloadFuncId) {
 	                this.callJSResponse(this.onloadFuncId, {
-	                    width: v.width,
+	                    width: v.naturalWidth,
-	                    height: v.height,
+	                    height: v.naturalHeight,
 	                });
 	            }
 	        };
 	        v.onerror = () => {
+	            v.style.removeProperty('background-color');
 	            const error = this.getError(v.offsetWidth, v.offsetHeight);
 	            if (!error)
 	                return;
 	            const same = src === error;
-	            const srcLoadError = v.src === src;
+	            const srcLoadError = v.src.length === 0 || v.src === src;
 	            if (same || !srcLoadError)
 	                return;
 	            v.src = error;
+	            if (this.onloadFuncId) {
+	                this.callJSResponse(this.onloadFuncId);
+	            }
 	        };
-	        setTimeout(() => {
+	        Promise.resolve().then(e => {
 	            v.src = src;
 	        });
 	    }
@@ -8648,9 +8659,23 @@ var doric_web = (function (exports, axios, sandbox) {
 	    }
 	}
 
+	class DoricResourceManager {
+	    constructor() {
+	        this.resourceLoaders = new Map();
+	    }
+	    registerLoader(loader) {
+	        this.resourceLoaders.set(loader.resourceType(), loader);
+	    }
+	    load(resource) {
+	        var _a;
+	        return (_a = this.resourceLoaders.get(resource.type)) === null || _a === void 0 ? void 0 : _a.load(resource.identifier);
+	    }
+	}
+
 	const bundles = new Map;
 	const plugins = new Map;
 	const nodes = new Map;
+	const resourceManager = new DoricResourceManager();
 	function acquireJSBundle(name) {
 	    return bundles.get(name);
 	}
@@ -9063,6 +9088,7 @@ ${content}
 	exports.registerJSBundle = registerJSBundle;
 	exports.registerPlugin = registerPlugin;
 	exports.registerViewNode = registerViewNode;
+	exports.resourceManager = resourceManager;
 	exports.toPixelString = toPixelString;
 
 	Object.defineProperty(exports, '__esModule', { value: true });

doric-web/index.ts

@@ -9,6 +9,7 @@ export * from './src/DoricPlugin'
 export * from './src/DoricRegistry'
 export * from './src/DoricDriver'
 export * from './src/shader/DoricViewNode'
+export * from './src/resource/DoricResourceLoader'
 
 window.customElements.define('doric-div', DoricElement);
 window.customElements.define('doric-navigation', NavigationElement);

doric-web/src/DoricRegistry.ts

@@ -22,6 +22,7 @@ import { DoricSlideItemNode } from "./shader/DoricSlideItemNode"
 import { NotificationPlugin } from "./plugins/NotificationPlugin"
 import { NetworkPlugin } from "./plugins/NetworkPlugin"
 import { DoricNestedSliderNode } from "./shader/DoricNestedSliderNode"
+import DoricResourceManager from "./resource/DoricResourceManager"
 
 const bundles: Map<string, string> = new Map
 
@@ -29,6 +30,7 @@ const plugins: Map<string, DoricPluginClass> = new Map
 
 const nodes: Map<string, DoricViewNodeClass> = new Map
 
+export const resourceManager = new DoricResourceManager()
 
 export function acquireJSBundle(name: string) {
     return bundles.get(name)

doric-web/src/resource/DoricResourceLoader.ts

@@ -0,0 +1,8 @@
+export interface DoricResourceLoader {
+
+    resourceType(): string
+
+    load(identifier: string): Promise<string>
+
+}
+

doric-web/src/resource/DoricResourceManager.ts

@@ -0,0 +1,14 @@
+import { Resource } from "doric";
+import { DoricResourceLoader } from "./DoricResourceLoader";
+
+export default class DoricResourceManager {
+    private resourceLoaders = new Map<string, DoricResourceLoader>();
+
+    registerLoader(loader: DoricResourceLoader) {
+        this.resourceLoaders.set(loader.resourceType(), loader);
+    }
+
+    load(resource: Resource) {
+        return this.resourceLoaders.get(resource.type)?.load(resource.identifier);
+    }
+}

doric-web/src/shader/DoricImageNode.ts

@@ -1,5 +1,6 @@
 import { DoricViewNode, LEFT, RIGHT, CENTER_X, CENTER_Y, TOP, BOTTOM, toPixelString } from './DoricViewNode'
 import { toRGBAString } from '../utils/color'
+import { resourceManager } from '../DoricRegistry'
 
 enum ScaleType {
     ScaleToFill = 0,
@@ -34,6 +35,13 @@ export class DoricImageNode extends DoricViewNode {
 
     blendProps(v: HTMLImageElement, propName: string, prop: any) {
         switch (propName) {
+            case 'image':
+                resourceManager.load(prop)?.then(e => {
+                    this.loadIntoTarget(v, e)
+                }).catch(e => {
+                    this.loadIntoTarget(v, '')
+                })
+                break
             case 'imageUrl':
             case 'imageBase64':
                 this.loadIntoTarget(v, prop)
@@ -75,34 +83,36 @@ export class DoricImageNode extends DoricViewNode {
     }
 
     private loadIntoTarget(v: HTMLImageElement, src: any) {
-        let placeHolderSrc = ''
+        v.style.removeProperty('background-color')
         if (this.placeHolderImage) {
-            placeHolderSrc = v.src = this.placeHolderImage
+            v.src = this.placeHolderImage
         } else if (this.placeHolderImageBase64) {
-            placeHolderSrc = v.src = this.placeHolderImageBase64
+            v.src = this.placeHolderImageBase64
         } else if (this.placeHolderColor) {
             v.style.backgroundColor = toRGBAString(this.placeHolderColor)
         }
         v.onload = () => {
-            if (this.placeHolderColor) {
+            v.style.removeProperty('background-color')
-                v.style.removeProperty('background-color')
+            if (v.src === src && this.onloadFuncId) {
-            }
-            if (this.onloadFuncId) {
                 this.callJSResponse(this.onloadFuncId, {
-                    width: v.width,
+                    width: v.naturalWidth,
-                    height: v.height,
+                    height: v.naturalHeight,
                 })
             }
         }
         v.onerror = () => {
+            v.style.removeProperty('background-color')
             const error = this.getError(v.offsetWidth, v.offsetHeight)
             if (!error) return
             const same = src === error
-            const srcLoadError = v.src === src
+            const srcLoadError = v.src.length === 0 || v.src === src
             if (same || !srcLoadError) return
             v.src = error
+            if (this.onloadFuncId) {
+                this.callJSResponse(this.onloadFuncId)
+            }
         }
-        setTimeout(() => {
+        Promise.resolve().then(e => {
             v.src = src
         })
     }