From d3d1b1b8fd950f638cf5a2ba5e02a86fb5bc6e7f Mon Sep 17 00:00:00 2001 From: AlexandruPopovici Date: Wed, 27 Apr 2022 16:50:44 +0300 Subject: [PATCH 1/3] Working on #726. Added temporary url input and load button. --- packages/viewer-sandbox/index.html | 12 +++++++++ packages/viewer-sandbox/src/Sandbox.ts | 23 ++++++++++++++++ packages/viewer-sandbox/src/main.ts | 25 ++++++++++------- packages/viewer-sandbox/src/style.css | 27 +++++++++++++++++++ .../src/type-augmentations/viewer.d.ts | 1 + 5 files changed, 78 insertions(+), 10 deletions(-) create mode 100644 packages/viewer-sandbox/src/Sandbox.ts 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, From 08ab4910c180aa656e85cbc6c1f24475c1bb96ec Mon Sep 17 00:00:00 2001 From: Dimitrie Stefanescu Date: Thu, 28 Apr 2022 08:47:51 +0100 Subject: [PATCH 2/3] Dim/sandbox/url support (#728) * feat(sandbox): varied url loading support * fix(optional): removes input box * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Fixed some lint warnings * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: AlexandruPopovici --- packages/viewer-sandbox/index.html | 6 +- packages/viewer-sandbox/src/Sandbox.ts | 59 +++++++++++++------ packages/viewer-sandbox/src/UrlHelper.ts | 73 ++++++++++++++++++++++++ packages/viewer-sandbox/src/main.ts | 22 ++----- packages/viewer-sandbox/src/style.css | 16 +++--- 5 files changed, 129 insertions(+), 47 deletions(-) create mode 100644 packages/viewer-sandbox/src/UrlHelper.ts diff --git a/packages/viewer-sandbox/index.html b/packages/viewer-sandbox/index.html index 44e97dc6f..27a18c075 100644 --- a/packages/viewer-sandbox/index.html +++ b/packages/viewer-sandbox/index.html @@ -8,7 +8,8 @@ -
+
+ diff --git a/packages/viewer-sandbox/src/Sandbox.ts b/packages/viewer-sandbox/src/Sandbox.ts index 13dcca6a7..9b2ec8b39 100644 --- a/packages/viewer-sandbox/src/Sandbox.ts +++ b/packages/viewer-sandbox/src/Sandbox.ts @@ -1,23 +1,46 @@ -import { Viewer } from '@speckle/viewer'; +import { Viewer } from '@speckle/viewer' import { Pane } from 'tweakpane' +import UrlHelper from './UrlHelper' export default class Sandbox { - private viewer: Viewer; - private pane: Pane; + private viewer: Viewer + private pane: Pane - public constructor(viewer: Viewer) { - this.viewer = viewer; - this.pane = new Pane({ title: 'Sandbox', expanded: true}); + private static urlParams = { + url: 'https://latest.speckle.dev/streams/010b3af4c3/objects/a401baf38fe5809d0eb9d3c902a36e8f' + } + + public constructor(viewer: Viewer) { + this.viewer = viewer + this.pane = new Pane({ title: 'Sandbox', expanded: true }) + } + + public makeGenericUI() { + this.pane.addInput(Sandbox.urlParams, 'url') + + const loadButton = this.pane.addButton({ + title: 'Load Url' + }) + + loadButton.on('click', () => { + this.loadUrl(Sandbox.urlParams.url) + }) + + const clearButton = this.pane.addButton({ + title: 'Clear All' + }) + + clearButton.on('click', () => { + this.viewer.unloadAll() + }) + } + + public async loadUrl(url: string) { + const objUrls = await UrlHelper.getResourceUrls(url) + for (const url of objUrls) { + console.log(`Loading ${url}`) + await this.viewer.loadObject(url) } - - - public makeGenericUI() { - const clearButton = this.pane.addButton({ - title: 'Clear All', - }); - - clearButton.on('click', () => { - this.viewer.unloadAll(); - }); - } -} \ No newline at end of file + localStorage.setItem('last-load-url', url) + } +} diff --git a/packages/viewer-sandbox/src/UrlHelper.ts b/packages/viewer-sandbox/src/UrlHelper.ts new file mode 100644 index 000000000..7462aae10 --- /dev/null +++ b/packages/viewer-sandbox/src/UrlHelper.ts @@ -0,0 +1,73 @@ +interface CommitReferencedObjectUrl { + origin: string + streamId: string + commitId: string +} + +export default class UrlHelper { + static async getResourceUrls(url: string): Promise { + const parsed = new URL(url) + const streamId = url.split('/streams/')[1].substring(0, 10) + + const objsUrls = [] + // supports commit based urls + if (url.includes('commits')) { + const commitId = url.split('/commits/')[1].substring(0, 10) + const objUrl = await this.getCommitReferencedObjectUrl({ + origin: parsed.origin, + streamId, + commitId + }) + objsUrls.push(objUrl) + } + + // object based urls + if (url.includes('objects')) objsUrls.push(url) + + // supports urls that include overlay queries + // e.g., https://speckle.xyz/streams/a632e7a784/objects/457c45feffa6f954572e5e86fb6d4f25?overlay=cf8dc76247,f5adc1d991b3dceb4b5ad6b50f919a0e + if (url.includes('overlay=')) { + const searchParams = new URLSearchParams(parsed.search) + const resIds = searchParams.get('overlay')?.split(',') + if (resIds !== undefined) { + for (const resId of resIds) { + if (resId.length === 10) { + objsUrls.push( + await this.getCommitReferencedObjectUrl({ + origin: parsed.origin, + streamId, + commitId: resId + } as CommitReferencedObjectUrl) + ) + } else { + objsUrls.push(`${parsed.origin}/streams/${streamId}/objects/${resId}`) + } + } + } + } + + return objsUrls + } + + private static async getCommitReferencedObjectUrl(ref: CommitReferencedObjectUrl) { + const res = await fetch(`${ref.origin}/graphql`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + query: ` + query Stream($streamId: String!, $commitId: String!) { + stream(id: $streamId) { + commit(id: $commitId) { + referencedObject + } + } + } + `, + variables: { streamId: ref.streamId, commitId: ref.commitId } + }) + }) + + const { data } = await res.json() + return `${origin}/streams/${ref.streamId}/objects/${data.stream.commit.referencedObject}` + } +} diff --git a/packages/viewer-sandbox/src/main.ts b/packages/viewer-sandbox/src/main.ts index 71d17fc1b..51512f18e 100644 --- a/packages/viewer-sandbox/src/main.ts +++ b/packages/viewer-sandbox/src/main.ts @@ -1,10 +1,8 @@ -import { Pane } from 'tweakpane' import { Viewer } from '@speckle/viewer' import './style.css' -import Sandbox from './Sandbox'; +import Sandbox from './Sandbox' const container = document.querySelector('#renderer') -const urlInput = document.querySelector("#objectUrlInput"); if (!container) { throw new Error("Couldn't find #app container!") @@ -18,17 +16,7 @@ const viewer = new Viewer({ window.addEventListener('load', () => { viewer.onWindowResize() -}); - -// TEMPORARY -(window as any).loadData = ()=> { - viewer.loadObject( - urlInput?.value as string - // 'https://latest.speckle.dev/streams/010b3af4c3/objects/a401baf38fe5809d0eb9d3c902a36e8f' - ) -} - - +}) // Load demo object viewer.loadObject( @@ -41,7 +29,5 @@ viewer.on<{ progress: number; id: string; url: string }>('load-progress', (a) => } }) -const sandbox = new Sandbox(viewer); -sandbox.makeGenericUI(); - - +const sandbox = new Sandbox(viewer) +sandbox.makeGenericUI() diff --git a/packages/viewer-sandbox/src/style.css b/packages/viewer-sandbox/src/style.css index a544a90d3..e65a1e89f 100644 --- a/packages/viewer-sandbox/src/style.css +++ b/packages/viewer-sandbox/src/style.css @@ -23,12 +23,14 @@ 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); + background-image: linear-gradient( + to top left, + rgba(0, 0, 0, 0.2), + rgba(0, 0, 0, 0.2) 30%, + rgba(0, 0, 0, 0) + ); + box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), + inset -2px -2px 3px rgba(0, 0, 0, 0.6); } .input { @@ -37,5 +39,3 @@ border-radius: 0.1rem; border: 4px solid rgb(129, 129, 129); } - - From f659e9d75455f4b126840e69aae5397ca36294ac Mon Sep 17 00:00:00 2001 From: AlexandruPopovici Date: Fri, 29 Apr 2022 15:28:58 +0300 Subject: [PATCH 3/3] Fixed something I forgot when updating the URLHelper --- packages/viewer-sandbox/src/UrlHelper.ts | 2 +- packages/viewer-sandbox/src/main.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/viewer-sandbox/src/UrlHelper.ts b/packages/viewer-sandbox/src/UrlHelper.ts index 7462aae10..0b0be7f92 100644 --- a/packages/viewer-sandbox/src/UrlHelper.ts +++ b/packages/viewer-sandbox/src/UrlHelper.ts @@ -68,6 +68,6 @@ export default class UrlHelper { }) const { data } = await res.json() - return `${origin}/streams/${ref.streamId}/objects/${data.stream.commit.referencedObject}` + return `${ref.origin}/streams/${ref.streamId}/objects/${data.stream.commit.referencedObject}` } } diff --git a/packages/viewer-sandbox/src/main.ts b/packages/viewer-sandbox/src/main.ts index 51512f18e..12f801c0d 100644 --- a/packages/viewer-sandbox/src/main.ts +++ b/packages/viewer-sandbox/src/main.ts @@ -20,7 +20,7 @@ window.addEventListener('load', () => { // Load demo object viewer.loadObject( - 'https://latest.speckle.dev/streams/010b3af4c3/objects/a401baf38fe5809d0eb9d3c902a36e8f' + 'https://speckle.xyz/streams/99abc74dd4/commits/ccc0baaadb' ) viewer.on<{ progress: number; id: string; url: string }>('load-progress', (a) => {