diff options
Diffstat (limited to 'src/mobile/MobileInterface.tsx')
| -rw-r--r-- | src/mobile/MobileInterface.tsx | 1906 |
1 files changed, 1746 insertions, 160 deletions
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index da14ffc88..d9399d549 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -1,47 +1,979 @@ -import React = require('react'); +import * as React from "react"; import { library } from '@fortawesome/fontawesome-svg-core'; -import { faEraser, faHighlighter, faLongArrowAltLeft, faMousePointer, faPenNib } from '@fortawesome/free-solid-svg-icons'; +import { + faTasks, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, + faTerminal, faToggleOn, faFile as fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, + faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, + faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, + faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, + faThumbtack, faTree, faTv, faBook, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft +} from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; +import * as rp from 'request-promise'; +import { Doc, DocListCast, FieldResult } from '../fields/Doc'; +import { Id } from '../fields/FieldSymbols'; +import { FieldValue, Cast, StrCast } from '../fields/Types'; +import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; +import { emptyPath, emptyFunction, returnFalse, returnOne, returnTrue, returnZero, Utils } from '../Utils'; import { DocServer } from '../client/DocServer'; import { Docs } from '../client/documents/Documents'; -import { DocumentManager } from '../client/util/DocumentManager'; -import RichTextMenu from '../client/views/nodes/formattedText/RichTextMenu'; import { Scripting } from '../client/util/Scripting'; -import { Transform } from '../client/util/Transform'; -import { DocumentDecorations } from '../client/views/DocumentDecorations'; -import GestureOverlay from '../client/views/GestureOverlay'; import { DocumentView } from '../client/views/nodes/DocumentView'; -import { RadialMenu } from '../client/views/nodes/RadialMenu'; -import { PreviewCursor } from '../client/views/PreviewCursor'; -import { Doc, DocListCast, FieldResult } from '../fields/Doc'; -import { Id } from '../fields/FieldSymbols'; +import { Transform } from '../client/util/Transform'; +// import { InkingControl } from '../client/views/InkingControl'; +import "./MobileInterface.scss"; +import "./MobileMenu.scss"; +import "./MobileHome.scss"; +import "./ImageUpload.scss"; +import { DocumentManager } from '../client/util/DocumentManager'; +import SettingsManager from '../client/util/SettingsManager'; +import { Uploader } from "./ImageUpload"; +import { DockedFrameRenderer } from '../client/views/collections/CollectionDockingView'; import { InkTool } from '../fields/InkField'; import { listSpec } from '../fields/Schema'; -import { Cast, FieldValue } from '../fields/Types'; -import { WebField } from "../fields/URLField"; -import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; -import { emptyFunction, emptyPath, returnEmptyString, returnFalse, returnOne, returnTrue, returnZero } from '../Utils'; -import "./MobileInterface.scss"; -import { CollectionView } from '../client/views/collections/CollectionView'; -import { InkingStroke } from '../client/views/InkingStroke'; +import { nullAudio, WebField } from '../fields/URLField'; +import GestureOverlay from "../client/views/GestureOverlay"; +import { SelectionManager } from "../client/util/SelectionManager"; +import { SketchPicker } from "react-color"; +import { ScriptField } from "../fields/ScriptField"; + +library.add(faTasks, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, + faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, + faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, + faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, + faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, + faThumbtack, faTree, faTv, faUndoAlt, faBook, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft); + +// @observer +// export class MobileInterface extends React.Component { +// @observable static Instance: MobileInterface; +// @computed private get userDoc() { return Doc.UserDoc(); } +// @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } +// @computed private get activeContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } +// // @observable private currentView: "main" | "ink" | "upload" = "main"; +// @observable private mainDoc: any = CurrentUserUtils.setupMobileDoc(this.userDoc); +// @observable private renderView?: () => JSX.Element; +// @observable private sidebarActive = true; + +// public _activeDoc: Doc = this.mainDoc; +// public _homeDoc: Doc = this.mainDoc; +// private _homeMenu: boolean = true; + +// // private inkDoc?: Doc; +// public drawingInk: boolean = false; +// private _ink: boolean = false; + +// // private _uploadDoc: Doc = this.userDoc; +// private _child: Doc | null = null; +// private _parents: Array<Doc> = []; +// private _library: Doc = CurrentUserUtils.setupLibrary(this.userDoc); +// private _open: boolean = false; + +// constructor(props: Readonly<{}>) { +// super(props); +// MobileInterface.Instance = this; +// } + +// @action +// componentDidMount = () => { +// library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer, faThumbtack]); + +// if (this.userDoc && !this.mainContainer) { +// this.userDoc.activeMobile = this._homeDoc; +// } + +// InkingControl.Instance.switchTool(InkTool.None); +// MobileInterface.Instance.drawingInk = false; +// InkingControl.Instance.updateSelectedColor("#FF0000"); +// InkingControl.Instance.switchWidth("2"); +// this.switchCurrentView((userDoc: Doc) => this._homeDoc); +// } + +// @action +// switchCurrentView = (doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) => { +// if (!this.userDoc) return; + +// this.userDoc.activeMobile = doc(this.userDoc); +// onSwitch && onSwitch(); + +// this.renderView = renderView; +// } + +// onSwitchInking = () => { +// const button = document.getElementById("inkButton") as HTMLElement; +// const color = InkingControl.Instance.selectedColor; +// button.style.backgroundColor = this._ink ? "white" : color; +// button.style.color = this._ink ? "black" : "white"; + +// if (!this._ink) { +// console.log("INK IS ACTIVE"); +// InkingControl.Instance.switchTool(InkTool.Pen); +// MobileInterface.Instance.drawingInk = true; +// this._ink = true; +// } else { +// console.log("INK IS INACTIVE"); +// InkingControl.Instance.switchTool(InkTool.None); +// MobileInterface.Instance.drawingInk = false; +// this._ink = false; +// } +// } + +// onSwitchUpload = async () => { +// let width = 300; +// let height = 300; +// const res = await rp.get(Utils.prepend("/getUserDocumentId")); + +// // get width and height of the collection doc +// if (this.mainContainer) { +// const data = Cast(this.mainContainer.data, listSpec(Doc)); +// if (data) { +// const collectionDoc = await data[1]; // this should be the collection doc since the positions should be locked +// const docView = DocumentManager.Instance.getDocumentView(collectionDoc); +// if (docView) { +// width = docView.nativeWidth ? docView.nativeWidth : 300; +// height = docView.nativeHeight ? docView.nativeHeight : 300; +// } +// } +// } +// DocServer.Mobile.dispatchOverlayTrigger({ +// enableOverlay: true, +// width: width, +// height: height, +// text: "Documents uploaded from mobile will show here", +// }); +// } + +// back = () => { +// let header = document.getElementById("header") as HTMLElement; +// let doc = Cast(this._parents.pop(), Doc) as Doc; +// if (doc === Cast(this._library, Doc) as Doc) { +// this._child = null; +// this.userDoc.activeMobile = this._library; +// } else if (doc === Cast(this._homeDoc, Doc) as Doc) { +// this._homeMenu = true; +// this._parents = []; +// this._activeDoc = this._homeDoc; +// this._child = null; +// this.switchCurrentView((userDoc: Doc) => this._homeDoc); +// } else { +// if (doc) { +// this._child = doc; +// this.switchCurrentView((userDoc: Doc) => doc); +// this._homeMenu = false; +// header.textContent = String(doc.title); +// } +// } +// if (doc) { +// this._activeDoc = doc; +// } +// this._ink = false; +// } + +// returnHome = () => { +// if (this._homeMenu === false || this._open === true) { +// this._homeMenu = true; +// this._parents = []; +// this._activeDoc = this._homeDoc; +// this._child = null; +// this.switchCurrentView((userDoc: Doc) => this._homeDoc); +// } +// if (this._open) { +// this.toggleSidebar(); +// } +// } + +// returnMain = () => { +// this._parents = []; +// // this.toggleSidebar(); +// this._activeDoc = this._library; +// this.switchCurrentView((userDoc: Doc) => this._library); +// this._homeMenu = false; +// this._child = null; +// } + +// displayWorkspaces = () => { +// if (this.mainContainer) { +// const backgroundColor = () => "white"; +// if (this._activeDoc.title === "mobile audio") { +// return ( +// <div style={{ position: "relative", top: '600px', height: `calc(50% - 450px)`, width: "80%", overflow: "hidden", left: "10%", cursor: "pointer" }}> +// <DocumentView +// Document={this.mainContainer} +// DataDoc={undefined} +// LibraryPath={emptyPath} +// addDocument={returnFalse} +// addDocTab={returnFalse} +// pinToPres={emptyFunction} +// rootSelected={returnFalse} +// removeDocument={undefined} +// onClick={undefined} +// ScreenToLocalTransform={Transform.Identity} +// ContentScaling={returnOne} +// NativeHeight={returnZero} +// NativeWidth={returnZero} +// PanelWidth={() => window.screen.width} +// PanelHeight={() => window.screen.height} +// renderDepth={0} +// focus={emptyFunction} +// backgroundColor={backgroundColor} +// parentActive={returnTrue} +// whenActiveChanged={emptyFunction} +// bringToFront={emptyFunction} +// ContainingCollectionView={undefined} +// ContainingCollectionDoc={undefined} +// /> +// </div> +// ); +// } else { +// return ( +// <div style={{ position: "relative", top: '200px', height: `calc(100% - 200px)`, width: "100%", overflow: "hidden", left: "0%" }}> +// <DocumentView +// Document={this.mainContainer} +// DataDoc={undefined} +// LibraryPath={emptyPath} +// addDocument={returnFalse} +// addDocTab={returnFalse} +// pinToPres={emptyFunction} +// rootSelected={returnFalse} +// removeDocument={undefined} +// onClick={undefined} +// ScreenToLocalTransform={Transform.Identity} +// ContentScaling={returnOne} +// PanelWidth={this.returnWidth} +// PanelHeight={this.returnHeight} +// NativeHeight={returnZero} +// NativeWidth={returnZero} +// renderDepth={0} +// focus={emptyFunction} +// backgroundColor={backgroundColor} +// parentActive={returnTrue} +// whenActiveChanged={emptyFunction} +// bringToFront={emptyFunction} +// ContainingCollectionView={undefined} +// ContainingCollectionDoc={undefined} +// // mobile={true} +// /> +// </div> +// ); +// } +// } +// } + +// returnWidth = () => 2000; +// returnHeight = () => 2000; + +// handleClick(doc: Doc) { +// let children = DocListCast(doc.data); +// if (doc.type !== "collection") { +// this._parents.push(this._activeDoc); +// this._activeDoc = doc; +// this.switchCurrentView((userDoc: Doc) => doc); +// this._homeMenu = false; +// this.toggleSidebar(); +// } else if (doc.type === "collection" && children.length === 0) { +// console.log("This collection has no children"); +// } else { +// this._parents.push(this._activeDoc); +// this._activeDoc = doc; +// this.switchCurrentView((userDoc: Doc) => doc); +// this._homeMenu = false; +// this._child = doc; +// } + +// // let sidebar = document.getElementById("sidebar") as HTMLElement; +// // sidebar.classList.toggle('active'); +// } + +// createPathname = () => { +// let docArray = []; +// this._parents.map((doc: Doc, index: any) => { +// // if (doc === this.mainDoc) { +// // pathname = pathname; +// // } else if (doc.type === "audio" || doc.type === "presentation") { +// // pathname = pathname; +// // } else if (doc.type !== "collection") { +// // pathname = pathname; +// // } else { +// // pathname = pathname + " > " + doc.title; +// // titleArray.push(doc.title); +// // docArray.push(doc); +// // } +// docArray.push(doc); +// }); +// docArray.push(this._activeDoc); +// // if (this._activeDoc.title === "mobile audio") { +// // pathname = this._activeDoc.title; +// // } else if (this._activeDoc.title === "Presentation") { +// // pathname = this._activeDoc.title; +// // } else if (this._activeDoc === this.mainDoc) { +// // pathname = pathname; +// // } else { +// // pathname = pathname + " > " + this._activeDoc.title; +// // docArray.push(this._activeDoc); +// // titleArray.push(this._activeDoc.title); +// // } + +// return docArray; +// } + +// renderPathbar = () => { +// // if (this._homeMenu == false) { +// let docArray = this.createPathname(); +// let items = docArray.map((doc: Doc, index: any) => { +// if (index == 0) { +// return ( +// <div className="pathbarItem"> +// <div className="pathbarText" +// key={index} +// onClick={() => this.handlePathClick(doc, index)}>{doc.title} +// </div> +// </div>); +// } else if (doc === this._activeDoc) { +// return ( +// <div className="pathbarItem"> +// <FontAwesomeIcon className="pathIcon" icon="angle-right" size="lg" /> +// <div className="pathbarText" +// style={{ backgroundColor: "rgb(119, 37, 37)" }} +// key={index} +// onClick={() => this.handlePathClick(doc, index)}>{doc.title} +// </div> +// </div>); +// } else { +// return ( +// <div className="pathbarItem"> +// <FontAwesomeIcon className="pathIcon" icon="angle-right" size="lg" /> +// <div className="pathbarText" +// key={index} +// onClick={() => this.handlePathClick(doc, index)}>{doc.title} +// </div> +// </div>); +// } + +// }); +// if (this._parents.length !== 0) { +// return (<div className="pathbar"> +// <div className="scrollmenu"> +// {items} +// </div> +// <div className="back" > +// <FontAwesomeIcon onClick={this.back} icon={"chevron-left"} color="white" size={"2x"} /> +// </div> +// <div className="hidePath" /> +// </div>); +// } else { +// return (<div className="pathbar"> +// <div className="scrollmenu"> +// {items} +// </div> +// <div className="hidePath" /> +// </div>); +// } +// // } +// // } else { + +// // return ( +// // <div className="pathbar"> +// // <div className="scrollmenu"> +// // <div className="pathbarItem"> +// // <div className="pathbarText" +// // style={{ backgroundColor: "rgb(119, 37, 37)" }} +// // key={0} +// // onClick={() => this.returnHome()}>Home +// // </div> +// // </div> +// // </div> +// // <div className="hidePath" /> +// // </div> +// // ); +// // } + +// // } +// } + +// handlePathClick = (doc: Doc, index: number) => { +// if (doc === this._library) { +// this._activeDoc = doc; +// this._child = null; +// this.switchCurrentView((userDoc: Doc) => doc); +// this._parents.length = index; +// } else if (doc === this._homeDoc) { +// this.returnHome(); +// } else { +// console.log(index); +// this._activeDoc = doc; +// this._child = doc; +// this.switchCurrentView((userDoc: Doc) => doc); +// this._parents.length = index; +// } +// } + +// @action +// toggleSidebar = () => this.sidebarActive = !this.sidebarActive + +// switchToLibrary = () => { +// this._parents.push(this._activeDoc); +// this.switchCurrentView((userDoc: Doc) => this._library); +// this._activeDoc = this._library; +// this._homeMenu = false; +// this.toggleSidebar(); +// } + +// // renderDefaultContent = () => { +// // let menuButtons = DocListCast(this._homeDoc.data).map((doc: Doc, index: any) => { +// // if (doc.type !== "ink") { +// // return ( +// // <div +// // className="item" +// // key={index} +// // onClick={() => doc.click}>{doc.title} +// // </div>); +// // } +// // }); + +// // if (this._homeMenu === true) { +// // return ( +// // <div> +// // <div className="navbar"> +// // <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} /> +// // <div className="header" id="header">{this._homeDoc.title}</div> +// // <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}> +// // <span></span> +// // <span></span> +// // <span></span> +// // </div> +// // </div> +// // {this.renderPathbar()} +// // <div className="sidebar" id="sidebar"> +// // <div className="sidebarButtons"> +// // {menuButtons} +// // </div> +// // </div> +// // </div> +// // ); +// // } + +// // const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; +// // const buttons = DocListCast(this._child ? this._child.data : workspaces.data).map((doc: Doc, index: any) => { +// // return ( +// // <div +// // className="item" +// // key={index} +// // onClick={() => this.handleClick(doc)}>{doc.title} +// // <div className="type">{doc.type}</div> +// // <FontAwesomeIcon className="right" icon="angle-right" size="lg" /> +// // </div>); +// // }); +// // return ( +// // <> +// // <div className="navbar"> +// // <div className={"header"}>{this.sidebarActive ? StrCast(this._activeDoc.title) : "Menu"}</div> +// // <div +// // className={`toggle-btn ${this.sidebarActive ? "active" : ""}`} +// // onClick={this.toggleSidebar} +// // /> +// // </div> +// // <div className="pathbar"> +// // <div className="pathname">{this.createPathname()}</div> +// // </div> +// // <div className={`sidebar ${this.sidebarActive ? "active" : ""}`}> +// // <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} /> +// // {this._child ? +// // <> +// // <div className="back" onClick={this.back}>←</div> +// // <div>{buttons}</div> +// // <div className="item" key="home" onClick={this.returnHome}>Home</div> +// // </> : +// // <> +// // {buttons} +// // {/* <div className="item" key="library" onClick={this.openLibrary}> +// // Library +// // </div> */} +// // <Uploader Document={workspaces} /> +// // <div className="item" key="audio" onClick={this.recordAudio}>Record Audio</div> +// // <div className="item" key="presentation" onClick={this.setupDefaultPresentation}>Presentation</div> +// // <div className="item" key="settings" onClick={() => SettingsManager.Instance.open()}>Settings</div> +// // </> +// // } +// // </div> +// // {this._child ? null : <div>{this.renderView}</div>} +// // </> +// // ); +// // } + +// recordAudio = async () => { +// // upload to server with known URL +// if (this._activeDoc.title !== "mobile audio") { +// this._parents.push(this._activeDoc); +// } +// const audioDoc = Cast(Docs.Create.AudioDocument(nullAudio, { _width: 200, _height: 100, title: "mobile audio" }), Doc) as Doc; +// console.log(audioDoc); +// if (audioDoc) { +// console.log("audioClicked: " + audioDoc.title); +// this._activeDoc = audioDoc; +// this.switchCurrentView((userDoc: Doc) => audioDoc); +// this._homeMenu = false; +// // this.toggleSidebar(); +// } +// // const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; +// // this.audioState = await audioDoc.getProto; +// // if (this.audioState) { +// // console.log(this.audioState); +// // const data = Cast(audioRightSidebar.data, listSpec(Doc)); +// // if (data) { +// // data.push(audioDoc); +// // } +// // } +// } + +// uploadAudio = () => { +// const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; +// const audioDoc = this._activeDoc; +// const data = Cast(audioRightSidebar.data, listSpec(Doc)); +// console.log(audioDoc.proto); +// if (data) { +// data.push(audioDoc); +// } +// // this.recordAudio(); +// } + +// uploadAudioButton = () => { +// if (this._activeDoc.type === "audio") { +// return <div className="docButton" +// title={Doc.isDocPinned(this._activeDoc) ? "Pen on" : "Pen off"} +// style={{ backgroundColor: "black", color: "white" }} +// onClick={this.uploadAudio} +// > +// <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="upload" +// /> +// </div>; +// } +// } + +// toggleSelector = () => { +// console.log("toggle selector!"); +// let toolbar = document.getElementById("toolbar") as HTMLElement; +// toolbar.classList.toggle('active'); +// } + +// colorTool = () => { +// if (this._activeDoc._viewType === "docking") { +// const color = InkingControl.Instance.selectedColor; +// console.log(color); +// return ( +// <div +// className="docButton" +// style={{ backgroundColor: color }} +// onClick={this.toggleSelector} +// > +// <div className="toolbar" id="toolbar"> +// <div className="colorSelector"> +// <div className="colorButton" +// style={{ backgroundColor: "red" }} +// onClick={() => { +// InkingControl.Instance.updateSelectedColor("rgb(255,0,0)"); +// Doc.UserDoc().inkColor = "rgb(255,0,0)"; +// console.log(InkingControl.Instance.selectedColor); +// }}> +// </div> +// <div className="colorButton" +// style={{ backgroundColor: "green" }} +// onClick={e => { +// InkingControl.Instance.updateSelectedColor("rgb(0,128,0)"); +// Doc.UserDoc().inkColor = "rgb(0,128,0)"; +// console.log(InkingControl.Instance.selectedColor); +// }}> +// </div> +// <div className="colorButton" +// style={{ backgroundColor: "blue" }} +// onClick={e => { +// InkingControl.Instance.updateSelectedColor("rgb(0,0,255)"); +// Doc.UserDoc().inkColor = "rgb(0,0,255)"; +// console.log(InkingControl.Instance.selectedColor); +// }}> +// </div> +// </div> +// <div className="widthSelector"> +// <input type="range" min="1" max="100" defaultValue="2" id="myRange" onChange={(e: React.ChangeEvent<HTMLInputElement>) => InkingControl.Instance.switchWidth(e.target.value)} /> +// </div> +// </div> +// </div> +// ); +// } +// } + +// drawInk = () => { +// if (this._activeDoc._viewType === "docking") { +// const inkIsOn = this._ink; +// return <div className="docButton" +// id="inkButton" +// title={Doc.isDocPinned(this._activeDoc) ? "Pen on" : "Pen off"} +// onClick={this.onSwitchInking}> +// <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="pen-nib" +// /> +// </div>; +// } +// } + +// downloadDocument = () => { +// if (this._activeDoc.type === "image") { +// const url = this._activeDoc["data-path"]?.toString(); +// return <div className="docButton" +// title={"Download Image"} +// style={{ backgroundColor: "white", color: "black" }} +// onClick={e => { +// window.open(url); +// console.log(url); +// }}> +// <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="download" +// /> +// </div>; +// } +// } + +// pinToPresentation = () => { +// // Only making button available if it is an image +// if (this._activeDoc.type === "image") { +// const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc); +// return <div className="docButton" +// title={Doc.isDocPinned(this._activeDoc) ? "Unpin from presentation" : "Pin to presentation"} +// style={{ backgroundColor: isPinned ? "black" : "white", color: isPinned ? "white" : "black" }} +// onClick={e => { +// if (isPinned) { +// DockedFrameRenderer.UnpinDoc(this._activeDoc); +// } +// else { +// DockedFrameRenderer.PinDoc(this._activeDoc); +// } +// }}> +// <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" +// /> +// </div>; +// } +// } + +// setupDefaultPresentation = () => { +// if (this._activeDoc.title !== "Presentation") { +// this._parents.push(this._activeDoc); +// } + +// const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc; + +// if (presentation) { +// console.log(this._activeDoc.mobile); +// console.log("presentation clicked: " + presentation.title); +// this._activeDoc = presentation; +// this.switchCurrentView((userDoc: Doc) => presentation); +// this._homeMenu = false; +// // this.toggleSidebar(); +// } +// } + +// // mobileHome = () => { +// // return ( +// // <div className="homeContainer"> +// // <div className="uploadButton"> + +// // </div> +// // <div className="presentationButton"> + +// // </div> +// // <div className="recordAudioButton"> + +// // </div> +// // <div className="inkButton"> + +// // </div> +// // <div className="settingsButton"> + +// // </div> +// // </div> +// // ); +// // } + +// renderActiveCollection = (userDoc: Doc) => { +// if (this.activeContainer) { +// const active = Cast(this.activeContainer.data, listSpec(Doc)); +// if (active) { +// return ( +// <div className="mobileInterface-background">HELLO!</div> +// ); +// } +// } +// } + +// onBack = (e: React.MouseEvent) => { +// this.switchCurrentView((userDoc: Doc) => this.mainDoc); +// InkingControl.Instance.switchTool(InkTool.None); // TODO: switch to previous tool + +// DocServer.Mobile.dispatchOverlayTrigger({ +// enableOverlay: false, +// width: window.innerWidth, +// height: window.innerHeight +// }); + +// // this.inkDoc = undefined; +// this.drawingInk = false; +// } -library.add(faLongArrowAltLeft); +// shiftLeft = (e: React.MouseEvent) => { +// DocServer.Mobile.dispatchOverlayPositionUpdate({ +// dx: -10 +// }); +// e.preventDefault(); +// e.stopPropagation(); +// } + +// shiftRight = (e: React.MouseEvent) => { +// DocServer.Mobile.dispatchOverlayPositionUpdate({ +// dx: 10 +// }); +// e.preventDefault(); +// e.stopPropagation(); +// } + +// panelHeight = () => window.innerHeight; +// panelWidth = () => window.innerWidth; +// //WAS 3 + +// //WAS 1 + +// upload = async (e: React.MouseEvent) => { +// if (this.mainContainer) { +// const data = Cast(this.mainContainer.data, listSpec(Doc)); +// if (data) { +// const collectionDoc = await data[1]; //this should be the collection doc since the positions should be locked +// const children = DocListCast(collectionDoc.data); +// const uploadDoc = children.length === 1 ? children[0] : Docs.Create.StackingDocument(children, { +// title: "Mobile Upload Collection", backgroundColor: "white", lockedPosition: true, _width: 300, _height: 300 +// }); +// if (uploadDoc) { +// DocServer.Mobile.dispatchMobileDocumentUpload({ +// docId: uploadDoc[Id], +// }); +// } +// } +// } +// e.stopPropagation(); +// e.preventDefault(); +// } + +// addWebToCollection = async () => { +// let url = "https://en.wikipedia.org/wiki/Hedgehog"; +// if (this.mainContainer) { +// const data = Cast(this.mainContainer.data, listSpec(Doc)); +// if (data) { +// const webDoc = await data[0]; +// const urlField: FieldResult<WebField> = Cast(webDoc.data, WebField); +// url = urlField ? urlField.url.toString() : "https://en.wikipedia.org/wiki/Hedgehog"; + +// } +// } +// Docs.Create.WebDocument(url, { _width: 300, _height: 300, title: "Mobile Upload Web Doc" }); +// } + +// clearUpload = async () => { +// if (this.mainContainer) { +// const data = Cast(this.mainContainer.data, listSpec(Doc)); +// if (data) { +// const collectionDoc = await data[1]; +// const children = DocListCast(collectionDoc.data); +// children.forEach(doc => { +// }); +// // collectionDoc[data] = new List<Doc>(); +// } +// } +// } + +// onDragOver = (e: React.DragEvent) => { +// e.preventDefault(); +// e.stopPropagation(); +// } + +// render() { +// // const content = this.currentView === "main" ? this.mainContent : +// // this.currentView === "ink" ? this.inkContent : +// // this.currentView === "upload" ? this.uploadContent : <></>; +// return ( +// <div className="mobileInterface-container" onDragOver={this.onDragOver}> +// {/* <DocumentDecorations /> +// <GestureOverlay> +// {this.renderView ? this.renderView() : this.renderDefaultContent()} +// </GestureOverlay> */} +// {/* <GestureOverlay> */} +// <SettingsManager /> +// {/* {this.menuOptions()} */} +// {/* {this.displayHome()} */} +// <div className="docButtonContainer"> +// {this.pinToPresentation()} +// {this.downloadDocument()} +// {this.drawInk()} +// {this.uploadAudioButton()} +// {this.colorTool()} +// </div> +// <GestureOverlay> + +// </GestureOverlay> +// {this.renderDefaultContent()} +// {this.displayWorkspaces()} +// {/* </GestureOverlay> */} +// {/* <DictationOverlay /> +// <SharingManager /> +// <GoogleAuthenticationManager /> */} +// {/* <DocumentDecorations /> */} +// {/* <div> +// {this.renderDefaultContent()} +// </div> */} +// {/* <PreviewCursor /> */} +// {/* <ContextMenu /> */} +// {/* <RadialMenu /> +// <RichTextMenu /> */} +// {/* <PDFMenu /> +// <MarqueeOptionsMenu /> +// <OverlayView /> */} +// </div> +// ); +// } +// } + +// Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); }); +// Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); }); +// Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); }); +// Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.recordAudio(); }); +// Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); }); +// Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); }); +// // WAS 2 + +// // 1 +// // renderUploadContent() { +// // if (this.mainContainer) { +// // return ( +// // <div className="mobileInterface" onDragOver={this.onDragOver}> +// // <div className="mobileInterface-inkInterfaceButtons"> +// // <button className="mobileInterface-button cancel" onClick={this.onBack} title="Back">BACK</button> +// // {/* <button className="mobileInterface-button" onClick={this.clearUpload} title="Clear Upload">CLEAR</button> */} +// // {/* <button className="mobileInterface-button" onClick={this.addWeb} title="Add Web Doc to Upload Collection"></button> */} +// // <button className="mobileInterface-button" onClick={this.upload} title="Upload">UPLOAD</button> +// // </div> +// // <DocumentView +// // Document={this.mainContainer} +// // DataDoc={undefined} +// // LibraryPath={emptyPath} +// // addDocument={returnFalse} +// // addDocTab={returnFalse} +// // pinToPres={emptyFunction} +// // rootSelected={returnFalse} +// // removeDocument={undefined} +// // onClick={undefined} +// // ScreenToLocalTransform={Transform.Identity} +// // ContentScaling={returnOne} +// // NativeHeight={returnZero} +// // NativeWidth={returnZero} +// // PanelWidth={() => window.screen.width} +// // PanelHeight={() => window.screen.height} +// // renderDepth={0} +// // focus={emptyFunction} +// // backgroundColor={returnEmptyString} +// // parentActive={returnTrue} +// // whenActiveChanged={emptyFunction} +// // bringToFront={emptyFunction} +// // ContainingCollectionView={undefined} +// // ContainingCollectionDoc={undefined} /> +// // </div> +// // ); +// // } +// // } + +// // 2 +// // Scripting.addGlobal(function onSwitchMobileInking() { return MobileInterface.Instance.onSwitchInking(); }); +// // Scripting.addGlobal(function renderMobileInking() { return MobileInterface.Instance.renderInkingContent(); }); +// // Scripting.addGlobal(function onSwitchMobileUpload() { return MobileInterface.Instance.onSwitchUpload(); }); +// // Scripting.addGlobal(function renderMobileUpload() { return MobileInterface.Instance.renderUploadContent(); }); +// // Scripting.addGlobal(function addWebToMobileUpload() { return MobileInterface.Instance.addWebToCollection(); }); + + +// // 3 +// // renderInkingContent = () => { +// // console.log("rendering inking content"); +// // // TODO: support panning and zooming +// // // TODO: handle moving of ink strokes +// // if (this.mainContainer) { +// // return ( +// // <div className="mobileInterface"> +// // <div className="mobileInterface-inkInterfaceButtons"> +// // <div className="navButtons"> +// // <button className="mobileInterface-button cancel" onClick={this.onBack} title="Cancel drawing">BACK</button> +// // </div> +// // <div className="inkSettingButtons"> +// // <button className="mobileInterface-button cancel" onClick={this.onBack} title="Cancel drawing"><FontAwesomeIcon icon="long-arrow-alt-left" /></button> +// // </div> +// // <div className="navButtons"> +// // <button className="mobileInterface-button" onClick={this.shiftLeft} title="Shift left">left</button> +// // <button className="mobileInterface-button" onClick={this.shiftRight} title="Shift right">right</button> +// // </div> +// // </div> +// // <CollectionView +// // Document={this.mainContainer} +// // DataDoc={undefined} +// // LibraryPath={emptyPath} +// // fieldKey={""} +// // dropAction={"alias"} +// // bringToFront={emptyFunction} +// // addDocTab={returnFalse} +// // pinToPres={emptyFunction} +// // PanelWidth={this.panelWidth} +// // PanelHeight={this.panelHeight} +// // NativeHeight={returnZero} +// // NativeWidth={returnZero} +// // focus={emptyFunction} +// // isSelected={returnFalse} +// // select={emptyFunction} +// // active={returnFalse} +// // ContentScaling={returnOne} +// // whenActiveChanged={returnFalse} +// // ScreenToLocalTransform={Transform.Identity} +// // renderDepth={0} +// // ContainingCollectionView={undefined} +// // ContainingCollectionDoc={undefined} +// // rootSelected={returnTrue}> +// // </CollectionView> +// // </div> +// // ); +// // } +// // } @observer -export default class MobileInterface extends React.Component { +export class MobileInterface extends React.Component { @observable static Instance: MobileInterface; @computed private get userDoc() { return Doc.UserDoc(); } @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } - // @observable private currentView: "main" | "ink" | "upload" = "main"; - private mainDoc: any = CurrentUserUtils.setupMobileDoc(this.userDoc); + // @computed private get activeContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } + // Sets up new mobile menu only if activeMobile already exists + // @observable private mainDoc: any = this.userDoc.activeMobile === undefined ? CurrentUserUtils.setupMobileMenu() : this.userDoc.activeMobile; + @observable private mainDoc: any = CurrentUserUtils.setupMobileMenu(); @observable private renderView?: () => JSX.Element; + @observable private audioState: any; + @observable private activeToolbar: boolean = false; + @observable private sidebarActive: boolean = false; + @observable private imageUploadActive: boolean = false; + @observable private menuListView: boolean = false; + + public _activeDoc: Doc = this.mainDoc; + public _homeDoc: Doc = this.mainDoc; + private _homeMenu: boolean = true; // private inkDoc?: Doc; public drawingInk: boolean = false; - // private uploadDoc?: Doc; + // private _uploadDoc: Doc = this.userDoc; + private _child: Doc | null = null; + private _parents: Array<Doc> = []; + private _library: Doc = CurrentUserUtils.setupLibrary(this.userDoc); + private _open: boolean = false; + + // private _library: Doc = Cast(this.userDoc.myWorkspaces, Doc) as Doc; + private _ink: boolean = false; constructor(props: Readonly<{}>) { super(props); @@ -50,37 +982,35 @@ export default class MobileInterface extends React.Component { @action componentDidMount = () => { - library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer]); - + library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer, faThumbtack]); + if (this.userDoc.activeMobile) { + console.log(Doc.UserDoc().activeMobile); + } if (this.userDoc && !this.mainContainer) { - this.userDoc.activeMobile = this.mainDoc; + this.userDoc.activeMobile = this._homeDoc; } + this._homeDoc._viewType === "stacking" ? this.menuListView = true : this.menuListView = false; + // InkingStroke.switchTool(InkTool.None); + MobileInterface.Instance.drawingInk = false; + // InkingControl.Instance.updateSelectedColor("#FF0000"); + // InkingControl.Instance.switchWidth("2"); + this.switchCurrentView((userDoc: Doc) => this._homeDoc); } @action switchCurrentView = (doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) => { if (!this.userDoc) return; - this.userDoc.activeMobile = doc(this.userDoc); + Doc.UserDoc().activeMobile = doc(this.userDoc); onSwitch && onSwitch(); this.renderView = renderView; } - onSwitchInking = () => { - Doc.SetSelectedTool(InkTool.Pen); - MobileInterface.Instance.drawingInk = true; - - DocServer.Mobile.dispatchOverlayTrigger({ - enableOverlay: true, - width: window.innerWidth, - height: window.innerHeight - }); - } - onSwitchUpload = async () => { let width = 300; let height = 300; + const res = await rp.get(Utils.prepend("/getUserDocumentId")); // get width and height of the collection doc if (this.mainContainer) { @@ -102,36 +1032,531 @@ export default class MobileInterface extends React.Component { }); } - renderDefaultContent = () => { + @action + toggleSidebar = () => this.sidebarActive = !this.sidebarActive + + // toggleSidebar = () => { + // if (this._open === false) { + // this._open = true; + // } else { + // this._open = false; + // } + // console.log("clicked"); + // let menuButton = document.getElementById("menuButton") as HTMLElement; + // //menuButton.classList.toggle('active'); + + // let sidebar = document.getElementById("sidebar") as HTMLElement; + // //sidebar.classList.toggle('active'); + + // let header = document.getElementById("header") as HTMLElement; + + // if (!sidebar.classList.contains('active')) { + // header.textContent = String(this._activeDoc.title); + // } else { + // header.textContent = "library"; + // } + // } + + /** + * Method called when 'Library' button is pressed + */ + switchToLibrary = () => { + this._parents.push(this._activeDoc); + this.switchCurrentView((userDoc: Doc) => this._library); + this._activeDoc = this._library; + this._homeMenu = false; + this.sidebarActive = true; + } + + /** + * Back method for navigating within library + */ + back = () => { + let header = document.getElementById("header") as HTMLElement; + let doc = Cast(this._parents.pop(), Doc) as Doc; + if (doc === Cast(this._library, Doc) as Doc) { + this._child = null; + this.userDoc.activeMobile = this._library; + } else if (doc === Cast(this._homeDoc, Doc) as Doc) { + this._homeMenu = true; + this._parents = []; + this._activeDoc = this._homeDoc; + this._child = null; + this.switchCurrentView((userDoc: Doc) => this._homeDoc); + } else { + if (doc) { + this._child = doc; + this.switchCurrentView((userDoc: Doc) => doc); + this._homeMenu = false; + header.textContent = String(doc.title); + } + } + if (doc) { + this._activeDoc = doc; + } + this._ink = false; + } + + /** + * Return 'Home", which implies returning to 'Home' buttons + */ + returnHome = () => { + if (this._homeMenu === false || this.sidebarActive === true) { + this._homeMenu = true; + this._parents = []; + this._activeDoc = this._homeDoc; + this._child = null; + this.switchCurrentView((userDoc: Doc) => this._homeDoc); + } + if (this.sidebarActive) { + this.toggleSidebar(); + } + } + + /** + * Return to primary Workspace in library (Workspaces Doc) + */ + returnMain = () => { + console.log("home"); + this._parents = []; + // this.toggleSidebar(); + this._activeDoc = this._library; + this.switchCurrentView((userDoc: Doc) => this._library); + this._homeMenu = false; + this._child = null; + } + + // @computed get onChildClickHandler() { return ScriptCast(Doc.UserDoc.onClick); } + + /** + * DocumentView for graphic display of all documents + */ + displayWorkspaces = () => { if (this.mainContainer) { - return <DocumentView - Document={this.mainContainer} - DataDoc={undefined} - LibraryPath={emptyPath} - addDocument={returnFalse} - addDocTab={returnFalse} - pinToPres={emptyFunction} - rootSelected={returnFalse} - removeDocument={undefined} - onClick={undefined} - ScreenToLocalTransform={Transform.Identity} - ContentScaling={returnOne} - NativeHeight={returnZero} - NativeWidth={returnZero} - PanelWidth={() => window.screen.width} - PanelHeight={() => window.screen.height} - renderDepth={0} - focus={emptyFunction} - backgroundColor={returnEmptyString} - parentActive={returnTrue} - whenActiveChanged={emptyFunction} - bringToFront={emptyFunction} - ContainingCollectionView={undefined} - ContainingCollectionDoc={undefined} />; + const backgroundColor = () => "white"; + if (this._activeDoc.title === "mobile audio") { + return ( + <div style={{ position: "relative", top: '600px', height: `calc(50% - 450px)`, width: "80%", overflow: "hidden", left: "10%", cursor: "pointer" }}> + <DocumentView + Document={this.mainContainer} + DataDoc={undefined} + LibraryPath={emptyPath} + addDocument={returnFalse} + addDocTab={returnFalse} + pinToPres={emptyFunction} + rootSelected={returnFalse} + removeDocument={undefined} + ScreenToLocalTransform={Transform.Identity} + ContentScaling={returnOne} + NativeHeight={returnZero} + NativeWidth={returnZero} + PanelWidth={() => window.screen.width} + PanelHeight={() => window.screen.height} + renderDepth={0} + focus={emptyFunction} + backgroundColor={backgroundColor} + parentActive={returnTrue} + whenActiveChanged={emptyFunction} + bringToFront={emptyFunction} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} + /> + </div> + ); + } else { + return ( + <div style={{ position: "relative", top: '200px', height: `calc(100% - 200px)`, width: "100%", overflow: "hidden", left: "0%" }}> + <DocumentView + Document={this.mainContainer} + DataDoc={undefined} + LibraryPath={emptyPath} + addDocument={returnFalse} + addDocTab={returnFalse} + pinToPres={emptyFunction} + rootSelected={returnFalse} + removeDocument={undefined} + onClick={undefined} + ScreenToLocalTransform={Transform.Identity} + ContentScaling={returnOne} + PanelWidth={this.returnWidth} + PanelHeight={this.returnHeight} + NativeHeight={returnZero} + NativeWidth={returnZero} + renderDepth={0} + focus={emptyFunction} + backgroundColor={backgroundColor} + parentActive={returnTrue} + whenActiveChanged={emptyFunction} + bringToFront={emptyFunction} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} + /> + </div> + ); + } + } + } + + returnWidth = () => window.innerWidth; //The windows width + returnHeight = () => (window.innerHeight - 300); //Calculating the windows height (-300 to account for topbar) + + /** + * Handles the click functionality in the library panel + * @param doc: doc for which the method is called + */ + handleClick(doc: Doc) { + let children = DocListCast(doc.data); + if (doc.type !== "collection") { + this._parents.push(this._activeDoc); + this._activeDoc = doc; + this.switchCurrentView((userDoc: Doc) => doc); + this._homeMenu = false; + this.toggleSidebar(); + } else if (doc.type === "collection" && children.length === 0) { + console.log("This collection has no children"); + } else { + this._parents.push(this._activeDoc); + this._activeDoc = doc; + this.switchCurrentView((userDoc: Doc) => doc); + this._homeMenu = false; + this._child = doc; + } + + // let sidebar = document.getElementById("sidebar") as HTMLElement; + // sidebar.classList.toggle('active'); + } + + /** + * Handles creation of array which is then rendered in renderPathbar() + */ + createPathname = () => { + // let pathname = 'workspaces'; + // let titleArray = []; + let docArray = []; + this._parents.map((doc: Doc, index: any) => { + docArray.push(doc); + }); + docArray.push(this._activeDoc); + return docArray; + } + + // Renders the graphical pathbar + renderPathbar = () => { + // if (this._homeMenu == false) { + let docArray = this.createPathname(); + let items = docArray.map((doc: Doc, index: any) => { + if (index === 0) { + return ( + <div className="pathbarItem"> + <div className="pathbarText" + key={index} + onClick={() => this.handlePathClick(doc, index)}>{doc.title} + </div> + </div>); + } else if (doc === this._activeDoc) { + return ( + <div className="pathbarItem"> + <FontAwesomeIcon className="pathIcon" icon="angle-right" size="lg" /> + <div className="pathbarText" + style={{ backgroundColor: "rgb(119, 37, 37)" }} + key={index} + onClick={() => this.handlePathClick(doc, index)}>{doc.title} + </div> + </div>); + } else { + return ( + <div className="pathbarItem"> + <FontAwesomeIcon className="pathIcon" icon="angle-right" size="lg" /> + <div className="pathbarText" + key={index} + onClick={() => this.handlePathClick(doc, index)}>{doc.title} + </div> + </div>); + } + + }); + if (this._parents.length !== 0) { + return (<div className="pathbar"> + <div className="scrollmenu"> + {items} + </div> + <div className="back" > + <FontAwesomeIcon onClick={this.back} icon={"chevron-left"} color="white" size={"2x"} /> + </div> + <div className="hidePath" /> + </div>); + } else { + return (<div className="pathbar"> + <div className="scrollmenu"> + {items} + </div> + <div className="hidePath" /> + </div>); + } + // } + // } else { + + // return ( + // <div className="pathbar"> + // <div className="scrollmenu"> + // <div className="pathbarItem"> + // <div className="pathbarText" + // style={{ backgroundColor: "rgb(119, 37, 37)" }} + // key={0} + // onClick={() => this.returnHome()}>Home + // </div> + // </div> + // </div> + // <div className="hidePath" /> + // </div> + // ); + // } + + // } + } + + // Handles when user clicks on document in the pathbar + handlePathClick = (doc: Doc, index: number) => { + if (doc === this._library) { + this._activeDoc = doc; + this._child = null; + this.switchCurrentView((userDoc: Doc) => doc); + this._parents.length = index; + } else if (doc === this._homeDoc) { + this.returnHome(); + } else { + this._activeDoc = doc; + this._child = doc; + this.switchCurrentView((userDoc: Doc) => doc); + this._parents.length = index; + } + } + + renderDefaultContent = () => { + let menuButtons = DocListCast(this._homeDoc.data).map((doc: Doc, index: any) => { + if (doc.type !== "ink") { + return ( + <div + className="item" + key={index} + onClick={() => doc.onClick}>{doc.title} + </div>); + } + }); + + if (this._homeMenu === true) { + return ( + <div> + <div className="navbar"> + <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} /> + <div className="header" id="header">{this._homeDoc.title}</div> + <div className="cover" id="cover" onClick={(e) => this.stop(e)}></div> + <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}> + <span></span> + <span></span> + <span></span> + </div> + </div> + {this.renderPathbar()} + <div className="sidebar" id="sidebar"> + <div className="sidebarButtons"> + {menuButtons} + </div> + </div> + </div> + ); + } + + let workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; + if (this._child) { + workspaces = this._child + } + + let buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => { + if (doc.type !== "ink") { + return ( + <div + className="item" + key={index} + onClick={() => this.handleClick(doc)}>{doc.title} + <div className="type">{doc.type}</div> + <FontAwesomeIcon className="right" icon="angle-right" size="lg" /> + </div>); + } + }); + + return ( + <div> + <div className="navbar"> + <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} /> + <div className="header" id="header">{this.sidebarActive ? "library" : this._activeDoc.title}</div> + <div className={`toggle-btn ${this.sidebarActive ? "active" : ""}`} onClick={this.toggleSidebar}> + <span></span> + <span></span> + <span></span> + </div> + </div> + {this.renderPathbar()} + <div className={`sidebar ${this.sidebarActive ? "active" : ""}`}> + <div className="sidebarButtons"> + {this._child ? + <> + {buttons} + <div className="item" key="home" onClick={this.returnMain}> + Return to library + </div> + </> : + <> + {buttons} + </> + } + </div> + </div> + </div> + ); + } + + stop = (e: React.MouseEvent) => { + e.stopPropagation(); + } + + uploadAudioButton = () => { + if (this._activeDoc.type === "audio") { + return <div className="docButton" + title={Doc.isDocPinned(this._activeDoc) ? "Pen on" : "Pen off"} + style={{ backgroundColor: "black", color: "white" }} + onClick={this.uploadAudio} + > + <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="upload" + /> + </div>; + } + } + + + @action + toggleSelector = () => this.activeToolbar = !this.activeToolbar + + + colorTool = () => { + if (this._activeDoc._viewType === "docking") { + // const color = InkingControl.Instance.selectedColor; + const color = "lightpink"; + const selDoc = SelectionManager.SelectedDocuments()?.[0]?.rootDoc; + return ( + <div + className="docButton" + style={{ backgroundColor: color }} + onClick={this.toggleSelector} + > + <div className={`toolbar ${this.activeToolbar ? "active" : ""}`}> + <div className="colorSelector"> + {/* <SketchPicker onChange={InkingControl.Instance.switchColor} presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent']} */} + color={StrCast(CurrentUserUtils.ActivePen ? CurrentUserUtils.ActivePen.backgroundColor : undefined, + StrCast(selDoc?._backgroundColor, StrCast(selDoc?.backgroundColor, "black")))} /> + </div> + <div className="widthSelector"> + {/* <input type="range" min="1" max="100" defaultValue="2" id="myRange" onChange={(e: React.ChangeEvent<HTMLInputElement>) => InkingControl.Instance.switchWidth(e.target.value)} /> */} + </div> + </div> + </div> + ); + } + } + + onSwitchInking = () => { + const button = document.getElementById("inkButton") as HTMLElement; + // const color = InkingControl.Instance.selectedColor; + const color = "lightpink"; + button.style.backgroundColor = this._ink ? "white" : color; + button.style.color = this._ink ? "black" : "white"; + + if (!this._ink) { + console.log("INK IS ACTIVE"); + // InkingControl.Instance.switchTool(InkTool.Pen); + MobileInterface.Instance.drawingInk = true; + this._ink = true; + } else { + console.log("INK IS INACTIVE"); + // InkingControl.Instance.switchTool(InkTool.None); + MobileInterface.Instance.drawingInk = false; + this._ink = false; + } + } + + drawInk = () => { + if (this._activeDoc._viewType === "docking") { + const inkIsOn = this._ink; + return <div className="docButton" + id="inkButton" + title={Doc.isDocPinned(this._activeDoc) ? "Pen on" : "Pen off"} + onClick={this.onSwitchInking}> + <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="pen-nib" + /> + </div>; + } + } + + downloadDocument = () => { + if (this._activeDoc.type === "image") { + const url = this._activeDoc["data-path"]?.toString(); + return <div className="docButton" + title={"Download Image"} + style={{ backgroundColor: "white", color: "black" }} + onClick={e => { + window.open(url); + console.log(url); + }}> + <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="download" + /> + </div>; + } + } + + recordAudio = async () => { + // upload to server with known URL + if (this._activeDoc.title !== "mobile audio") { + this._parents.push(this._activeDoc); + } + const audioDoc = Cast(Docs.Create.AudioDocument(nullAudio, { _width: 200, _height: 100, title: "mobile audio" }), Doc) as Doc; + if (audioDoc) { + this._activeDoc = audioDoc; + this.switchCurrentView((userDoc: Doc) => audioDoc); + this._homeMenu = false; + // this.toggleSidebar(); + } + // const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; + // this.audioState = await audioDoc.getProto; + // if (this.audioState) { + // console.log(this.audioState); + // const data = Cast(audioRightSidebar.data, listSpec(Doc)); + // if (data) { + // data.push(audioDoc); + // } + // } + } + + uploadAudio = () => { + const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; + const audioDoc = this._activeDoc; + const data = Cast(audioRightSidebar.data, listSpec(Doc)); + if (data) { + data.push(audioDoc); } - return "hello"; + // this.recordAudio(); } + // renderActiveCollection = (userDoc: Doc) => { + // if (this.activeContainer) { + // const active = Cast(this.activeContainer.data, listSpec(Doc)); + // if (active) { + // return ( + // <div className="mobileInterface-background">HELLO!</div> + // ); + // } + // } + // } + onBack = (e: React.MouseEvent) => { this.switchCurrentView((userDoc: Doc) => this.mainDoc); Doc.SetSelectedTool(InkTool.None); // TODO: switch to previous tool @@ -164,61 +1589,15 @@ export default class MobileInterface extends React.Component { panelHeight = () => window.innerHeight; panelWidth = () => window.innerWidth; - renderInkingContent = () => { - console.log("rendering inking content"); - // TODO: support panning and zooming - // TODO: handle moving of ink strokes - if (this.mainContainer) { - return ( - <div className="mobileInterface"> - <div className="mobileInterface-inkInterfaceButtons"> - <div className="navButtons"> - <button className="mobileInterface-button cancel" onClick={this.onBack} title="Cancel drawing">BACK</button> - </div> - <div className="inkSettingButtons"> - <button className="mobileInterface-button cancel" onClick={this.onBack} title="Cancel drawing"><FontAwesomeIcon icon="long-arrow-alt-left" /></button> - </div> - <div className="navButtons"> - <button className="mobileInterface-button" onClick={this.shiftLeft} title="Shift left">left</button> - <button className="mobileInterface-button" onClick={this.shiftRight} title="Shift right">right</button> - </div> - </div> - <CollectionView - Document={this.mainContainer} - DataDoc={undefined} - LibraryPath={emptyPath} - filterAddDocument={returnTrue} - fieldKey={""} - dropAction={"alias"} - bringToFront={emptyFunction} - addDocTab={returnFalse} - pinToPres={emptyFunction} - PanelWidth={this.panelWidth} - PanelHeight={this.panelHeight} - NativeHeight={returnZero} - NativeWidth={returnZero} - focus={emptyFunction} - isSelected={returnFalse} - select={emptyFunction} - active={returnFalse} - ContentScaling={returnOne} - whenActiveChanged={returnFalse} - ScreenToLocalTransform={Transform.Identity} - renderDepth={0} - ContainingCollectionView={undefined} - ContainingCollectionDoc={undefined} - rootSelected={returnTrue}> - </CollectionView> - </div> - ); - } - } + //WAS 3 + + //WAS 1 upload = async (e: React.MouseEvent) => { if (this.mainContainer) { const data = Cast(this.mainContainer.data, listSpec(Doc)); if (data) { - const collectionDoc = await data[1]; // this should be the collection doc since the positions should be locked + const collectionDoc = await data[1]; //this should be the collection doc since the positions should be locked const children = DocListCast(collectionDoc.data); const uploadDoc = children.length === 1 ? children[0] : Docs.Create.StackingDocument(children, { title: "Mobile Upload Collection", backgroundColor: "white", lockedPosition: true, _width: 300, _height: 300 @@ -261,45 +1640,100 @@ export default class MobileInterface extends React.Component { } } - renderUploadContent() { - if (this.mainContainer) { + pinToPresentation = () => { + // Only making button available if it is an image + if (this._activeDoc.type === "image") { + const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc); + return <div className="docButton" + title={Doc.isDocPinned(this._activeDoc) ? "Unpin from presentation" : "Pin to presentation"} + style={{ backgroundColor: isPinned ? "black" : "white", color: isPinned ? "white" : "black" }} + onClick={e => { + if (isPinned) { + DockedFrameRenderer.UnpinDoc(this._activeDoc); + } + else { + DockedFrameRenderer.PinDoc(this._activeDoc); + } + }}> + <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" + /> + </div>; + } + } + + switchMenuView = () => { + if (this._activeDoc.title === this._homeDoc.title) { return ( - <div className="mobileInterface" onDragOver={this.onDragOver}> - <div className="mobileInterface-inkInterfaceButtons"> - <button className="mobileInterface-button cancel" onClick={this.onBack} title="Back">BACK</button> - {/* <button className="mobileInterface-button" onClick={this.clearUpload} title="Clear Upload">CLEAR</button> */} - {/* <button className="mobileInterface-button" onClick={this.addWeb} title="Add Web Doc to Upload Collection"></button> */} - <button className="mobileInterface-button" onClick={this.upload} title="Upload">UPLOAD</button> + <div className="homeSwitch"> + <div className={`list ${!this.menuListView ? "active" : ""}`} onClick={this.changeToIconView}> + <FontAwesomeIcon size="sm" icon="th-large" /> + </div> + <div className={`list ${this.menuListView ? "active" : ""}`} onClick={this.changeToListView}> + <FontAwesomeIcon size="sm" icon="bars" /> </div> - <DocumentView - Document={this.mainContainer} - DataDoc={undefined} - LibraryPath={emptyPath} - addDocument={returnFalse} - addDocTab={returnFalse} - pinToPres={emptyFunction} - rootSelected={returnFalse} - removeDocument={undefined} - onClick={undefined} - ScreenToLocalTransform={Transform.Identity} - ContentScaling={returnOne} - NativeHeight={returnZero} - NativeWidth={returnZero} - PanelWidth={() => window.screen.width} - PanelHeight={() => window.screen.height} - renderDepth={0} - focus={emptyFunction} - backgroundColor={returnEmptyString} - parentActive={returnTrue} - whenActiveChanged={emptyFunction} - bringToFront={emptyFunction} - ContainingCollectionView={undefined} - ContainingCollectionDoc={undefined} /> </div> ); } } + @action + changeToIconView = () => { + if (this._homeDoc._viewType = "stacking") { + this.menuListView = false; + this._homeDoc._viewType = "masonry"; + this._homeDoc.columnWidth = 300; + const menuButtons = DocListCast(this._homeDoc.data); + console.log('hello'); + menuButtons.map((doc: Doc, index: any) => { + console.log(index); + const buttonData = DocListCast(doc.data); + buttonData[1]._nativeWidth = 0.1; + buttonData[1]._width = 0.1; + buttonData[1]._dimMagnitude = 0; + buttonData[1]._opacity = 0; + console.log(buttonData); + console.log(doc._nativeWidth); + doc._nativeWidth = 400; + console.log(doc._nativeWidth); + }); + } + } + + @action + changeToListView = () => { + if (this._homeDoc._viewType = "masonry") { + this._homeDoc._viewType = "stacking"; + this.menuListView = true; + const menuButtons = DocListCast(this._homeDoc.data); + console.log('hello'); + menuButtons.map((doc: Doc, index: any) => { + const buttonData = DocListCast(doc.data); + buttonData[1]._nativeWidth = 450; + buttonData[1]._dimMagnitude = 2; + buttonData[1]._opacity = 1; + console.log(doc._nativeWidth); + doc._nativeWidth = 900; + console.log(doc._nativeWidth); + }); + } + } + + setupDefaultPresentation = () => { + if (this._activeDoc.title !== "Presentation") { + this._parents.push(this._activeDoc); + } + + const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc; + + if (presentation) { + console.log("presentation clicked: " + presentation.title); + this._activeDoc = presentation; + this.switchCurrentView((userDoc: Doc) => presentation); + this._homeMenu = false; + // this.toggleSidebar(); + } + } + onDragOver = (e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); @@ -308,37 +1742,189 @@ 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 : <></>; + // this.currentView === "upload" ? this.uploadContent : <></>;onDragOver={this.onDragOver} return ( <div className="mobileInterface-container" onDragOver={this.onDragOver}> {/* <DocumentDecorations /> <GestureOverlay> {this.renderView ? this.renderView() : this.renderDefaultContent()} </GestureOverlay> */} - + {/* <GestureOverlay> */} + <SettingsManager /> + {/* {this.menuOptions()} */} + {/* {this.displayHome()} */} + <div className={`image-upload ${this.imageUploadActive ? "active" : ""}`}> + {this.uploadImage()} + </div> + {this.switchMenuView()} + <div className="docButtonContainer"> + {this.pinToPresentation()} + {this.downloadDocument()} + {this.drawInk()} + {this.uploadAudioButton()} + {this.colorTool()} + </div> + <GestureOverlay> + {this.displayWorkspaces()} + {this.renderDefaultContent()} + </GestureOverlay> + {/* </GestureOverlay> */} {/* <DictationOverlay /> <SharingManager /> <GoogleAuthenticationManager /> */} - <DocumentDecorations /> - <GestureOverlay> - {this.renderView ? this.renderView() : this.renderDefaultContent()} - </GestureOverlay> - <PreviewCursor /> + {/* <DocumentDecorations /> */} + {/* <div> + {this.renderDefaultContent()} + </div> */} + {/* <PreviewCursor /> */} {/* <ContextMenu /> */} - <RadialMenu /> - <RichTextMenu /> + {/* <RadialMenu /> + <RichTextMenu /> */} {/* <PDFMenu /> <MarqueeOptionsMenu /> <OverlayView /> */} </div> ); } + + @action + toggleUpload = () => this.imageUploadActive = !this.imageUploadActive + + + @action + closeUpload = () => { + this.imageUploadActive = false; + } + + // toggleUpload = () => { + // if (this.imageUploadActive === true) { + // this.imageUploadActive = false; + // } else { + // this.imageUploadActive = true; + // } + // } + + uploadImage = () => { + if (this.imageUploadActive) { + console.log("active"); + } else if (!this.imageUploadActive) { + + } + console.log("upload"); + return ( + <div> + <div className="closeUpload" onClick={this.toggleUpload}> + <FontAwesomeIcon icon="window-close" size={"lg"} /> + </div> + <Uploader /> + </div> + ); + } } + + +const inputRef = React.createRef<HTMLInputElement>(); + + 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 onSwitchMobileUpload() { return MobileInterface.Instance.onSwitchUpload(); }); -Scripting.addGlobal(function renderMobileUpload() { return MobileInterface.Instance.renderUploadContent(); }); -Scripting.addGlobal(function addWebToMobileUpload() { return MobileInterface.Instance.addWebToCollection(); }); +Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); }); +Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); }); +Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.recordAudio(); }); +Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); }); +Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); }); +Scripting.addGlobal(function uploadImageMobile() { return MobileInterface.Instance.toggleUpload(); }); + + + +// WAS 2 + +// 1 +// renderUploadContent() { +// if (this.mainContainer) { +// return ( +// <div className="mobileInterface" onDragOver={this.onDragOver}> +// <div className="mobileInterface-inkInterfaceButtons"> +// <button className="mobileInterface-button cancel" onClick={this.onBack} title="Back">BACK</button> +// {/* <button className="mobileInterface-button" onClick={this.clearUpload} title="Clear Upload">CLEAR</button> */} +// {/* <button className="mobileInterface-button" onClick={this.addWeb} title="Add Web Doc to Upload Collection"></button> */} +// <button className="mobileInterface-button" onClick={this.upload} title="Upload">UPLOAD</button> +// </div> +// <DocumentView +// Document={this.mainContainer} +// DataDoc={undefined} +// LibraryPath={emptyPath} +// addDocument={returnFalse} +// addDocTab={returnFalse} +// pinToPres={emptyFunction} +// rootSelected={returnFalse} +// removeDocument={undefined} +// onClick={undefined} +// ScreenToLocalTransform={Transform.Identity} +// ContentScaling={returnOne} +// NativeHeight={returnZero} +// NativeWidth={returnZero} +// PanelWidth={() => window.screen.width} +// PanelHeight={() => window.screen.height} +// renderDepth={0} +// focus={emptyFunction} +// backgroundColor={returnEmptyString} +// parentActive={returnTrue} +// whenActiveChanged={emptyFunction} +// bringToFront={emptyFunction} +// ContainingCollectionView={undefined} +// ContainingCollectionDoc={undefined} /> +// </div> +// ); +// } +// } +// 3 + // renderInkingContent = () => { + // console.log("rendering inking content"); + // // TODO: support panning and zooming + // // TODO: handle moving of ink strokes + // if (this.mainContainer) { + // return ( + // <div className="mobileInterface"> + // <div className="mobileInterface-inkInterfaceButtons"> + // <div className="navButtons"> + // <button className="mobileInterface-button cancel" onClick={this.onBack} title="Cancel drawing">BACK</button> + // </div> + // <div className="inkSettingButtons"> + // <button className="mobileInterface-button cancel" onClick={this.onBack} title="Cancel drawing"><FontAwesomeIcon icon="long-arrow-alt-left" /></button> + // </div> + // <div className="navButtons"> + // <button className="mobileInterface-button" onClick={this.shiftLeft} title="Shift left">left</button> + // <button className="mobileInterface-button" onClick={this.shiftRight} title="Shift right">right</button> + // </div> + // </div> + // <CollectionView + // Document={this.mainContainer} + // DataDoc={undefined} + // LibraryPath={emptyPath} + // fieldKey={""} + // dropAction={"alias"} + // bringToFront={emptyFunction} + // addDocTab={returnFalse} + // pinToPres={emptyFunction} + // PanelWidth={this.panelWidth} + // PanelHeight={this.panelHeight} + // NativeHeight={returnZero} + // NativeWidth={returnZero} + // focus={emptyFunction} + // isSelected={returnFalse} + // select={emptyFunction} + // active={returnFalse} + // ContentScaling={returnOne} + // whenActiveChanged={returnFalse} + // ScreenToLocalTransform={Transform.Identity} + // renderDepth={0} + // ContainingCollectionView={undefined} + // ContainingCollectionDoc={undefined} + // rootSelected={returnTrue}> + // </CollectionView> + // </div> + // ); + // } + // } |