diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/Main.tsx | 39 | ||||
| -rw-r--r-- | src/documents/Documents.ts | 4 | ||||
| -rw-r--r-- | src/fields/Key.ts | 1 | ||||
| -rw-r--r-- | src/views/collections/CollectionDockingView.tsx | 30 |
4 files changed, 38 insertions, 36 deletions
diff --git a/src/Main.tsx b/src/Main.tsx index 33e38004f..02b866753 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -23,7 +23,7 @@ configure({ const mainNodeCollection = new Array<Document>(); let mainContainer = Documents.DockDocument(mainNodeCollection, { - x: 0, y: 0, width: window.screen.width, height: window.screen.height + x: 0, y: 0, width: window.screen.width, height: window.screen.height, title: "main container" }) window.addEventListener("drop", function (e) { @@ -38,17 +38,10 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { } }), true) -ReactDOM.render(( - <div style={{ display: "grid" }}> - <h1>Dash Web</h1> - <DocumentView Document={mainContainer} ContainingCollectionView={undefined} ContainingDocumentView={undefined} /> - <DocumentDecorations /> - <ContextMenu /> - </div>), - document.getElementById('root')); -runInAction(() => { - let doc1 = Documents.TextDocument("Hello world"); +//runInAction(() => +{ + let doc1 = Documents.TextDocument("Hello world", { title: "hello" }); let doc2 = doc1.MakeDelegate(); doc2.SetField(KS.X, new NumberField(150)); doc2.SetField(KS.Y, new NumberField(20)); @@ -57,19 +50,18 @@ runInAction(() => { }); let docset = new Array<Document>(doc1, doc2, doc3); let doc4 = Documents.CollectionDocument(docset, { - x: 0, y: 400 + 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 + x: 650, y: 500, width: 600, height: 600, title: "cat" }); let docset2 = new Array<Document>(doc4, doc1, doc3); let doc6 = Documents.DockDocument(docset2, { - x: 350, y: 100, width: 600, height: 600 + x: 350, y: 100, width: 600, height: 600, title: "docking collection" }); - let mainNodes = mainContainer.GetFieldT(KeyStore.Data, ListField); + let mainNodes = null;// mainContainer.GetFieldT(KeyStore.Data, ListField); if (!mainNodes) { mainNodes = new ListField<Document>(); - mainContainer.SetField(KeyStore.Data, mainNodes); } // mainNodes.Data.push(doc1); // mainNodes.Data.push(doc2); @@ -77,6 +69,17 @@ runInAction(() => { // mainNodes.Data.push(doc3); mainNodes.Data.push(doc5); // mainNodes.Data.push(doc1); - // mainNodes.Data.push(doc2); + mainNodes.Data.push(doc2); //mainNodes.Data.push(doc6); -});
\ No newline at end of file + mainContainer.SetField(KeyStore.Data, mainNodes); +} +//); + +ReactDOM.render(( + <div style={{ display: "grid" }}> + <h1>Dash Web</h1> + <DocumentView Document={mainContainer} ContainingCollectionView={undefined} ContainingDocumentView={undefined} /> + <DocumentDecorations /> + <ContextMenu /> + </div>), + document.getElementById('root'));
\ No newline at end of file diff --git a/src/documents/Documents.ts b/src/documents/Documents.ts index 7cc5de3a3..318a6d7a3 100644 --- a/src/documents/Documents.ts +++ b/src/documents/Documents.ts @@ -11,6 +11,7 @@ interface DocumentOptions { y?: number; width?: number; height?: number; + title?: string; } export namespace Documents { @@ -27,6 +28,9 @@ export namespace Documents { if (options.height) { doc.SetFieldValue(KeyStore.Height, options.height, NumberField); } + if (options.title) { + doc.SetFieldValue(KeyStore.Title, options.title, TextField); + } doc.SetFieldValue(KeyStore.Scale, 1, NumberField); doc.SetFieldValue(KeyStore.PanX, 0, NumberField); doc.SetFieldValue(KeyStore.PanY, 0, NumberField); diff --git a/src/fields/Key.ts b/src/fields/Key.ts index f8418d5c0..61b3cdd37 100644 --- a/src/fields/Key.ts +++ b/src/fields/Key.ts @@ -34,6 +34,7 @@ export namespace KeyStore { export let Prototype = new Key("Prototype"); export let X = new Key("X"); export let Y = new Key("Y"); + export let Title = new Key("Title"); export let PanX = new Key("PanX"); export let PanY = new Key("PanY"); export let Scale = new Key("Scale"); diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx index 7dfec1c54..e07e53168 100644 --- a/src/views/collections/CollectionDockingView.tsx +++ b/src/views/collections/CollectionDockingView.tsx @@ -16,6 +16,7 @@ import 'golden-layout/src/css/goldenlayout-dark-theme.css'; import * as GoldenLayout from "golden-layout"; import { CollectionFreeFormView } from './CollectionFreeFormView'; import * as ReactDOM from 'react-dom'; +import { TextField } from "../../fields/TextField"; @observer export class CollectionDockingView extends React.Component<CollectionViewProps> { @@ -97,18 +98,14 @@ export class CollectionDockingView extends React.Component<CollectionViewProps> const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []); if (this._containerRef.current) { if (this.myLayout == null) { + var docs = value.map(doc => { + var d = { fcomponent: undefined, type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc } }; + return d; + }); this.myLayout = new GoldenLayout({ content: [ { type: 'row', - content: [ { - type: 'component', - componentName: 'documentViewComponent', - componentState: { x: 0 } - }, { - type: 'component', - componentName: 'documentViewComponent', - componentState: { x: 1 } - } ] + content: docs } ] }); @@ -127,6 +124,9 @@ export class CollectionDockingView extends React.Component<CollectionViewProps> }); this.myLayout.on('tabCreated', function (tab: any) { + var docToRender = tab.contentItem.config.componentState.doc; + var dflt: string = "<untitled>"; + tab.setTitle(docToRender.GetFieldValue(KeyStore.Title, TextField, dflt)); tab .closeElement .off('click') //unbind the current click handler @@ -147,15 +147,11 @@ export class CollectionDockingView extends React.Component<CollectionViewProps> private nextId = (function () { var _next_id = 0; return function () { return _next_id++; } })(); private registerComponentWithCallback = (container: any, state: any) => { - const { fieldKey, Document: Document } = this.props; - const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []); var containingDiv = "component_" + this.nextId(); container.getElement().html("<div id='" + containingDiv + "'></div>"); - // var new_state = Object.assign({}, state); - // new_state[ "location" ] = containingDiv; - // container.setState(new_state); var me = this; - var docToRender = value[ state.x ]; + var docToRender = state.doc; + // bcz: ugly way to do this. wait until containoing div has been created, then look it up in the DOM and render our document view into it. setTimeout(function () { ReactDOM.render(( <div style={{ display: "grid" }}> @@ -164,7 +160,7 @@ export class CollectionDockingView extends React.Component<CollectionViewProps> ), document.getElementById(containingDiv) ) - }, 1); + }, 0); }; @@ -229,8 +225,6 @@ export class CollectionDockingView extends React.Component<CollectionViewProps> var w = Document.GetFieldValue(KeyStore.Width, NumberField, Number(0)) / s; var h = Document.GetFieldValue(KeyStore.Height, NumberField, Number(0)) / s; - - return ( <div className="border" style={{ borderStyle: "solid", |