Merge pull request #125 from Smithsonian/dev-standalone

Dev standalone

docs/content/explorer/api-examples/language/_index.md

@@ -0,0 +1,31 @@
+---
+title: "API Example: Set Language"
+summary: "Use API functions to set the active language."
+weight: 130
+---
+
+#### Try it out:
+
+{{< explorer "92c986d0-2b8d-43c1-8354-e9a2e80d0f9e">}}  <br>
+
+Change the active language for content and UI elements by entering a supported language code in the box below and clicking the "Set Language" button.
+
+The [setLanguage()](../../api) function uses language codes from the [ISO 639-1 Code standard](https://www.loc.gov/standards/iso639-2/php/code_list.php).
+Keep in mind that a language will only be available if the scene contains content in that language. This example scene has both English (en) and Spanish (es) content.
+
+{{< input-submit "Set Language" "setLanguage" "language">}}  <br>
+
+#### How it works:
+See the annotated javascript from this page below for how to use the [setLanguage() function](../../api).
+
+{{<highlight js>}}
+function setTourStep(stepIdx) {
+	// Get reference to the Explorer element by id
+	var voyagerElement = document.getElementById("voyager");
+
+	// Call the setTourStep function with the value of the 
+	// option input element as the parameter.
+	// **Note the hard-coded tour index and interpolate flag.
+	voyagerElement.setTourStep(0, stepIdx.value, true);
+}
+{{</highlight>}}

docs/content/explorer/api/_index.md

@@ -22,6 +22,7 @@ These attributes configure the initial object load of the component.
 | bgColor	   | Valid CSS colors  | Sets the color of the component background. Optional second color for gradient styles. Ex: "red" or "red rgb(0,255,0)" |
 | bgStyle	   | Solid, LinearGradient, RadialGradient | Sets the style of the component background. |
 | controls	   | True, False	   | Enables/Disables user-driven camera controls. Defaults to 'True'. Useful if driving navigation from external code.  |
+| lang 		   | valid [ISO 639-1](https://www.loc.gov/standards/iso639-2/php/code_list.php) code | Sets the active language of the component (where available) |
 
 ### UI Attributes
 
@@ -50,6 +51,7 @@ These methods engage Voyager functionality without the native UI.
 | enableAR()		     | None    			| Requests an AR session (if available, outcome depends on platform) **\*Due to browser security precautions, this will not work if the component is served in a cross-domain iframe**  |
 | setActiveAnnotation(id)| id: unique id string | Activates the annotation with the provided id. Opens annotation content where style permits.   |
 | setTourStep(tourIdx, stepIdx, interpolate[optional]) | tourIdx, stepIdx: valid integer - interpolate: boolean | Activates the scene state found at the provided tour and step index. Optional 'interpolate' parameter to control if transition is animated. Defaults to true. |
+| setLanguage(id)		 | id: valid [ISO 639-1](https://www.loc.gov/standards/iso639-2/php/code_list.php) code string | Changes the active Voyager language to the supplied id if available in the current scene.  |
 
 ### Navigation Methods
 Methods for external control over camera properties and navigation.

docs/layouts/shortcodes/explorer.html

@@ -88,4 +88,8 @@
 	var voyagerElement = document.getElementById("voyager");
 	voyagerElement.setTourStep(0, stepIdx.value, true);
 }
+function setLanguage(language) {
+	var voyagerElement = document.getElementById("voyager");
+	voyagerElement.setLanguage(language.value);
+}
 </script>

package.json

@@ -49,6 +49,7 @@
     "homepage": "https://github.com/Smithsonian/dpo-voyager#readme",
     "dependencies": {
         "ajv": "^8.6.2",
+        "client-zip": "^2.0.0",
         "clone-deep": "^4.0.1",
         "express": "^4.17.1",
         "filenamify": "^4.3.0",
@@ -66,9 +67,10 @@
         "quill-image-resize-module": "^3.0.0",
         "readable-stream": "^3.6.0",
         "resolve-pathname": "^3.0.0",
+        "simple-dropzone": "^0.8.1",
         "sanitize-html": "^2.5.1",
         "stream-browserify": "^3.0.0",
-        "three": "^0.136.0",
+        "three": "^0.137.5",
         "three-bmfont-text": "git+https://github.com/Smithsonian/three-bmfont-text.git#e611dac13d",
         "toposort": "^2.0.2",
         "webdav": "^4.7.0",
@@ -79,7 +81,7 @@
         "@types/chai": "^4.2.21",
         "@types/mocha": "^9.0.0",
         "@types/node": "^14.0.26",
-        "@types/three": "^0.136.1",
+        "@types/three": "^0.137.0",
         "chai": "^4.2.0",
         "concurrently": "^6.2.1",
         "css-loader": "^6.2.0",
@@ -91,7 +93,7 @@
         "madge": "^5.0.1",
         "mini-css-extract-plugin": "^2.2.0",
         "mocha": "^9.2.0",
-        "node-sass": "^6.0.1",
+        "node-sass": "^7.0.1",
         "raw-loader": "^4.0.2",
         "sass-loader": "^12.1.0",
         "source-map-loader": "^3.0.0",

source/client/applications/ExplorerApplication.ts

@@ -50,6 +50,7 @@ import CRenderer from "client/../../libs/ff-scene/source/components/CRenderer";
 import { clamp } from "client/utils/Helpers"
 import CVScene from "client/components/CVScene";
 import CVAnnotationView from "client/components/CVAnnotationView";
+import { ELanguageType } from "client/schema/common";
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -87,6 +88,8 @@ export interface IExplorerApplicationProps
     bgStyle?: string;
     /** Enables/disables pointer-driven camera controls. */
     controls?: string;
+    /** ISO 639-1 language code to change active component language */
+    lang?: string;
 }
 
 /**
@@ -104,7 +107,7 @@ export default class ExplorerApplication
     
 Voyager - 3D Explorer and Tool Suite
 3D Foundation Project
-(c) 2021 Smithsonian Institution
+(c) 2022 Smithsonian Institution
 
 https://3d.si.edu
 https://github.com/smithsonian/dpo-voyager
@@ -273,6 +276,7 @@ Version: ${ENV_VERSION}
         props.bgColor = props.bgColor || parseUrlParameter("bgColor") || parseUrlParameter("bc");
         props.bgStyle = props.bgStyle || parseUrlParameter("bgStyle") || parseUrlParameter("bs");
         props.controls = props.controls || parseUrlParameter("controls") || parseUrlParameter("ct");
+        props.lang = props.lang || parseUrlParameter("lang") || parseUrlParameter("l");
 
         const url = props.root || props.document || props.model || props.geometry;
         this.setBaseUrl(new URL(url || ".", window.location as any).href);
@@ -311,6 +315,10 @@ Version: ${ENV_VERSION}
             this.assetReader.setSystemAssetPath(props.resourceRoot);
         }
 
+        if(props.lang) {
+            this.setLanguage(props.lang);
+        }
+
         if (props.document) {
             // first loading priority: document
             props.document = props.root ? props.document : manager.getAssetName(props.document);
@@ -606,6 +614,20 @@ Version: ${ENV_VERSION}
             console.log("Error: enableNavigation param is not valid.");
         }
     }
+
+    // set language
+    setLanguage(languageID: string)
+    {
+        const languageIns = this.system.getMainComponent(CVDocumentProvider).activeComponent.setup.language.ins;
+        const id = languageID.toUpperCase();
+
+        if(id in ELanguageType) {
+            languageIns.language.setValue(ELanguageType[id]);
+        }
+        else {
+            console.log("Error: setLanguage param is not a valid language id.");
+        }
+    }
 }
 
 window["VoyagerExplorer"] = ExplorerApplication;

source/client/applications/StoryApplication.ts

@@ -41,6 +41,7 @@ import NVoyagerStory from "../nodes/NVoyagerStory";
 
 import MainView from "../ui/story/MainView";
 import CVTaskProvider, { ETaskMode } from "../components/CVTaskProvider";
+import CVStandaloneFileManager from "client/components/CVStandaloneFileManager";
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -51,7 +52,7 @@ export interface IStoryApplicationProps extends IExplorerApplicationProps
 {
     /** The page URL to navigate to when the user exits the story tool. */
     referrer?: string;
-    /** The task set the application should display. Valid options: "prep" and "author". */
+    /** The task set the application should display. Valid options: "prep","author","qc","expert","standalone". */
     mode?: string;
     /** When set to true, application displays additional expert level tools. */
     expert?: boolean;
@@ -81,6 +82,10 @@ export default class StoryApplication
         return this.system.getMainComponent(CVDocumentProvider);
     }
 
+    get explorerApp() {
+        return this.explorer;
+    }
+
     constructor(parent: HTMLElement, props?: IStoryApplicationProps)
     {
         // create the embedded explorer application, parse properties, start loading/presenting
@@ -147,8 +152,6 @@ export default class StoryApplication
 
         this.explorer.evaluateProps();
 
-        this.mediaManager.rootUrl = this.assetManager.baseUrl;
-
         props.referrer = props.referrer || parseUrlParameter("referrer");
         props.mode = props.mode || parseUrlParameter("mode") || "prep";
         props.expert = props.expert !== undefined ? props.expert : parseUrlParameter("expert") !== "false";
@@ -168,6 +171,12 @@ export default class StoryApplication
         else if (modeText.startsWith("ex")) {
             mode = ETaskMode.Expert;
         }
+        else if (modeText.startsWith("stand")) {
+            mode = ETaskMode.Standalone;
+            app.createComponent(CVStandaloneFileManager);
+        }
+
+        this.mediaManager.rootUrl = this.assetManager.baseUrl;
 
         const tasks = this.system.getMainComponent(CVTaskProvider);
         tasks.ins.mode.setValue(mode);

source/client/applications/storyTypes.ts

@@ -28,6 +28,7 @@ import CVAnnotationsTask from "../components/CVAnnotationsTask";
 import CVArticlesTask from "../components/CVArticlesTask";
 import CVToursTask from "../components/CVToursTask";
 import CVDerivativesTask from "../components/CVDerivativesTask";
+import CVStandaloneFileManager from "../components/CVStandaloneFileManager";
 import CVAudioTask from "../components/CVAudioTask";
 
 import NVVoyagerStory from "../nodes/NVoyagerStory";
@@ -40,6 +41,7 @@ const types = [
     CVStoryApplication,
     CVAssetWriter,
     CVMediaManager,
+    CVStandaloneFileManager,
 
     CVTaskProvider,
     CVSettingsTask,

source/client/applications/taskSets.ts

@@ -26,7 +26,7 @@ import CVAudioTask from "../components/CVAudioTask";
 
 ////////////////////////////////////////////////////////////////////////////////
 
-export enum ETaskMode { QC, Authoring, Edit, Expert }
+export enum ETaskMode { QC, Authoring, Edit, Expert, Standalone }
 
 export default {
     [ETaskMode.Edit]: [
@@ -61,5 +61,14 @@ export default {
         CVToursTask,
         CVAudioTask,
         CVSettingsTask,
+    ],
+    [ETaskMode.Standalone]: [
+        CVPoseTask,
+        CVCaptureTask,
+        CVDerivativesTask,
+        CVAnnotationsTask,
+        CVArticlesTask,
+        CVToursTask,
+        CVSettingsTask,
     ]
 }

source/client/components/CVArticlesTask.ts

@@ -33,6 +33,7 @@ import ArticlesTaskView from "../ui/story/ArticlesTaskView";
 import CVMediaManager from "./CVMediaManager";
 import CVAssetWriter from "./CVAssetWriter";
 import { ELanguageStringType, ELanguageType, DEFAULT_LANGUAGE } from "client/schema/common";
+import CVStandaloneFileManager from "./CVStandaloneFileManager";
 import CVAnnotationView from "./CVAnnotationView";
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -129,8 +130,15 @@ export default class CVArticlesTask extends CVTask
             const article = new Article();
             const defaultFolder = CVMediaManager.articleFolder;
             article.uri = `${defaultFolder}/new-article-${article.id}-${ELanguageType[DEFAULT_LANGUAGE]}.html`;
+
+            const standaloneFiles = this.getGraphComponent(CVStandaloneFileManager, true);
+            if(standaloneFiles) {
+                standaloneFiles.addFile(article.uri);
+            }
+
             meta.articles.append(article);
             this.reader.ins.articleId.setValue(article.id);
+            this.reader.outs.count.setValue(meta.articles.length);
             languageManager.ins.language.setValue(ELanguageType[DEFAULT_LANGUAGE]);
         }
 
@@ -145,6 +153,7 @@ export default class CVArticlesTask extends CVTask
             }
             if (ins.delete.changed) {
                 this.deleteArticle(activeArticle);
+                this.reader.outs.count.setValue(meta.articles.length);
             }
             if (ins.title.changed) {
                 activeArticle.title = ins.title.value;
@@ -261,9 +270,10 @@ export default class CVArticlesTask extends CVTask
         const ins = this.ins;
         const outs = this.outs;
         const meta = this.meta;
-        const article = this.reader.activeArticle;
+        let article = this.reader.activeArticle;
 
         if (meta && article && meta.articles.getById(article.id)) {
+            article = meta.articles.getById(article.id);
             ins.title.setValue(article.title, true);
             ins.lead.setValue(article.lead, true);
             ins.tags.setValue(article.tags.join(", "), true);

source/client/components/CVAssetManager.ts

@@ -78,7 +78,8 @@ export default class CVAssetManager extends Component
 
     getAssetUrl(assetPath: string)
     {
-        return new URL(assetPath, this._baseUrl).href;
+        const url = new URL(assetPath, this._baseUrl).href;
+        return this.loadingManager.resolveURL(url);
     }
 
     getAssetPath(url: string)

source/client/components/CVAssetReader.ts

@@ -75,12 +75,17 @@ export default class CVAssetReader extends Component
         this.modelLoader.dracoPath = dracoPath;
     }
 
-    setSystemAssetPath(assetPath: string)
+    setSystemAssetPath(assetPath: string) // TODO: Move to CVAssetManager
     {
         this.fontReader.fontPath = assetPath;
         this.systemAssetPath = assetPath;
     }
 
+    getSystemAssetUrl(assetPath: string) // TODO: Move to CVAssetManager
+    {
+        return (this.systemAssetPath || DEFAULT_SYSTEM_ASSET_PATH) + assetPath;
+    }
+
     async getJSON(assetPath: string): Promise<any>
     {
         const url = this.assetManager.getAssetUrl(assetPath);
@@ -119,13 +124,13 @@ export default class CVAssetReader extends Component
 
     async getSystemTexture(assetPath: string): Promise<THREE.Texture>
     {
-        const url = (this.systemAssetPath || DEFAULT_SYSTEM_ASSET_PATH) + assetPath;
+        const url = this.getSystemAssetUrl(assetPath);
         return this.textureLoader.get(url);
     }
 
     async getSystemJSON(assetPath: string): Promise<any>
     {
-        const url = (this.systemAssetPath || DEFAULT_SYSTEM_ASSET_PATH) + assetPath;
+        const url = this.getSystemAssetUrl(assetPath);
         return this.jsonLoader.get(url);
     }
 }

source/client/components/CVAssetWriter.ts

@@ -23,6 +23,9 @@ import { INodeComponents } from "../nodes/NVNode";
 
 import CVDocument from "./CVDocument";
 import CVAssetManager from "./CVAssetManager";
+import CVStandaloneFileManager from "./CVStandaloneFileManager"
+import CVAssetReader from "./CVAssetReader";
+import { resolve } from "dns";
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -50,6 +53,9 @@ export default class CVAssetWriter extends Component
     protected get assetManager() {
         return this.getMainComponent(CVAssetManager);
     }
+    protected get standaloneFileManager() {
+        return this.getGraphComponent(CVStandaloneFileManager, true);
+    }
 
     putJSON(json: any, assetPath: string): Promise<void>
     {
@@ -59,8 +65,15 @@ export default class CVAssetWriter extends Component
 
     putText(text: string, assetPath: string): Promise<string>
     {
-        const url = this.assetManager.getAssetUrl(assetPath);
-        return fetch.text(url, "PUT", text);
+        const standaloneManager = this.standaloneFileManager;
+        if(standaloneManager) {
+            standaloneManager.addFile(assetPath, [text]);
+            return Promise.resolve(text);
+        }
+        else {
+            const url = this.assetManager.getAssetUrl(assetPath);
+            return fetch.text(url, "PUT", text);
+        }
     }
 
     putDocument(document: CVDocument, components?: INodeComponents, assetPath?: string): Promise<void>