Merge pull request #219 from Smithsonian/rc_30

Rc 30 merge
Smithsonian · Jun 29, 2023 · a7da60c · a7da60c
2 parents a12ff1e + a727bbb
commit a7da60c
Show file tree

Hide file tree

Showing 19 changed files with 373 additions and 184 deletions.
diff --git a/.env.template b/.env.template
@@ -3,4 +3,4 @@ VOYAGER_SERVER_PORT=8000
 VOYAGER_SERVER_IPV4_ADDR=172.18.0.2
 VOYAGER_SERVER_SUBNET=172.18.0.0/16
 VOYAGER_LOCAL=false
-VOYAGER_ANALYTICS_ID=UA-XXXXXX-X
+VOYAGER_ANALYTICS_ID=G-XXXXXXXXXX
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "voyager",
-    "version": "0.27.0",
+    "version": "0.30.0",
     "description": "Smithsonian DPO Voyager - 3D Explorer and Tool Suite",
     "scripts": {
         "start": "npm run server",
@@ -102,7 +102,7 @@
         "typedoc": "^0.22.11",
         "typescript": "^4.3.5",
         "typescript-json-schema": "^0.50.1",
-        "webpack": "^5.67.0",
+        "webpack": "^5.88.1",
         "webpack-cli": "^4.9.2"
     }
 }
diff --git a/source/client/applications/ExplorerApplication.ts b/source/client/applications/ExplorerApplication.ts
@@ -401,7 +401,7 @@ Version: ${ENV_VERSION}
         }
 
         viewerIns.annotationsVisible.setValue(!viewerIns.annotationsVisible.value);
-        this.analytics.sendProperty("Annotations.Visible", viewerIns.annotationsVisible.value);
+        this.analytics.sendProperty("Annotations_Visible", viewerIns.annotationsVisible.value);
     }
 
     toggleReader()
@@ -416,7 +416,7 @@ Version: ${ENV_VERSION}
             readerIns.articleId.setValue(reader.articles.length === 1 ? reader.articles[0].article.id : "");
         }
 
-        this.analytics.sendProperty("Reader.Enabled", readerIns.enabled.value);
+        this.analytics.sendProperty("Reader_Enabled", readerIns.enabled.value);
     }
 
     toggleTours()
@@ -436,7 +436,7 @@ Version: ${ENV_VERSION}
             tourIns.tourIndex.setValue(-1); // show tour menu
         }
 
-        this.analytics.sendProperty("Tours.Enabled", tourIns.enabled.value);
+        this.analytics.sendProperty("Tours_Enabled", tourIns.enabled.value);
     }
 
     toggleTools()
@@ -449,7 +449,7 @@ Version: ${ENV_VERSION}
         }
 
         toolIns.visible.setValue(!toolIns.visible.value);
-        this.analytics.sendProperty("Tools.Visible", toolIns.visible.value);
+        this.analytics.sendProperty("Tools_Visible", toolIns.visible.value);
     }
 
     toggleMeasurement()
@@ -464,7 +464,7 @@ Version: ${ENV_VERSION}
         const ARIns = this.system.getMainComponent(CVARManager).ins;
 
         ARIns.enabled.setValue(true);
-        this.analytics.sendProperty("AR.enabled", true);
+        this.analytics.sendProperty("AR_enabled", true);
     }
 
     // Returns an array of objects with the article data for the current scene

diff --git a/source/client/components/CVARManager.ts b/source/client/components/CVARManager.ts
@@ -155,19 +155,19 @@ export default class CVARManager extends Component
             if (isEnabled) {
                 if(IS_WEBXR_AR_CANDIDATE) { 
                     this.launchWebXR();
-                    this.analytics.sendProperty("AR.Enabled", "WebXR");
+                    this.analytics.sendProperty("AR_Enabled", "WebXR");
                 }
                 else if(IS_ANDROID) {
                     this.launchSceneViewer();
-                    this.analytics.sendProperty("AR.Enabled", "SceneViewer");
+                    this.analytics.sendProperty("AR_Enabled", "SceneViewer");
                 }
                 else if(IS_IOS && IS_AR_QUICKLOOK_CANDIDATE) {
                     this.launchQuickLook();
-                    this.analytics.sendProperty("AR.Enabled", "QuickLook");
+                    this.analytics.sendProperty("AR_Enabled", "QuickLook");
                 }
                 else {
                     isEnabled = false;
-                    this.analytics.sendProperty("AR.Enabled", "Unavailable");
+                    this.analytics.sendProperty("AR_Enabled", "Unavailable");
                 }
             }
 

