diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/Main.tsx | 19 | ||||
| -rw-r--r-- | src/controllers/BasicFieldController.ts | 22 | ||||
| -rw-r--r-- | src/controllers/DocumentController.ts | 73 | ||||
| -rw-r--r-- | src/controllers/DocumentReferenceController.ts | 8 | ||||
| -rw-r--r-- | src/controllers/FieldController.ts | 26 | ||||
| -rw-r--r-- | src/controllers/KeyController.ts | 6 | ||||
| -rw-r--r-- | src/stores/NodeCollectionStore.ts | 4 | ||||
| -rw-r--r-- | src/views/freeformcanvas/FreeFormCanvas.tsx | 10 | ||||
| -rw-r--r-- | src/views/freeformcanvas/NodeContainer.tsx | 9 | ||||
| -rw-r--r-- | src/views/nodes/DocumentView.tsx | 63 |
10 files changed, 129 insertions, 111 deletions
diff --git a/src/Main.tsx b/src/Main.tsx index 51a3c8bbd..af7e2a8d4 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -6,8 +6,10 @@ import { RootStore } from './stores/RootStore'; import { StaticTextNodeStore } from './stores/StaticTextNodeStore'; import { VideoNodeStore } from './stores/VideoNodeStore'; import { FreeFormCanvas } from './views/freeformcanvas/FreeFormCanvas'; -import { KeyController } from './controllers/KeyController'; +import { KeyController, KeyStore as KS } from './controllers/KeyController'; import { NumberController } from './controllers/NumberController'; +import { DocumentController } from './controllers/DocumentController'; +import { TextController } from './controllers/TextController'; const mainNodeCollection = new NodeCollectionStore(); @@ -32,10 +34,11 @@ 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" })); } -let test1 = new KeyController("Test"), test2 = new KeyController("Test"); -let test3 = new NumberController(55); -console.log(test1 == test2); -console.log(test1 === test2); -console.log(test1.Equals(test2)); -console.log(test1.Equals(test3)); -mainNodeCollection.AddNodes(nodes);
\ No newline at end of file +mainNodeCollection.AddNodes(nodes); +let doc1 = new DocumentController(); +doc1.SetField(KS.X, new NumberController(5)); +doc1.SetField(KS.Y, new NumberController(5)); +doc1.SetField(KS.Width, new NumberController(5)); +doc1.SetField(KS.Height, new NumberController(5)); +doc1.SetField(KS.Data, new TextController("Hello world")); +mainNodeCollection.Docs.push(doc1);
\ No newline at end of file diff --git a/src/controllers/BasicFieldController.ts b/src/controllers/BasicFieldController.ts index ff88f8781..923bc335c 100644 --- a/src/controllers/BasicFieldController.ts +++ b/src/controllers/BasicFieldController.ts @@ -1,7 +1,17 @@ import { FieldController } from "./FieldController" -import { FieldUpdatedAction } from "./FieldUpdatedArgs"; +import { observable, computed, action } from "mobx"; export abstract class BasicFieldController<T> extends FieldController { + constructor(data: T) { + super(); + + this.data = data; + } + + @observable + private data:T; + + @computed get Data(): T { return this.data; } @@ -11,17 +21,9 @@ export abstract class BasicFieldController<T> extends FieldController { return; } this.data = value; - - this.FieldUpdated.emit({ - field: this, - action: FieldUpdatedAction.Update - }); - } - - constructor(private data: T) { - super(); } + @action TrySetValue(value: any): boolean { if (typeof value == typeof this.data) { this.Data = value; diff --git a/src/controllers/DocumentController.ts b/src/controllers/DocumentController.ts index 02ef66417..0627f9717 100644 --- a/src/controllers/DocumentController.ts +++ b/src/controllers/DocumentController.ts @@ -2,25 +2,25 @@ import { FieldController, Cast, Opt } from "./FieldController" import { KeyController, KeyStore } from "./KeyController" import { TypedEvent, Listener, Disposable } from "../util/TypedEvent"; import { DocumentUpdatedArgs, FieldUpdatedAction } from "./FieldUpdatedArgs"; +import { ObservableMap } from "mobx"; export class DocumentController extends FieldController { - private fields: { [key: string]: { key: KeyController, field: FieldController, disposer: Disposable } } = {}; - private fieldUpdateHandlers: { [key: string]: TypedEvent<DocumentUpdatedArgs> } = {}; + private fields: ObservableMap<KeyController, FieldController> = new ObservableMap(); GetField(key: KeyController, ignoreProto?: boolean): Opt<FieldController> { let field: Opt<FieldController>; if (ignoreProto) { - if (key.Id in this.fields) { - field = this.fields[key.Id].field; + if (this.fields.has(key)) { + field = this.fields.get(key); } } else { let doc: Opt<DocumentController> = this; - while (doc && !(key.Id in doc.fields)) { + while (doc && !(doc.fields.has(key))) { doc = doc.GetPrototype(); } if (doc) { - field = doc.fields[key.Id].field; + field = doc.fields.get(key); } } @@ -32,45 +32,11 @@ export class DocumentController extends FieldController { } SetField(key: KeyController, field: Opt<FieldController>): void { - let oldField: Opt<FieldController>; - if (key.Id in this.fields) { - let old = this.fields[key.Id]; - oldField = old.field; - old.disposer.dispose(); - } - - if (oldField === field) { - return; - } - - if (field == null) { - delete this.fields[key.Id]; + if (field) { + this.fields.set(key, field); } else { - this.fields[key.Id] = { - key: key, - field: field, - disposer: field.FieldUpdated.on((args) => this.DocumentFieldUpdated({ - action: FieldUpdatedAction.Update, - oldValue: undefined, - newValue: field, - field: this, - fieldArgs: args, - key: key - })) - } + this.fields.delete(key); } - - let action = oldField === null ? FieldUpdatedAction.Add : - (field === null ? FieldUpdatedAction.Remove : - FieldUpdatedAction.Replace); - - this.DocumentFieldUpdated({ - field: this, - key: key, - oldValue: oldField, - newValue: field, - action: action - }) } SetFieldValue<T extends FieldController>(key: KeyController, value: any, ctor: { new(): T }): boolean { @@ -110,27 +76,6 @@ export class DocumentController extends FieldController { return delegate; } - private DocumentFieldUpdated(args: DocumentUpdatedArgs) { - if (args.key.Id in this.fieldUpdateHandlers) { - this.fieldUpdateHandlers[args.key.Id].emit(args); - } - this.FieldUpdated.emit(args); - } - - AddFieldUpdatedHandler(key: KeyController, listener: Listener<DocumentUpdatedArgs>): Disposable { - if (!(key.Id in this.fieldUpdateHandlers)) { - this.fieldUpdateHandlers[key.Id] = new TypedEvent<DocumentUpdatedArgs>(); - } - - return this.fieldUpdateHandlers[key.Id].on(listener); - } - - RemoveFieldUpdatedHandler(key: KeyController, listener: Listener<DocumentUpdatedArgs>) { - if (key.Id in this.fieldUpdateHandlers) { - this.fieldUpdateHandlers[key.Id].off(listener); - } - } - TrySetValue(value: any): boolean { throw new Error("Method not implemented."); } diff --git a/src/controllers/DocumentReferenceController.ts b/src/controllers/DocumentReferenceController.ts index 9cf128614..8e0aaf0e9 100644 --- a/src/controllers/DocumentReferenceController.ts +++ b/src/controllers/DocumentReferenceController.ts @@ -14,19 +14,17 @@ export class DocumentReferenceController extends FieldController { constructor(private document: DocumentController, private key: KeyController) { super(); - - document.AddFieldUpdatedHandler(key, this.DocFieldUpdated); } private DocFieldUpdated(args: DocumentUpdatedArgs):void{ - this.FieldUpdated.emit(args.fieldArgs); + // this.FieldUpdated.emit(args.fieldArgs); } - protected DereferenceImpl() : Opt<FieldController> { + Dereference() : Opt<FieldController> { return this.document.GetField(this.key); } - protected DereferenceToRootImpl(): Opt<FieldController> { + DereferenceToRoot(): Opt<FieldController> { let field: Opt<FieldController> = this; while (field instanceof DocumentReferenceController) { field = field.Dereference(); diff --git a/src/controllers/FieldController.ts b/src/controllers/FieldController.ts index 6e7daf6e1..ec59f53e8 100644 --- a/src/controllers/FieldController.ts +++ b/src/controllers/FieldController.ts @@ -15,7 +15,7 @@ export function Cast<T extends FieldController>(field: Opt<FieldController>, cto export type Opt<T> = T | undefined; export abstract class FieldController { - FieldUpdated: TypedEvent<Opt<FieldUpdatedArgs>> = new TypedEvent<Opt<FieldUpdatedArgs>>(); + //FieldUpdated: TypedEvent<Opt<FieldUpdatedArgs>> = new TypedEvent<Opt<FieldUpdatedArgs>>(); private id: string; get Id(): string { @@ -26,32 +26,22 @@ export abstract class FieldController { this.id = id || Utils.GenerateGuid(); } - protected DereferenceImpl(): Opt<FieldController> { + Dereference(): Opt<FieldController> { return this; } - protected DereferenceToRootImpl(): Opt<FieldController> { + DereferenceToRoot(): Opt<FieldController> { return this; } - Dereference<T extends FieldController = FieldController>(ctor?: { new(): T }): Opt<T> { - let field = this.DereferenceImpl(); - if (ctor && field instanceof ctor) { - return field; - } else { - return undefined; - } + DereferenceT<T extends FieldController = FieldController>(ctor: { new(): T }): Opt<T> { + return Cast(this.Dereference(), ctor); } - DereferenceToRoot<T extends FieldController = FieldController>(ctor?: { new(): T }): Opt<T> { - let field = this.DereferenceToRootImpl(); - if (ctor && field instanceof ctor) { - return field; - } else { - return undefined; - } + DereferenceToRootT<T extends FieldController = FieldController>(ctor: { new(): T }): Opt<T> { + return Cast(this.DereferenceToRoot(), ctor); } - Equals(other: FieldController) : boolean { + Equals(other: FieldController): boolean { return this.id === other.id; } diff --git a/src/controllers/KeyController.ts b/src/controllers/KeyController.ts index ad410d756..68eed3961 100644 --- a/src/controllers/KeyController.ts +++ b/src/controllers/KeyController.ts @@ -27,4 +27,10 @@ export class KeyController extends FieldController { export namespace KeyStore { export let Prototype = new KeyController("Prototype"); + export let X = new KeyController("Y"); + export let Y = new KeyController("Y"); + export let Width = new KeyController("Width"); + export let Height = new KeyController("Height"); + export let Data = new KeyController("Data"); + export let View = new KeyController("View"); }
\ No newline at end of file diff --git a/src/stores/NodeCollectionStore.ts b/src/stores/NodeCollectionStore.ts index 8c7f7623b..b6f2ef8e0 100644 --- a/src/stores/NodeCollectionStore.ts +++ b/src/stores/NodeCollectionStore.ts @@ -1,5 +1,6 @@ import { computed, observable, action } from "mobx"; import { NodeStore } from "./NodeStore"; +import { DocumentController } from "../controllers/DocumentController"; export class NodeCollectionStore extends NodeStore { @@ -9,6 +10,9 @@ export class NodeCollectionStore extends NodeStore { @observable public Nodes: NodeStore[] = new Array<NodeStore>(); + @observable + public Docs: DocumentController[] = []; + @computed public get Transform(): string { return "translate(" + this.X + "px," + this.Y + "px) scale(" + this.Scale + "," + this.Scale + ")"; diff --git a/src/views/freeformcanvas/FreeFormCanvas.tsx b/src/views/freeformcanvas/FreeFormCanvas.tsx index dada8f9e5..a80e11ef5 100644 --- a/src/views/freeformcanvas/FreeFormCanvas.tsx +++ b/src/views/freeformcanvas/FreeFormCanvas.tsx @@ -3,6 +3,8 @@ import { NodeCollectionStore } from "../../stores/NodeCollectionStore"; import "./FreeFormCanvas.scss"; import { NodeContainer } from "./NodeContainer"; import React = require("react"); +import { KeyStore } from "../../controllers/KeyController"; +import { NumberController } from "../../controllers/NumberController"; interface IProps { store: NodeCollectionStore @@ -29,6 +31,14 @@ export class FreeFormCanvas extends React.Component<IProps> { this._isPointerDown = false; document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); + + let doc = this.props.store.Docs[0]; + let xField = doc.GetFieldT(KeyStore.X, NumberController); + let x = xField ? xField.Data : 0; + let yField = doc.GetFieldT(KeyStore.Y, NumberController); + let y = yField ? yField.Data : 0; + this.props.store.Docs[0].SetFieldValue(KeyStore.X, x + 10, NumberController); + this.props.store.Docs[0].SetFieldValue(KeyStore.Y, y + 10, NumberController); } onPointerMove = (e: PointerEvent): void => { diff --git a/src/views/freeformcanvas/NodeContainer.tsx b/src/views/freeformcanvas/NodeContainer.tsx index a2edb38a4..c59ab194e 100644 --- a/src/views/freeformcanvas/NodeContainer.tsx +++ b/src/views/freeformcanvas/NodeContainer.tsx @@ -6,6 +6,7 @@ import { TextNodeView } from "../nodes/TextNodeView"; import { VideoNodeView } from "../nodes/VideoNodeView"; import "./FreeFormCanvas.scss"; import React = require("react"); +import { DocumentView } from "../nodes/DocumentView"; interface IProps { store: NodeCollectionStore @@ -17,12 +18,8 @@ export class NodeContainer extends React.Component<IProps> { render() { return ( <div className="node-container"> - {this.props.store.Nodes.map(nodeStore => { - if (nodeStore instanceof StaticTextNodeStore) { - return (<TextNodeView key={nodeStore.Id} store={nodeStore as StaticTextNodeStore} />) - } else if (nodeStore instanceof VideoNodeStore) { - return (<VideoNodeView key={nodeStore.Id} store={nodeStore as VideoNodeStore} />) - } + {this.props.store.Docs.map(doc => { + return (<DocumentView key={doc.Id} doc={doc} />); })} </div> ); diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx new file mode 100644 index 000000000..d3f025388 --- /dev/null +++ b/src/views/nodes/DocumentView.tsx @@ -0,0 +1,63 @@ +import { observer } from "mobx-react"; +import { DocumentController } from "../../controllers/DocumentController"; +import React = require("react"); +import { computed } from "mobx"; +import { KeyStore } from "../../controllers/KeyController"; +import { NumberController } from "../../controllers/NumberController"; +import { TextController } from "../../controllers/TextController"; + +interface IProps { + doc:DocumentController; +} + +@observer +export class DocumentView extends React.Component<IProps> { + @computed + get x(): number { + let field = this.props.doc.GetFieldT(KeyStore.X, NumberController); + return field ? field.Data : 0; + } + + @computed + get y(): number { + let field = this.props.doc.GetFieldT(KeyStore.Y, NumberController); + return field ? field.Data : 0; + } + + @computed + get transform(): string { + return `translate(${this.x}px, ${this.y}px)`; + } + + @computed + get width(): number { + let field = this.props.doc.GetFieldT(KeyStore.Width, NumberController); + return field ? field.Data : 0; + } + + @computed + get height(): number { + let field = this.props.doc.GetFieldT(KeyStore.Height, NumberController); + return field ? field.Data : 0; + } + + //Temp + @computed + get data(): string { + let field = this.props.doc.GetFieldT(KeyStore.Data, TextController); + return field ? field.Data : ""; + } + + render() { + return ( + <div className="node" style={{ + transform: this.transform, + width: this.width, + height: this.height + }}> + <p>{this.data}</p> + </div> + ); + } + +}
\ No newline at end of file |