Skip to content

Commit

Permalink
Revert "style system separation, clean up systems back to ECS (#367)"
Browse files Browse the repository at this point in the history 
This reverts commit f3e50ac.
  • Loading branch information
@michaelthatsit
michaelthatsit authored Feb 10, 2024
1 parent a0f0e6d commit 7a97aea
Show file tree
Hide file tree
Showing 15 changed files with 215 additions and 303 deletions.
2 changes: 1 addition & 1 deletion dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body >
<mr-app>
<mr-app debug="true">
<mr-panel class="layout">
<mr-div id="navbar">
<mr-a href="https://volumetrics.io" target="_blank" class="company">
Expand Down
51 changes: 20 additions & 31 deletions dist/mr.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion samples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body >
<mr-app>
<mr-app debug="true">
<mr-panel class="layout">
<mr-div id="navbar">
<mr-a href="https://volumetrics.io" target="_blank" class="company">
Expand Down
7 changes: 2 additions & 5 deletions src/core/MRApp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,12 @@ import { MRSystem } from 'mrjs/core/MRSystem';
import { AnimationSystem } from 'mrjs/core/componentSystems/AnimationSystem';
import { ClippingSystem } from 'mrjs/core/componentSystems/ClippingSystem';
import { ControlSystem } from 'mrjs/core/componentSystems/ControlSystem';
import { GeometryStyleSystem } from 'mrjs/core/componentSystems/GeometryStyleSystem';
import { LayoutSystem } from 'mrjs/core/componentSystems/LayoutSystem';
import { MaskingSystem } from 'mrjs/core/componentSystems/MaskingSystem';
import { MaterialStyleSystem } from 'mrjs/core/componentSystems/MaterialStyleSystem';
import { PhysicsSystem } from 'mrjs/core/componentSystems/PhysicsSystem';
import { AnchorSystem } from 'mrjs/core/componentSystems/AnchorSystem';
import { SkyBoxSystem } from 'mrjs/core/componentSystems/SkyBoxSystem';
import { StyleSystem } from 'mrjs/core/componentSystems/StyleSystem';
import { TextSystem } from 'mrjs/core/componentSystems/TextSystem';
import { AudioSystem } from 'mrjs/core/componentSystems/AudioSystem';
import { PanelSystem } from 'mrjs/core/componentSystems/PanelSystem';
Expand Down Expand Up @@ -98,12 +97,10 @@ export class MRApp extends MRElement {
this.observer = new MutationObserver(this.mutationCallback);
this.observer.observe(this, { attributes: true, childList: true });

// order matters for all the below system creation items
this.panelSystem = new PanelSystem();
this.layoutSystem = new LayoutSystem();
this.textSystem = new TextSystem();
this.geometryStyleSystem = new GeometryStyleSystem();
this.materialStyleSystem = new MaterialStyleSystem();
this.styleSystem = new StyleSystem();
this.audioSystem = new AudioSystem();

// initialize built in Systems
Expand Down
84 changes: 82 additions & 2 deletions src/core/MRDivEntity.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,14 +110,94 @@ export class MRDivEntity extends MREntity {
this.background.geometry = mrjsUtils.geometry.UIPlane(this.width, this.height, [0], 18);
}

// TODO - can we move this to utils/Css.js ? ---- for border radius (which returns percentages instead of pixel values)
// leave here for now - to be moved after michael change
/**
* @function
* @description Converts the dom string to a 3D numerical value
* @param {string} val - the dom css information includes items of the form `XXXpx`, `XXX%`, etc
* @returns {number} - the 3D numerical represenation of the dom css value
*/
domToThree(val) {
if (typeof val === 'string') {
const valuepair = val.split(/(\d+(?:\.\d+)?)/).filter(Boolean);
if (valuepair.length > 1) {
switch (valuepair[1]) {
case 'px':
if (mrjsUtils.xr.isPresenting) {
return (val.split('px')[0] / global.appWidth) * mrjsUtils.app.scale;
}
return (val.split('px')[0] / global.appWidth) * global.viewPortWidth;
case '%':
if (mrjsUtils.xr.isPresenting) {
return (parseFloat(val) / 100) * mrjsUtils.app.scale;
}
return (parseFloat(val) / 100) * global.viewPortWidth;
default:
return val;
}
}
}
return val;
}

/**
*
*/
updateStyle() {
super.updateStyle();

// all div entities needs these steps
this.setBorder();
this.setBackground();
}

/**
* @function
* @description Calculates the border radius of the img based on the img tag in the shadow root
* @returns {number} - the resolved height
*/
get borderRadii() {
return this.compStyle.borderRadius.split(' ').map((r) => mrjsUtils.css.domToThree(r));
const borderRadii = this.compStyle.borderRadius.split(' ').map((r) => mrjsUtils.css.domToThree(r));
return this.compStyle.borderRadius.split(' ').map((r) => this.domToThree(r));
const borderRadii = this.compStyle.borderRadius.split(' ').map((r) => this.domToThree(r));
}

/**
* @function
* @description Sets the border of the UI based on compStyle and inputted css elements.
*/
setBorder() {
this.background.geometry = mrjsUtils.geometry.UIPlane(this.width, this.height, this.borderRadii, 18);
}

/**
* @function
* @description Sets the background based on compStyle and inputted css elements.
*/
setBackground() {
const color = this.compStyle.backgroundColor;
if (color.includes('rgba')) {
const rgba = color
.substring(5, color.length - 1)
.split(',')
.map((part) => parseFloat(part.trim()));
this.background.material.color.setStyle(`rgb(${rgba[0]}, ${rgba[1]}, ${rgba[2]})`);
if (rgba[3] == 0) {
this.background.visible = false;
} else {
this.background.material.transparent = true;
this.background.material.opacity = rgba[3];
this.background.visible = true;
}
} else {
this.background.material.color.setStyle(color);
this.background.visible = true;
}

if (this.compStyle.opacity < 1) {
this.background.material.opacity = this.compStyle.opacity;
}
this.background.material.needsUpdate = true;
}
}

