diff options
| -rw-r--r-- | src/client/util/DragManager.ts | 10 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionDockingView.tsx | 12 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionFreeFormView.tsx | 1 |
3 files changed, 15 insertions, 8 deletions
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index f1b0445ca..337ec855a 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -80,9 +80,11 @@ export namespace DragManager { dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`; dragElement.style.width = `${rect.width / scaleX}px`; dragElement.style.height = `${rect.height / scaleY}px`; + // It seems like the above code should be able to just be this: + // dragElement.style.transform = `translate(${x}px, ${y}px)`; + // dragElement.style.width = `${rect.width}px`; + // dragElement.style.height = `${rect.height}px`; dragDiv.appendChild(dragElement); - _lastPointerX = dragData["xOffset"] + rect.left; - _lastPointerY = dragData["yOffset"] + rect.top; let hideSource = false; if (typeof options.hideSource === "boolean") { @@ -98,8 +100,8 @@ export namespace DragManager { const moveHandler = (e: PointerEvent) => { e.stopPropagation(); e.preventDefault(); - x += e.clientX - _lastPointerX; _lastPointerX = e.clientX; - y += e.clientY - _lastPointerY; _lastPointerY = e.clientY; + x += e.movementX; + y += e.movementY; dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`; }; const upHandler = (e: PointerEvent) => { diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 39716170b..adfcb96ee 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -15,6 +15,7 @@ import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from import React = require("react"); import * as ReactDOM from 'react-dom'; import Measure from "react-measure"; +import { Utils } from "../../../Utils"; @observer export class CollectionDockingView extends CollectionViewBase { @@ -239,14 +240,14 @@ export class CollectionDockingView extends CollectionViewBase { var containingDiv = "component_" + me.nextId(); container.getElement().html("<div id='" + containingDiv + "'></div>"); setTimeout(function () { - let divContainer = document.getElementById(containingDiv); + let divContainer = document.getElementById(containingDiv) as HTMLDivElement; if (divContainer) { let props: DockingProps = { ContainingDiv: containingDiv, Document: state.doc, Container: container, CollectionDockingView: me, - HtmlElement: divContainer + HtmlElement: divContainer, } ReactDOM.render((<RenderClass {...props} />), divContainer); if (CollectionDockingView.myLayout._maxstack) { @@ -293,7 +294,7 @@ interface DockingProps { Document: Document, Container: any, HtmlElement: HTMLElement, - CollectionDockingView: CollectionDockingView + CollectionDockingView: CollectionDockingView, } @observer export class RenderClass extends React.Component<DockingProps> { @@ -307,8 +308,11 @@ export class RenderClass extends React.Component<DockingProps> { <DocumentView key={this.props.Document.Id} Document={this.props.Document} AddDocument={this.props.CollectionDockingView.addDocument} RemoveDocument={this.props.CollectionDockingView.removeDocument} - GetTransform={() => Transform.Identity} Scaling={this._parentScaling} + GetTransform={() => { + let { scale, translateX, translateY } = Utils.GetScreenTransform(this.props.HtmlElement); + return this.props.CollectionDockingView.props.GetTransform().scale(scale).translate(translateX, translateY) + }} isTopMost={true} ContainingCollectionView={this.props.CollectionDockingView} DocumentView={undefined} /> diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index b5e954e83..49864ca6c 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -54,6 +54,7 @@ export class CollectionFreeFormView extends CollectionViewBase { } const xOffset = de.data["xOffset"] as number || 0; const yOffset = de.data["yOffset"] as number || 0; + //this should be able to use translate and scale methods on an Identity transform, no? const transform = new Transform(0, 0, 1 / me.props.DocumentForCollection.GetNumber(KeyStore.Scale, 1)).transform( new Transform(-me.props.DocumentForCollection.GetNumber(KeyStore.PanX, 0), -me.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0), 1) ).transform(me.props.GetTransform()); |