fix: web stack alignment margin

This commit is contained in:
wangxiangyuan
2023-09-01 14:27:56 +08:00
committed by osborn
parent d70cc9c28e
commit e1c7d57cbb
4 changed files with 34 additions and 10 deletions

View File

@@ -46,16 +46,24 @@ export class DoricStackNode extends DoricGroupViewNode {
if ((gravity & LEFT) === LEFT) {
left = toPixelString(0)
} else if ((gravity & RIGHT) === RIGHT) {
left = toPixelString(this.view.offsetWidth - e.view.offsetWidth)
//ignore marginLeft
const childMarginRight = pixelString2Number(window.getComputedStyle(e.view).marginRight)
left = toPixelString(this.view.offsetWidth - e.view.offsetWidth - childMarginRight)
} else if ((gravity & CENTER_X) === CENTER_X) {
left = toPixelString(this.view.offsetWidth / 2 - e.view.offsetWidth / 2)
const childMarginLeft = pixelString2Number(window.getComputedStyle(e.view).marginLeft)
const childMarginRight = pixelString2Number(window.getComputedStyle(e.view).marginRight)
left = toPixelString(this.view.offsetWidth / 2 - e.view.offsetWidth / 2 + childMarginLeft - childMarginRight)
}
if ((gravity & TOP) === TOP) {
top = toPixelString(0)
} else if ((gravity & BOTTOM) === BOTTOM) {
top = toPixelString(this.view.offsetHeight - e.view.offsetHeight)
//ignore marginTop
const childMarginTop = pixelString2Number(window.getComputedStyle(e.view).marginBottom)
top = toPixelString(this.view.offsetHeight - e.view.offsetHeight - childMarginTop)
} else if ((gravity & CENTER_Y) === CENTER_Y) {
top = toPixelString(this.view.offsetHeight / 2 - e.view.offsetHeight / 2)
const childMarginTop = pixelString2Number(window.getComputedStyle(e.view).marginTop)
const childMarginBottom = pixelString2Number(window.getComputedStyle(e.view).marginBottom)
top = toPixelString(this.view.offsetHeight / 2 - e.view.offsetHeight / 2 + childMarginTop - childMarginBottom)
}
e.applyCSSStyle({
position,

View File

@@ -7,6 +7,7 @@ export class DoricTextNode extends DoricViewNode {
build(): HTMLElement {
const div = document.createElement('div')
div.style.display = "flex"
div.style.overflow = "hidden"
this.textElement = document.createElement('span')
div.appendChild(this.textElement)
div.style.justifyContent = "center"