diff --git a/source/client/components/CVAnalytics.ts b/source/client/components/CVAnalytics.ts
@@ -59,9 +59,9 @@ export default class CVAnalytics extends Component
         }
 
         // track custom event
-        if (typeof ga === "function" && ENV_PRODUCTION) {
-            const text = value !== undefined ? value.toString() : undefined;
-            ga("send", "event", this._title, property, text);
+        if (typeof gtag === "function" && ENV_PRODUCTION) {
+            const text : string = value !== undefined ? value.toString() : 'undefined';
+            gtag("event", property.toLowerCase(), {"scene_title": this._title, "event_value": text});
         }
     }
 }
diff --git a/source/client/components/CVAnnotationView.ts b/source/client/components/CVAnnotationView.ts
@@ -351,9 +351,12 @@ export default class CVAnnotationView extends CObject3D
         this.changed = true;
     }
 
-    updateAnnotation(annotation: Annotation)
+    updateAnnotation(annotation: Annotation, forceSprite?: boolean)
     {
-        //this.updateSprite(annotation);
+        if(forceSprite) {
+            this.updateSprite(annotation);
+        }
+
         this.changed = true;
     }
 

diff --git a/source/client/components/CVModel2.ts b/source/client/components/CVModel2.ts
@@ -45,7 +45,9 @@ import CVSetup from "./CVSetup";
 const _vec3a = new Vector3();
 const _vec3b = new Vector3();
 const _quat = new Quaternion();
+const _quat1 = new Quaternion();
 const _box = new Box3();
