diff options
Diffstat (limited to 'src/client/views/collections/CollectionDockingView.tsx')
| -rw-r--r-- | src/client/views/collections/CollectionDockingView.tsx | 84 |
1 files changed, 67 insertions, 17 deletions
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index f01c538e6..39e0dd989 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -1,7 +1,7 @@ import * as GoldenLayout from "golden-layout"; import 'golden-layout/src/css/goldenlayout-base.css'; import 'golden-layout/src/css/goldenlayout-dark-theme.css'; -import { action, observable, reaction } from "mobx"; +import { action, observable, reaction, trace } from "mobx"; import { observer } from "mobx-react"; import * as ReactDOM from 'react-dom'; import { Document } from "../../../fields/Document"; @@ -16,6 +16,9 @@ import "./CollectionDockingView.scss"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import React = require("react"); import { SubCollectionViewProps } from "./CollectionViewBase"; +import { ServerUtils } from "../../../server/ServerUtil"; +import { DragManager } from "../../util/DragManager"; +import { TextField } from "../../../fields/TextField"; @observer export class CollectionDockingView extends React.Component<SubCollectionViewProps> { @@ -36,6 +39,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp private _containerRef = React.createRef<HTMLDivElement>(); private _fullScreen: any = null; private _flush: boolean = false; + private _ignoreStateChange = ""; constructor(props: SubCollectionViewProps) { super(props); @@ -43,8 +47,10 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp (window as any).React = React; (window as any).ReactDOM = ReactDOM; } - public StartOtherDrag(dragDoc: Document, e: any) { - this.AddRightSplit(dragDoc, true).contentItems[0].tab._dragListener.onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: e.button }) + public StartOtherDrag(dragDocs: Document[], e: any) { + dragDocs.map(dragDoc => + this.AddRightSplit(dragDoc, true).contentItems[0].tab._dragListener. + onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: 0 })); } @action @@ -58,6 +64,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp docconfig.callDownwards('_$init'); this._goldenLayout._$maximiseItem(docconfig); this._fullScreen = docconfig; + this._ignoreStateChange = JSON.stringify(this._goldenLayout.toConfig()); this.stateChanged(); } @action @@ -66,6 +73,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp this._goldenLayout._$minimiseItem(this._fullScreen); this._goldenLayout.root.contentItems[0].removeChild(this._fullScreen); this._fullScreen = null; + this._ignoreStateChange = JSON.stringify(this._goldenLayout.toConfig()); this.stateChanged(); } } @@ -75,7 +83,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp // @action public AddRightSplit(document: Document, minimize: boolean = false) { - this._goldenLayout.emit('stateChanged'); let newItemStackConfig = { type: 'stack', content: [CollectionDockingView.makeDocumentConfig(document)] @@ -104,7 +111,9 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp newContentItem.callDownwards('_$init'); this._goldenLayout.root.callDownwards('setSize', [this._goldenLayout.width, this._goldenLayout.height]); this._goldenLayout.emit('stateChanged'); + this._ignoreStateChange = JSON.stringify(this._goldenLayout.toConfig()); this.stateChanged(); + return newContentItem; } @@ -144,15 +153,24 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp if (this._containerRef.current) { reaction( () => this.props.Document.GetText(KeyStore.Data, ""), - () => this.setupGoldenLayout(), { fireImmediately: true }); + () => { + if (!this._goldenLayout || this._ignoreStateChange != JSON.stringify(this._goldenLayout.toConfig())) { + setTimeout(() => this.setupGoldenLayout(), 1); + } + this._ignoreStateChange = ""; + }, { fireImmediately: true }); window.addEventListener('resize', this.onResize); // bcz: would rather add this event to the parent node, but resize events only come from Window } } componentWillUnmount: () => void = () => { - this._goldenLayout.unbind('itemDropped', this.itemDropped); - this._goldenLayout.unbind('tabCreated', this.tabCreated); - this._goldenLayout.unbind('stackCreated', this.stackCreated); + try { + this._goldenLayout.unbind('itemDropped', this.itemDropped); + this._goldenLayout.unbind('tabCreated', this.tabCreated); + this._goldenLayout.unbind('stackCreated', this.stackCreated); + } catch (e) { + + } this._goldenLayout.destroy(); this._goldenLayout = null; window.removeEventListener('resize', this.onResize); @@ -174,17 +192,28 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp } @action onPointerDown = (e: React.PointerEvent): void => { - if (e.button === 2 && this.props.active()) { + var className = (e.target as any).className; + if ((className == "lm_title" || className == "lm_tab lm_active") && (e.ctrlKey || e.altKey)) { e.stopPropagation(); e.preventDefault(); - } else { - var className = (e.target as any).className; - if (className == "lm_drag_handle" || className == "lm_close" || className == "lm_maximise" || className == "lm_minimise" || className == "lm_close_tab") { - this._flush = true; - } - if (e.buttons === 1 && this.props.active()) { - e.stopPropagation(); - } + let docid = (e.target as any).DashDocId; + let tab = (e.target as any).parentElement as HTMLElement; + Server.GetField(docid, action((f: Opt<Field>) => { + if (f instanceof Document) + DragManager.StartDocumentDrag([tab], new DragManager.DocumentDragData([f as Document]), + { + handlers: { + dragComplete: action(() => { }), + }, + hideSource: false + }) + })); + } + if (className == "lm_drag_handle" || className == "lm_close" || className == "lm_maximise" || className == "lm_minimise" || className == "lm_close_tab") { + this._flush = true; + } + if (this.props.active()) { + e.stopPropagation(); } } @@ -198,6 +227,21 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp this.stateChanged(); } tabCreated = (tab: any) => { + if (tab.hasOwnProperty("contentItem") && tab.contentItem.config.type != "stack") { + if (tab.titleElement[0].textContent.indexOf("-waiting") != -1) { + Server.GetField(tab.contentItem.config.props.documentId, action((f: Opt<Field>) => { + if (f != undefined && f instanceof Document) { + f.GetTAsync(KeyStore.Title, TextField, (tfield) => { + if (tfield != undefined) { + tab.titleElement[0].textContent = f.Title; + } + }) + } + })); + tab.titleElement[0].DashDocId = tab.contentItem.config.props.documentId; + } + tab.titleElement[0].DashDocId = tab.contentItem.config.props.documentId; + } tab.closeElement.off('click') //unbind the current click handler .click(function () { tab.contentItem.remove(); @@ -213,6 +257,12 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp stack.remove(); //} })); + stack.header.controlsContainer.find('.lm_popout') //get the close icon + .off('click') //unbind the current click handler + .click(action(function () { + var url = ServerUtils.prepend("/doc/" + stack.contentItems[0].tab.contentItem.config.props.documentId); + let win = window.open(url, stack.contentItems[0].tab.title, "width=300,height=400"); + })); } render() { |