From 3032decb31fa6c891520923ed49612ba5ecf7c93 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 30 Jan 2019 02:30:15 -0500 Subject: added golden layout. doesn't work much better than the flex layout. --- src/Main.tsx | 9 +- src/views/collections/CollectionDockingView.tsx | 112 +++++++++++++++++++++--- src/views/nodes/DocumentView.tsx | 5 +- 3 files changed, 110 insertions(+), 16 deletions(-) (limited to 'src') diff --git a/src/Main.tsx b/src/Main.tsx index c636ee42e..118e745cd 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -44,7 +44,8 @@ ReactDOM.render(( - ), document.getElementById('root')); + ), + document.getElementById('root')); runInAction(() => { let doc1 = Documents.TextDocument("Hello world"); @@ -63,7 +64,7 @@ runInAction(() => { }); let docset2 = new Array(doc4, doc1, doc3); let doc6 = Documents.DockDocument(docset2, { - x: 350, y: 100 + x: 350, y: 100, width: 600, height: 600 }); let mainNodes = mainContainer.GetFieldT(KeyStore.Data, ListField); if (!mainNodes) { @@ -72,9 +73,9 @@ runInAction(() => { } // mainNodes.Data.push(doc1); // mainNodes.Data.push(doc2); - mainNodes.Data.push(doc4); + //mainNodes.Data.push(doc4); // mainNodes.Data.push(doc3); - mainNodes.Data.push(doc5); + //mainNodes.Data.push(doc5); // mainNodes.Data.push(doc1); // mainNodes.Data.push(doc2); mainNodes.Data.push(doc6); diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx index 19b212bde..8dabe4490 100644 --- a/src/views/collections/CollectionDockingView.tsx +++ b/src/views/collections/CollectionDockingView.tsx @@ -13,7 +13,9 @@ import { ContextMenu } from "../ContextMenu"; import "./CollectionDockingView.scss" import 'golden-layout/src/css/goldenlayout-base.css'; import 'golden-layout/src/css/goldenlayout-dark-theme.css'; -// import GoldenLayout, { Row, Stack, createGoldenLayoutComponent } from '../../../node_modules/react-golden-layout/src/internal/'; +import * as GoldenLayout from "golden-layout"; +import { CollectionFreeFormView } from './CollectionFreeFormView'; +import * as ReactDOM from 'react-dom'; @observer export class CollectionDockingView extends React.Component { @@ -87,15 +89,86 @@ export class CollectionDockingView extends React.Component return isSelected || childSelected || topMost; } + myLayout: any = null; componentDidMount() { - // if (this._containerRef.current) { - // DragManager.MakeDropTarget(this._containerRef.current, { - // handlers: { - // drop: this.drop - // } - // }); - // } + + const { fieldKey, Document: Document } = this.props; + + const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []); + if (this._containerRef.current) { + if (this.myLayout == null) { + this.myLayout = new GoldenLayout({ + content: [ { + type: 'row', + content: [ { + type: 'component', + componentName: 'documentViewComponent', + componentState: { x: 0 } + }, { + type: 'component', + componentName: 'documentViewComponent', + componentState: { x: 1 } + } ] + } ] + }); + + this.myLayout.on('stackCreated', function (stack: any) { + stack + .header + .controlsContainer + .find('.lm_close') //get the close icon + .off('click') //unbind the current click handler + .click(function () { + //add your own + if (confirm('really close this?')) { + stack.remove(); + } + }); + }); + + this.myLayout.on('tabCreated', function (tab: any) { + tab + .closeElement + .off('click') //unbind the current click handler + .click(function () { + //add your own + if (confirm('really close this?')) { + tab.contentItem.remove(); + } + }); + }); + + var me = this; + var cv = this.props.ContainingDocumentView; + this.myLayout.registerComponent('documentViewComponent', this.registerComponentWithCallback); + + this.myLayout.container = this._containerRef.current; + this.myLayout.init(); + } + } } + 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("
"); + // var new_state = Object.assign({}, state); + // new_state[ "location" ] = containingDiv; + // container.setState(new_state); + var me = this; + var docToRender = value[ state.x ]; + setTimeout(function () { + ReactDOM.render(( +
+ +
+ ), + document.getElementById(containingDiv) + ) + }, 1); + }; @action @@ -148,7 +221,9 @@ export class CollectionDockingView extends React.Component } } + render() { + const { fieldKey, Document: Document } = this.props; const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []); @@ -157,6 +232,8 @@ export class CollectionDockingView extends React.Component var w = Document.GetFieldValue(KeyStore.Width, NumberField, Number(0)) / s; var h = Document.GetFieldValue(KeyStore.Height, NumberField, Number(0)) / s; + + return (
}}>
e.preventDefault()} ref={this._containerRef} style={{ - width: s > 1 ? "100%" : w - 2 * CollectionDockingView.BORDER_WIDTH, - height: s > 1 ? "100%" : h - 2 * CollectionDockingView.BORDER_WIDTH + width: "100%", + height: "100%" }} > -
); + // return ( + //
+ //
e.preventDefault()} ref={this._containerRef} + // style={{ + // width: s > 1 ? "100%" : w - 2 * CollectionDockingView.BORDER_WIDTH, + // height: s > 1 ? "100%" : h - 2 * CollectionDockingView.BORDER_WIDTH + // }} > + // + //
+ //
+ // ); } } \ No newline at end of file diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index 7ba62e0b8..38e695ed2 100644 --- a/src/views/nodes/DocumentView.tsx +++ b/src/views/nodes/DocumentView.tsx @@ -93,6 +93,9 @@ export class DocumentView extends React.Component { private _downX: number = 0; private _downY: number = 0; + constructor(props: DocumentViewProps) { + super(props); + } get screenRect(): ClientRect | DOMRect { if (this._mainCont.current) { return this._mainCont.current.getBoundingClientRect(); @@ -223,7 +226,7 @@ export class DocumentView extends React.Component { this._downX = e.clientX; this._downY = e.clientY; this._contextMenuCanOpen = e.button == 2; - if (this.active) { + if (this.active && !e.isDefaultPrevented()) { e.stopPropagation(); if (e.buttons === 2) { e.preventDefault(); -- cgit v1.2.3-70-g09d2