diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/DocumentDecorations.scss | 8 | ||||
| -rw-r--r-- | src/client/views/DocumentDecorations.tsx | 17 | ||||
| -rw-r--r-- | src/client/views/Main.tsx | 2 |
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 }); |