feat:web support image resource
This commit is contained in:
parent
880afa050a
commit
0ebabc7d0a
42
doric-web/dist/index.js
vendored
42
doric-web/dist/index.js
vendored
@ -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');
|
||||
}
|
||||
if (this.onloadFuncId) {
|
||||
v.style.removeProperty('background-color');
|
||||
if (v.src === src && this.onloadFuncId) {
|
||||
this.callJSResponse(this.onloadFuncId, {
|
||||
width: v.width,
|
||||
height: v.height,
|
||||
width: v.naturalWidth,
|
||||
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 });
|
||||
|
2
doric-web/dist/index.js.map
vendored
2
doric-web/dist/index.js.map
vendored
File diff suppressed because one or more lines are too long
@ -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);
|
||||
|
@ -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)
|
||||
|
8
doric-web/src/resource/DoricResourceLoader.ts
Normal file
8
doric-web/src/resource/DoricResourceLoader.ts
Normal file
@ -0,0 +1,8 @@
|
||||
export interface DoricResourceLoader {
|
||||
|
||||
resourceType(): string
|
||||
|
||||
load(identifier: string): Promise<string>
|
||||
|
||||
}
|
||||
|
14
doric-web/src/resource/DoricResourceManager.ts
Normal file
14
doric-web/src/resource/DoricResourceManager.ts
Normal file
@ -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);
|
||||
}
|
||||
}
|
@ -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')
|
||||
}
|
||||
if (this.onloadFuncId) {
|
||||
v.style.removeProperty('background-color')
|
||||
if (v.src === src && this.onloadFuncId) {
|
||||
this.callJSResponse(this.onloadFuncId, {
|
||||
width: v.width,
|
||||
height: v.height,
|
||||
width: v.naturalWidth,
|
||||
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
|
||||
})
|
||||
}
|
||||
|
Reference in New Issue
Block a user