refactored mobile interface so that current views are created via scripting

5 files changed, 92 insertions, 58 deletions

diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index b35ea0bb0..0b23c3bec 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -182,9 +182,11 @@ export class WebBox extends DocAnnotatableComponent<FieldViewProps, WebDocument>
                 {view}
             </div>;
 
-        const frozen = !this.props.isSelected() || DocumentDecorations.Instance.Interacting;
+        const decInteracting = DocumentDecorations.Instance && DocumentDecorations.Instance.Interacting;
 
-        const classname = "webBox-cont" + (this.props.isSelected() && InkingControl.Instance.selectedTool === InkTool.None && !DocumentDecorations.Instance.Interacting ? "-interactive" : "");
+        const frozen = !this.props.isSelected() || decInteracting;
+
+        const classname = "webBox-cont" + (this.props.isSelected() && InkingControl.Instance.selectedTool === InkTool.None && !decInteracting ? "-interactive" : "");
         return (
             <>
                 <div className={classname}  >
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 0b0280519..3304e8e22 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -13,6 +13,7 @@ import { observable } from 'mobx';
 import { Utils } from '../Utils';
 import MobileInterface from './MobileInterface';
 import { CurrentUserUtils } from '../server/authentication/models/current_user_utils';
+import { Scripting } from '../client/util/Scripting';
 
 
 
@@ -27,12 +28,11 @@ const inputRef = React.createRef<HTMLInputElement>();
 
 @observer
 class Uploader extends React.Component {
-    @observable
-    error: string = "";
-    @observable
-    status: string = "";
+    @observable error: string = "";
+    @observable status: string = "";
 
     onClick = async () => {
+        console.log("uploader click");
         try {
             this.status = "initializing protos";
             await Docs.Prototypes.initialize();
@@ -105,6 +105,8 @@ class Uploader extends React.Component {
 
 }
 
+// Scripting.addGlobal(function uploadImageMobile() { return Uploader.onClick(); });
+
 
 // DocServer.init(window.location.protocol, window.location.hostname, 4321, "image upload");
 (async () => {
diff --git a/src/mobile/MobileInkOverlay.tsx b/src/mobile/MobileInkOverlay.tsx
index 600e8a91b..6b65aa436 100644
--- a/src/mobile/MobileInkOverlay.tsx
+++ b/src/mobile/MobileInkOverlay.tsx
@@ -37,9 +37,9 @@ export default class MobileInkOverlay extends React.Component {
     initMobileInkOverlay(content: MobileInkOverlayContent) {
         const { width, height } = content;
         const scaledSize = this.initialSize(width ? width : 0, height ? height : 0);
-        this._width = scaledSize.width * .8;
-        this._height = scaledSize.height * .8;
-        this._scale = .8; //scaledSize.scale;
+        this._width = scaledSize.width;
+        this._height = scaledSize.height;
+        this._scale = scaledSize.scale; //scaledSize.scale;
         this._x = 300; // TODO: center on screen
         this._y = 25; // TODO: center on screen
     }
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 03bcbca80..665d9a168 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -30,14 +30,14 @@ export default class MobileInterface extends React.Component {
     @observable static Instance: MobileInterface;
     @computed private get userDoc() { return CurrentUserUtils.UserDocument; }
     @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; }
-    @observable private currentView: "main" | "ink" | "upload" = "main";
+    // @observable private currentView: "main" | "ink" | "upload" = "main";
+    private mainDoc: Doc = CurrentUserUtils.setupMobileDoc(this.userDoc);
+    @observable private renderView?: () => JSX.Element;
 
-    private mainDoc = CurrentUserUtils.setupMobileDoc(this.userDoc);
-
-    private inkDoc?: Doc;
+    // private inkDoc?: Doc;
     public drawingInk: boolean = false;
 
-    private uploadDoc?: Doc;
+    // private uploadDoc?: Doc;
 
     constructor(props: Readonly<{}>) {
         super(props);
@@ -55,41 +55,63 @@ export default class MobileInterface extends React.Component {
     }
 
     @action
-    switchCurrentView = (view: "main" | "ink" | "upload") => {
-        this.currentView = view;
+    switchCurrentView = (doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) => {
+        if (!this.userDoc) return;
 
-        if (this.userDoc) {
-            switch (view) {
-                case "main": {
-                    // const doc = CurrentUserUtils.setupMobileDoc(this.userDoc);
-                    this.userDoc.activeMobile = this.mainDoc;
-                    break;
-                }
-                case "ink": {
-                    this.inkDoc = CurrentUserUtils.setupMobileInkingDoc(this.userDoc);
-                    this.userDoc.activeMobile = this.inkDoc;
-                    InkingControl.Instance.switchTool(InkTool.Pen);
-                    this.drawingInk = true;
+        this.userDoc.activeMobile = doc(this.userDoc);
+        onSwitch && onSwitch();
 
-                    DocServer.Mobile.dispatchOverlayTrigger({
-                        enableOverlay: true,
-                        width: window.innerWidth,
-                        height: window.innerHeight
-                    });
+        this.renderView = renderView;
+        console.log("switching current view", renderView);
+    }
 
-                    break;
-                }
-                case "upload": {
-                    this.uploadDoc = CurrentUserUtils.setupMobileUploadDoc(this.userDoc);
-                    this.userDoc.activeMobile = this.uploadDoc;
+    onSwitchInking = () => {
+        InkingControl.Instance.switchTool(InkTool.Pen);
+        MobileInterface.Instance.drawingInk = true;
 
-                }
-            }
-        }
+        DocServer.Mobile.dispatchOverlayTrigger({
+            enableOverlay: true,
+            width: window.innerWidth,
+            height: window.innerHeight
+        });
     }
 
-    @computed
-    get mainContent() {
+    // @action
+    // switchCurrentView = (view: "main" | "ink" | "upload") => {
+    //     this.currentView = view;
+
+    //     if (this.userDoc) {
+    //         switch (view) {
+    //             case "main": {
+    //                 // const doc = CurrentUserUtils.setupMobileDoc(this.userDoc);
+    //                 this.userDoc.activeMobile = this.mainDoc;
+    //                 break;
+    //             }
+    //             case "ink": {
+    //                 this.inkDoc = CurrentUserUtils.setupMobileInkingDoc(this.userDoc);
+    //                 this.userDoc.activeMobile = this.inkDoc;
+    //                 InkingControl.Instance.switchTool(InkTool.Pen);
+    //                 this.drawingInk = true;
+
+    //                 DocServer.Mobile.dispatchOverlayTrigger({
+    //                     enableOverlay: true,
+    //                     width: window.innerWidth,
+    //                     height: window.innerHeight
+    //                 });
+
+    //                 break;
+    //             }
+    //             case "upload": {
+    //                 this.uploadDoc = CurrentUserUtils.setupMobileUploadDoc(this.userDoc);
+    //                 this.userDoc.activeMobile = this.uploadDoc;
+
+    //             }
+    //         }
+    //     }
+    // }
+
+    renderDefaultContent = () => {
+        console.log("rendering default content");
         if (this.mainContainer) {
             return <DocumentView
                 Document={this.mainContainer}
@@ -121,7 +143,7 @@ export default class MobileInterface extends React.Component {
     }
 
     onBack = (e: React.MouseEvent) => {
-        this.switchCurrentView("main");
+        this.switchCurrentView((userDoc: Doc) => this.mainDoc);
         InkingControl.Instance.switchTool(InkTool.None); // TODO: switch to previous tool
 
         DocServer.Mobile.dispatchOverlayTrigger({
@@ -130,7 +152,7 @@ export default class MobileInterface extends React.Component {
             height: window.innerHeight
         });
 
-        this.inkDoc = undefined;
+        // this.inkDoc = undefined;
         this.drawingInk = false;
     }
 
@@ -151,8 +173,8 @@ export default class MobileInterface extends React.Component {
         e.stopPropagation();
     }
 
-    @computed
-    get inkContent() {
+    renderInkingContent = () => {
+        console.log("rendering inking content");
         // TODO: support panning and zooming
         // TODO: handle moving of ink strokes
         if (this.mainContainer) {
@@ -202,8 +224,7 @@ export default class MobileInterface extends React.Component {
 
     }
 
-    @computed
-    get uploadContent() {
+    renderUploadContent() {
         if (this.mainContainer) {
             return (
                 <div className="mobileInterface">
@@ -246,15 +267,19 @@ export default class MobileInterface extends React.Component {
     }
 
     render() {
-        const content = this.currentView === "main" ? this.mainContent :
-            this.currentView === "ink" ? this.inkContent :
-                this.currentView === "upload" ? this.uploadContent : <></>;
+        // const content = this.currentView === "main" ? this.mainContent :
+        //     this.currentView === "ink" ? this.inkContent :
+        //         this.currentView === "upload" ? this.uploadContent : <></>;
         return (
             <div className="mobile-container">
-                {content}
+                {this.renderView ? this.renderView() : this.renderDefaultContent()}
             </div>
         );
     }
 }
 
-Scripting.addGlobal(function switchMobileView(view: "main" | "ink" | "upload") { return MobileInterface.Instance.switchCurrentView(view); });
+Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); });
+Scripting.addGlobal(function onSwitchMobileInking() { return MobileInterface.Instance.onSwitchInking(); });
+Scripting.addGlobal(function renderMobileInking() { return MobileInterface.Instance.renderInkingContent(); });
+Scripting.addGlobal(function renderMobileUpload() { return MobileInterface.Instance.renderUploadContent(); });
+
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 82bed76f7..817cf40b1 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -14,6 +14,7 @@ import { Utils } from "../../../Utils";
 import { nullAudio } from "../../../new_fields/URLField";
 import { DragManager } from "../../../client/util/DragManager";
 import { InkingControl } from "../../../client/views/InkingControl";
+import { Scripting } from "../../../client/util/Scripting";
 
 export class CurrentUserUtils {
     private static curr_id: string;
@@ -101,8 +102,9 @@ export class CurrentUserUtils {
             { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this);', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "pink", activePen: doc },
             { title: "use scrubber", icon: "eraser", click: 'activateScrubber(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this);', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "green", activePen: doc },
             { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activePen.pen = this;', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "white", activePen: doc },
-            { title: "draw", icon: "pen-nib", click: 'switchMobileView("ink");', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "red", activePen: doc },
-            { title: "upload", icon: "upload", click: 'switchMobileView("upload");', backgroundColor: "orange" },
+            { title: "draw", icon: "pen-nib", click: 'switchMobileView(setupMobileInkingDoc, renderMobileInking, onSwitchMobileInking);', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "red", activePen: doc },
+            { title: "upload", icon: "upload", click: 'switchMobileView(setupMobileUploadDoc, renderMobileUpload);', backgroundColor: "orange" },
+            { title: "upload", icon: "upload", click: 'uploadImageMobile();', backgroundColor: "cyan" },
         ];
         return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => Docs.Create.FontIconDocument({
             nativeWidth: 100, nativeHeight: 100, width: 100, height: 100, dropAction: data.click ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick,
@@ -147,7 +149,7 @@ export class CurrentUserUtils {
 
     static setupMobileUploadDoc(userDoc: Doc) {
         console.log("setup mobile upload", window.innerWidth, window.innerHeight);
-        const webDoc = Docs.Create.WebDocument("https://wikipedia.com", { title: "Mobile Upload Web", chromeStatus: "enabled", ignoreClick: true });
+        const webDoc = Docs.Create.WebDocument("https://wikipedia.com", { title: "Mobile Upload Web", chromeStatus: "enabled" });
         const uploadDoc = Docs.Create.StackingDocument([], { title: "Mobile Upload", backgroundColor: "pink" });
         return Docs.Create.StackingDocument([webDoc, uploadDoc], {
             title: "Mobile Upload", backgroundColor: "white",
@@ -388,4 +390,7 @@ export class CurrentUserUtils {
         };
         return recurs([] as Attribute[], schema ? schema.rootAttributeGroup : undefined);
     }
-}
\ No newline at end of file
+}
+
+Scripting.addGlobal(function setupMobileInkingDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileInkingDoc(userDoc); });
+Scripting.addGlobal(function setupMobileUploadDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileUploadDoc(userDoc); });
\ No newline at end of file