diff options
Diffstat (limited to 'src/views')
| -rw-r--r-- | src/views/freeformcanvas/CollectionFreeFormView.tsx | 10 | ||||
| -rw-r--r-- | src/views/freeformcanvas/FreeFormCanvas.tsx | 4 | ||||
| -rw-r--r-- | src/views/nodes/DocumentView.tsx | 57 |
3 files changed, 61 insertions, 10 deletions
diff --git a/src/views/freeformcanvas/CollectionFreeFormView.tsx b/src/views/freeformcanvas/CollectionFreeFormView.tsx index d5343536d..4e9e0cd21 100644 --- a/src/views/freeformcanvas/CollectionFreeFormView.tsx +++ b/src/views/freeformcanvas/CollectionFreeFormView.tsx @@ -9,10 +9,12 @@ 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; doc: Document; + isSelected: boolean; } @observer @@ -26,6 +28,10 @@ export class CollectionFreeFormView extends React.Component<IProps> { @action onPointerDown = (e: React.PointerEvent): void => { + if (!this.props.isSelected) { + return; + } + e.stopPropagation(); if (e.button === 2) { this._isPointerDown = true; @@ -54,10 +60,14 @@ export class CollectionFreeFormView extends React.Component<IProps> { return; } const { doc } = this.props; + 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/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<IProps> { document.removeEventListener("pointerup", this.onPointerUp); document.addEventListener("pointerup", this.onPointerUp); } + + SelectionManager.DeselectAll() } @action @@ -57,6 +60,7 @@ export class FreeFormCanvas extends React.Component<IProps> { 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 f955a8c39..e37172943 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,8 @@ import { FieldTextBox } from "../nodes/FieldTextBox" 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 { @@ -18,6 +20,12 @@ interface IProps { @observer export class DocumentView extends React.Component<IProps> { + private _mainCont = React.createRef<HTMLDivElement>(); + + get mainCont(): React.RefObject<HTMLDivElement> { + return this._mainCont + } + @computed get x(): number { return this.props.dvm.Doc.GetFieldValue(KeyStore.X, NumberField, Number(0)); @@ -46,11 +54,19 @@ export class DocumentView extends React.Component<IProps> { 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("<p>Error loading layout data</p>")); @@ -66,6 +82,11 @@ export class DocumentView extends React.Component<IProps> { return this.props.dvm.Doc.GetFieldValue(KeyStore.LayoutFields, ListField, new Array<Key>()); } + @computed + get selected() : boolean { + return SelectionManager.IsSelected(this) + } + private _isPointerDown = false; onPointerDown = (e: React.PointerEvent): void => { @@ -77,6 +98,7 @@ export class DocumentView extends React.Component<IProps> { document.removeEventListener("pointerup", this.onPointerUp); document.addEventListener("pointerup", this.onPointerUp); } + SelectionManager.SelectDoc(this, e.ctrlKey) } onPointerUp = (e: PointerEvent): void => { @@ -86,6 +108,9 @@ export class DocumentView extends React.Component<IProps> { 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 } } @@ -97,12 +122,21 @@ export class DocumentView extends React.Component<IProps> { } this.x += e.movementX; this.y += e.movementY; + DocumentDecorations.Instance.opacity = 0 + } + + onDragStart = (e: React.DragEvent<HTMLDivElement>): void => { + if (this.mainCont.current !== null) { + this.mainCont.current.style.opacity = "0"; + // e.dataTransfer.setDragImage() + } } 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; @@ -113,15 +147,18 @@ export class DocumentView extends React.Component<IProps> { bindings[key.Name] = field.GetValue(); } } + return ( - <div className="node" style={{ - transform: this.transform, - width: this.width, - height: this.height - }} onPointerDown={this.onPointerDown} onContextMenu={ - (e) => { - e.preventDefault() - }}> + <div className="node" ref={this._mainCont} style={{ + transform: this.transform, + width: this.width, + height: this.height, + }} + onContextMenu={ + (e) => { + e.preventDefault() + }} + onPointerDown={this.onPointerDown}> <JsxParser components={{ FieldTextBox, FreeFormCanvas, CollectionFreeFormView }} bindings={bindings} |
