diff options
| -rw-r--r-- | src/DocumentDecorations.tsx | 22 | ||||
| -rw-r--r-- | src/views/freeformcanvas/CollectionFreeFormView.tsx | 8 | ||||
| -rw-r--r-- | src/views/nodes/DocumentView.tsx | 29 |
3 files changed, 40 insertions, 19 deletions
diff --git a/src/DocumentDecorations.tsx b/src/DocumentDecorations.tsx index cf7c6d8b5..28d6dc377 100644 --- a/src/DocumentDecorations.tsx +++ b/src/DocumentDecorations.tsx @@ -1,8 +1,8 @@ -import { observable, computed } from "mobx"; +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 {DocumentView} from "./views/nodes/DocumentView"; +import {SelectionManager} from "./util/SelectionManager"; +import {observer} from "mobx-react"; import './DocumentDecorations.scss' @observer @@ -14,21 +14,25 @@ export class DocumentDecorations extends React.Component { DocumentDecorations.Instance = this } + @computed get x(): number { - return SelectionManager.SelectedDocuments().reduce((left, element) => Math.min(element.screenRect.left, left), Number.MAX_VALUE); + return SelectionManager.SelectedDocuments().reduce((left, element) => Math.min(element.TransformToScreenPoint(0, 0).ScreenX, left), Number.MAX_VALUE); } + @computed get y(): number { - return SelectionManager.SelectedDocuments().reduce((top, element) => Math.min(element.screenRect.top, top), Number.MAX_VALUE); + return SelectionManager.SelectedDocuments().reduce((top, element) => Math.min(element.TransformToScreenPoint(0, 0).ScreenY, top), Number.MAX_VALUE); } + @computed get height(): number { - return (SelectionManager.SelectedDocuments().reduce((bottom, element) => Math.max(element.screenRect.bottom, bottom), + return (SelectionManager.SelectedDocuments().reduce((bottom, element) => Math.max(element.TransformToScreenPoint(0, element.height).ScreenY, bottom), Number.MIN_VALUE)) - this.y; } + @computed get width(): number { - return SelectionManager.SelectedDocuments().reduce((right, element) => Math.max(element.screenRect.right, right), + return SelectionManager.SelectedDocuments().reduce((right, element) => Math.max(element.TransformToScreenPoint(element.width, 0).ScreenX, right), Number.MIN_VALUE) - this.x; } @@ -117,8 +121,6 @@ export class DocumentDecorations extends React.Component { element.height = actualdH; } }) - - this.forceUpdate() } onPointerUp = (e: PointerEvent): void => { diff --git a/src/views/freeformcanvas/CollectionFreeFormView.tsx b/src/views/freeformcanvas/CollectionFreeFormView.tsx index 437db7493..2233ffcaf 100644 --- a/src/views/freeformcanvas/CollectionFreeFormView.tsx +++ b/src/views/freeformcanvas/CollectionFreeFormView.tsx @@ -61,7 +61,6 @@ export class CollectionFreeFormView extends React.Component<IProps> { doc.y = docY; } e.stopPropagation(); - DocumentDecorations.Instance.forceUpdate(); } componentDidMount() { @@ -115,8 +114,6 @@ export class CollectionFreeFormView extends React.Component<IProps> { doc.SetFieldValue(KeyStore.PanY, y + (e.pageY - this._lastY) / currScale, NumberField); this._lastX = e.pageX; this._lastY = e.pageY; - - DocumentDecorations.Instance.forceUpdate() } } @@ -137,8 +134,6 @@ export class CollectionFreeFormView extends React.Component<IProps> { 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() } onDrop = (e: React.DragEvent): void => { @@ -200,11 +195,10 @@ export class CollectionFreeFormView extends React.Component<IProps> { 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={{ borderStyle: "solid", - borderWidth: "2px" + borderWidth: "2px", }}> <div className="collectionfreeformview-container" onPointerDown={this.onPointerDown} onWheel={this.onPointerWheel} onContextMenu={(e) => e.preventDefault()} style={{ width: "100%", diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index 8250d5405..1387f44b1 100644 --- a/src/views/nodes/DocumentView.tsx +++ b/src/views/nodes/DocumentView.tsx @@ -129,14 +129,15 @@ export class DocumentView extends React.Component<IProps> { return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined || this.props.ContainingCollectionView!.active; } + hackToAccountForCollectionFreeFormBorderWidth: number = 2; // this is the border width of the collection // // Converts an input coordinate in application's screen space // into a coordinate in the space of this document. // NOTE: this is intended for use on DocumentViews that are CollectionFreeFormViews // public TransformToLocalPoint(screenX: number, screenY: number) { - let ContainerX = screenX; - let ContainerY = screenY; + let ContainerX = screenX - this.hackToAccountForCollectionFreeFormBorderWidth; + let ContainerY = screenY - this.hackToAccountForCollectionFreeFormBorderWidth; // if this collection view is nested within another collection view, then // first transform the screen point into the parent collection's coordinate space. if (this.props.ContainingDocumentView != undefined) { @@ -156,6 +157,30 @@ export class DocumentView extends React.Component<IProps> { return {LocalX, Ss, W, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY}; } + // + // Converts the coordinate space of a document to a screen space coordinate. + // + public TransformToScreenPoint(localX: number, localY: number, Ss: number = 1, Panxx: number = 0, Panyy: number = 0): {ScreenX: number, ScreenY: number} { + + let W = this.props.Document.GetFieldValue(KeyStore.Width, NumberField, Number(0)); + let Xx = this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0)); + let Yy = this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0)); + + let parentX = (localX + (Xx + Panxx) / Ss - W / 2) * Ss + W / 2; + let parentY = (localY + (Yy + Panyy) / Ss) * Ss; + + // if this collection view is nested within another collection view, then + // first transform the screen point into the parent collection's coordinate space. + if (this.props.ContainingDocumentView != undefined) { + let ss = this.props.ContainingDocumentView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)); + let panxx = this.props.ContainingDocumentView.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); + let panyy = this.props.ContainingDocumentView.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); + let {ScreenX, ScreenY} = this.props.ContainingDocumentView.TransformToScreenPoint(parentX, parentY, ss, panxx, panyy); + return {ScreenX: ScreenX + this.hackToAccountForCollectionFreeFormBorderWidth, ScreenY: ScreenY + this.hackToAccountForCollectionFreeFormBorderWidth}; + } else { + return {ScreenX: parentX, ScreenY: parentY}; + } + } onPointerDown = (e: React.PointerEvent): void => { let me = this; |