aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
Diffstat (limited to 'src/client')
-rw-r--r--src/client/Server.ts4
-rw-r--r--src/client/SocketStub.ts30
-rw-r--r--src/client/documents/Documents.ts11
-rw-r--r--src/client/views/Main.tsx112
4 files changed, 98 insertions, 59 deletions
diff --git a/src/client/Server.ts b/src/client/Server.ts
index 30fc57c93..a08fc2e87 100644
--- a/src/client/Server.ts
+++ b/src/client/Server.ts
@@ -48,8 +48,8 @@ export class Server {
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) {
+ SocketStub.SEND_SET_FIELD(field);
}
static connected(message: string) {
diff --git a/src/client/SocketStub.ts b/src/client/SocketStub.ts
index bdf326cd8..03c0131ba 100644
--- a/src/client/SocketStub.ts
+++ b/src/client/SocketStub.ts
@@ -2,7 +2,7 @@ import { Field, FIELD_ID } from "../fields/Field"
import { Key, KeyStore } from "../fields/Key"
import { ObservableMap, action } from "mobx";
import { Document } from "../fields/Document"
-import { MessageStore, SetFieldArgs, GetFieldArgs } from "../server/Message";
+import { MessageStore, SetFieldArgs, GetFieldArgs, DocumentTransfer, Types } from "../server/Message";
import { Utils } from "../Utils";
import { Server } from "./Server";
@@ -15,13 +15,21 @@ 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.Id, (f as Field).Id));
-
- // Server.Socket.emit(MessageStore.AddDocument.Message, document)
+ // 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));
+
+ Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(document.ToJson()))
}
public static SEND_FIELD_REQUEST(fieldid: FIELD_ID, callback: (field: Field) => void) {
@@ -45,6 +53,7 @@ export class SocketStub {
// 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) {
@@ -58,13 +67,12 @@ export class SocketStub {
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
- let msg: SetFieldArgs = new SetFieldArgs(field.Id as string, value)
- Utils.Emit(Server.Socket, MessageStore.SetField, msg)
+ Utils.Emit(Server.Socket, MessageStore.SetField, field.ToJson())
}
}
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 6925234fe..460bf9b23 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -120,19 +120,20 @@ export namespace Documents {
imageProto.Set(KeyStore.Layout, new TextField(ImageBox.LayoutString()));
// imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />'));
imageProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
- Server.AddDocument(imageProto);
+ // Server.AddDocument(imageProto);
return imageProto;
}
- return Server.GetField(imageProtoId) as Document;
+ return new Document();
+ // return Server.GetField(imageProtoId) as Document;
}
export function ImageDocument(url: string, options: DocumentOptions = {}): Document {
let doc = GetImagePrototype().MakeDelegate();
setupOptions(doc, options);
doc.Set(KeyStore.Data, new ImageField(new URL(url)));
- Server.AddDocument(doc);
- var sdoc = Server.GetField(doc.Id) as Document;
- return sdoc;
+ // Server.AddDocument(doc);
+ // var sdoc = Server.GetField(doc.Id) as Document;
+ return doc;
}
let collectionProto: Document;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 6a065327b..197529c91 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -39,54 +39,84 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
//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 docset = [doc1, doc2, doc3, doc7];
- let doc4 = Documents.CollectionDocument(docset, {
- x: 0, y: 400, title: "mini collection"
- });
- // 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 = new Array<Document>(doc4);//, doc1, doc3);
- let doc6 = Documents.CollectionDocument(docset2, {
- x: 350, y: 100, width: 600, height: 600, title: "docking collection"
- });
- let mainNodes = null;// mainContainer.GetFieldT(KeyStore.Data, ListField);
- if (!mainNodes) {
- mainNodes = new ListField<Document>();
- }
- // 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);
-}
+// 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 docset: Document[] = [];
+let doc4 = Documents.CollectionDocument(docset, {
+ x: 0, y: 400, title: "mini collection"
+});
+mainContainer = doc4;
+// 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 = 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);
//}
//);
+let addImageNode = action(() => {
+ doc4.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(() => {
+ doc4.GetList<Document>(KeyStore.Data, []).push(Documents.TextDocument({
+ x: 0, y: 300, width: 200, height: 200, title: "added note"
+ }));
+})
+let addColNode = action(() => {
+ doc4.GetList<Document>(KeyStore.Data, []).push(Documents.CollectionDocument([], {
+ x: 0, y: 300, width: 200, height: 200, title: "added note"
+ }));
+})
+
ReactDOM.render((
<div style={{ position: "absolute", width: "100%", height: "100%" }}>
<DocumentView Document={mainContainer} ContainingCollectionView={undefined} DocumentView={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>
</div>),
document.getElementById('root')); \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 16:14:04 +0000