diff --git a/packages/viewer-sandbox/index.html b/packages/viewer-sandbox/index.html
index 4dbcaf405..44e97dc6f 100644
--- a/packages/viewer-sandbox/index.html
+++ b/packages/viewer-sandbox/index.html
@@ -12,6 +12,18 @@
diff --git a/packages/viewer-sandbox/src/Sandbox.ts b/packages/viewer-sandbox/src/Sandbox.ts
new file mode 100644
index 000000000..13dcca6a7
--- /dev/null
+++ b/packages/viewer-sandbox/src/Sandbox.ts
@@ -0,0 +1,23 @@
+import { Viewer } from '@speckle/viewer';
+import { Pane } from 'tweakpane'
+
+export default class Sandbox {
+ private viewer: Viewer;
+ private pane: Pane;
+
+ public constructor(viewer: Viewer) {
+ this.viewer = viewer;
+ this.pane = new Pane({ title: 'Sandbox', expanded: true});
+ }
+
+
+ public makeGenericUI() {
+ const clearButton = this.pane.addButton({
+ title: 'Clear All',
+ });
+
+ clearButton.on('click', () => {
+ this.viewer.unloadAll();
+ });
+ }
+}
\ No newline at end of file
diff --git a/packages/viewer-sandbox/src/main.ts b/packages/viewer-sandbox/src/main.ts
index 5a98b38ad..71d17fc1b 100644
--- a/packages/viewer-sandbox/src/main.ts
+++ b/packages/viewer-sandbox/src/main.ts
@@ -1,8 +1,11 @@
import { Pane } from 'tweakpane'
import { Viewer } from '@speckle/viewer'
import './style.css'
+import Sandbox from './Sandbox';
const container = document.querySelector
('#renderer')
+const urlInput = document.querySelector("#objectUrlInput");
+
if (!container) {
throw new Error("Couldn't find #app container!")
}
@@ -15,20 +18,17 @@ const viewer = new Viewer({
window.addEventListener('load', () => {
viewer.onWindowResize()
-})
+});
-// Tweakpane setup
-const PARAMS = {
- factor: 123,
- title: 'hello',
- color: '#ff0055'
+// TEMPORARY
+(window as any).loadData = ()=> {
+ viewer.loadObject(
+ urlInput?.value as string
+ // 'https://latest.speckle.dev/streams/010b3af4c3/objects/a401baf38fe5809d0eb9d3c902a36e8f'
+ )
}
-const pane = new Pane()
-pane.addInput(PARAMS, 'factor')
-pane.addInput(PARAMS, 'title')
-pane.addInput(PARAMS, 'color')
// Load demo object
viewer.loadObject(
@@ -40,3 +40,8 @@ viewer.on<{ progress: number; id: string; url: string }>('load-progress', (a) =>
viewer.onWindowResize()
}
})
+
+const sandbox = new Sandbox(viewer);
+sandbox.makeGenericUI();
+
+
diff --git a/packages/viewer-sandbox/src/style.css b/packages/viewer-sandbox/src/style.css
index b562c7eb3..a544a90d3 100644
--- a/packages/viewer-sandbox/src/style.css
+++ b/packages/viewer-sandbox/src/style.css
@@ -12,3 +12,30 @@
height: 100%;
width: 100%;
}
+
+.button {
+ border: 0;
+ line-height: 1.5;
+ padding: 0 20px;
+ font-size: 1rem;
+ text-align: center;
+ color: #fff;
+ text-shadow: 1px 1px 1px #000;
+ border-radius: 2px;
+ background-color: rgb(129, 129, 129);
+ background-image: linear-gradient(to top left,
+ rgba(0, 0, 0, .2),
+ rgba(0, 0, 0, .2) 30%,
+ rgba(0, 0, 0, 0));
+ box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
+ inset -2px -2px 3px rgba(0, 0, 0, .6);
+}
+
+.input {
+ margin-bottom: 5px;
+ left: 0px;
+ border-radius: 0.1rem;
+ border: 4px solid rgb(129, 129, 129);
+}
+
+
diff --git a/packages/viewer-sandbox/src/type-augmentations/viewer.d.ts b/packages/viewer-sandbox/src/type-augmentations/viewer.d.ts
index 54b442d7d..a55c46485 100644
--- a/packages/viewer-sandbox/src/type-augmentations/viewer.d.ts
+++ b/packages/viewer-sandbox/src/type-augmentations/viewer.d.ts
@@ -12,6 +12,7 @@ declare module '@speckle/viewer' {
})
async loadObject(url: string, token?: string, enableCaching? = true): Promise
+ async unloadAll()
onWindowResize(): void
on(
event: string,