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

opt: reduce applyStyleRules resolution

Browse Source
This commit is contained in:
cha0s 2022-04-01 10:34:06 -05:00
parent f880d504ef
commit 8a92110505
2 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/entity/package.json
View File

@ -33,6 +33,7 @@
"@avocado/math": "^3.0.0", "@avocado/math": "^3.0.0",
"@avocado/resource": "^3.0.0", "@avocado/resource": "^3.0.0",
"@avocado/s13n": "^3.0.0", "@avocado/s13n": "^3.0.0",
"@avocado/timing": "^3.0.0",
"@avocado/traits": "^3.0.0", "@avocado/traits": "^3.0.0",
"@flecks/core": "^1.4.1", "@flecks/core": "^1.4.1",
"@flecks/socket": "^1.4.1", "@flecks/socket": "^1.4.1",

25
packages/entity/src/traits/dom-node.js
View File

@ -1,4 +1,5 @@
import {Vector} from '@avocado/math'; import {Vector} from '@avocado/math';
import {Ticker} from '@avocado/timing';
import {StateProperty, Trait} from '@avocado/traits'; import {StateProperty, Trait} from '@avocado/traits';
import {compose} from '@flecks/core'; import {compose} from '@flecks/core';
@ -16,7 +17,15 @@ const decorate = compose(
export default () => class DomNode extends decorate(Trait) { export default () => class DomNode extends decorate(Trait) {
$$scheduledRuleApplication = true; $$scheduledRuleApplication = false;
$$styleTicker;
constructor() {
super();
this.$$styleTicker = new Ticker(1 / 4);
this.$$styleTicker.on('tick', this.tickStyle, this);
}
static defaultParams() { static defaultParams() {
return { return {
@ -45,6 +54,7 @@ export default () => class DomNode extends decorate(Trait) {
super.destroy(); super.destroy();
super.parentNode?.removeChild(this.entity.node); super.parentNode?.removeChild(this.entity.node);
super.parentNode = null; super.parentNode = null;
this.$$styleTicker.off('tick', this.tickStyle);
} }
listeners() { listeners() {
@ -81,6 +91,7 @@ export default () => class DomNode extends decorate(Trait) {
parentNodeChanged: (oldParentNode, newParentNode) => { parentNodeChanged: (oldParentNode, newParentNode) => {
oldParentNode?.removeChild(this.entity.node); oldParentNode?.removeChild(this.entity.node);
newParentNode?.appendChild(this.entity.node); newParentNode?.appendChild(this.entity.node);
this.applyStyleRules();
}, },
}; };
@ -99,6 +110,7 @@ export default () => class DomNode extends decorate(Trait) {
`rotate(${360 * (rotation / (Math.PI * 2))}deg)`, `rotate(${360 * (rotation / (Math.PI * 2))}deg)`,
`scale(${visibleScale[0]}, ${visibleScale[1]})`, `scale(${visibleScale[0]}, ${visibleScale[1]})`,
].join(' '); ].join(' ');
this.entity.node.style.transition = 'transform 0.25s linear';
this.entity.node.style.opacity = opacity; this.entity.node.style.opacity = opacity;
} }
@ -109,12 +121,17 @@ export default () => class DomNode extends decorate(Trait) {
Object.entries(this.params.style).forEach(([key, value]) => { Object.entries(this.params.style).forEach(([key, value]) => {
this.entity.node.style[key] = value; this.entity.node.style[key] = value;
}); });
this.applyStyleRules();
} }
} }
tick() { tick(elapsed) {
if ('web' === process.env.FLECKS_CORE_BUILD_TARGET && this.$$scheduledRuleApplication) { if ('web' === process.env.FLECKS_CORE_BUILD_TARGET) {
this.$$styleTicker.tick(elapsed);
}
}
tickStyle() {
if (this.$$scheduledRuleApplication) {
this.$$scheduledRuleApplication = false; this.$$scheduledRuleApplication = false;
this.applyStyleRules(); this.applyStyleRules();
} }