Expand Down
104 changes: 3 additions & 101 deletions src/core/MREntity.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,50 +109,6 @@ export class MREntity extends MRElement {
return this.size.y;
}

// undefined == always update, once set to true/false trigger, then updates based on that every frame
// setting back to undefined sets to always update.
_needsGeometryUpdate = false;

/**
* @function
* @description Checks if the system is setup to always run instead of being in a state that allows for toggling on and off.
* Useful for readability and to not need to check against undefined often.
* @returns {boolean} true if the internal _needsSystemUpdate is set to 'undefined', false otherwise.
*/
get alwaysNeedsGeometryUpdate() {
return this._needsGeometryUpdate === undefined;
}

/**
* @function
* @description Sets the system ito always run (true) or to be in a state that allows for toggling on and off (false).
* Useful for readability and to not need to check against undefined often.
*/
set alwaysNeedsGeometryUpdate(bool) {
this._needsGeometryUpdate = bool ? undefined : false;
}

/**
* @function
* @description Getter to checks if we need the StyleSystem to run on this entity during the current iteration.
* Default implementation returns true if the needsSystemUpdate flag has been set to true or is in the alwaysNeedsSystemUpdate state.
* Allows subclasses to override with their own implementation.
* @returns {boolean} true if the system is in a state where this system is needed to update, false otherwise
*/
get needsGeometryUpdate() {
return this.alwaysNeedsGeometryUpdate || this._needsGeometryUpdate;
}

/**
* @function
* @description Set the needsStyleUpdate parameter.
* undefined - means the StyleSystem will update this entity's style every time the application loops.
* true/false - means the StyleSystem will update this entity's style only running one iteration when set to true and then reset back to false waiting for the next trigger.
*/
set needsGeometryUpdate(bool) {
this._needsGeometryUpdate = bool;
}

// undefined == always update, once set to true/false trigger, then updates based on that every frame
// setting back to undefined sets to always update.
_needsStyleUpdate = false;
Expand All @@ -167,15 +123,6 @@ export class MREntity extends MRElement {
return this._needsStyleUpdate === undefined;
}

/**
* @function
* @description Sets the system ito always run (true) or to be in a state that allows for toggling on and off (false).
* Useful for readability and to not need to check against undefined often.
*/
set alwaysNeedsStyleUpdate(bool) {
this._needsStyleUpdate = bool ? undefined : false;
}

/**
* @function
* @description Getter to checks if we need the StyleSystem to run on this entity during the current iteration.
Expand All @@ -198,16 +145,10 @@ export class MREntity extends MRElement {
}

/**
* @function
* @description Inside the engine's ECS these arent filled in, theyre directly in the system themselves - but they can be overwritten by others when they create new entities
*/
updateMaterialStyle() {}

/**
* @function
* @description Inside the engine's ECS these arent filled in, theyre directly in the system themselves - but they can be overwritten by others when they create new entities
* @function
* @description
*/
updateGeometryStyle() {}
updateStyle() {}

