Skip to content

Commit

Permalink
Merge pull request #22 from rdub80/release/v0.2.1
Browse files Browse the repository at this point in the history 
Release/v0.2.1
  • Loading branch information
@rdub80
rdub80 committed Sep 12, 2018
2 parents eb651dd + f4a88c6 commit eb4549f
Show file tree
Hide file tree
Showing 7 changed files with 341 additions and 245 deletions.
198 changes: 115 additions & 83 deletions dist/aframe-gui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1328,36 +1328,50 @@ __webpack_require__(0);
/* //trying to figure out global styles that customize gui items
var styles = StyleSheet.create({
fontFamily: {
type: 'string',
type: 'string',
default: 'Helvetica'
},
fontColor: {
type: 'string',
type: 'string',
default: key_offwhite
},
borderColor: {
type: 'string',
type: 'string',
default: key_offwhite
},
backgroundColor: {
type: 'string',
type: 'string',
default: key_grey
},
hoverColor: {
type: 'string',
type: 'string',
default: key_grey_dark
},
activeColor: {
type: 'string',
type: 'string',
default: key_orange
},
handleColor: {
type: 'string',
type: 'string',
default: key_offwhite
},
},
});
*/

var onAppendChildToContainer = function onAppendChildToContainer(elem, f) {
// console.log("in onAppend, elem: "+elem);
var observer = new MutationObserver(function (mutations, me) {
//console.log("in mutationObserver, me: "+me);
mutations.forEach(function (m) {
console.log(m);
if (m.addedNodes.length) {
f(m.target, m.addedNodes);
}
});
});
observer.observe(elem, { childList: true });
};

