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

feat:stack gravity and imagenode

Browse Source
This commit is contained in:
pengfei.zhou 2019-12-21 16:37:55 +08:00
parent db4990696c
commit 6f2fd39f2c
6 changed files with 94 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
dist/index.js vendored
View File

@ -3759,7 +3759,7 @@ return __module.exports;
configWidth() {
switch (this.layoutConfig.widthSpec) {
case LayoutSpec.WRAP_CONTENT:
this.view.style.width = "auto";
this.view.style.width = "fit-content";
break;
case LayoutSpec.AT_MOST:
this.view.style.width = "100%";
@ -3775,7 +3775,7 @@ return __module.exports;
configHeight() {
switch (this.layoutConfig.heightSpec) {
case LayoutSpec.WRAP_CONTENT:
this.view.style.height = "auto";
this.view.style.height = "fit-content";
break;
case LayoutSpec.AT_MOST:
this.view.style.height = "100%";
@ -4060,6 +4060,25 @@ return __module.exports;
e.view.style.position = "absolute";
e.view.style.left = toPixelString(e.offsetX + this.paddingLeft);
e.view.style.top = toPixelString(e.offsetY + this.paddingTop);
const gravity = e.layoutConfig.alignment;
if ((gravity & LEFT) === LEFT) {
e.view.style.left = toPixelString(0);
}
else if ((gravity & RIGHT) === RIGHT) {
e.view.style.left = toPixelString(this.view.offsetWidth - e.view.offsetWidth);
}
else if ((gravity & CENTER_X) === CENTER_X) {
e.view.style.left = toPixelString(this.view.offsetWidth / 2 - e.view.offsetWidth / 2);
}
if ((gravity & TOP) === TOP) {
e.view.style.top = toPixelString(0);
}
else if ((gravity & BOTTOM) === BOTTOM) {
e.view.style.top = toPixelString(this.view.offsetHeight - e.view.offsetHeight);
}
else if ((gravity & CENTER_Y) === CENTER_Y) {
e.view.style.top = toPixelString(this.view.offsetHeight / 2 - e.view.offsetHeight / 2);
}
});
}
}
@ -4232,6 +4251,30 @@ return __module.exports;
}
}
class DoricImageNode extends DoricViewNode {
build() {
return document.createElement('img');
}
blendProps(v, propName, prop) {
switch (propName) {
case 'imageUrl':
v.setAttribute('src', prop);
break;
case 'imageBase64':
v.setAttribute('src', prop);
break;
case 'loadCallback':
v.onload = () => {
this.callJSResponse(prop);
};
break;
default:
super.blendProps(v, propName, prop);
break;
}
}
}
const bundles = new Map;
const plugins = new Map;
const nodes = new Map;
@ -4255,6 +4298,7 @@ return __module.exports;
registerViewNode('VLayout', DoricVLayoutNode);
registerViewNode('HLayout', DoricHLayoutNode);
registerViewNode('Text', DoricTextNode);
registerViewNode('Image', DoricImageNode);
let __scriptId__ = 0;
function getScriptId() {

2
dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
src/DoricRegistry.ts
View File

@ -5,6 +5,7 @@ import { DoricStackNode } from "./shader/DoricStackNode"
import { DoricVLayoutNode } from './shader/DoricVLayoutNode'
import { DoricHLayoutNode } from './shader/DoricHLayoutNode'
import { DoricTextNode } from "./shader/DoricTextNode"
import { DoricImageNode } from "./shader/DoricImageNode"
const bundles: Map<string, string> = new Map
@ -42,4 +43,5 @@ registerPlugin('shader', ShaderPlugin)
registerViewNode('Stack', DoricStackNode)
registerViewNode('VLayout', DoricVLayoutNode)
registerViewNode('HLayout', DoricHLayoutNode)
registerViewNode('Text', DoricTextNode)
registerViewNode('Text', DoricTextNode)
registerViewNode('Image', DoricImageNode)

27
src/shader/DoricImageNode.ts Normal file
View File

@ -0,0 +1,27 @@
import { DoricViewNode, LEFT, RIGHT, CENTER_X, CENTER_Y, TOP, BOTTOM, toPixelString, toRGBAString } from "./DoricViewNode";
export class DoricImageNode extends DoricViewNode {
build(): HTMLElement {
return document.createElement('img')
}
blendProps(v: HTMLParagraphElement, propName: string, prop: any) {
switch (propName) {
case 'imageUrl':
v.setAttribute('src', prop)
break
case 'imageBase64':
v.setAttribute('src', prop)
break
case 'loadCallback':
v.onload = () => {
this.callJSResponse(prop)
}
break
default:
super.blendProps(v, propName, prop)
break
}
}
}

15
src/shader/DoricStackNode.ts
View File

@ -18,6 +18,21 @@ export class DoricStackNode extends DoricGroupViewNode {
e.view.style.position = "absolute"
e.view.style.left = toPixelString(e.offsetX + this.paddingLeft)
e.view.style.top = toPixelString(e.offsetY + this.paddingTop)
const gravity = e.layoutConfig.alignment
if ((gravity & LEFT) === LEFT) {
e.view.style.left = toPixelString(0)
} else if ((gravity & RIGHT) === RIGHT) {
e.view.style.left = toPixelString(this.view.offsetWidth - e.view.offsetWidth)
} else if ((gravity & CENTER_X) === CENTER_X) {
e.view.style.left = toPixelString(this.view.offsetWidth / 2 - e.view.offsetWidth / 2)
}
if ((gravity & TOP) === TOP) {
e.view.style.top = toPixelString(0)
} else if ((gravity & BOTTOM) === BOTTOM) {
e.view.style.top = toPixelString(this.view.offsetHeight - e.view.offsetHeight)
} else if ((gravity & CENTER_Y) === CENTER_Y) {
e.view.style.top = toPixelString(this.view.offsetHeight / 2 - e.view.offsetHeight / 2)
}
})
}
}

4
src/shader/DoricViewNode.ts
View File

@ -155,7 +155,7 @@ export abstract class DoricViewNode {
configWidth() {
switch (this.layoutConfig.widthSpec) {
case LayoutSpec.WRAP_CONTENT:
this.view.style.width = "auto"
this.view.style.width = "fit-content"
break
case LayoutSpec.AT_MOST:
@ -173,7 +173,7 @@ export abstract class DoricViewNode {
configHeight() {
switch (this.layoutConfig.heightSpec) {
case LayoutSpec.WRAP_CONTENT:
this.view.style.height = "auto"
this.view.style.height = "fit-content"
break
case LayoutSpec.AT_MOST: