From c93c3e1970c6ecc91b60f1782e82b1bfdc7fef30 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Wed, 13 Feb 2019 04:50:56 -0500 Subject: A lot of stuff working, a lot of other stuff not working --- src/client/util/DragManager.ts | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/client/util/DragManager.ts') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index f4dcce7c8..93b927f8b 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -78,6 +78,8 @@ export namespace DragManager { dragElement.style.transformOrigin = "0 0"; dragElement.style.zIndex = "1000"; dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`; + 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; -- cgit v1.2.3-70-g09d2 From 7be7414daf07be174ee6febd52e6dcf9088928f4 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 13 Feb 2019 23:04:20 -0500 Subject: fixed drag feedback --- src/client/util/DragManager.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/client/util/DragManager.ts') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 93b927f8b..f1b0445ca 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -78,8 +78,8 @@ export namespace DragManager { dragElement.style.transformOrigin = "0 0"; dragElement.style.zIndex = "1000"; dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`; - dragElement.style.width = `${rect.width}px`; - dragElement.style.height = `${rect.height}px`; + dragElement.style.width = `${rect.width / scaleX}px`; + dragElement.style.height = `${rect.height / scaleY}px`; dragDiv.appendChild(dragElement); _lastPointerX = dragData["xOffset"] + rect.left; _lastPointerY = dragData["yOffset"] + rect.top; -- cgit v1.2.3-70-g09d2 From bc7a13cb54d3f60b4e9ad301d17db2941eb84912 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sun, 17 Feb 2019 07:50:37 -0500 Subject: Trying to fix drop with transforms --- src/client/util/DragManager.ts | 10 ++++++---- src/client/views/collections/CollectionDockingView.tsx | 12 ++++++++---- src/client/views/collections/CollectionFreeFormView.tsx | 1 + 3 files changed, 15 insertions(+), 8 deletions(-) (limited to 'src/client/util/DragManager.ts') 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("
"); 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((), 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 { @@ -307,8 +308,11 @@ export class RenderClass extends React.Component { 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()); -- cgit v1.2.3-70-g09d2