annotation articles, article close button, tests, fixes

Smithsonian · Apr 17, 2019 · fca72a3 · fca72a3
1 parent 8dd1f88
commit fca72a3
Show file tree

Hide file tree

Showing 22 changed files with 183 additions and 65 deletions.
diff --git a/libs/ff-browser b/libs/ff-browser
diff --git a/libs/ff-scene b/libs/ff-scene
diff --git a/libs/ff-ui b/libs/ff-ui
diff --git a/source/client/annotations/AnnotationSprite.ts b/source/client/annotations/AnnotationSprite.ts
@@ -133,7 +133,7 @@ export class AnnotationElement extends CustomElement
         this.classList.add("sv-annotation");
     }
 
-    protected onClick(event: PointerEvent)
+    protected onClick(event: MouseEvent)
     {
         event.stopPropagation();
         this.sprite.emitClickEvent();

diff --git a/source/client/annotations/BeamSprite.ts b/source/client/annotations/BeamSprite.ts
@@ -19,7 +19,9 @@ import * as THREE from "three";
 
 import math from "@ff/core/math";
 
-import { customElement, PropertyValues } from "@ff/ui/CustomElement";
+import { customElement, PropertyValues, html, render } from "@ff/ui/CustomElement";
+import Button from "@ff/ui/Button";
+
 import AnnotationSprite, { Annotation, AnnotationElement } from "./AnnotationSprite";
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -99,7 +101,7 @@ export default class BeamSprite extends AnnotationSprite
 class BeamAnnotation extends AnnotationElement
 {
     protected titleElement: HTMLDivElement;
-    protected leadElement: HTMLDivElement;
+    protected contentElement: HTMLDivElement;
     protected wrapperElement: HTMLDivElement;
     protected handler = 0;
     protected isExpanded = true;
@@ -110,13 +112,15 @@ class BeamAnnotation extends AnnotationElement
     {
         super(sprite);
 
+        this.onClickArticle = this.onClickArticle.bind(this);
+
         this.titleElement = this.appendElement("div");
         this.titleElement.classList.add("sv-content", "sv-title");
 
         this.wrapperElement = this.appendElement("div");
 
-        this.leadElement = this.createElement("div", null, this.wrapperElement);
-        this.leadElement.classList.add("sv-content", "sv-description");
+        this.contentElement = this.createElement("div", null, this.wrapperElement);
+        this.contentElement.classList.add("sv-content", "sv-description");
     }
 
     getOpacity()
@@ -144,7 +148,11 @@ class BeamAnnotation extends AnnotationElement
         const annotation = this.sprite.annotation.data;
 
         this.titleElement.innerText = annotation.title;
-        this.leadElement.innerText = annotation.lead;
+
+        const contentTemplate = html`<p>${annotation.lead}</p>
+            ${annotation.articleId ? html`<ff-button inline text="Read more..." icon="document" @click=${this.onClickArticle}></ff-button>` : null}`;
+
+        render(contentTemplate, this.contentElement);
 
         this.targetOpacity = annotation.visible ? 1 : 0;
 
@@ -155,16 +163,22 @@ class BeamAnnotation extends AnnotationElement
 
             if (this.isExpanded) {
                 this.classList.add("sv-expanded");
-                this.leadElement.style.display = "inherit";
-                this.leadElement.style.height = this.leadElement.scrollHeight + "px";
+                this.contentElement.style.display = "inherit";
+                this.contentElement.style.height = this.contentElement.scrollHeight + "px";
 
             }
             else {
                 this.classList.remove("sv-expanded");
-                this.leadElement.style.height = "0";
-                this.handler = window.setTimeout(() => this.leadElement.style.display = "none", 300);
+                this.contentElement.style.height = "0";
+                this.handler = window.setTimeout(() => this.contentElement.style.display = "none", 300);
 
             }
         }
     }
+
+    protected onClickArticle(event: MouseEvent)
+    {
+        event.stopPropagation();
+        this.sprite.emitLinkEvent(this.sprite.annotation.data.articleId);
+    }
 }
diff --git a/source/client/components/CVAnnotationView.ts b/source/client/components/CVAnnotationView.ts
@@ -33,6 +33,8 @@ import AnnotationSprite, { IAnnotationClickEvent, IAnnotationLinkEvent } from ".
 
 import PinSprite from "../annotations/PinSprite";
 import BeamSprite from "../annotations/BeamSprite";
