Fix js-starter

javascript/speckle-js-starter/app.js

@@ -1,16 +1,10 @@
-import { getStreamCommits, getUserData } from "./speckleUtils.js"
+import { getStreamCommits } from "./speckleUtils.js"
+const jv = window["w-jsonview-tree"]
 
-let token = null
-let streamId = null
+let token = sessionStorage.getItem("auth-token")
+let streamId = sessionStorage.getItem("stream-id")
 let stream = null
 let mainBranch = null
-let beams = null
-let columns = null
-let selectedBeam = null
-let selectedColumn = null
-let isDropdownLoaded = false
-
-document.getElementById("reloadButton").addEventListener("click", reload)
 
 let objUrl = (streamId, objId) =>
   `https://speckle.xyz/streams/${streamId}/objects/${objId}`
@@ -25,9 +19,14 @@ let viewer = new window.Speckle.Viewer({
 viewer.on("select", objects => {
   console.info(`Selection event. Current selection count: ${objects.length}.`)
   console.log(objects)
+  let parent = document.getElementById("selected-panel")
+  if (objects.length === 0) {
+    parent.classList.add("is-hidden")
+    return
+  }
   let el = document.getElementById("selection-area")
-  let jv = window["w-jsonview-tree"]
-  jv(objects, el, { expanded: false })
+  jv(objects, el, { expanded: true })
+  parent.classList.remove("is-hidden")
 })
 
 // Handle double click events
@@ -38,101 +37,43 @@ viewer.on("object-doubleclicked", obj => {
 
 async function reload() {
   document.getElementById("reloadButton").classList.add("is-loading")
+
   streamId = document.getElementById("stream-input").value // Get the value of the stream input
   token = document.getElementById("token-input").value // Get the value of the token input
   await fetchStreamData() // Fetch the stream data
-  if (!isDropdownLoaded) {
-    populateDropdown("alternative-selector", beams)
-    populateDropdown("alternative-selector-2", columns) // If  it's the first time, populate the dropdown too.
-  }
   await reloadViewer() // Reload the viewer once the stream data has been fetched
+
   document.getElementById("reloadButton").classList.remove("is-loading")
 }
 
-// This will add an option for each branch in the alternatives list, and bind the referenced object id as the value
-function populateDropdown(id, data) {
-  let select = document.getElementById(id)
-  data.forEach(alt => {
-    if (alt.commits.items.length == 0) return
-    var opt = document.createElement("option")
-    opt.appendChild(document.createTextNode(alt.name))
-    opt.value = alt.commits.items[0].referencedObject
-    select.appendChild(opt)
-  })
-  isDropdownLoaded = true
-}
-
 // Get the stream data and process it
-//
 async function fetchStreamData() {
   await getStreamCommits(streamId, 1, null, token).then(str => {
     stream = str.data.stream
 
     // Split the branches into "main" and everything else
     mainBranch = stream.branches.items.find(b => b.name == "main")
-    beams = stream.branches.items.filter(b => b.name.startsWith("beam"))
-    columns = stream.branches.items.filter(b => b.name.startsWith("column"))
     console.log("main branch", mainBranch)
-    console.log("beam options", beams)
-    console.log("column options", columns)
   })
 }
 
 // Reload of the viewer data, remove all objects, reload everything and zoom.
 async function reloadViewer() {
-  viewer.sceneManager.removeAllObjects()
+  await viewer.unloadAll()
   await viewer.loadObject(
     objUrl(streamId, mainBranch.commits.items[0].referencedObject)
   )
   console.log(`Loaded latest commit from branch "${mainBranch.name}"`)
 
-  // Load beam if selected
-  if (selectedBeam) {
-    console.log("alternative is selected, should load", selectedBeam)
-    await viewer.loadObject(objUrl(streamId, selectedBeam))
-    console.log("loaded alternative")
-  }
-
-  // Load column if selected
-  if (selectedColumn) {
-    console.log("alternative is selected, should load", selectedColumn)
-    await viewer.loadObject(objUrl(streamId, selectedColumn))
-    console.log("loaded alternative")
-  }
-
   viewer.interactions.zoomExtents(0.95, true)
 }
 
-// Reload viewer every time an alternative is selected in the dropdown.
-async function onColumnAlternativeSelected(event) {
-  const selection = event.target.value.substring(
-    event.target.selectionStart,
-    event.target.selectionEnd
-  )
-  selectedColumn = selection
-  console.log("selected", selectedColumn)
-  document.getElementById("reloadButton").classList.add("is-loading")
-  await reloadViewer()
-  document.getElementById("reloadButton").classList.remove("is-loading")
-}
-
-async function onBeamAlternativeSelected(event) {
-  const selection = event.target.value.substring(
-    event.target.selectionStart,
-    event.target.selectionEnd
-  )
-  selectedBeam = selection
-  console.log("selected", selectedBeam)
-  document.getElementById("reloadButton").classList.add("is-loading")
-  await reloadViewer()
-  document.getElementById("reloadButton").classList.remove("is-loading")
-}
-
-// Hack to prevent scene from loosing current zoom.
-viewer.sceneManager._postLoadFunction = () => {
-  viewer.reflectionsNeedUpdate = true
-}
+var streamInput = document.getElementById("stream-input")
+var tokenInput = document.getElementById("token-input")
+tokenInput.value = token
+streamInput.value = streamId
 
+document.getElementById("reloadButton").addEventListener("click", reload)
 document.getElementById("take-screenshot").addEventListener("click", () => {
   console.log("screenshot clickd")
   let data = viewer.interactions.screenshot() // transparent png.
@@ -145,3 +86,10 @@ document.getElementById("take-screenshot").addEventListener("click", () => {
   img.src = data
   pop.document.body.appendChild(img)
 })
+
+streamInput.addEventListener("input", e => {
+  sessionStorage.setItem("stream-id", e.target.value)
+})
+tokenInput.addEventListener("input", e => {
+  sessionStorage.setItem("auth-token", e.target.value)
+})

javascript/speckle-js-starter/index.html

@@ -6,7 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Speckle Web Starter</title>
-  <script src="https://unpkg.com/@speckle/viewer@2.5.2" type="module"></script>
+  <script src="https://unpkg.com/@speckle/viewer@2.2.8"></script>
   <script src="https://cdn.jsdelivr.net/npm/w-jsonview-tree@1.0.24/dist/w-jsonview-tree.umd.js"></script>
   <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
   <link rel="stylesheet" href="styles.css">
@@ -34,7 +34,7 @@
       </div>
 
     </div>
-    <div class="box" id="selected-panel">
+    <div class="box is-hidden" id="selected-panel">
       <div class="content" id="selection-area-parent">
         <h3 class="title has-text-info">Selected objects
         </h3>