document decorations added kinda

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()