aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/documents/Documents.ts10
-rw-r--r--src/client/views/Main.tsx60
-rw-r--r--src/client/views/PresentationView.scss37
-rw-r--r--src/client/views/PresentationView.tsx134
-rw-r--r--src/client/views/collections/CollectionTreeView.tsx1
-rw-r--r--src/client/views/nodes/DocumentView.tsx2
-rw-r--r--src/fields/KeyStore.ts1
7 files changed, 221 insertions, 24 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 9770e5cdc..2ea3cdfdb 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -11,6 +11,7 @@ import { CollectionView, CollectionViewType } from "../views/collections/Collect
import { FieldView } from "../views/nodes/FieldView";
import { HtmlField } from "../../fields/HtmlField";
import { WebView } from "../views/nodes/WebView";
+import { PresentationView } from "../views/PresentationView";
export interface DocumentOptions {
x?: number;
@@ -190,4 +191,13 @@ export namespace Documents {
export function DockDocument(config: string, options: DocumentOptions, id?: string) {
return CollectionDocument(config, CollectionViewType.Docking, options, id)
}
+
+ /*
+ export function PresentationDocument(documents: Array<Document>, options: DocumentOptions, id?: string) {
+ let doc = GetCollectionPrototype().MakeDelegate(id);
+ setupOptions(doc, options);
+ doc.SetData(KeyStore.Data, documents, ListField);
+ doc.SetNumber(KeyStore.ViewType, CollectionViewType);
+ return doc;
+ }*/
} \ No newline at end of file
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 7ef4b6132..3b03899d6 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -17,6 +17,8 @@ import { Transform } from '../util/Transform';
import { CollectionDockingView } from './collections/CollectionDockingView';
import { UndoManager } from '../util/UndoManager';
import { setupDrag } from '../util/DragManager';
+import { PresentationView } from './PresentationView';
+import { Field } from '../../fields/Field';
configure({
@@ -67,6 +69,9 @@ Documents.initProtos(() => {
mainContainer = Documents.DockDocument(JSON.stringify({ content: [{ type: 'row', content: [] }] }), { title: "main container" }, mainDocId);
Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainContainer.ToJson()))
+ //save a document for the presentation view in Key Store - this is where title is set
+ mainContainer.Set(KeyStore.PresentationView, Documents.FreeformDocument([], { title: "Presentation Mode" }));
+
setTimeout(() => {
mainfreeform = Documents.FreeformDocument([], { x: 0, y: 400, title: "mini collection" });
Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainfreeform.ToJson()));
@@ -77,6 +82,8 @@ Documents.initProtos(() => {
}, 0);
}
+
+
let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {}))
let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" }))
let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a feeform collection" }));
@@ -97,30 +104,35 @@ Documents.initProtos(() => {
let schemaRef = React.createRef<HTMLDivElement>();
let colRef = React.createRef<HTMLDivElement>();
- ReactDOM.render((
- <div style={{ position: "absolute", width: "100%", height: "100%" }}>
- <DocumentView Document={mainContainer}
- AddDocument={undefined} RemoveDocument={undefined} ScreenToLocalTransform={() => Transform.Identity}
- ContentScaling={() => 1}
- PanelWidth={() => 0}
- PanelHeight={() => 0}
- isTopMost={true}
- ContainingCollectionView={undefined} />
- <DocumentDecorations />
- <ContextMenu />
- <div style={{ position: 'absolute', bottom: '0px', left: '0px', width: '150px' }} ref={imgRef} >
- <button onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}>Add Image</button></div>
- <div style={{ position: 'absolute', bottom: '25px', left: '0px', width: '150px' }} ref={textRef}>
- <button onPointerDown={setupDrag(textRef, addTextNode)} onClick={addClick(addTextNode)}>Add Text</button></div>
- <div style={{ position: 'absolute', bottom: '50px', left: '0px', width: '150px' }} ref={colRef}>
- <button onPointerDown={setupDrag(colRef, addColNode)} onClick={addClick(addColNode)}>Add Collection</button></div>
- <div style={{ position: 'absolute', bottom: '75px', left: '0px', width: '150px' }} ref={schemaRef}>
- <button onPointerDown={setupDrag(schemaRef, addSchemaNode)} onClick={addClick(addSchemaNode)}>Add Schema</button></div>
- <button style={{ position: 'absolute', bottom: '100px', left: '0px', width: '150px' }} onClick={clearDatabase}>Clear Database</button>
- <button style={{ position: 'absolute', bottom: '25', right: '0px', width: '150px' }} onClick={() => UndoManager.Undo()}>Undo</button>
- <button style={{ position: 'absolute', bottom: '0', right: '0px', width: '150px' }} onClick={() => UndoManager.Redo()}>Redo</button>
- </div>),
- document.getElementById('root'));
+ let render = function (field: Field | undefined) {
+ ReactDOM.render((
+ <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+ <DocumentView Document={mainContainer}
+ AddDocument={undefined} RemoveDocument={undefined} ScreenToLocalTransform={() => Transform.Identity}
+ ContentScaling={() => 1}
+ PanelWidth={() => 0}
+ PanelHeight={() => 0}
+ isTopMost={true}
+ ContainingCollectionView={undefined} />
+ <DocumentDecorations />
+ <ContextMenu />
+ <PresentationView Document={field as Document} />
+ <div style={{ position: 'absolute', bottom: '0px', left: '0px', width: '150px' }} ref={imgRef} >
+ <button onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}>Add Image</button></div>
+ <div style={{ position: 'absolute', bottom: '25px', left: '0px', width: '150px' }} ref={textRef}>
+ <button onPointerDown={setupDrag(textRef, addTextNode)} onClick={addClick(addTextNode)}>Add Text</button></div>
+ <div style={{ position: 'absolute', bottom: '50px', left: '0px', width: '150px' }} ref={colRef}>
+ <button onPointerDown={setupDrag(colRef, addColNode)} onClick={addClick(addColNode)}>Add Collection</button></div>
+ <div style={{ position: 'absolute', bottom: '75px', left: '0px', width: '150px' }} ref={schemaRef}>
+ <button onPointerDown={setupDrag(schemaRef, addSchemaNode)} onClick={addClick(addSchemaNode)}>Add Schema</button></div>
+ <button style={{ position: 'absolute', bottom: '100px', left: '0px', width: '150px' }} onClick={clearDatabase}>Clear Database</button>
+ <button style={{ position: 'absolute', bottom: '25', right: '0px', width: '150px' }} onClick={() => UndoManager.Undo()}>Undo</button>
+ <button style={{ position: 'absolute', bottom: '0', right: '0px', width: '150px' }} onClick={() => UndoManager.Redo()}>Redo</button>
+ </div>),
+ document.getElementById('root'));
+ }
+ //call render async passing in the doc saved in PresentationView key
+ mainContainer.GetAsync(KeyStore.PresentationView, render);
})
});
// let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
diff --git a/src/client/views/PresentationView.scss b/src/client/views/PresentationView.scss
new file mode 100644
index 000000000..1a7934220
--- /dev/null
+++ b/src/client/views/PresentationView.scss
@@ -0,0 +1,37 @@
+.presentationView-cont {
+ position: absolute;
+ background: white;
+ z-index: 1;
+ box-shadow: #AAAAAA .2vw .2vw .4vw;
+ right: 0;
+ top:0;
+ bottom:0;
+}
+
+.presentationView-item {
+ width: 10vw;
+ 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-title {
+ margin-top: 0px;
+ padding-top: 3px;
+ padding-bottom: 3px;
+ height: 50px;
+ text-align: center;
+ background: lightseagreen;
+} \ 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..e8c86982d
--- /dev/null
+++ b/src/client/views/PresentationView.tsx
@@ -0,0 +1,134 @@
+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 { Documents } from '../documents/Documents';
+import "./PresentationView.scss"
+import { mobxPendingDecorators } from "mobx/lib/internal";
+
+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> {
+
+
+ /**
+ * 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);
+
+ // 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 {
+ return <li className="presentationView-item" key={document.Id}> //onClick={PresentationView.Instance.RemoveDoc(document)}>
+ {title.Data}</li>;
+ }
+ }
+
+ render() {
+ var 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;
+
+ 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);
+ }
+
+ //TODO: open presentation view if not already open
+ this.collapsed = false;
+ }
+
+ /**
+ * 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)
+
+ //TODO: do i need below lines??
+ // SelectionManager.DeselectAll()
+ // ContextMenu.Instance.clearItems()
+ // return true;
+ }
+ // return false
+
+ this.collapsed = true;
+ }
+
+ render() {
+ let titleStr = "Title";
+ let title = this.props.Document.GetT<TextField>(KeyStore.Title, TextField);
+ if (title && title !== "<Waiting>") {
+ titleStr = title.Data;
+ }
+ let width = this.collapsed ? 10 : 500;
+ return (
+ <div className="presentationView-cont" max-width={width}>
+ <div className="presentationView-title"><h2>{titleStr}</h2></div>
+ <ul>
+ <PresentationViewItem
+ Document={this.props.Document}
+ />
+ </ul>
+ </div>
+ );
+ }
+} \ No newline at end of file
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 55c804337..c0d6bd4f7 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -21,6 +21,7 @@ export interface TreeViewProps {
*/
class TreeView extends React.Component<TreeViewProps> {
+ //observable means render is re-called every time variable is changed
@observable
collapsed: boolean = false;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index feecde921..2158ff4f3 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -18,6 +18,7 @@ import { FormattedTextBox } from "../nodes/FormattedTextBox";
import { ImageBox } from "../nodes/ImageBox";
import "./DocumentView.scss";
import React = require("react");
+import { PresentationView } from "../PresentationView";
const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
export interface DocumentViewProps {
@@ -187,6 +188,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
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);
diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts
index a3b39735d..61a2a1ce2 100644
--- a/src/fields/KeyStore.ts
+++ b/src/fields/KeyStore.ts
@@ -26,4 +26,5 @@ export namespace KeyStore {
export const Caption = new Key("Caption");
export const ActiveFrame = new Key("ActiveFrame");
export const DocumentText = new Key("DocumentText");
+ export const PresentationView = new Key("PresentationView");
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 11:29:05 +0000