title

3 files changed, 20 insertions, 7 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index e8b93a18b..5c99c52ea 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -2,7 +2,7 @@
     position: absolute;
     display: grid;
     z-index: 1000;
-    grid-template-rows: 20px 1fr 20px;
+    grid-template-rows: 20px 20px 1fr 20px;
     grid-template-columns: 20px 1fr 20px;
     pointer-events: none;
     #documentDecorations-centerCont {
@@ -29,4 +29,10 @@
     #documentDecorations-rightResizer {
         cursor: ew-resize;
     }
+    .title{
+        background: lightblue;
+        grid-column-start:1;
+        grid-column-end: 4;
+        cursor: ne-resize;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 7efaa5533..3e674e5ae 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -4,6 +4,7 @@ import { SelectionManager } from "../util/SelectionManager";
 import { observer } from "mobx-react";
 import './DocumentDecorations.scss'
 import { CollectionFreeFormView } from "./collections/CollectionFreeFormView";
+import ContentEditable from 'react-contenteditable'
 
 @observer
 export class DocumentDecorations extends React.Component {
@@ -14,10 +15,14 @@ export class DocumentDecorations extends React.Component {
 
     constructor(props: Readonly<{}>) {
         super(props)
-
         DocumentDecorations.Instance = this
+        this.state = { html: "hi" };
     }
 
+    // handleChange = evt => {
+    //     this.setState({ html: evt.target.value });
+    // };
+
     @computed
     get Bounds(): { x: number, y: number, b: number, r: number } {
         return SelectionManager.SelectedDocuments().reduce((bounds, element) => {
@@ -47,6 +52,7 @@ export class DocumentDecorations extends React.Component {
         e.stopPropagation();
         if (e.button === 0) {
             this._isPointerDown = true;
+            console.log("Pointer down");
             this._resizer = e.currentTarget.id;
             document.removeEventListener("pointermove", this.onPointerMove);
             document.addEventListener("pointermove", this.onPointerMove);
@@ -133,12 +139,14 @@ export class DocumentDecorations extends React.Component {
         var bounds = this.Bounds;
         return (
             <div id="documentDecorations-container" style={{
-                width: (bounds.r - bounds.x + 40) + "px",
-                height: (bounds.b - bounds.y + 40) + "px",
+                width: (bounds.r - bounds.x + 20 + 20) + "px",
+                height: (bounds.b - bounds.y + 40 + 20) + "px",
                 left: bounds.x - 20,
-                top: bounds.y - 20,
+                top: bounds.y - 20 - 20,
                 opacity: this.opacity
             }}>
+                {/*<input className="title" name="dynbox" value="hey" onPointerDown={this.onPointerDown} />*/}
+                <div className="title" onPointerDown={this.onPointerDown}>{document.title}</div>
                 <div id="documentDecorations-topLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-topResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-topRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
@@ -148,7 +156,6 @@ export class DocumentDecorations extends React.Component {
                 <div id="documentDecorations-bottomLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-bottomResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-
             </div>
         )
     }
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index ba92cc17e..b9f084b75 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -43,7 +43,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     let doc1 = Documents.TextDocument({ title: "hello", width: 400, height: 300 });
     let doc2 = doc1.MakeDelegate();
     doc2.Set(KS.X, new NumberField(150));
-    doc2.Set(KS.Y, new NumberField(20));
+    doc2.Set(KS.Y, new NumberField(500));
     let doc3 = Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", {
         x: 450, y: 100, title: "cat 1", width: 606, height: 386, nativeWidth: 606, nativeHeight: 386
     });