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

h5:VLayout and HLayout's child alignment

Browse Source
This commit is contained in:
pengfei.zhou 2019-12-26 14:47:11 +08:00 committed by osborn
parent 102bf100ce
commit a4bbf2bb76
7 changed files with 113 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
doric-h5/dist/Snake.js vendored
View File

@ -161,6 +161,9 @@ class SnakeView extends doric.ViewHolder {
doric.text({
text: "SCORE",
textSize: 20,
padding: {
left: 40
},
}),
this.score = doric.text({
text: "000",
@ -176,11 +179,14 @@ class SnakeView extends doric.ViewHolder {
this.high = doric.text({
text: "000",
textSize: 20,
padding: {
right: 40
},
}),
]).apply({
layoutConfig: doric.layoutConfig().fit()
.configWidth(doric.LayoutSpec.MOST)
.configAlignmnet(doric.Gravity.Left).configMargin({ left: 40, right: 40 }),
.configAlignmnet(doric.Gravity.Left),
space: 10,
}),
]).apply({

77
doric-h5/dist/index.js vendored
View File

@ -2242,23 +2242,44 @@ class Panel {
this.context.shader.render(model);
}
hookBeforeNativeCall() {
if (Environment.platform !== 'h5') {
this.__root__.clean();
for (let v of this.headviews.values()) {
v.clean();
}
}
}
hookAfterNativeCall() {
//Here insert a native call to ensure the promise is resolved done.
Promise.resolve().then(() => {
if (Environment.platform !== 'h5') {
//Here insert a native call to ensure the promise is resolved done.
nativeEmpty();
if (this.__root__.isDirty()) {
const model = this.__root__.toModel();
this.nativeRender(model);
this.__root__.clean();
}
for (let v of this.headviews.values()) {
if (v.isDirty()) {
const model = v.toModel();
this.nativeRender(model);
v.clean();
}
}
});
}
else {
Promise.resolve().then(() => {
if (this.__root__.isDirty()) {
const model = this.__root__.toModel();
this.nativeRender(model);
this.__root__.clean();
}
for (let v of this.headviews.values()) {
if (v.isDirty()) {
const model = v.toModel();
this.nativeRender(model);
v.clean();
}
}
});
}
}
}
__decorate$2([
@ -3720,6 +3741,7 @@ return __module.exports;
this.reusable = superNode.reusable;
}
this.view = this.build();
this.view.style.overflow = "hidden";
}
get paddingLeft() {
return this.padding.left || 0;
@ -4075,7 +4097,24 @@ return __module.exports;
}
layout() {
super.layout();
this.configOffset();
Promise.resolve().then(_ => {
this.configSize();
this.configOffset();
});
}
configSize() {
if (this.layoutConfig.widthSpec === LayoutSpec.WRAP_CONTENT) {
const width = this.childNodes.reduce((prev, current) => {
return Math.max(prev, current.view.offsetWidth);
}, 0);
this.view.style.width = toPixelString(width);
}
if (this.layoutConfig.heightSpec === LayoutSpec.WRAP_CONTENT) {
const height = this.childNodes.reduce((prev, current) => {
return Math.max(prev, current.view.offsetHeight);
}, 0);
this.view.style.height = toPixelString(height);
}
}
configOffset() {
this.childNodes.forEach(e => {
@ -4160,6 +4199,15 @@ return __module.exports;
+ (((_f = (_e = e.layoutConfig) === null || _e === void 0 ? void 0 : _e.margin) === null || _f === void 0 ? void 0 : _f.bottom) || 0));
e.view.style.marginLeft = toPixelString(((_h = (_g = e.layoutConfig) === null || _g === void 0 ? void 0 : _g.margin) === null || _h === void 0 ? void 0 : _h.left) || 0);
e.view.style.marginRight = toPixelString(((_k = (_j = e.layoutConfig) === null || _j === void 0 ? void 0 : _j.margin) === null || _k === void 0 ? void 0 : _k.right) || 0);
if ((e.layoutConfig.alignment & LEFT) === LEFT) {
e.view.style.alignSelf = "flex-start";
}
else if ((e.layoutConfig.alignment & RIGHT) === RIGHT) {
e.view.style.alignSelf = "flex-end";
}
else if ((e.layoutConfig.alignment & CENTER_X) === CENTER_X) {
e.view.style.alignSelf = "center";
}
});
}
}
@ -4220,6 +4268,15 @@ return __module.exports;
+ (((_f = (_e = e.layoutConfig) === null || _e === void 0 ? void 0 : _e.margin) === null || _f === void 0 ? void 0 : _f.right) || 0));
e.view.style.marginTop = toPixelString(((_h = (_g = e.layoutConfig) === null || _g === void 0 ? void 0 : _g.margin) === null || _h === void 0 ? void 0 : _h.top) || 0);
e.view.style.marginBottom = toPixelString(((_k = (_j = e.layoutConfig) === null || _j === void 0 ? void 0 : _j.margin) === null || _k === void 0 ? void 0 : _k.bottom) || 0);
if ((e.layoutConfig.alignment & TOP) === TOP) {
e.view.style.alignSelf = "flex-start";
}
else if ((e.layoutConfig.alignment & BOTTOM) === BOTTOM) {
e.view.style.alignSelf = "flex-end";
}
else if ((e.layoutConfig.alignment & CENTER_Y) === CENTER_Y) {
e.view.style.alignSelf = "center";
}
});
}
}
@ -4479,6 +4536,13 @@ return __module.exports;
}
}
class NavigatorPlugin extends DoricPlugin {
push(args) {
}
pop() {
}
}
const bundles = new Map;
const plugins = new Map;
const nodes = new Map;
@ -4500,6 +4564,7 @@ return __module.exports;
registerPlugin('shader', ShaderPlugin);
registerPlugin('modal', ModalPlugin);
registerPlugin('storage', StoragePlugin);
registerPlugin('navigator', NavigatorPlugin);
registerViewNode('Stack', DoricStackNode);
registerViewNode('VLayout', DoricVLayoutNode);
registerViewNode('HLayout', DoricHLayoutNode);

