From 77216955000efb2ea7ed2f0a5ee33708134df823 Mon Sep 17 00:00:00 2001
From: Drew C Youngren <dcy2@columbia.edu>
Date: Fri, 3 Nov 2023 22:22:34 -0400
Subject: [PATCH 1/5] Name select elements

---
 media/src/Story.svelte      |  1 +
 media/src/docs/HowTo.svelte | 11 +++++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/media/src/Story.svelte b/media/src/Story.svelte
index 6226059b..21447e17 100644
--- a/media/src/Story.svelte
+++ b/media/src/Story.svelte
@@ -15,6 +15,7 @@
     <select
         bind:value={currentStory}
         class="demos-obj-select form-select bg-primary border-primary text-light"
+        name="story-selector"
     >
         <option value={null}>Select Story...</option>
         <option value={ArcLength}>Arc Length</option>
diff --git a/media/src/docs/HowTo.svelte b/media/src/docs/HowTo.svelte
index 94b1829b..7bb64ff9 100644
--- a/media/src/docs/HowTo.svelte
+++ b/media/src/docs/HowTo.svelte
@@ -16,7 +16,7 @@
         { title: 'Importing & Formatting', comp: DocImport },
         { title: 'Keyboard Shortcuts', comp: DocKeyControls },
         { title: 'Special Parameters', comp: DocObjParam },
-        { title: 'Quick Nav', comp: DocQuickNav},
+        { title: 'Quick Nav', comp: DocQuickNav },
         { title: 'Object Window', comp: DocObjWindow },
         { title: 'Polling', comp: DocPolling },
     ];
@@ -24,9 +24,12 @@
 
 <article>
     <div class="container">
-        <select class="form-select mb-1 bg-primary border-primary text-light"
-                aria-label="Select documentation section"
-                bind:value={currentOption}>
+        <select
+            class="form-select mb-1 bg-primary border-primary text-light"
+            name="howto-selector"
+            aria-label="Select documentation section"
+            bind:value={currentOption}
+        >
             {#each options as { title, comp }}
                 <option value={comp}>{title}</option>
             {/each}

From 94ba2606959f4f04a94b339d07f0412c000137db Mon Sep 17 00:00:00 2001
From: Drew C Youngren <dcy2@columbia.edu>
Date: Fri, 3 Nov 2023 22:23:38 -0400
Subject: [PATCH 2/5] Hide panel in query string

---
 media/src/App.svelte   |  3 ++
 media/src/Panel.svelte | 63 +++++++++++++++++-------------------------
 2 files changed, 29 insertions(+), 37 deletions(-)

diff --git a/media/src/App.svelte b/media/src/App.svelte
index afd4d534..0780c700 100644
--- a/media/src/App.svelte
+++ b/media/src/App.svelte
@@ -33,6 +33,7 @@
     let debug = false;
     let stats;
     let panel = null;
+    let showPanel = true;
 
     let scaleAnimation = false;
     let scaleUpdate;
@@ -530,6 +531,7 @@
     const makeQueryStringObject = function () {
         const flattenedObjects = {
             currentChapter,
+            showPanel,
         };
         if (gridMeshes.visible) {
             flattenedObjects['grid'] = true;
@@ -725,6 +727,7 @@
             bind:selectedObjects
             bind:selectedPoint
             bind:isPollsOpen
+            bind:showPanel
             {isHost}
             {blowUpObjects}
             {selectObject}
diff --git a/media/src/Panel.svelte b/media/src/Panel.svelte
index ae7a88df..d2001f0a 100644
--- a/media/src/Panel.svelte
+++ b/media/src/Panel.svelte
@@ -15,7 +15,8 @@
     import {
         // makeHSLColor,
         querySelectorIncludesText,
-        tripleToHex, joinUrl
+        tripleToHex,
+        joinUrl,
     } from './utils';
     import { publishScene } from './sceneUtils';
 
@@ -59,12 +60,9 @@
     export let lockPoll;
     export let objectResponses;
 
-    const PANEL_DELAY = 200;
-    let showPanel = true;
+    export let showPanel = true;
+    let panelEl;
     let panelWidth = 370;
-    let panelOffset = 0;
-    let panelTransition = '';
-    let panelTransitionProperty = '';
 
     const kindToComponent = {
         point: Point,
@@ -208,21 +206,6 @@
         kindToAdd = null;
     }
 
-    const onTogglePanel = function () {
-        panelTransition = `all ${PANEL_DELAY}ms ease`;
-        panelTransitionProperty = 'transform';
-
-        showPanel = !showPanel;
-
-        // De-activate transition easing by default, so user can still
-        // manually resize the panel without weird transition
-        // interference.
-        setTimeout(() => {
-            panelTransition = '';
-            panelTransitionProperty = '';
-        }, PANEL_DELAY);
-    };
-
     /**
      * Show the "Info" accordion item.
      */
@@ -261,6 +244,9 @@
                 if (key === 'currentChapter') {
                     currentChapter = val;
                 }
+                if (key === 'showPanel') {
+                    showPanel = !(val === 'false');
+                }
                 if (key === 'grid') {
                     gridMeshes.visible = val === 'true';
                 }
@@ -287,31 +273,22 @@
             }
         }
 
-        const panelEl = document.querySelector('.demos-panel');
         resizeObserver.observe(panelEl);
     });
 
     onDestroy(() => {
-        const panelEl = document.querySelector('.demos-panel');
         resizeObserver.unobserve(panelEl);
     });
 
     const onKeyDown = (e) => {
         if (e.key === 'h') {
-            onTogglePanel();
+            showPanel = !showPanel;
         }
     };
     window.addEventListener('keydown', onKeyDown, false);
-
-    $: panelOffset = showPanel ? 0 : -100;
 </script>
 
-<div
-    class="demos-panel"
-    style:transition={panelTransition}
-    style:transition-property={panelTransitionProperty}
-    style:transform={`translateX(${panelOffset}%)`}
->
+<div class="demos-panel" class:collapsed={!showPanel} bind:this={panelEl}>
     <div id="panelAccordion" class="accordion">
         <a href="/" title="Home" class="demos-logo">
             <img
