Merge pull request #2 from speckleworks/controlling-definitions-tests

Controlling definitions tests

dist/config.js

@@ -1,5 +1,5 @@
 var SpkAppConfig = {
-  serverUrl: 'http://localhost:8080',
+  serverUrl: 'http://localhost:8080/api',
   allowGuestAccess: true,
   // serverUrl: 'https://server.speckle.works',
   // logoUrl: 'dist/logo.png'

package.json

@@ -22,6 +22,7 @@
     "vue-dragging": "^1.0.6",
     "vue-json-tree-view": "^2.0.7",
     "vue-material": "^0.7.1",
+    "vue-slider-component": "^2.3.9",
     "vuex": "^2.3.1"
   },
   "devDependencies": {

src/App.vue

@@ -1,14 +1,11 @@
-
 <template>
   <div id="app">
     <login-screen v-if='showLogin' v-on:success='loggedIn'></login-screen>
-    <!-- <speckle-viewer v-if='!showLogin'></speckle-viewer> -->
     <speckle-viewer></speckle-viewer>
   </div>
 </template>
 
 <script>
-
 import LoginScreen      from './components/LoginScreen.vue'
 import SpeckleViewer    from './components/SpeckleViewer.vue'
 
@@ -25,6 +22,22 @@ export default {
     }
   },
   methods: {
+    toggleLeftSidenav() {
+      this.$refs.leftSidenav.toggle();
+    },
+    toggleRightSidenav() {
+      this.$refs.rightSidenav.toggle();
+    },
+    closeRightSidenav() {
+      this.$refs.rightSidenav.close();
+    },
+    open(ref) {
+      console.log('Opened: ' + ref);
+    },
+    close(ref) {
+      console.log('Closed: ' + ref);
+    },
+
     loggedIn( args ) {
       console.log( args )
       if( args.guest === false ) {
@@ -78,7 +91,7 @@ export default {
       var account = localStorage.getItem('userAccount')
       var jwtToken = localStorage.getItem('userJwtToken')
 
-      return this.$http.get( window.SpkAppConfig.serverDetails.restApi + '/accounts', { 
+      return this.$http.get( window.SpkAppConfig.serverDetails.restApi + '/accounts/profile', { 
         headers: 
         {
           Authorization: JSON.parse( jwtToken )

src/components/LoginScreen.vue

@@ -50,7 +50,7 @@ export default {
       .then( response => {
         if( response.data.success == false ) throw new Error( 'Failed to login.' )
         localStorage.setItem( 'userJwtToken', JSON.stringify( response.data.token ) )
-        return this.$http.get( window.SpkAppConfig.serverDetails.restApi + '/accounts', { headers: { 'Authorization' : response.data.token } } )
+        return this.$http.get( window.SpkAppConfig.serverDetails.restApi + '/accounts/profile', { headers: { 'Authorization' : response.data.token } } )
       })
       .then( response => {
         localStorage.setItem( 'userAccount', JSON.stringify( response.data ) )

src/components/SpeckleColorPicker.vue

@@ -1,7 +1,6 @@
 <template>
   <div id='color-picker' v-drag:dragable v-show='visible'>
     <div id="dragable">
-      <!-- <span> {{layerGuid}} </span> -->
       <md-button class="md-icon-button md-dense md-warn" v-if='isGuestUser' style='margin:0;' >
         <md-icon style='font-size:20px;'>warning</md-icon>
         <md-tooltip md-direction="bottom">You are not logged in, changes will not be saved.</md-tooltip>
@@ -10,11 +9,9 @@
         <md-icon style='font-size:20px;'>close</md-icon>
         <md-tooltip md-direction="bottom">Close</md-tooltip>
       </md-button>
-      <!-- <span @click='visible = false'><md-icon>close</md-icon></span> -->
     </div>
     <div class="content">
       <div class="other-options">
-        <!-- <div class="md-caption" v-if='isGuestUser'><md-icon>warning</md-icon>Changes will not be saved.</div> -->
         <div style='cursor:pointer; height: 30px; line-height: 30px;' @click='showExtra = !showExtra'>Extra options
         <md-icon>{{ showExtra ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</md-icon></div>
         <div v-show='showExtra'>
@@ -23,8 +20,6 @@
           <md-input type="number" v-model='layerMaterial.shininess'></md-input>
         </md-input-container>
         <md-checkbox class='md-primary' style='margin-top: 5px;' v-model='layerMaterial.showEdges'><small>Edges</small></md-checkbox><md-checkbox class='md-primary' style='margin-top: 5px;' v-model='layerMaterial.wireframe'><small>Wireframe</small></md-checkbox>
-       <!--  <br>
-        <md-checkbox class='md-primary' style='margin-top: 5px;' v-model='layerMaterial.vertexColors'><small>Vertex Colors</small></md-checkbox> -->
         </div>
       </div>
       <color-picker v-model='layerMaterial.color'></color-picker>
@@ -50,16 +45,15 @@ export default {
     },
     layerMaterial() {
       if( this.layerGuid != '' )
-        return this.$store.getters.layerMaterial( this.streamId, this.layerGuid )
+        return this.$store.getters.layerMaterial( this.streamId, this.layerGuid)
       return this.temp
-    },
-    threeMeshMaterial() {
-      return this.layerMaterial.threeMeshMaterial
     }
   },
   watch: {
     'layerMaterial.color': {
       handler( newValue ) {
+        this.layerMaterial.color.hex = newValue.hex
+        this.layerMaterial.color.a = newValue.a
         this.layerMaterial.threeMeshMaterial.color = new THREE.Color( newValue.hex )
         this.layerMaterial.threeLineMaterial.color = new THREE.Color( newValue.hex )
         this.layerMaterial.threePointMaterial.color = new THREE.Color( newValue.hex )
@@ -88,13 +82,6 @@ export default {
         this.layerMaterial.threeMeshVertexColorsMaterial.wireframe = newValue
       }
     },
-    // 'layerMaterial.vertexColors': {
-    //   handler( newValue ) {
-    //     this.layerMaterial.threeMeshMaterial.vertexColors = newValue
-    //     bus.$emit('renderer-layer-update-colors', { layerGuid: this.layerGuid, streamId: this.streamId } )
-    //     // this.layerMaterial.threeMeshMaterial.
-    //   }
-    // },
     'visible': {
       handler( nval ) {
         if( !nval ) this.commitUpdates( )
@@ -106,7 +93,9 @@ export default {
       temp: {
         color: { hex: '#B3B3B3', a: 1 },
         smooth: true,
-        shiny: 0
+        shiny: 0,
+        showEdges: true,
+        wireframe: false
       },
       layerGuid:'',
       streamId: '',
@@ -117,10 +106,10 @@ export default {
   methods: {
     commitUpdates () {
       console.log( 'updating db with colors and stuffs.' )
-      if( this.$store.getters.user.guest === true ) return console.warn('not authorised')
-      this.$http.post( window.SpkAppConfig.serverDetails.restApi + '/streams/' + this.streamId + '/visuals',
+      if( this.$store.getters.user.guest === true ) return console.warn('User not logged in, will not commit updates.')
+      this.$http.put( window.SpkAppConfig.serverDetails.restApi + '/streams/' + this.streamId + '/layers',
         { 
-          layerMaterials: this.$store.getters.receiverById( this.streamId ).layerMaterials 
+          layers: this.$store.getters.receiverById( this.streamId ).layers 
         },
         { 
           headers: { Authorization : this.$store.getters.authToken }
@@ -135,8 +124,10 @@ export default {
   mounted () {
     bus.$on( 'show-color-picker', args => {
       this.visible = ! this.visible
-      this.layerGuid = args.layerGuid
-      this.streamId = args.streamId
+      if( this.visible ) {
+        this.layerGuid = args.layerGuid
+        this.streamId = args.streamId
+      }
     } )
   }
 }

src/components/SpeckleReceiver.vue

@@ -10,30 +10,34 @@
       <span class="md-caption"><code style="user-select:all">{{ spkreceiver.streamId }}</code></span>
       <br>
       <md-progress md-indeterminate v-show='showProgressBar' style='margin-bottom:20px;margin-top:20px;'></md-progress>
-      <!-- <div class="md-caption"><br>ID: <code>{{ spkreceiver.streamId }}</code></div> -->
+      <md-button v-show='expired' class='md-densexx md-warn md-raised md-icon-button' id='refresh-button' @click.native='getAndSetStream()'>
+        <md-icon>refresh</md-icon>
+        <md-tooltip>Update available. Click to refresh.</md-tooltip>
+      </md-button>
     </md-card-header>
     <md-card-content v-show='expanded'>
-      <md-tabs md-fixedXXX class='md-transparent'>
+<!--       <md-tabs md-fixedXXX class='md-transparent'>
         <md-tab id="layers" md-label="layers" class='receiver-tabs'>
-            <speckle-receiver-layer v-for='layer in layers' :key='layer.guid' :spklayer='layer' :streamid='spkreceiver.streamId'></speckle-receiver-layer>
-        </md-tab>
+ -->            <speckle-receiver-layer v-for='layer in layers' :key='layer.guid' :spklayer='layer' :streamid='spkreceiver.streamId'></speckle-receiver-layer>
+<!--         </md-tab>
         <md-tab id='comments' md-label='views' class='receiver-tabs'>
           <speckle-receiver-comments :streamid='spkreceiver.streamId' v-on:comment-submit='commentSubmit' ></speckle-receiver-comments>
         </md-tab>
         <md-tab id='versions' md-label='versions' class='receiver-tabs'>
         <br>
         <div class="md-subhead">Todo.</div>
-<!--           <speckle-receiver-comments :streamid='spkreceiver.streamId' v-on:comment-submit='commentSubmit' ></speckle-receiver-comments> -->
+          <speckle-receiver-comments :streamid='spkreceiver.streamId' v-on:comment-submit='commentSubmit' ></speckle-receiver-comments>
         </md-tab>
-      </md-tabs>
+      </md-tabs> -->
 
     </md-card-content>
   </md-card>
 </div>
 </template>
 
 <script>
-import ReceiverClient             from '../receiver/SpeckleReceiver' // temporary solution to fix uglify error on build.
+// import ReceiverClient             from '../receiver/SpeckleReceiver'
+import ReceiverClient             from '../receiver/ClientReceiver'
 import SpeckleReceiverLayer       from './SpeckleReceiverLayer.vue'
 import SpeckleReceiverComments    from './SpeckleReceiverComments.vue'
 
@@ -61,69 +65,61 @@ export default {
       showProgressBar: true,
       objLoadProgress: 100,
       comments: 'Hello World. How Are you? Testing testing 123.',
-      isStale: false,
-      expanded: true
+      expanded: true, 
+      expired: false
     }
   },
   methods: {
     receiverError( err ) {
       this.errror = err
     },
-    getComments( ) {
-      this.$http.get( window.SpkAppConfig.serverDetails.restApi + '/comments/' + this.spkreceiver.streamId )
-      .then( response => {
-        if( !response.data.success ) throw new Error( 'Failed to retrieve comments for stream ' + this.spkreceiver.streamId )
-        // if( response.data.comments.length <= 0 ) return console.warn( 'Stream had no commnets.' )
-        let payload = { comments: response.data.comments }
-        this.$store.commit( 'ADD_COMMENTS', { payload } )
-      })
-      .catch( err => {
-        console.warn( err )
-      })
-    },
+    
     receiverReady( name, layers, objects, history, layerMaterials ) {
-      this.getComments() 
-      
       this.showProgressBar = false
       this.objLoadProgress = 0
       let payload = { streamId: this.spkreceiver.streamId, name: name, layers: layers, objects: objects, layerMaterials: layerMaterials }
+      
       this.$store.commit( 'INIT_RECEIVER_DATA',  { payload } )
       
       bus.$emit('renderer-update')
-      this.isStale = true
     },
-    liveUpdate( name, layers, objects, history ) {
+
+    updateGlobal( ) {
       console.info( 'live update event' )
-      this.showProgressBar = false
-      this.objLoadProgress = 0
+      this.expired = true
+      // this.showProgressBar = false
+      // this.objLoadProgress = 0
 
-      let payload = { streamId: this.spkreceiver.streamId, name: name, layers: layers, objects: objects }
-      this.$store.commit( 'SET_RECEIVER_DATA',  { payload } )
+      // let payload = { streamId: this.spkreceiver.streamId, name: name, layers: layers, objects: objects }
+      // this.$store.commit( 'SET_RECEIVER_DATA',  { payload } )
       
-      bus.$emit('renderer-update')
-      this.isStale = true
+      // bus.$emit('renderer-update')
+      // this.isStale = true
     },
-    metadataUpdate( name, layers ) {
-      let payload = { streamId: this.spkreceiver.streamId, name: name, layers: layers }
-      this.$store.commit( 'SET_RECEIVER_METADATA',  { payload } )
+
+    getAndSetStream( ) {
+      this.showProgressBar = true
+      this.expired = false
+      this.mySpkReceiver.getStream( stream => {
+        let payload = { streamId: this.spkreceiver.streamId, name: stream.name, layers: stream.layers, objects: stream.objects }
+        this.$store.commit( 'SET_RECEIVER_DATA',  { payload } )
+        this.showProgressBar = false
+        bus.$emit('renderer-update')
+      } )
+
     },
-    objLoadProgressEv( loaded ) {
-      this.objLoadProgress = ( loaded + 1 ) / this.objects.length * 100
+
+    updateMeta( ) {
+      this.mySpkReceiver.getStreamNameAndLayers( ( name, layers ) => {
+        let payload = { streamId: this.spkreceiver.streamId, name: name, layers: layers }
+        this.$store.commit( 'SET_RECEIVER_METADATA',  { payload } )  
+      })      
     },
-    commentSubmit( comment ) {
-      let payload = comment
-      payload.streamId = this.spkreceiver.streamId
 
-      this.$http.post( window.SpkAppConfig.serverDetails.restApi + '/comments', { comment: comment }, { headers: { Authorization: this.$store.getters.authToken } } )
-      .then( response => {
-        if( ! response.data.success ) throw new Error( 'Failed to post comment for a reason.' )
-        this.$store.commit( 'ADD_COMMENT', { payload } )
-        this.mySpkReceiver.broadcast(  { event: 'comment-added',  comment: comment } )
-      })
-      .catch( err => { 
-        console.log( err ) 
-      })
+    objLoadProgressEv( loaded ) {
+      this.objLoadProgress = ( loaded + 1 ) / this.objects.length * 100
     },
+    
     broadcastReceived( message ) {
       console.log( message )
       let parsedMessage = JSON.parse( message.args )
@@ -134,25 +130,29 @@ export default {
     }
   },
   mounted() {
-    console.log( 'Receiver mounted: ' + this.spkreceiver.streamId )
+    console.log( 'Stream receiver mounted for streamid: ' + this.spkreceiver.streamId )
     this.name = 'loading ' + this.spkreceiver.streamId
+    
     this.mySpkReceiver = new ReceiverClient({
-      serverUrl: this.spkreceiver.serverUrl,
+      baseUrl: this.spkreceiver.serverUrl ,
       streamId: this.spkreceiver.streamId,
       token: this.spkreceiver.token
     })
 
     this.mySpkReceiver.on( 'error', this.receiverError )
     this.mySpkReceiver.on( 'ready', this.receiverReady )
-    this.mySpkReceiver.on( 'live-update', this.liveUpdate )
-    this.mySpkReceiver.on( 'metadata-update', this.metadataUpdate )
-    this.mySpkReceiver.on( 'object-load-progress', this.objLoadProgressEv )
-    this.mySpkReceiver.on( 'volatile-broadcast', this.broadcastReceived )
+    this.mySpkReceiver.on( 'update-meta', this.updateMeta )
+    this.mySpkReceiver.on( 'update-global', this.updateGlobal )
   }
 }
 </script>
 
 <style>
+#refresh-button {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+}
 .line-height-adjustment{
   line-height: 30px;
 }

src/components/SpeckleReceiverLayer.vue

@@ -6,7 +6,6 @@
     </span>
     <span class="layer-buttons"> 
       <md-icon xxxv-show='showPicker' @click.native='showColorPicker' :style='colorStyle'>color_lens</md-icon>
-      <!-- <md-icon>all_out</md-icon> -->
       <md-icon @click.native='toggleLayer'>{{ visible ? "visibility" : "visibility_off" }}</md-icon>
     </span>
     </div>
@@ -26,11 +25,11 @@ export default {
   },
   computed: {
     layerMaterial() {
-      return this.$store.getters.layerMaterial( this.streamid, this.spklayer.guid )
+      return this.spklayer.properties
     },
     colorStyle() {
       if( this.layerMaterial )
-        return 'color:' + this.layerMaterial.color.hex
+        return 'color:' + this.spklayer.properties.color.hex
       return 'color:gray'
     },
     showPicker() {
@@ -67,6 +66,9 @@ export default {
   position: relative;
   user-select: none;
 }
+.spk-layer:last-of-type{
+  border-bottom: 0;
+}
 .layer-details {
   line-height: 50px;
   font-size: 12px;