aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/MainView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/MainView.tsx')
-rw-r--r--src/client/views/MainView.tsx95
1 files changed, 35 insertions, 60 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 969b44329..fb88c284f 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -1,5 +1,5 @@
import { IconName, library } from '@fortawesome/fontawesome-svg-core';
-import { faFilePdf, faFilm, faFont, faGlobeAsia, faImage, faMusic, faObjectGroup, faPenNib, faThumbtack, faRedoAlt, faTable, faTree, faUndoAlt, faBell, faCommentAlt } from '@fortawesome/free-solid-svg-icons';
+import { faFilePdf, faFilm, faFont, faGlobeAsia, faImage, faMusic, faObjectGroup, faArrowDown, faArrowUp, faCheck, faPenNib, faThumbtack, faRedoAlt, faTable, faTree, faUndoAlt, faBell, faCommentAlt, faCut } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, configure, observable, runInAction, trace } from 'mobx';
import { observer } from 'mobx-react';
@@ -36,24 +36,24 @@ import { CollectionBaseView } from './collections/CollectionBaseView';
import { List } from '../../new_fields/List';
import PDFMenu from './pdf/PDFMenu';
import { InkTool } from '../../new_fields/InkField';
-import * as _ from "lodash";
+import _ from "lodash";
+import KeyManager from './GlobalKeyHandler';
@observer
export class MainView extends React.Component {
public static Instance: MainView;
+ @observable addMenuToggle = React.createRef<HTMLInputElement>();
@observable private _workspacesShown: boolean = false;
@observable public pwidth: number = 0;
@observable public pheight: number = 0;
@computed private get mainContainer(): Opt<Doc> {
return FieldValue(Cast(CurrentUserUtils.UserDocument.activeWorkspace, Doc));
}
- @computed private get mainFreeform(): Opt<Doc> {
+ @computed get mainFreeform(): Opt<Doc> {
let docs = DocListCast(this.mainContainer!.data);
return (docs && docs.length > 1) ? docs[1] : undefined;
}
- private globalDisplayFlags = observable({
- jumpToVisible: false
- });
+ public isPointerDown = false;
private set mainContainer(doc: Opt<Doc>) {
if (doc) {
if (!("presentationView" in doc)) {
@@ -64,12 +64,23 @@ export class MainView extends React.Component {
}
componentWillMount() {
- document.removeEventListener("keydown", this.globalKeyHandler);
- document.addEventListener("keydown", this.globalKeyHandler);
+ window.removeEventListener("keydown", KeyManager.Handler.handle);
+ window.addEventListener("keydown", KeyManager.Handler.handle);
+
+ window.removeEventListener("pointerdown", this.pointerDown);
+ window.addEventListener("pointerdown", this.pointerDown);
+
+ window.removeEventListener("pointerup", this.pointerUp);
+ window.addEventListener("pointerup", this.pointerUp);
}
+ pointerDown = (e: PointerEvent) => this.isPointerDown = true;
+ pointerUp = (e: PointerEvent) => this.isPointerDown = false;
+
componentWillUnMount() {
- document.removeEventListener("keydown", this.globalKeyHandler);
+ window.removeEventListener("keydown", KeyManager.Handler.handle);
+ window.removeEventListener("pointerdown", this.pointerDown);
+ window.removeEventListener("pointerup", this.pointerUp);
}
constructor(props: Readonly<{}>) {
@@ -108,8 +119,12 @@ export class MainView extends React.Component {
library.add(faFilm);
library.add(faMusic);
library.add(faTree);
+ library.add(faCut);
library.add(faCommentAlt);
library.add(faThumbtack);
+ library.add(faCheck);
+ library.add(faArrowDown);
+ library.add(faArrowUp);
this.initEventListeners();
this.initAuthenticationRouters();
}
@@ -118,18 +133,6 @@ export class MainView extends React.Component {
// window.addEventListener("pointermove", (e) => this.reportLocation(e))
window.addEventListener("drop", (e) => e.preventDefault(), false); // drop event handler
window.addEventListener("dragover", (e) => e.preventDefault(), false); // drag event handler
- window.addEventListener("keydown", (e) => {
- if (e.key === "Escape") {
- DragManager.AbortDrag();
- SelectionManager.DeselectAll();
- } else if (e.key === "z" && e.ctrlKey) {
- e.preventDefault();
- UndoManager.Undo();
- } else if ((e.key === "y" && e.ctrlKey) || (e.key === "z" && e.ctrlKey && e.shiftKey)) {
- e.preventDefault();
- UndoManager.Redo();
- }
- }, false); // drag event handler
// click interactions for the context menu
document.addEventListener("pointerdown", action(function (e: PointerEvent) {
@@ -161,8 +164,13 @@ export class MainView extends React.Component {
const list = Cast(CurrentUserUtils.UserDocument.data, listSpec(Doc));
if (list) {
let freeformDoc = Docs.FreeformDocument([], { x: 0, y: 400, width: this.pwidth * .7, height: this.pheight, title: `WS collection ${list.length + 1}` });
- var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(CurrentUserUtils.UserDocument, 150), CollectionDockingView.makeDocumentConfig(freeformDoc, 600)] }] };
+ var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(CurrentUserUtils.UserDocument, CurrentUserUtils.UserDocument, 150), CollectionDockingView.makeDocumentConfig(freeformDoc, freeformDoc, 600)] }] };
let mainDoc = Docs.DockDocument([CurrentUserUtils.UserDocument, freeformDoc], JSON.stringify(dockingLayout), { title: `Workspace ${list.length + 1}` }, id);
+ if (!CurrentUserUtils.UserDocument.linkManagerDoc) {
+ let linkManagerDoc = new Doc();
+ linkManagerDoc.allLinks = new List<Doc>([]);
+ CurrentUserUtils.UserDocument.linkManagerDoc = linkManagerDoc;
+ }
list.push(mainDoc);
// bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container)
setTimeout(() => {
@@ -194,7 +202,7 @@ export class MainView extends React.Component {
openNotifsCol = () => {
if (this._notifsCol && CollectionDockingView.Instance) {
- CollectionDockingView.Instance.AddRightSplit(this._notifsCol);
+ CollectionDockingView.Instance.AddRightSplit(this._notifsCol, undefined);
}
}
@@ -220,6 +228,7 @@ export class MainView extends React.Component {
let mainCont = this.mainContainer;
let content = !mainCont ? (null) :
<DocumentView Document={mainCont}
+ DataDoc={undefined}
addDocument={undefined}
addDocTab={emptyFunction}
removeDocument={undefined}
@@ -227,7 +236,7 @@ export class MainView extends React.Component {
ContentScaling={returnOne}
PanelWidth={this.getPWidth}
PanelHeight={this.getPHeight}
- isTopMost={true}
+ renderDepth={0}
selectOnLoad={false}
focus={emptyFunction}
parentActive={returnTrue}
@@ -282,7 +291,7 @@ export class MainView extends React.Component {
];
return < div id="add-nodes-menu" >
- <input type="checkbox" id="add-menu-toggle" />
+ <input type="checkbox" id="add-menu-toggle" ref={this.addMenuToggle} />
<label htmlFor="add-menu-toggle" title="Add Node"><p>+</p></label>
<div id="add-options-content">
@@ -290,8 +299,7 @@ export class MainView extends React.Component {
<li key="search"><button className="add-button round-button" title="Search" onClick={this.toggleSearch}><FontAwesomeIcon icon="search" size="sm" /></button></li>
<li key="undo"><button className="add-button round-button" title="Undo" onClick={() => UndoManager.Undo()}><FontAwesomeIcon icon="undo-alt" size="sm" /></button></li>
<li key="redo"><button className="add-button round-button" title="Redo" onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button></li>
- <li key="color"><button className="add-button round-button" title="Redo" onClick={() => this.toggleColorPicker()}><div className="toolbar-color-button" style={{ backgroundColor: InkingControl.Instance.selectedColor }} >
-
+ <li key="color"><button className="add-button round-button" title="Select Color" onClick={() => this.toggleColorPicker()}><div className="toolbar-color-button" style={{ backgroundColor: InkingControl.Instance.selectedColor }} >
<div className="toolbar-color-picker" onClick={this.onColorClick} style={this._colorPickerDisplay ? { color: "black", display: "block" } : { color: "black", display: "none" }}>
<SketchPicker color={InkingControl.Instance.selectedColor} onChange={InkingControl.Instance.switchColor} />
</div>
@@ -352,38 +360,6 @@ export class MainView extends React.Component {
this.isSearchVisible = !this.isSearchVisible;
}
- @action
- globalKeyHandler = (e: KeyboardEvent) => {
- if (e.key === "Control" || !e.ctrlKey) return;
-
- if(e.key === "v") return;
- if(e.key === "c") return;
-
- e.preventDefault();
- e.stopPropagation();
-
- switch (e.key) {
- case "ArrowRight":
- if (this.mainFreeform) {
- CollectionDockingView.Instance.AddRightSplit(this.mainFreeform!);
- }
- break;
- case "ArrowLeft":
- if (this.mainFreeform) {
- CollectionDockingView.Instance.CloseRightSplit(this.mainFreeform!);
- }
- break;
- case "o":
- this.globalDisplayFlags.jumpToVisible = true;
- break;
- case "escape":
- _.mapValues(this.globalDisplayFlags, () => false);
- break;
- case "f":
- this.isSearchVisible = !this.isSearchVisible;
- }
- }
-
render() {
return (
@@ -394,7 +370,6 @@ export class MainView extends React.Component {
<ContextMenu />
{this.nodesMenu()}
{this.miscButtons}
- <InkingControl />
<PDFMenu />
<MainOverlayTextBox />
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 07:42:38 +0000