tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat:web support image resource

Browse Source
This commit is contained in:
wangxiangyuan 2023-09-05 19:27:57 +08:00 committed by osborn
parent 880afa050a
commit 0ebabc7d0a
7 changed files with 81 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
doric-web/dist/index.js vendored
View File

@ -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
View File

File diff suppressed because one or more lines are too long

1
doric-web/index.ts
View File

@ -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);

2
doric-web/src/DoricRegistry.ts
View File

@ -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
View File

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

14
doric-web/src/resource/DoricResourceManager.ts Normal file
View 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);
}
}

32
doric-web/src/shader/DoricImageNode.ts
View File

@ -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
})
}