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);
|
super.blend(props);
|
||||||
}
|
}
|
||||||
blendProps(v, propName, prop) {
|
blendProps(v, propName, prop) {
|
||||||
|
var _a;
|
||||||
switch (propName) {
|
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 'imageUrl':
|
||||||
case 'imageBase64':
|
case 'imageBase64':
|
||||||
this.loadIntoTarget(v, prop);
|
this.loadIntoTarget(v, prop);
|
||||||
@ -7404,6 +7412,7 @@ var doric_web = (function (exports, axios, sandbox) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
loadIntoTarget(v, src) {
|
loadIntoTarget(v, src) {
|
||||||
|
v.style.removeProperty('background-color');
|
||||||
if (this.placeHolderImage) {
|
if (this.placeHolderImage) {
|
||||||
v.src = this.placeHolderImage;
|
v.src = this.placeHolderImage;
|
||||||
}
|
}
|
||||||
@ -7414,27 +7423,29 @@ var doric_web = (function (exports, axios, sandbox) {
|
|||||||
v.style.backgroundColor = toRGBAString(this.placeHolderColor);
|
v.style.backgroundColor = toRGBAString(this.placeHolderColor);
|
||||||
}
|
}
|
||||||
v.onload = () => {
|
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, {
|
this.callJSResponse(this.onloadFuncId, {
|
||||||
width: v.width,
|
width: v.naturalWidth,
|
||||||
height: v.height,
|
height: v.naturalHeight,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
v.onerror = () => {
|
v.onerror = () => {
|
||||||
|
v.style.removeProperty('background-color');
|
||||||
const error = this.getError(v.offsetWidth, v.offsetHeight);
|
const error = this.getError(v.offsetWidth, v.offsetHeight);
|
||||||
if (!error)
|
if (!error)
|
||||||
return;
|
return;
|
||||||
const same = src === error;
|
const same = src === error;
|
||||||
const srcLoadError = v.src === src;
|
const srcLoadError = v.src.length === 0 || v.src === src;
|
||||||
if (same || !srcLoadError)
|
if (same || !srcLoadError)
|
||||||
return;
|
return;
|
||||||
v.src = error;
|
v.src = error;
|
||||||
|
if (this.onloadFuncId) {
|
||||||
|
this.callJSResponse(this.onloadFuncId);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
setTimeout(() => {
|
Promise.resolve().then(e => {
|
||||||
v.src = src;
|
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 bundles = new Map;
|
||||||
const plugins = new Map;
|
const plugins = new Map;
|
||||||
const nodes = new Map;
|
const nodes = new Map;
|
||||||
|
const resourceManager = new DoricResourceManager();
|
||||||
function acquireJSBundle(name) {
|
function acquireJSBundle(name) {
|
||||||
return bundles.get(name);
|
return bundles.get(name);
|
||||||
}
|
}
|
||||||
@ -9063,6 +9088,7 @@ ${content}
|
|||||||
exports.registerJSBundle = registerJSBundle;
|
exports.registerJSBundle = registerJSBundle;
|
||||||
exports.registerPlugin = registerPlugin;
|
exports.registerPlugin = registerPlugin;
|
||||||
exports.registerViewNode = registerViewNode;
|
exports.registerViewNode = registerViewNode;
|
||||||
|
exports.resourceManager = resourceManager;
|
||||||
exports.toPixelString = toPixelString;
|
exports.toPixelString = toPixelString;
|
||||||
|
|
||||||
Object.defineProperty(exports, '__esModule', { value: true });
|
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/DoricRegistry'
|
||||||
export * from './src/DoricDriver'
|
export * from './src/DoricDriver'
|
||||||
export * from './src/shader/DoricViewNode'
|
export * from './src/shader/DoricViewNode'
|
||||||
|
export * from './src/resource/DoricResourceLoader'
|
||||||
|
|
||||||
window.customElements.define('doric-div', DoricElement);
|
window.customElements.define('doric-div', DoricElement);
|
||||||
window.customElements.define('doric-navigation', NavigationElement);
|
window.customElements.define('doric-navigation', NavigationElement);
|
||||||
|
@ -22,6 +22,7 @@ import { DoricSlideItemNode } from "./shader/DoricSlideItemNode"
|
|||||||
import { NotificationPlugin } from "./plugins/NotificationPlugin"
|
import { NotificationPlugin } from "./plugins/NotificationPlugin"
|
||||||
import { NetworkPlugin } from "./plugins/NetworkPlugin"
|
import { NetworkPlugin } from "./plugins/NetworkPlugin"
|
||||||
import { DoricNestedSliderNode } from "./shader/DoricNestedSliderNode"
|
import { DoricNestedSliderNode } from "./shader/DoricNestedSliderNode"
|
||||||
|
import DoricResourceManager from "./resource/DoricResourceManager"
|
||||||
|
|
||||||
const bundles: Map<string, string> = new Map
|
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
|
const nodes: Map<string, DoricViewNodeClass> = new Map
|
||||||
|
|
||||||
|
export const resourceManager = new DoricResourceManager()
|
||||||
|
|
||||||
export function acquireJSBundle(name: string) {
|
export function acquireJSBundle(name: string) {
|
||||||
return bundles.get(name)
|
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 { DoricViewNode, LEFT, RIGHT, CENTER_X, CENTER_Y, TOP, BOTTOM, toPixelString } from './DoricViewNode'
|
||||||
import { toRGBAString } from '../utils/color'
|
import { toRGBAString } from '../utils/color'
|
||||||
|
import { resourceManager } from '../DoricRegistry'
|
||||||
|
|
||||||
enum ScaleType {
|
enum ScaleType {
|
||||||
ScaleToFill = 0,
|
ScaleToFill = 0,
|
||||||
@ -34,6 +35,13 @@ export class DoricImageNode extends DoricViewNode {
|
|||||||
|
|
||||||
blendProps(v: HTMLImageElement, propName: string, prop: any) {
|
blendProps(v: HTMLImageElement, propName: string, prop: any) {
|
||||||
switch (propName) {
|
switch (propName) {
|
||||||
|
case 'image':
|
||||||
|
resourceManager.load(prop)?.then(e => {
|
||||||
|
this.loadIntoTarget(v, e)
|
||||||
|
}).catch(e => {
|
||||||
|
this.loadIntoTarget(v, '')
|
||||||
|
})
|
||||||
|
break
|
||||||
case 'imageUrl':
|
case 'imageUrl':
|
||||||
case 'imageBase64':
|
case 'imageBase64':
|
||||||
this.loadIntoTarget(v, prop)
|
this.loadIntoTarget(v, prop)
|
||||||
@ -75,34 +83,36 @@ export class DoricImageNode extends DoricViewNode {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private loadIntoTarget(v: HTMLImageElement, src: any) {
|
private loadIntoTarget(v: HTMLImageElement, src: any) {
|
||||||
let placeHolderSrc = ''
|
v.style.removeProperty('background-color')
|
||||||
if (this.placeHolderImage) {
|
if (this.placeHolderImage) {
|
||||||
placeHolderSrc = v.src = this.placeHolderImage
|
v.src = this.placeHolderImage
|
||||||
} else if (this.placeHolderImageBase64) {
|
} else if (this.placeHolderImageBase64) {
|
||||||
placeHolderSrc = v.src = this.placeHolderImageBase64
|
v.src = this.placeHolderImageBase64
|
||||||
} else if (this.placeHolderColor) {
|
} else if (this.placeHolderColor) {
|
||||||
v.style.backgroundColor = toRGBAString(this.placeHolderColor)
|
v.style.backgroundColor = toRGBAString(this.placeHolderColor)
|
||||||
}
|
}
|
||||||
v.onload = () => {
|
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, {
|
this.callJSResponse(this.onloadFuncId, {
|
||||||
width: v.width,
|
width: v.naturalWidth,
|
||||||
height: v.height,
|
height: v.naturalHeight,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
v.onerror = () => {
|
v.onerror = () => {
|
||||||
|
v.style.removeProperty('background-color')
|
||||||
const error = this.getError(v.offsetWidth, v.offsetHeight)
|
const error = this.getError(v.offsetWidth, v.offsetHeight)
|
||||||
if (!error) return
|
if (!error) return
|
||||||
const same = src === error
|
const same = src === error
|
||||||
const srcLoadError = v.src === src
|
const srcLoadError = v.src.length === 0 || v.src === src
|
||||||
if (same || !srcLoadError) return
|
if (same || !srcLoadError) return
|
||||||
v.src = error
|
v.src = error
|
||||||
|
if (this.onloadFuncId) {
|
||||||
|
this.callJSResponse(this.onloadFuncId)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
setTimeout(() => {
|
Promise.resolve().then(e => {
|
||||||
v.src = src
|
v.src = src
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user