+import CVMeta from "./CVMeta";
+import CVReader from "./CVReader";
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -50,6 +52,8 @@ const _inputs = {
     style: types.Enum("Annotation.Style", EAnnotationStyle, EAnnotationStyle.Default),
     scale: types.Scale("Annotation.Scale", 1),
     offset: types.Number("Annotation.Offset"),
+    article: types.Option("Annotation.Article", []),
+    image: types.String("Annotation.Image"),
     tilt: types.Number("Annotation.Tilt"),
     azimuth: types.Number("Annotation.Azimuth"),
 };
@@ -69,6 +73,16 @@ export default class CVAnnotationView extends CObject3D
     protected get model() {
         return this.getComponent(CVModel2);
     }
+    protected get meta() {
+        return this.getComponent(CVMeta, true);
+    }
+    protected get reader() {
+        return this.getGraphComponent(CVReader);
+    }
+    protected get articles() {
+        const meta = this.meta;
+        return meta ? meta.articles : null;
+    }
 
     get activeAnnotation() {
         return this._activeAnnotation;
@@ -96,6 +110,21 @@ export default class CVAnnotationView extends CObject3D
             ins.scale.setValue(annotation ? annotation.data.scale : 1, true);
             ins.offset.setValue(annotation ? annotation.data.offset : 0, true);
 
+            const articles = this.articles;
+            if (articles) {
+                const names = articles.items.map(article => article.data.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);
+            }
+            else {
+                ins.article.setOptions([ "(none)" ]);
+                ins.article.setValue(0);
+            }
+
+            ins.image.setValue(annotation ? annotation.data.imageUri : "", true);
+
             this.emit<IAnnotationsUpdateEvent>({ type: "update", annotation });
         }
     }
@@ -109,6 +138,7 @@ export default class CVAnnotationView extends CObject3D
         this.onSpriteLink = this.onSpriteLink.bind(this);
 
         this.on<IPointerEvent>("pointer-up", this.onPointerUp, this);
+        this.system.on<IPointerEvent>("pointer-up", this.onPointerUp, this);
 
         this.object3D = new HTMLSpriteGroup();
     }
@@ -126,34 +156,31 @@ export default class CVAnnotationView extends CObject3D
             object3D.updateMatrix();
         }
 
