From 22e1d39e5c6d2756a039543b33c45d9610669ec7 Mon Sep 17 00:00:00 2001 From: yipstanley Date: Fri, 18 Jan 2019 19:31:03 -0500 Subject: selection manager added --- src/documents/Documents.ts | 2 +- src/util/SelectionManager.ts | 31 ++++++++++++++++++++++ src/viewmodels/DocumentViewModel.ts | 10 +++++++ .../freeformcanvas/CollectionFreeFormView.tsx | 28 +++++++++++-------- src/views/nodes/DocumentView.tsx | 16 ++++++++--- 5 files changed, 72 insertions(+), 15 deletions(-) create mode 100644 src/util/SelectionManager.ts (limited to 'src') diff --git a/src/documents/Documents.ts b/src/documents/Documents.ts index bba678bbd..442fb00c7 100644 --- a/src/documents/Documents.ts +++ b/src/documents/Documents.ts @@ -77,7 +77,7 @@ export namespace Documents { collectionProto.SetField(KeyStore.Y, new NumberField(0)); collectionProto.SetField(KeyStore.Width, new NumberField(300)); collectionProto.SetField(KeyStore.Height, new NumberField(300)); - collectionProto.SetField(KeyStore.Layout, new TextField('')); + collectionProto.SetField(KeyStore.Layout, new TextField('')); collectionProto.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.Data])); } return collectionProto; diff --git a/src/util/SelectionManager.ts b/src/util/SelectionManager.ts new file mode 100644 index 000000000..52c92d174 --- /dev/null +++ b/src/util/SelectionManager.ts @@ -0,0 +1,31 @@ +import { DocumentView } from "../views/nodes/DocumentView"; +import { observable, action } from "mobx"; + +export namespace SelectionManager { + class Manager { + @observable + SelectedDocuments: Array = []; + + @action + SelectDoc(doc: DocumentView, ctrlPressed: boolean): void { + // if doc is not in SelectedDocuments, add it + if (!ctrlPressed) { + manager.SelectedDocuments = []; + } + + if (manager.SelectedDocuments.indexOf(doc) === -1) { + manager.SelectedDocuments.push(doc) + } + } + } + + const manager = new Manager; + + export function SelectDoc(doc: DocumentView, ctrlPressed: boolean): void { + manager.SelectDoc(doc, ctrlPressed) + } + + export function IsSelected(doc: DocumentView): boolean { + return manager.SelectedDocuments.indexOf(doc) !== -1; + } +} \ No newline at end of file diff --git a/src/viewmodels/DocumentViewModel.ts b/src/viewmodels/DocumentViewModel.ts index 008275f3c..f3154db54 100644 --- a/src/viewmodels/DocumentViewModel.ts +++ b/src/viewmodels/DocumentViewModel.ts @@ -8,4 +8,14 @@ export class DocumentViewModel { get Doc(): Document { return this.doc; } + + private _selected = false; + + get Selected() : boolean { + return this._selected; + } + + set Selected(isSelected: boolean) { + this._selected = isSelected; + } } \ No newline at end of file diff --git a/src/views/freeformcanvas/CollectionFreeFormView.tsx b/src/views/freeformcanvas/CollectionFreeFormView.tsx index 8bdf1849a..7812c4b36 100644 --- a/src/views/freeformcanvas/CollectionFreeFormView.tsx +++ b/src/views/freeformcanvas/CollectionFreeFormView.tsx @@ -4,14 +4,15 @@ import "./FreeFormCanvas.scss"; import React = require("react"); import { action } from "mobx"; import { Document } from "../../fields/Document"; -import {DocumentViewModel} from "../../viewmodels/DocumentViewModel"; -import {DocumentView} from "../nodes/DocumentView"; -import {ListField} from "../../fields/ListField"; -import {NumberField} from "../../fields/NumberField"; +import { DocumentViewModel } from "../../viewmodels/DocumentViewModel"; +import { DocumentView } from "../nodes/DocumentView"; +import { ListField } from "../../fields/ListField"; +import { NumberField } from "../../fields/NumberField"; interface IProps { - fieldKey:Key; - doc:Document; + fieldKey: Key; + doc: Document; + isSelected: boolean; } @observer @@ -19,7 +20,7 @@ export class CollectionFreeFormView extends React.Component { private _isPointerDown: boolean = false; - constructor(props:IProps) { + constructor(props: IProps) { super(props); } @@ -52,11 +53,16 @@ export class CollectionFreeFormView extends React.Component { if (!this._isPointerDown) { return; } - const {doc} = this.props; + 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); + doc.SetFieldValue(KeyStore.PanX, x + e.movementX, NumberField); + doc.SetFieldValue(KeyStore.PanY, y + e.movementY, NumberField); } @action @@ -68,7 +74,7 @@ export class CollectionFreeFormView extends React.Component { } render() { - const {fieldKey, doc} = this.props; + const { fieldKey, doc } = this.props; const value: Document[] = doc.GetFieldValue(fieldKey, ListField, []); const panx: number = doc.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); const pany: number = doc.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index 1c9f850ed..c4101fab9 100644 --- a/src/views/nodes/DocumentView.tsx +++ b/src/views/nodes/DocumentView.tsx @@ -1,6 +1,6 @@ import { observer } from "mobx-react"; import React = require("react"); -import { computed } from "mobx"; +import { computed, observable } from "mobx"; import { KeyStore, Key } from "../../fields/Key"; import { NumberField } from "../../fields/NumberField"; import { TextField } from "../../fields/TextField"; @@ -10,6 +10,7 @@ import { FieldTextBox } from "../nodes/FieldTextBox" import { FreeFormCanvas } from "../freeformcanvas/FreeFormCanvas" import { CollectionFreeFormView } from "../freeformcanvas/CollectionFreeFormView" import "./NodeView.scss" +import { SelectionManager } from "../../util/SelectionManager"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? interface IProps { @@ -72,6 +73,11 @@ export class DocumentView extends React.Component { return this.props.dvm.Doc.GetFieldValue(KeyStore.LayoutFields, ListField, new Array()); } + @computed + get selected() : string { + return SelectionManager.IsSelected(this) ? "5px solid black" : "0px" + } + private _isPointerDown = false; onPointerDown = (e: React.PointerEvent): void => { @@ -83,6 +89,7 @@ export class DocumentView extends React.Component { document.removeEventListener("pointerup", this.onPointerUp); document.addEventListener("pointerup", this.onPointerUp); } + SelectionManager.SelectDoc(this, e.ctrlKey) } onPointerUp = (e: PointerEvent): void => { @@ -108,7 +115,8 @@ export class DocumentView extends React.Component { render() { let doc = this.props.dvm.Doc; let bindings: any = { - doc: doc + doc: doc, + isSelected: this.selected }; for (const key of this.layoutKeys) { bindings[key.Name + "Key"] = key; @@ -119,11 +127,13 @@ export class DocumentView extends React.Component { bindings[key.Name] = field.GetValue(); } } + return (
{ e.preventDefault() -- cgit v1.2.3-70-g09d2 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 + src/DocumentDecorations.tsx | 64 ++++++++++++++++++++++ src/Main.tsx | 2 + src/util/SelectionManager.ts | 8 +++ .../freeformcanvas/CollectionFreeFormView.tsx | 4 ++ src/views/freeformcanvas/FreeFormCanvas.tsx | 4 ++ src/views/nodes/DocumentView.tsx | 10 +++- 7 files changed, 93 insertions(+), 2 deletions(-) create mode 100644 src/DocumentDecorations.scss create mode 100644 src/DocumentDecorations.tsx (limited to 'src') 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 diff --git a/src/DocumentDecorations.tsx b/src/DocumentDecorations.tsx new file mode 100644 index 000000000..60596e96a --- /dev/null +++ b/src/DocumentDecorations.tsx @@ -0,0 +1,64 @@ +import { observable, computed } from "mobx"; +import React = require("react"); +import { DocumentView } from "./views/nodes/DocumentView"; +import { SelectionManager } from "./util/SelectionManager"; + +export class DocumentDecorations extends React.Component { + @computed + get x(): number { + let left = Number.MAX_VALUE; + SelectionManager.SelectedDocuments().forEach(element => { + if (element.mainCont.current !== null) { + left = Math.min(element.mainCont.current.getBoundingClientRect().left, left) + } + }); + return left; + } + + @computed + get y(): number { + let top = Number.MAX_VALUE; + SelectionManager.SelectedDocuments().forEach(element => { + if (element.mainCont.current !== null) { + top = Math.min(element.mainCont.current.getBoundingClientRect().top, top) + } + }); + return top; + } + + @computed + get height(): number { + let bottom = Number.MIN_VALUE; + SelectionManager.SelectedDocuments().forEach(element => { + if (element.mainCont.current !== null) { + bottom = Math.min(element.mainCont.current.getBoundingClientRect().bottom, bottom) + } + }); + return bottom - 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) + } + }); + return right - this.x; + } + + render() { + return( +
+ +
+ ) + } +} \ No newline at end of file diff --git a/src/Main.tsx b/src/Main.tsx index 604e443cf..461ee637a 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -11,6 +11,7 @@ import { Document } from './fields/Document'; import { configure, runInAction } from 'mobx'; import { NodeStore } from './stores/NodeStore'; import { Documents } from './documents/Documents'; +import { DocumentDecorations } from './DocumentDecorations'; configure({ enforceActions: "observed" @@ -20,6 +21,7 @@ const mainNodeCollection = new NodeCollectionStore(); ReactDOM.render((

Dash Web

+
), document.getElementById('root')); diff --git a/src/util/SelectionManager.ts b/src/util/SelectionManager.ts index 52c92d174..2a63248c4 100644 --- a/src/util/SelectionManager.ts +++ b/src/util/SelectionManager.ts @@ -28,4 +28,12 @@ export namespace SelectionManager { export function IsSelected(doc: DocumentView): boolean { return manager.SelectedDocuments.indexOf(doc) !== -1; } + + export function DeselectAll(): void { + manager.SelectedDocuments = [] + } + + export function SelectedDocuments(): Array { + return manager.SelectedDocuments; + } } \ No newline at end of file diff --git a/src/views/freeformcanvas/CollectionFreeFormView.tsx b/src/views/freeformcanvas/CollectionFreeFormView.tsx index 33b7ed1ad..9a4f5ffa1 100644 --- a/src/views/freeformcanvas/CollectionFreeFormView.tsx +++ b/src/views/freeformcanvas/CollectionFreeFormView.tsx @@ -27,6 +27,10 @@ export class CollectionFreeFormView extends React.Component { @action onPointerDown = (e: React.PointerEvent): void => { + if (!this.props.isSelected) { + return; + } + e.stopPropagation(); if (e.button === 2) { this._isPointerDown = true; diff --git a/src/views/freeformcanvas/FreeFormCanvas.tsx b/src/views/freeformcanvas/FreeFormCanvas.tsx index 9ef5ab8f7..de5e88fa1 100644 --- a/src/views/freeformcanvas/FreeFormCanvas.tsx +++ b/src/views/freeformcanvas/FreeFormCanvas.tsx @@ -10,6 +10,7 @@ import {DocumentView} from "../nodes/DocumentView"; import {TextField} from "../../fields/TextField"; import {ListField} from "../../fields/ListField"; import {Field} from "../../fields/Field"; +import { SelectionManager } from "../../util/SelectionManager"; interface IProps { store: NodeCollectionStore; @@ -34,6 +35,8 @@ export class FreeFormCanvas extends React.Component { document.removeEventListener("pointerup", this.onPointerUp); document.addEventListener("pointerup", this.onPointerUp); } + + SelectionManager.DeselectAll() } @action @@ -57,6 +60,7 @@ export class FreeFormCanvas extends React.Component { if (!this._isPointerDown) { return; } + this.props.store.X += e.movementX; this.props.store.Y += e.movementY; } diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index 1f5ce7f22..d6f4b296d 100644 --- a/src/views/nodes/DocumentView.tsx +++ b/src/views/nodes/DocumentView.tsx @@ -19,6 +19,12 @@ interface IProps { @observer export class DocumentView extends React.Component { + private _mainCont = React.createRef(); + + get mainCont(): React.RefObject { + return this._mainCont + } + @computed get x(): number { return this.props.dvm.Doc.GetFieldValue(KeyStore.X, NumberField, Number(0)); @@ -110,7 +116,7 @@ export class DocumentView extends React.Component { let doc = this.props.dvm.Doc; let bindings: any = { doc: doc, - isSelected: this.selected + isSelected: this.selected !== "0px" }; for (const key of this.layoutKeys) { bindings[key.Name + "Key"] = key; @@ -123,7 +129,7 @@ export class DocumentView extends React.Component { } return ( -
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') 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') 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}>