/**
* @function
Expand Down Expand Up @@ -266,9 +207,6 @@ export class MREntity extends MRElement {

document.addEventListener('DOMContentLoaded', (event) => {
this.loadAttributes();
if (!this.alwaysNeedsGeometryUpdate) {
this.needsGeometryUpdate = true;
}
if (!this.alwaysNeedsStyleUpdate) {
this.needsStyleUpdate = true;
}
Expand All @@ -277,101 +215,68 @@ export class MREntity extends MRElement {

document.addEventListener('engine-started', (event) => {
this.dispatchEvent(new CustomEvent('new-entity', { bubbles: true }));
if (!this.alwaysNeedsGeometryUpdate) {
this.needsGeometryUpdate = true;
}
if (!this.alwaysNeedsStyleUpdate) {
this.needsStyleUpdate = true;
}
});

MOUSE_EVENTS.forEach((eventType) => {
this.addEventListener(eventType, (event) => {
if (!this.alwaysNeedsGeometryUpdate) {
this.needsGeometryUpdate = true;
}
if (!this.alwaysNeedsStyleUpdate) {
this.needsStyleUpdate = true;
}
});
});

this.addEventListener('touch-start', (event) => {
if (!this.alwaysNeedsGeometryUpdate) {
this.needsGeometryUpdate = true;
}
if (!this.alwaysNeedsStyleUpdate) {
this.needsStyleUpdate = true;
}
this.onTouch(event);
});
this.addEventListener('touch', (event) => {
if (!this.alwaysNeedsGeometryUpdate) {
this.needsGeometryUpdate = true;
}
if (!this.alwaysNeedsStyleUpdate) {
this.needsStyleUpdate = true;
}
this.onTouch(event);
});
this.addEventListener('touch-end', (event) => {
if (!this.alwaysNeedsGeometryUpdate) {
this.needsGeometryUpdate = true;
}
if (!this.alwaysNeedsStyleUpdate) {
this.needsStyleUpdate = true;
}
this.onTouch(event);
});
this.addEventListener('hover-start', (event) => {
if (!this.alwaysNeedsGeometryUpdate) {
this.needsGeometryUpdate = true;
}
if (!this.alwaysNeedsStyleUpdate) {
this.needsStyleUpdate = true;
}
this.onHover(event);
});
this.addEventListener('hover-end', (event) => {
if (!this.alwaysNeedsGeometryUpdate) {
this.needsGeometryUpdate = true;
}
if (!this.alwaysNeedsStyleUpdate) {
this.needsStyleUpdate = true;
}
this.onHover(event);
});

this.addEventListener('child-updated', (event) => {
if (!this.alwaysNeedsGeometryUpdate) {
this.needsGeometryUpdate = true;
}
if (!this.alwaysNeedsStyleUpdate) {
this.needsStyleUpdate = true;
}
});

window.addEventListener('resize', (event) => {
if (!this.alwaysNeedsGeometryUpdate) {
this.needsGeometryUpdate = true;
}
if (!this.alwaysNeedsStyleUpdate) {
this.needsStyleUpdate = true;
}
});

document.addEventListener('enterXR', (event) => {
if (!this.alwaysNeedsGeometryUpdate) {
this.needsGeometryUpdate = true;
}
if (!this.alwaysNeedsStyleUpdate) {
this.needsStyleUpdate = true;
}
});
document.addEventListener('exitXR', (event) => {
if (!this.alwaysNeedsGeometryUpdate) {
this.needsGeometryUpdate = true;
}
if (!this.alwaysNeedsStyleUpdate) {
this.needsStyleUpdate = true;
}
Expand Down Expand Up @@ -458,9 +363,6 @@ export class MREntity extends MRElement {

switch (mutation.type) {
case 'childList':
if (!this.alwaysNeedsGeometryUpdate) {
this.needsGeometryUpdate = true;
}
if (!this.alwaysNeedsStyleUpdate) {
this.needsStyleUpdate = true;
}
Expand Down
9 changes: 0 additions & 9 deletions src/core/MRTextEntity.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,18 +28,12 @@ export class MRTextEntity extends MRDivEntity {
// This event listener is added so anytime a panel changes (resize, etc), the text changes
// accordingly
document.addEventListener('panel-mutated', () => {
if (!this.alwaysNeedsGeometryUpdate) {
this.needsGeometryUpdate = true;
}
if (!this.alwaysNeedsStyleUpdate) {
this.needsStyleUpdate = true;
}
});

document.addEventListener('font-loaded', () => {
if (!this.alwaysNeedsGeometryUpdate) {
this.needsGeometryUpdate = true;
}
if (!this.alwaysNeedsStyleUpdate) {
this.needsStyleUpdate = true;
}
Expand All @@ -53,9 +47,6 @@ export class MRTextEntity extends MRDivEntity {
connected() {
const text = this.textContent.trim();
this.textObj.text = text.length > 0 ? text : ' ';
if (!this.alwaysNeedsGeometryUpdate) {
this.needsGeometryUpdate = true;
}
if (!this.alwaysNeedsStyleUpdate) {
this.needsStyleUpdate = true;
}
Expand Down
6 changes: 1 addition & 5 deletions src/core/componentSystems/GeometryStyleSystem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,7 @@ export class GeometryStyleSystem extends MRSystem {
}

setScale(entity) {

Check failure on line 66 in src/core/componentSystems/GeometryStyleSystem.js

View workflow job for this annotation

GitHub Actions / check-format 

Missing JSDoc comment
entity.object3D.scale.setScalar(
entity.compStyle.scale != 'none'
? parseFloat(entity.compStyle.scale) * mrjsUtils.app.scale
: 1
);
entity.object3D.scale.setScalar(entity.compStyle.scale != 'none' ? parseFloat(entity.compStyle.scale) * mrjsUtils.app.scale : 1);
}

/**
Expand Down
Loading

0 comments on commit 7a97aea

Please sign in to comment.