+const _mat4 = new Matrix4();
 
 export interface ITagUpdateEvent extends ITypedEvent<"tag-update">
 {
@@ -135,6 +137,8 @@ export default class CVModel2 extends CObject3D
     private _visible: boolean = true;
     private _boxFrame: Mesh = null;
     private _localBoundingBox = new Box3();
+    private _prevPosition: Vector3 = new Vector3(0.0,0.0,0.0);
+    private _prevRotation: Vector3 = new Vector3(0.0,0.0,0.0);
 
     constructor(node: Node, id: string)
     {
@@ -360,11 +364,13 @@ export default class CVModel2 extends CObject3D
 
         if (data.translation) {
             ins.position.copyValue(data.translation);
+            this._prevPosition.fromArray(data.translation);
         }
 
         if (data.rotation) {
             _quat.fromArray(data.rotation);
             helpers.quaternionToDegrees(_quat, CVModel2.rotationOrder, ins.rotation.value);
+            this._prevRotation.fromArray(ins.rotation.value);
             ins.rotation.set();
         }
 
@@ -574,6 +580,33 @@ export default class CVModel2 extends CObject3D
         object3D.matrix.compose(_vec3a, _quat, _vec3b);
         object3D.matrixWorldNeedsUpdate = true;
 
+        //TODO: Cleanup & optimize annotation update
+        helpers.degreesToQuaternion([this._prevRotation.x, this._prevRotation.y, this._prevRotation.z], CVModel2.rotationOrder, _quat1);
+        _quat1.invert();
+        _vec3b.setScalar(1);
+        _mat4.compose(_vec3a.fromArray(ins.position.value), _quat, _vec3b);
+
+        const annotations = this.getComponent(CVAnnotationView);
+        annotations.getAnnotations().forEach(anno => {
+            _vec3a.fromArray(anno.data.position);
+            _vec3a.sub(this._prevPosition);
+            _vec3a.applyQuaternion(_quat1);
+            _vec3a.applyMatrix4(_mat4);
+
+            anno.data.position = _vec3a.toArray();
+
+            _vec3a.fromArray(anno.data.direction);
+            _vec3a.applyQuaternion(_quat1);
+            _vec3a.applyQuaternion(_quat);
+
+            anno.data.direction = _vec3a.toArray();
+
+            anno.update();
+            annotations.updateAnnotation(anno, true);
+        });
+        this._prevPosition.copy(_vec3a.fromArray(ins.position.value));
+        this._prevRotation.copy(_vec3a.fromArray(ins.rotation.value));
+
         this.outs.updated.set();
     }
 

diff --git a/source/client/components/CVPoseTask.ts b/source/client/components/CVPoseTask.ts
@@ -30,6 +30,7 @@ import CVModel2 from "./CVModel2";
 import CVTask from "./CVTask";
 
 import PoseTaskView from "../ui/story/PoseTaskView";
+import CVAnnotationView from "./CVAnnotationView";
 
 ////////////////////////////////////////////////////////////////////////////////
 

diff --git a/source/client/components/CVReader.ts b/source/client/components/CVReader.ts
@@ -139,7 +139,7 @@ export default class CVReader extends Component
 
             if (article) {
                 this.readArticle(article);
-                this.analytics.sendProperty("Reader.ArticleId", article.defaultTitle);
+                this.analytics.sendProperty("Reader_ArticleId", article.defaultTitle);
             }
         }
         if (ins.refresh.changed) {

diff --git a/source/client/components/CVToolProvider.ts b/source/client/components/CVToolProvider.ts
@@ -69,7 +69,7 @@ export default class CVToolProvider extends CComponentProvider<CVTool>
     {
         tool.activateTool();
 
-        this.analytics.sendProperty("Tools.ActiveTool", tool.text);
+        this.analytics.sendProperty("Tools_ActiveTool", tool.text);
     }
 
     protected deactivateComponent(tool: CVTool)

diff --git a/source/client/explorer.hbs b/source/client/explorer.hbs
@@ -8,14 +8,22 @@
 
     {{#unless htmlWebpackPlugin.options.isDevelopment}}
     <!-- Google Analytics -->
-    <script>
+    <!--script>
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
             (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
         })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 
         ga('create', '{{htmlWebpackPlugin.options.analyticsId}}', 'auto');
         ga("send", "pageview");
+    </script-->
+    <script async src="https://www.googletagmanager.com/gtag/js?id={{htmlWebpackPlugin.options.analyticsId}}"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', '{{htmlWebpackPlugin.options.analyticsId}}');
     </script>
     <!-- End Google Analytics -->
     {{/unless}}

diff --git a/source/client/global.d.ts b/source/client/global.d.ts
@@ -16,4 +16,4 @@ declare const ENV_PRODUCTION: boolean;
 declare const ENV_LOCAL: boolean;
 
 // Google Analytics global variable
-declare const ga: any;
+declare const gtag: any;
diff --git a/source/client/ui/explorer/ARMenu.ts b/source/client/ui/explorer/ARMenu.ts
@@ -85,7 +85,7 @@ export default class ARMenu extends DocumentView
         const readerIns = this.activeDocument.setup.reader.ins;
         readerIns.enabled.setValue(!readerIns.enabled.value);
 
-        this.analytics.sendProperty("Reader.Enabled", readerIns.enabled.value);
+        this.analytics.sendProperty("Reader_Enabled", readerIns.enabled.value);
     }
 
     protected onToggleNarration()
@@ -105,7 +105,7 @@ export default class ARMenu extends DocumentView
         }*/
 
         viewerIns.annotationsVisible.setValue(!viewerIns.annotationsVisible.value);
-        this.analytics.sendProperty("Annotations.Visible", viewerIns.annotationsVisible.value);
+        this.analytics.sendProperty("Annotations_Visible", viewerIns.annotationsVisible.value);
     }
 
     protected onActiveDocument(previous: CVDocument, next: CVDocument)

diff --git a/source/client/ui/explorer/ContentView.ts b/source/client/ui/explorer/ContentView.ts
@@ -158,7 +158,7 @@ export default class ContentView extends DocumentView
 
         if(!isLoading && isInitialLoad) { 
             // send load timer event
-            this.analytics.sendProperty("Loading.Time", this.analytics.getTimerTime()/1000);
+            this.analytics.sendProperty("Loading_Time", this.analytics.getTimerTime()/1000);
             this.analytics.resetTimer();
 
             this.assetManager.initialLoad = false;

diff --git a/source/client/ui/explorer/MainMenu.ts b/source/client/ui/explorer/MainMenu.ts
@@ -165,7 +165,7 @@ export default class MainMenu extends DocumentView
             readerIns.articleId.setValue(reader.articles.length === 1 ? reader.articles[0].article.id : "");
         }
 
-        this.analytics.sendProperty("Reader.Enabled", readerIns.enabled.value);
+        this.analytics.sendProperty("Reader_Enabled", readerIns.enabled.value);
     }
 
     protected onToggleTours()
