From 0d687e704715b4e635d3a26c4b0b6a74c4f50492 Mon Sep 17 00:00:00 2001 From: Torin Blankensmith Date: Sat, 16 Apr 2022 13:04:02 -0400 Subject: [PATCH] backup --- src/App.vue | 4 +- src/components/New.vue | 102 ++++++++++++++++++++--------------- src/components/Sculpture.vue | 76 +++++++++++++++++--------- src/main.js | 5 +- vue.config.js | 1 + 5 files changed, 116 insertions(+), 72 deletions(-) diff --git a/src/App.vue b/src/App.vue index 93292cad..9ba553f9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,7 +4,9 @@

Shader Park

- + + + diff --git a/src/components/New.vue b/src/components/New.vue index be888b44..46697702 100644 --- a/src/components/New.vue +++ b/src/components/New.vue @@ -19,55 +19,64 @@ export default { }, props: ['example', 'embed', 'hideEditor', 'hidePedestal', 'clickEnabled'], mounted() { - - this.$nextTick(function () { - this.$store.commit('setDisplayCanvas', true); - this.$store.commit('setInitialCameraPose', [0, 0, 4]); - this.$store.commit('sculpturesLoaded', false); - if(this.clickEnabled != null) { - this.$store.commit('setClickEnabled', this.clickEnabled === 'true'); - } - - if(this.embed && this.embed === 'true') { - this.$store.commit('setEmbedded', true); - this.setSelectedSculpture(); - } - const sculpId = this.$route.params.id; - if(sculpId) { - let payload = {id : sculpId}; - if(this.example && this.example === 'true') { - payload['example'] = true; - } - this.$store.dispatch('fetchSculpture', payload).then(data => { - if(data) { - this.emptySculpture = data; - this.finishedLoadingSculp = true; - if(data.title != 'title') { - this.$store.commit('setRouteTitle', data.title); - } - this.setSelectedSculpture(); - } else { - this.$modal.show('no-sculpture-data-found'); - } - }); - } else { - this.finishedLoadingSculp = true; - let sculptureType = this.$route.params.type; - this.emptySculpture.type = 'js'; - if(sculptureType && sculptureType === 'glsl') { - this.emptySculpture.type = sculptureType; - } - this.setSelectedSculpture(); - - } - }); - - + this.mount = true; + this.onMount() }, + activated() { + console.log('activated NEW', this.mount) + if(!this.mount) { + this.onMount(); + this.mount = false; + } + }, components: { sculpture: Sculpture, }, methods: { + onMount() { + console.log('onMount NEW called') + this.$nextTick(function () { + this.$store.commit('setDisplayCanvas', true); + this.$store.commit('setInitialCameraPose', [0, 0, 4]); + this.$store.commit('sculpturesLoaded', false); + if(this.clickEnabled != null) { + this.$store.commit('setClickEnabled', this.clickEnabled === 'true'); + } + + if(this.embed && this.embed === 'true') { + this.$store.commit('setEmbedded', true); + this.setSelectedSculpture(); + } + const sculpId = this.$route.params.id; + if(sculpId) { + let payload = {id : sculpId}; + if(this.example && this.example === 'true') { + payload['example'] = true; + } + this.$store.dispatch('fetchSculpture', payload).then(data => { + if(data) { + this.emptySculpture = data; + this.finishedLoadingSculp = true; + if(data.title != 'title') { + this.$store.commit('setRouteTitle', data.title); + } + this.setSelectedSculpture(); + } else { + this.$modal.show('no-sculpture-data-found'); + } + }); + } else { + this.finishedLoadingSculp = true; + let sculptureType = this.$route.params.type; + this.emptySculpture.type = 'js'; + if(sculptureType && sculptureType === 'glsl') { + this.emptySculpture.type = sculptureType; + } + this.setSelectedSculpture(); + + } + }); + }, setUser: function() { this.$store.dispatch('setUser'); }, @@ -89,7 +98,12 @@ export default { }); } }, + deactivated() { + + this.mount = false; + }, destroyed: function() { + this.mount = false; this.$store.commit('setRouteTitle', null); }, beforeRouteLeave (to, from, next) { diff --git a/src/components/Sculpture.vue b/src/components/Sculpture.vue index 6fe9b077..98d03f36 100644 --- a/src/components/Sculpture.vue +++ b/src/components/Sculpture.vue @@ -77,32 +77,15 @@ export default { }; }, mounted() { - // this.$data = Object.assign(this.$data, this.sculpData); - - // this is just to make a copy?? - let shaderSourceCopy = this.shaderSource.slice(); - this.sculpture = new Sculpture(this.type !== 'js', shaderSourceCopy, this.MSDFTexture); - if(this.sculpture.compileError) { - //wait until the editor opens to log the error - setTimeout(() => { - this.$store.commit('setSculptureError', this.sculpture.compileError); - }, 300); - } - - if(this.sculpPosition) { - this.setPose(this.sculpPosition); - } - if(this.id) { - this.sculpture.mesh.name = this.id; - } else { - this.sculpture.mesh.name = this._uid; //_uid is a unique ID generated by vue for a component - } - window.scene.add(this.sculpture.mesh); - this.$store.state.objectsToUpdate.push(this.sculpture); - this.$store.state.objectsToRaycast.push(this.sculpture.mesh); - this.$store.state.currSculpture = this.$data; - if(this.$store.state.selectedObject) { - this.setSelectedSculpture(this.$store.state.selectedObject); + console.log('mount') + this.mount = true; + this.onMount(); + }, + activated() { + console.log('activated', this.mount) + if(!this.mount) { + this.onMount(); + this.mount = false; } }, watch: { @@ -137,6 +120,36 @@ export default { }, }, methods: { + onMount() { + console.log('onMountCalled'); + // this.$data = Object.assign(this.$data, this.sculpData); + + // this is just to make a copy?? + let shaderSourceCopy = this.shaderSource.slice(); + this.sculpture = new Sculpture(this.type !== 'js', shaderSourceCopy, this.MSDFTexture); + if(this.sculpture.compileError) { + //wait until the editor opens to log the error + setTimeout(() => { + this.$store.commit('setSculptureError', this.sculpture.compileError); + }, 300); + } + + if(this.sculpPosition) { + this.setPose(this.sculpPosition); + } + if(this.id) { + this.sculpture.mesh.name = this.id; + } else { + this.sculpture.mesh.name = this._uid; //_uid is a unique ID generated by vue for a component + } + window.scene.add(this.sculpture.mesh); + this.$store.state.objectsToUpdate.push(this.sculpture); + this.$store.state.objectsToRaycast.push(this.sculpture.mesh); + this.$store.state.currSculpture = this.$data; + if(this.$store.state.selectedObject) { + this.setSelectedSculpture(this.$store.state.selectedObject); + } + }, setPose(pose) { this.sculpture.mesh.position = this.sculpPosition; }, @@ -159,13 +172,24 @@ export default { } }, removeSculpture() { + console.log('remove sculpture called') const name = this.id || this._uid; this.$store.commit('removeObjectFromUpdate', this.sculpture); this.$store.commit('removeObjectFromRaycast', this.sculpture.mesh); this.$store.commit('removeObjectFromSceneByName', name); } }, + deactivated() { + console.log('deactivated', this.destroy) + this.mount = false; + if(!this.destroy) { + this.removeSculpture(); + this.destroy = false; + } + }, destroyed: function() { + console.log('destroyed', this.destroy) + this.destroy = true; this.removeSculpture(); } }; diff --git a/src/main.js b/src/main.js index 26ee29e1..934293aa 100644 --- a/src/main.js +++ b/src/main.js @@ -27,7 +27,6 @@ import {dbConfig} from './dbConfig.js'; import {routes} from './router/routes'; import {store} from './store/store'; - window.anime = anime; firebase.initializeApp(dbConfig); @@ -79,7 +78,11 @@ let firstTimeAtRoute = true; let mediaCap = null; let isCapturing = false; + +// const scrollableElementId = 'sculpture-container' // You should change this +const scrollPositions = Object.create(null) router.beforeEach((to, from, next) => { + const currentUser = firebase.auth().currentUser; const nextRoute = () => { diff --git a/vue.config.js b/vue.config.js index 9aa8c2fc..08d409f2 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,4 +1,5 @@ module.exports = { + publicPath: "/", pwa: { workboxOptions: { exclude: ['_redirects'],