Skip to content

Commit c55d0c7

Browse files
build: latest build
1 parent cb49470 commit c55d0c7

File tree

2 files changed

+30
-18
lines changed

2 files changed

+30
-18
lines changed

dist/aframe-dialog-popup-component.js

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -124,10 +124,6 @@ AFRAME.registerComponent('dialog-popup', {
124124
type: 'string',
125125
default: 'click'
126126
},
127-
defaultOpen: {
128-
type: 'bool',
129-
default: false
130-
},
131127
openIconImage: {
132128
type: 'asset',
133129
default: ''
@@ -189,13 +185,23 @@ AFRAME.registerComponent('dialog-popup', {
189185
*/
190186
init() {
191187
this.spawnEntities();
188+
this.cameraEl = document.querySelector('[camera]');
189+
},
190+
/**
191+
* If the component is open, ensure it always faces the camera.
192+
*/
193+
tick() {
194+
if (this.isOpen) {
195+
this.positionDialogPlane();
196+
}
192197
},
193198
/**
194199
* Handles opening and closing the dialog plane.
195200
*/
196201
toggleDialogOpen() {
197202
this.isOpen = !this.isOpen;
198203
if (this.dialogPlane) {
204+
this.positionDialogPlane();
199205
this.dialogPlane.setAttribute('visible', this.isOpen);
200206
}
201207
},
@@ -278,9 +284,10 @@ AFRAME.registerComponent('dialog-popup', {
278284
value: value.substring(0, wrapCount),
279285
color,
280286
font,
281-
width,
282287
wrapCount,
283-
baseline: 'top'
288+
width: width - padding * 2,
289+
baseline: 'top',
290+
anchor: 'left'
284291
});
285292

286293
let y = height / 2 - padding;
@@ -289,7 +296,7 @@ AFRAME.registerComponent('dialog-popup', {
289296
}
290297

291298
title.setAttribute('position', {
292-
x: padding,
299+
x: -(width / 2) + padding,
293300
y,
294301
z: 0.01
295302
});
@@ -316,10 +323,11 @@ AFRAME.registerComponent('dialog-popup', {
316323
body.setAttribute('text', {
317324
value,
318325
color,
319-
width,
320326
font,
321327
wrapCount,
322-
baseline: 'top'
328+
width: width - padding * 2,
329+
baseline: 'top',
330+
anchor: 'left'
323331
});
324332

325333
let y = height / 2 - padding * 3;
@@ -328,7 +336,7 @@ AFRAME.registerComponent('dialog-popup', {
328336
}
329337

330338
body.setAttribute('position', {
331-
x: padding,
339+
x: -(width / 2) + padding,
332340
y,
333341
z: 0.01
334342
});
@@ -376,13 +384,9 @@ AFRAME.registerComponent('dialog-popup', {
376384
} = this.data;
377385

378386
const plane = document.createElement('a-entity');
387+
plane.setAttribute('id', `${this.el.getAttribute('id')}--dialog-plane`);
379388

380-
// The dialog should always be a little closer to the camera than the icon.
381-
const position = Object.assign({}, this.el.getAttribute('position'));
382-
position.z += 1;
383-
384-
plane.setAttribute('visible', this.data.defaultOpen);
385-
plane.setAttribute('position', position);
389+
plane.setAttribute('visible', false);
386390
plane.setAttribute('geometry', {
387391
primitive: 'plane',
388392
width: width + padding,
@@ -400,14 +404,23 @@ AFRAME.registerComponent('dialog-popup', {
400404
plane.appendChild(this.generateBody());
401405

402406
this.dialogPlane = plane;
407+
403408
return plane;
404409
},
410+
positionDialogPlane() {
411+
if (this.dialogPlane) {
412+
const vector = this.dialogPlane.object3D.parent.worldToLocal(
413+
this.cameraEl.object3D.getWorldPosition()
414+
);
415+
this.dialogPlane.object3D.lookAt(vector);
416+
}
417+
},
405418
spawnEntities() {
406419
const wrapper = document.createElement('a-entity');
407420
wrapper.setAttribute('id', `${this.el.getAttribute('id')}--wrapper`);
408421
wrapper.appendChild(this.generateOpenIcon());
409422
wrapper.appendChild(this.generateDialogPlane());
410-
this.el.sceneEl.appendChild(wrapper);
423+
this.el.appendChild(wrapper);
411424
}
412425
});
413426

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-
(function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId]){return installedModules[moduleId].exports}var module=installedModules[moduleId]={i:moduleId,l:false,exports:{}};modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);module.l=true;return module.exports}__webpack_require__.m=modules;__webpack_require__.c=installedModules;__webpack_require__.i=function(value){return value};__webpack_require__.d=function(exports,name,getter){if(!__webpack_require__.o(exports,name)){Object.defineProperty(exports,name,{configurable:false,enumerable:true,get:getter})}};__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module["default"]}:function getModuleExports(){return module};__webpack_require__.d(getter,"a",getter);return getter};__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)};__webpack_require__.p="";return __webpack_require__(__webpack_require__.s=0)})([function(module,exports){if(typeof AFRAME==="undefined"){throw new Error("Component attempted to register before AFRAME was available.")}AFRAME.registerComponent("dialog-popup",{schema:{title:{type:"string",default:"New Dialog"},titleColor:{type:"string",default:"black"},titleFont:{type:"string",default:"mozillavr"},titleWrapCount:{type:"number",default:24},body:{type:"string",default:"This dialog has no body yet."},bodyColor:{type:"string",default:"black"},bodyFont:{type:"string",default:"mozillavr"},bodyWrapCount:{type:"number",default:30},openOn:{type:"string",default:"click"},defaultOpen:{type:"bool",default:false},openIconImage:{type:"asset",default:""},openIconRadius:{type:"number",default:.3},openIconColor:{type:"string",default:"white"},closeIconImage:{type:"asset",default:""},closeIconRadius:{type:"number",default:.3},closeIconColor:{type:"string",default:"white"},image:{type:"string",default:""},imageWidth:{type:"number",default:2},imageHeight:{type:"number",default:2},dialogBoxWidth:{type:"number",default:4},dialogBoxHeight:{type:"number",default:4},dialogBoxColor:{type:"string",default:"white"},dialogBoxPaddingInDegrees:{type:"number",default:.2}},multiple:true,dialogPlane:null,hasImage:false,init(){this.spawnEntities()},toggleDialogOpen(){this.isOpen=!this.isOpen;if(this.dialogPlane){this.dialogPlane.setAttribute("visible",this.isOpen)}},generateOpenIcon(){const{openIconRadius:radius,openIconColor:color,openIconImage:src,openOn:openOn}=this.data;const openIcon=document.createElement("a-entity");openIcon.setAttribute("id",`${this.el.getAttribute("id")}--open-icon`);openIcon.setAttribute("position",this.el.getAttribute("position"));openIcon.setAttribute("geometry",{primitive:"circle",radius:radius});openIcon.setAttribute("material",{color:color,src:src});openIcon.addEventListener(openOn,this.toggleDialogOpen.bind(this));return openIcon},generateCloseIcon(){const{closeIconRadius:radius,closeIconColor:color,closeIconImage:src,dialogBoxWidth:width,dialogBoxHeight:height,openOn:openOn}=this.data;const closeIcon=document.createElement("a-entity");closeIcon.setAttribute("id",`${this.el.getAttribute("id")}--close-icon`);closeIcon.setAttribute("position",{x:width/2,y:height/2,z:.01});closeIcon.setAttribute("geometry",{primitive:"circle",radius:radius});closeIcon.setAttribute("material",{color:color,src:src});closeIcon.addEventListener(openOn,this.toggleDialogOpen.bind(this));return closeIcon},generateTitle(){const{title:value,titleColor:color,titleFont:font,titleWrapCount:wrapCount,dialogBoxWidth:width,dialogBoxHeight:height,dialogBoxPaddingInDegrees:padding,imageHeight:imageHeight}=this.data;const title=document.createElement("a-entity");title.setAttribute("id",`${this.el.getAttribute("id")}--title`);title.setAttribute("text",{value:value.substring(0,wrapCount),color:color,font:font,width:width,wrapCount:wrapCount,baseline:"top"});let y=height/2-padding;if(this.hasImage){y-=imageHeight/2}title.setAttribute("position",{x:padding,y:y,z:.01});return title},generateBody(){const{body:value,bodyColor:color,bodyFont:font,bodyWrapCount:wrapCount,dialogBoxWidth:width,dialogBoxHeight:height,dialogBoxPaddingInDegrees:padding,imageHeight:imageHeight}=this.data;const body=document.createElement("a-entity");body.setAttribute("id",`${this.el.getAttribute("id")}--title`);body.setAttribute("text",{value:value,color:color,width:width,font:font,wrapCount:wrapCount,baseline:"top"});let y=height/2-padding*3;if(this.hasImage){y-=imageHeight/2}body.setAttribute("position",{x:padding,y:y,z:.01});return body},generateImage(){const{image:src,imageWidth:width,imageHeight:height,dialogBoxHeight:dialogBoxHeight}=this.data;if(!src.length){return null}const image=document.createElement("a-image");image.setAttribute("id",`${this.el.getAttribute("id")}--image`);image.setAttribute("src",src);image.setAttribute("width",width);image.setAttribute("height",height);image.setAttribute("position",{x:0,y:dialogBoxHeight/2,z:.01});this.hasImage=true;return image},generateDialogPlane(){const{dialogBoxWidth:width,dialogBoxHeight:height,dialogBoxPaddingInDegrees:padding,dialogBoxColor:color}=this.data;const plane=document.createElement("a-entity");const position=Object.assign({},this.el.getAttribute("position"));position.z+=1;plane.setAttribute("visible",this.data.defaultOpen);plane.setAttribute("position",position);plane.setAttribute("geometry",{primitive:"plane",width:width+padding,height:height+padding});const image=this.generateImage();if(image){plane.appendChild(this.generateImage())}plane.setAttribute("material",{color:color});plane.appendChild(this.generateCloseIcon());plane.appendChild(this.generateTitle());plane.appendChild(this.generateBody());this.dialogPlane=plane;return plane},spawnEntities(){const wrapper=document.createElement("a-entity");wrapper.setAttribute("id",`${this.el.getAttribute("id")}--wrapper`);wrapper.appendChild(this.generateOpenIcon());wrapper.appendChild(this.generateDialogPlane());this.el.sceneEl.appendChild(wrapper)}})}]);

0 commit comments

Comments
 (0)