From eae719b3199bae87f90e78e90f5bcc326814350e Mon Sep 17 00:00:00 2001
From: Jon Carifio <carifio24@gmail.com>
Date: Sun, 18 Jun 2023 00:37:04 +0000
Subject: [PATCH 1/3] Move image gallery component to common package.

---
 {m101-supernova/src => common/src/components}/Gallery.vue | 2 +-
 common/src/index.ts                                       | 4 ++--
 m101-supernova/src/main.ts                                | 3 +--
 3 files changed, 4 insertions(+), 5 deletions(-)
 rename {m101-supernova/src => common/src/components}/Gallery.vue (99%)

diff --git a/m101-supernova/src/Gallery.vue b/common/src/components/Gallery.vue
similarity index 99%
rename from m101-supernova/src/Gallery.vue
rename to common/src/components/Gallery.vue
index e1b83703..ce209d6d 100644
--- a/m101-supernova/src/Gallery.vue
+++ b/common/src/components/Gallery.vue
@@ -193,7 +193,7 @@ export default defineComponent({
 
 </script>
 
-<style scoped lang="less">
+<style lang="less">
 .blurred {
   background: transparent;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
diff --git a/common/src/index.ts b/common/src/index.ts
index ee1ffddc..18f6b871 100644
--- a/common/src/index.ts
+++ b/common/src/index.ts
@@ -2,13 +2,13 @@ import { KeyboardControlSettings } from "./keyboard";
 import MiniDSBase from "./components/MiniDSBase";
 import IconButton from "./components/IconButton.vue";
 import { BackgroundImageset, skyBackgroundImagesets } from "./background";
-//import Gallery from "./components/Gallery.vue";
+import Gallery from "./components/Gallery.vue";
 
 export {
   BackgroundImageset,
   KeyboardControlSettings,
   MiniDSBase,
-  //Gallery,
+  Gallery,
   IconButton,
   skyBackgroundImagesets
 };
diff --git a/m101-supernova/src/main.ts b/m101-supernova/src/main.ts
index d6618697..5be9d07f 100644
--- a/m101-supernova/src/main.ts
+++ b/m101-supernova/src/main.ts
@@ -11,8 +11,7 @@ import d3Scatter from "./d3-scatter.vue";
 import ConstellationIcon from "./ConstellationIcon.vue";
 import { IconButton } from "@minids/common";
 
-import Gallery from "./Gallery.vue";
-// import { Gallery } from "@minids/common";
+import { Gallery } from "@minids/common";
 
 import "./polyfills";
 

From bd490b895fee9b6d4b84624ca9bbd43519e492d9 Mon Sep 17 00:00:00 2001
From: Jon Carifio <carifio24@gmail.com>
Date: Mon, 19 Jun 2023 01:08:44 +0000
Subject: [PATCH 2/3] Nest common component CSS to work around style scoping
 bug.

---
 common/src/components/Gallery.vue    | 167 ++++++++++++++-------------
 common/src/components/IconButton.vue |  10 +-
 2 files changed, 89 insertions(+), 88 deletions(-)

diff --git a/common/src/components/Gallery.vue b/common/src/components/Gallery.vue
index ce209d6d..72f2e1ac 100644
--- a/common/src/components/Gallery.vue
+++ b/common/src/components/Gallery.vue
@@ -194,114 +194,115 @@ export default defineComponent({
 </script>
 
 <style lang="less">
-.blurred {
-  background: transparent;
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(6px);
-}
-
 .gallery-root {
   transition-property: height, width;
   transition: 0.5s ease-out;
-}
 
-.gallery {
-  border-radius: 5px;
-  border: 1px solid white;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  max-height: var(--gallery-max-height);
-  width: min(calc(var(--gallery-width)), calc(100%));
+  .blurred {
+    background: transparent;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(6px);
+  }
+
+  .gallery {
+    border-radius: 5px;
+    border: 1px solid white;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    max-height: var(--gallery-max-height);
+    width: min(calc(var(--gallery-width)), calc(100%));
 
-  // Better way to do this?
+    // Better way to do this?
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
-}
+  }
 
-.noselect {
-  user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-}
+  .noselect {
+    user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+  }
 
-.gallery-header {
-  position: relative;
-  display: flex;
-  justify-content: center;
-}
+  .gallery-header {
+    position: relative;
+    display: flex;
+    justify-content: center;
+  }
 
-.gallery-title {
-  font-size: 16pt;
-}
+  .gallery-title {
+    font-size: 16pt;
+  }
 
-.gallery-close {
-  position: absolute;
-  right: 3px;
-  cursor: pointer;
-}
+  .gallery-close {
+    position: absolute;
+    right: 3px;
+    cursor: pointer;
+  }
 
-.gallery-content {
-  display: grid;
-  grid-template-columns: repeat(var(--column-count), minmax(100px, 1fr));
-  column-gap: 10px;
-  row-gap: 5px;
-  padding: 5px
-}
+  .gallery-content {
+    display: grid;
+    grid-template-columns: repeat(var(--column-count), minmax(100px, 1fr));
+    column-gap: 10px;
+    row-gap: 5px;
+    padding: 5px
+  }
 
-.default-activator {
-  border-radius: 3px;
-  border: solid 1px white;
-  position: relative;
-  height: fit-content;
-  width: fit-content;
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-
-  img {
-    padding: 5px;
+  .default-activator {
     border-radius: 3px;
+    border: solid 1px white;
+    position: relative;
+    height: fit-content;
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+
+    img {
+      padding: 5px;
+      border-radius: 3px;
+    }
   }
-}
 
-.default-activator-title {
-  margin: auto;
-}
+  .default-activator-title {
+    margin: auto;
+  }
 
-.gallery-item {
-  border-radius: 3px;
-  border: 1px solid white;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-
-  img {
-    margin-left: auto;
-    margin-right: auto;
+  .gallery-item {
     border-radius: 3px;
-  }
+    border: 1px solid white;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+
+    img {
+      margin-left: auto;
+      margin-right: auto;
+      border-radius: 3px;
+    }
 
-  span {
-    flex-grow: 1;
-    display: inline-grid;
-    align-items: center;
-    text-align: center;
+    span {
+      flex-grow: 1;
+      display: inline-grid;
+      align-items: center;
+      text-align: center;
+    }
   }
-}
 
-.selected {
-  border: 1px solid var(--selected-color);
+  .selected {
+    border: 1px solid var(--selected-color);
 
-  span {
-    color: var(--selected-color);
+    span {
+      color: var(--selected-color);
+    }
+  }
+
+  .place-name {
+    font-size: 10pt;
   }
-}
 
-.place-name {
-  font-size: 10pt;
 }
 </style>
 
diff --git a/common/src/components/IconButton.vue b/common/src/components/IconButton.vue
index 0d48beee..5a82ef1b 100644
--- a/common/src/components/IconButton.vue
+++ b/common/src/components/IconButton.vue
@@ -120,13 +120,13 @@ export default defineComponent({
     color: var(--focus-color);
     border-color: var(--focus-color);
   }
-}
 
-.active { 
-  box-shadow: 0px 0px 10px 3px var(--color);
+  &.active {
+    box-shadow: 0px 0px 10px 3px var(--color);
 
-  &:focus {
-    box-shadow: 0px 0px 10px 3px var(--focus-color);
+    &:focus {
+      box-shadow: 0px 0px 10px 3px var(--focus-color);
+    }
   }
 }
 </style>

From f39489d6bc2aaa34cc38d4069643e737a293af0c Mon Sep 17 00:00:00 2001
From: Jon Carifio <carifio24@gmail.com>
Date: Mon, 19 Jun 2023 01:09:00 +0000
Subject: [PATCH 3/3] Make WWT engine external to avoid instanceof issues.

---
 common/vue.config.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/common/vue.config.js b/common/vue.config.js
index 96cbd144..d596c4a6 100644
--- a/common/vue.config.js
+++ b/common/vue.config.js
@@ -23,6 +23,17 @@ module.exports = defineConfig({
           return opts;
         });
     }
+
+    // Keep the very big WWT engine external
+    config.externals({
+      '@wwtelescope/engine': {
+        'amd': '@wwtelescope/engine', // typeof define === 'function' && define.amd
+        'commonjs2': '@wwtelescope/engine', // typeof exports === 'object' && typeof module === 'object'
+        'commonjs': '@wwtelescope/engine', // typeof exports === 'object'
+        'root': 'wwtlib' // none of the above: browser mode using global variables
+      }
+    });
+
   },
 
   // TODO: For some reason we're having trouble loading chunks