From 0402105238f24785a1229dbbb37f2e4dba958f88 Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 29 Jan 2019 10:47:28 -0500 Subject: playing with a docking view. --- package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'package.json') diff --git a/package.json b/package.json index 71ca3cc8b..e898873e2 100644 --- a/package.json +++ b/package.json @@ -37,11 +37,13 @@ "@types/prosemirror-transform": "^1.1.0", "@types/prosemirror-view": "^1.3.0", "@types/uuid": "^3.4.4", + "flexlayout-react": "^0.3.3", "mobx": "^5.5.2", "mobx-react": "^5.3.5", "mobx-react-devtools": "^6.0.3", "node-sass": "^4.11.0", "normalize.css": "^8.0.1", + "npm": "^6.7.0", "prosemirror-commands": "^1.0.7", "prosemirror-history": "^1.0.3", "prosemirror-keymap": "^1.0.1", @@ -51,7 +53,7 @@ "prosemirror-transform": "^1.1.3", "prosemirror-view": "^1.6.8", "react": "^16.5.2", - "react-dom": "^16.5.2", + "react-dom": "^16.7.0", "react-jsx-parser": "^1.13.0", "uuid": "^3.3.2" } -- cgit v1.2.3-70-g09d2 From c45dd584af76e1cd6e48fa44f9296228cdceb649 Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 29 Jan 2019 15:00:18 -0500 Subject: started looking at golden layout... --- package-lock.json | 23 +++++++++++++++++++++++ package.json | 2 ++ src/views/collections/CollectionDockingView.tsx | 4 +++- 3 files changed, 28 insertions(+), 1 deletion(-) (limited to 'package.json') diff --git a/package-lock.json b/package-lock.json index 28f612e0a..b04a31ccd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3123,6 +3123,14 @@ "minimatch": "3.0.4" } }, + "golden-layout": { + "version": "1.5.9", + "resolved": "https://registry.npmjs.org/golden-layout/-/golden-layout-1.5.9.tgz", + "integrity": "sha1-o5vB9qZ+b4hreXwBbdkk6UJrp38=", + "requires": { + "jquery": "3.3.1" + } + }, "graceful-fs": { "version": "4.1.15", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz", @@ -3696,6 +3704,11 @@ "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=" }, + "jquery": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz", + "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==" + }, "js-base64": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.0.tgz", @@ -8272,6 +8285,16 @@ "scheduler": "0.12.0" } }, + "react-golden-layout": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/react-golden-layout/-/react-golden-layout-1.0.6.tgz", + "integrity": "sha512-KZQ17Bnd+LfyCqe2scVMznrGKTciX3VwoT3y4xn3Qok9hknCvVXZfXe2RSX5zNG7FlLJzWt0VWqy8qZBHpQVuQ==", + "requires": { + "golden-layout": "1.5.9", + "react": "16.7.0", + "react-dom": "16.7.0" + } + }, "react-is": { "version": "16.7.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.7.0.tgz", diff --git a/package.json b/package.json index e898873e2..f0ab9ab35 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "@types/prosemirror-view": "^1.3.0", "@types/uuid": "^3.4.4", "flexlayout-react": "^0.3.3", + "golden-layout": "^1.5.9", "mobx": "^5.5.2", "mobx-react": "^5.3.5", "mobx-react-devtools": "^6.0.3", @@ -54,6 +55,7 @@ "prosemirror-view": "^1.6.8", "react": "^16.5.2", "react-dom": "^16.7.0", + "react-golden-layout": "^1.0.6", "react-jsx-parser": "^1.13.0", "uuid": "^3.3.2" } diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx index a59a40b33..cdcdf3bf1 100644 --- a/src/views/collections/CollectionDockingView.tsx +++ b/src/views/collections/CollectionDockingView.tsx @@ -11,7 +11,9 @@ import { SSL_OP_SINGLE_DH_USE } from "constants"; import { SelectionManager } from "../../util/SelectionManager"; 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/'; @observer export class CollectionDockingView extends React.Component { -- cgit v1.2.3-70-g09d2 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. --- package-lock.json | 43 +++++++++ package.json | 2 + src/Main.tsx | 9 +- src/views/collections/CollectionDockingView.tsx | 112 +++++++++++++++++++++--- src/views/nodes/DocumentView.tsx | 5 +- 5 files changed, 155 insertions(+), 16 deletions(-) (limited to 'package.json') diff --git a/package-lock.json b/package-lock.json index b04a31ccd..192a10f9e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,14 @@ "integrity": "sha512-2Y8uPt0/jwjhQ6EiluT0XCri1Dbplr0ZxfFXUz+ye13gaqE8u5gL5ppao1JrUYr9cIip5S6MvQzBS7Kke7U9VA==", "dev": true }, + "@types/jquery": { + "version": "3.3.29", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.29.tgz", + "integrity": "sha512-FhJvBninYD36v3k6c+bVk1DSZwh7B5Dpb/Pyk3HKVsiohn0nhbefZZ+3JXbWQhFyt0MxSl2jRDdGQPHeOHFXrQ==", + "requires": { + "@types/sizzle": "2.3.2" + } + }, "@types/mocha": { "version": "5.2.5", "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-5.2.5.tgz", @@ -136,6 +144,11 @@ "@types/react": "16.7.17" } }, + "@types/sizzle": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz", + "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==" + }, "@types/uuid": { "version": "3.4.4", "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-3.4.4.tgz", @@ -4331,6 +4344,11 @@ "to-regex": "3.0.2" } }, + "native-promise-only": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/native-promise-only/-/native-promise-only-0.8.1.tgz", + "integrity": "sha1-IKMYwwy0X3H+et+/eyHJnBRy7xE=" + }, "negotiator": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz", @@ -8314,6 +8332,15 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-mosaic": { + "version": "0.0.20", + "resolved": "https://registry.npmjs.org/react-mosaic/-/react-mosaic-0.0.20.tgz", + "integrity": "sha1-pSSr8uzyi5r2sh1NNQ/veCLvMJ4=", + "requires": { + "prop-types": "15.6.2", + "threads": "0.8.1" + } + }, "read-pkg": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", @@ -9490,6 +9517,22 @@ } } }, + "threads": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/threads/-/threads-0.8.1.tgz", + "integrity": "sha1-40ARW1lHMW0vfuMSPEwsW/nHbXI=", + "requires": { + "eventemitter3": "2.0.3", + "native-promise-only": "0.8.1" + }, + "dependencies": { + "eventemitter3": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz", + "integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=" + } + } + }, "through2": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", diff --git a/package.json b/package.json index f0ab9ab35..3dfa158d8 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.12", + "@types/jquery": "^3.3.29", "@types/prosemirror-commands": "^1.0.1", "@types/prosemirror-history": "^1.0.1", "@types/prosemirror-keymap": "^1.0.1", @@ -57,6 +58,7 @@ "react-dom": "^16.7.0", "react-golden-layout": "^1.0.6", "react-jsx-parser": "^1.13.0", + "react-mosaic": "0.0.20", "uuid": "^3.3.2" } } 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