can add strokes to mobile ink

1 files changed, 80 insertions, 28 deletions

diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 1e0920686..8d342d749 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -10,8 +10,10 @@ import { DocumentView } from '../client/views/nodes/DocumentView';
 import { emptyPath, emptyFunction, returnFalse, returnOne, returnEmptyString, returnTrue } from '../Utils';
 import { Transform } from '../client/util/Transform';
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faPenNib, faHighlighter, faEraser, faMousePointer } from '@fortawesome/free-solid-svg-icons';
+import { faPenNib, faHighlighter, faEraser, faMousePointer, faBreadSlice } from '@fortawesome/free-solid-svg-icons';
 import { Scripting } from '../client/util/Scripting';
+import { CollectionFreeFormView } from '../client/views/collections/collectionFreeForm/CollectionFreeFormView';
+import GestureOverlay from '../client/views/GestureOverlay';
 
 @observer
 export default class MobileInterface extends React.Component {
@@ -35,52 +37,102 @@ export default class MobileInterface extends React.Component {
         }
     }
 
-    @action switchCurrentView = (view: "main" | "ink" | "library") => { this.currentView = view; }
+    @action
+    switchCurrentView = (view: "main" | "ink" | "library") => {
+        this.currentView = view;
+
+        if (this.userDoc) {
+            switch (view) {
+                case "main": {
+                    const doc = CurrentUserUtils.setupMobileDoc(this.userDoc);
+                    this.userDoc.activeMobile = doc;
+                    break;
+                }
+                case "ink": {
+                    const doc = CurrentUserUtils.setupMobileInkingDoc(this.userDoc);
+                    this.userDoc.activeMobile = doc;
+                    break;
+                }
+            }
+        }
+    }
 
     @computed
     get mainContent() {
         if (this.mainContainer) {
-            switch (this.currentView) {
-                case "main":
-                    return <DocumentView
+            return <DocumentView
+                Document={this.mainContainer}
+                DataDoc={undefined}
+                LibraryPath={emptyPath}
+                addDocument={undefined}
+                addDocTab={returnFalse}
+                pinToPres={emptyFunction}
+                removeDocument={undefined}
+                ruleProvider={undefined}
+                onClick={undefined}
+                ScreenToLocalTransform={Transform.Identity}
+                ContentScaling={returnOne}
+                PanelWidth={() => window.screen.width}
+                PanelHeight={() => window.screen.height}
+                renderDepth={0}
+                focus={emptyFunction}
+                backgroundColor={returnEmptyString}
+                parentActive={returnTrue}
+                whenActiveChanged={emptyFunction}
+                bringToFront={emptyFunction}
+                ContainingCollectionView={undefined}
+                ContainingCollectionDoc={undefined}
+                zoomToScale={emptyFunction}
+                getScale={returnOne}>
+            </DocumentView>;
+        }
+        return "hello";
+    }
+
+    @computed
+    get inkContent() {
+        // return <div>INK</div>;
+        if (this.mainContainer) {
+            return (
+                <GestureOverlay>
+                    <CollectionFreeFormView
                         Document={this.mainContainer}
                         DataDoc={undefined}
                         LibraryPath={emptyPath}
-                        addDocument={undefined}
+                        fieldKey={""}
+                        addDocument={returnFalse}
+                        removeDocument={returnFalse}
+                        moveDocument={returnFalse}
                         addDocTab={returnFalse}
                         pinToPres={emptyFunction}
-                        removeDocument={undefined}
-                        ruleProvider={undefined}
-                        onClick={undefined}
-                        ScreenToLocalTransform={Transform.Identity}
-                        ContentScaling={returnOne}
-                        PanelWidth={() => window.screen.width}
                         PanelHeight={() => window.screen.height}
-                        renderDepth={0}
+                        PanelWidth={() => window.screen.width}
+                        annotationsKey={""}
+                        isAnnotationOverlay={false}
                         focus={emptyFunction}
-                        backgroundColor={returnEmptyString}
-                        parentActive={returnTrue}
-                        whenActiveChanged={emptyFunction}
-                        bringToFront={emptyFunction}
+                        isSelected={returnTrue} //
+                        select={emptyFunction}
+                        active={returnTrue} //
+                        ContentScaling={returnOne}
+                        whenActiveChanged={returnFalse}
+                        CollectionView={undefined}
+                        ScreenToLocalTransform={Transform.Identity}
+                        ruleProvider={undefined}
+                        renderDepth={0}
                         ContainingCollectionView={undefined}
                         ContainingCollectionDoc={undefined}
-                        zoomToScale={emptyFunction}
-                        getScale={returnOne}>
-                    </DocumentView>;
-                case "ink":
-                    return <div>INK</div>;
-                case "library":
-                    return <div>LIBRARY</div>;
-            }
+                        chromeCollapsed={true}>
+                    </CollectionFreeFormView>
+                </GestureOverlay>
+            );
         }
-        return "hello";
     }
 
     render() {
-        console.log("rendering mobile");
+        const content = this.currentView === "main" ? this.mainContent : this.currentView === "ink" ? this.inkContent : <></>;
         return (
             <div className="mobile-container">
-                {this.mainContent}
+                {content}
             </div>
         );
     }