diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/DocumentDecorations.scss | 17 | ||||
| -rw-r--r-- | src/DocumentDecorations.tsx | 34 | ||||
| -rw-r--r-- | src/views/nodes/DocumentView.tsx | 9 |
3 files changed, 43 insertions, 17 deletions
diff --git a/src/DocumentDecorations.scss b/src/DocumentDecorations.scss index 34c279e60..8d2824b7e 100644 --- a/src/DocumentDecorations.scss +++ b/src/DocumentDecorations.scss @@ -1,3 +1,18 @@ .documentDecorations-container { - background: blue; + position: absolute; + z-index: 1000; + display: grid; + grid-template-rows: 20px 1fr 20px; + grid-template-columns: 20px 1fr 20px; + pointer-events: none; +} + +#documentDecorations-centerCont { + background: none; +} + +.documentDecorations-resizer { + pointer-events: auto; + background: lightblue; + opacity: 0.8; }
\ No newline at end of file diff --git a/src/DocumentDecorations.tsx b/src/DocumentDecorations.tsx index 60596e96a..a83d5327b 100644 --- a/src/DocumentDecorations.tsx +++ b/src/DocumentDecorations.tsx @@ -2,7 +2,10 @@ import { observable, computed } from "mobx"; import React = require("react"); import { DocumentView } from "./views/nodes/DocumentView"; import { SelectionManager } from "./util/SelectionManager"; +import { observer } from "mobx-react"; +import './DocumentDecorations.scss' +@observer export class DocumentDecorations extends React.Component { @computed get x(): number { @@ -28,22 +31,22 @@ export class DocumentDecorations extends React.Component { @computed get height(): number { - let bottom = Number.MIN_VALUE; - SelectionManager.SelectedDocuments().forEach(element => { + return (SelectionManager.SelectedDocuments().reduce((bottom, element) => { if (element.mainCont.current !== null) { - bottom = Math.min(element.mainCont.current.getBoundingClientRect().bottom, bottom) + return Math.max(element.mainCont.current.getBoundingClientRect().bottom, bottom) } - }); - return bottom - this.y; + else { + return bottom + } + }, Number.MIN_VALUE)) - this.y; } @computed get width(): number { let right = Number.MIN_VALUE; - console.log(SelectionManager.SelectedDocuments()) SelectionManager.SelectedDocuments().forEach(element => { if (element.mainCont.current !== null) { - right = Math.min(element.mainCont.current.getBoundingClientRect().right, right) + right = Math.max(element.mainCont.current.getBoundingClientRect().right, right) } }); return right - this.x; @@ -52,11 +55,20 @@ export class DocumentDecorations extends React.Component { render() { return( <div className="documentDecorations-container" style={{ - width: `${this.width}px`, - height: `${this.height}px`, - left: this.x, - top: this.y + width: `${this.width + 40}px`, + height: `${this.height + 40}px`, + left: this.x - 20, + top: this.y - 20 }}> + <div id="documentDecorations-topLeftResizer" className="documentDecorations-resizer"></div> + <div id="documentDecorations-topResizer" className="documentDecorations-resizer"></div> + <div id="documentDecorations-topRightResizer" className="documentDecorations-resizer"></div> + <div id="documentDecorations-leftResizer" className="documentDecorations-resizer"></div> + <div id="documentDecorations-centerCont"></div> + <div id="documentDecorations-rightResizer" className="documentDecorations-resizer"></div> + <div id="documentDecorations-bottomLeftResizer" className="documentDecorations-resizer"></div> + <div id="documentDecorations-bottomResizer" className="documentDecorations-resizer"></div> + <div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer"></div> </div> ) diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index d6f4b296d..5b0951f45 100644 --- a/src/views/nodes/DocumentView.tsx +++ b/src/views/nodes/DocumentView.tsx @@ -74,8 +74,8 @@ export class DocumentView extends React.Component<IProps> { } @computed - get selected() : string { - return SelectionManager.IsSelected(this) ? "5px solid black" : "0px" + get selected() : boolean { + return SelectionManager.IsSelected(this) } private _isPointerDown = false; @@ -116,7 +116,7 @@ export class DocumentView extends React.Component<IProps> { let doc = this.props.dvm.Doc; let bindings: any = { doc: doc, - isSelected: this.selected !== "0px" + isSelected: this.selected }; for (const key of this.layoutKeys) { bindings[key.Name + "Key"] = key; @@ -132,8 +132,7 @@ export class DocumentView extends React.Component<IProps> { <div className="node" ref={this._mainCont} style={{ transform: this.transform, width: this.width, - height: this.height, - border: this.selected + height: this.height }} onPointerDown={this.onPointerDown} onContextMenu={ (e) => { e.preventDefault() |