Merge pull request #256 from Smithsonian/rc-38

Merge Rc 38

source/client/annotations/CircleSprite.ts

@@ -197,6 +197,7 @@ class CircleAnnotation extends AnnotationElement
 
         const annotation = this.sprite.annotation;
         const annotationData = annotation.data;
+        const audio = this.sprite.audioManager;
 
         // update title
         this.markerElement.innerText = annotationData.marker;
@@ -226,7 +227,7 @@ class CircleAnnotation extends AnnotationElement
 
             if (this.isExpanded) {
                 if(annotationData.audioId) {
-                    this.querySelector("#audio_container").append(this.sprite.audioManager.getPlayerById(annotationData.audioId));
+                    this.querySelector("#audio_container").append(audio.getPlayerById(annotationData.audioId));
                 }
 
                 this.classList.add("sv-expanded");
@@ -238,7 +239,7 @@ class CircleAnnotation extends AnnotationElement
                 this.classList.remove("sv-expanded");
                 this.contentElement.style.display = "none";
 
-                if(annotationData.audioId) {
+                if(audio.activeId == annotationData.audioId) {
                     this.sprite.audioManager.stop();
                 }
             }
@@ -259,10 +260,10 @@ class CircleAnnotation extends AnnotationElement
         if(annotationData.audioId) {
             if(annotationData.expanded && !audioView) {
                 const audioContainer = this.querySelector("#audio_container");
-                audioContainer.append(this.sprite.audioManager.getPlayerById(annotationData.audioId));
+                audioContainer.append(audio.getPlayerById(annotationData.audioId));
             }
-            else if(!annotationData.expanded && audioView) {
-                this.sprite.audioManager.stop();
+            else if(!annotationData.expanded && audioView && audio.activeId == annotationData.audioId) {
+                audio.stop();
             }
         }
     }

source/client/annotations/ExtendedSprite.ts

@@ -160,6 +160,7 @@ class ExtendedAnnotation extends AnnotationElement
 
         const annotationObj = this.sprite.annotation;
         const annotation = this.sprite.annotation.data;
+        const audio = this.sprite.audioManager;
 
         // update title
         this.titleElement.innerText = this.sprite.annotation.title;
@@ -189,7 +190,7 @@ class ExtendedAnnotation extends AnnotationElement
 
             if (this.isExpanded) {
                 if(annotation.audioId) {
-                    this.querySelector("#audio_container").append(this.sprite.audioManager.getPlayerById(annotation.audioId));
+                    this.querySelector("#audio_container").append(audio.getPlayerById(annotation.audioId));
                 }
 
                 this.classList.add("sv-expanded");
@@ -202,7 +203,7 @@ class ExtendedAnnotation extends AnnotationElement
                 this.contentElement.style.height = "0";
                 this.handler = window.setTimeout(() => this.contentElement.style.display = "none", 300);
 
-                if(annotation.audioId) {
+                if(audio.activeId == annotation.audioId) {
                     this.sprite.audioManager.stop();
                 }
             }

source/client/annotations/StandardSprite.ts

@@ -146,6 +146,8 @@ class StandardAnnotation extends AnnotationElement
 
         const annotation = this.sprite.annotation.data;
 
+        annotation.viewId.length ? this.classList.add("sv-enable-events") : this.classList.remove("sv-enable-events");
+
         this.titleElement.innerText = this.sprite.annotation.title;
 
         _color.fromArray(annotation.color);

source/client/applications/StoryApplication.ts

@@ -185,12 +185,12 @@ export default class StoryApplication
             props.dragdrop = true;
             app.createComponent(CVStandaloneFileManager);
         }     
-
+        this.mediaManager.rootUrl = this.assetManager.baseUrl;
         // if dragging/dropping have to assume that a non-loading url is still valid
+        this.mediaManager.rootUrl = this.assetManager.baseUrl;
         if(props.dragdrop === true) {
             this.assetManager.ins.baseUrlValid.setValue(true);
         }
-        this.mediaManager.rootUrl = this.assetManager.baseUrl;
 
         const tasks = this.system.getMainComponent(CVTaskProvider);
         tasks.ins.mode.setValue(mode);

source/client/applications/coreTypes.ts

@@ -49,6 +49,7 @@ import CVMeta from "../components/CVMeta";
 import CVModel2 from "../components/CVModel2";
 import CVAnnotations from "../components/CVAnnotations";
 import CVAnnotationView from "../components/CVAnnotationView";
+import CVStaticAnnotationView from "client/components/CVStaticAnnotationView";
 import CVCamera from "../components/CVCamera";
 import CVDirectionalLight from "../components/CVDirectionalLight";
 import CVPointLight from "../components/CVPointLight";
@@ -68,14 +69,14 @@ import CVSnapshots from "../components/CVSnapshots";
 import CVEnvironment from "../components/CVEnvironment";
 import CVARManager from "../components/CVARManager";
 import CVLanguageManager from "../components/CVLanguageManager";
+import CVAudioManager from "client/components/CVAudioManager";
 
 // PROJECT NODES ///////////////////////////////////////////////////////////////
 
 import NVEngine from "../nodes/NVEngine";
 import NVDocuments from "../nodes/NVDocuments";
 import NVScene from "../nodes/NVScene";
 import NVNode from "../nodes/NVNode";
-import CVAudioManager from "client/components/CVAudioManager";
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -106,6 +107,7 @@ const types = [
     CVModel2,
     CVAnnotations,
     CVAnnotationView,
+    CVStaticAnnotationView,
     CVCamera,
     CVDirectionalLight,
     CVPointLight,

source/client/components/CVARManager.ts

@@ -20,7 +20,7 @@
  * https://github.com/google/model-viewer/blob/master/packages/model-viewer/src/three-components/ARRenderer.ts
  */
 
-import Component, { types } from "@ff/graph/Component";
+import Component, { IComponentEvent, types } from "@ff/graph/Component";
 import CRenderer from "@ff/scene/components/CRenderer";
 import CTransform from "@ff/scene/components/CTransform";
 import CScene from "@ff/scene/components/CScene";
@@ -45,6 +45,7 @@ import { Shadow } from "../xr/XRShadow"
 import CVDirectionalLight from "./CVDirectionalLight";
 import { EShaderMode } from "client/schema/setup";
 import CVAnalytics from "./CVAnalytics";
+import CVMeta from "./CVMeta";
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -67,6 +68,7 @@ export default class CVARManager extends Component
     static readonly isSystemSingleton = true;
 
     private _shadowRoot = null;
+    private _arCodeImage = null;
 
     protected static readonly ins = {
         enabled: types.Boolean("State.Enabled"),
@@ -106,6 +108,19 @@ export default class CVARManager extends Component
     set shadowRoot(root: ShadowRoot) {
         this._shadowRoot = root;
     }
+    get arCodeImage() {
+
+        // SI-specific to return QR codes for legacy content
+        const docUri = document.documentURI;
+        if(this._arCodeImage == null && docUri.includes(".si.edu") && docUri.includes("3d-api")) {
+            const uuid = docUri.split("/").pop().split(":").pop();
+            if(uuid.length == 36) { //**TODO: make this more robust
+                this._arCodeImage = "https://3d-api.si.edu/voyager/" + uuid + "/qrcode";
+            }
+        }
+
+        return this._arCodeImage;
+    }
 
     protected arLink = document.createElement('a');
     protected raycaster: Raycaster = new Raycaster();
@@ -149,6 +164,18 @@ export default class CVARManager extends Component
     protected updateScale: boolean = false;
     protected placementRotation: Quaternion = new Quaternion();
 
+    create()
+    {
+        super.create();
+        this.system.components.on(CVMeta, this.onMetaComponent, this);
+    }
+
+    dispose()
+    {
+        this.system.components.off(CVMeta, this.onMetaComponent, this);
+        super.dispose();
+    }
+
     update()
     {
         const { ins, outs } = this;
@@ -991,4 +1018,21 @@ export default class CVARManager extends Component
 
         this.updateBoundingBox();
     }
+
+    protected onMetaComponent(event: IComponentEvent<CVMeta>)
+    {
+        const meta = event.object;
+
+        if (event.add) {
+            meta.once("load", () => {
+                const images = meta.images.dictionary;
+                Object.keys(images).forEach(key => {
+                    const image =  images[key];
+                    if(image.usage && image.usage === "ARCode") {
+                        this._arCodeImage = this.assetManager.getAssetUrl(image.uri);
+                    }
+                });
+            });
+        }
+    }
 }

source/client/components/CVAnnotationView.ts

@@ -45,6 +45,7 @@ import { ELanguageType, EUnitType } from "client/schema/common";
 import CVAssetReader from "./CVAssetReader";
 import CVAudioManager from "./CVAudioManager";
 import CVAssetManager from "./CVAssetManager";
+import CVSnapshots from "./CVSnapshots";
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -106,6 +107,9 @@ export default class CVAnnotationView extends CObject3D
     protected get audio() {
         return this.getGraphComponent(CVAudioManager, true);
     }
+    protected get snapshots() {
+        return this.getGraphComponent(CVSnapshots, true);
+    }
     protected get articles() {
         const meta = this.meta;
         return meta ? meta.articles : null;
@@ -154,13 +158,13 @@ export default class CVAnnotationView extends CObject3D
             ins.azimuth.setValue(annotation ? annotation.data.azimuth : 0, true);
             ins.color.setValue(annotation ? annotation.data.color.slice() : [ 1, 1, 1 ], true);
 
-            const articles = this.articles;
-            if (articles) {
-                const names = articles.items.map(article => article.title);
+            const articles = this.reader.articles;
+            if (articles.length) {
+                const names = articles.map(entry => entry.article.title);
                 names.unshift("(none)");
                 ins.article.setOptions(names);
-                const article = annotation ? articles.getById(annotation.data.articleId) : null;
-                ins.article.setValue(article ? articles.getIndexOf(article) + 1 : 0, true);
+                const article = annotation ? articles.find((entry) => entry.article.id === annotation.data.articleId) : null;
+                ins.article.setValue(article ? articles.indexOf(article) + 1 : 0, true);
             }
             else {
                 ins.article.setOptions([ "(none)" ]);
@@ -174,6 +178,7 @@ export default class CVAnnotationView extends CObject3D
 
             this.emit<IAnnotationsUpdateEvent>({ type: "annotation-update", annotation });
         }
+
     }
 
     get hasAnnotations() {
@@ -277,9 +282,9 @@ export default class CVAnnotationView extends CObject3D
                 annotation.imageAltText =  ins.imageAltText.value;
             }
             if (ins.article.changed) {
-                const articles = this.articles;
-                const article = articles && articles.getAt(ins.article.getValidatedValue() - 1);
-                annotation.set("articleId", article ? article.id : "");
+                const articles = this.reader.articles;
+                const entry = articles && articles[ins.article.getValidatedValue() - 1];
+                annotation.set("articleId", entry ? entry.article.id : "");
             }
             if (ins.audioId.changed) {
                 annotation.set("audioId", ins.audioId.value);
@@ -467,6 +472,13 @@ export default class CVAnnotationView extends CObject3D
     protected onSpriteClick(event: any)
     {
         this.emit(event);
+
+        const annotation = event.annotation;
+        if(annotation && annotation.data.viewId.length) {
+            this.normalizeViewOrbit(annotation.data.viewId);
+            this.snapshots.ins.id.setValue(annotation.data.viewId);
+            this.snapshots.ins.tween.set();
+        }
     }
 
     protected onSpriteLink(event: any)
@@ -521,6 +533,11 @@ export default class CVAnnotationView extends CObject3D
 
     protected updateLanguage()
     {
+        // only update language for model annotations
+        if(!this.getComponent(CVModel2, true)) {
+            return;
+        }
+
         const ins = this.ins;
         const annotation = this._activeAnnotation;
         const language = this.language;
@@ -545,5 +562,21 @@ export default class CVAnnotationView extends CObject3D
         ins.tags.setValue(annotation ? annotation.tags.join(", ") : "");
         ins.imageCredit.setValue(annotation ? annotation.imageCredit : "", true);
         ins.imageAltText.setValue(annotation ? annotation.imageAltText : "", true);
+
+        // update article list
+        const names = this.reader.articles.map(entry => entry.article.title);
+        names.unshift("(none)");
+        ins.article.setOptions(names);
+    }
+
+    // helper function to bring saved state orbit into alignment with current view orbit
+    protected normalizeViewOrbit(viewId: string) {
+        const orbitIdx = this.snapshots.getTargetProperties().findIndex(prop => prop.name == "Orbit");
+        const viewState = this.snapshots.getState(viewId);
+        const currentOrbit = this.snapshots.getCurrentValues()[orbitIdx];
+        currentOrbit.forEach((n, i) => {
+            const mult = Math.round((n-viewState.values[orbitIdx][i])/360);
+            viewState.values[orbitIdx][i] += 360*mult; 
+        });
     }
 }