Added "?design=..." query capability for classic

Also added a button in the GitHub browser app, and a new menu entry for the web component.
vZome · Mar 27, 2024 · 0aace91 · 0aace91
1 parent ba34952
commit 0aace91
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 3 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -52,6 +52,16 @@
         "/": "${workspaceFolder}/online/src"
       }
     },
+    {
+      "name":             "classic w/design",
+
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:8532/classic/index.html?design=//raw.githubusercontent.com/vorth/vzome-sharing/main/2021/09/11/10-10-11-rose-olive-bombshell-solid/rose-olive-bombshell-solid.vZome",
+      "pathMapping": {
+        "/": "${workspaceFolder}/online/src"
+      }
+    },
     {
       "name":             "classic PWA",
 

diff --git a/online/src/app/browser/browser.jsx b/online/src/app/browser/browser.jsx
@@ -39,6 +39,8 @@ const DesignList = (props) =>
   );
 }
 
+const classicURL = new URL( '../classic/index.html', window.location ) .toString() + "?design=";
+
 const DesignActions = (props) =>
 {
   const copyHtml = path =>
@@ -76,6 +78,9 @@ const DesignActions = (props) =>
         <Button variant="contained" target="_blank" rel="noopener" href={ getAssetUrl( props.githubUser, props.path ) }>
           Show GitHub Assets
         </Button>
+        <Button variant="contained" color="secondary" target="_blank" rel="noopener" href={ classicURL + props.url }>
+          Open in vZome Online
+        </Button>
       </div>
     </Show>
   );

diff --git a/online/src/app/classic/menus/filemenu.jsx b/online/src/app/classic/menus/filemenu.jsx
@@ -1,5 +1,5 @@
 
-import { createEffect, createSignal, mergeProps } from "solid-js";
+import { createEffect, createSignal, mergeProps, onMount } from "solid-js";
 import { unwrap } from "solid-js/store";
 
 import { controllerExportAction, controllerProperty, useEditor } from "../../../viewer/context/editor.jsx";
@@ -11,6 +11,12 @@ import { UrlDialog } from '../dialogs/webloader.jsx'
 import { SvgPreviewDialog } from "../dialogs/svgpreview.jsx";
 import { useCamera } from "../../../viewer/context/camera.jsx";
 
+const queryParams = new URLSearchParams( window.location.search );
+const relativeUrl = queryParams.get( 'design' );
+
+// Must make this absolute before the worker tries to, with the wrong base URL
+const url = ( relativeUrl && new URL( relativeUrl, window.location ) .toString() );
+
 const NewDesignItem = props =>
 {
   const { rootController } = useEditor();
@@ -83,6 +89,9 @@ export const FileMenu = () =>
     }
   }
 
+  // Open the design indicated in the query string, if any
+  onMount( () => url && openUrl( url ) );
+
   const [ svgPreview, setSvgPreview ] = createSignal( false );
 
   const exportAs = ( extension, mimeType, format=extension ) => evt =>

diff --git a/online/src/viewer/export.jsx b/online/src/viewer/export.jsx
@@ -1,10 +1,12 @@
 
-import { DropdownMenu } from "@kobalte/core";
+import { DropdownMenu, Link } from "@kobalte/core";
 
 import { useViewer } from "./context/viewer.jsx";
 import { saveFileAs } from "../viewer/util/files.js";
 import { useGltfExporter } from "./geometry.jsx";
 
+const editUrlBase = 'https://vzome.com/app/classic/index.html?design=';
+
 export const ExportMenu = (props) =>
 {
   const { source } = useViewer();
@@ -42,6 +44,11 @@ export const ExportMenu = (props) =>
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal mount={props.root}>
         <DropdownMenu.Content class="exports__content">
+          <DropdownMenu.Item closeOnSelect={true} class="exports__item">
+            <Link.Root class="link" href={ editUrlBase + source.url } target="_blank" rel="noopener">
+              Open in vZome Online
+            </Link.Root>
+          </DropdownMenu.Item>
           <DropdownMenu.Item onSelect={downloadVZome} closeOnSelect={true} class="exports__item">
             .vZome source
           </DropdownMenu.Item>

diff --git a/online/src/viewer/index.jsx b/online/src/viewer/index.jsx
@@ -133,7 +133,7 @@ const UrlViewer = (props) =>
   return (
     <CameraProvider>
       <WorkerStateProvider workerClient={props.workerClient}>
-        <ViewerProvider config={{ url: props.url, preview: true, debug: false, showScenes: props.showScenes, labels: props.config.labels }}>
+        <ViewerProvider config={{ url: props.url, preview: true, debug: false, showScenes: props.showScenes, labels: props.config?.labels }}>
           <DesignViewer config={ { ...props.config, allowFullViewport: true } }
               componentRoot={props.componentRoot}
               height="100%" width="100%" >