diff options
Diffstat (limited to 'src/views/collections')
| -rw-r--r-- | src/views/collections/CollectionDockingView.scss | 39 | ||||
| -rw-r--r-- | src/views/collections/CollectionDockingView.tsx | 172 | ||||
| -rw-r--r-- | src/views/collections/CollectionFreeFormView.tsx | 30 |
3 files changed, 162 insertions, 79 deletions
diff --git a/src/views/collections/CollectionDockingView.scss b/src/views/collections/CollectionDockingView.scss index 43af7c538..118662d89 100644 --- a/src/views/collections/CollectionDockingView.scss +++ b/src/views/collections/CollectionDockingView.scss @@ -4,10 +4,23 @@ top: 0; left: 0; overflow: hidden; + + .lm_controls>li { + opacity: 0.6; + transform: scale(1.2); + } + .lm_maximised .lm_controls .lm_maximise { + opacity:1; + transform: scale(0.8); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==) !important; + } + .flexlayout__layout { - width: 100%; - height: 100%; - position: relative; + left: 0; + top: 0; + right: 0; + bottom: 0; + position: absolute; overflow:hidden; } @@ -79,9 +92,10 @@ .flexlayout__tab { overflow: auto; - position: absolute; + position:absolute; box-sizing: border-box; background-color: #222; + color:black; } .flexlayout__tab_button { @@ -107,12 +121,10 @@ } .flexlayout__tab_button_leading { - float: left; display:inline-block; } .flexlayout__tab_button_content { - float: left; display:inline-block; } @@ -127,7 +139,6 @@ } .flexlayout__tab_button_trailing { - float: left; display:inline-block; margin-left:5px; margin-top:3px; @@ -137,7 +148,7 @@ .flexlayout__tab_button:hover .flexlayout__tab_button_trailing, .flexlayout__tab_button--selected .flexlayout__tab_button_trailing{ - //background: transparent url("../images/close_white.png") no-repeat center; + background: transparent url("../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center; } .flexlayout__tab_button_overflow { @@ -150,7 +161,7 @@ font-size: 10px; color:lightgray; font-family: Arial, sans-serif; - //background: transparent url("../images/more.png") no-repeat left; + background: transparent url("../../../node_modules/flexlayout-react/images/more.png") no-repeat left; } .flexlayout__tabset_header @@ -185,12 +196,12 @@ .flexlayout__tabset-selected { - //background-image: linear-gradient(#111, #444); + background-image: linear-gradient(#111, #444); } .flexlayout__tabset-maximized { - //background-image: linear-gradient(#666, #333); + background-image: linear-gradient(#666, #333); } .flexlayout__tab_toolbar { @@ -208,7 +219,7 @@ height:20px; border:none; outline-width: 0; - //background: transparent url("../images/maximize.png") no-repeat center; + background: transparent url("../../../node_modules/flexlayout-react/images/maximize.png") no-repeat center; } .flexlayout__tab_toolbar_button-max { @@ -216,7 +227,7 @@ height:20px; border:none; outline-width: 0; - //background: transparent url("../images/restore.png") no-repeat center; + background: transparent url("../../../node_modules/flexlayout-react/images/restore.png") no-repeat center; } .flexlayout__popup_menu { @@ -339,7 +350,7 @@ .flexlayout__border_button:hover .flexlayout__border_button_trailing, .flexlayout__border_button--selected .flexlayout__border_button_trailing{ - //background: transparent url("../images/close_white.png") no-repeat center; + background: transparent url("../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center; } diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx index 3d0c39c9d..a547ea1e8 100644 --- a/src/views/collections/CollectionDockingView.tsx +++ b/src/views/collections/CollectionDockingView.tsx @@ -4,7 +4,7 @@ import React = require("react"); import FlexLayout from "flexlayout-react"; import { action, observable, computed } from "mobx"; import { Document } from "../../fields/Document"; -import { DocumentView, CollectionViewProps } from "../nodes/DocumentView"; +import { DocumentView, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "../nodes/DocumentView"; import { ListField } from "../../fields/ListField"; import { NumberField } from "../../fields/NumberField"; import { SSL_OP_SINGLE_DH_USE } from "constants"; @@ -15,6 +15,7 @@ import 'golden-layout/src/css/goldenlayout-base.css'; import 'golden-layout/src/css/goldenlayout-dark-theme.css'; import * as GoldenLayout from "golden-layout"; import * as ReactDOM from 'react-dom'; +import { DragManager } from "../../util/DragManager"; @observer export class CollectionDockingView extends React.Component<CollectionViewProps> { @@ -45,15 +46,16 @@ export class CollectionDockingView extends React.Component<CollectionViewProps> var docs = value.map(doc => { return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc } }; }); - return new GoldenLayout({ content: [ { type: 'row', content: docs } ] }); + return new GoldenLayout({ + settings: { + selectionEnabled: true + }, content: [ { type: 'row', content: docs } ] + }); } constructor(props: CollectionViewProps) { super(props); } - public static BORDER_WIDTH = 2; - public static TAB_HEADER_HEIGHT = 20; - @computed public get active(): boolean { var isSelected = (this.props.ContainingDocumentView != undefined && SelectionManager.IsSelected(this.props.ContainingDocumentView)); @@ -65,8 +67,12 @@ export class CollectionDockingView extends React.Component<CollectionViewProps> componentDidMount: () => void = () => { if (this._containerRef.current && CollectionDockingView.UseGoldenLayout) { this.goldenLayoutFactory(); + window.addEventListener('resize', this.onResize); // bcz: would rather add this event to the parent node, but resize events only come from Window } } + componentWillUnmount: () => void = () => { + window.removeEventListener('resize', this.onResize); + } private nextId = (function () { var _next_id = 0; return function () { return _next_id++; } })(); @action @@ -87,6 +93,15 @@ export class CollectionDockingView extends React.Component<CollectionViewProps> ContextMenu.Instance.clearItems() } } + + @action + onResize = (event: any) => { + var cur = this.props.ContainingDocumentView!.MainContent.current; + + // bcz: since GoldenLayout isn't a React component itself, we need to notify it to resize when its document container's size has changed + CollectionDockingView.myLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height); + } + @action onPointerDown = (e: React.PointerEvent): void => { if (e.button === 2 && this.active) { @@ -116,31 +131,94 @@ export class CollectionDockingView extends React.Component<CollectionViewProps> } } + public static myLayout: any = null; + + private static _dragDiv: any = null; + private static _dragParent: HTMLElement | null = null; + private static _dragElement: HTMLDivElement; + private static _dragFakeElement: HTMLDivElement; + public static StartOtherDrag(dragElement: HTMLDivElement, dragDoc: Document) { + var newItemConfig = { + type: 'component', + componentName: 'documentViewComponent', + componentState: { doc: dragDoc } + }; + this._dragElement = dragElement; + this._dragParent = dragElement.parentElement; + // bcz: we want to copy this document into the header, not move it there. + // However, GoldenLayout is setup to move things, so we have to do some kludgy stuff: + + // - create a temporary invisible div and register that as a DragSource with GoldenLayout + this._dragDiv = document.createElement("div"); + this._dragDiv.style.opacity = 0; + DragManager.Root().appendChild(this._dragDiv); + CollectionDockingView.myLayout.createDragSource(this._dragDiv, newItemConfig); + + // - add our document to that div so that GoldenLayout will get the move events its listening for + this._dragDiv.appendChild(this._dragElement); + + // - add a duplicate of our document to the original document's container + // (GoldenLayout will be removing our original one) + this._dragFakeElement = dragElement.cloneNode(true) as HTMLDivElement; + this._dragParent!.appendChild(this._dragFakeElement); + + // all of this must be undone when the document has been dropped (see tabCreated) + } + + _makeFullScreen: boolean = false; + _maximizedStack: any = null; + public static OpenFullScreen(dv: DocumentView) { + var newItemConfig = { + type: 'component', + componentName: 'documentViewComponent', + componentState: { doc: dv.props.Document } + }; + CollectionDockingView.myLayout._makeFullScreen = true; + CollectionDockingView.myLayout.root.contentItems[ 0 ].addChild(newItemConfig); + } + public static CloseFullScreen() { + if (CollectionDockingView.myLayout._maximizedStack != null) { + CollectionDockingView.myLayout._maximizedStack.header.controlsContainer.find('.lm_close').click(); + CollectionDockingView.myLayout._maximizedStack = null; + } + } goldenLayoutFactory() { - var myLayout = this.modelForGoldenLayout; + CollectionDockingView.myLayout = this.modelForGoldenLayout; - myLayout.on('stackCreated', function (stack: any) { - stack.header.controlsContainer.find('.lm_close') //get the close icon - .off('click') //unbind the current click handler + CollectionDockingView.myLayout.on('tabCreated', function (tab: any) { + if (CollectionDockingView._dragDiv) { + CollectionDockingView._dragDiv.removeChild(CollectionDockingView._dragElement); + CollectionDockingView._dragParent!.removeChild(CollectionDockingView._dragFakeElement); + CollectionDockingView._dragParent!.appendChild(CollectionDockingView._dragElement); + DragManager.Root().removeChild(CollectionDockingView._dragDiv); + CollectionDockingView._dragDiv = null; + } + tab.setTitle(tab.contentItem.config.componentState.doc.Title); + tab.closeElement.off('click') //unbind the current click handler .click(function () { - if (confirm('really close this?')) { - stack.remove(); - } + //if (confirm('really close this?')) { + tab.contentItem.remove(); + //} }); }); - myLayout.on('tabCreated', function (tab: any) { - tab.setTitle(tab.contentItem.config.componentState.doc.Title); - tab.closeElement.off('click') //unbind the current click handler + CollectionDockingView.myLayout.on('stackCreated', function (stack: any) { + if (CollectionDockingView.myLayout._makeFullScreen) { + CollectionDockingView.myLayout._maximizedStack = stack; + CollectionDockingView.myLayout._maxstack = stack.header.controlsContainer.find('.lm_maximise'); + } + stack.header.controlsContainer.find('.lm_popout').hide(); + stack.header.controlsContainer.find('.lm_close') //get the close icon + .off('click') //unbind the current click handler .click(function () { - if (confirm('really close this?')) { - tab.contentItem.remove(); - } + //if (confirm('really close this?')) { + stack.remove(); + //} }); }); var me = this; - myLayout.registerComponent('documentViewComponent', function (container: any, state: any) { + CollectionDockingView.myLayout.registerComponent('documentViewComponent', function (container: any, state: any) { // bcz: this is crufty // calling html() causes a div tag to be added in the DOM with id 'containingDiv'. // Apparently, we need to wait to allow a live html div element to actually be instantiated. @@ -152,11 +230,14 @@ export class CollectionDockingView extends React.Component<CollectionViewProps> <DocumentView key={state.doc.Id} Document={state.doc} ContainingCollectionView={me} ContainingDocumentView={me.props.ContainingDocumentView} /> ), document.getElementById(containingDiv) - ) + ); + if (CollectionDockingView.myLayout._maxstack != null) { + CollectionDockingView.myLayout._maxstack.click(); + } }, 0); }); - myLayout.container = this._containerRef.current; - myLayout.init(); + CollectionDockingView.myLayout.container = this._containerRef.current; + CollectionDockingView.myLayout.init(); } @@ -168,35 +249,24 @@ 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; - if (CollectionDockingView.UseGoldenLayout) { - 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: "100%", - height: "100%" - }} > - </div> - </div> - ); - } else { - 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.modelForFlexLayout} factory={this.flexLayoutFactory} /> - </div> - </div> - ); + var chooseLayout = () => { + if (!CollectionDockingView.UseGoldenLayout) + return <FlexLayout.Layout model={this.modelForFlexLayout} factory={this.flexLayoutFactory} />; } + + return ( + <div className="border" style={{ + borderStyle: "solid", + borderWidth: `${COLLECTION_BORDER_WIDTH}px`, + }}> + <div className="collectiondockingview-container" id="menuContainer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef} + style={{ + width: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : w - 2 * COLLECTION_BORDER_WIDTH, + height: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : h - 2 * COLLECTION_BORDER_WIDTH + }} > + {chooseLayout()} + </div> + </div> + ); } }
\ No newline at end of file diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx index b4dd140d0..ffb39426d 100644 --- a/src/views/collections/CollectionFreeFormView.tsx +++ b/src/views/collections/CollectionFreeFormView.tsx @@ -3,7 +3,7 @@ import { Key, KeyStore } from "../../fields/Key"; import React = require("react"); import { action, observable, computed } from "mobx"; import { Document } from "../../fields/Document"; -import { DocumentView, CollectionViewProps } from "../nodes/DocumentView"; +import { DocumentView, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "../nodes/DocumentView"; import { ListField } from "../../fields/ListField"; import { NumberField } from "../../fields/NumberField"; import { SSL_OP_SINGLE_DH_USE } from "constants"; @@ -24,8 +24,6 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps> super(props); } - public static BORDER_WIDTH = 2; - @computed public get active(): boolean { var isSelected = (this.props.ContainingDocumentView != undefined && SelectionManager.IsSelected(this.props.ContainingDocumentView)); @@ -37,17 +35,22 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps> } drop = (e: Event, de: DragManager.DropEvent) => { - const doc = de.data[ "document" ]; + const doc = de.data["document"]; if (doc instanceof DocumentView) { if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this) { doc.props.ContainingCollectionView.removeDocument(doc.props.Document); this.addDocument(doc.props.Document); } - const xOffset = de.data[ "xOffset" ] as number || 0; - const yOffset = de.data[ "yOffset" ] as number || 0; - let { LocalX, LocalY } = this.props.ContainingDocumentView!.TransformToLocalPoint(de.x - xOffset, de.y - yOffset); - doc.x = LocalX; - doc.y = LocalY; + const xOffset = de.data["xOffset"] as number || 0; + const yOffset = de.data["yOffset"] as number || 0; + const { scale, translateX, translateY } = Utils.GetScreenTransform(this._canvasRef.current!); + let sscale = this.props.ContainingDocumentView!.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)) + const screenX = de.x - xOffset; + const screenY = de.y - yOffset; + const docX = (screenX - translateX) / sscale / scale; + const docY = (screenY - translateY) / sscale / scale; + doc.x = docX; + doc.y = docY; } e.stopPropagation(); } @@ -67,8 +70,6 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps> @action onPointerDown = (e: React.PointerEvent): void => { if (e.button === 2 && this.active) { - e.stopPropagation(); - e.preventDefault(); document.removeEventListener("pointermove", this.onPointerMove); document.addEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); @@ -123,7 +124,7 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps> e.stopPropagation() e.preventDefault() let fReader = new FileReader() - let file = e.dataTransfer.items[ 0 ].getAsFile(); + let file = e.dataTransfer.items[0].getAsFile(); let that = this; const panx: number = this.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); const pany: number = this.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); @@ -178,14 +179,15 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps> const panx: number = Document.GetNumberField(KeyStore.PanX, 0); const pany: number = Document.GetNumberField(KeyStore.PanY, 0); const currScale: number = Document.GetNumberField(KeyStore.Scale, 1); + console.log("DocsR " + value.length); return ( <div className="border" style={{ borderStyle: "solid", - borderWidth: `${CollectionFreeFormView.BORDER_WIDTH}px`, + borderWidth: `${COLLECTION_BORDER_WIDTH}px`, }}> <div className="collectionfreeformview-container" onPointerDown={this.onPointerDown} onWheel={this.onPointerWheel} onContextMenu={(e) => e.preventDefault()} style={{ width: "100%", - height: `calc(100% - 2*${CollectionFreeFormView.BORDER_WIDTH}px)`, + height: `calc(100% - 2*${COLLECTION_BORDER_WIDTH}px)`, }} onDrop={this.onDrop} onDragOver={this.onDragOver} ref={this._containerRef}> <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px) scale(${currScale}, ${currScale})`, transformOrigin: `left, top` }} ref={this._canvasRef}> |