From c67608a7eeeb6bdee27a8e7b4a8f6f8561db6004 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Mon, 21 Jan 2019 22:25:52 -0500 Subject: Small fixes and start of drag drop --- src/Main.tsx | 23 +++++------------------ 1 file changed, 5 insertions(+), 18 deletions(-) (limited to 'src/Main.tsx') diff --git a/src/Main.tsx b/src/Main.tsx index 9ce1dd4e9..7c132f179 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -21,40 +21,27 @@ configure({ const mainNodeCollection = new NodeCollectionStore(); ReactDOM.render((
-

Dash Web

- + +
), document.getElementById('root')); +function minus() { - -// create a bunch of text and video nodes (you probably want to delete this at some point) -let numNodes = 300; -let maxX = 10000; -let maxY = 10000; -let nodes:NodeStore[] = [] -for (let i = 0; i < numNodes; i++) { - nodes.push(new StaticTextNodeStore({ X: Math.random() * maxX, Y: Math.random() * maxY, Title: "Text Node Title", Text: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" })); } - -for (let i = 0; i < 20; i++) { - nodes.push(new VideoNodeStore({ X: Math.random() * maxX, Y: Math.random() * maxY, Title: "Video Node Title", Url: "http://cs.brown.edu/people/peichman/downloads/cted.mp4" })); -} - runInAction(() => { - mainNodeCollection.AddNodes(nodes); let doc1 = Documents.TextDocument("Hello world"); let doc2 = doc1.MakeDelegate(); doc2.SetField(KS.X, new NumberField(150)); doc2.SetField(KS.Y, new NumberField(20)); - let doc3 = Documents.ImageDocument("https://static.boredpanda.com/blog/wp-content/uploads/2018/04/5acb63d83493f__700-png.jpg", { + let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { x: 450, y: 500 }); let docset = new Array(doc1, doc2); let doc4 = Documents.CollectionDocument(docset, { x: 100, y: 400 }); - let doc5 = Documents.ImageDocument("https://static.boredpanda.com/blog/wp-content/uploads/2018/04/5acb63d83493f__700-png.jpg", { + let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { x: 650, y: 500 }); mainNodeCollection.Docs.push(doc1); -- cgit v1.2.3-70-g09d2 From 8a1915a73d1d1173059a212db3b79f8efcdd9e9e Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Tue, 22 Jan 2019 20:31:32 -0500 Subject: Temporarily got rid of dvm to draastically improve performance and reduce number of re-renders --- src/Main.tsx | 4 - src/documents/Documents.ts | 2 +- .../freeformcanvas/CollectionFreeFormView.tsx | 3 +- src/views/freeformcanvas/FreeFormCanvas.tsx | 2 +- src/views/nodes/DocumentView.tsx | 130 ++++++++++++--------- test/test.ts | 4 + 6 files changed, 79 insertions(+), 66 deletions(-) (limited to 'src/Main.tsx') diff --git a/src/Main.tsx b/src/Main.tsx index 7c132f179..5482314ae 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -23,12 +23,8 @@ ReactDOM.render((
-
), document.getElementById('root')); -function minus() { - -} runInAction(() => { let doc1 = Documents.TextDocument("Hello world"); let doc2 = doc1.MakeDelegate(); diff --git a/src/documents/Documents.ts b/src/documents/Documents.ts index 084666b95..a2d2218af 100644 --- a/src/documents/Documents.ts +++ b/src/documents/Documents.ts @@ -56,7 +56,7 @@ export namespace Documents { imageProto.SetField(KeyStore.Y, new NumberField(0)); imageProto.SetField(KeyStore.Width, new NumberField(300)); imageProto.SetField(KeyStore.Height, new NumberField(300)); - imageProto.SetField(KeyStore.Layout, new TextField('Image not found')); + imageProto.SetField(KeyStore.Layout, new TextField('Image not found')); // imageProto.SetField(KeyStore.Layout, new TextField('
')); imageProto.SetField(KeyStore.LayoutFields, new ListField([KeyStore.Data])); } diff --git a/src/views/freeformcanvas/CollectionFreeFormView.tsx b/src/views/freeformcanvas/CollectionFreeFormView.tsx index d9a88fcd3..e1aeff534 100644 --- a/src/views/freeformcanvas/CollectionFreeFormView.tsx +++ b/src/views/freeformcanvas/CollectionFreeFormView.tsx @@ -54,7 +54,6 @@ export class CollectionFreeFormView extends React.Component { @action onPointerMove = (e: PointerEvent): void => { - e.preventDefault(); e.stopPropagation(); if (!this._isPointerDown) { return; @@ -97,7 +96,7 @@ export class CollectionFreeFormView extends React.Component {
{value.map(doc => { - return (); + return (); })}
diff --git a/src/views/freeformcanvas/FreeFormCanvas.tsx b/src/views/freeformcanvas/FreeFormCanvas.tsx index de5e88fa1..e051fd97c 100644 --- a/src/views/freeformcanvas/FreeFormCanvas.tsx +++ b/src/views/freeformcanvas/FreeFormCanvas.tsx @@ -80,7 +80,7 @@ export class FreeFormCanvas extends React.Component {
{this.props.store.Docs.map(doc => { - return (); + return (); })}
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index cdc20cdfe..648ea7f50 100644 --- a/src/views/nodes/DocumentView.tsx +++ b/src/views/nodes/DocumentView.tsx @@ -14,10 +14,56 @@ import { SelectionManager } from "../../util/SelectionManager"; import { DocumentDecorations } from "../../DocumentDecorations"; import { SSL_OP_DONT_INSERT_EMPTY_FRAGMENTS } from "constants"; import { DragManager } from "../../util/DragManager"; +import { Document } from "../../fields/Document"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? interface IProps { - dvm: DocumentViewModel; + dvm: Document; +} + +@observer +class DocumentContents extends React.Component boolean}> { + + @computed + get layout(): string { + return this.props.dvm.GetFieldValue(KeyStore.Layout, TextField, String("

Error loading layout data

")); + } + + @computed + get layoutKeys(): Key[] { + return this.props.dvm.GetFieldValue(KeyStore.LayoutKeys, ListField, new Array()); + } + + @computed + get layoutFields(): Key[] { + return this.props.dvm.GetFieldValue(KeyStore.LayoutFields, ListField, new Array()); + } + render() { + let doc = this.props.dvm; + let bindings: any = { + doc: doc, + isSelected: this.props.isSelected + }; + for (const key of this.layoutKeys) { + bindings[key.Name + "Key"] = key; + } + for (const key of this.layoutFields) { + let field = doc.GetField(key); + if (field) { + bindings[key.Name] = field.GetValue(); + } + } + return { console.log(test) }} + /> + + + } + } @observer @@ -25,7 +71,7 @@ export class DocumentView extends React.Component { private _mainCont = React.createRef(); get screenRect(): ClientRect | DOMRect { - if(this._mainCont.current) { + if (this._mainCont.current) { return this._mainCont.current.getBoundingClientRect(); } return new DOMRect(); @@ -33,20 +79,20 @@ export class DocumentView extends React.Component { @computed get x(): number { - return this.props.dvm.Doc.GetFieldValue(KeyStore.X, NumberField, Number(0)); + return this.props.dvm.GetFieldValue(KeyStore.X, NumberField, Number(0)); } @computed get y(): number { - return this.props.dvm.Doc.GetFieldValue(KeyStore.Y, NumberField, Number(0)); + return this.props.dvm.GetFieldValue(KeyStore.Y, NumberField, Number(0)); } set x(x: number) { - this.props.dvm.Doc.SetFieldValue(KeyStore.X, x, NumberField) + this.props.dvm.SetFieldValue(KeyStore.X, x, NumberField) } set y(y: number) { - this.props.dvm.Doc.SetFieldValue(KeyStore.Y, y, NumberField) + this.props.dvm.SetFieldValue(KeyStore.Y, y, NumberField) } @computed @@ -56,35 +102,20 @@ export class DocumentView extends React.Component { @computed get width(): number { - return this.props.dvm.Doc.GetFieldValue(KeyStore.Width, NumberField, Number(0)); + return this.props.dvm.GetFieldValue(KeyStore.Width, NumberField, Number(0)); } set width(w: number) { - this.props.dvm.Doc.SetFieldValue(KeyStore.Width, w, NumberField) + this.props.dvm.SetFieldValue(KeyStore.Width, w, NumberField) } @computed get height(): number { - return this.props.dvm.Doc.GetFieldValue(KeyStore.Height, NumberField, Number(0)); + return this.props.dvm.GetFieldValue(KeyStore.Height, NumberField, Number(0)); } set height(h: number) { - this.props.dvm.Doc.SetFieldValue(KeyStore.Height, h, NumberField) - } - - @computed - get layout(): string { - return this.props.dvm.Doc.GetFieldValue(KeyStore.Layout, TextField, String("

Error loading layout data

")); - } - - @computed - get layoutKeys(): Key[] { - return this.props.dvm.Doc.GetFieldValue(KeyStore.LayoutKeys, ListField, new Array()); - } - - @computed - get layoutFields(): Key[] { - return this.props.dvm.Doc.GetFieldValue(KeyStore.LayoutFields, ListField, new Array()); + this.props.dvm.SetFieldValue(KeyStore.Height, h, NumberField) } @computed @@ -92,22 +123,26 @@ export class DocumentView extends React.Component { return SelectionManager.IsSelected(this) } + isSelected = (): boolean => { + return this.selected + } + private _isPointerDown = false; componentDidMount() { - if(this._mainCont.current) { - DragManager.MakeDraggable(this._mainCont.current, { - buttons: 3, - handlers: { - dragComplete: () => {}, - dragStart: () => {} - } - }) - } + return; + // if(this._mainCont.current) { + // DragManager.MakeDraggable(this._mainCont.current, { + // buttons: 2, + // handlers: { + // dragComplete: () => {}, + // dragStart: () => {} + // } + // }) + // } } onPointerDown = (e: React.PointerEvent): void => { - return; e.stopPropagation(); if (e.button === 2) { this._isPointerDown = true; @@ -139,7 +174,7 @@ export class DocumentView extends React.Component { } this.x += e.movementX; this.y += e.movementY; - DocumentDecorations.Instance.opacity = 0 + //DocumentDecorations.Instance.opacity = 0 } onDragStart = (e: React.DragEvent): void => { @@ -150,21 +185,6 @@ export class DocumentView extends React.Component { } render() { - let doc = this.props.dvm.Doc; - let bindings: any = { - doc: doc, - isSelected: () => this.selected - }; - for (const key of this.layoutKeys) { - bindings[key.Name + "Key"] = key; - } - for (const key of this.layoutFields) { - let field = doc.GetField(key); - if (field) { - bindings[key.Name] = field.GetValue(); - } - } - return (
{ e.preventDefault() }} onPointerDown={this.onPointerDown}> - { console.log(test) }} - /> +
); } diff --git a/test/test.ts b/test/test.ts index 8c1740ba6..3c8fae8d7 100644 --- a/test/test.ts +++ b/test/test.ts @@ -40,10 +40,14 @@ describe("Document", () =>{ it('should update', () => { let doc = new Document(); let key = new Key("Test"); + let key2 = new Key("Test2"); let ran = false; reaction(() => doc.GetField(key), (field) => {ran = true}); expect(ran).to.equal(false); + doc.SetField(key2, new NumberField(4)); + expect(ran).to.equal(false); + doc.SetField(key, new NumberField(5)); expect(ran).to.equal(true); -- cgit v1.2.3-70-g09d2