diff options
| -rw-r--r-- | package-lock.json | 9 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -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 | ||||
| -rw-r--r-- | tsconfig.json | 7 |
6 files changed, 35 insertions, 9 deletions
diff --git a/package-lock.json b/package-lock.json index a4939f1cb..5af1aec8b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8896,6 +8896,15 @@ "scheduler": "^0.12.0" } }, + "react-contenteditable": { + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/react-contenteditable/-/react-contenteditable-3.2.6.tgz", + "integrity": "sha512-jmr/wnuaU0teJ7U5ePUtEV4xDqaJS3jAFaXMF/3Dyr0COLV6gegcH0Yj727BdT7DnHWVoXVpR7m1s9hDgmSBTw==", + "requires": { + "@types/prop-types": "^15.5.6", + "fast-deep-equal": "^2.0.1" + } + }, "react-dom": { "version": "16.7.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.7.0.tgz", diff --git a/package.json b/package.json index 657bb875d..080f328c7 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,7 @@ "prosemirror-transform": "^1.1.3", "prosemirror-view": "^1.7.1", "react": "^16.5.2", + "react-contenteditable": "^3.2.6", "react-dom": "^16.7.0", "react-golden-layout": "^1.0.6", "react-image-lightbox": "^5.1.0", 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 }); diff --git a/tsconfig.json b/tsconfig.json index 265ce4403..e30f80b14 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,10 +7,13 @@ "jsx": "react", "sourceMap": true, "outDir": "dist", - "lib": ["dom", "es2015"] + "lib": [ + "dom", + "es2015" + ], }, "exclude": [ "node_modules", "static" ] -} +}
\ No newline at end of file |