cha0s/avocado
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: centering, color

Browse Source
This commit is contained in:
cha0s 2021-02-13 10:23:16 -06:00
parent 5499529c14
commit 84eaa069a8
1 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/entity/src/traits/dom-text.js
View File

@ -11,6 +11,7 @@ export default () => class DomText extends Trait {
static defaultParams() {
return {
centered: true,
textStyle: {},
};
}
@ -37,6 +38,10 @@ export default () => class DomText extends Trait {
this.onColorChanged();
},
traitAdded: () => {
this.onColorChanged();
},
};
}
@ -47,18 +52,21 @@ export default () => class DomText extends Trait {
Object.entries(this.params.textStyle).forEach(([key, value]) => {
this.#text.style[key] = value;
});
const {fontSize: fontSizeInPx = '16px'} = this.params.textStyle;
const fontSize = parseInt(fontSizeInPx, 10);
this.#text.style.position = 'relative';
this.#text.style.left = `-${(fontSize / 2) * text.length}px`;
this.#text.style.top = `-${(fontSize / 2)}px`;
this.onColorChanged();
if (this.params.centered) {
const {fontSize: fontSizeInPx = '16px'} = this.params.textStyle;
const fontSize = parseInt(fontSizeInPx, 10);
this.#text.style.left = `-${(fontSize / 2) * text.length}px`;
this.#text.style.top = `-${(fontSize / 2)}px`;
}
this.entity.node.appendChild(this.#text);
}
onColorChanged() {
const {red, green, blue} = this.entity;
this.#text.style.color = `rgb(${red}, ${green}, ${blue})`;
if (this.entity.is('Colored')) {
const {red, green, blue} = this.entity;
this.#text.style.color = `rgb(${red}, ${green}, ${blue})`;
}
}
};