-        if (ins.title.changed) {
-            if (annotation) {
+        if (annotation) {
+            if (ins.title.changed) {
                 annotation.set("title", ins.title.value);
             }
-        }
-        if (ins.lead.changed) {
-            if (annotation) {
+            if (ins.lead.changed) {
                 annotation.set("lead", ins.lead.value);
             }
-        }
-        if (ins.style.changed) {
-            if (annotation) {
+            if (ins.style.changed) {
                 annotation.set("style", ins.style.getValidatedValue());
                 this.createSprite(annotation);
             }
-        }
-        if (ins.scale.changed) {
-            if (annotation) {
+            if (ins.scale.changed) {
                 annotation.set("scale", ins.scale.value);
             }
-        }
-        if (ins.offset.changed) {
-            if (annotation) {
+            if (ins.offset.changed) {
                 annotation.set("offset", ins.offset.value);
             }
-        }
+            if (ins.image.changed) {
+                annotation.set("imageUri", ins.image.value);
+            }
+            if (ins.article.changed) {
+                const article = this.articles.getAt(ins.article.getValidatedValue() - 1);
+                annotation.set("articleId", article ? article.id : "");
+            }
 
-        if (annotation) {
             this.updateSprite(annotation);
             this.emit<IAnnotationsUpdateEvent>({ type: "update", annotation });
         }
@@ -176,7 +203,9 @@ export default class CVAnnotationView extends CObject3D
     dispose()
     {
         (this.object3D as HTMLSpriteGroup).dispose();
+
         this.off<IPointerEvent>("pointer-up", this.onPointerUp, this);
+        this.system.off<IPointerEvent>("pointer-up", this.onPointerUp, this);
 
         this._viewports.forEach(viewport => viewport.off("dispose", this.onViewportDispose, this));
         this._viewports.clear();
@@ -269,9 +298,7 @@ export default class CVAnnotationView extends CObject3D
             target = target.parent as AnnotationSprite;
         }
 
-        if (target) {
-            this.activeAnnotation = target.annotation;
-        }
+        this.activeAnnotation = target && target.annotation;
     }
 
     protected onViewportDispose(event: IViewportDisposeEvent)
@@ -287,7 +314,8 @@ export default class CVAnnotationView extends CObject3D
 
     protected onSpriteLink(event: IAnnotationLinkEvent)
     {
-
+        this.reader.ins.articleId.setValue(event.annotation.data.articleId);
+        this.reader.ins.enabled.setValue(true);
     }
 
     protected createSprite(annotation: Annotation)

diff --git a/source/client/components/CVAnnotationsTask.ts b/source/client/components/CVAnnotationsTask.ts
@@ -191,8 +191,8 @@ export default class CVAnnotationsTask extends CVTask
 
     protected onActiveNode(previous: NVNode, next: NVNode)
     {
-        const prevAnnotations = previous ? previous.getComponent(CVAnnotationView) : null;
-        const nextAnnotations = next ? next.getComponent(CVAnnotationView) : null;
+        const prevAnnotations = previous ? previous.getComponent(CVAnnotationView, true) : null;
+        const nextAnnotations = next ? next.getComponent(CVAnnotationView, true) : null;
 
         if (prevAnnotations) {
             prevAnnotations.off<IAnnotationsUpdateEvent>("update", this.emitUpdateEvent, this);

diff --git a/source/client/components/CVArticlesTask.ts b/source/client/components/CVArticlesTask.ts
@@ -31,6 +31,7 @@ import ArticlesTaskView from "../ui/story/ArticlesTaskView";
 import CAssetManager from "@ff/scene/components/CAssetManager";
 import CVAssetWriter from "./CVAssetWriter";
 import MessageBox from "@ff/ui/MessageBox";
+import uniqueId from "@ff/core/uniqueId";
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -93,7 +94,10 @@ export default class CVArticlesTask extends CVTask
         const activeAsset = activeArticle ? this.assetManager.getAssetByPath(activeArticle.data.uri) : null;
 
         if (meta && ins.create.changed) {
-            meta.articles.append(new Article());
+            const article = new Article();
+            article.data.uri = `articles/new-article-${article.id}.html`;
+            meta.articles.append(article);
+            this.reader.ins.articleId.setValue(article.id);
         }
 
         if (activeArticle) {

diff --git a/source/client/components/CVReader.ts b/source/client/components/CVReader.ts
@@ -58,7 +58,7 @@ export default class CVReader extends Component
     protected _articles: Dictionary<IArticleEntry>;
 
     get snapshotKeys() {
-        return [ "enabled" ];
+        return [ "enabled", "articleId" ];
     }
 
     get articles() {
@@ -95,13 +95,11 @@ export default class CVReader extends Component
             const article = entry && entry.article;
             outs.node.setValue(entry && entry.node);
             outs.article.setValue(article);
+            outs.content.setValue("");
 
             if (article) {
                 this.readArticle(article);
             }
-            else {
-                outs.content.setValue("");
-            }
         }
 
         return true;

diff --git a/source/client/components/CVToursTask.ts b/source/client/components/CVToursTask.ts
@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+import { Node } from "@ff/graph/Component";
 import CTweenMachine, { EEasingCurve } from "@ff/graph/components/CTweenMachine";
 
 import CVTask, { types } from "./CVTask";
@@ -63,6 +64,14 @@ export default class CVToursTask extends CVTask
     tours: CVTours = null;
     machine: CTweenMachine = null;
 
+    constructor(node: Node, id: string)
+    {
+        super(node, id);
+
+        const configuration = this.configuration;
+        configuration.bracketsVisible = false;
+    }
+
     update(context)
     {
         const ins = this.ins;

diff --git a/source/client/components/CVViewer.ts b/source/client/components/CVViewer.ts
@@ -39,7 +39,7 @@ export default class CVViewer extends CRenderable
     ins = this.addInputs(CVViewer.ins);
 
     get snapshotKeys() {
-        return [ "shader", "exposure" ];
+        return [ "shader", "exposure", "annotationsVisible" ];
     }
 
     create()

diff --git a/source/client/models/Annotation.ts b/source/client/models/Annotation.ts
@@ -78,9 +78,11 @@ export default class Annotation extends Document<IAnnotation, IAnnotationJSON>
         if (data.tags.length > 0) {
             json.tags = data.tags;
         }
-        if (data.articles.length > 0) {
-            //TODO: Articles/IDs
-            //json.articles = data.articles.slice();
+        if (data.articleId) {
+            json.articleId = data.articleId;
+        }
+        if (data.imageUri) {
+            json.imageUri = data.imageUri;
         }
         if (data.style !== EAnnotationStyle.Default) {
             json.style = EAnnotationStyle[data.style];
@@ -124,9 +126,9 @@ export default class Annotation extends Document<IAnnotation, IAnnotationJSON>
         data.title = json.title || "";
         data.lead = json.lead || "";
         data.tags = json.tags || [];
-        //TODO: Articles/IDs
-        data.articles = [];
-        //data.articles = json.articles ? json.articles.slice() : [];
+
+        data.articleId = json.articleId || "";
+        data.imageUri = json.imageUri || "";
 
         data.style = EAnnotationStyle[json.style] || EAnnotationStyle.Default;
         data.visible = json.visible !== undefined ? json.visible : true;