diff options
Diffstat (limited to 'src/views/freeformcanvas/CollectionFreeFormView.tsx')
| -rw-r--r-- | src/views/freeformcanvas/CollectionFreeFormView.tsx | 150 |
1 files changed, 93 insertions, 57 deletions
diff --git a/src/views/freeformcanvas/CollectionFreeFormView.tsx b/src/views/freeformcanvas/CollectionFreeFormView.tsx index 84b30ac38..383d71d83 100644 --- a/src/views/freeformcanvas/CollectionFreeFormView.tsx +++ b/src/views/freeformcanvas/CollectionFreeFormView.tsx @@ -1,8 +1,7 @@ import { observer } from "mobx-react"; import { Key, KeyStore } from "../../fields/Key"; -import "./FreeFormCanvas.scss"; import React = require("react"); -import { action, observable } from "mobx"; +import { action, observable, computed } from "mobx"; import { Document } from "../../fields/Document"; import { DocumentViewModel } from "../../viewmodels/DocumentViewModel"; import { DocumentView } from "../nodes/DocumentView"; @@ -13,85 +12,123 @@ import { DocumentDecorations } from "../../DocumentDecorations"; import { SelectionManager } from "../../util/SelectionManager"; import { Documents } from "../../documents/Documents"; import { ContextMenu } from "../ContextMenu"; +import { Opt } from "../../fields/Field"; interface IProps { fieldKey: Key; - dvm: DocumentViewModel; - isSelected: boolean; + Document: Document; + ContainingDocumentView: Opt<DocumentView>; } @observer export class CollectionFreeFormView extends React.Component<IProps> { - private _isPointerDown: boolean = false; - constructor(props: IProps) { super(props); } - @action - onPointerDown = (e: React.PointerEvent): void => { - if (!this.props.isSelected && !this.props.dvm.IsMainDoc) { - return; - } - - if (this.props.dvm.IsMainDoc) { - SelectionManager.DeselectAll() - } + @computed + public get active():boolean { + var isSelected = (this.props.ContainingDocumentView != undefined && SelectionManager.IsSelected(this.props.ContainingDocumentView)); + var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this ); + var topMost = this.props.ContainingDocumentView != undefined && this.props.ContainingDocumentView.props.ContainingCollectionView == undefined; + return isSelected || childSelected || topMost; + } - e.stopPropagation(); - if (e.button === 2) { - this._isPointerDown = true; + _lastX: number = 0; + _lastY:number = 0; + @action + onPointerDown = (e: React.PointerEvent): void => + { + if (this.active && e.button === 2) { + e.stopPropagation(); + e.preventDefault(); document.removeEventListener("pointermove", this.onPointerMove); document.addEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); document.addEventListener("pointerup", this.onPointerUp); + this._lastX = e.pageX; + this._lastY = e.pageY; } } @action onPointerUp = (e: PointerEvent): void => { + document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); e.stopPropagation(); - if (e.button === 2) { - this._isPointerDown = false; - document.removeEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); + + var topMost = this.props.ContainingDocumentView != undefined && this.props.ContainingDocumentView.props.ContainingCollectionView == undefined; + if (topMost) { + SelectionManager.DeselectAll() } } @action - onPointerMove = (e: PointerEvent): void => { - e.preventDefault(); - e.stopPropagation(); - if (!this._isPointerDown) { - return; + onPointerMove = (e: PointerEvent): void => + { + if (!e.cancelBubble) { + e.preventDefault(); + e.stopPropagation(); + const doc = this.props.Document; + let me = this; + let currScale:number = this.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)); + if (me.props.ContainingDocumentView!.props.ContainingDocumentView != undefined) { + let pme = me.props.ContainingDocumentView!.props.ContainingDocumentView!.props.Document; + currScale = pme.GetFieldValue(KeyStore.Scale, NumberField, Number(0)); + } + let x = doc.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); + let y = doc.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); + doc.SetFieldValue(KeyStore.PanX, x + (e.pageX - this._lastX)/currScale, NumberField); + doc.SetFieldValue(KeyStore.PanY, y + (e.pageY - this._lastY)/currScale, NumberField); + this._lastX = e.pageX; + this._lastY = e.pageY; + + DocumentDecorations.Instance.forceUpdate() } - const { dvm } = this.props; - const doc = dvm.Doc; + } - 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() + private getLocalPoint(me:DocumentView, inputX: number, inputY: number) { + let ContainerX = inputX; + let ContainerY = inputY; + if (me.props.ContainingDocumentView != undefined) { + let pme = me.props.ContainingDocumentView!; + let {LocalX, Ss, W, Panxx, Xx, LocalY, Panyy, Yy} = this.getLocalPoint(pme, ContainerX, ContainerY); + ContainerX = LocalX; + ContainerY = LocalY; + } + + let W = me.props.Document.GetFieldValue(KeyStore.Width, NumberField, Number(0)); + let Xx = me.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0)); + let Yy = me.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0)); + let Ss = me.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)); + let Panxx = me.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); + let Panyy = me.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); + let LocalX = W / 2 - (Xx + Panxx) / Ss + (ContainerX - W / 2) / Ss; + let LocalY = -(Yy + Panyy) / Ss + ContainerY / Ss; + + return {LocalX, Ss, W, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY}; } @action - onPointerWheel = (e: React.WheelEvent): void => { + onPointerWheel = (e: React.WheelEvent): void => + { e.stopPropagation(); - let scaleAmount = 1 - (e.deltaY / 1000); - let currScale = this.props.dvm.Doc.GetFieldValue(KeyStore.Scale, NumberField, Number(1)); - this.props.dvm.Doc.SetField(KeyStore.Scale, new NumberField(currScale * scaleAmount)); + let {LocalX, Ss, W, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY} = this.getLocalPoint(this.props.ContainingDocumentView!, e.pageX, e.pageY); + + var deltaScale = (1 - (e.deltaY / 1000)) * Ss; - const panx: number = this.props.dvm.Doc.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); - const pany: number = this.props.dvm.Doc.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); - let dx = (e.pageX - window.screen.width / 2) * currScale * (scaleAmount - 1) - let dy = (e.pageY - window.screen.height / 2) * currScale * (scaleAmount - 1) + var newContainerX = LocalX * deltaScale + W/2-W/2 * deltaScale + Panxx + Xx; + var newContainerY = LocalY * deltaScale + Panyy+ Yy; - this.props.dvm.Doc.SetFieldValue(KeyStore.PanX, panx - dx, NumberField); - this.props.dvm.Doc.SetFieldValue(KeyStore.PanY, pany - dy, NumberField); + let dx = ContainerX - newContainerX; + let dy = ContainerY - newContainerY; + + this.props.Document.SetField(KeyStore.Scale, new NumberField(deltaScale)); + this.props.Document.SetFieldValue(KeyStore.PanX, Panxx+dx, NumberField); + this.props.Document.SetFieldValue(KeyStore.PanY, Panyy+dy, NumberField); DocumentDecorations.Instance.forceUpdate() } @@ -102,8 +139,8 @@ export class CollectionFreeFormView extends React.Component<IProps> { let fReader = new FileReader() let file = e.dataTransfer.items[0].getAsFile(); let that = this; - const panx: number = this.props.dvm.Doc.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); - const pany: number = this.props.dvm.Doc.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); + const panx: number = this.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); + const pany: number = this.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); let x = e.pageX - panx let y = e.pageY - pany @@ -113,10 +150,10 @@ export class CollectionFreeFormView extends React.Component<IProps> { let doc = Documents.ImageDocument(url, { x: x, y: y }) - let docs = that.props.dvm.Doc.GetFieldT(KeyStore.Data, ListField); + let docs = that.props.Document.GetFieldT(KeyStore.Data, ListField); if (!docs) { docs = new ListField<Document>(); - that.props.dvm.Doc.SetField(KeyStore.Data, docs) + that.props.Document.SetField(KeyStore.Data, docs) } docs.Data.push(doc); } @@ -129,7 +166,7 @@ export class CollectionFreeFormView extends React.Component<IProps> { @action removeDocument = (doc: Document): void => { - const value: Document[] = this.props.dvm.Doc.GetFieldValue(this.props.fieldKey, ListField, []) + const value: Document[] = this.props.Document.GetFieldValue(this.props.fieldKey, ListField, []) if (value.indexOf(doc) !== -1) { value.splice(value.indexOf(doc), 1) @@ -141,14 +178,13 @@ export class CollectionFreeFormView extends React.Component<IProps> { onDragOver = (e: React.DragEvent): void => { // console.log(e.dataTransfer) } - render() { - const { fieldKey, dvm } = this.props; + const { fieldKey, Document: Document } = this.props; - const value: Document[] = dvm.Doc.GetFieldValue(fieldKey, ListField, []); - const panx: number = dvm.Doc.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); - const pany: number = dvm.Doc.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); - const currScale: number = dvm.Doc.GetFieldValue(KeyStore.Scale, NumberField, Number(1)); + const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []); + const panx: number = Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); + const pany: number = Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); + const currScale: number = Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)); // DocumentDecorations.Instance.forceUpdate() return ( <div className="border" style={{ @@ -160,11 +196,11 @@ export class CollectionFreeFormView extends React.Component<IProps> { height: "calc(100% - 4px)", overflow: "hidden" }} onDrop={this.onDrop} onDragOver={this.onDragOver}> - <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px) scale(${currScale}, ${currScale})`, transformOrigin: `50%, 50%`}}> + <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px) scale(${currScale}, ${currScale})` , transformOrigin: `left, top`}}> <div className="node-container"> {value.map(doc => { - return (<DocumentView key={doc.Id} parent={this} dvm={new DocumentViewModel(doc)} />); + return (<DocumentView key={doc.Id} ContainingCollectionView={this} Document={doc} ContainingDocumentView={this.props.ContainingDocumentView}/>); })} </div> </div> |