diff options
| -rw-r--r-- | src/Main.scss | 1 | ||||
| -rw-r--r-- | src/Main.tsx | 31 | ||||
| -rw-r--r-- | src/views/freeformcanvas/CollectionFreeFormView.tsx | 5 |
3 files changed, 25 insertions, 12 deletions
diff --git a/src/Main.scss b/src/Main.scss index f986d2c96..441716e5c 100644 --- a/src/Main.scss +++ b/src/Main.scss @@ -4,6 +4,7 @@ body { height: 100%; overflow: hidden; font-family: 'Hind Siliguri', sans-serif; + margin: 0; } h1 { diff --git a/src/Main.tsx b/src/Main.tsx index f911b6098..e417c0690 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -5,24 +5,31 @@ import { NodeCollectionStore } from './stores/NodeCollectionStore'; import { StaticTextNodeStore } from './stores/StaticTextNodeStore'; import { VideoNodeStore } from './stores/VideoNodeStore'; import { FreeFormCanvas } from './views/freeformcanvas/FreeFormCanvas'; -import { Key, KeyStore as KS } from './fields/Key'; +import { Key, KeyStore as KS, KeyStore } from './fields/Key'; import { NumberField } from './fields/NumberField'; import { Document } from './fields/Document'; import { configure, runInAction } from 'mobx'; import { NodeStore } from './stores/NodeStore'; import { Documents } from './documents/Documents'; import { DocumentDecorations } from './DocumentDecorations'; +import { CollectionFreeFormView } from './views/freeformcanvas/CollectionFreeFormView'; +import { ListField } from './fields/ListField'; +import { DocumentView } from './views/nodes/DocumentView'; +import { DocumentViewModel } from './viewmodels/DocumentViewModel'; configure({ enforceActions: "observed" }); -const mainNodeCollection = new NodeCollectionStore(); +const mainNodeCollection = new Array<Document>(); +let mainContainer = Documents.CollectionDocument(mainNodeCollection, { + x: 0, y: 0, width: window.screen.width, height: window.screen.height +}) ReactDOM.render(( - <div> + <div style={{display: "grid", width: "100vw", height: "100vh"}}> <h1>Dash Web</h1> <DocumentDecorations /> - <FreeFormCanvas store={mainNodeCollection} /> + <DocumentView dvm={new DocumentViewModel(mainContainer)} /> </div>), document.getElementById('root')); @@ -41,7 +48,6 @@ for (let i = 0; i < 20; i++) { } runInAction(() => { - mainNodeCollection.AddNodes(nodes); let doc1 = Documents.TextDocument("Hello world"); let doc2 = doc1.MakeDelegate(); doc2.SetField(KS.X, new NumberField(150)); @@ -56,9 +62,14 @@ runInAction(() => { let doc5 = Documents.ImageDocument("https://static.boredpanda.com/blog/wp-content/uploads/2018/04/5acb63d83493f__700-png.jpg", { x: 650, y: 500 }); - mainNodeCollection.Docs.push(doc1); - mainNodeCollection.Docs.push(doc2); - mainNodeCollection.Docs.push(doc4); - mainNodeCollection.Docs.push(doc3); - mainNodeCollection.Docs.push(doc5); + let mainNodes = mainContainer.GetFieldT(KeyStore.Data, ListField); + if (!mainNodes) { + mainNodes = new ListField<Document>(); + mainContainer.SetField(KeyStore.Data, mainNodes); + } + mainNodes.Data.push(doc1); + mainNodes.Data.push(doc2); + mainNodes.Data.push(doc4); + mainNodes.Data.push(doc3); + mainNodes.Data.push(doc5); });
\ No newline at end of file diff --git a/src/views/freeformcanvas/CollectionFreeFormView.tsx b/src/views/freeformcanvas/CollectionFreeFormView.tsx index 4e9e0cd21..4c8fcec10 100644 --- a/src/views/freeformcanvas/CollectionFreeFormView.tsx +++ b/src/views/freeformcanvas/CollectionFreeFormView.tsx @@ -10,6 +10,7 @@ import { ListField } from "../../fields/ListField"; import { NumberField } from "../../fields/NumberField"; import { SSL_OP_SINGLE_DH_USE } from "constants"; import { DocumentDecorations } from "../../DocumentDecorations"; +import { SelectionManager } from "../../util/SelectionManager"; interface IProps { fieldKey: Key; @@ -94,8 +95,8 @@ export class CollectionFreeFormView extends React.Component<IProps> { height: "calc(100% - 4px)", overflow: "hidden" }}> - <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px)`, transformOrigin: '50% 50%' }}> - <div className="node-container"> + <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px)`, transformOrigin: '50% 50%', width: "100%", height: "100%" }}> + <div className="node-container" style={{width: "100%", height: "100%"}}> {value.map(doc => { return (<DocumentView key={doc.Id} dvm={new DocumentViewModel(doc)} />); })} |