AFRAME.registerComponent('gui-flex-container', {
schema: {
flexDirection: { type: 'string', default: 'row' },
Expand Down Expand Up @@ -1392,8 +1406,8 @@ AFRAME.registerComponent('gui-flex-container', {
this.el.setAttribute('material', 'shader: flat; transparent: true; opacity: ' + this.data.opacity + '; color: ' + this.data.panelColor + '; side:front;');

this.children = this.el.getChildEntities();
console.log("childElements: " + this.children);
console.log("num child Elements: " + this.children.length);
//console.log("childElements: "+this.children);
//console.log("num child Elements: "+this.children.length);

// coordinate system is 0, 0 in the top left
var cursorX = 0;
Expand Down Expand Up @@ -1431,7 +1445,9 @@ AFRAME.registerComponent('gui-flex-container', {
var columnHeight = 0;
for (var i = 0; i < this.children.length; i++) {
var childElement = this.children[i];
//console.log("childElement: "+childElement);
var childGuiItem = childElement.getAttribute("gui-item");
//console.log("childGuiItem: "+childGuiItem);
columnHeight = columnHeight + childGuiItem.margin.x + childGuiItem.height + childGuiItem.margin.z;
}
if (this.data.justifyContent == 'center') {
Expand All @@ -1449,7 +1465,7 @@ AFRAME.registerComponent('gui-flex-container', {
cursorX = 0; // baseline is right
}
}
console.log('initial cursor position for ' + this.el.getAttribute("id") + ': ' + cursorX + ' ' + cursorY + ' 0.01');
//console.log(`initial cursor position for ${this.el.getAttribute("id")}: ${cursorX} ${cursorY} 0.01`)

// not that cursor positions are determined, loop through and lay out items
var wrapOffsetX = 0; // not used yet since wrapping isn't supported
Expand Down Expand Up @@ -1485,7 +1501,7 @@ AFRAME.registerComponent('gui-flex-container', {
childPositionY = containerGuiItem.height * 0.5 - cursorY - -childGuiItem.margin.x - childGuiItem.height * 0.5;
cursorY = cursorY + childGuiItem.margin.x + childGuiItem.height + childGuiItem.margin.z;
}
console.log('child element position for ' + childElement.id + ': ' + childPositionX + ' ' + childPositionY + ' ' + childPositionZ);
//console.log(`child element position for ${childElement.id}: ${childPositionX} ${childPositionY} ${childPositionZ}`)
childElement.setAttribute('position', childPositionX + ' ' + childPositionY + ' ' + childPositionZ);
childElement.setAttribute('geometry', 'primitive: plane; height: ' + childGuiItem.height + '; width: ' + childGuiItem.width + ';');
var childFlexContainer = childElement.components['gui-flex-container'];
Expand All @@ -1494,6 +1510,19 @@ AFRAME.registerComponent('gui-flex-container', {
}
}
}

onAppendChildToContainer(this.el, function (containerElement, addedChildren) {
//console.log('****** containerElement: ' + containerElement);
//console.log('****** addedChildren: ' + addedChildren.length);
// containerElement.components['gui-flex-container'].init();
var addedChild = addedChildren[0];
addedChildren[0].addEventListener("loaded", function (e) {
//console.log('in appended element loaded handler: '+e);
//console.log('addedChild: '+addedChild);
//console.log('****** containerElement: ' + containerElement);
containerElement.components['gui-flex-container'].init();
});
});
},
update: function update() {},
tick: function tick() {},
Expand All @@ -1515,6 +1544,7 @@ AFRAME.registerComponent('gui-flex-container', {
this.el.parentNode.insertBefore(panelBackground, this.el);
}
}

});

AFRAME.registerPrimitive('a-gui-flex-container', {
Expand Down Expand Up @@ -2080,81 +2110,83 @@ AFRAME.registerComponent('gui-item', {


AFRAME.registerComponent('gui-label', {
schema: {
text: { type: 'string', default: 'label text' },
labelFor: { type: 'selector', default: null },

fontFamily: { type: 'string', default: 'Helvetica' },
fontColor: { type: 'string', default: key_grey_dark },
backgroundColor: { type: 'string', default: key_offwhite }
},
init: function init() {

var data = this.data;
var el = this.el;
var guiItem = el.getAttribute("gui-item");
var multiplier = 350;
var canvasWidth = guiItem.width * multiplier;
var canvasHeight = guiItem.height * multiplier;

var canvasContainer = document.createElement('div');
canvasContainer.setAttribute('class', 'visuallyhidden');
document.body.appendChild(canvasContainer);

var canvas = document.createElement("canvas");
this.canvas = canvas;
canvas.className = "visuallyhidden";
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.id = getUniqueId('canvas');
canvasContainer.appendChild(canvas);

var ctx = this.ctx = canvas.getContext('2d');

el.setAttribute('geometry', 'primitive: plane; height: ' + guiItem.height + '; width: ' + guiItem.width + ';');
el.setAttribute('material', 'shader: flat; side:front; color:' + data.backgroundColor + ';');

this.oldText = data.text;

drawText(ctx, canvas, data.text, guiItem.fontSize + ' ' + data.fontFamily, data.fontColor, 1);

var textEntity = document.createElement("a-entity");
textEntity.setAttribute('geometry', 'primitive: plane; width: ' + guiItem.width / 1.05 + '; height: ' + guiItem.height / 1.05 + ';');
textEntity.setAttribute('material', 'shader: flat; src: #' + canvas.id + '; transparent: true; opacity: 1; side:front;');
textEntity.setAttribute('position', '0 0 0.001');
el.appendChild(textEntity);

////WAI ARIA Support

if (data.labelFor) {
// el.setAttribute('role', 'button');
}
},

tick: function tick() {
if (this.data.text !== this.oldText) {
drawText(this.ctx, this.canvas, this.data.text, '100px ' + this.data.fontFamily, this.data.fontColor, 1);
}
schema: {
text: { type: 'string', default: 'label text' },
labelFor: { type: 'selector', default: null },

fontFamily: { type: 'string', default: 'Helvetica' },
fontColor: { type: 'string', default: key_grey_dark },
backgroundColor: { type: 'string', default: key_offwhite }
},
init: function init() {
var data = this.data;
var el = this.el;
var guiItem = el.getAttribute("gui-item");
var multiplier = 350;
var canvasWidth = guiItem.width * multiplier;
var canvasHeight = guiItem.height * multiplier;

var canvasContainer = document.createElement('div');
canvasContainer.setAttribute('class', 'visuallyhidden');
document.body.appendChild(canvasContainer);

var canvas = document.createElement("canvas");
this.canvas = canvas;
canvas.className = "visuallyhidden";
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.id = getUniqueId('canvas');
canvasContainer.appendChild(canvas);

var ctx = this.ctx = canvas.getContext('2d');

el.setAttribute('geometry', 'primitive: plane; height: ' + guiItem.height + '; width: ' + guiItem.width + ';');
el.setAttribute('material', 'shader: flat; side:front; color:' + data.backgroundColor + ';');

this.oldText = data.text;

drawText(ctx, canvas, data.text, guiItem.fontSize + ' ' + data.fontFamily, data.fontColor, 1);

var textEntity = document.createElement("a-entity");
textEntity.setAttribute('geometry', 'primitive: plane; width: ' + guiItem.width / 1.05 + '; height: ' + guiItem.height / 1.05 + ';');
textEntity.setAttribute('material', 'shader: flat; src: #' + canvas.id + '; transparent: true; opacity: 1; side:front;');
textEntity.setAttribute('position', '0 0 0.001');
el.appendChild(textEntity);

////WAI ARIA Support

if (data.labelFor) {
// el.setAttribute('role', 'button');
}
},
update: function update(oldData) {
// console.log("In label update, toggle");
this.init();
},
tick: function tick() {
if (this.data.text !== this.oldText) {
drawText(this.ctx, this.canvas, this.data.text, '100px ' + this.data.fontFamily, this.data.fontColor, 1);
}
}
});

AFRAME.registerPrimitive('a-gui-label', {
defaultComponents: {
'gui-item': { type: 'label' },
'gui-label': {}
},
mappings: {
'width': 'gui-item.width',
'height': 'gui-item.height',
'margin': 'gui-item.margin',
'font-size': 'gui-item.fontSize',
'on': 'gui-button.on',
'value': 'gui-label.text',
'label-for': 'gui-label.labelFor',
'font-color': 'gui-label.fontColor',
'font-family': 'gui-label.fontFamily',
'background-color': 'gui-label.backgroundColor'
}
defaultComponents: {
'gui-item': { type: 'label' },
'gui-label': {}
},
mappings: {
'width': 'gui-item.width',
'height': 'gui-item.height',
'margin': 'gui-item.margin',
'font-size': 'gui-item.fontSize',
'on': 'gui-button.on',
'value': 'gui-label.text',
'label-for': 'gui-label.labelFor',
'font-color': 'gui-label.fontColor',
'font-family': 'gui-label.fontFamily',
'background-color': 'gui-label.backgroundColor'
}
});

/***/ }),
Expand Down
2 changes: 1 addition & 1 deletion dist/aframe-gui.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit eb4549f

Please sign in to comment.