From 96dcfc8db79c035ba355d7459907f48c1f62ec08 Mon Sep 17 00:00:00 2001 From: yipstanley Date: Thu, 17 Jan 2019 22:40:45 -0500 Subject: moving documents and panning stuff now uses right click --- src/views/nodes/DocumentView.tsx | 46 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) (limited to 'src/views/nodes') diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index b9fbef91c..1c9f850ed 100644 --- a/src/views/nodes/DocumentView.tsx +++ b/src/views/nodes/DocumentView.tsx @@ -28,6 +28,14 @@ export class DocumentView extends React.Component { return this.props.dvm.Doc.GetFieldValue(KeyStore.Y, NumberField, Number(0)); } + set x(x: number) { + this.props.dvm.Doc.SetFieldValue(KeyStore.X, x, NumberField) + } + + set y(y: number) { + this.props.dvm.Doc.SetFieldValue(KeyStore.Y, y, NumberField) + } + @computed get transform(): string { return `translate(${this.x}px, ${this.y}px)`; @@ -64,6 +72,39 @@ export class DocumentView extends React.Component { return this.props.dvm.Doc.GetFieldValue(KeyStore.LayoutFields, ListField, new Array()); } + private _isPointerDown = false; + + onPointerDown = (e: React.PointerEvent): void => { + e.stopPropagation(); + if (e.button === 2) { + this._isPointerDown = true; + document.removeEventListener("pointermove", this.onPointerMove); + document.addEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + document.addEventListener("pointerup", this.onPointerUp); + } + } + + onPointerUp = (e: PointerEvent): void => { + e.stopPropagation(); + if (e.button === 2) { + e.preventDefault(); + this._isPointerDown = false; + document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + } + } + + onPointerMove = (e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + if (!this._isPointerDown) { + return; + } + this.x += e.movementX; + this.y += e.movementY; + } + render() { let doc = this.props.dvm.Doc; let bindings: any = { @@ -83,7 +124,10 @@ export class DocumentView extends React.Component { transform: this.transform, width: this.width, height: this.height - }}> + }} onPointerDown={this.onPointerDown} onContextMenu={ + (e) => { + e.preventDefault() + }}>