@@ -458,6 +435,7 @@
                                 <select
                                     bind:value={kindToAdd}
                                     class="demos-obj-select form-select bg-primary border-primary text-light"
+                                    name="object-kind-adder"
                                 >
                                     <option value={null}>
                                         Add Object &#xFF0B;
@@ -731,14 +709,14 @@
 </div>
 <!-- end .demos-panel -->
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
     class="panel-button panel-hider bg-info bg-opacity-25 border border-info border-start-0 rounded-end-circle"
     title={showPanel ? 'Hide panel' : 'Show panel'}
-    on:click={onTogglePanel}
-    on:keypress={onTogglePanel}
-    style:transition={panelTransition}
-    style:transition-property={panelTransitionProperty}
-    style:transform={`translateX(${showPanel ? 0 : -panelWidth}px)`}
+    on:click={() => (showPanel = !showPanel)}
+    on:keypress={() => (showPanel = !showPanel)}
+    class:collapsed={!showPanel}
+    style="--collapsed-width: translateX(-{panelWidth}px);"
 >
     <div class="align-middle text-center">
         {#if showPanel}
@@ -775,6 +753,12 @@
         overflow-x: hidden;
 
         resize: horizontal;
+
+        transform: translateX(0%);
+        transition: transform 100ms ease-in-out;
+    }
+    .demos-panel.collapsed {
+        transform: translateX(-100%);
     }
 
     .panel-button {
@@ -798,6 +782,11 @@
 
     .panel-button.panel-hider {
         top: 40px;
+        transform: translateX(0%);
+        transition: transform 100ms ease-in-out;
+    }
+    .panel-button.panel-hider.collapsed {
+        transform: var(--collapsed-width);
     }
 
     .chapterBox,

From 924a437358e77211cec9b4895062c8f9a0ce92a5 Mon Sep 17 00:00:00 2001
From: Drew C Youngren <dcy2@columbia.edu>
Date: Fri, 3 Nov 2023 22:29:00 -0400
Subject: [PATCH 3/5] Remove warning suppression

---
 media/src/Panel.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/media/src/Panel.svelte b/media/src/Panel.svelte
index d2001f0a..157c898f 100644
--- a/media/src/Panel.svelte
+++ b/media/src/Panel.svelte
@@ -709,7 +709,6 @@
 </div>
 <!-- end .demos-panel -->
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
     class="panel-button panel-hider bg-info bg-opacity-25 border border-info border-start-0 rounded-end-circle"
     title={showPanel ? 'Hide panel' : 'Show panel'}

From 9d0aa00695c04546663f33e7d9be0ee7d4c79964 Mon Sep 17 00:00:00 2001
From: Drew C Youngren <dcy2@columbia.edu>
Date: Sun, 5 Nov 2023 15:21:38 -0500
Subject: [PATCH 4/5] Clean css transition

---
 media/src/Panel.svelte | 852 ++++++++++++++++++++---------------------
 1 file changed, 421 insertions(+), 431 deletions(-)

diff --git a/media/src/Panel.svelte b/media/src/Panel.svelte
index 157c898f..5608fe65 100644
--- a/media/src/Panel.svelte
+++ b/media/src/Panel.svelte
@@ -2,7 +2,7 @@
     /**
      * Main 3Demos control panel, to the left of the scene.
      */
-    import { onMount, onDestroy } from 'svelte';
+    import { onMount } from 'svelte';
     import { slide } from 'svelte/transition';
     import { quintOut } from 'svelte/easing';
 
@@ -61,8 +61,6 @@
     export let objectResponses;
 
     export let showPanel = true;
-    let panelEl;
-    let panelWidth = 370;
 
     const kindToComponent = {
         point: Point,
@@ -226,14 +224,6 @@
         tabEl.click();
     };
 
-    const resizeObserver = new ResizeObserver((entries) => {
-        for (let entry of entries) {
-            if (entry && entry.contentRect && entry.contentRect.width) {
-                panelWidth = entry.contentRect.width;
-            }
-        }
-    });
-
     onMount(() => {
         const urlParams = new URLSearchParams(location.search);
         if (urlParams.keys()) {
@@ -272,12 +262,6 @@
                 if (debug) console.log(objects);
             }
         }
-
-        resizeObserver.observe(panelEl);
-    });
-
-    onDestroy(() => {
-        resizeObserver.unobserve(panelEl);
     });
 
     const onKeyDown = (e) => {
@@ -288,427 +272,450 @@
     window.addEventListener('keydown', onKeyDown, false);
 </script>
 
-<div class="demos-panel" class:collapsed={!showPanel} bind:this={panelEl}>
-    <div id="panelAccordion" class="accordion">
-        <a href="/" title="Home" class="demos-logo">
-            <img
-                alt="3Demos logo"
-                src={joinUrl(window.STATIC_PREFIX, './3demos-logo.svg')}
-            />
-        </a>
-
-        <div class="accordion-item demos-panel-box">
-            <h2 class="accordion-header">
-                <button
-                    class="accordion-button collapsed"
-                    id="info"
-                    type="button"
-                    data-bs-toggle="collapse"
-                    data-bs-target="#collapseOne"
-                    aria-expanded="false"
-                    aria-controls="collapseOne"
+<aside class="panel-wrapper" class:collapsed={!showPanel}>
+    <div class="demos-panel">
+        <div id="panelAccordion" class="accordion">
+            <a href="/" title="Home" class="demos-logo">
+                <img
+                    alt="3Demos logo"
+                    src={joinUrl(window.STATIC_PREFIX, './3demos-logo.svg')}
+                />
+            </a>
+
+            <div class="accordion-item demos-panel-box">
+                <h2 class="accordion-header">
+                    <button
+                        class="accordion-button collapsed"
+                        id="info"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseOne"
+                        aria-expanded="false"
+                        aria-controls="collapseOne"
+                    >
+                        Info
+                    </button>
+                </h2>
+                <div
+                    id="collapseOne"
+                    class="accordion-collapse collapse show"
+                    data-bs-parent="#panelAccordion"
                 >
-                    Info
-                </button>
-            </h2>
-            <div
-                id="collapseOne"
-                class="accordion-collapse collapse show"
-                data-bs-parent="#panelAccordion"
-            >
-                <div class="chapterBox">
-                    <div class="collapse-info">
-                        <TabContent on:tab={(e) => (currentMode = e.detail)}>
-                            <TabPane
-                                tabId="how-to"
-                                tab="Creation"
-                                active={currentMode === 'how-to'}
-                            >
-                                <HowTo />
-                            </TabPane>
-                            <TabPane
-                                tabId="session"
-                                tab="Session"
-                                active={currentMode === 'session'}
+                    <div class="chapterBox">
+                        <div class="collapse-info">
+                            <TabContent
+                                on:tab={(e) => (currentMode = e.detail)}
                             >
-                                <Session
-                                    bind:roomId
-                                    bind:socket
-                                    bind:objects
-                                    bind:currentPoll
-                                    bind:chatBuffer
-                                    {pollResponses}
-                                    {selectedPoint}
-                                    {selectedObjects}
-                                    {isHost}
-                                />
-                            </TabPane>
-                            <TabPane
-                                tabId="story"
-                                tab="Story"
-                                active={currentMode === 'story'}
-                            >
-                                <Story
-                                    bind:objects
-                                    {scene}
-                                    render={requestFrameIfNotRequested}
-                                    on:animate={animateIfNotAnimating}
-                                />
-                            </TabPane>
-                            <TabPane
-                                tabId="about"
-                                tab="About"
-                                active={currentMode === 'about'}
-                            >
-                                <About />
-                            </TabPane>
-                        </TabContent>
+                                <TabPane
+                                    tabId="how-to"
+                                    tab="Creation"
+                                    active={currentMode === 'how-to'}
+                                >
+                                    <HowTo />
+                                </TabPane>
+                                <TabPane
+                                    tabId="session"
+                                    tab="Session"
+                                    active={currentMode === 'session'}
+                                >
+                                    <Session
+                                        bind:roomId
+                                        bind:socket
+                                        bind:objects
+                                        bind:currentPoll
+                                        bind:chatBuffer
+                                        {pollResponses}
+                                        {selectedPoint}
+                                        {selectedObjects}
+                                        {isHost}
+                                    />
+                                </TabPane>
+                                <TabPane
+                                    tabId="story"
+                                    tab="Story"
+                                    active={currentMode === 'story'}
+                                >
+                                    <Story
+                                        bind:objects
+                                        {scene}
+                                        render={requestFrameIfNotRequested}
+                                        on:animate={animateIfNotAnimating}
+                                    />
+                                </TabPane>
+                                <TabPane
+                                    tabId="about"
+                                    tab="About"
+                                    active={currentMode === 'about'}
+                                >
+                                    <About />
+                                </TabPane>
+                            </TabContent>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <!-- end .demos-panel-box -->
+            <!-- end .demos-panel-box -->
+
+            {#if currentMode === 'session' && isHost}
+                <div class="accordion-item demos-panel-box">
+                    <h2 class="accordion-header">
+                        <button
+                            class="accordion-button collapsed"
+                            id="polls"
+                            type="button"
+                            data-bs-toggle="collapse"
+                            data-bs-target="#collapseTwo"
+                            aria-expanded="false"
+                            aria-controls="collapseTwo"
+                        >
+                            Polls
+                        </button>
+                    </h2>
+                    <div
+                        id="collapseTwo"
+                        class="accordion-collapse collapse"
+                        data-bs-parent="#panelAccordion"
+                    >
+                        <Polls
+                            bind:pollResponses
+                            bind:isPollsOpen
+                            bind:lockPoll
+                            bind:objects
+                            bind:currentPoll
+                            {socket}
+                            {objectResponses}
+                            render={requestFrameIfNotRequested}
+                        />
+                    </div>
+                </div>
+            {/if}
 
-        {#if currentMode === 'session' && isHost}
             <div class="accordion-item demos-panel-box">
                 <h2 class="accordion-header">
                     <button
                         class="accordion-button collapsed"
-                        id="polls"
+                        id="objects"
                         type="button"
                         data-bs-toggle="collapse"
-                        data-bs-target="#collapseTwo"
+                        data-bs-target="#collapseThree"
                         aria-expanded="false"
-                        aria-controls="collapseTwo"
+                        aria-controls="collapseThree"
                     >
-                        Polls
+                        Objects
                     </button>
                 </h2>
                 <div
-                    id="collapseTwo"
+                    id="collapseThree"
                     class="accordion-collapse collapse"
                     data-bs-parent="#panelAccordion"
                 >
-                    <Polls
-                        bind:pollResponses
-                        bind:isPollsOpen
-                        bind:lockPoll
-                        bind:objects
-                        bind:currentPoll
-                        {socket}
-                        {objectResponses}
-                        render={requestFrameIfNotRequested}
-                    />
-                </div>
-            </div>
-        {/if}
-
-        <div class="accordion-item demos-panel-box">
-            <h2 class="accordion-header">
-                <button
-                    class="accordion-button collapsed"
-                    id="objects"
-                    type="button"
-                    data-bs-toggle="collapse"
-                    data-bs-target="#collapseThree"
-                    aria-expanded="false"
-                    aria-controls="collapseThree"
-                >
-                    Objects
-                </button>
-            </h2>
-            <div
-                id="collapseThree"
-                class="accordion-collapse collapse"
-                data-bs-parent="#panelAccordion"
-            >
-                <div class="objectBoxOuter">
-                    <div class="collapse-info">
-                        <div class="object-box-title d-flex mb-2">
-                            <h2 class="flex-grow-1 px-2">3D Objects</h2>
-                        </div>
-                        <div
-                            class="btn-toolbar justify-content-between"
-                            role="toolbar"
-                        >
-                            <div class="btn-group mb-2">
-                                <select
-                                    bind:value={kindToAdd}
-                                    class="demos-obj-select form-select bg-primary border-primary text-light"
-                                    name="object-kind-adder"
-                                >
-                                    <option value={null}>
-                                        Add Object &#xFF0B;
-                                    </option>
-                                    <option value="point">point</option>
-                                    <option value="vector">vector</option>
-                                    <option value="curve">curve</option>
-                                    <option value="graph">graph</option>
-                                    <option value="level">level surface</option>
-                                    <option value="surface"
-                                        >parametric surface</option
+                    <div class="objectBoxOuter">
+                        <div class="collapse-info">
+                            <div class="object-box-title d-flex mb-2">
+                                <h2 class="flex-grow-1 px-2">3D Objects</h2>
+                            </div>
+                            <div
+                                class="btn-toolbar justify-content-between"
+                                role="toolbar"
+                            >
+                                <div class="btn-group mb-2">
+                                    <select
+                                        bind:value={kindToAdd}
+                                        class="demos-obj-select form-select bg-primary border-primary text-light"
+                                        name="object-kind-adder"
                                     >
-                                    <option value="solid">solid region</option>
-                                    <option value="field">vector field</option>
-                                </select>
-
-                                <button
-                                    class="btn btn-sm btn-danger"
-                                    on:click={blowUpObjects}
-                                >
-                                    Clear Objects
-                                    <i class="fa fa-trash" />
-                                </button>
+                                        <option value={null}>
+                                            Add Object &#xFF0B;
+                                        </option>
+                                        <option value="point">point</option>
+                                        <option value="vector">vector</option>
+                                        <option value="curve">curve</option>
+                                        <option value="graph">graph</option>
+                                        <option value="level"
+                                            >level surface</option
+                                        >
+                                        <option value="surface"
+                                            >parametric surface</option
+                                        >
+                                        <option value="solid"
+                                            >solid region</option
+                                        >
+                                        <option value="field"
+                                            >vector field</option
+                                        >
+                                    </select>
+
+                                    <button
+                                        class="btn btn-sm btn-danger"
+                                        on:click={blowUpObjects}
+                                    >
+                                        Clear Objects
+                                        <i class="fa fa-trash" />
+                                    </button>
+                                </div>
+                                {#if currentMode === 'session' && isHost}
+                                    <button
+                                        class="btn btn-sm btn-primary mb-2"
+                                        on:click={onPublishScene}
+                                    >
+                                        Publish Scene
+                                        <i class="bi bi-broadcast-pin" />
+                                    </button>
+                                {/if}
                             </div>
-                            {#if currentMode === 'session' && isHost}
-                                <button
-                                    class="btn btn-sm btn-primary mb-2"
-                                    on:click={onPublishScene}
-                                >
-                                    Publish Scene
-                                    <i class="bi bi-broadcast-pin" />
-                                </button>
-                            {/if}
-                        </div>
 
-                        <div class="objectBoxInner">
-                            <!-- Main Loop, if you will -->
-                            {#each objects as { uuid, kind, params, color, title, animation, ...etc } (uuid)}
-                                <div
-                                    transition:slide={{
-                                        delay: 0,
-                                        duration: 300,
-                                        easing: quintOut,
-                                    }}
-                                >
-                                    <svelte:component
-                                        this={kindToComponent[kind]}
-                                        {scene}
-                                        {onRenderObject}
-                                        {onDestroyObject}
-                                        camera={currentCamera}
-                                        controls={currentControls}
-                                        render={requestFrameIfNotRequested}
-                                        {params}
-                                        meta={etc}
-                                        onClose={() => {
-                                            objects = objects.filter(
-                                                (b) => b.uuid !== uuid
-                                            );
-                                            selectedObjects =
-                                                selectedObjects.filter(
-                                                    (objectId) =>
-                                                        objectId !== uuid
-                                                );
+                            <div class="objectBoxInner">
+                                <!-- Main Loop, if you will -->
+                                {#each objects as { uuid, kind, params, color, title, animation, ...etc } (uuid)}
+                                    <div
+                                        transition:slide={{
+                                            delay: 0,
+                                            duration: 300,
+                                            easing: quintOut,
                                         }}
-                                        bind:color
-                                        bind:title
-                                        bind:animation
-                                        {uuid}
-                                        {gridStep}
-                                        {gridMax}
-                                        on:animate={animateIfNotAnimating}
-                                        bind:selectedObjects
-                                        selected={selectedObjects.includes(
-                                            uuid
-                                        )}
-                                        onSelect={() => selectObject(uuid)}
-                                        bind:selectedPoint
-                                    />
-                                </div>
-                            {/each}
-                        </div>
+                                    >
+                                        <svelte:component
+                                            this={kindToComponent[kind]}
+                                            {scene}
+                                            {onRenderObject}
+                                            {onDestroyObject}
+                                            camera={currentCamera}
+                                            controls={currentControls}
+                                            render={requestFrameIfNotRequested}
+                                            {params}
+                                            meta={etc}
+                                            onClose={() => {
+                                                objects = objects.filter(
+                                                    (b) => b.uuid !== uuid
+                                                );
+                                                selectedObjects =
+                                                    selectedObjects.filter(
+                                                        (objectId) =>
+                                                            objectId !== uuid
+                                                    );
+                                            }}
+                                            bind:color
+                                            bind:title
+                                            bind:animation
+                                            {uuid}
+                                            {gridStep}
+                                            {gridMax}
+                                            on:animate={animateIfNotAnimating}
+                                            bind:selectedObjects
+                                            selected={selectedObjects.includes(
+                                                uuid
+                                            )}
+                                            onSelect={() => selectObject(uuid)}
+                                            bind:selectedPoint
+                                        />
+                                    </div>
+                                {/each}
+                            </div>
 
-                        <!-- debug buttons -->
-
-                        {#if debug}
-                            <div>
-                                <button
-                                    on:click={() => {
-                                        objects = [
-                                            {
-                                                uuid: 34,
-                                                kind: 'curve',
-                                                params: {
-                                                    a: '0',
-                                                    b: '2*pi',
-                                                    x: 'cos(t)',
-                                                    y: 'sin(t)',
-                                                    z: '0',
+                            <!-- debug buttons -->
+
+                            {#if debug}
+                                <div>
+                                    <button
+                                        on:click={() => {
+                                            objects = [
+                                                {
+                                                    uuid: 34,
+                                                    kind: 'curve',
+                                                    params: {
+                                                        a: '0',
+                                                        b: '2*pi',
+                                                        x: 'cos(t)',
+                                                        y: 'sin(t)',
+                                                        z: '0',
+                                                    },
+                                                    color: '#aa33ff',
+                                                    animation: true,
                                                 },
-                                                color: '#aa33ff',
-                                                animation: true,
-                                            },
-                                            {
-                                                uuid: '34point22',
-                                                kind: 'point',
-                                                params: {
-                                                    a: 'cos(2 t)',
-                                                    b: 'sin(2 t)',
-                                                    c: 'cos(2 t) + sin(2 t)',
-                                                    t0: '0',
-                                                    t1: '2 pi',
+                                                {
+                                                    uuid: '34point22',
+                                                    kind: 'point',
+                                                    params: {
+                                                        a: 'cos(2 t)',
+                                                        b: 'sin(2 t)',
+                                                        c: 'cos(2 t) + sin(2 t)',
+                                                        t0: '0',
+                                                        t1: '2 pi',
+                                                    },
+                                                    color: '#FF0000',
+                                                    animation: false,
                                                 },
-                                                color: '#FF0000',
-                                                animation: false,
-                                            },
-                                            {
-                                                uuid: 345,
-                                                kind: 'vector',
-                                                params: {
-                                                    a: 'cos(t)',
-                                                    b: 'sin(t)',
-                                                    c: '1',
-                                                    x: 'cos(t)',
-                                                    y: 'sin(t)',
-                                                    z: '0',
-                                                    t0: '0',
-                                                    t1: '2*pi',
+                                                {
+                                                    uuid: 345,
+                                                    kind: 'vector',
+                                                    params: {
+                                                        a: 'cos(t)',
+                                                        b: 'sin(t)',
+                                                        c: '1',
+                                                        x: 'cos(t)',
+                                                        y: 'sin(t)',
+                                                        z: '0',
+                                                        t0: '0',
+                                                        t1: '2*pi',
+                                                    },
+                                                    color: '#ff33ff',
+                                                    animation: false,
                                                 },
-                                                color: '#ff33ff',
-                                                animation: false,
-                                            },
-                                        ];
-                                    }}>curve anim</button
-                                >
-                                <button
-                                    on:click={() => {
-                                        objects = [
-                                            {
-                                                uuid: 34,
-                                                kind: 'curve',
-                                                params: {
-                                                    a: '0',
-                                                    b: '2*pi',
-                                                    x: 'cos(t)',
-                                                    y: 'sin(t)',
-                                                    z: '0',
+                                            ];
+                                        }}>curve anim</button
+                                    >
+                                    <button
+                                        on:click={() => {
+                                            objects = [
+                                                {
+                                                    uuid: 34,
+                                                    kind: 'curve',
+                                                    params: {
+                                                        a: '0',
+                                                        b: '2*pi',
+                                                        x: 'cos(t)',
+                                                        y: 'sin(t)',
+                                                        z: '0',
+                                                    },
+                                                    color: '#aa33ff',
+                                                    animation: false,
                                                 },
-                                                color: '#aa33ff',
-                                                animation: false,
-                                            },
-                                            {
-                                                uuid: '34point22',
-                                                kind: 'point',
-                                                params: {
-                                                    a: 'cos(2 t)',
-                                                    b: 'sin(2 t)',
-                                                    c: 'cos(2 t) + sin(2 t)',
-                                                    t0: '0',
-                                                    t1: '2*pi',
+                                                {
+                                                    uuid: '34point22',
+                                                    kind: 'point',
+                                                    params: {
+                                                        a: 'cos(2 t)',
+                                                        b: 'sin(2 t)',
+                                                        c: 'cos(2 t) + sin(2 t)',
+                                                        t0: '0',
+                                                        t1: '2*pi',
+                                                    },
+                                                    color: '#FF0000',
+                                                    animation: true,
                                                 },
-                                                color: '#FF0000',
-                                                animation: true,
-                                            },
-                                            {
-                                                uuid: 345,
-                                                kind: 'vector',
-                                                params: {
-                                                    a: 'cos(t)',
-                                                    b: 'sin(t)',
-                                                    c: '1',
-                                                    x: 'cos(t)',
-                                                    y: 'sin(t)',
-                                                    z: '0',
-                                                    t0: '0',
-                                                    t1: '2*pi',
+                                                {
+                                                    uuid: 345,
+                                                    kind: 'vector',
+                                                    params: {
+                                                        a: 'cos(t)',
+                                                        b: 'sin(t)',
+                                                        c: '1',
+                                                        x: 'cos(t)',
+                                                        y: 'sin(t)',
+                                                        z: '0',
+                                                        t0: '0',
+                                                        t1: '2*pi',
+                                                    },
+                                                    color: '#ff33ff',
+                                                    animation: true,
                                                 },
-                                                color: '#ff33ff',
-                                                animation: true,
-                                            },
-                                        ];
-                                    }}>point/vec anim</button
-                                >
-                                <button
-                                    on:click={() => {
-                                        objects = [
-                                            {
-                                                uuid: 'agraph3847',
-                                                kind: 'graph',
-                                                params: {
-                                                    a: '-1',
-                                                    b: '1',
-                                                    c: '-1',
-                                                    d: '1',
-                                                    z: 'x^2 - 3*cos(t) * x * y + y^2',
-                                                    t0: '0',
-                                                    t1: '2*pi',
+                                            ];
+                                        }}>point/vec anim</button
+                                    >
+                                    <button
+                                        on:click={() => {
+                                            objects = [
+                                                {
+                                                    uuid: 'agraph3847',
+                                                    kind: 'graph',
+                                                    params: {
+                                                        a: '-1',
+                                                        b: '1',
+                                                        c: '-1',
+                                                        d: '1',
+                                                        z: 'x^2 - 3*cos(t) * x * y + y^2',
+                                                        t0: '0',
+                                                        t1: '2*pi',
+                                                    },
+                                                    color: '#ff33ff',
+                                                    animation: true,
                                                 },
-                                                color: '#ff33ff',
-                                                animation: true,
-                                            },
-                                        ];
-                                    }}>anim func</button
-                                >
-                                <button
-                                    on:click={() => {
-                                        objects = [
-                                            {
-                                                uuid: 'agraph3847',
-                                                kind: 'graph',
-                                                params: {
-                                                    a: '-1',
-                                                    b: '1',
-                                                    c: '-1',
-                                                    d: '1',
-                                                    z: 'x^2 - 3*cos(t) * x * y + y^2',
-                                                    t0: '0',
-                                                    t1: '2*pi',
+                                            ];
+                                        }}>anim func</button
+                                    >
+                                    <button
+                                        on:click={() => {
+                                            objects = [
+                                                {
+                                                    uuid: 'agraph3847',
+                                                    kind: 'graph',
+                                                    params: {
+                                                        a: '-1',
+                                                        b: '1',
+                                                        c: '-1',
+                                                        d: '1',
+                                                        z: 'x^2 - 3*cos(t) * x * y + y^2',
+                                                        t0: '0',
+                                                        t1: '2*pi',
+                                                    },
+                                                    color: '#ff33ff',
+                                                    animation: false,
                                                 },
-                                                color: '#ff33ff',
-                                                animation: false,
-                                            },
-                                        ];
-                                    }}>unanim func</button
-                                >
-                                <button
-                                    on:click={() => {
-                                        objects = [
-                                            {
-                                                uuid: 'swirly1234',
-                                                kind: 'field',
-                                                params: {
-                                                    p: 'x/2',
-                                                    q: '-z',
-                                                    r: 'y',
-                                                    nVec: '5',
+                                            ];
+                                        }}>unanim func</button
+                                    >
+                                    <button
+                                        on:click={() => {
+                                            objects = [
+                                                {
+                                                    uuid: 'swirly1234',
+                                                    kind: 'field',
+                                                    params: {
+                                                        p: 'x/2',
+                                                        q: '-z',
+                                                        r: 'y',
+                                                        nVec: '5',
+                                                    },
+                                                    color: '#ff33ff',
+                                                    animation: true,
                                                 },
-                                                color: '#ff33ff',
-                                                animation: true,
-                                            },
-                                        ];
-                                    }}>anim field</button
-                                >
-                                <button
-                                    on:click={() => {
-                                        objects = [
-                                            {
-                                                uuid: 'swirly1234',
-                                                kind: 'field',
-                                                params: {
-                                                    p: 'x/2',
-                                                    q: '-z',
-                                                    r: 'y',
-                                                    nVec: '5',
+                                            ];
+                                        }}>anim field</button
+                                    >
+                                    <button
+                                        on:click={() => {
+                                            objects = [
+                                                {
+                                                    uuid: 'swirly1234',
+                                                    kind: 'field',
+                                                    params: {
+                                                        p: 'x/2',
+                                                        q: '-z',
+                                                        r: 'y',
+                                                        nVec: '5',
+                                                    },
+                                                    color: '#ff33ff',
+                                                    animation: false,
                                                 },
-                                                color: '#ff33ff',
-                                                animation: false,
-                                            },
-                                        ];
-                                    }}>unanim field</button
-                                >
-                            </div>
-                        {/if}
+                                            ];
+                                        }}>unanim field</button
+                                    >
+                                </div>
+                            {/if}
+                        </div>
                     </div>
+                    <!-- end .objectBoxOuter -->
                 </div>
-                <!-- end .objectBoxOuter -->
             </div>
         </div>
+        <!-- end .accordion -->
     </div>
-    <!-- end .accordion -->
-</div>
+    <button
+        class="panel-hider"
+        on:click={() => (showPanel = !showPanel)}
+        title={showPanel ? 'Hide panel' : 'Show panel'}
+    >
+        {#if showPanel}
+            <i class="bi bi-arrow-bar-left" />
+        {:else}
+            <i class="bi bi-arrow-bar-right" />
+        {/if}
+    </button>
+</aside>
+
 <!-- end .demos-panel -->
 
+<!-- 
 <div
     class="panel-button panel-hider bg-info bg-opacity-25 border border-info border-start-0 rounded-end-circle"
     title={showPanel ? 'Hide panel' : 'Show panel'}
@@ -724,7 +731,7 @@
             <i class="bi bi-arrow-bar-right" />
         {/if}
     </div>
-</div>
+</div> -->
 
 <style>
     :global(#panelAccordion .collapse-info .nav-link:not(.active)) {
@@ -735,14 +742,19 @@
         height: 38px;
     }
 
-    .demos-panel {
+    .panel-wrapper {
+        position: relative;
+        margin: 0;
+        width: fit-content;
+        height: fit-content;
+        transition: transform 100ms ease-in-out;
         z-index: 1;
-
+    }
+    .demos-panel {
         min-width: 300px;
         /* default width */
         width: 370px;
-        max-width: 60%;
-
+        max-width: 60vw;
         height: fit-content;
         max-height: 100%;
 
@@ -752,40 +764,18 @@
         overflow-x: hidden;
 
         resize: horizontal;
-
-        transform: translateX(0%);
-        transition: transform 100ms ease-in-out;
     }
-    .demos-panel.collapsed {
+    .panel-wrapper.collapsed {
         transform: translateX(-100%);
     }
 
-    .panel-button {
-        cursor: pointer;
-        position: relative;
-
-        min-width: 28px;
-        height: 38px;
-
-        z-index: 2;
-    }
-
-    .panel-button:hover {
-        background-color: rgba(255, 255, 150, 0.6) !important;
-    }
-
-    .panel-button > div {
-        position: relative;
-        top: 6px;
-    }
-
-    .panel-button.panel-hider {
-        top: 40px;
-        transform: translateX(0%);
-        transition: transform 100ms ease-in-out;
-    }
-    .panel-button.panel-hider.collapsed {
-        transform: var(--collapsed-width);
+    .panel-hider {
+        --width: 25px;
+        width: var(--width);
+        position: absolute;
+        right: calc(-1 * var(--width));
+        top: 46px;
+        border-radius: 0 5px 5px 0;
     }
 
     .chapterBox,

From a7dbb0b34276007e326c2933e06ce6d21be87252 Mon Sep 17 00:00:00 2001
From: Drew C Youngren <dcy2@columbia.edu>
Date: Tue, 7 Nov 2023 08:48:00 -0500
Subject: [PATCH 5/5] Set scale from query string

---
 media/src/App.svelte               | 70 +++++++++++++++++++++++-------
 media/src/Panel.svelte             | 28 ++----------
 media/src/settings/Settings.svelte | 53 +++++++++++++++-------
 media/src/stores.js                |  5 ++-
 media/src/utils.js                 | 17 +++++++-
 5 files changed, 114 insertions(+), 59 deletions(-)

diff --git a/media/src/App.svelte b/media/src/App.svelte
index 0780c700..957c4571 100644
--- a/media/src/App.svelte
+++ b/media/src/App.svelte
@@ -18,6 +18,7 @@
         drawGrid,
         labelAxes,
         modFloor,
+        scaleExp,
     } from './utils';
     import {
         // removeObject,
@@ -28,7 +29,7 @@
     import { handlePollEvent } from './polls/utils';
 
     //import stores
-    import { tickTock } from './stores.js';
+    import { tickTock, viewScale } from './stores.js';
 
     let debug = false;
     let stats;
@@ -40,11 +41,56 @@
     let selectedObjects = [];
     let hoveredObject = null;
     let selectedPoint = null;
-    let lockPoll = false;
+
+    // The objects array is the declarative data that the scene is based on.
+    let objects = [];
+
+    let gridMax = 1;
+    let gridStep = 1 / 5;
+
+    let currentChapter = 'How To';
+    let currentMode = 'how-to';
+
+    const urlParams = new URLSearchParams(location.search);
+    if (urlParams.keys()) {
+        const objectHolder = {};
+        urlParams.forEach((val, key) => {
+            // This is bad and stupid, and hopefully it will be done better.
+            // make a viewStatus object, maybe?
+
+            if (key === 'grid') {
+                gridMeshes.visible = val === 'true';
+            } else if (key === 'scale') {
+                $viewScale = parseFloat(val);
+                gridMax = scaleExp($viewScale);
+                gridStep = gridMax / 10;
+            } else if (key === 'debug') {
+                debug = val === 'true';
+                console.log('debuggery: ', debug);
+            } else if (key.slice(0, 3) === 'obj') {
+                console.log('got a obj');
+                const keyParts = key.split('_');
+                const obj = objectHolder[keyParts[0]] || { params: {} };
+                if (keyParts[1] === 'params') {
+                    obj.params[keyParts[2]] = val;
+                } else {
+                    obj[keyParts[1]] = val;
+                }
+                objectHolder[keyParts[0]] = obj;
+            }
+        });
+        for (const val of Object.values(objectHolder)) {
+            // objects = makeObject(val.uuid, val.kind, val.params, objects);
+            objects = [...objects, { uuid: crypto.randomUUID(), ...val }];
+            if (debug) console.log(objects);
+        }
+        console.log('Initializing...', objects);
+    }
 
     let canvas;
     let isPollsOpen = false;
 
+    let lockPoll = false;
     let showPollResults = false;
 
     const selectObject = (uuid) => {
@@ -112,8 +158,6 @@
         }
     }
 
-    let gridMax = 1,
-        gridStep = 1 / 5;
     const pi = Math.PI;
 
     // Make z the default up
@@ -171,7 +215,7 @@
     });
 
     // Make xy grid lines (off by default).
-    let gridMeshes = drawGrid({ lineMaterial });
+    let gridMeshes = drawGrid({ gridMax, gridStep, lineMaterial });
     gridMeshes.renderDepth = -1;
     gridMeshes.visible = false;
     scene.add(gridMeshes);
@@ -193,6 +237,8 @@
     let [axesText] = labelAxes(
         {
             scene,
+            gridMax,
+            gridStep,
             render: requestFrameIfNotRequested,
         },
         fontLoader,
@@ -201,7 +247,7 @@
 
     // from https://threejs.org/manual/#en/responsive
     const resizeRendererToDisplaySize = function (renderer) {
-        const canvas = renderer.domElement;
+        // const canvas = renderer.domElement;
         const width = canvas.clientWidth;
         const height = canvas.clientHeight;
         const needResize = canvas.width !== width || canvas.height !== height;
@@ -268,7 +314,7 @@
         }
 
         if (resizeRendererToDisplaySize(renderer)) {
-            const canvas = renderer.domElement;
+            // const canvas = renderer.domElement;
             if (orthoCamera) {
                 currentCamera.top = canvas.clientHeight / 2;
                 currentCamera.bottom = canvas.clientHeight / -2;
@@ -320,9 +366,6 @@
         return renderer;
     };
 
-    // The objects array is the declarative data that the scene is based on.
-    export let objects = [];
-
     // sceneObjects is the array of three.js objects present in the
     // scene. It's derived from the objects array, as a result of how
     // the data gets rendered by our svelte components
@@ -506,15 +549,12 @@
             canvas.toBlob((blob) => {
                 saveBlob(
                     blob,
-                    `screencapture-${canvas.width}x${canvas.height}.png`
+                    `3Demos-screencapture-${canvas.width}x${canvas.height}.png`
                 );
             });
         });
     });
 
-    let currentChapter = 'How To';
-    let currentMode = 'how-to';
-
     let pollResponses = {};
 
     // The chat buffer: an array of objects.
@@ -531,6 +571,7 @@
     const makeQueryStringObject = function () {
         const flattenedObjects = {
             currentChapter,
+            scale: $viewScale,
             showPanel,
         };
         if (gridMeshes.visible) {
@@ -718,7 +759,6 @@
             bind:currentMode
             bind:objects
             bind:currentChapter
-            bind:gridMeshes
             bind:gridStep
             bind:gridMax
             bind:chatBuffer
diff --git a/media/src/Panel.svelte b/media/src/Panel.svelte
index 5608fe65..2ed28af5 100644
--- a/media/src/Panel.svelte
+++ b/media/src/Panel.svelte
@@ -39,7 +39,6 @@
     export let debug, currentMode;
     export let currentControls;
     export let currentChapter;
-    export let gridMeshes;
     export let gridStep, gridMax;
     export let objects, isHost;
     export let onRenderObject, onDestroyObject;
@@ -227,40 +226,19 @@
     onMount(() => {
         const urlParams = new URLSearchParams(location.search);
         if (urlParams.keys()) {
-            const objectHolder = {};
+            // const objectHolder = {};
             urlParams.forEach((val, key) => {
                 // This is bad and stupid, and hopefully it will be done better.
                 // make a viewStatus object, maybe?
                 if (key === 'currentChapter') {
                     currentChapter = val;
-                }
-                if (key === 'showPanel') {
+                } else if (key === 'showPanel') {
                     showPanel = !(val === 'false');
-                }
-                if (key === 'grid') {
-                    gridMeshes.visible = val === 'true';
-                }
-                if (key === 'debug') {
+                } else if (key === 'debug') {
                     debug = val === 'true';
                     console.log('debuggery: ', debug);
                 }
-                if (key.slice(0, 3) === 'obj') {
-                    const keyParts = key.split('_');
-                    const obj = objectHolder[keyParts[0]] || { params: {} };
-                    if (keyParts[1] === 'params') {
-                        obj.params[keyParts[2]] = val;
-                    } else {
-                        obj[keyParts[1]] = val;
-                    }
-                    objectHolder[keyParts[0]] = obj;
-                }
             });
-
-            for (const val of Object.values(objectHolder)) {
-                // objects = makeObject(val.uuid, val.kind, val.params, objects);
-                objects = [...objects, { uuid: crypto.randomUUID(), ...val }];
-                if (debug) console.log(objects);
-            }
         }
     });
 
diff --git a/media/src/settings/Settings.svelte b/media/src/settings/Settings.svelte
index 546da241..3a39f509 100644
--- a/media/src/settings/Settings.svelte
+++ b/media/src/settings/Settings.svelte
@@ -1,9 +1,21 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
+    import { createEventDispatcher, onMount } from 'svelte';
     import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
     import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
-    import { drawAxes, drawGrid, labelAxes, freeChildren } from '../utils';
-    import { vMin, vMax, colorMap, densityColormap } from '../stores';
+    import {
+        drawAxes,
+        drawGrid,
+        labelAxes,
+        freeChildren,
+        scaleExp,
+    } from '../utils';
+    import {
+        vMin,
+        vMax,
+        colorMap,
+        densityColormap,
+        viewScale,
+    } from '../stores';
     import WindowHeader from './WindowHeader.svelte';
     import { colorMapNames } from '../js-colormaps';
     import { offclick } from './offclick';
@@ -12,7 +24,7 @@
 
     export let scene, camera, render, controls;
     export let gridMax, gridStep;
-    export let axesHolder, axesText, gridMeshes, lineMaterial, axesMaterial;
+    export let axesHolder, gridMeshes, lineMaterial, axesMaterial, axesText;
     export let animation = false;
     export let orthoCamera = false;
     export let encode;
@@ -50,16 +62,12 @@
 
     let scaleState = gridMax;
     let oldGridMax = gridMax;
-    let scale = 0;
 
-    $: scala =
-        Math.round(
-            100 *
-                Math.pow(10, Math.floor(scale)) *
-                Math.floor(
-                    Math.pow(10, scale) / Math.pow(10, Math.floor(scale))
-                )
-        ) / 100;
+    // These duplicate their non-Temp counterpart but are only for display which updates on moving input bar, though value only updates on change event.
+    let scaleTemp = 0;
+    $: scalaTemp = scaleExp(scaleTemp);
+
+    let scala;
 
     const rescale = function () {
         if (scala !== gridMax) {
@@ -143,6 +151,17 @@
         a.click();
         a.remove();
     };
+
+    onMount(() => {
+        const unsubscribe = viewScale.subscribe((value) => {
+            scala = scaleExp(value);
+            console.log('scale updated', scala);
+            rescale();
+        });
+        console.log('setting mounted');
+        scaleTemp = $viewScale;
+        return unsubscribe;
+    });
 </script>
 
 {#if showSettings}
@@ -175,10 +194,12 @@
                         min="-2"
                         max="3"
                         step=".02"
-                        bind:value={scale}
-                        on:change={rescale}
+                        bind:value={scaleTemp}
+                        on:change={(e) => {
+                            $viewScale = e.target.value;
+                        }}
                     />
-                    <span class="output text-end">{scala}</span>
+                    <span class="output text-end">{scalaTemp}</span>
                 </span>
             </div>
         </div>
diff --git a/media/src/stores.js b/media/src/stores.js
index 57627095..f49029d7 100644
--- a/media/src/stores.js
+++ b/media/src/stores.js
@@ -4,5 +4,6 @@ import { writable } from 'svelte/store';
 export const tickTock = writable(0.);
 export const vMin = writable(-1.);
 export const vMax = writable(1.);
-export const colorMap = writable('plasma')
-export const densityColormap = writable('PuBuGn')
\ No newline at end of file
+export const colorMap = writable('plasma');
+export const densityColormap = writable('PuBuGn');
+export const viewScale = writable(0);
\ No newline at end of file
diff --git a/media/src/utils.js b/media/src/utils.js
index 1017e325..578e06c0 100644
--- a/media/src/utils.js
+++ b/media/src/utils.js
@@ -2647,6 +2647,20 @@ const norm2 = (...v) => {
     return Math.sqrt(tot);
 };
 
+/**
+ * exponential function for scale (log10) values
+ * @param {Number} scale 
+ * @returns {Number} approximate exponential for scaling axes
+ */
+const scaleExp = (scale) => Math.round(
+    100 *
+    Math.pow(10, Math.floor(scale)) *
+    Math.floor(
+        Math.pow(10, scale) /
+        Math.pow(10, Math.floor(scale))
+    )
+) / 100;
+
 export {
     norm2,
     joinUrl,
@@ -2678,5 +2692,6 @@ export {
     querySelectorIncludesText,
     checksum,
     modFloor,
-    tripleToHex
+    tripleToHex,
+    scaleExp,
 };