From 4d2bd0796c839b25ed9b96319957d02fbe452aca Mon Sep 17 00:00:00 2001 From: yipstanley Date: Fri, 18 Jan 2019 20:28:53 -0500 Subject: yuck --- src/DocumentDecorations.scss | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/DocumentDecorations.scss (limited to 'src/DocumentDecorations.scss') diff --git a/src/DocumentDecorations.scss b/src/DocumentDecorations.scss new file mode 100644 index 000000000..34c279e60 --- /dev/null +++ b/src/DocumentDecorations.scss @@ -0,0 +1,3 @@ +.documentDecorations-container { + background: blue; +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From a0fadfc2017632dc17455ecf5fe7dd669834e887 Mon Sep 17 00:00:00 2001 From: yipstanley Date: Fri, 18 Jan 2019 21:01:16 -0500 Subject: document decorations added kinda --- src/DocumentDecorations.scss | 17 ++++++++++++++++- src/DocumentDecorations.tsx | 34 +++++++++++++++++++++++----------- src/views/nodes/DocumentView.tsx | 9 ++++----- 3 files changed, 43 insertions(+), 17 deletions(-) (limited to 'src/DocumentDecorations.scss') 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(
+
+
+
+
+
+
+
+
+
) 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 { } @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 { 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 {
{ e.preventDefault() -- cgit v1.2.3-70-g09d2 From 08e2d1fd54824a1e8638a66ff031253ae72ab77b Mon Sep 17 00:00:00 2001 From: yipstanley Date: Sat, 19 Jan 2019 21:55:30 -0500 Subject: resizing! --- src/DocumentDecorations.scss | 18 ++- src/DocumentDecorations.tsx | 132 ++++++++++++++++++--- .../freeformcanvas/CollectionFreeFormView.tsx | 8 +- src/views/nodes/DocumentView.tsx | 36 ++++-- 4 files changed, 167 insertions(+), 27 deletions(-) (limited to 'src/DocumentDecorations.scss') diff --git a/src/DocumentDecorations.scss b/src/DocumentDecorations.scss index 8d2824b7e..fff4d201a 100644 --- a/src/DocumentDecorations.scss +++ b/src/DocumentDecorations.scss @@ -1,4 +1,4 @@ -.documentDecorations-container { +#documentDecorations-container { position: absolute; z-index: 1000; display: grid; @@ -15,4 +15,20 @@ pointer-events: auto; background: lightblue; opacity: 0.8; +} + +#documentDecorations-topLeftResizer, #documentDecorations-bottomRightResizer { + cursor: nwse-resize; +} + +#documentDecorations-topRightResizer, #documentDecorations-bottomLeftResizer { + cursor: nesw-resize; +} + +#documentDecorations-topResizer, #documentDecorations-bottomResizer { + cursor: ns-resize; +} + +#documentDecorations-leftResizer, #documentDecorations-rightResizer { + cursor: ew-resize; } \ No newline at end of file diff --git a/src/DocumentDecorations.tsx b/src/DocumentDecorations.tsx index a83d5327b..d7466dcac 100644 --- a/src/DocumentDecorations.tsx +++ b/src/DocumentDecorations.tsx @@ -7,7 +7,13 @@ import './DocumentDecorations.scss' @observer export class DocumentDecorations extends React.Component { - @computed + static Instance: DocumentDecorations + constructor(props: Readonly<{}>) { + super(props) + + DocumentDecorations.Instance = this + } + get x(): number { let left = Number.MAX_VALUE; SelectionManager.SelectedDocuments().forEach(element => { @@ -18,7 +24,6 @@ export class DocumentDecorations extends React.Component { return left; } - @computed get y(): number { let top = Number.MAX_VALUE; SelectionManager.SelectedDocuments().forEach(element => { @@ -29,7 +34,6 @@ export class DocumentDecorations extends React.Component { return top; } - @computed get height(): number { return (SelectionManager.SelectedDocuments().reduce((bottom, element) => { if (element.mainCont.current !== null) { @@ -41,7 +45,6 @@ export class DocumentDecorations extends React.Component { }, Number.MIN_VALUE)) - this.y; } - @computed get width(): number { let right = Number.MIN_VALUE; SelectionManager.SelectedDocuments().forEach(element => { @@ -52,23 +55,122 @@ export class DocumentDecorations extends React.Component { return right - this.x; } + private _resizer = "" + private _isPointerDown = false; + @observable private _opacity = 1; + + @computed + get opacity(): number { + return this._opacity + } + + set opacity(o: number) { + this._opacity = Math.min(Math.max(0, o), 1) + } + + onPointerDown = (e: React.PointerEvent): void => { + e.stopPropagation(); + if (e.button === 0) { + this._isPointerDown = true; + this._resizer = e.currentTarget.id; + document.removeEventListener("pointermove", this.onPointerMove); + document.addEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + document.addEventListener("pointerup", this.onPointerUp); + } + } + + onPointerMove = (e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + if (!this._isPointerDown) { + return; + } + + let dX = 0, dY = 0, dW = 0, dH = 0; + + switch (this._resizer) { + case "": + break; + case "documentDecorations-topLeftResizer": + dX = -1 + dY = -1 + dW = -(e.movementX) + dH = -(e.movementY) + break; + case "documentDecorations-topRightResizer": + dW = e.movementX + dY = -1 + dH = -(e.movementY) + break; + case "documentDecorations-topResizer": + dY = -1 + dH = -(e.movementY) + break; + case "documentDecorations-bottomLeftResizer": + dX = -1 + dW = -(e.movementX) + dH = e.movementY + break; + case "documentDecorations-bottomRightResizer": + dW = e.movementX + dH = e.movementY + break; + case "documentDecorations-bottomResizer": + dH = e.movementY + break; + case "documentDecorations-leftResizer": + dX = -1 + dW = -(e.movementX) + break; + case "documentDecorations-rightResizer": + dW = e.movementX + break; + } + + SelectionManager.SelectedDocuments().forEach(element => { + if (element.mainCont.current !== null) { + let scale = element.width / element.mainCont.current.getBoundingClientRect().width; + let actualdW = Math.max(element.width + (dW * scale), 20); + let actualdH = Math.max(element.height + (dH * scale), 20); + element.x += dX * (actualdW - element.width); + element.y += dY * (actualdH - element.height); + element.width = actualdW; + element.height = actualdH; + } + }) + + this.forceUpdate() + } + + onPointerUp = (e: PointerEvent): void => { + e.stopPropagation(); + if (e.button === 0) { + e.preventDefault(); + this._isPointerDown = false; + document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + } + } + render() { - return( -
-
-
-
-
+
e.preventDefault()}>
+
e.preventDefault()}>
+
e.preventDefault()}>
+
e.preventDefault()}>
-
-
-
-
+
e.preventDefault()}>
+
e.preventDefault()}>
+
e.preventDefault()}>
+
e.preventDefault()}>
) diff --git a/src/views/freeformcanvas/CollectionFreeFormView.tsx b/src/views/freeformcanvas/CollectionFreeFormView.tsx index 9a4f5ffa1..4e9e0cd21 100644 --- a/src/views/freeformcanvas/CollectionFreeFormView.tsx +++ b/src/views/freeformcanvas/CollectionFreeFormView.tsx @@ -9,6 +9,7 @@ import { DocumentView } from "../nodes/DocumentView"; import { ListField } from "../../fields/ListField"; import { NumberField } from "../../fields/NumberField"; import { SSL_OP_SINGLE_DH_USE } from "constants"; +import { DocumentDecorations } from "../../DocumentDecorations"; interface IProps { fieldKey: Key; @@ -60,14 +61,13 @@ export class CollectionFreeFormView extends React.Component { } const { doc } = this.props; - // if docView is selected, pan, else dont pan - console.log(this.props.isSelected) - - let x = doc.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); let y = doc.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); doc.SetFieldValue(KeyStore.PanX, x + e.movementX, NumberField); doc.SetFieldValue(KeyStore.PanY, y + e.movementY, NumberField); + + + DocumentDecorations.Instance.forceUpdate() } @action diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index 5b0951f45..e37172943 100644 --- a/src/views/nodes/DocumentView.tsx +++ b/src/views/nodes/DocumentView.tsx @@ -11,6 +11,7 @@ import { FreeFormCanvas } from "../freeformcanvas/FreeFormCanvas" import { CollectionFreeFormView } from "../freeformcanvas/CollectionFreeFormView" import "./NodeView.scss" import { SelectionManager } from "../../util/SelectionManager"; +import { DocumentDecorations } from "../../DocumentDecorations"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? interface IProps { @@ -53,11 +54,19 @@ export class DocumentView extends React.Component { return this.props.dvm.Doc.GetFieldValue(KeyStore.Width, NumberField, Number(0)); } + set width(w: number) { + this.props.dvm.Doc.SetFieldValue(KeyStore.Width, w, NumberField) + } + @computed get height(): number { return this.props.dvm.Doc.GetFieldValue(KeyStore.Height, NumberField, Number(0)); } + set height(h: number) { + this.props.dvm.Doc.SetFieldValue(KeyStore.Height, h, NumberField) + } + @computed get layout(): string { return this.props.dvm.Doc.GetFieldValue(KeyStore.Layout, TextField, String("

Error loading layout data

")); @@ -99,6 +108,9 @@ export class DocumentView extends React.Component { this._isPointerDown = false; document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); + console.log(this.x); + console.log(this.y) + DocumentDecorations.Instance.opacity = 1 } } @@ -110,6 +122,14 @@ export class DocumentView extends React.Component { } this.x += e.movementX; this.y += e.movementY; + DocumentDecorations.Instance.opacity = 0 + } + + onDragStart = (e: React.DragEvent): void => { + if (this.mainCont.current !== null) { + this.mainCont.current.style.opacity = "0"; + // e.dataTransfer.setDragImage() + } } render() { @@ -130,13 +150,15 @@ export class DocumentView extends React.Component { return (
{ - e.preventDefault() - }}> + transform: this.transform, + width: this.width, + height: this.height, + }} + onContextMenu={ + (e) => { + e.preventDefault() + }} + onPointerDown={this.onPointerDown}>