minor fixes

Smithsonian · Mar 7, 2019 · 6368b60 · 6368b60
1 parent 2daffcd
commit 6368b60
Show file tree

Hide file tree

Showing 13 changed files with 163 additions and 86 deletions.
diff --git a/libs/ff-three b/libs/ff-three
diff --git a/source/client/core/ui/styles.scss b/source/client/core/ui/styles.scss
@@ -95,64 +95,15 @@ sv-logo {
 }
 
 ////////////////////////////////////////////////////////////////////////////////
-// CONTENT LAYER
+// SCENE VIEW
 
-.sv-content-view {
-  @include fullsize;
-}
 
 .sv-scene-view {
+  @include fullsize;
+  overflow: hidden;
+
   &.sv-blur {
     filter: brightness(80%) blur(5px);
     transition: filter 0.5s;
   }
 }
-
-.sv-content-reader-split {
-  @include fullsize;
-  display: flex;
-
-  .sv-scene-view {
-    flex: 1 1 60%;
-  }
-  .sv-reader-view {
-    flex: 1 1 40%;
-  }
-}
-
-.sv-content-reader-overlay {
-  @include fullsize;
-
-  .sv-scene-view {
-    @include fullsize;
-  }
-
-  .sv-reader-view {
-    @include fullsize;
-    margin-top: 54px;
-    //background-color: transparentize(white, 0.95);
-    border-top: $section-border;
-    //z-index: 2;
-  }
-}
-
-.sv-content-reader-off {
-  .sv-scene-view {
-    @include fullsize;
-  }
-}
-
-.sv-reader-view {
-  overflow-y: auto;
-
-  .sv-article {
-    margin: 0 20px;
-  }
-}
-
-
-.sv-content-overlay {
-}
-
-.ff-viewport-overlay {
-}
diff --git a/source/client/demo.hbs b/source/client/demo.hbs
@@ -39,29 +39,29 @@
 <h1>Voyager 3D Tool Suite</h1>
 <p>Standalone test/demo versions.<br>Current version: {{htmlWebpackPlugin.options.version}}</p>
 <h2>Voyager Story</h2>
-<p>Click on an asset to launch / <a href="https://jira.si.edu/secure/CreateIssueDetails!init.jspa?pid=13702&description=Version%20{{htmlWebpackPlugin.options.version}}&issuetype=1&summary=My%20Issue&labels=VoyagerStory&priority=3&assignee=ralph" target="_blank">Create <i>Story</i> issue in Jira</a></p>
+<p>Click on an asset to launch / <a href="https://jira.si.edu/secure/CreateIssueDetails!init.jspa?pid=13702&description=Version%20{{htmlWebpackPlugin.options.version}}&issuetype=1&summary=My%20Issue&labels=VoyagerStory&priority=3&assignee=WiedemeierR" target="_blank">Create <i>Story</i> issue in Jira</a></p>
 <div class="sv-demo-items">
-    <a href="/voyager-story-dev.html?item=data/tusk/tusk-item.json&base=tusk" target="_blank"><img src="/data/tusk/tusk-image-low.jpg"></a>
-    <a href="/voyager-story-dev.html?item=data/ewer/ewer-top-item.json&base=ewer-top" target="_blank"><img src="/data/ewer/ewer-top-image-low.jpg"></a>
-    <a href="/voyager-story-dev.html?item=data/ewer/ewer-bottom-item.json&base=ewer-bottom" target="_blank"><img src="/data/ewer/ewer-bottom-image-low.jpg"></a>
-    <a href="/voyager-story-dev.html?item=data/chair/chair-item.json&base=chair" target="_blank"><img src="/data/chair/chair-image-low.jpg"></a>
+    <a href="/voyager-story-dev.html?item=data/tusk/tusk-item.json" target="_blank"><img src="/data/tusk/tusk-image-low.jpg"></a>
+    <a href="/voyager-story-dev.html?item=data/ewer/ewer-top-item.json" target="_blank"><img src="/data/ewer/ewer-top-image-low.jpg"></a>
+    <a href="/voyager-story-dev.html?item=data/ewer/ewer-bottom-item.json" target="_blank"><img src="/data/ewer/ewer-bottom-image-low.jpg"></a>
+    <a href="/voyager-story-dev.html?item=data/chair/chair-item.json" target="_blank"><img src="/data/chair/chair-image-low.jpg"></a>
 </div>
 
 <h2>Voyager Explorer</h2>
