diff --git a/src/components/screentock.js b/src/components/screentock.js index a5b516375..7abfea0eb 100644 --- a/src/components/screentock.js +++ b/src/components/screentock.js @@ -14,32 +14,6 @@ // AFRAME.scenes[0].setAttribute('screentock', 'takeScreenshot', true); // } -takeScreenshotNow = function (filename, type, imgElement) { - var renderer = AFRAME.scenes[0].renderer; - - function downloadImageDataURL (filename, dataURL) { - var element = document.createElement('a'); - var url = dataURL.replace(/^data:image\/[^;]/, 'data:application/octet-stream'); - element.setAttribute('href', url); - element.setAttribute('download', filename); - element.style.display = 'none'; - document.body.appendChild(element); - element.click(); - document.body.removeChild(element); - } - var saveFilename = filename + '.' + type; - - if (type == 'img') { - imgElement.src = renderer.domElement.toDataURL(); - return; - } - if (type == 'png') { - downloadImageDataURL(saveFilename, renderer.domElement.toDataURL('image/png')); - } else { - downloadImageDataURL(saveFilename, renderer.domElement.toDataURL('image/jpeg', 0.95)); - } -}; - AFRAME.registerComponent('screentock', { schema: { takeScreenshot: { type: 'boolean', default: false }, @@ -47,11 +21,52 @@ AFRAME.registerComponent('screentock', { type: { type: 'string', default: 'jpg' }, // png, jpg, img imgElementSelector: { type: 'selector' } }, - tock: function () { + takeScreenshotNow: function (filename, type, imgElement) { + const inspector = AFRAME.INSPECTOR; + const renderer = AFRAME.scenes[0].renderer; + + // hide helpers + toggleHelpers(false); + + function downloadImage (filename, dataURL) { + downloadImageDataURL(filename, dataURL); + // show helpers + toggleHelpers(true); + } + + function toggleHelpers(show) { + if (inspector && inspector.opened) inspector.sceneHelpers.visible = show; + } + + function downloadImageDataURL (filename, dataURL) { + const element = document.createElement('a'); + const url = dataURL.replace(/^data:image\/[^;]/, 'data:application/octet-stream'); + element.setAttribute('href', url); + element.setAttribute('download', filename); + element.style.display = 'none'; + document.body.appendChild(element); + element.click(); + document.body.removeChild(element); + } + const saveFilename = filename + '.' + type; + + renderer.render(AFRAME.scenes[0].object3D, AFRAME.scenes[0].camera); + + if (type == 'img') { + imgElement.src = renderer.domElement.toDataURL(); + return; + } + if (type == 'png') { + downloadImage(saveFilename, renderer.domElement.toDataURL('image/png')); + } else { + downloadImage(saveFilename, renderer.domElement.toDataURL('image/jpeg', 0.95)); + } + }, + update: function () { // this should be paused when not in use. could be throttled too if (this.data.takeScreenshot) { - this.el.setAttribute('screentock', 'takeScreenshot', false); - takeScreenshotNow(this.data.filename, this.data.type, this.data.imgElementSelector); - } + this.data.takeScreenshot = false; + this.takeScreenshotNow(this.data.filename, this.data.type, this.data.imgElementSelector); + } } });