diff options
| -rw-r--r-- | package-lock.json | 43 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/Main.tsx | 9 | ||||
| -rw-r--r-- | src/views/collections/CollectionDockingView.tsx | 112 | ||||
| -rw-r--r-- | src/views/nodes/DocumentView.tsx | 5 |
5 files changed, 155 insertions, 16 deletions
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(( <DocumentView Document={mainContainer} ContainingCollectionView={undefined} ContainingDocumentView={undefined} /> <DocumentDecorations /> <ContextMenu /> - </div>), document.getElementById('root')); + </div>), + document.getElementById('root')); runInAction(() => { let doc1 = Documents.TextDocument("Hello world"); @@ -63,7 +64,7 @@ runInAction(() => { }); let docset2 = new Array<Document>(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<CollectionViewProps> { @@ -87,15 +89,86 @@ export class CollectionDockingView extends React.Component<CollectionViewProps> 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("<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 ]; + setTimeout(function () { + ReactDOM.render(( + <div style={{ display: "grid" }}> + <DocumentView key={docToRender.Id} Document={docToRender} ContainingCollectionView={me} ContainingDocumentView={me.props.ContainingDocumentView} /> + </div> + ), + document.getElementById(containingDiv) + ) + }, 1); + }; @action @@ -148,7 +221,9 @@ export class CollectionDockingView extends React.Component<CollectionViewProps> } } + render() { + const { fieldKey, Document: Document } = this.props; const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []); @@ -157,6 +232,8 @@ 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", @@ -164,12 +241,25 @@ export class CollectionDockingView extends React.Component<CollectionViewProps> }}> <div className="collectiondockingview-container" onPointerDown={this.onPointerDown} onContextMenu={(e) => 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%" }} > - <FlexLayout.Layout model={this._model} factory={this.factory} /> </div> </div> ); + // return ( + // <div className="border" style={{ + // borderStyle: "solid", + // borderWidth: `${CollectionDockingView.BORDER_WIDTH}px`, + // }}> + // <div className="collectiondockingview-container" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef} + // style={{ + // width: s > 1 ? "100%" : w - 2 * CollectionDockingView.BORDER_WIDTH, + // height: s > 1 ? "100%" : h - 2 * CollectionDockingView.BORDER_WIDTH + // }} > + // <FlexLayout.Layout model={this._model} factory={this.factory} /> + // </div> + // </div> + // ); } }
\ 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<DocumentViewProps> { 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<DocumentViewProps> { 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(); |