@@ -185,7 +185,7 @@ export default class MainMenu extends DocumentView
             tourIns.tourIndex.setValue(-1); // show tour menu
         }
 
-        this.analytics.sendProperty("Tours.Enabled", tourIns.enabled.value);
+        this.analytics.sendProperty("Tours_Enabled", tourIns.enabled.value);
     }
 
     protected onToggleAnnotations()
@@ -198,7 +198,7 @@ export default class MainMenu extends DocumentView
         }
 
         viewerIns.annotationsVisible.setValue(!viewerIns.annotationsVisible.value);
-        this.analytics.sendProperty("Annotations.Visible", viewerIns.annotationsVisible.value);
+        this.analytics.sendProperty("Annotations_Visible", viewerIns.annotationsVisible.value);
     }
 
     protected onToggleShare()
@@ -213,14 +213,14 @@ export default class MainMenu extends DocumentView
                 this.setElementFocus("share-btn");
             });
 
-            this.analytics.sendProperty("Menu.Share");
+            this.analytics.sendProperty("Menu_Share");
         }
     }
 
     protected onToggleFullscreen()
     {
         this.fullscreen.toggle();
-        this.analytics.sendProperty("Menu.Fullscreen");
+        this.analytics.sendProperty("Menu_Fullscreen");
     }
 
     protected onToggleTools()
@@ -233,7 +233,7 @@ export default class MainMenu extends DocumentView
         }
 
         toolIns.visible.setValue(!toolIns.visible.value);
-        this.analytics.sendProperty("Tools.Visible", toolIns.visible.value);
+        this.analytics.sendProperty("Tools_Visible", toolIns.visible.value);
     }
 
     protected onEnterAR()

diff --git a/source/client/ui/explorer/ReaderView.ts b/source/client/ui/explorer/ReaderView.ts
@@ -45,8 +45,11 @@ export default class ReaderView extends DocumentView
     {
         const article = entry.article;
 
-        return html`<div role="option" title="article" tabindex=${index === 0 ? "0" : "-1"} @keydown=${e =>this.onKeyDown(e, article.id)} class="sv-entry" @click=${e => this.onClickArticle(e, article.id)}>
-            <h1>${article.title}</h1>
+        return html`<div role="option" title="article" tabindex=${index === 0 ? "0" : "-1"} @keydown=${e =>this.onKeyDown(e, article.id)} class="sv-entry" @click=${e => this.onClickArticle(e, article.id)}>      
+            <div class="sv-titlebar">              
+                <h1>${article.title}</h1>
+                <ff-icon class="ff-off" name="triangle-right">
+            </div>
             <p>${article.lead}</p>
         </div>`;
     }

diff --git a/source/client/ui/explorer/TourMenu.ts b/source/client/ui/explorer/TourMenu.ts
@@ -53,7 +53,10 @@ export default class TourMenu extends CustomElement
     protected renderEntry(tour: ITour, index: number)
     {
         return html`<div role="option" title="tour entry" tabindex=${index === 0 ? "0" : "-1"} @keydown=${e =>this.onKeyDown(e, index)} class="sv-entry" @click=${e => this.onClickTour(e, index)}>
-            <h1>${Object.keys(tour.titles).length > 0 ? tour.titles[ELanguageType[this.activeLanguage]] : tour.title}</h1>
+            <div class="sv-titlebar">              
+                <h1>${Object.keys(tour.titles).length > 0 ? tour.titles[ELanguageType[this.activeLanguage]] || "undefined" : tour.title}</h1>
+                <ff-icon class="ff-off" name="triangle-right">
+            </div>
             <p>${Object.keys(tour.leads).length > 0 ? tour.leads[ELanguageType[this.activeLanguage]] : tour.lead}</p>
         </div>`;
     }

diff --git a/source/client/ui/explorer/styles.scss b/source/client/ui/explorer/styles.scss
@@ -819,6 +819,19 @@ $tour-entry-indent: 12px;
     &:hover {
       background-color: $color-paragraph-hover;
     }
+
+    .sv-titlebar {
+      display: flex;
+    }
+
+    .ff-icon {
+      margin: auto 10px auto auto;
+      height: 1.5em;
+      border-radius: 60px;
+      border-style: solid;
+      box-shadow: 0 0 2px $menu-color-text-dim;
+      padding: 0.6em 0.6em;
+    }
   }
 }