aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/Main.tsx11
-rw-r--r--src/client/views/PresentationView.scss68
-rw-r--r--src/client/views/PresentationView.tsx189
-rw-r--r--src/client/views/nodes/DocumentView.tsx515
-rw-r--r--src/fields/KeyStore.ts2
5 files changed, 528 insertions, 257 deletions
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 6f66f8f38..2014f3304 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -14,6 +14,7 @@ import { Server } from '../Server';
import { setupDrag } from '../util/DragManager';
import { Transform } from '../util/Transform';
import { UndoManager } from '../util/UndoManager';
+import { PresentationView } from './PresentationView';
import { WorkspacesMenu } from '../../server/authentication/controllers/WorkspacesMenu';
import { CollectionDockingView } from './collections/CollectionDockingView';
import { ContextMenu } from './ContextMenu';
@@ -220,7 +221,13 @@ export class Main extends React.Component {
@computed
get mainContent() {
- return !this.mainContainer ? (null) :
+ if (!this.mainContainer)
+ return (null);
+ this.mainContainer.GetOrCreateAsync(KeyStore.PresentationView, Document, doc => { });
+ let presentation = this.mainContainer.GetT(KeyStore.PresentationView, Document);
+ let pcontent = presentation && presentation != FieldWaiting ? <PresentationView Document={presentation} /> : (null);
+ return [
+ pcontent,
<DocumentView Document={this.mainContainer}
AddDocument={undefined}
RemoveDocument={undefined}
@@ -231,7 +238,7 @@ export class Main extends React.Component {
isTopMost={true}
SelectOnLoad={false}
focus={this.focusDocument}
- ContainingCollectionView={undefined} />
+ ContainingCollectionView={undefined} />]
}
/* for the expandable add nodes menu. Not included with the miscbuttons because once it expands it expands the whole div with it, making canvas interactions limited. */
diff --git a/src/client/views/PresentationView.scss b/src/client/views/PresentationView.scss
new file mode 100644
index 000000000..7c5677f0d
--- /dev/null
+++ b/src/client/views/PresentationView.scss
@@ -0,0 +1,68 @@
+.presentationView-cont {
+ position: absolute;
+ background: white;
+ z-index: 1;
+ box-shadow: #AAAAAA .2vw .2vw .4vw;
+ right: 0;
+ top:0;
+ bottom:0;
+}
+
+.presentationView-item {
+ width: 220px;
+ height: 40px;
+ vertical-align: center;
+ padding-top: 15px;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ transition: all .1s;
+}
+
+.presentationView-item:hover {
+ transition: all .1s;
+ background: #AAAAAA
+}
+
+.presentationView-heading {
+ margin-top: 0px;
+ height: 40px;
+ background: lightseagreen;
+ padding: 30px;
+}
+.presentationView-title {
+ padding-top: 3px;
+ padding-bottom: 3px;
+ font-size: 25px;
+ float:left;
+}
+.presentation-icon{
+ float: right;
+ display: inline;
+ width: 10px;
+ margin-top: 7px;
+}
+.presentationView-header {
+ padding-top: 1px;
+ padding-bottom: 1px;
+ font-size: 15px;
+ float:left;
+ }
+
+ .presentation-next{
+ float: right;
+ }
+ .presentation-back{
+ float: left;
+ }
+ .presentation-next:hover{
+ transition: all .1s;
+ background: #AAAAAA
+}
+.presentation-back:hover{
+ transition: all .1s;
+ background: #AAAAAA
+} \ No newline at end of file
diff --git a/src/client/views/PresentationView.tsx b/src/client/views/PresentationView.tsx
new file mode 100644
index 000000000..e5e67572b
--- /dev/null
+++ b/src/client/views/PresentationView.tsx
@@ -0,0 +1,189 @@
+import { observer } from "mobx-react";
+import { Document } from "../../fields/Document";
+import { KeyStore } from "../../fields/KeyStore";
+import { ListField } from "../../fields/ListField";
+import React = require("react")
+import { TextField } from "../../fields/TextField";
+import { observable, action } from "mobx";
+import { Field } from "../../fields/Field";
+import "./PresentationView.scss"
+import { NumberField } from "../../fields/NumberField";
+import "./Main.tsx";
+import { DocumentManager } from "../util/DocumentManager";
+
+export interface PresViewProps {
+ Document: Document;
+}
+
+
+@observer
+/**
+ * Component that takes in a document prop and a boolean whether it's collapsed or not.
+ */
+class PresentationViewItem extends React.Component<PresViewProps> {
+
+ //look at CollectionFreeformView.focusDocument(d)
+ @action
+ openDoc = (doc: Document) => {
+ let docView = DocumentManager.Instance.getDocumentView(doc);
+ if (docView) {
+ docView.focus();
+ }
+ }
+
+ /**
+ * Removes a document from the presentation view
+ **/
+ @action
+ public RemoveDoc(doc: Document) {
+ const value = this.props.Document.GetData(KeyStore.Data, ListField, new Array<Document>())
+ let index = -1;
+ for (let i = 0; i < value.length; i++) {
+ if (value[i].Id == doc.Id) {
+ index = i;
+ break;
+ }
+ }
+ if (index !== -1) {
+ value.splice(index, 1)
+ }
+ }
+
+ /**
+ * Renders a single child document. It will just append a list element.
+ * @param document The document to render.
+ */
+ renderChild(document: Document) {
+ let title = document.GetT<TextField>(KeyStore.Title, TextField);
+
+ //to get currently selected presentation doc
+ let selected = this.props.Document.GetNumber(KeyStore.SelectedDoc, 0);
+
+ // if the title hasn't loaded, immediately return the div
+ if (!title || title === "<Waiting>") {
+ return <div className="presentationView-item" key={document.Id}></div>;
+ }
+ // finally, if it's a normal document, then render it as such.
+ else {
+ const children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+ if (children && children !== "<Waiting>" && children.Data[selected] == document) {
+ //this doc is selected
+ const styles = {
+ background: "gray"
+ }
+ return <li className="presentationView-item" style={styles} key={document.Id}>
+ <div className="presentationView-header" onClick={() => this.openDoc(document)}>{title.Data}</div>
+ <div className="presentation-icon" onClick={() => this.RemoveDoc(document)}>X</div></li>;
+ } else {
+ return <li className="presentationView-item" key={document.Id} >
+ <div className="presentationView-header" onClick={() => this.openDoc(document)}>{title.Data}</div>
+ <div className="presentation-icon" onClick={() => this.RemoveDoc(document)}>X</div></li>;
+ }
+
+ }
+ }
+
+ render() {
+ const children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+
+ if (children && children !== "<Waiting>") {
+ return (<div>
+ {children.Data.map(value => this.renderChild(value))}
+ </div>)
+ } else {
+ return <div></div>;
+ }
+ }
+}
+
+
+@observer
+export class PresentationView extends React.Component<PresViewProps> {
+ public static Instance: PresentationView;
+
+ //observable means render is re-called every time variable is changed
+ @observable
+ collapsed: boolean = false;
+ closePresentation = action(() => this.props.Document.SetNumber(KeyStore.Width, 0));
+ next = () => {
+ const current = this.props.Document.GetNumber(KeyStore.SelectedDoc, 0);
+ const allDocs = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+ if (allDocs && allDocs !== "<Waiting>" && current < allDocs.Data.length + 1) {
+ //can move forwards
+ this.props.Document.SetNumber(KeyStore.SelectedDoc, current + 1);
+ const doc = allDocs.Data[current + 1];
+ let docView = DocumentManager.Instance.getDocumentView(doc);
+ if (docView) {
+ docView.focus();
+ }
+ }
+
+ };
+ back = () => {
+ const current = this.props.Document.GetNumber(KeyStore.SelectedDoc, 0);
+ const allDocs = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+ if (allDocs && allDocs !== "<Waiting>" && current - 1 >= 0) {
+ //can move forwards
+ this.props.Document.SetNumber(KeyStore.SelectedDoc, current - 1);
+ const doc = allDocs.Data[current - 1];
+ let docView = DocumentManager.Instance.getDocumentView(doc);
+ if (docView) {
+ docView.focus();
+ }
+ }
+
+ };
+
+ private ref: React.RefObject<HTMLDivElement>;
+
+ //initilize class variables
+ constructor(props: PresViewProps) {
+ super(props);
+ this.ref = React.createRef()
+ PresentationView.Instance = this;
+ }
+
+ /**
+ * Adds a document to the presentation view
+ **/
+ @action
+ public PinDoc(doc: Document) {
+ //add this new doc to props.Document
+ if (this.props.Document.Get(KeyStore.Data) instanceof Field) {
+ const value = this.props.Document.GetData(KeyStore.Data, ListField, new Array<Document>())
+ value.push(doc);
+ } else {
+ this.props.Document.SetData(KeyStore.Data, [doc], ListField);
+ }
+
+ this.props.Document.SetNumber(KeyStore.Width, 300);
+ }
+
+ render() {
+ let titleStr = "Title";
+ let title = this.props.Document.GetT<TextField>(KeyStore.Title, TextField);
+ if (title && title !== "<Waiting>") {
+ titleStr = title.Data;
+ }
+ let width = this.props.Document.GetNumber(KeyStore.Width, 0);
+
+ //TODO: next and back should be icons
+ return (
+ <div className="presentationView-cont" style={{ width: width }}>
+ <div className="presentationView-heading">
+ <div className="presentationView-title">{titleStr}</div>
+ <div className='presentation-icon' onClick={this.closePresentation}>X</div></div>
+ <div>
+ <div className="presentation-back" onClick={this.back}>back</div>
+ <div className="presentation-next" onClick={this.next}>next</div>
+
+ </div>
+ <ul>
+ <PresentationViewItem
+ Document={this.props.Document}
+ />
+ </ul>
+ </div>
+ );
+ }
+} \ No newline at end of file
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 1195128dc..78b810398 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,11 +1,12 @@
import { action, computed, IReactionDisposer, reaction, runInAction } from "mobx";
import { observer } from "mobx-react";
import { Document } from "../../../fields/Document";
-import { Field, Opt, FieldWaiting } from "../../../fields/Field";
+import { Field, Opt } from "../../../fields/Field";
import { Key } from "../../../fields/Key";
import { KeyStore } from "../../../fields/KeyStore";
import { ListField } from "../../../fields/ListField";
import { TextField } from "../../../fields/TextField";
+import { ServerUtils } from "../../../server/ServerUtil";
import { Utils } from "../../../Utils";
import { Documents } from "../../documents/Documents";
import { DocumentManager } from "../../util/DocumentManager";
@@ -15,28 +16,28 @@ import { Transform } from "../../util/Transform";
import { CollectionDockingView } from "../collections/CollectionDockingView";
import { CollectionView, CollectionViewType } from "../collections/CollectionView";
import { ContextMenu } from "../ContextMenu";
+import { PresentationView } from "../PresentationView";
import { DocumentContentsView } from "./DocumentContentsView";
import "./DocumentView.scss";
import React = require("react");
-import { ServerUtils } from "../../../server/ServerUtil";
export interface DocumentViewProps {
- ContainingCollectionView: Opt<CollectionView>;
- Document: Document;
- AddDocument?: (doc: Document, allowDuplicates: boolean) => boolean;
- RemoveDocument?: (doc: Document) => boolean;
- ScreenToLocalTransform: () => Transform;
- isTopMost: boolean;
- ContentScaling: () => number;
- PanelWidth: () => number;
- PanelHeight: () => number;
- focus: (doc: Document) => void;
- SelectOnLoad: boolean;
+ ContainingCollectionView: Opt<CollectionView>;
+ Document: Document;
+ AddDocument?: (doc: Document, allowDuplicates: boolean) => boolean;
+ RemoveDocument?: (doc: Document) => boolean;
+ ScreenToLocalTransform: () => Transform;
+ isTopMost: boolean;
+ ContentScaling: () => number;
+ PanelWidth: () => number;
+ PanelHeight: () => number;
+ focus: (doc: Document) => void;
+ SelectOnLoad: boolean;
}
export interface JsxArgs extends DocumentViewProps {
- Keys: { [name: string]: Key }
- Fields: { [name: string]: Field }
+ Keys: { [name: string]: Key }
+ Fields: { [name: string]: Field }
}
/*
@@ -55,287 +56,291 @@ Example usage of this function:
}
*/
export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
- let Keys: { [name: string]: any } = {}
- let Fields: { [name: string]: any } = {}
- for (const key of keys) {
- let fn = () => { }
- Object.defineProperty(fn, "name", { value: key + "Key" })
- Keys[key] = fn;
- }
- for (const field of fields) {
- let fn = () => { }
- Object.defineProperty(fn, "name", { value: field })
- Fields[field] = fn;
- }
- let args: JsxArgs = {
- Document: function Document() { },
- DocumentView: function DocumentView() { },
- Keys,
- Fields
- } as any;
- return args;
+ let Keys: { [name: string]: any } = {}
+ let Fields: { [name: string]: any } = {}
+ for (const key of keys) {
+ let fn = () => { }
+ Object.defineProperty(fn, "name", { value: key + "Key" })
+ Keys[key] = fn;
+ }
+ for (const field of fields) {
+ let fn = () => { }
+ Object.defineProperty(fn, "name", { value: field })
+ Fields[field] = fn;
+ }
+ let args: JsxArgs = {
+ Document: function Document() { },
+ DocumentView: function DocumentView() { },
+ Keys,
+ Fields
+ } as any;
+ return args;
}
export interface JsxBindings {
- Document: Document;
- isSelected: () => boolean;
- select: (isCtrlPressed: boolean) => void;
- isTopMost: boolean;
- SelectOnLoad: boolean;
- [prop: string]: any;
+ Document: Document;
+ isSelected: () => boolean;
+ select: (isCtrlPressed: boolean) => void;
+ isTopMost: boolean;
+ SelectOnLoad: boolean;
+ [prop: string]: any;
}
@observer
export class DocumentView extends React.Component<DocumentViewProps> {
- private _mainCont = React.createRef<HTMLDivElement>();
- private _downX: number = 0;
- private _downY: number = 0;
- private _reactionDisposer: Opt<IReactionDisposer>;
- @computed get active(): boolean { return SelectionManager.IsSelected(this) || !this.props.ContainingCollectionView || this.props.ContainingCollectionView.active(); }
- @computed get topMost(): boolean { return !this.props.ContainingCollectionView || this.props.ContainingCollectionView.collectionViewType == CollectionViewType.Docking; }
- @computed get layout(): string { return this.props.Document.GetText(KeyStore.Layout, "<p>Error loading layout data</p>"); }
- @computed get layoutKeys(): Key[] { return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array<Key>()); }
- @computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array<Key>()); }
- screenRect = (): ClientRect | DOMRect => this._mainCont.current ? this._mainCont.current.getBoundingClientRect() : new DOMRect();
- onPointerDown = (e: React.PointerEvent): void => {
- this._downX = e.clientX;
- this._downY = e.clientY;
- if (e.shiftKey && e.buttons === 2) {
- if (this.props.isTopMost) {
- this.startDragging(e.pageX, e.pageY, e.altKey || e.ctrlKey);
- }
- else CollectionDockingView.Instance.StartOtherDrag([this.props.Document], e);
- e.stopPropagation();
- } else {
- if (this.active && !e.isDefaultPrevented()) {
- e.stopPropagation();
- document.removeEventListener("pointermove", this.onPointerMove)
- document.addEventListener("pointermove", this.onPointerMove);
- document.removeEventListener("pointerup", this.onPointerUp)
- document.addEventListener("pointerup", this.onPointerUp);
- }
- }
+ private _mainCont = React.createRef<HTMLDivElement>();
+ private _downX: number = 0;
+ private _downY: number = 0;
+ private _reactionDisposer: Opt<IReactionDisposer>;
+ @computed get active(): boolean { return SelectionManager.IsSelected(this) || !this.props.ContainingCollectionView || this.props.ContainingCollectionView.active(); }
+ @computed get topMost(): boolean { return !this.props.ContainingCollectionView || this.props.ContainingCollectionView.collectionViewType == CollectionViewType.Docking; }
+ @computed get layout(): string { return this.props.Document.GetText(KeyStore.Layout, "<p>Error loading layout data</p>"); }
+ @computed get layoutKeys(): Key[] { return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array<Key>()); }
+ @computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array<Key>()); }
+ screenRect = (): ClientRect | DOMRect => this._mainCont.current ? this._mainCont.current.getBoundingClientRect() : new DOMRect();
+ onPointerDown = (e: React.PointerEvent): void => {
+ this._downX = e.clientX;
+ this._downY = e.clientY;
+ if (e.shiftKey && e.buttons === 2) {
+ if (this.props.isTopMost) {
+ this.startDragging(e.pageX, e.pageY, e.altKey || e.ctrlKey);
+ }
+ else CollectionDockingView.Instance.StartOtherDrag([this.props.Document], e);
+ e.stopPropagation();
+ } else {
+ if (this.active && !e.isDefaultPrevented()) {
+ e.stopPropagation();
+ document.removeEventListener("pointermove", this.onPointerMove)
+ document.addEventListener("pointermove", this.onPointerMove);
+ document.removeEventListener("pointerup", this.onPointerUp)
+ document.addEventListener("pointerup", this.onPointerUp);
+ }
}
+ }
- private dropDisposer?: DragManager.DragDropDisposer;
+ private dropDisposer?: DragManager.DragDropDisposer;
+ focus = () => {
+ this.props.focus(this.props.Document);
+ }
- componentDidMount() {
- if (this._mainCont.current) {
- this.dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, { handlers: { drop: this.drop.bind(this) } });
- }
- runInAction(() => DocumentManager.Instance.DocumentViews.push(this))
- this._reactionDisposer = reaction(
- () => this.props.ContainingCollectionView && this.props.ContainingCollectionView.SelectedDocs.slice(),
- () => {
- if (this.props.ContainingCollectionView && this.props.ContainingCollectionView.SelectedDocs.indexOf(this.props.Document.Id) != -1)
- SelectionManager.SelectDoc(this, true);
- });
+ componentDidMount() {
+ if (this._mainCont.current) {
+ this.dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, { handlers: { drop: this.drop.bind(this) } });
}
+ runInAction(() => DocumentManager.Instance.DocumentViews.push(this))
+ this._reactionDisposer = reaction(
+ () => this.props.ContainingCollectionView && this.props.ContainingCollectionView.SelectedDocs.slice(),
+ () => {
+ if (this.props.ContainingCollectionView && this.props.ContainingCollectionView.SelectedDocs.indexOf(this.props.Document.Id) != -1)
+ SelectionManager.SelectDoc(this, true);
+ });
+ }
- componentDidUpdate() {
- if (this.dropDisposer) {
- this.dropDisposer();
- }
- if (this._mainCont.current) {
- this.dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, { handlers: { drop: this.drop.bind(this) } });
- }
+ componentDidUpdate() {
+ if (this.dropDisposer) {
+ this.dropDisposer();
}
+ if (this._mainCont.current) {
+ this.dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, { handlers: { drop: this.drop.bind(this) } });
+ }
+ }
- componentWillUnmount() {
- if (this.dropDisposer) {
- this.dropDisposer();
- }
- runInAction(() => DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1))
- if (this._reactionDisposer) {
- this._reactionDisposer();
- }
+ componentWillUnmount() {
+ if (this.dropDisposer) {
+ this.dropDisposer();
}
+ runInAction(() => DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1))
+ if (this._reactionDisposer) {
+ this._reactionDisposer();
+ }
+ }
- startDragging(x: number, y: number, dropAliasOfDraggedDoc: boolean) {
- if (this._mainCont.current) {
- const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
- let dragData = new DragManager.DocumentDragData([this.props.Document]);
- dragData.aliasOnDrop = dropAliasOfDraggedDoc;
- dragData.xOffset = x - left;
- dragData.yOffset = y - top;
- dragData.removeDocument = (dropCollectionView: CollectionView) => {
- if (this.props.RemoveDocument && this.props.ContainingCollectionView !== dropCollectionView) {
- this.props.RemoveDocument(this.props.Document);
- }
- }
- DragManager.StartDocumentDrag([this._mainCont.current], dragData, {
- handlers: {
- dragComplete: action(() => { }),
- },
- hideSource: !dropAliasOfDraggedDoc
- })
+ startDragging(x: number, y: number, dropAliasOfDraggedDoc: boolean) {
+ if (this._mainCont.current) {
+ const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+ let dragData = new DragManager.DocumentDragData([this.props.Document]);
+ dragData.aliasOnDrop = dropAliasOfDraggedDoc;
+ dragData.xOffset = x - left;
+ dragData.yOffset = y - top;
+ dragData.removeDocument = (dropCollectionView: CollectionView) => {
+ if (this.props.RemoveDocument && this.props.ContainingCollectionView !== dropCollectionView) {
+ this.props.RemoveDocument(this.props.Document);
}
+ }
+ DragManager.StartDocumentDrag([this._mainCont.current], dragData, {
+ handlers: {
+ dragComplete: action(() => { }),
+ },
+ hideSource: !dropAliasOfDraggedDoc
+ })
}
+ }
- onPointerMove = (e: PointerEvent): void => {
- if (e.cancelBubble) {
- return;
- }
- if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
- document.removeEventListener("pointermove", this.onPointerMove)
- document.removeEventListener("pointerup", this.onPointerUp);
- if (!this.topMost || e.buttons == 2 || e.altKey) {
- this.startDragging(e.x, e.y, e.ctrlKey || e.altKey);
- }
- }
- e.stopPropagation();
- e.preventDefault();
+ onPointerMove = (e: PointerEvent): void => {
+ if (e.cancelBubble) {
+ return;
}
- onPointerUp = (e: PointerEvent): void => {
- document.removeEventListener("pointermove", this.onPointerMove)
- document.removeEventListener("pointerup", this.onPointerUp)
- e.stopPropagation();
- if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) {
- SelectionManager.SelectDoc(this, e.ctrlKey);
- }
+ if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
+ document.removeEventListener("pointermove", this.onPointerMove)
+ document.removeEventListener("pointerup", this.onPointerUp);
+ if (!this.topMost || e.buttons == 2 || e.altKey) {
+ this.startDragging(e.x, e.y, e.ctrlKey || e.altKey);
+ }
}
- stopPropogation = (e: React.SyntheticEvent) => {
- e.stopPropagation();
+ e.stopPropagation();
+ e.preventDefault();
+ }
+ onPointerUp = (e: PointerEvent): void => {
+ document.removeEventListener("pointermove", this.onPointerMove)
+ document.removeEventListener("pointerup", this.onPointerUp)
+ e.stopPropagation();
+ if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) {
+ SelectionManager.SelectDoc(this, e.ctrlKey);
}
+ }
+ stopPropogation = (e: React.SyntheticEvent) => {
+ e.stopPropagation();
+ }
- deleteClicked = (): void => {
- if (this.props.RemoveDocument) {
- this.props.RemoveDocument(this.props.Document);
- }
+ deleteClicked = (): void => {
+ if (this.props.RemoveDocument) {
+ this.props.RemoveDocument(this.props.Document);
}
+ }
- fieldsClicked = (e: React.MouseEvent): void => {
- if (this.props.AddDocument) {
- this.props.AddDocument(Documents.KVPDocument(this.props.Document, { width: 300, height: 300 }), false);
- }
- }
- fullScreenClicked = (e: React.MouseEvent): void => {
- CollectionDockingView.Instance.OpenFullScreen(this.props.Document);
- ContextMenu.Instance.clearItems();
- ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked });
- ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+ fieldsClicked = (e: React.MouseEvent): void => {
+ if (this.props.AddDocument) {
+ this.props.AddDocument(Documents.KVPDocument(this.props.Document, { width: 300, height: 300 }), false);
}
+ }
+ fullScreenClicked = (e: React.MouseEvent): void => {
+ CollectionDockingView.Instance.OpenFullScreen(this.props.Document);
+ ContextMenu.Instance.clearItems();
+ ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked });
+ ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+ }
- closeFullScreenClicked = (e: React.MouseEvent): void => {
- CollectionDockingView.Instance.CloseFullScreen();
- ContextMenu.Instance.clearItems();
- ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
- ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
- }
+ closeFullScreenClicked = (e: React.MouseEvent): void => {
+ CollectionDockingView.Instance.CloseFullScreen();
+ ContextMenu.Instance.clearItems();
+ ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+ ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+ }
- @action
- drop = (e: Event, de: DragManager.DropEvent) => {
- if (de.data instanceof DragManager.LinkDragData) {
- let sourceDoc: Document = de.data.linkSourceDocumentView.props.Document;
- let destDoc: Document = this.props.Document;
- if (this.props.isTopMost) {
- return;
- }
- let linkDoc: Document = new Document();
+ @action
+ drop = (e: Event, de: DragManager.DropEvent) => {
+ if (de.data instanceof DragManager.LinkDragData) {
+ let sourceDoc: Document = de.data.linkSourceDocumentView.props.Document;
+ let destDoc: Document = this.props.Document;
+ if (this.props.isTopMost) {
+ return;
+ }
+ let linkDoc: Document = new Document();
- destDoc.GetTAsync(KeyStore.Prototype, Document).then((protoDest) =>
- sourceDoc.GetTAsync(KeyStore.Prototype, Document).then((protoSrc) => runInAction(() => {
- linkDoc.Set(KeyStore.Title, new TextField("New Link"));
- linkDoc.Set(KeyStore.LinkDescription, new TextField(""));
- linkDoc.Set(KeyStore.LinkTags, new TextField("Default"));
+ destDoc.GetTAsync(KeyStore.Prototype, Document).then((protoDest) =>
+ sourceDoc.GetTAsync(KeyStore.Prototype, Document).then((protoSrc) => runInAction(() => {
+ linkDoc.Set(KeyStore.Title, new TextField("New Link"));
+ linkDoc.Set(KeyStore.LinkDescription, new TextField(""));
+ linkDoc.Set(KeyStore.LinkTags, new TextField("Default"));
- let dstTarg = (protoDest ? protoDest : destDoc);
- let srcTarg = (protoSrc ? protoSrc : sourceDoc);
- linkDoc.Set(KeyStore.LinkedToDocs, dstTarg);
- linkDoc.Set(KeyStore.LinkedFromDocs, srcTarg);
- dstTarg.GetOrCreateAsync(KeyStore.LinkedFromDocs, ListField, field => { (field as ListField<Document>).Data.push(linkDoc) })
- srcTarg.GetOrCreateAsync(KeyStore.LinkedToDocs, ListField, field => { (field as ListField<Document>).Data.push(linkDoc) })
- }))
- )
- e.stopPropagation();
- }
+ let dstTarg = (protoDest ? protoDest : destDoc);
+ let srcTarg = (protoSrc ? protoSrc : sourceDoc);
+ linkDoc.Set(KeyStore.LinkedToDocs, dstTarg);
+ linkDoc.Set(KeyStore.LinkedFromDocs, srcTarg);
+ dstTarg.GetOrCreateAsync(KeyStore.LinkedFromDocs, ListField, field => { (field as ListField<Document>).Data.push(linkDoc) })
+ srcTarg.GetOrCreateAsync(KeyStore.LinkedToDocs, ListField, field => { (field as ListField<Document>).Data.push(linkDoc) })
+ }))
+ )
+ e.stopPropagation();
}
+ }
- onDrop = (e: React.DragEvent) => {
- if (e.isDefaultPrevented()) {
- return;
- }
- let text = e.dataTransfer.getData("text/plain");
- if (text && text.startsWith("<div")) {
- let oldLayout = this.props.Document.GetText(KeyStore.Layout, "");
- let layout = text.replace("{layout}", oldLayout);
- this.props.Document.SetText(KeyStore.Layout, layout);
- e.stopPropagation();
- e.preventDefault();
- }
+ onDrop = (e: React.DragEvent) => {
+ if (e.isDefaultPrevented()) {
+ return;
}
+ let text = e.dataTransfer.getData("text/plain");
+ if (text && text.startsWith("<div")) {
+ let oldLayout = this.props.Document.GetText(KeyStore.Layout, "");
+ let layout = text.replace("{layout}", oldLayout);
+ this.props.Document.SetText(KeyStore.Layout, layout);
+ e.stopPropagation();
+ e.preventDefault();
+ }
+ }
- @action
- onContextMenu = (e: React.MouseEvent): void => {
- e.stopPropagation();
- let moved = Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3;
- if (moved || e.isDefaultPrevented()) {
- e.preventDefault()
- return;
- }
- e.preventDefault()
-
- ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
- ContextMenu.Instance.addItem({ description: "Fields", event: this.fieldsClicked })
- ContextMenu.Instance.addItem({ description: "Center", event: () => this.props.focus(this.props.Document) })
- ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) })
- ContextMenu.Instance.addItem({
- description: "Copy URL",
- event: () => {
- Utils.CopyText(ServerUtils.prepend("/doc/" + this.props.Document.Id));
- }
- });
- ContextMenu.Instance.addItem({
- description: "Copy ID",
- event: () => {
- Utils.CopyText(this.props.Document.Id);
- }
- });
- //ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
- ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
- if (!this.topMost) {
- // DocumentViews should stop propagation of this event
- e.stopPropagation();
- }
+ @action
+ onContextMenu = (e: React.MouseEvent): void => {
+ e.stopPropagation();
+ let moved = Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3;
+ if (moved || e.isDefaultPrevented()) {
+ e.preventDefault()
+ return;
+ }
+ e.preventDefault()
- ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
- ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
- SelectionManager.SelectDoc(this, e.ctrlKey);
+ ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+ ContextMenu.Instance.addItem({ description: "Fields", event: this.fieldsClicked })
+ ContextMenu.Instance.addItem({ description: "Center", event: () => this.props.focus(this.props.Document) })
+ ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) })
+ ContextMenu.Instance.addItem({
+ description: "Copy URL",
+ event: () => {
+ Utils.CopyText(ServerUtils.prepend("/doc/" + this.props.Document.Id));
+ }
+ });
+ ContextMenu.Instance.addItem({
+ description: "Copy ID",
+ event: () => {
+ Utils.CopyText(this.props.Document.Id);
+ }
+ });
+ //ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
+ ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+ if (!this.topMost) {
+ // DocumentViews should stop propagation of this event
+ e.stopPropagation();
}
+ ContextMenu.Instance.addItem({ description: "Pin to Presentation", event: () => PresentationView.Instance.PinDoc(this.props.Document) })
+ ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
+ ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+ SelectionManager.SelectDoc(this, e.ctrlKey);
+ }
- isSelected = () => {
- return SelectionManager.IsSelected(this);
- }
- select = (ctrlPressed: boolean) => {
- SelectionManager.SelectDoc(this, ctrlPressed)
- }
+ isSelected = () => {
+ return SelectionManager.IsSelected(this);
+ }
- render() {
- if (!this.props.Document) {
- return (null);
- }
- var scaling = this.props.ContentScaling();
- var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
- var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
- var backgroundcolor = this.props.Document.GetText(KeyStore.BackgroundColor, "");
- return (
- <div className="documentView-node" ref={this._mainCont}
- style={{
- background: backgroundcolor,
- width: nativeWidth > 0 ? nativeWidth.toString() + "px" : "100%",
- height: nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%",
- transformOrigin: "left top",
- transform: `scale(${scaling} , ${scaling})`
- }}
- onDrop={this.onDrop}
- onContextMenu={this.onContextMenu}
- onPointerDown={this.onPointerDown} >
- <DocumentContentsView {...this.props} isSelected={this.isSelected} select={this.select} layoutKey={KeyStore.Layout} />
- </div >
- )
+ select = (ctrlPressed: boolean) => {
+ SelectionManager.SelectDoc(this, ctrlPressed)
+ }
+
+ render() {
+ if (!this.props.Document) {
+ return (null);
}
+ var scaling = this.props.ContentScaling();
+ var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
+ var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
+ var backgroundcolor = this.props.Document.GetText(KeyStore.BackgroundColor, "");
+ return (
+ <div className="documentView-node" ref={this._mainCont}
+ style={{
+ background: backgroundcolor,
+ width: nativeWidth > 0 ? nativeWidth.toString() + "px" : "100%",
+ height: nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%",
+ transformOrigin: "left top",
+ transform: `scale(${scaling} , ${scaling})`
+ }}
+ onDrop={this.onDrop}
+ onContextMenu={this.onContextMenu}
+ onPointerDown={this.onPointerDown} >
+ <DocumentContentsView {...this.props} isSelected={this.isSelected} select={this.select} layoutKey={KeyStore.Layout} />
+ </div >
+ )
+ }
} \ No newline at end of file
diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts
index 1f039e592..f8c03b085 100644
--- a/src/fields/KeyStore.ts
+++ b/src/fields/KeyStore.ts
@@ -29,6 +29,7 @@ export namespace KeyStore {
export const Caption = new Key("Caption");
export const ActiveWorkspace = new Key("ActiveWorkspace");
export const DocumentText = new Key("DocumentText");
+ export const PresentationView = new Key("PresentationView");
export const BrushingDocs = new Key("BrushingDocs");
export const LinkedToDocs = new Key("LinkedToDocs");
export const LinkedFromDocs = new Key("LinkedFromDocs");
@@ -40,6 +41,7 @@ export namespace KeyStore {
export const AnnotationOn = new Key("AnnotationOn");
export const NumPages = new Key("NumPages");
export const Ink = new Key("Ink");
+ export const SelectedDoc = new Key("SelectedDoc");
export const Cursors = new Key("Cursors");
export const OptionalRightCollection = new Key("OptionalRightCollection");
export const Archives = new Key("Archives");
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-19 05:32:29 +0000