diff options
Diffstat (limited to 'src')
37 files changed, 1634 insertions, 367 deletions
diff --git a/src/Utils.ts b/src/Utils.ts index cc1d8f6c6..c9c006aa8 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -1,14 +1,25 @@ import v4 = require('uuid/v4'); import v5 = require("uuid/v5"); +import { Socket } from 'socket.io'; +import { Message, Types } from './server/Message'; +import { Field } from './fields/Field'; +import { TextField } from './fields/TextField'; +import { NumberField } from './fields/NumberField'; +import { RichTextField } from './fields/RichTextField'; +import { Key } from './fields/Key'; +import { ImageField } from './fields/ImageField'; +import { ListField } from './fields/ListField'; +import { Document } from './fields/Document'; +import { Server } from './client/Server'; export class Utils { public static GenerateGuid(): string { - return v4(); + return v4() } public static GenerateDeterministicGuid(seed: string): string { - return v5(seed, v5.URL); + return v5(seed, v5.URL) } public static GetScreenTransform(ele: HTMLElement): { scale: number, translateX: number, translateY: number } { @@ -19,4 +30,32 @@ export class Utils { return { scale, translateX, translateY }; } + + public static CopyText(text: string) { + var textArea = document.createElement("textarea"); + textArea.value = text; + document.body.appendChild(textArea); + textArea.focus(); + textArea.select(); + + try { document.execCommand('copy'); } catch (err) { } + + document.body.removeChild(textArea); + } + + public static Emit<T>(socket: Socket | SocketIOClient.Socket, message: Message<T>, args: T) { + socket.emit(message.Message, args); + } + + public static EmitCallback<T>(socket: Socket | SocketIOClient.Socket, message: Message<T>, args: T, fn: (args: any) => any) { + socket.emit(message.Message, args, fn); + } + + public static AddServerHandler<T>(socket: Socket, message: Message<T>, handler: (args: T) => any) { + socket.on(message.Message, handler); + } + + public static AddServerHandlerCallback<T>(socket: Socket, message: Message<T>, handler: (args: [T, (res: any) => any]) => any) { + socket.on(message.Message, (arg: T, fn: (res: any) => any) => handler([arg, fn])); + } }
\ No newline at end of file diff --git a/src/client/Server.ts b/src/client/Server.ts index 0cb6e17c2..3e61729ab 100644 --- a/src/client/Server.ts +++ b/src/client/Server.ts @@ -1,40 +1,74 @@ -import { Field, FieldWaiting, FieldId, FIELD_WAITING, FieldValue, Opt } from "../fields/Field" -import { Key, KeyStore } from "../fields/Key" -import { ObservableMap, action } from "mobx"; +import { Key } from "../fields/Key" +import { ObservableMap, action, reaction } from "mobx"; +import { Field, FieldWaiting, FIELD_WAITING, Opt, FieldId } from "../fields/Field" import { Document } from "../fields/Document" import { SocketStub } from "./SocketStub"; +import * as OpenSocket from 'socket.io-client'; +import { Utils } from "./../Utils"; +import { MessageStore, Types } from "./../server/Message"; export class Server { - private static ClientFieldsCached: ObservableMap<FieldId, Field | FIELD_WAITING> = new ObservableMap(); + public static ClientFieldsCached: ObservableMap<FieldId, Field | FIELD_WAITING> = new ObservableMap(); + static Socket: SocketIOClient.Socket = OpenSocket("http://localhost:1234"); + static GUID: string = Utils.GenerateGuid() + // Retrieves the cached value of the field and sends a request to the server for the real value (if it's not cached). // Call this is from within a reaction and test whether the return value is FieldWaiting. // 'hackTimeout' is here temporarily for simplicity when debugging things. - public static GetField(fieldid: FieldId, callback: (field: Field) => void = (f) => { }, hackTimeout: number = -1) { - if (!this.ClientFieldsCached.get(fieldid)) { + public static GetField(fieldid: FieldId, callback: (field: Opt<Field>) => void): Opt<Field> | FIELD_WAITING { + let cached = this.ClientFieldsCached.get(fieldid); + if (!cached) { this.ClientFieldsCached.set(fieldid, FieldWaiting); - //simulating a server call with a registered callback action - SocketStub.SEND_FIELD_REQUEST(fieldid, - action((field: Field) => callback(Server.cacheField(field))), - hackTimeout); - } else if (this.ClientFieldsCached.get(fieldid) != FieldWaiting) { - callback(this.ClientFieldsCached.get(fieldid) as Field); + SocketStub.SEND_FIELD_REQUEST(fieldid, action((field: Field | undefined) => { + let cached = this.ClientFieldsCached.get(fieldid); + if (cached != FieldWaiting) + callback(cached); + else { + if (field) { + this.ClientFieldsCached.set(fieldid, field); + } else { + this.ClientFieldsCached.delete(fieldid) + } + callback(field) + } + })); + } else if (cached != FieldWaiting) { + callback(cached); + } else { + reaction(() => { + return this.ClientFieldsCached.get(fieldid); + }, (field, reaction) => { + if (field !== "<Waiting>") { + callback(field) + reaction.dispose() + } + }) } - return this.ClientFieldsCached.get(fieldid); + return cached; } - static times = 0; // hack for testing - public static GetDocumentField(doc: Document, key: Key): FieldValue<Field> { - var hackTimeout: number = key == KeyStore.Data ? (this.times++ == 0 ? 5000 : 1000) : key == KeyStore.X ? 2500 : 500; + public static GetFields(fieldIds: FieldId[], callback: (fields: { [id: string]: Field }) => any) { + SocketStub.SEND_FIELDS_REQUEST(fieldIds, (fields) => { + for (let key in fields) { + let field = fields[key]; + if (!this.ClientFieldsCached.has(field.Id)) { + this.ClientFieldsCached.set(field.Id, field) + } + } + callback(fields) + }); + } - let fieldId = doc._proxies.get(key); - if (fieldId) { - return this.GetField(fieldId, - action((fieldfromserver: Field) => { - doc._proxies.delete(key); - doc.fields.set(key, fieldfromserver); - }) - , hackTimeout); + public static GetDocumentField(doc: Document, key: Key) { + let field = doc._proxies.get(key.Id); + if (field) { + this.GetField(field, + action((fieldfromserver: Opt<Field>) => { + if (fieldfromserver) { + doc.fields.set(key.Id, { key, field: fieldfromserver }); + } + })); } } @@ -42,13 +76,22 @@ export class Server { SocketStub.SEND_ADD_DOCUMENT(document); } public static AddDocumentField(doc: Document, key: Key, value: Field) { + console.log("Add doc field " + doc.Title + " " + key.Name + " fid " + value.Id + " " + value); SocketStub.SEND_ADD_DOCUMENT_FIELD(doc, key, value); } public static DeleteDocumentField(doc: Document, key: Key) { SocketStub.SEND_DELETE_DOCUMENT_FIELD(doc, key); } - public static SetFieldValue(field: Field, value: any) { - SocketStub.SEND_SET_FIELD(field, value); + + public static UpdateField(field: Field) { + if (!this.ClientFieldsCached.has(field.Id)) { + this.ClientFieldsCached.set(field.Id, field) + } + SocketStub.SEND_SET_FIELD(field); + } + + static connected(message: string) { + Server.Socket.emit(MessageStore.Bar.Message, Server.GUID); } @action @@ -61,4 +104,18 @@ export class Server { } return this.ClientFieldsCached.get(clientField.Id) as Field; } + + @action + static updateField(field: { _id: string, data: any, type: Types }) { + if (Server.ClientFieldsCached.has(field._id)) { + var f = Server.ClientFieldsCached.get(field._id); + if (f && f != FieldWaiting) { + f.UpdateFromServer(field.data); + f.init(() => { }); + } + } + } } + +Server.Socket.on(MessageStore.Foo.Message, Server.connected); +Server.Socket.on(MessageStore.SetField.Message, Server.updateField);
\ No newline at end of file diff --git a/src/client/SocketStub.ts b/src/client/SocketStub.ts index cea30cb8b..18df4ca0a 100644 --- a/src/client/SocketStub.ts +++ b/src/client/SocketStub.ts @@ -1,7 +1,11 @@ -import { Field, FieldId } from "../fields/Field" -import { Key, KeyStore } from "../fields/Key" -import { ObservableMap, action } from "mobx"; +import { Key } from "../fields/Key" +import { Field, FieldId, Opt } from "../fields/Field" +import { ObservableMap } from "mobx"; import { Document } from "../fields/Document" +import { MessageStore, DocumentTransfer } from "../server/Message"; +import { Utils } from "../Utils"; +import { Server } from "./Server"; +import { ServerUtils } from "../server/ServerUtil"; export class SocketStub { @@ -12,33 +16,46 @@ export class SocketStub { // ...SOCKET(ADD_DOCUMENT, serialied document) // server stores each document field in its repository of stored fields - document.fields.forEach((f, key) => this.FieldStore.set((f as Field).Id, f as Field)); - - // server stores stripped down document (w/ only field id proxies) in the field store - this.FieldStore.set(document.Id, new Document(document.Id)); - document.fields.forEach((f, key) => (this.FieldStore.get(document.Id) as Document)._proxies.set(key, (f as Field).Id)); + // document.fields.forEach((f, key) => this.FieldStore.set((f as Field).Id, f as Field)); + // let strippedDoc = new Document(document.Id); + // document.fields.forEach((f, key) => { + // if (f) { + // // let args: SetFieldArgs = new SetFieldArgs(f.Id, f.GetValue()) + // let args: Transferable = f.ToJson() + // Utils.Emit(Server.Socket, MessageStore.SetField, args) + // } + // }) + + // // server stores stripped down document (w/ only field id proxies) in the field store + // this.FieldStore.set(document.Id, new Document(document.Id)); + // document.fields.forEach((f, key) => (this.FieldStore.get(document.Id) as Document)._proxies.set(key.Id, (f as Field).Id)); + + console.log("sending " + document.Title); + Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(document.ToJson())) } - public static SEND_FIELD_REQUEST(fieldid: FieldId, callback: (field: Field) => void, timeout: number) { - - if (timeout < 0)// this is a hack to make things easier to setup until we have a server... won't be neededa fter that. - callback(this.FieldStore.get(fieldid) as Field); - else { // actual logic here... - - // Send a request for fieldid to the server - // ...SOCKET(RETRIEVE_FIELD, fieldid) - - // server responds (simulated with a timeout) and the callback is invoked - setTimeout(() => - - // when the field data comes back, call the callback() function - callback(this.FieldStore.get(fieldid) as Field), - - - timeout); + public static SEND_FIELD_REQUEST(fieldid: FieldId, callback: (field: Opt<Field>) => void) { + if (fieldid) { + Utils.EmitCallback(Server.Socket, MessageStore.GetField, fieldid, (field: any) => { + if (field) { + ServerUtils.FromJson(field).init(callback); + } else { + callback(undefined); + } + }) } } + public static SEND_FIELDS_REQUEST(fieldIds: FieldId[], callback: (fields: { [key: string]: Field }) => any) { + Utils.EmitCallback(Server.Socket, MessageStore.GetFields, fieldIds, (fields: any[]) => { + let fieldMap: any = {}; + for (let field of fields) { + fieldMap[field._id] = ServerUtils.FromJson(field); + } + callback(fieldMap) + }); + } + public static SEND_ADD_DOCUMENT_FIELD(doc: Document, key: Key, value: Field) { // Send a serialized version of the field to the server along with the @@ -49,10 +66,11 @@ export class SocketStub { // server updates its document to hold a proxy mapping from key => fieldId var document = this.FieldStore.get(doc.Id) as Document; if (document) - document._proxies.set(key, value.Id); + document._proxies.set(key.Id, value.Id); // server adds the field to its repository of fields this.FieldStore.set(value.Id, value); + // Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(doc.ToJson())) } public static SEND_DELETE_DOCUMENT_FIELD(doc: Document, key: Key) { @@ -63,16 +81,15 @@ export class SocketStub { // Server removes the field id from the document's list of field proxies var document = this.FieldStore.get(doc.Id) as Document; if (document) - document._proxies.delete(key); + document._proxies.delete(key.Id); } - public static SEND_SET_FIELD(field: Field, value: any) { + public static SEND_SET_FIELD(field: Field) { // Send a request to set the value of a field // ...SOCKET(SET_FIELD, field id, serialized field value) // Server updates the value of the field in its fieldstore - if (this.FieldStore.get(field.Id)) - this.FieldStore.get(field.Id)!.TrySetValue(value); + Utils.Emit(Server.Socket, MessageStore.SetField, field.ToJson()) } } diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index f954b37a8..920068273 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -1,6 +1,6 @@ import { Document } from "../../fields/Document"; import { Server } from "../Server"; -import { KeyStore } from "../../fields/Key"; +import { KeyStore } from "../../fields/KeyStore"; import { TextField } from "../../fields/TextField"; import { NumberField } from "../../fields/NumberField"; import { ListField } from "../../fields/ListField"; @@ -23,26 +23,37 @@ interface DocumentOptions { } export namespace Documents { + export function initProtos(callback: () => void) { + Server.GetFields([collectionProtoId, textProtoId, imageProtoId, schemaProtoId, dockProtoId], (fields) => { + collectionProto = fields[collectionProtoId] as Document; + imageProto = fields[imageProtoId] as Document; + textProto = fields[textProtoId] as Document; + dockProto = fields[dockProtoId] as Document; + schemaProto = fields[schemaProtoId] as Document; + callback() + }); + } + function setupOptions(doc: Document, options: DocumentOptions): void { - if (options.x) { + if (options.x !== undefined) { doc.SetData(KeyStore.X, options.x, NumberField); } - if (options.y) { + if (options.y !== undefined) { doc.SetData(KeyStore.Y, options.y, NumberField); } - if (options.width) { + if (options.width !== undefined) { doc.SetData(KeyStore.Width, options.width, NumberField); } - if (options.height) { + if (options.height !== undefined) { doc.SetData(KeyStore.Height, options.height, NumberField); } - if (options.nativeWidth) { + if (options.nativeWidth !== undefined) { doc.SetData(KeyStore.NativeWidth, options.nativeWidth, NumberField); } - if (options.nativeHeight) { + if (options.nativeHeight !== undefined) { doc.SetData(KeyStore.NativeHeight, options.nativeHeight, NumberField); } - if (options.title) { + if (options.title !== undefined) { doc.SetData(KeyStore.Title, options.title, TextField); } doc.SetData(KeyStore.Scale, 1, NumberField); @@ -51,9 +62,10 @@ export namespace Documents { } let textProto: Document; + const textProtoId = "textProto"; function GetTextPrototype(): Document { if (!textProto) { - textProto = new Document(); + textProto = new Document(textProtoId); textProto.Set(KeyStore.X, new NumberField(0)); textProto.Set(KeyStore.Y, new NumberField(0)); textProto.Set(KeyStore.Width, new NumberField(300)); @@ -72,9 +84,10 @@ export namespace Documents { } let schemaProto: Document; + const schemaProtoId = "schemaProto"; function GetSchemaPrototype(): Document { if (!schemaProto) { - schemaProto = new Document(); + schemaProto = new Document(schemaProtoId); schemaProto.Set(KeyStore.X, new NumberField(0)); schemaProto.Set(KeyStore.Y, new NumberField(0)); schemaProto.Set(KeyStore.Width, new NumberField(300)); @@ -94,6 +107,7 @@ export namespace Documents { let dockProto: Document; + const dockProtoId = "dockProto"; function GetDockPrototype(): Document { if (!dockProto) { dockProto = new Document(); @@ -107,19 +121,19 @@ export namespace Documents { return dockProto; } - export function DockDocument(config: string, options: DocumentOptions = {}): Document { - let doc = GetDockPrototype().MakeDelegate(); + export function DockDocument(config: string, options: DocumentOptions = {}, id?: string): Document { + let doc = GetDockPrototype().MakeDelegate(id); setupOptions(doc, options); doc.SetText(KeyStore.Data, config); return doc; } - let imageProtoId: FieldId; + let imageProto: Document; + const imageProtoId = "imageProto"; function GetImagePrototype(): Document { - if (imageProtoId === undefined) { - let imageProto = new Document(); - imageProtoId = imageProto.Id; + if (!imageProto) { + imageProto = new Document(imageProtoId); imageProto.Set(KeyStore.Title, new TextField("IMAGE PROTO")); imageProto.Set(KeyStore.X, new NumberField(0)); imageProto.Set(KeyStore.Y, new NumberField(0)); @@ -131,10 +145,9 @@ export namespace Documents { imageProto.Set(KeyStore.BackgroundLayout, new TextField(ImageBox.LayoutString())); // imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />')); imageProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data, KeyStore.Annotations])); - Server.AddDocument(imageProto); return imageProto; } - return Server.GetField(imageProtoId) as Document; + return imageProto; } export function ImageDocument(url: string, options: DocumentOptions = {}): Document { @@ -143,17 +156,15 @@ export namespace Documents { doc.Set(KeyStore.Data, new ImageField(new URL(url))); let annotation = Documents.TextDocument({ title: "hello" }); - Server.AddDocument(annotation); doc.Set(KeyStore.Annotations, new ListField([annotation])); - Server.AddDocument(doc); - var sdoc = Server.GetField(doc.Id) as Document; - return sdoc; + return doc; } let collectionProto: Document; + const collectionProtoId = "collectionProto"; function GetCollectionPrototype(): Document { if (!collectionProto) { - collectionProto = new Document(); + collectionProto = new Document(collectionProtoId); collectionProto.Set(KeyStore.X, new NumberField(0)); collectionProto.Set(KeyStore.Y, new NumberField(0)); collectionProto.Set(KeyStore.Scale, new NumberField(1)); @@ -167,9 +178,8 @@ export namespace Documents { return collectionProto; } - export function CollectionDocument(documents: Array<Document>, options: DocumentOptions = {}): Document { - let doc = GetCollectionPrototype().MakeDelegate(); - Server.AddDocument(doc); + export function CollectionDocument(documents: Array<Document>, options: DocumentOptions = {}, id?: string): Document { + let doc = GetCollectionPrototype().MakeDelegate(id); setupOptions(doc, options); doc.Set(KeyStore.Data, new ListField(documents)); return doc; diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts index 6bc5fa412..befb9df4c 100644 --- a/src/client/util/Scripting.ts +++ b/src/client/util/Scripting.ts @@ -6,7 +6,7 @@ import { NumberField as NumberFieldImport, NumberField } from "../../fields/Numb import { ImageField as ImageFieldImport } from "../../fields/ImageField"; import { TextField as TextFieldImport, TextField } from "../../fields/TextField"; import { RichTextField as RichTextFieldImport } from "../../fields/RichTextField"; -import { KeyStore as KeyStoreImport } from "../../fields/Key"; +import { KeyStore as KeyStoreImport } from "../../fields/KeyStore"; export interface ExecutableScript { (): any; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index d385bcdef..770433e27 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -4,7 +4,7 @@ import { SelectionManager } from "../util/SelectionManager"; import { observer } from "mobx-react"; import './DocumentDecorations.scss' import { CollectionFreeFormView } from "./collections/CollectionFreeFormView"; -import { KeyStore } from '../../fields/Key' +import { KeyStore } from '../../fields/KeyStore' import { NumberField } from "../../fields/NumberField"; @observer @@ -23,8 +23,7 @@ export class DocumentDecorations extends React.Component { @computed get Bounds(): { x: number, y: number, b: number, r: number } { return SelectionManager.SelectedDocuments().reduce((bounds, element) => { - if (element.props.ContainingCollectionView != undefined && - !(element.props.ContainingCollectionView instanceof CollectionFreeFormView)) { + if (element.props.isTopMost) { return bounds; } let transform = element.props.ScreenToLocalTransform().inverse(); @@ -111,32 +110,27 @@ export class DocumentDecorations extends React.Component { SelectionManager.SelectedDocuments().forEach(element => { const rect = element.screenRect; - // if (rect.width !== 0) { - // let scale = element.width / rect.width; - // let actualdW = Math.max(element.width + (dW * scale), 20); - // let actualdH = Math.max(element.height + (dH * scale), 20); - // element.x += dX * (actualdW - element.width); - // element.y += dY * (actualdH - element.height); - // if (Math.abs(dW) > Math.abs(dH)) - // element.width = actualdW; - // else - // element.height = actualdH; - // } if (rect.width !== 0) { let doc = element.props.Document; let width = doc.GetOrCreate(KeyStore.Width, NumberField); let height = doc.GetOrCreate(KeyStore.Height, NumberField); let x = doc.GetOrCreate(KeyStore.X, NumberField); - let y = doc.GetOrCreate(KeyStore.X, NumberField); + let y = doc.GetOrCreate(KeyStore.Y, NumberField); let scale = width.Data / rect.width; let actualdW = Math.max(width.Data + (dW * scale), 20); let actualdH = Math.max(height.Data + (dH * scale), 20); x.Data += dX * (actualdW - width.Data); y.Data += dY * (actualdH - height.Data); - if (Math.abs(dW) > Math.abs(dH)) - width.Data = actualdW; - else - height.Data = actualdH; + var nativeWidth = doc.GetNumber(KeyStore.NativeWidth, 0); + var nativeHeight = doc.GetNumber(KeyStore.NativeHeight, 0); + if (nativeWidth > 0 && nativeHeight > 0) { + if (Math.abs(dW) > Math.abs(dH)) + actualdH = nativeHeight / nativeWidth * actualdW; + else + actualdW = nativeWidth / nativeHeight * actualdH; + } + width.Data = actualdW; + height.Data = actualdH; } }) } @@ -170,7 +164,6 @@ export class DocumentDecorations extends React.Component { <div id="documentDecorations-bottomLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div> <div id="documentDecorations-bottomResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div> <div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div> - </div> ) } diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index a86fdb9b0..f44ad0a74 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -1,28 +1,26 @@ -import { action, configure } from 'mobx'; +import { action, configure, reaction, computed } from 'mobx'; import "normalize.css"; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { DocumentDecorations } from './DocumentDecorations'; import { Documents } from '../documents/Documents'; import { Document } from '../../fields/Document'; -import { KeyStore, KeyStore as KS } from '../../fields/Key'; -import { ListField } from '../../fields/ListField'; -import { NumberField } from '../../fields/NumberField'; -import { TextField } from '../../fields/TextField'; +import { KeyStore } from '../../fields/KeyStore'; import "./Main.scss"; import { ContextMenu } from './ContextMenu'; import { DocumentView } from './nodes/DocumentView'; -import { ImageField } from '../../fields/ImageField'; +import { Server } from '../Server'; +import { Utils } from '../../Utils'; +import { ServerUtils } from '../../server/ServerUtil'; +import { MessageStore, DocumentTransfer } from '../../server/Message'; import { Transform } from '../util/Transform'; import { CollectionDockingView } from './collections/CollectionDockingView'; +import { FieldWaiting } from '../../fields/Field'; configure({ enforceActions: "observed" }); - -const mainNodeCollection = new Array<Document>(); - window.addEventListener("drop", function (e) { e.preventDefault(); }, false) @@ -36,50 +34,124 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { }), true) -let doc1 = Documents.TextDocument({ title: "hello", width: 400, height: 300 }); -let doc2 = doc1.MakeDelegate(); -doc2.Set(KS.X, new NumberField(150)); -doc2.Set(KS.Y, new NumberField(20)); -let doc3 = Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", { - x: 450, y: 100, title: "dog", width: 606, height: 386, nativeWidth: 606, nativeHeight: 386 -}); -//doc3.Set(KeyStore.Data, new ImageField); -const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", { - x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v, nativeWidth: 606, nativeHeight: 386 -})); -schemaDocs.push(doc3); -schemaDocs[0].SetData(KS.Author, "Tyler", TextField); -schemaDocs[4].SetData(KS.Author, "Bob", TextField); -schemaDocs.push(doc2); -const doc7 = Documents.SchemaDocument(schemaDocs) -const docset = [doc1, doc2, doc3, doc7]; -let doc4 = Documents.CollectionDocument(docset, { - x: 0, y: 400, title: "mini collection" +//runInAction(() => +// let doc1 = Documents.TextDocument({ title: "hello" }); +// let doc2 = doc1.MakeDelegate(); +// doc2.Set(KS.X, new NumberField(150)); +// doc2.Set(KS.Y, new NumberField(20)); +// let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { +// x: 450, y: 100, title: "cat 1" +// }); +// doc3.Set(KeyStore.Data, new ImageField); +// const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { +// x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v +// })); +// schemaDocs[0].SetData(KS.Author, "Tyler", TextField); +// schemaDocs[4].SetData(KS.Author, "Bob", TextField); +// schemaDocs.push(doc2); +// const doc7 = Documents.SchemaDocument(schemaDocs) + +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; + let mainfreeform: Document; + if (res) { + mainContainer = ServerUtils.FromJson(res) as Document; + var mainfreeformid = mainContainer._proxies.get(KeyStore.ActiveFrame.Id)!; + Server.GetField(mainfreeformid, (field) => { + if (field) { + mainfreeform = field as Document; + } + }) + mainfreeform = mainContainer.Get(KeyStore.ActiveFrame) as Document; + } + else { + mainfreeform = Documents.CollectionDocument([], { x: 0, y: 400, title: "mini collection" }); + Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainfreeform.ToJson())); + + var docs = [mainfreeform].map(doc => CollectionDockingView.makeDocumentConfig(doc)); + var config = { settings: { selectionEnabled: false }, content: [{ type: 'row', content: docs }] }; + mainContainer = Documents.DockDocument(JSON.stringify(config), { title: "main container" }, mainDocId); + Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainContainer.ToJson())) + mainContainer.Set(KeyStore.ActiveFrame, mainfreeform); + } + + let addImageNode = action(() => { + mainfreeform.GetList<Document>(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(() => { + mainfreeform.GetList<Document>(KeyStore.Data, []).push(Documents.TextDocument({ + x: 0, y: 300, width: 200, height: 200, title: "added note" + })); + }) + let addColNode = action(() => { + mainfreeform.GetList<Document>(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, {}); + }) + + ReactDOM.render(( + <div style={{ position: "absolute", width: "100%", height: "100%" }}> + <DocumentView Document={mainContainer} + AddDocument={undefined} RemoveDocument={undefined} ScreenToLocalTransform={() => Transform.Identity} + Scaling={1} + isTopMost={true} + ContainingCollectionView={undefined} /> + <DocumentDecorations /> + <ContextMenu /> + <button style={{ + position: 'absolute', + bottom: '0px', + left: '0px', + width: '150px' + }} onClick={addImageNode}>Add Image</button> + <button style={{ + position: 'absolute', + bottom: '25px', + left: '0px', + width: '150px' + }} onClick={addTextNode}>Add Text</button> + <button style={{ + position: 'absolute', + bottom: '50px', + left: '0px', + width: '150px' + }} onClick={addColNode}>Add Collection</button> + <button style={{ + position: 'absolute', + bottom: '75px', + left: '0px', + width: '150px' + }} onClick={clearDatabase}>Clear Database</button> + </div>), + 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" // }); -let docset2 = [doc3, doc4, doc2]; -let doc6 = Documents.CollectionDocument(docset2, { - x: 350, y: 100, width: 600, height: 600, title: "docking collection" -}); - -var docs = [doc4, doc3, doc6].map(doc => CollectionDockingView.makeDocumentConfig(doc)); -var config = { - settings: { selectionEnabled: false }, content: [{ type: 'row', content: docs }] -}; -let mainContainer = Documents.DockDocument(JSON.stringify(config), { - x: 0, y: 0, title: "main container" -}) - -ReactDOM.render(( - <div style={{ position: "absolute", width: "100%", height: "100%" }}> - <DocumentView Document={mainContainer} - AddDocument={undefined} RemoveDocument={undefined} ScreenToLocalTransform={() => Transform.Identity} - Scaling={1} - isTopMost={true} - ContainingCollectionView={undefined} /> - <DocumentDecorations /> - <ContextMenu /> - </div>), - document.getElementById('root'));
\ No newline at end of file +// let docset2 = new Array<Document>(doc4);//, doc1, doc3); +// let doc6 = Documents.CollectionDocument(docset2, { +// x: 350, y: 100, width: 600, height: 600, title: "docking collection" +// }); +// let mainNodes = mainContainer.GetOrCreate(KeyStore.Data, ListField); +// mainNodes.Data.push(doc6); +// mainNodes.Data.push(doc2); +// mainNodes.Data.push(doc4); +// mainNodes.Data.push(doc3); +// mainNodes.Data.push(doc5); +// mainNodes.Data.push(doc1); +//mainNodes.Data.push(doc2); +//mainNodes.Data.push(doc6); +// mainContainer.Set(KeyStore.Data, mainNodes); +//} +//); diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 885a4bece..ceb638ab4 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -1,21 +1,23 @@ import * as GoldenLayout from "golden-layout"; import 'golden-layout/src/css/goldenlayout-base.css'; import 'golden-layout/src/css/goldenlayout-dark-theme.css'; -import { action, computed, reaction, observable } from "mobx"; -import { observer } from "mobx-react"; -import { Document } from "../../../fields/Document"; -import { KeyStore } from "../../../fields/Key"; -import { ListField } from "../../../fields/ListField"; +import { action, computed, observable, reaction, trace } from "mobx"; import { DragManager } from "../../util/DragManager"; import { DocumentView } from "../nodes/DocumentView"; +import { Document } from "../../../fields/Document"; import "./CollectionDockingView.scss"; -import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; +import { CollectionViewBase, COLLECTION_BORDER_WIDTH, CollectionViewProps } from "./CollectionViewBase"; import React = require("react"); import * as ReactDOM from 'react-dom'; import Measure from "react-measure"; import { Utils } from "../../../Utils"; -import { FieldId } from "../../../fields/Field"; +import { FieldId, FieldWaiting, Field } from "../../../fields/Field"; import { Server } from "../../Server"; +import { observer } from "mobx-react"; +import { ListField } from "../../../fields/ListField"; +import { KeyStore } from "../../../fields/KeyStore"; +import { Opt } from "../../../fields/Field"; +import { TextField } from "../../../fields/TextField"; @observer export class CollectionDockingView extends CollectionViewBase { @@ -41,6 +43,7 @@ export class CollectionDockingView extends CollectionViewBase { private _containerRef = React.createRef<HTMLDivElement>(); private _makeFullScreen: boolean = false; private _maximizedStack: any = null; + private _forceRecreate: boolean = false; constructor(props: CollectionViewProps) { super(props); @@ -91,16 +94,10 @@ export class CollectionDockingView extends CollectionViewBase { type: 'stack', content: [CollectionDockingView.makeDocumentConfig(document)] }; - var newContentItem = new this._goldenLayout._typeToItem[newItemStackConfig.type](this._goldenLayout, newItemStackConfig, parent); + var newContentItem = new this._goldenLayout._typeToItem[newItemStackConfig.type](this._goldenLayout, newItemStackConfig, null); if (this._goldenLayout.root.contentItems[0].isRow) { - var rowlayout = this._goldenLayout.root.contentItems[0]; - var lastRowItem = rowlayout.contentItems[rowlayout.contentItems.length - 1]; - - lastRowItem.config["width"] *= 0.5; - newContentItem.config["width"] = lastRowItem.config["width"]; - rowlayout.addChild(newContentItem, rowlayout.contentItems.length, true); - rowlayout.callDownwards('setSize'); + this._goldenLayout.root.contentItems[0].addChild(newContentItem); } else { var collayout = this._goldenLayout.root.contentItems[0]; @@ -112,19 +109,35 @@ export class CollectionDockingView extends CollectionViewBase { collayout.config["width"] = 50; newContentItem.config["width"] = 50; - collayout.parent.callDownwards('setSize'); } + this.stateChanged(); // shouldn't need to do either of these ... but our react component doesn't render when we add it manually like this. + this.setupGoldenLayout(true); // this forces it to render by the brute force method of recreating the whole golden layout } - componentDidMount: () => void = () => { - if (this._containerRef.current) { - - this._goldenLayout = new GoldenLayout(JSON.parse(this.props.Document.GetText(KeyStore.Data, ""))); + setupGoldenLayout(force: boolean = false) { + var config = this.props.Document.GetText(KeyStore.Data, ""); + if (config) { + if (!this._goldenLayout) + this._goldenLayout = new GoldenLayout(JSON.parse(config)); + else { + if (!force && JSON.stringify(this._goldenLayout.toConfig()) == JSON.stringify(JSON.parse(config))) + return; + this._goldenLayout.destroy(); + this._goldenLayout = new GoldenLayout(JSON.parse(config)); + } this._goldenLayout.on('tabCreated', this.tabCreated); this._goldenLayout.on('stackCreated', this.stackCreated); this._goldenLayout.registerComponent('DocumentFrameRenderer', DockedFrameRenderer); this._goldenLayout.container = this._containerRef.current; this._goldenLayout.init(); + this._goldenLayout.on('stateChanged', this.stateChanged); + } + } + componentDidMount: () => void = () => { + if (this._containerRef.current) { + reaction( + () => this.props.Document.GetText(KeyStore.Data, ""), + () => this.setupGoldenLayout(), { fireImmediately: true }); window.addEventListener('resize', this.onResize); // bcz: would rather add this event to the parent node, but resize events only come from Window } @@ -134,7 +147,7 @@ export class CollectionDockingView extends CollectionViewBase { } @action onResize = (event: any) => { - var cur = this.props.ContainingDocumentView!.MainContent.current; + var cur = this._containerRef.current; // bcz: since GoldenLayout isn't a React component itself, we need to notify it to resize when its document container's size has changed this._goldenLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height); @@ -152,21 +165,26 @@ export class CollectionDockingView extends CollectionViewBase { } } + stateChanged = () => { + // if (!this._pointerIsDown) { + var json = JSON.stringify(this._goldenLayout.toConfig()); + this.props.Document.SetText(KeyStore.Data, json) + //} + } + tabCreated = (tab: any) => { - { - if (this._dragDiv) { - this._dragDiv.removeChild(this._dragElement); - this._dragParent!.removeChild(this._dragFakeElement!); - this._dragParent!.appendChild(this._dragElement!); - DragManager.Root().removeChild(this._dragDiv); - this._dragDiv = null; - } - //tab.setTitle(tab.contentItem.config.componentState.title); - tab.closeElement.off('click') //unbind the current click handler - .click(function () { - tab.contentItem.remove(); - }); + if (this._dragDiv) { + this._dragDiv.removeChild(this._dragElement); + this._dragParent!.removeChild(this._dragFakeElement!); + this._dragParent!.appendChild(this._dragElement!); + DragManager.Root().removeChild(this._dragDiv); + this._dragDiv = null; + this.stateChanged(); } + tab.closeElement.off('click') //unbind the current click handler + .click(function () { + tab.contentItem.remove(); + }); } stackCreated = (stack: any) => { @@ -187,13 +205,8 @@ export class CollectionDockingView extends CollectionViewBase { render() { - const { fieldKey: fieldKey, Document: Document } = this.props; - const value: Document[] = Document.GetData(fieldKey, ListField, []); - // bcz: not sure why, but I need these to force the flexlayout to update when the collection size changes. - // tfs: we should be able to use this.props.ScreenToLocalTransform to get s right? - var s = this.props.ContainingDocumentView != undefined ? this.props.ContainingDocumentView!.ScalingToScreenSpace : 1; - var w = Document.GetNumber(KeyStore.Width, 0) / s; - var h = Document.GetNumber(KeyStore.Height, 0) / s; + this.props.Document.GetNumber(KeyStore.Width, 0); // bcz: needed to force render when window size changes + this.props.Document.GetNumber(KeyStore.Height, 0); return ( <div className="collectiondockingview-container" id="menuContainer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef} @@ -213,28 +226,35 @@ interface DockedFrameProps { @observer export class DockedFrameRenderer extends React.Component<DockedFrameProps> { - private _mainCont = React.createRef<HTMLDivElement>(); + _mainCont: any = null; constructor(props: any) { super(props); + Server.GetField(this.props.documentId, (f) => { this.Document = f as Document; }) + } + + setMainCont: any = (element: any) => { + this._mainCont = element; } @observable private _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView - @computed - private get Document() { return Server.GetField(this.props.documentId, () => { }) as Document } + @observable + private Document: Opt<Document>; render() { + if (!this.Document) + return <div></div> let nativeWidth = this.Document.GetNumber(KeyStore.NativeWidth, 0); var layout = this.Document.GetText(KeyStore.Layout, ""); var content = - <div ref={this._mainCont}> + <div ref={this.setMainCont}> <DocumentView key={this.Document.Id} Document={this.Document} AddDocument={undefined} RemoveDocument={undefined} Scaling={this._parentScaling} ScreenToLocalTransform={() => { - let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!); + let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont); var props = CollectionDockingView.Instance.props; return props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this._parentScaling) }} diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 2c0a3f478..54757cce5 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -1,13 +1,11 @@ import { observer } from "mobx-react"; import React = require("react"); -import { action, observable, computed } from "mobx"; +import { action, computed } from "mobx"; import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; import { DragManager } from "../../util/DragManager"; import "./CollectionFreeFormView.scss"; -import { Utils } from "../../../Utils"; -import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; -import { SelectionManager } from "../../util/SelectionManager"; -import { Key, KeyStore } from "../../../fields/Key"; +import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; +import { KeyStore } from "../../../fields/KeyStore"; import { Document } from "../../../fields/Document"; import { ListField } from "../../../fields/ListField"; import { NumberField } from "../../../fields/NumberField"; @@ -19,17 +17,12 @@ import { DocumentView } from "../nodes/DocumentView"; @observer export class CollectionFreeFormView extends CollectionViewBase { public static LayoutString(fieldKey: string = "DataKey") { return CollectionViewBase.LayoutString("CollectionFreeFormView", fieldKey); } - private _containerRef = React.createRef<HTMLDivElement>(); private _canvasRef = React.createRef<HTMLDivElement>(); private _lastX: number = 0; private _lastY: number = 0; private _downX: number = 0; private _downY: number = 0; - constructor(props: CollectionViewProps) { - super(props); - } - @computed get isAnnotationOverlay() { return this.props.fieldKey == KeyStore.Annotations; } @@ -47,7 +40,6 @@ export class CollectionFreeFormView extends CollectionViewBase { @action drop = (e: Event, de: DragManager.DropEvent) => { const doc: DocumentView = de.data["document"]; - var me = this; if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this) { doc.props.ContainingCollectionView.removeDocument(doc.props.Document); this.addDocument(doc.props.Document); @@ -55,7 +47,7 @@ export class CollectionFreeFormView extends CollectionViewBase { const xOffset = de.data["xOffset"] as number || 0; const yOffset = de.data["yOffset"] as number || 0; //this should be able to use translate and scale methods on an Identity transform, no? - const transform = me.getTransform(); + const transform = this.getTransform(); const screenX = de.x - xOffset; const screenY = de.y - yOffset; const [x, y] = transform.transformPoint(screenX, screenY); @@ -65,9 +57,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 } @@ -119,7 +115,6 @@ export class CollectionFreeFormView extends CollectionViewBase { onPointerWheel = (e: React.WheelEvent): void => { e.stopPropagation(); e.preventDefault(); - let modes = ['pixels', 'lines', 'page']; let coefficient = 1000; // if (modes[e.deltaMode] == 'pixels') coefficient = 50; // else if (modes[e.deltaMode] == 'lines') coefficient = 1000; // This should correspond to line-height?? @@ -155,7 +150,7 @@ export class CollectionFreeFormView extends CollectionViewBase { let x = e.pageX - panx let y = e.pageY - pany - fReader.addEventListener("load", action("drop", (event) => { + fReader.addEventListener("load", action("drop", () => { if (fReader.result) { let url = "" + fReader.result; let doc = Documents.ImageDocument(url, { @@ -177,25 +172,25 @@ export class CollectionFreeFormView extends CollectionViewBase { } } - onDragOver = (e: React.DragEvent): void => { + onDragOver = (): void => { } @action bringToFront(doc: DocumentView) { const { fieldKey: fieldKey, Document: Document } = this.props; - const value: Document[] = Document.GetList<Document>(fieldKey, []); - var topmost = value.reduce((topmost, d) => Math.max(d.GetNumber(KeyStore.ZIndex, 0), topmost), -1000); - value.map(d => { - var zind = d.GetNumber(KeyStore.ZIndex, 0); - if (zind != topmost - 1 - (topmost - zind) && d != doc.props.Document) { - d.SetData(KeyStore.ZIndex, topmost - 1 - (topmost - zind), NumberField); + const value: Document[] = Document.GetList<Document>(fieldKey, []).slice(); + value.sort((doc1, doc2) => { + if (doc1 === doc.props.Document) { + return 1; } - }) - - if (doc.props.Document.GetNumber(KeyStore.ZIndex, 0) != 0) { - doc.props.Document.SetData(KeyStore.ZIndex, 0, NumberField); - } + if (doc2 === doc.props.Document) { + return -1; + } + return doc1.GetNumber(KeyStore.ZIndex, 0) - doc2.GetNumber(KeyStore.ZIndex, 0); + }).map((doc, index) => { + doc.SetNumber(KeyStore.ZIndex, index + 1) + }); } @computed @@ -220,11 +215,14 @@ export class CollectionFreeFormView extends CollectionViewBase { } render() { - const Document: Document = this.props.Document; - const value: Document[] = Document.GetList<Document>(this.props.fieldKey, []); + const { fieldKey, Document } = this.props; + // const value: Document[] = Document.GetList<Document>(fieldKey, []); + const lvalue = Document.GetT<ListField<Document>>(fieldKey, ListField); + if (!lvalue || lvalue === "<Waiting>") { + return <p>Error loading collection data</p> + } const panx: number = Document.GetNumber(KeyStore.PanX, 0); const pany: number = Document.GetNumber(KeyStore.PanY, 0); - var me = this; return ( <div className="collectionfreeformview-container" @@ -236,13 +234,13 @@ export class CollectionFreeFormView extends CollectionViewBase { style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px`, }} - ref={this._containerRef}> + ref={this.createDropTarget}> <div className="collectionfreeformview" style={{ width: "100%", transformOrigin: "left top", transform: ` translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})` }} ref={this._canvasRef}> {this.props.BackgroundView ? this.props.BackgroundView() : null} - {value.map(doc => { + {lvalue.Data.map(doc => { return (<CollectionFreeFormDocumentView key={doc.Id} Document={doc} AddDocument={this.addDocument} RemoveDocument={this.removeDocument} diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 5c95aca99..719783fd7 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -11,7 +11,7 @@ import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBas import { DocumentView } from "../nodes/DocumentView"; import { EditableView } from "../EditableView"; import { CompileScript, ToField } from "../../util/Scripting"; -import { KeyStore as KS, Key, KeyStore } from "../../../fields/Key"; +import { KeyStore } from "../../../fields/KeyStore"; import { Document } from "../../../fields/Document"; import { Field } from "../../../fields/Field"; import { Transform } from "../../util/Transform"; @@ -19,7 +19,7 @@ import Measure from "react-measure"; @observer export class CollectionSchemaView extends CollectionViewBase { - public static LayoutString() { return CollectionViewBase.LayoutString("CollectionSchemaView"); } + public static LayoutString() { return FieldView.LayoutString(CollectionSchemaView); } @observable selectedIndex = 0; @@ -106,8 +106,8 @@ export class CollectionSchemaView extends CollectionViewBase { render() { const { Document: Document, fieldKey: fieldKey } = this.props; const children = Document.GetList<Document>(fieldKey, []); - const columns = Document.GetList(KS.ColumnsKey, - [KS.Title, KS.Data, KS.Author]) + const columns = Document.GetList(KeyStore.ColumnsKey, + [KeyStore.Title, KeyStore.Data, KeyStore.Author]) let content; var me = this; if (this.selectedIndex != -1) { diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 1e20da8d2..0acc890d8 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -1,22 +1,17 @@ import { action, computed } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; -import { Opt } from "../../../fields/Field"; -import { Key, KeyStore } from "../../../fields/Key"; +import { Key } from "../../../fields/Key"; import { ListField } from "../../../fields/ListField"; import { SelectionManager } from "../../util/SelectionManager"; import { ContextMenu } from "../ContextMenu"; import React = require("react"); -import { DocumentView } from "../nodes/DocumentView"; -import { CollectionDockingView } from "./CollectionDockingView"; -import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; import { Transform } from "../../util/Transform"; export interface CollectionViewProps { fieldKey: Key; Document: Document; - ContainingDocumentView: Opt<DocumentView>; ScreenToLocalTransform: () => Transform; isSelected: () => boolean; isTopMost: boolean; @@ -32,12 +27,11 @@ export class CollectionViewBase extends React.Component<CollectionViewProps> { public static LayoutString(collectionType: string, fieldKey: string = "DataKey") { return `<${collectionType} Document={Document} ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} isSelected={isSelected} select={select} - isTopMost={isTopMost} - ContainingDocumentView={DocumentView} BackgroundView={BackgroundView} />`; + isTopMost={isTopMost} BackgroundView={BackgroundView} />`; } @computed public get active(): boolean { - var isSelected = (this.props.ContainingDocumentView && SelectionManager.IsSelected(this.props.ContainingDocumentView)); + var isSelected = this.props.isSelected(); var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this); var topMost = this.props.isTopMost; return isSelected || childSelected || topMost; diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 2eb0c5857..bb85f85a3 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -1,6 +1,6 @@ import { action, computed } from "mobx"; import { observer } from "mobx-react"; -import { Key, KeyStore } from "../../../fields/Key"; +import { KeyStore } from "../../../fields/KeyStore"; import { NumberField } from "../../../fields/NumberField"; import { DragManager } from "../../util/DragManager"; import { SelectionManager } from "../../util/SelectionManager"; @@ -10,6 +10,7 @@ import { ContextMenu } from "../ContextMenu"; import "./DocumentView.scss"; import React = require("react"); import { DocumentView, DocumentViewProps } from "./DocumentView"; +import { Utils } from "../../../Utils"; import { Transform } from "../../util/Transform"; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index f8770f020..3a4dbb2d5 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1,8 +1,9 @@ import { action, computed } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; -import { Opt, FieldWaiting } from "../../../fields/Field"; -import { Key, KeyStore } from "../../../fields/Key"; +import { Opt, FieldWaiting, Field } from "../../../fields/Field"; +import { Key } from "../../../fields/Key"; +import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; import { Utils } from "../../../Utils"; import { CollectionDockingView } from "../collections/CollectionDockingView"; @@ -31,6 +32,47 @@ export interface DocumentViewProps { //tfs: This shouldn't be necessary I don't think Scaling: number; } +export interface JsxArgs extends DocumentViewProps { + Keys: { [name: string]: Key } + Fields: { [name: string]: Field } +} + +/* +This function is pretty much a hack that lets us fill out the fields in JsxArgs with something that +jsx-to-string can recover the jsx from +Example usage of this function: + public static LayoutString() { + let args = FakeJsxArgs(["Data"]); + return jsxToString( + <CollectionFreeFormView + doc={args.Document} + fieldKey={args.Keys.Data} + DocumentViewForField={args.DocumentView} />, + { useFunctionCode: true, functionNameOnly: true } + ) + } +*/ +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; +} @observer export class DocumentView extends React.Component<DocumentViewProps> { @@ -70,7 +112,7 @@ export class DocumentView extends React.Component<DocumentViewProps> { @computed get active(): boolean { - return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined || + return SelectionManager.IsSelected(this) || !this.props.ContainingCollectionView || this.props.ContainingCollectionView.active; } @@ -104,7 +146,7 @@ export class DocumentView extends React.Component<DocumentViewProps> { @computed get topMost(): boolean { - return this.props.ContainingCollectionView == undefined || this.props.ContainingCollectionView instanceof CollectionDockingView; + return !this.props.ContainingCollectionView || this.props.ContainingCollectionView instanceof CollectionDockingView; } onPointerMove = (e: PointerEvent): void => { @@ -195,20 +237,6 @@ export class DocumentView extends React.Component<DocumentViewProps> { } } - // - // returns the cumulative scaling between the document and the screen - // tfs: I don't think this should be necessary - // - @computed - public get ScalingToScreenSpace(): number { - if (this.props.ContainingCollectionView != undefined && - this.props.ContainingCollectionView.props.ContainingDocumentView != undefined) { - let ss = this.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1); - return this.props.ContainingCollectionView.props.ContainingDocumentView.ScalingToScreenSpace * ss; - } - return 1; - } - isSelected = () => { return SelectionManager.IsSelected(this); } @@ -217,10 +245,20 @@ export class DocumentView extends React.Component<DocumentViewProps> { SelectionManager.SelectDoc(this, ctrlPressed) } + screenToLocalTransform = () => { + return this.props.ScreenToLocalTransform().transform(Transform.Identity.scale(1 / this.props.Scaling)); + } render() { - let bindings = { ...this.props } as any; - bindings.isSelected = this.isSelected; - bindings.select = this.select; + let lkeys = this.props.Document.GetT(KeyStore.LayoutKeys, ListField); + if (!lkeys || lkeys === "<Waiting>") { + return <p>Error loading layout keys</p>; + } + let bindings = { + ...this.props, + ScreenToLocalTransform: this.screenToLocalTransform, // adds 'Scaling' to the screen to local Xf + isSelected: this.isSelected, + select: this.select + } as any; for (const key of this.layoutKeys) { bindings[key.Name + "Key"] = key; // this maps string values of the form <keyname>Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data } @@ -246,14 +284,13 @@ export class DocumentView extends React.Component<DocumentViewProps> { bindings.BackgroundView = backgroundView; } - bindings.DocumentView = this; - var width = this.props.Document.GetNumber(KeyStore.NativeWidth, 0); var strwidth = width > 0 ? width.toString() + "px" : "100%"; var height = this.props.Document.GetNumber(KeyStore.NativeHeight, 0); var strheight = height > 0 ? height.toString() + "px" : "100%"; + var scaling = this.props.Scaling; return ( - <div className="documentView-node" ref={this._mainCont} style={{ width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${this.props.Scaling},${this.props.Scaling})` }} + <div className="documentView-node" ref={this._mainCont} style={{ width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${scaling},${scaling})` }} onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} > <JsxParser diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 08de53e1c..918acff4c 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -25,7 +25,7 @@ export interface FieldViewProps { @observer export class FieldView extends React.Component<FieldViewProps> { - public static LayoutString(fieldType: string) { return `<${fieldType} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} isSelected={isSelected} isTopMost={isTopMost} />`; } + public static LayoutString(fieldType: { name: string }) { return `<${fieldType.name} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} isSelected={isSelected} isTopMost={isTopMost} />`; } @computed get field(): FieldValue<Field> { const { doc, fieldKey } = this.props; diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 2e3d396c1..b17650d06 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -33,7 +33,7 @@ import { observer } from "mobx-react"; //] export class FormattedTextBox extends React.Component<FieldViewProps> { - public static LayoutString() { return FieldView.LayoutString("FormattedTextBox"); } + public static LayoutString() { return FieldView.LayoutString(FormattedTextBox) } private _ref: React.RefObject<HTMLDivElement>; private _editorView: Opt<EditorView>; private _reactionDisposer: Opt<IReactionDisposer>; diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index e1fa26e2f..b5ce8b28c 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -1,21 +1,19 @@ import Lightbox from 'react-image-lightbox'; import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app -import { SelectionManager } from "../../util/SelectionManager"; import "./ImageBox.scss"; import React = require("react") import { ImageField } from '../../../fields/ImageField'; import { FieldViewProps, FieldView } from './FieldView'; -import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView'; import { FieldWaiting } from '../../../fields/Field'; import { observer } from "mobx-react" -import { observable, action, spy } from 'mobx'; -import { KeyStore } from '../../../fields/Key'; +import { observable, action } from 'mobx'; +import { KeyStore } from '../../../fields/KeyStore'; @observer export class ImageBox extends React.Component<FieldViewProps> { - public static LayoutString() { return FieldView.LayoutString("ImageBox"); } + public static LayoutString() { return FieldView.LayoutString(ImageBox) } private _ref: React.RefObject<HTMLDivElement>; private _downX: number = 0; private _downY: number = 0; diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx new file mode 100644 index 000000000..ddfe884ed --- /dev/null +++ b/src/debug/Viewer.tsx @@ -0,0 +1,192 @@ +import { action, configure, observable, ObservableMap, Lambda } from 'mobx'; +import "normalize.css"; +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import { observer } from 'mobx-react'; +import { Document } from '../fields/Document'; +import { BasicField } from '../fields/BasicField'; +import { ListField } from '../fields/ListField'; +import { Key } from '../fields/Key'; +import { Field } from '../fields/Field'; +import { Server } from '../client/Server'; + +configure({ + enforceActions: "observed" +}); + +@observer +class FieldViewer extends React.Component<{ field: BasicField<any> }> { + render() { + return <span>{this.props.field.Data} ({this.props.field.Id})</span>; + } +} + +@observer +class KeyViewer extends React.Component<{ field: Key }> { + render() { + return this.props.field.Name; + } +} + +@observer +class ListViewer extends React.Component<{ field: ListField<Field> }>{ + @observable + expanded = false; + + render() { + let content; + if (this.expanded) { + content = ( + <div> + {this.props.field.Data.map(field => <DebugViewer fieldId={field.Id} key={field.Id} />)} + </div> + ) + } else { + content = <>[...] ({this.props.field.Id})</> + } + return ( + <div> + <button onClick={action(() => this.expanded = !this.expanded)}>Toggle</button> + {content} + </div > + ) + } +} + +@observer +class DocumentViewer extends React.Component<{ field: Document }> { + private keyMap: ObservableMap<string, Key> = new ObservableMap + + private disposer?: Lambda; + + componentDidMount() { + let f = () => { + Array.from(this.props.field._proxies.keys()).forEach(id => { + if (!this.keyMap.has(id)) { + Server.GetField(id, (field) => { + if (field && field instanceof Key) { + this.keyMap.set(id, field); + } + }) + } + }); + } + this.disposer = this.props.field._proxies.observe(f) + f() + } + + componentWillUnmount() { + if (this.disposer) { + this.disposer(); + } + } + + render() { + let fields = Array.from(this.props.field._proxies.entries()).map(kv => { + let key = this.keyMap.get(kv[0]); + return ( + <div key={kv[0]}> + <b>({key ? key.Name : kv[0]}): </b> + <DebugViewer fieldId={kv[1]!}></DebugViewer> + </div> + ) + }) + return ( + <div> + Document ({this.props.field.Id}) + <div style={{ paddingLeft: "25px" }}> + {fields} + </div> + </div> + ) + } +} + +@observer +class DebugViewer extends React.Component<{ fieldId: string }> { + @observable + private field?: Field; + + @observable + private error?: string; + + constructor(props: { fieldId: string }) { + super(props) + this.update() + } + + update() { + Server.GetField(this.props.fieldId, (field => { + this.field = field; + if (!field) { + this.error = `Field with id ${this.props.fieldId} not found` + } + })); + + } + + render() { + let content; + if (this.field) { + // content = this.field.ToJson(); + if (this.field instanceof ListField) { + content = (<ListViewer field={this.field} />) + } else if (this.field instanceof Document) { + content = (<DocumentViewer field={this.field} />) + } else if (this.field instanceof BasicField) { + content = (<FieldViewer field={this.field} />) + } else if (this.field instanceof Key) { + content = (<KeyViewer field={this.field} />) + } + } else if (this.error) { + content = <span>Field <b>{this.props.fieldId}</b> not found <button onClick={() => this.update()}>Refresh</button></span> + } else { + content = <>Field loading</> + } + return content; + } +} + +@observer +class Viewer extends React.Component { + @observable + private idToAdd: string = ''; + + @observable + private ids: string[] = []; + + @action + inputOnChange = (e: React.ChangeEvent<HTMLInputElement>) => { + this.idToAdd = e.target.value; + } + + @action + onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => { + if (e.key === "Enter") { + this.ids.push(this.idToAdd) + this.idToAdd = "" + } + } + + render() { + return ( + <> + <input value={this.idToAdd} + onChange={this.inputOnChange} + onKeyDown={this.onKeyPress} /> + <div> + {this.ids.map(id => { + return <DebugViewer fieldId={id} key={id}></DebugViewer> + })} + </div> + </> + ) + } +} + +ReactDOM.render(( + <div style={{ position: "absolute", width: "100%", height: "100%" }}> + <Viewer /> + </div>), + document.getElementById('root') +);
\ No newline at end of file diff --git a/src/fields/BasicField.ts b/src/fields/BasicField.ts index fb5cc773e..8728b7145 100644 --- a/src/fields/BasicField.ts +++ b/src/fields/BasicField.ts @@ -1,15 +1,25 @@ -import { Field } from "./Field" +import { Field, FieldId } from "./Field" import { observable, computed, action } from "mobx"; +import { Server } from "../client/Server"; export abstract class BasicField<T> extends Field { - constructor(data: T) { - super(); + constructor(data: T, save: boolean, id?: FieldId) { + super(id); this.data = data; + if (save) { + Server.UpdateField(this) + } + } + + UpdateFromServer(data: any) { + if (this.data !== data) { + this.data = data; + } } @observable - private data: T; + protected data: T; @computed get Data(): T { @@ -17,10 +27,10 @@ export abstract class BasicField<T> extends Field { } set Data(value: T) { - if (this.data === value) { - return; + if (this.data != value) { + this.data = value; } - this.data = value; + Server.UpdateField(this); } @action diff --git a/src/fields/Document.ts b/src/fields/Document.ts index c682d8e94..0c2ad0fdb 100644 --- a/src/fields/Document.ts +++ b/src/fields/Document.ts @@ -1,14 +1,33 @@ -import { Field, Cast, Opt, FieldWaiting, FieldId, FieldValue } from "./Field" -import { Key, KeyStore } from "./Key" +import { Key } from "./Key" +import { KeyStore } from "./KeyStore"; +import { Field, Cast, FieldWaiting, FieldValue, FieldId } from "./Field" import { NumberField } from "./NumberField"; -import { ObservableMap, computed, action, observable } from "mobx"; +import { ObservableMap, computed, action } from "mobx"; import { TextField } from "./TextField"; import { ListField } from "./ListField"; import { Server } from "../client/Server"; +import { Types } from "../server/Message"; export class Document extends Field { - public fields: ObservableMap<Key, Field> = new ObservableMap(); - public _proxies: ObservableMap<Key, FieldId> = new ObservableMap(); + public fields: ObservableMap<string, { key: Key, field: Field }> = new ObservableMap(); + public _proxies: ObservableMap<string, FieldId> = new ObservableMap(); + + constructor(id?: string, save: boolean = true) { + super(id) + + if (save) { + var title = (this._proxies.has(KeyStore.Title.Id) ? "???" : this.Title) + "(" + this.Id + ")"; + console.log("Save " + title); + Server.UpdateField(this) + } + } + + UpdateFromServer(data: [string, string][]) { + for (const key in data) { + const element = data[key]; + this._proxies.set(element[0], element[1]); + } + } @computed public get Title() { @@ -18,28 +37,53 @@ export class Document extends Field { Get(key: Key, ignoreProto: boolean = false): FieldValue<Field> { let field: FieldValue<Field>; if (ignoreProto) { - if (this.fields.has(key)) { - field = this.fields.get(key); - } else if (this._proxies.has(key)) { - field = Server.GetDocumentField(this, key); + if (this.fields.has(key.Id)) { + field = this.fields.get(key.Id)!.field; + } else if (this._proxies.has(key.Id)) { + Server.GetDocumentField(this, key); + /* + The field might have been instantly filled from the cache + Maybe we want to just switch back to returning the value + from Server.GetDocumentField if it's in the cache + */ + if (this.fields.has(key.Id)) { + field = this.fields.get(key.Id)!.field; + } else { + field = FieldWaiting; + } } } else { let doc: FieldValue<Document> = this; while (doc && doc != FieldWaiting && field != FieldWaiting) { - if (!doc.fields.has(key)) { - if (doc._proxies.has(key)) { - field = Server.GetDocumentField(doc, key); + let curField = doc.fields.get(key.Id); + let curProxy = doc._proxies.get(key.Id); + if (!curField || (curProxy && curField.field.Id !== curProxy)) { + if (curProxy) { + Server.GetDocumentField(doc, key); + /* + The field might have been instantly filled from the cache + Maybe we want to just switch back to returning the value + from Server.GetDocumentField if it's in the cache + */ + if (this.fields.has(key.Id)) { + field = this.fields.get(key.Id)!.field; + } else { + field = FieldWaiting; + } break; } - if ((doc.fields.has(KeyStore.Prototype) || doc._proxies.has(KeyStore.Prototype))) { + if ((doc.fields.has(KeyStore.Prototype.Id) || doc._proxies.has(KeyStore.Prototype.Id))) { doc = doc.GetPrototype(); - } else + } else { break; + } } else { - field = doc.fields.get(key); + field = curField.field; break; } } + if (doc == FieldWaiting) + field = FieldWaiting; } return field; @@ -83,13 +127,17 @@ export class Document extends Field { @action Set(key: Key, field: Field | undefined): void { + console.log("Assign: " + key.Name + " = " + (field ? field.GetValue() : "<undefined>") + " (" + (field ? field.Id : "<undefined>") + ")"); if (field) { - this.fields.set(key, field); - Server.AddDocumentField(this, key, field); + this.fields.set(key.Id, { key, field }); + this._proxies.set(key.Id, field.Id) + // Server.AddDocumentField(this, key, field); } else { - this.fields.delete(key); - Server.DeleteDocumentField(this, key); + this.fields.delete(key.Id); + this._proxies.delete(key.Id) + // Server.DeleteDocumentField(this, key); } + Server.UpdateField(this); } @action @@ -99,7 +147,7 @@ export class Document extends Field { //if (field != WAITING) { // do we want to wait for the field to come back from the server to set it, or do we overwrite? if (field instanceof ctor) { field.Data = value; - Server.SetFieldValue(field, value); + // Server.SetFieldValue(field, value); } else if (!field || replaceWrongType) { let newField = new ctor(); newField.Data = value; @@ -132,8 +180,8 @@ export class Document extends Field { return protos; } - MakeDelegate(): Document { - let delegate = new Document(); + MakeDelegate(id?: string): Document { + let delegate = new Document(id); delegate.Set(KeyStore.Prototype, this); @@ -148,11 +196,28 @@ export class Document extends Field { throw new Error("Method not implemented."); } GetValue() { - throw new Error("Method not implemented."); + var title = (this._proxies.has(KeyStore.Title.Id) ? "???" : this.Title) + "(" + this.Id + ")"; + return title; + //throw new Error("Method not implemented."); } Copy(): Field { throw new Error("Method not implemented."); } + ToJson(): { type: Types, data: [string, string][], _id: string } { + // console.log(this.fields) + let fields: [string, string][] = [] + this._proxies.forEach((field, key) => { + if (field) { + fields.push([key, field as string]) + } + }); + // console.log(fields) + return { + type: Types.Document, + data: fields, + _id: this.Id + } + } }
\ No newline at end of file diff --git a/src/fields/DocumentReference.ts b/src/fields/DocumentReference.ts index 983b162a3..9d3c209b4 100644 --- a/src/fields/DocumentReference.ts +++ b/src/fields/DocumentReference.ts @@ -1,6 +1,8 @@ -import { Field, Opt, FieldValue } from "./Field"; +import { Field, Opt, FieldValue, FieldId } from "./Field"; import { Document } from "./Document"; import { Key } from "./Key"; +import { Types } from "../server/Message"; +import { ObjectID } from "bson"; export class DocumentReference extends Field { get Key(): Key { @@ -15,6 +17,10 @@ export class DocumentReference extends Field { super(); } + UpdateFromServer() { + + } + Dereference(): FieldValue<Field> { return this.document.Get(this.key); } @@ -41,4 +47,11 @@ export class DocumentReference extends Field { return ""; } + ToJson(): { type: Types, data: FieldId, _id: string } { + return { + type: Types.DocumentReference, + data: this.document.Id, + _id: this.Id + } + } }
\ No newline at end of file diff --git a/src/fields/Field.ts b/src/fields/Field.ts index 4a3968699..c7e0232af 100644 --- a/src/fields/Field.ts +++ b/src/fields/Field.ts @@ -1,5 +1,6 @@ import { Utils } from "../Utils"; +import { Types } from "../server/Message"; export function Cast<T extends Field>(field: FieldValue<Field>, ctor: { new(): T }): Opt<T> { if (field) { @@ -19,6 +20,10 @@ export type FieldValue<T> = Opt<T> | FIELD_WAITING; export abstract class Field { //FieldUpdated: TypedEvent<Opt<FieldUpdatedArgs>> = new TypedEvent<Opt<FieldUpdatedArgs>>(); + init(callback: (res: Field) => any) { + callback(this); + } + private id: FieldId; get Id(): FieldId { return this.id; @@ -47,6 +52,8 @@ export abstract class Field { return this.id === other.id; } + abstract UpdateFromServer(serverData: any): void; + abstract ToScriptString(): string; abstract TrySetValue(value: any): boolean; @@ -55,4 +62,5 @@ export abstract class Field { abstract Copy(): Field; + abstract ToJson(): { _id: string, type: Types, data: any } }
\ No newline at end of file diff --git a/src/fields/ImageField.ts b/src/fields/ImageField.ts index d82260f54..b2226d55a 100644 --- a/src/fields/ImageField.ts +++ b/src/fields/ImageField.ts @@ -1,9 +1,11 @@ import { BasicField } from "./BasicField"; -import { Field } from "./Field"; +import { Field, FieldId } from "./Field"; +import { Types } from "../server/Message"; +import { ObjectID } from "bson"; export class ImageField extends BasicField<URL> { - constructor(data: URL | undefined = undefined) { - super(data == undefined ? new URL("http://cs.brown.edu/~bcz/bob_fettucine.jpg") : data); + constructor(data: URL | undefined = undefined, id?: FieldId, save: boolean = true) { + super(data == undefined ? new URL("http://cs.brown.edu/~bcz/bob_fettucine.jpg") : data, save, id); } toString(): string { @@ -18,4 +20,11 @@ export class ImageField extends BasicField<URL> { return new ImageField(this.Data); } + ToJson(): { type: Types, data: URL, _id: string } { + return { + type: Types.Image, + data: this.Data, + _id: this.Id + } + } }
\ No newline at end of file diff --git a/src/fields/Key.ts b/src/fields/Key.ts index 8d92b89b6..c16a00878 100644 --- a/src/fields/Key.ts +++ b/src/fields/Key.ts @@ -1,6 +1,9 @@ -import { Field } from "./Field" +import { Field, FieldId } from "./Field" import { Utils } from "../Utils"; import { observable } from "mobx"; +import { Types } from "../server/Message"; +import { ObjectID } from "bson"; +import { Server } from "../client/Server"; export class Key extends Field { private name: string; @@ -9,10 +12,17 @@ export class Key extends Field { return this.name; } - constructor(name: string) { - super(Utils.GenerateDeterministicGuid(name)); + constructor(name: string, id?: string, save: boolean = true) { + super(id || Utils.GenerateDeterministicGuid(name)); this.name = name; + if (save) { + Server.UpdateField(this) + } + } + + UpdateFromServer(data: string) { + this.name = data; } TrySetValue(value: any): boolean { @@ -31,27 +41,11 @@ export class Key extends Field { return name; } -} - -export namespace KeyStore { - export const Prototype = new Key("Prototype"); - export const X = new Key("X"); - export const Y = new Key("Y"); - export const Title = new Key("Title"); - export const Author = new Key("Author"); - export const PanX = new Key("PanX"); - export const PanY = new Key("PanY"); - export const Scale = new Key("Scale"); - export const NativeWidth = new Key("NativeWidth"); - export const NativeHeight = new Key("NativeHeight"); - export const Width = new Key("Width"); - export const Height = new Key("Height"); - export const ZIndex = new Key("ZIndex"); - export const Data = new Key("Data"); - export const Annotations = new Key("Annotations"); - export const Layout = new Key("Layout"); - export const BackgroundLayout = new Key("BackgroundLayout"); - export const LayoutKeys = new Key("LayoutKeys"); - export const LayoutFields = new Key("LayoutFields"); - export const ColumnsKey = new Key("SchemaColumns"); + ToJson(): { type: Types, data: string, _id: string } { + return { + type: Types.Key, + data: this.name, + _id: this.Id + } + } }
\ No newline at end of file diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts new file mode 100644 index 000000000..7056886aa --- /dev/null +++ b/src/fields/KeyStore.ts @@ -0,0 +1,25 @@ +import { Key } from "./Key"; + +export namespace KeyStore { + export const Prototype = new Key("Prototype"); + export const X = new Key("X"); + export const Y = new Key("Y"); + export const Title = new Key("Title"); + export const Author = new Key("Author"); + export const PanX = new Key("PanX"); + export const PanY = new Key("PanY"); + export const Scale = new Key("Scale"); + export const NativeWidth = new Key("NativeWidth"); + export const NativeHeight = new Key("NativeHeight"); + export const Width = new Key("Width"); + export const Height = new Key("Height"); + export const ZIndex = new Key("ZIndex"); + export const Data = new Key("Data"); + export const Annotations = new Key("Annotations"); + export const Layout = new Key("Layout"); + export const BackgroundLayout = new Key("BackgroundLayout"); + export const LayoutKeys = new Key("LayoutKeys"); + export const LayoutFields = new Key("LayoutFields"); + export const ColumnsKey = new Key("SchemaColumns"); + export const ActiveFrame = new Key("ActiveFrame"); +} diff --git a/src/fields/ListField.ts b/src/fields/ListField.ts index 8843338c1..2e192bf90 100644 --- a/src/fields/ListField.ts +++ b/src/fields/ListField.ts @@ -1,9 +1,58 @@ -import { Field } from "./Field"; +import { Field, FieldId, FieldValue, Opt } from "./Field"; import { BasicField } from "./BasicField"; +import { Types } from "../server/Message"; +import { observe, action } from "mobx"; +import { Server } from "../client/Server"; +import { ServerUtils } from "../server/ServerUtil"; export class ListField<T extends Field> extends BasicField<T[]> { - constructor(data: T[] = []) { - super(data.slice()); + private _proxies: string[] = [] + constructor(data: T[] = [], id?: FieldId, save: boolean = true) { + super(data, save, id); + this.updateProxies(); + if (save) { + Server.UpdateField(this); + } + observe(this.Data, () => { + this.updateProxies() + Server.UpdateField(this); + }) + } + + private updateProxies() { + this._proxies = this.Data.map(field => field.Id); + } + + UpdateFromServer(fields: string[]) { + this._proxies = fields; + } + private arraysEqual(a: any[], b: any[]) { + if (a === b) return true; + if (a == null || b == null) return false; + if (a.length != b.length) return false; + + // If you don't care about the order of the elements inside + // the array, you should sort both arrays here. + // Please note that calling sort on an array will modify that array. + // you might want to clone your array first. + + for (var i = 0; i < a.length; ++i) { + if (a[i] !== b[i]) return false; + } + return true; + } + + init(callback: (field: Field) => any) { + Server.GetFields(this._proxies, action((fields: { [index: string]: Field }) => { + if (!this.arraysEqual(this._proxies, this.Data.map(field => field.Id))) { + this.data = this._proxies.map(id => fields[id] as T) + observe(this.Data, () => { + this.updateProxies() + Server.UpdateField(this); + }) + } + callback(this); + })) } ToScriptString(): string { @@ -13,4 +62,18 @@ export class ListField<T extends Field> extends BasicField<T[]> { Copy(): Field { return new ListField<T>(this.Data); } + + ToJson(): { type: Types, data: string[], _id: string } { + return { + type: Types.List, + data: this._proxies, + _id: this.Id + } + } + + static FromJson(id: string, ids: string[]): ListField<Field> { + let list = new ListField([], id, false); + list._proxies = ids; + return list + } }
\ No newline at end of file diff --git a/src/fields/NumberField.ts b/src/fields/NumberField.ts index 03926d696..47dfc74cb 100644 --- a/src/fields/NumberField.ts +++ b/src/fields/NumberField.ts @@ -1,8 +1,10 @@ import { BasicField } from "./BasicField" +import { Types } from "../server/Message"; +import { FieldId } from "./Field"; export class NumberField extends BasicField<number> { - constructor(data: number = 0) { - super(data); + constructor(data: number = 0, id?: FieldId, save: boolean = true) { + super(data, save, id); } ToScriptString(): string { @@ -12,4 +14,12 @@ export class NumberField extends BasicField<number> { Copy() { return new NumberField(this.Data); } + + ToJson(): { _id: string, type: Types, data: number } { + return { + _id: this.Id, + type: Types.Number, + data: this.Data + } + } }
\ No newline at end of file diff --git a/src/fields/RichTextField.ts b/src/fields/RichTextField.ts index 4a77c669c..5efb43314 100644 --- a/src/fields/RichTextField.ts +++ b/src/fields/RichTextField.ts @@ -1,8 +1,10 @@ import { BasicField } from "./BasicField"; +import { Types } from "../server/Message"; +import { FieldId } from "./Field"; export class RichTextField extends BasicField<string> { - constructor(data: string = "") { - super(data); + constructor(data: string = "", id?: FieldId, save: boolean = true) { + super(data, save, id); } ToScriptString(): string { @@ -13,4 +15,12 @@ export class RichTextField extends BasicField<string> { return new RichTextField(this.Data); } + ToJson(): { type: Types, data: string, _id: string } { + return { + type: Types.RichText, + data: this.Data, + _id: this.Id + } + } + }
\ No newline at end of file diff --git a/src/fields/TextField.ts b/src/fields/TextField.ts index 11d2ed7cd..ad96ab6d9 100644 --- a/src/fields/TextField.ts +++ b/src/fields/TextField.ts @@ -1,8 +1,10 @@ import { BasicField } from "./BasicField" +import { FieldId } from "./Field"; +import { Types } from "../server/Message"; export class TextField extends BasicField<string> { - constructor(data: string = "") { - super(data); + constructor(data: string = "", id?: FieldId, save: boolean = true) { + super(data, save, id); } ToScriptString(): string { @@ -12,4 +14,12 @@ export class TextField extends BasicField<string> { Copy() { return new TextField(this.Data); } + + ToJson(): { type: Types, data: string, _id: string } { + return { + type: Types.Text, + data: this.Data, + _id: this.Id + } + } } diff --git a/src/server/Client.ts b/src/server/Client.ts new file mode 100644 index 000000000..6b8841658 --- /dev/null +++ b/src/server/Client.ts @@ -0,0 +1,15 @@ +import { computed } from "mobx"; + +export class Client { + constructor(guid: string) { + this.guid = guid + } + + private guid: string; + + @computed + public get GUID(): string { + return this.guid + } + +}
\ No newline at end of file diff --git a/src/server/Message.ts b/src/server/Message.ts new file mode 100644 index 000000000..7f3190f7f --- /dev/null +++ b/src/server/Message.ts @@ -0,0 +1,125 @@ +import { Utils } from "../Utils"; + +export class Message<T> { + private name: string; + private guid: string; + + get Name(): string { + return this.name; + } + + get Message(): string { + return this.guid + } + + constructor(name: string) { + this.name = name; + this.guid = Utils.GenerateDeterministicGuid(name) + } + + GetValue() { + return this.Name; + } +} + +class TestMessageArgs { + hello: string = ""; +} + +export class SetFieldArgs { + field: string; + value: any; + + constructor(f: string, v: any) { + this.field = f + this.value = v + } +} + +export class GetFieldArgs { + field: string; + + constructor(f: string) { + this.field = f + } +} + +export enum Types { + Number, List, Key, Image, Document, Text, RichText, DocumentReference +} + +export class DocumentTransfer implements Transferable { + readonly type = Types.Document + _id: string + + constructor(readonly obj: { type: Types, data: [string, string][], _id: string }) { + this._id = obj._id + } +} + +export class ImageTransfer implements Transferable { + readonly type = Types.Image + + constructor(readonly _id: string) { } +} + +export class KeyTransfer implements Transferable { + name: string + readonly _id: string + readonly type = Types.Key + + constructor(i: string, n: string) { + this.name = n + this._id = i + } +} + +export class ListTransfer implements Transferable { + type = Types.List; + + constructor(readonly _id: string) { } +} + +export class NumberTransfer implements Transferable { + readonly type = Types.Number + + constructor(readonly value: number, readonly _id: string) { } +} + +export class TextTransfer implements Transferable { + value: string + readonly _id: string + readonly type = Types.Text + + constructor(t: string, i: string) { + this.value = t + this._id = i + } +} + +export class RichTextTransfer implements Transferable { + value: string + readonly _id: string + readonly type = Types.Text + + constructor(t: string, i: string) { + this.value = t + this._id = i + } +} + +export interface Transferable { + readonly _id: string + readonly type: Types +} + +export namespace MessageStore { + export const Foo = new Message<string>("Foo"); + export const Bar = new Message<string>("Bar"); + export const AddDocument = new Message<DocumentTransfer>("Add Document"); + export const SetField = new Message<{ _id: string, data: any, type: Types }>("Set Field") + export const GetField = new Message<string>("Get Field") + export const GetFields = new Message<string[]>("Get Fields") + export const GetDocument = new Message<string>("Get Document"); + export const DeleteAll = new Message<any>("Delete All"); +}
\ No newline at end of file diff --git a/src/server/ServerUtil.ts b/src/server/ServerUtil.ts new file mode 100644 index 000000000..46c409ec4 --- /dev/null +++ b/src/server/ServerUtil.ts @@ -0,0 +1,48 @@ +import { Field } from './../fields/Field'; +import { TextField } from './../fields/TextField'; +import { NumberField } from './../fields/NumberField'; +import { RichTextField } from './../fields/RichTextField'; +import { Key } from './../fields/Key'; +import { ImageField } from './../fields/ImageField'; +import { ListField } from './../fields/ListField'; +import { Document } from './../fields/Document'; +import { Server } from './../client/Server'; +import { Types } from './Message'; +import { Utils } from '../Utils'; + +export class ServerUtils { + public static FromJson(json: any): Field { + let obj = json + let data: any = obj.data + let id: string = obj._id + let type: Types = obj.type + + if (!(data !== undefined && id && type !== undefined)) { + console.log("how did you manage to get an object that doesn't have a data or an id?") + return new TextField("Something to fill the space", Utils.GenerateGuid()); + } + + switch (type) { + case Types.Number: + return new NumberField(data, id, false) + case Types.Text: + return new TextField(data, id, false) + case Types.RichText: + return new RichTextField(data, id, false) + case Types.Key: + return new Key(data, id, false) + case Types.Image: + return new ImageField(new URL(data), id, false) + case Types.List: + return ListField.FromJson(id, data) + case Types.Document: + let doc: Document = new Document(id, false) + let fields: [string, string][] = data as [string, string][] + fields.forEach(element => { + doc._proxies.set(element[0], element[1]); + }); + return doc + } + return new TextField(data, id) + } +}
\ No newline at end of file diff --git a/src/server/authentication/config/passport.ts b/src/server/authentication/config/passport.ts new file mode 100644 index 000000000..05f6c3133 --- /dev/null +++ b/src/server/authentication/config/passport.ts @@ -0,0 +1,49 @@ +import * as passport from 'passport' +import * as passportLocal from 'passport-local'; +import * as mongodb from 'mongodb'; +import * as _ from "lodash"; +import { default as User } from '../models/User'; +import { Request, Response, NextFunction } from "express"; + +const LocalStrategy = passportLocal.Strategy; + +passport.serializeUser<any, any>((user, done) => { + done(undefined, user.id); +}); + +passport.deserializeUser<any, any>((id, done) => { + User.findById(id, (err, user) => { + done(err, user); + }); +}); + +// AUTHENTICATE JUST WITH EMAIL AND PASSWORD +passport.use(new LocalStrategy({ usernameField: 'email' }, (email, password, done) => { + User.findOne({ email: email.toLowerCase() }, (error: any, user: any) => { + if (error) return done(error); + if (!user) return done(undefined, false, { message: "Invalid email or password" }) // invalid email + user.comparePassword(password, (error: Error, isMatch: boolean) => { + if (error) return done(error); + if (!isMatch) return done(undefined, false, { message: "Invalid email or password" }); // invalid password + // valid authentication HERE + return done(undefined, user); + }); + }); +})); + +export let isAuthenticated = (req: Request, res: Response, next: NextFunction) => { + if (req.isAuthenticated()) { + return next(); + } + return res.redirect("/login"); +} + +export let isAuthorized = (req: Request, res: Response, next: NextFunction) => { + const provider = req.path.split("/").slice(-1)[0]; + + if (_.find(req.user.tokens, { kind: provider })) { + next(); + } else { + res.redirect(`/auth/${provider}`); + } +};
\ No newline at end of file diff --git a/src/server/authentication/controllers/user.ts b/src/server/authentication/controllers/user.ts new file mode 100644 index 000000000..f74ff9039 --- /dev/null +++ b/src/server/authentication/controllers/user.ts @@ -0,0 +1,107 @@ +import { default as User, UserModel, AuthToken } from "../models/User"; +import { Request, Response, NextFunction } from "express"; +import * as passport from "passport"; +import { IVerifyOptions } from "passport-local"; +import "../config/passport"; +import * as request from "express-validator"; +const flash = require("express-flash"); +import * as session from "express-session"; +import * as pug from 'pug'; + +/** + * GET /signup + * Signup page. + */ +export let getSignup = (req: Request, res: Response) => { + if (req.user) { + return res.redirect("/"); + } + res.render("signup.pug", { + title: "Sign Up" + }); +}; + +/** + * POST /signup + * Create a new local account. + */ +export let postSignup = (req: Request, res: Response, next: NextFunction) => { + req.assert("email", "Email is not valid").isEmail(); + req.assert("password", "Password must be at least 4 characters long").len({ min: 4 }); + req.assert("confirmPassword", "Passwords do not match").equals(req.body.password); + req.sanitize("email").normalizeEmail({ gmail_remove_dots: false }); + + const errors = req.validationErrors(); + + if (errors) { + req.flash("errors", "Unable to facilitate sign up. Please try again."); + return res.redirect("/signup"); + } + + const user = new User({ + email: req.body.email, + password: req.body.password + }); + + User.findOne({ email: req.body.email }, (err, existingUser) => { + if (err) { return next(err); } + if (existingUser) { + req.flash("errors", "Account with that email address already exists."); + return res.redirect("/signup"); + } + user.save((err) => { + if (err) { return next(err); } + req.logIn(user, (err) => { + if (err) { + return next(err); + } + res.redirect("/"); + }); + }); + }); +}; + + +/** + * GET /login + * Login page. + */ +export let getLogin = (req: Request, res: Response) => { + if (req.user) { + return res.redirect("/"); + } + res.send("<p>dear lord please render</p>"); + // res.render("account/login", { + // title: "Login" + // }); +}; + +/** + * POST /login + * Sign in using email and password. + */ +export let postLogin = (req: Request, res: Response, next: NextFunction) => { + req.assert("email", "Email is not valid").isEmail(); + req.assert("password", "Password cannot be blank").notEmpty(); + req.sanitize("email").normalizeEmail({ gmail_remove_dots: false }); + + const errors = req.validationErrors(); + + if (errors) { + req.flash("errors", "Unable to login at this time. Please try again."); + return res.redirect("/login"); + } + + passport.authenticate("local", (err: Error, user: UserModel, info: IVerifyOptions) => { + if (err) { return next(err); } + if (!user) { + req.flash("errors", info.message); + return res.redirect("/login"); + } + req.logIn(user, (err) => { + if (err) { return next(err); } + req.flash("success", "Success! You are logged in."); + res.redirect("/"); + }); + })(req, res, next); +};
\ No newline at end of file diff --git a/src/server/authentication/models/User.ts b/src/server/authentication/models/User.ts new file mode 100644 index 000000000..9752c4260 --- /dev/null +++ b/src/server/authentication/models/User.ts @@ -0,0 +1,89 @@ +//@ts-ignore +import * as bcrypt from "bcrypt-nodejs"; +import * as crypto from "crypto"; +//@ts-ignore +import * as mongoose from "mongoose"; +var url = 'mongodb://localhost:27017/Dash' + +mongoose.connect(url, { useNewUrlParser: true }); + +mongoose.connection.on('connected', function () { + console.log('Stablished connection on ' + url); +}); +mongoose.connection.on('error', function (error) { + console.log('Something wrong happened: ' + error); +}); +mongoose.connection.on('disconnected', function () { + console.log('connection closed'); +}); +export type UserModel = mongoose.Document & { + email: string, + password: string, + passwordResetToken: string, + passwordResetExpires: Date, + tokens: AuthToken[], + + profile: { + name: string, + gender: string, + location: string, + website: string, + picture: string + }, + + comparePassword: comparePasswordFunction, +}; + +type comparePasswordFunction = (candidatePassword: string, cb: (err: any, isMatch: any) => {}) => void; + +export type AuthToken = { + accessToken: string, + kind: string +}; + +const userSchema = new mongoose.Schema({ + email: { type: String, unique: true }, + password: String, + passwordResetToken: String, + passwordResetExpires: Date, + + facebook: String, + twitter: String, + google: String, + tokens: Array, + + profile: { + name: String, + gender: String, + location: String, + website: String, + picture: String + } +}, { timestamps: true }); + +/** + * Password hash middleware. + */ +userSchema.pre("save", function save(next) { + const user = this as UserModel; + if (!user.isModified("password")) { return next(); } + bcrypt.genSalt(10, (err, salt) => { + if (err) { return next(err); } + bcrypt.hash(user.password, salt, () => void {}, (err: mongoose.Error, hash) => { + if (err) { return next(err); } + user.password = hash; + next(); + }); + }); +}); + +const comparePassword: comparePasswordFunction = function (this: UserModel, candidatePassword, cb) { + bcrypt.compare(candidatePassword, this.password, (err: mongoose.Error, isMatch: boolean) => { + cb(err, isMatch); + }); +}; + +userSchema.methods.comparePassword = comparePassword; + +const User = mongoose.model("User", userSchema); +export default User;
\ No newline at end of file diff --git a/src/server/database.ts b/src/server/database.ts new file mode 100644 index 000000000..07c5819ab --- /dev/null +++ b/src/server/database.ts @@ -0,0 +1,81 @@ +import { action, configure } from 'mobx'; +import * as mongodb from 'mongodb'; +import { ObjectID } from 'mongodb'; +import { Transferable } from './Message'; +import { Utils } from '../Utils'; + +export class Database { + public static Instance = new Database() + private MongoClient = mongodb.MongoClient; + private url = 'mongodb://localhost:27017/Dash'; + private db?: mongodb.Db; + + constructor() { + this.MongoClient.connect(this.url, (err, client) => { + this.db = client.db() + }) + } + + public update(id: string, value: any) { + if (this.db) { + let collection = this.db.collection('documents'); + collection.update({ _id: id }, { $set: value }, { + upsert: true + }); + } + } + + public delete(id: string) { + if (this.db) { + let collection = this.db.collection('documents'); + collection.remove({ _id: id }); + } + } + + public deleteAll() { + if (this.db) { + let collection = this.db.collection('documents'); + collection.deleteMany({}); + } + } + + public insert(kvpairs: any) { + if (this.db) { + let collection = this.db.collection('documents'); + collection.insertOne(kvpairs, (err: any, res: any) => { + if (err) { + // console.log(err) + return + } + }); + } + } + + public getDocument(id: string, fn: (res: any) => void) { + var result: JSON; + if (this.db) { + let collection = this.db.collection('documents'); + collection.findOne({ _id: id }, (err: any, res: any) => { + result = res + if (!result) { + fn(undefined) + } + fn(result) + }) + }; + } + + public getDocuments(ids: string[], fn: (res: any) => void) { + if (this.db) { + let collection = this.db.collection('documents'); + let cursor = collection.find({ _id: { "$in": ids } }) + cursor.toArray((err, docs) => { + fn(docs); + }) + }; + } + + public print() { + console.log("db says hi!") + } +} diff --git a/src/server/index.js b/src/server/index.js deleted file mode 100644 index 15e763f9d..000000000 --- a/src/server/index.js +++ /dev/null @@ -1,13 +0,0 @@ -"use strict"; -exports.__esModule = true; -var express = require("express"); -var app = express(); -var port = 8080; // default port to listen -// define a route handler for the default home page -app.get("/", function (req, res) { - res.send("Hello world!"); -}); -// start the Express server -app.listen(port, function () { - console.log("server started at http://localhost:" + port); -}); diff --git a/src/server/index.ts b/src/server/index.ts index 640ad8180..f5e66b31b 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -4,9 +4,71 @@ import * as webpack from 'webpack' import * as wdm from 'webpack-dev-middleware'; import * as whm from 'webpack-hot-middleware'; import * as path from 'path' -const config = require('../../webpack.config') -const compiler = webpack(config) +import * as passport from 'passport'; +import { MessageStore, Message, SetFieldArgs, GetFieldArgs, Transferable } from "./Message"; +import { Client } from './Client'; +import { Socket } from 'socket.io'; +import { Utils } from '../Utils'; +import { ObservableMap } from 'mobx'; +import { FieldId, Field } from '../fields/Field'; +import { Database } from './database'; +import { ServerUtils } from './ServerUtil'; +import { ObjectID } from 'mongodb'; +import { Document } from '../fields/Document'; +import * as io from 'socket.io' +import * as passportConfig from './authentication/config/passport'; +import { getLogin, postLogin, getSignup, postSignup } from './authentication/controllers/user'; +const config = require('../../webpack.config'); +const compiler = webpack(config); const port = 1050; // default port to listen +const serverPort = 1234; +import * as expressValidator from 'express-validator'; +import expressFlash = require('express-flash'); +import * as bodyParser from 'body-parser'; +import * as session from 'express-session'; +import c = require("crypto"); +const MongoStore = require('connect-mongo')(session); +const mongoose = require('mongoose'); +const bluebird = require('bluebird'); +import { performance } from 'perf_hooks' + +const mongoUrl = 'mongodb://localhost:27017/Dash'; +// mongoose.Promise = bluebird; +mongoose.connect(mongoUrl)//.then( +// () => { /** ready to use. The `mongoose.connect()` promise resolves to undefined. */ }, +// ).catch((err: any) => { +// console.log("MongoDB connection error. Please make sure MongoDB is running. " + err); +// process.exit(); +// }); +mongoose.connection.on('connected', function () { + console.log("connected"); +}) + +app.use(bodyParser.json()); +app.use(bodyParser.urlencoded({ extended: true })); +app.use(expressValidator()); +app.use(expressFlash()); +app.use(require('express-session')({ + secret: `${c.randomBytes(64)}`, + resave: true, + saveUninitialized: true, + store: new MongoStore({ + url: 'mongodb://localhost:27017/Dash' + }) +})); +app.use(passport.initialize()); +app.use(passport.session()); +app.use((req, res, next) => { + res.locals.user = req.user; + next(); +}); + +app.get("/signup", getSignup); +app.post("/signup", postSignup); +app.get("/login", getLogin); +app.post("/login", postLogin); + +let FieldStore: ObservableMap<FieldId, Field> = new ObservableMap(); // define a route handler for the default home page app.get("/", (req, res) => { @@ -17,6 +79,11 @@ app.get("/hello", (req, res) => { res.send("<p>Hello</p>"); }) +app.get("/delete", (req, res) => { + deleteAll(); + res.redirect("/"); +}); + app.use(wdm(compiler, { publicPath: config.output.publicPath })) @@ -26,4 +93,58 @@ app.use(whm(compiler)) // start the Express server app.listen(port, () => { console.log(`server started at http://localhost:${port}`); -});
\ No newline at end of file +}) + +const server = io(); +interface Map { + [key: string]: Client; +} +let clients: Map = {} + +server.on("connection", function (socket: Socket) { + console.log("a user has connected") + + Utils.Emit(socket, MessageStore.Foo, "handshooken") + + Utils.AddServerHandler(socket, MessageStore.Bar, barReceived) + Utils.AddServerHandler(socket, MessageStore.SetField, (args) => setField(socket, args)) + Utils.AddServerHandlerCallback(socket, MessageStore.GetField, getField) + Utils.AddServerHandlerCallback(socket, MessageStore.GetFields, getFields) + Utils.AddServerHandler(socket, MessageStore.DeleteAll, deleteAll) +}) + +function deleteAll() { + Database.Instance.deleteAll(); +} + +function barReceived(guid: String) { + clients[guid.toString()] = new Client(guid.toString()); + // Database.Instance.print() +} + +function addDocument(document: Document) { + +} + +function getField([id, callback]: [string, (result: any) => void]) { + Database.Instance.getDocument(id, (result: any) => { + if (result) { + callback(result) + } + else { + callback(undefined) + } + }) +} + +function getFields([ids, callback]: [string[], (result: any) => void]) { + Database.Instance.getDocuments(ids, callback); +} + +function setField(socket: Socket, newValue: Transferable) { + Database.Instance.update(newValue._id, newValue) + socket.broadcast.emit(MessageStore.SetField.Message, newValue) +} + +server.listen(serverPort); +console.log(`listening on port ${serverPort}`);
\ No newline at end of file |