-<p>Click on an asset to launch / <a href="https://jira.si.edu/secure/CreateIssueDetails!init.jspa?pid=13702&description=Version%20{{htmlWebpackPlugin.options.version}}&issuetype=1&summary=My%20Issue&labels=VoyagerExplorer&priority=3&assignee=ralph" target="_blank">Create <i>Explorer</i> issue in Jira</a></p>
+<p>Click on an asset to launch / <a href="https://jira.si.edu/secure/CreateIssueDetails!init.jspa?pid=13702&description=Version%20{{htmlWebpackPlugin.options.version}}&issuetype=1&summary=My%20Issue&labels=VoyagerExplorer&priority=3&assignee=WiedemeierR" target="_blank">Create <i>Explorer</i> issue in Jira</a></p>
 <div class="sv-demo-items">
-    <a href="/voyager-explorer-dev.html?item=data/tusk/tusk-item.json&base=tusk" target="_blank"><img src="/data/tusk/tusk-image-low.jpg"></a>
-    <a href="/voyager-explorer-dev.html?item=data/ewer/ewer-top-item.json&base=ewer-top" target="_blank"><img src="/data/ewer/ewer-top-image-low.jpg"></a>
-    <a href="/voyager-explorer-dev.html?item=data/ewer/ewer-bottom-item.json&base=ewer-bottom" target="_blank"><img src="/data/ewer/ewer-bottom-image-low.jpg"></a>
-    <a href="/voyager-explorer-dev.html?item=data/chair/chair-item.json&base=chair" target="_blank"><img src="/data/chair/chair-image-low.jpg"></a>
+    <a href="/voyager-explorer-dev.html?item=data/tusk/tusk-item.json" target="_blank"><img src="/data/tusk/tusk-image-low.jpg"></a>
+    <a href="/voyager-explorer-dev.html?item=data/ewer/ewer-top-item.json" target="_blank"><img src="/data/ewer/ewer-top-image-low.jpg"></a>
+    <a href="/voyager-explorer-dev.html?item=data/ewer/ewer-bottom-item.json" target="_blank"><img src="/data/ewer/ewer-bottom-image-low.jpg"></a>
+    <a href="/voyager-explorer-dev.html?item=data/chair/chair-item.json" target="_blank"><img src="/data/chair/chair-image-low.jpg"></a>
 </div>
 <h2>Voyager Mini</h2>
-<p>Click on an asset to launch / <a href="https://jira.si.edu/secure/CreateIssueDetails!init.jspa?pid=13702&description=Version%20{{htmlWebpackPlugin.options.version}}&issuetype=1&summary=My%20Issue&labels=VoyagerMini&priority=3&assignee=ralph" target="_blank">Create <i>Mini</i> issue in Jira</a></p>
+<p>Click on an asset to launch / <a href="https://jira.si.edu/secure/CreateIssueDetails!init.jspa?pid=13702&description=Version%20{{htmlWebpackPlugin.options.version}}&issuetype=1&summary=My%20Issue&labels=VoyagerMini&priority=3&assignee=WiedemeierR" target="_blank">Create <i>Mini</i> issue in Jira</a></p>
 <div class="sv-demo-items">
-    <a href="/voyager-mini-dev.html?item=data/tusk/tusk-item.json&base=tusk" target="_blank"><img src="/data/tusk/tusk-image-low.jpg"></a>
-    <a href="/voyager-mini-dev.html?item=data/ewer/ewer-top-item.json&base=ewer-top" target="_blank"><img src="/data/ewer/ewer-top-image-low.jpg"></a>
-    <a href="/voyager-mini-dev.html?item=data/ewer/ewer-bottom-item.json&base=ewer-bottom" target="_blank"><img src="/data/ewer/ewer-bottom-image-low.jpg"></a>
-    <a href="/voyager-mini-dev.html?item=data/chair/chair-item.json&base=chair" target="_blank"><img src="/data/chair/chair-image-low.jpg"></a>
+    <a href="/voyager-mini-dev.html?item=data/tusk/tusk-item.json" target="_blank"><img src="/data/tusk/tusk-image-low.jpg"></a>
+    <a href="/voyager-mini-dev.html?item=data/ewer/ewer-top-item.json" target="_blank"><img src="/data/ewer/ewer-top-image-low.jpg"></a>
+    <a href="/voyager-mini-dev.html?item=data/ewer/ewer-bottom-item.json" target="_blank"><img src="/data/ewer/ewer-bottom-image-low.jpg"></a>
+    <a href="/voyager-mini-dev.html?item=data/chair/chair-item.json" target="_blank"><img src="/data/chair/chair-image-low.jpg"></a>
 </div>
 </body>
 </html>
