diff options
Diffstat (limited to 'src/DocumentDecorations.tsx')
| -rw-r--r-- | src/DocumentDecorations.tsx | 34 |
1 files changed, 23 insertions, 11 deletions
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> ) |