From a55342ae9588a43270ab144c0a706f0f8282daab Mon Sep 17 00:00:00 2001 From: Glen Whitney Date: Tue, 19 Sep 2023 04:40:23 +0000 Subject: [PATCH] feat: Add a separate browser and toggle control for each link (#27) Resolves #20. Resolves #26. Reviewed-on: https://code.studioinfinity.org/glen/archematics/pulls/27 Co-authored-by: Glen Whitney Co-committed-by: Glen Whitney --- package.json5 | 6 +-- pnpm-lock.yaml | 24 +++++------ src/giveAwrl.civet | 99 +++++++++++++++++++++++++++++----------------- 3 files changed, 78 insertions(+), 51 deletions(-) diff --git a/package.json5 b/package.json5 index a4f730e..83e2952 100644 --- a/package.json5 +++ b/package.json5 @@ -33,12 +33,12 @@ url: 'https://code.studioinfinity.org/glen/archematics.git', }, devDependencies: { - '@danielx/civet': '^0.6.36', - '@types/jquery': '^3.5.18', + '@danielx/civet': '^0.6.38', + '@types/jquery': '^3.5.19', 'http-server': '^14.1.1', typescript: '^5.2.2', }, dependencies: { - vrml1to97: '^0.2.0', + vrml1to97: '^0.2.2', }, } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 60fd83e..76fd228 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,16 +6,16 @@ settings: dependencies: vrml1to97: - specifier: ^0.2.0 - version: 0.2.0 + specifier: ^0.2.2 + version: 0.2.2 devDependencies: '@danielx/civet': - specifier: ^0.6.36 - version: 0.6.36(typescript@5.2.2) + specifier: ^0.6.38 + version: 0.6.38(typescript@5.2.2) '@types/jquery': - specifier: ^3.5.18 - version: 3.5.18 + specifier: ^3.5.19 + version: 3.5.19 http-server: specifier: ^14.1.1 version: 14.1.1 @@ -32,8 +32,8 @@ packages: '@jridgewell/trace-mapping': 0.3.9 dev: true - /@danielx/civet@0.6.36(typescript@5.2.2): - resolution: {integrity: sha512-ApMaq2YyXfiM0xpcFWRZffVLgqxrYu3UWS5A0sWViK+RMeamVp6J0iGUeUsQFCF2Gd9+ldEPzWgUThzUcfQKnA==} + /@danielx/civet@0.6.38(typescript@5.2.2): + resolution: {integrity: sha512-R63YGIfvV4DQianNPUfMfBX60ozlv5htnRXI1wK3Pg6+d4NZ2V3RifFRH0NkmXXoFkRcULzJ+9BzVeI2/yX+yA==} engines: {node: '>=19 || ^18.6.0 || ^16.17.0'} hasBin: true peerDependencies: @@ -63,8 +63,8 @@ packages: '@jridgewell/sourcemap-codec': 1.4.15 dev: true - /@types/jquery@3.5.18: - resolution: {integrity: sha512-sNm7O6LECFhHmF+3KYo6QIl2fIbjlPYa0PDgDQwfOaEJzwpK20Eub9Ke7VKkGsSJ2K0HUR50S266qYzRX4GlSw==} + /@types/jquery@3.5.19: + resolution: {integrity: sha512-KFbmk+dXfphHGuVCmlopgcNRCegN/21mkeoD4BzuJhVH0SJW3Uo2mLuAwb6oqTNV79EsRp6J7yC1BbKymjpx/g==} dependencies: '@types/sizzle': 2.3.3 dev: true @@ -481,8 +481,8 @@ packages: resolution: {integrity: sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==} dev: true - /vrml1to97@0.2.0: - resolution: {integrity: sha512-RO5M/R9wqmLHbNm866Jz6Iax5BpL4BtqePM/arulHZZsC2rBmFmP4g00lvW/HUFQ6GT7I0/VHv/DPru272S3JA==} + /vrml1to97@0.2.2: + resolution: {integrity: sha512-zLraKyuCtb2/Db4eygDimKAh4qweSKzBusDFrCxZ8RKextNSTEhda6pzxjoNTfPx/MnfrLISTEL+fwTiDILSZg==} hasBin: true dev: false diff --git a/src/giveAwrl.civet b/src/giveAwrl.civet index 8f94b84..8799121 100644 --- a/src/giveAwrl.civet +++ b/src/giveAwrl.civet @@ -2,43 +2,70 @@ import https://code.jquery.com/jquery-3.7.1.js X3D from https://create3000.github.io/code/x_ite/latest/x_ite.mjs {convert} from ./deps/vrml1to97/index.js -certainlyHandled := '.x3d .gltf .glb .obj .stl .ply'.split ' ' -// The next line will need to change when we handle pages with more than -// one link, since we will potentially need a canvas for each one. -canvas := X3D.createBrowser() +knownExtensions := /[.](?:wrl|x3d|gltf|glb|obj|stl|ply)$/ +certainlyHandled := + knownExtensions.source.slice(0, -2).split('wrl|')[1].split '|' -// Fix up the css so the browser is a nice size and we can see the world info -$(canvas).css width: '150px', height: '150px', overflow: 'visible' -x_ite_shadow := canvas.shadowRoot -if x_ite_shadow - x_ite_style := x_ite_shadow.querySelector('link') - if x_ite_style - $(x_ite_style).after '' - x_ite_browser := x_ite_shadow.querySelector '.x_ite-private-browser' - if x_ite_browser - $(x_ite_browser).css overflow: 'visible' +function makeBrowser(url: string) + canvas := X3D.createBrowser() -// Now get the browser and load the requested VRML, converting if need be -browser := X3D.getBrowser canvas -browser.setBrowserOption 'StraightenHorizon', false -site := $('a[href^="http"]') -url := site.attr('href') ?? '' + // Fix up css: smaller browser, but we can see the world info + $(canvas).css + width: '150px' + height: '150px' + overflow: 'visible' + 'vertical-align': 'top' + x_ite_shadow := canvas.shadowRoot + if x_ite_shadow + x_ite_style := x_ite_shadow.querySelector 'link' + if x_ite_style + $(x_ite_style).after '' + x_ite_browser := x_ite_shadow.querySelector '.x_ite-private-browser' + if x_ite_browser + $(x_ite_browser).css overflow: 'visible' -if certainlyHandled.some((ext) => url.includes ext) - canvas.setAttribute 'src', url -else if url.includes '.wrl' - // Need to obtain the text and check what level it is - response := await fetch url - text .= await response.text() - if /#\s*VRML\s*V?1[.]/i.test text - text = convert text - browser.baseURL = url - scene := await browser.createX3DFromString text - browser.replaceWorld scene + // Now get the browser and load the requested VRML, converting if need be + browser := X3D.getBrowser canvas + browser.setBrowserOption 'StraightenHorizon', false -site.after(canvas) + if certainlyHandled.some((ext) => url.includes ext) + canvas.setAttribute 'src', url + else if url.includes '.wrl' + // Need to obtain the text and check what level it is + response := await fetch url + text .= await response.text() + if /#\s*VRML\s*V?1[.]/i.test text + text = convert text + browser.baseURL = url + scene := await browser.createX3DFromString text + browser.replaceWorld scene + canvas + +// Put eye icons after all of the eligible links +links := $('a').filter -> !!@.getAttribute('href')?.match knownExtensions +links.after -> + newSpan := $('👁') + newSpan.hover + (-> $(@).css 'background-color', 'lightblue'), + (-> $(@).css 'background-color', 'inherit') + newSpan.on 'click', @, + (e) => + eye := e.target + state .= eye.getAttribute 'data' + unless state + state = 'off' + url := e.data.getAttribute('href') ?? '' + $(eye).after await makeBrowser url + if state is 'off' + eye.setAttribute 'data', 'on' + $(eye).css 'text-decoration', 'line-through 3px' + $(eye.nextSibling as Element).show() + else + eye.setAttribute 'data', 'off' + $(eye).css 'text-decoration', 'none' + $(eye.nextSibling as Element).hide()