2
doric-h5/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

7
doric-h5/src/shader/DoricHLayoutNode.ts
View File

@ -48,6 +48,13 @@ export class DoricHLayoutNode extends DoricGroupViewNode {
+ (e.layoutConfig?.margin?.right || 0))
e.view.style.marginTop = toPixelString(e.layoutConfig?.margin?.top || 0)
e.view.style.marginBottom = toPixelString(e.layoutConfig?.margin?.bottom || 0)
if ((e.layoutConfig.alignment & TOP) === TOP) {
e.view.style.alignSelf = "flex-start"
} else if ((e.layoutConfig.alignment & BOTTOM) === BOTTOM) {
e.view.style.alignSelf = "flex-end"
} else if ((e.layoutConfig.alignment & CENTER_Y) === CENTER_Y) {
e.view.style.alignSelf = "center"
}
})
}
}

20
doric-h5/src/shader/DoricStackNode.ts
View File

@ -10,7 +10,25 @@ export class DoricStackNode extends DoricGroupViewNode {
layout() {
super.layout()
this.configOffset()
Promise.resolve().then(_ => {
this.configSize()
this.configOffset()
})
}
configSize() {
if (this.layoutConfig.widthSpec === LayoutSpec.WRAP_CONTENT) {
const width = this.childNodes.reduce((prev, current) => {
return Math.max(prev, current.view.offsetWidth)
}, 0)
this.view.style.width = toPixelString(width)
}
if (this.layoutConfig.heightSpec === LayoutSpec.WRAP_CONTENT) {
const height = this.childNodes.reduce((prev, current) => {
return Math.max(prev, current.view.offsetHeight)
}, 0)
this.view.style.height = toPixelString(height)
}
}
configOffset() {

7
doric-h5/src/shader/DoricVLayoutNode.ts
View File

@ -48,6 +48,13 @@ export class DoricVLayoutNode extends DoricGroupViewNode {
+ (e.layoutConfig?.margin?.bottom || 0))
e.view.style.marginLeft = toPixelString(e.layoutConfig?.margin?.left || 0)
e.view.style.marginRight = toPixelString(e.layoutConfig?.margin?.right || 0)
if ((e.layoutConfig.alignment & LEFT) === LEFT) {
e.view.style.alignSelf = "flex-start"
} else if ((e.layoutConfig.alignment & RIGHT) === RIGHT) {
e.view.style.alignSelf = "flex-end"
} else if ((e.layoutConfig.alignment & CENTER_X) === CENTER_X) {
e.view.style.alignSelf = "center"
}
})
}
}

1
doric-h5/src/shader/DoricViewNode.ts
View File

@ -110,6 +110,7 @@ export abstract class DoricViewNode {
this.reusable = superNode.reusable
}
this.view = this.build()
this.view.style.overflow = "hidden"
}
abstract build(): HTMLElement