From 4bcc62fd164c5ee6c4fc50077753ba7d969478e3 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Thu, 14 Feb 2019 05:43:09 -0500 Subject: Got almost all of collaboration and server communication working --- src/client/views/Main.tsx | 138 +++++++++++---------- .../views/collections/CollectionFreeFormView.tsx | 21 ++-- src/client/views/nodes/DocumentView.tsx | 4 + 3 files changed, 88 insertions(+), 75 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 376876ebb..14e60409e 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -60,77 +60,79 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { // schemaDocs.push(doc2); // const doc7 = Documents.SchemaDocument(schemaDocs) -Utils.EmitCallback(Server.Socket, MessageStore.GetField, "dash", (res: any) => { - console.log("HELLO WORLD") - console.log("RESPONSE: " + res) - let mainContainer: Document = new Document(); - if (res) { - let obj = ServerUtils.FromJson(res) as Document - mainContainer = obj - console.log(mainContainer) - } - else { - const docset: Document[] = []; - let doc4 = Documents.CollectionDocument(docset, { - x: 0, y: 400, title: "mini collection" - }, true); - mainContainer = doc4; - let args = new DocumentTransfer(mainContainer.ToJson()) - Utils.Emit(Server.Socket, MessageStore.AddDocument, args) - } +const mainDocId = "mainDoc"; +Documents.initProtos(() => { + Utils.EmitCallback(Server.Socket, MessageStore.GetField, mainDocId, (res: any) => { + console.log("HELLO WORLD") + console.log("RESPONSE: " + res) + let mainContainer: Document; + if (res) { + let obj = ServerUtils.FromJson(res) as Document + mainContainer = obj + } + else { + const docset: Document[] = []; + let doc4 = Documents.CollectionDocument(docset, { + x: 0, y: 400, title: "mini collection" + }, mainDocId); + mainContainer = doc4; + let args = new DocumentTransfer(mainContainer.ToJson()) + Utils.Emit(Server.Socket, MessageStore.AddDocument, args) + } - let addImageNode = action(() => { - mainContainer.GetList(KeyStore.Data, []).push(Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { - x: 0, y: 300, width: 200, height: 200, title: "added note" - })); - }) - let addTextNode = action(() => { - mainContainer.GetList(KeyStore.Data, []).push(Documents.TextDocument({ - x: 0, y: 300, width: 200, height: 200, title: "added note" - })); - }) - let addColNode = action(() => { - mainContainer.GetList(KeyStore.Data, []).push(Documents.CollectionDocument([], { - x: 0, y: 300, width: 200, height: 200, title: "added note" - })); - }) + let addImageNode = action(() => { + mainContainer.GetList(KeyStore.Data, []).push(Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { + x: 0, y: 300, width: 200, height: 200, title: "added note" + })); + }) + let addTextNode = action(() => { + mainContainer.GetList(KeyStore.Data, []).push(Documents.TextDocument({ + x: 0, y: 300, width: 200, height: 200, title: "added note" + })); + }) + let addColNode = action(() => { + mainContainer.GetList(KeyStore.Data, []).push(Documents.CollectionDocument([], { + x: 0, y: 300, width: 200, height: 200, title: "added note" + })); + }) - let clearDatabase = action(() => { - Utils.Emit(Server.Socket, MessageStore.DeleteAll, {}); - }) + let clearDatabase = action(() => { + Utils.Emit(Server.Socket, MessageStore.DeleteAll, {}); + }) - ReactDOM.render(( -
- - - - - - - -
), - document.getElementById('root')); -}) + ReactDOM.render(( +
+ + + + + + + +
), + document.getElementById('root')); + }) +}); // let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { // x: 650, y: 500, width: 600, height: 600, title: "cat 2" // }); diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 9cf29d000..c7ead2f2f 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -17,7 +17,6 @@ import { FieldWaiting } from "../../../fields/Field"; @observer export class CollectionFreeFormView extends CollectionViewBase { public static LayoutString() { return CollectionViewBase.LayoutString("CollectionFreeFormView"); } - private _containerRef = React.createRef(); private _canvasRef = React.createRef(); private _nodeContainerRef = React.createRef(); private _lastX: number = 0; @@ -51,9 +50,13 @@ export class CollectionFreeFormView extends CollectionViewBase { e.stopPropagation(); } - componentDidMount() { - if (this._containerRef.current) { - DragManager.MakeDropTarget(this._containerRef.current, { + private dropDisposer?: DragManager.DragDropDisposer; + createDropTarget = (ele: HTMLDivElement) => { + if (this.dropDisposer) { + this.dropDisposer(); + } + if (ele) { + this.dropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.drop } @@ -174,7 +177,11 @@ export class CollectionFreeFormView extends CollectionViewBase { render() { const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; - const value: Document[] = Document.GetList(fieldKey, []); + // const value: Document[] = Document.GetList(fieldKey, []); + const lvalue = Document.GetT>(fieldKey, ListField); + if (!lvalue || lvalue === "") { + return

Error loading collection data

+ } const panx: number = Document.GetNumber(KeyStore.PanX, 0); const pany: number = Document.GetNumber(KeyStore.PanY, 0); const currScale: number = Document.GetNumber(KeyStore.Scale, 1); @@ -189,11 +196,11 @@ export class CollectionFreeFormView extends CollectionViewBase { onContextMenu={(e) => e.preventDefault()} onDrop={this.onDrop} onDragOver={this.onDragOver} - ref={this._containerRef}> + ref={this.createDropTarget}>
- {value.map(doc => { + {lvalue.Data.map(doc => { return (); })}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 730ce62f2..3df351c6c 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -128,6 +128,10 @@ export class DocumentView extends React.Component { render() { let bindings = { ...this.props } as any; + let lkeys = this.props.Document.GetT(KeyStore.LayoutKeys, ListField); + if (!lkeys || lkeys === "") { + return

Error loading layout keys

; + } for (const key of this.layoutKeys) { bindings[key.Name + "Key"] = key; // this maps string values of the form Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data } -- cgit v1.2.3-70-g09d2