diff options
Diffstat (limited to 'src/client/views/MainView.tsx')
| -rw-r--r-- | src/client/views/MainView.tsx | 183 |
1 files changed, 162 insertions, 21 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 66545ea1f..4d5dfc99e 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -14,9 +14,8 @@ import { listSpec } from '../../fields/Schema'; import { ScriptField } from '../../fields/ScriptField'; import { BoolCast, Cast, FieldValue, StrCast } from '../../fields/Types'; import { TraceMobx } from '../../fields/util'; -import { emptyFunction, emptyPath, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero, setupMoveUpEvents, Utils } from '../../Utils'; +import { emptyFunction, emptyPath, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero, setupMoveUpEvents, Utils, simulateMouseClick } from '../../Utils'; import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager'; -import HypothesisAuthenticationManager from '../apis/HypothesisAuthenticationManager'; import { DocServer } from '../DocServer'; import { Docs, DocumentOptions } from '../documents/Documents'; import { DocumentType } from '../documents/DocumentTypes'; @@ -59,7 +58,11 @@ import { TaskCompletionBox } from './nodes/TaskCompletedBox'; import { OverlayView } from './OverlayView'; import PDFMenu from './pdf/PDFMenu'; import { PreviewCursor } from './PreviewCursor'; +import { Hypothesis } from '../util/HypothesisUtils'; import { undoBatch } from '../util/UndoManager'; +import { WebBox } from './nodes/WebBox'; +import * as ReactDOM from 'react-dom'; +import { SearchBox } from './search/SearchBox'; @observer export class MainView extends React.Component { @@ -79,8 +82,9 @@ export class MainView extends React.Component { @computed private get userDoc() { return Doc.UserDoc(); } @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; } @computed public get mainFreeform(): Opt<Doc> { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); } + @computed public get searchDoc() { return Cast(this.userDoc["search-panel"], Doc) as Doc; } - @observable public sidebarContent: any = this.userDoc?.["sidebar"]; + @observable public sidebarContent: any = this.userDoc?.sidebar; @observable public panelContent: string = "none"; @observable public showProperties: boolean = false; public isPointerDown = false; @@ -125,6 +129,7 @@ export class MainView extends React.Component { } }); }); + document.addEventListener("linkAnnotationToDash", Hypothesis.linkListener); } componentWillUnMount() { @@ -132,6 +137,7 @@ export class MainView extends React.Component { window.removeEventListener("pointerdown", this.globalPointerDown); window.removeEventListener("pointerup", this.globalPointerUp); window.removeEventListener("paste", KeyManager.Instance.paste as any); + document.removeEventListener("linkAnnotationToDash", Hypothesis.linkListener); } constructor(props: Readonly<{}>) { @@ -173,7 +179,8 @@ export class MainView extends React.Component { fa.faFillDrip, fa.faLink, fa.faUnlink, fa.faBold, fa.faItalic, fa.faChevronLeft, fa.faUnderline, fa.faStrikethrough, fa.faSuperscript, fa.faSubscript, fa.faIndent, fa.faEyeDropper, fa.faPaintRoller, fa.faBars, fa.faBrush, fa.faShapes, fa.faEllipsisH, fa.faHandPaper, fa.faMap, fa.faUser, faHireAHelper, fa.faDesktop, fa.faTrashRestore, fa.faUsers, fa.faWrench, fa.faCog, fa.faMap, fa.faBellSlash, fa.faExpandAlt, fa.faArchive, fa.faBezierCurve, fa.faCircle, - fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH, fa.faAngleDoubleLeft); + fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH, fa.faAngleDoubleLeft, fa.faAngleUp, + fa.faAngleDown, fa.faPlayCircle, fa.faClock, fa.faRocket, fa.faExchangeAlt, faBuffer); this.initEventListeners(); this.initAuthenticationRouters(); } @@ -188,6 +195,20 @@ export class MainView extends React.Component { if (targets && (targets.length && targets[0].className.toString() !== "timeline-menu-desc" && targets[0].className.toString() !== "timeline-menu-item" && targets[0].className.toString() !== "timeline-menu-input")) { TimelineMenu.Instance.closeMenu(); } + if (targets && targets.length && SearchBox.Instance._searchbarOpen) { + let check = false; + const icon = "icon"; + targets.forEach((thing) => { + if (thing.className.toString() === "collectionSchemaView-table" || (thing as any)?.dataset[icon] === "filter" || thing.className.toString() === "beta" || thing.className.toString() === "collectionSchemaView-menuOptions-wrapper") { + check = true; + } + }); + if (check === false) { + SearchBox.Instance.closeSearch(); + } + } + + }); globalPointerUp = () => this.isPointerDown = false; @@ -313,6 +334,16 @@ export class MainView extends React.Component { defaultBackgroundColors = (doc: Opt<Doc>) => { if (this.panelContent === doc?.title) return "lightgrey"; + + if (doc?.type === DocumentType.COL) { + if (doc.title === "Basic Item Creators" || doc.title === "sidebar-tools" + || doc.title === "sidebar-recentlyClosed" || doc.title === "sidebar-catalog" + || doc.title === "Mobile Uploads" || doc.title === "COLLECTION_PROTO" + || doc.title === "Advanced Item Prototypes" || doc.title === "all Creators") { + return "lightgrey"; + } + return StrCast(Doc.UserDoc().defaultColor); + } if (this.darkScheme) { switch (doc?.type) { case DocumentType.FONTICON: return "white"; @@ -337,6 +368,7 @@ export class MainView extends React.Component { } } } + @computed get mainDocView() { return <DocumentView Document={this.mainContainer!} @@ -365,11 +397,12 @@ export class MainView extends React.Component { renderDepth={-1} />; } + @computed get dockingContent() { TraceMobx(); const mainContainer = this.mainContainer; const width = this.flyoutWidth + this.propertiesWidth(); - return <div className="mainContent-div" onDrop={this.onDrop} style={{ width: `calc(100% - ${width}px)` }}> + return <div className="mainContent-div" onDrop={this.onDrop} style={{ width: `calc(100% - ${width}px)`, height: `calc(100% - 32px)` }}> {!mainContainer ? (null) : this.mainDocView} </div>; } @@ -408,17 +441,17 @@ export class MainView extends React.Component { } sidebarScreenToLocal = () => new Transform(0, (CollectionMenu.Instance.Pinned ? -35 : 0), 1); //sidebarScreenToLocal = () => new Transform(0, (RichTextMenu.Instance.Pinned ? -35 : 0) + (CollectionMenu.Instance.Pinned ? -35 : 0), 1); - mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight); + mainContainerXf = () => this.sidebarScreenToLocal().translate(-55, -this._buttonBarHeight); @computed get closePosition() { return 55 + this.flyoutWidth; } @computed get flyout() { if (!this.sidebarContent) return null; return <div className="mainView-libraryFlyout"> - <div className="mainView-contentArea" style={{ position: "relative", height: `100%`, width: "100%", overflow: "visible" }}> - {this.flyoutWidth > 0 ? <div className="mainView-libraryFlyout-close" + <div className="mainView-contentArea" style={{ position: "relative", height: `calc(100% - 32px)`, width: "100%", overflow: "visible" }}> + {/* {this.flyoutWidth > 0 ? <div className="mainView-libraryFlyout-close" onPointerDown={this.closeFlyout}> <FontAwesomeIcon icon="times" color="black" size="lg" /> - </div> : null} + </div> : null} */} <DocumentView Document={this.sidebarContent} @@ -446,6 +479,7 @@ export class MainView extends React.Component { ContainingCollectionView={undefined} ContainingCollectionDoc={undefined} relative={true} + forcedBackgroundColor={() => "lightgrey"} /> </div> {this.docButtons}</div>; @@ -485,7 +519,7 @@ export class MainView extends React.Component { } - @action @undoBatch + @action closeFlyout = () => { this._lastButton && (this._lastButton.color = "white"); this._lastButton && (this._lastButton._backgroundColor = ""); @@ -496,7 +530,7 @@ export class MainView extends React.Component { get groupManager() { return GroupManager.Instance; } _lastButton: Doc | undefined; - @action @undoBatch + @action selectMenu = (button: Doc, str: string) => { this._lastButton && (this._lastButton.color = "white"); this._lastButton && (this._lastButton._backgroundColor = ""); @@ -525,7 +559,7 @@ export class MainView extends React.Component { return true; } - @action @undoBatch + @action closeProperties = () => { CurrentUserUtils.propertiesWidth = 0; } @@ -553,7 +587,8 @@ export class MainView extends React.Component { <div className="mainView-flyoutContainer" style={{ width: this.flyoutWidth }}> {this.flyoutWidth !== 0 ? <div className="mainView-libraryHandle" onPointerDown={this.onFlyoutPointerDown} - style={{ backgroundColor: 'lightgrey' }}> + //style={{ backgroundColor: '#8c8b8b' }} + > <span title="library View Dragger" style={{ width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw", //height: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "100vh", @@ -580,17 +615,16 @@ export class MainView extends React.Component { <div className="mainView-propertiesDragger" title="Properties View Dragger" onPointerDown={this.onPropertiesPointerDown} style={{ right: rightFlyout, top: "50%" }}> <div className="mainView-propertiesDragger-icon"> - <FontAwesomeIcon icon={this.propertiesIcon} color="white" size="sm" /> </div> + <FontAwesomeIcon icon={this.propertiesIcon} color="black" size="sm" /> </div> </div> } {this.propertiesWidth() < 10 ? (null) : - <div style={{ width: this.propertiesWidth() }}> {this.propertiesView} </div>} + <div style={{ width: this.propertiesWidth(), height: "calc(100% - 35px)" }}> {this.propertiesView} </div>} </div> </>; } @computed get mainContent() { - //const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0); const n = (CollectionMenu.Instance?.Pinned ? 1 : 0); const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`; const pinned = FormatShapePane.Instance?.Pinned; @@ -713,11 +747,66 @@ export class MainView extends React.Component { @computed get search() { return <div className="mainView-searchPanel"> - <div style={{ float: "left", marginLeft: "10px" }}>{Doc.CurrentUserEmail}</div> - <div>SEARCH GOES HERE</div> + {/* <div style={{ float: "left", marginLeft: "10px" }}>{Doc.CurrentUserEmail}</div> */} + <div><DocumentView Document={this.searchDoc} + DataDoc={undefined} + LibraryPath={emptyPath} + addDocument={undefined} + addDocTab={this.addDocTabFunc} + pinToPres={emptyFunction} + rootSelected={returnTrue} + onClick={undefined} + backgroundColor={this.defaultBackgroundColors} + removeDocument={undefined} + ScreenToLocalTransform={Transform.Identity} + ContentScaling={returnOne} + NativeHeight={returnZero} + NativeWidth={returnZero} + PanelWidth={this.getPWidth} + PanelHeight={this.getPHeight} + renderDepth={0} + focus={emptyFunction} + parentActive={returnTrue} + whenActiveChanged={emptyFunction} + bringToFront={emptyFunction} + docFilters={returnEmptyFilter} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} + /></div> </div>; } + @computed get invisibleWebBox() { // see note under the makeLink method in HypothesisUtils.ts + return !DocumentLinksButton.invisibleWebDoc ? null : + <div style={{ position: 'absolute', left: 50, top: 50, display: 'block', width: '500px', height: '1000px' }} ref={DocumentLinksButton.invisibleWebRef}> + <WebBox + fieldKey={"data"} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} + Document={DocumentLinksButton.invisibleWebDoc} + LibraryPath={emptyPath} + dropAction={"move"} + isSelected={returnFalse} + select={returnFalse} + rootSelected={returnFalse} + renderDepth={0} + addDocTab={returnFalse} + pinToPres={returnFalse} + ScreenToLocalTransform={Transform.Identity} + bringToFront={returnFalse} + active={returnFalse} + whenActiveChanged={returnFalse} + focus={returnFalse} + PanelWidth={() => 500} + PanelHeight={() => 800} + NativeHeight={() => 500} + NativeWidth={() => 800} + ContentScaling={returnOne} + docFilters={returnEmptyFilter} + /> + </div>; + } + render() { return (<div className={"mainView-container" + (this.darkScheme ? "-dark" : "")} ref={this._mainViewRef}> @@ -727,14 +816,13 @@ export class MainView extends React.Component { <SettingsManager /> <GroupManager /> <GoogleAuthenticationManager /> - <HypothesisAuthenticationManager /> <DocumentDecorations /> - {/* {this.search} */} + {this.search} <CollectionMenu /> <FormatShapePane /> <div style={{ display: "none" }}><RichTextMenu key="rich" /></div> {LinkDescriptionPopup.descriptionPopup ? <LinkDescriptionPopup /> : null} - {DocumentLinksButton.EditLink ? <LinkMenu location={DocumentLinksButton.EditLinkLoc} docView={DocumentLinksButton.EditLink} addDocTab={DocumentLinksButton.EditLink.props.addDocTab} changeFlyout={emptyFunction} /> : (null)} + {DocumentLinksButton.EditLink ? <LinkMenu docView={DocumentLinksButton.EditLink} addDocTab={DocumentLinksButton.EditLink.props.addDocTab} changeFlyout={emptyFunction} /> : (null)} {LinkDocPreview.LinkInfo ? <LinkDocPreview location={LinkDocPreview.LinkInfo.Location} backgroundColor={this.defaultBackgroundColors} linkDoc={LinkDocPreview.LinkInfo.linkDoc} linkSrc={LinkDocPreview.LinkInfo.linkSrc} href={LinkDocPreview.LinkInfo.href} addDocTab={LinkDocPreview.LinkInfo.addDocTab} /> : (null)} @@ -752,8 +840,61 @@ export class MainView extends React.Component { <OverlayView /> <TimelineMenu /> {this.snapLines} + <div ref={this.makeWebRef} style={{ position: 'absolute', left: -1000, top: -1000, display: 'block', width: '200px', height: '800px' }} /> </div >); } + + makeWebRef = (ele: HTMLDivElement) => { + reaction(() => DocumentLinksButton.invisibleWebDoc, + invisibleDoc => { + ReactDOM.unmountComponentAtNode(ele); + invisibleDoc && ReactDOM.render(<span title="Drag as document" className="invisible-webbox" > + <div style={{ position: 'absolute', left: -1000, top: -1000, display: 'block', width: '200px', height: '800px' }} ref={DocumentLinksButton.invisibleWebRef}> + <WebBox + fieldKey={"data"} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} + Document={invisibleDoc} + LibraryPath={emptyPath} + dropAction={"move"} + isSelected={returnFalse} + select={returnFalse} + rootSelected={returnFalse} + renderDepth={0} + addDocTab={returnFalse} + pinToPres={returnFalse} + ScreenToLocalTransform={Transform.Identity} + bringToFront={returnFalse} + active={returnFalse} + whenActiveChanged={returnFalse} + focus={returnFalse} + PanelWidth={() => 500} + PanelHeight={() => 800} + NativeHeight={() => 500} + NativeWidth={() => 800} + ContentScaling={returnOne} + docFilters={returnEmptyFilter} + /> + </div>; + </span>, ele); + + var success = false; + const onSuccess = () => { + success = true; + clearTimeout(interval); + document.removeEventListener("editSuccess", onSuccess); + }; + + // For some reason, Hypothes.is annotations don't load until a click is registered on the page, + // so we keep simulating clicks until annotations have loaded and editing is successful + const interval = setInterval(() => { + !success && simulateMouseClick(ele, 50, 50, 50, 50); + }, 500); + + setTimeout(() => !success && clearInterval(interval), 10000); // give up if no success after 10s + document.addEventListener("editSuccess", onSuccess); + }); + } } Scripting.addGlobal(function freezeSidebar() { MainView.expandFlyout(); }); Scripting.addGlobal(function toggleComicMode() { Doc.UserDoc().fontFamily = "Comic Sans MS"; Doc.UserDoc().renderStyle = Doc.UserDoc().renderStyle === "comic" ? undefined : "comic"; }); |