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

text alignment

Browse Source
This commit is contained in:
pengfei.zhou 2019-12-21 13:28:51 +08:00
parent 0beb8b8633
commit db4990696c
4 changed files with 58 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
dist/index.js vendored
View File

@ -4185,12 +4185,18 @@ return __module.exports;
class DoricTextNode extends DoricViewNode { class DoricTextNode extends DoricViewNode {
build() { build() {
return document.createElement('p'); const div = document.createElement('div');
div.style.display = "flex";
this.textElement = document.createElement('span');
div.appendChild(this.textElement);
div.style.justifyContent = "center";
div.style.alignItems = "center";
return div;
} }
blendProps(v, propName, prop) { blendProps(v, propName, prop) {
switch (propName) { switch (propName) {
case 'text': case 'text':
v.innerText = prop; this.textElement.innerText = prop;
break; break;
case 'textSize': case 'textSize':
v.style.fontSize = toPixelString(prop); v.style.fontSize = toPixelString(prop);
@ -4198,6 +4204,27 @@ return __module.exports;
case 'textColor': case 'textColor':
v.style.color = toRGBAString(prop); v.style.color = toRGBAString(prop);
break; break;
case 'textAlignment':
const gravity = prop;
if ((gravity & LEFT) === LEFT) {
v.style.justifyContent = "flex-start";
}
else if ((gravity & RIGHT) === RIGHT) {
v.style.justifyContent = "flex-end";
}
else if ((gravity & CENTER_X) === CENTER_X) {
v.style.justifyContent = "center";
}
if ((gravity & TOP) === TOP) {
v.style.alignItems = "flex-start";
}
else if ((gravity & BOTTOM) === BOTTOM) {
v.style.alignItems = "flex-end";
}
else if ((gravity & CENTER_Y) === CENTER_Y) {
v.style.alignItems = "center";
}
break;
default: default:
super.blendProps(v, propName, prop); super.blendProps(v, propName, prop);
break; break;

2
dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

31
src/shader/DoricTextNode.ts
View File

@ -1,15 +1,21 @@
import { DoricViewNode, FrameSize, toPixelString, toRGBAString } from "./DoricViewNode"; import { DoricViewNode, LEFT, RIGHT, CENTER_X, CENTER_Y, TOP, BOTTOM, toPixelString, toRGBAString } from "./DoricViewNode";
export class DoricTextNode extends DoricViewNode { export class DoricTextNode extends DoricViewNode {
textElement!: HTMLElement
build(): HTMLElement { build(): HTMLElement {
return document.createElement('p') const div = document.createElement('div')
div.style.display = "flex"
this.textElement = document.createElement('span')
div.appendChild(this.textElement)
div.style.justifyContent = "center"
div.style.alignItems = "center"
return div
} }
blendProps(v: HTMLParagraphElement, propName: string, prop: any) { blendProps(v: HTMLParagraphElement, propName: string, prop: any) {
switch (propName) { switch (propName) {
case 'text': case 'text':
v.innerText = prop this.textElement.innerText = prop
break break
case 'textSize': case 'textSize':
v.style.fontSize = toPixelString(prop) v.style.fontSize = toPixelString(prop)
@ -17,6 +23,23 @@ export class DoricTextNode extends DoricViewNode {
case 'textColor': case 'textColor':
v.style.color = toRGBAString(prop) v.style.color = toRGBAString(prop)
break break
case 'textAlignment':
const gravity: number = prop
if ((gravity & LEFT) === LEFT) {
v.style.justifyContent = "flex-start"
} else if ((gravity & RIGHT) === RIGHT) {
v.style.justifyContent = "flex-end"
} else if ((gravity & CENTER_X) === CENTER_X) {
v.style.justifyContent = "center"
}
if ((gravity & TOP) === TOP) {
v.style.alignItems = "flex-start"
} else if ((gravity & BOTTOM) === BOTTOM) {
v.style.alignItems = "flex-end"
} else if ((gravity & CENTER_Y) === CENTER_Y) {
v.style.alignItems = "center"
}
break
default: default:
super.blendProps(v, propName, prop) super.blendProps(v, propName, prop)
break break

2
src/shader/DoricVLayoutNode.ts
View File

@ -1,4 +1,4 @@
import { DoricGroupViewNode, LayoutSpec, FrameSize, LEFT, RIGHT, CENTER_X, CENTER_Y, TOP, BOTTOM, toPixelString } from "./DoricViewNode"; import { DoricGroupViewNode, LEFT, RIGHT, CENTER_X, CENTER_Y, TOP, BOTTOM, toPixelString } from "./DoricViewNode";
export class DoricVLayoutNode extends DoricGroupViewNode { export class DoricVLayoutNode extends DoricGroupViewNode {
space = 0 space = 0