diff --git a/source/client/explorer/ui/ContentView.ts b/source/client/explorer/ui/ContentView.ts
@@ -16,6 +16,7 @@
  */
 
 import CVAssetLoader from "../../core/components/CVAssetLoader";
+import CVScene from "../../core/components/CVScene";
 import CVReader, { EReaderPosition } from "../components/CVReader";
 
 import SystemElement, { customElement, html } from "../../core/ui/SystemElement";
@@ -69,6 +70,14 @@ export default class ContentView extends SystemElement
         const sceneView = this.sceneView;
         sceneView.classList.remove("sv-blur");
 
+        // TODO: quick hack
+        if (!isLoading) {
+            const scene = this.system.getComponent(CVScene, true);
+            if (scene) {
+                scene.ins.zoomExtents.set();
+            }
+        }
+
         if (readerVisible) {
             if (readerPosition === EReaderPosition.Right) {
 

diff --git a/source/client/explorer/ui/styles.scss b/source/client/explorer/ui/styles.scss
@@ -19,6 +19,62 @@
 
 @import "../../core/ui/styles";
 
+////////////////////////////////////////////////////////////////////////////////
+// CONTENT LAYER
+
+.sv-content-view {
+  @include fullsize;
+  overflow: hidden;
+}
+
+.sv-content-reader-split {
+  @include fullsize;
+  display: flex;
+
+  .sv-scene-view {
+    flex: 1 1 60%;
+  }
+  .sv-reader-view {
+    flex: 1 1 40%;
+  }
+}
+
+.sv-content-reader-overlay {
+  @include fullsize;
+
+  .sv-scene-view {
+    @include fullsize;
+  }
+
+  .sv-reader-view {
+    @include fullsize;
+    margin-top: 54px;
+    //background-color: transparentize(white, 0.95);
+    border-top: $section-border;
+    //z-index: 2;
+  }
+}
+
+.sv-content-reader-off {
+  .sv-scene-view {
+    @include fullsize;
+  }
+}
+
+.sv-reader-view {
+  overflow-y: auto;
+
+  .sv-article {
+    margin: 0 20px;
+  }
+}
+
+.sv-content-overlay {
+}
+
+.ff-viewport-overlay {
+}
+
 ////////////////////////////////////////////////////////////////////////////////
 // ANNOTATIONS
 
@@ -77,6 +133,7 @@
 
 .sv-chrome-view {
   @include fullsize;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
 

diff --git a/source/client/mini/MiniApplication.ts b/source/client/mini/MiniApplication.ts
@@ -30,8 +30,6 @@ import { nodeTypes as graphNodes } from "@ff/graph/nodes";
 import { nodeTypes as sceneNodes } from "@ff/scene/nodes";
 import { nodeTypes as miniNodes } from "./nodes";
 
-import { IItem } from "common/types/item";
-
 import CVAssetLoader from "../core/components/CVAssetLoader";
 
 import NVMiniExplorer from "./nodes/NVMiniExplorer";

diff --git a/source/client/mini/nodes/NVMiniExplorer.ts b/source/client/mini/nodes/NVMiniExplorer.ts
@@ -19,6 +19,7 @@ import Node from "@ff/graph/Node";
 import CPulse from "@ff/graph/components/CPulse";
 
 import CRenderer from "@ff/scene/components/CRenderer";
+import CBackground from "@ff/scene/components/CBackground";
 import NCamera from "@ff/scene/nodes/NCamera";
 import NDirectionalLight from "@ff/scene/nodes/NDirectionalLight";
 
@@ -50,14 +51,16 @@ export default class NVMiniExplorer extends Node
         this.createComponent(CRenderer);
 
         this.createComponent(CVAssetLoader);
-        this.createComponent(CVOrbitNavigation);
 
         const scene = this.createComponent(CVScene);
         this.createScene(scene);
     }
 
     protected createScene(scene: CVScene)
     {
+        scene.node.createComponent(CBackground);
+        scene.node.createComponent(CVOrbitNavigation);
+
         const item = scene.graph.createCustomNode(NVMiniItem);
         scene.addChild(item.transform);
 

diff --git a/source/client/core/ui/ContentView.ts → source/client/mini/ui/ContentView.ts b/source/client/core/ui/ContentView.ts → source/client/mini/ui/ContentView.ts
@@ -16,22 +16,31 @@
  */
 
 
-import CVAssetLoader from "../components/CVAssetLoader";
+import CVAssetLoader from "../../core/components/CVAssetLoader";
+import CVScene from "../../core/components/CVScene";
 
-import SystemElement, { customElement, html } from "./SystemElement";
+import SystemElement, { customElement, html } from "../../core/ui/SystemElement";
 
-import "./SceneView";
-import "./Spinner";
+import SceneView from "../../core/ui/SceneView";
+import "../../core/ui/Spinner";
 
 ////////////////////////////////////////////////////////////////////////////////
 
 @customElement("sv-content-view")
 export default class ContentView extends SystemElement
 {
+    protected sceneView: SceneView = null;
+
     protected get assetLoader() {
         return this.system.getMainComponent(CVAssetLoader);
     }
 
+    protected firstConnected()
+    {
+        this.classList.add("sv-content-view");
+        this.sceneView = new SceneView(this.system);
+    }
+
     protected connected()
     {
         this.assetLoader.outs.loading.on("value", this.performUpdate, this);
@@ -44,10 +53,17 @@ export default class ContentView extends SystemElement
 
     protected render()
     {
-        const system = this.system;
         const isLoading = this.assetLoader.outs.loading.value;
 
-        return html`<sv-scene-view .system=${system}>
-            </sv-scene-view><sv-spinner ?visible=${isLoading}></sv-spinner>`;
+        if (!isLoading) {
+            const scene = this.system.getComponent(CVScene, true);
+            if (scene) {
+                scene.ins.zoomExtents.set();
+            }
+        }
+
+
+        return html`${this.sceneView}
+            <sv-spinner ?visible=${isLoading}></sv-spinner>`;
     }
 }
diff --git a/source/client/mini/ui/MainView.ts b/source/client/mini/ui/MainView.ts
@@ -17,7 +17,7 @@
 
 import CustomElement, { customElement } from "@ff/ui/CustomElement";
 
-import ContentView from "../../explorer/ui/ContentView";
+import ContentView from "./ContentView";
 
 import MiniApplication, { IMiniApplicationProps } from "../MiniApplication";
 

diff --git a/source/client/mini/ui/styles.scss b/source/client/mini/ui/styles.scss
@@ -15,4 +15,4 @@
  * limitations under the License.
  */
 
-@import "../../core/ui/styles";
+@import "../../core/ui/styles";
diff --git a/source/client/app.hbs → source/client/story.hbs b/source/client/app.hbs → source/client/story.hbs
@@ -8,6 +8,10 @@
 
         <link rel="shortcut icon" type="image/png" href="favicon.png"/>
 
+        <style>
+            body { background: #303030; }
+        </style>
+
         {{#if htmlWebpackPlugin.options.isDevelopment}}
             {{#if htmlWebpackPlugin.options.isLocal}}
         <script src="/libs/pep.js"></script>
@@ -16,7 +20,7 @@
         <script src="/libs/quill.js"></script>
             {{else}}
         <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.js"></script>
         <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
         <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
             {{/if}}
@@ -28,7 +32,7 @@
         <script src="/libs/quill.min.js"></script>
             {{else}}
         <script src="https://code.jquery.com/pep/0.4.3/pep.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
         <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
         <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
             {{/if}}

diff --git a/source/client/viewer.hbs b/source/client/viewer.hbs
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>{{htmlWebpackPlugin.options.title}}</title>
+
+    <link rel="shortcut icon" type="image/png" href="favicon.png"/>
+
+    <style>
+        body { background: #303030; }
+    </style>
+
+    {{#if htmlWebpackPlugin.options.isDevelopment}}
+        {{#if htmlWebpackPlugin.options.isLocal}}
+            <script src="/libs/pep.js"></script>
+            <script src="/libs/three.js"></script>
+        {{else}}
+            <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
+            <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.js"></script>
+        {{/if}}
+    {{else}}
+        {{#if htmlWebpackPlugin.options.isLocal}}
+            <script src="/libs/pep.min.js"></script>
+            <script src="/libs/three.min.js"></script>
+            <link href="/libs/quill.snow.css" rel="stylesheet">
+            <script src="/libs/quill.min.js"></script>
+        {{else}}
+            <script src="https://code.jquery.com/pep/0.4.3/pep.min.js"></script>
+            <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+        {{/if}}
+    {{/if}}
+
+</head>
+<body>
+{{{htmlWebpackPlugin.options.element}}}
+</body>
+</html>