aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/client/util/Transform.ts8
-rw-r--r--src/client/views/DocumentDecorations.tsx2
-rw-r--r--src/client/views/Main.tsx2
-rw-r--r--src/client/views/collections/CollectionDockingView.tsx6
-rw-r--r--src/client/views/collections/CollectionFreeFormView.tsx15
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx2
-rw-r--r--src/client/views/collections/CollectionViewBase.tsx4
-rw-r--r--src/client/views/nodes/CollectionFreeFormDocumentView.tsx4
-rw-r--r--src/client/views/nodes/DocumentView.tsx7
9 files changed, 22 insertions, 28 deletions
diff --git a/src/client/util/Transform.ts b/src/client/util/Transform.ts
index 8ae3f837f..9fd4f7bef 100644
--- a/src/client/util/Transform.ts
+++ b/src/client/util/Transform.ts
@@ -38,8 +38,8 @@ export class Transform {
}
transform = (transform: Transform): Transform => {
- this._translateX += transform._translateX * this._scale;
- this._translateY += transform._translateY * this._scale;
+ this._translateX = transform._translateX + transform._scale * this._translateX;
+ this._translateY = transform._translateY + transform._scale * this._translateY;
this._scale *= transform._scale;
return this;
}
@@ -56,8 +56,8 @@ export class Transform {
}
preTransform = (transform: Transform): Transform => {
- this._translateX = transform._translateX + this._translateX * transform._scale;
- this._translateY = transform._translateY + this._translateY * transform._scale;
+ this._translateX += transform._translateX * this._scale;
+ this._translateY += transform._translateY * this._scale;
this._scale *= transform._scale;
return this;
}
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 23c952ef4..d385bcdef 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -27,7 +27,7 @@ export class DocumentDecorations extends React.Component {
!(element.props.ContainingCollectionView instanceof CollectionFreeFormView)) {
return bounds;
}
- let transform = element.props.GetTransform().inverse();
+ let transform = element.props.ScreenToLocalTransform().inverse();
var [sptX, sptY] = transform.transformPoint(0, 0);
// var [bptX, bptY] = transform.transformDirection(element.width, element.height);
let doc = element.props.Document;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 52f4962f7..1eeec7ff5 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -83,7 +83,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
ReactDOM.render((
<div style={{ position: "absolute", width: "100%", height: "100%" }}>
<DocumentView Document={mainContainer}
- AddDocument={undefined} RemoveDocument={undefined} GetTransform={() => Transform.Identity}
+ AddDocument={undefined} RemoveDocument={undefined} ScreenToLocalTransform={() => Transform.Identity}
Scaling={1}
isTopMost={true}
ContainingCollectionView={undefined} DocumentView={undefined} />
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index adfcb96ee..1c1f6f8b4 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -98,7 +98,7 @@ export class CollectionDockingView extends CollectionViewBase {
if (value[i].Id === component) {
return (<DocumentView key={value[i].Id} Document={value[i]}
AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
- GetTransform={() => Transform.Identity}
+ ScreenToLocalTransform={() => Transform.Identity}
isTopMost={true}
Scaling={1}
ContainingCollectionView={this} DocumentView={undefined} />);
@@ -309,9 +309,9 @@ export class RenderClass extends React.Component<DockingProps> {
AddDocument={this.props.CollectionDockingView.addDocument}
RemoveDocument={this.props.CollectionDockingView.removeDocument}
Scaling={this._parentScaling}
- GetTransform={() => {
+ ScreenToLocalTransform={() => {
let { scale, translateX, translateY } = Utils.GetScreenTransform(this.props.HtmlElement);
- return this.props.CollectionDockingView.props.GetTransform().scale(scale).translate(translateX, translateY)
+ return this.props.CollectionDockingView.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale)
}}
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 49864ca6c..f0cf7f0ca 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -55,9 +55,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());
+ const transform = me.getTransform();
const screenX = de.x - xOffset;
const screenY = de.y - yOffset;
const [x, y] = transform.transformPoint(screenX, screenY);
@@ -109,7 +107,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
e.stopPropagation();
let x = this.props.DocumentForCollection.GetNumber(KeyStore.PanX, 0);
let y = this.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0);
- let [dx, dy] = this.props.GetTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
+ let [dx, dy] = this.props.ScreenToLocalTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
this.SetPan(x + dx, y + dy);
}
@@ -131,7 +129,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
let [x, y] = transform.transformPoint(e.clientX, e.clientY);
let localTransform = this.getLocalTransform();
- localTransform.scaleAbout(deltaScale, x, y);
+ localTransform = localTransform.inverse().scaleAbout(deltaScale, x, y)
this.props.DocumentForCollection.SetNumber(KeyStore.Scale, localTransform.Scale);
this.SetPan(localTransform.TranslateX, localTransform.TranslateY);
@@ -213,13 +211,12 @@ export class CollectionFreeFormView extends CollectionViewBase {
}
getTransform = (): Transform => {
- const [x, y] = this.translate;
- return this.getLocalTransform().inverse().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).transform(this.props.GetTransform())
+ return this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform())
}
getLocalTransform = (): Transform => {
const [x, y] = this.translate;
- return Transform.Identity.scale(this.scale).translate(x, y);
+ return Transform.Identity.translate(-x, -y).scale(1 / this.scale);
}
render() {
@@ -249,7 +246,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
return (<CollectionFreeFormDocumentView key={doc.Id} Document={doc}
AddDocument={this.addDocument}
RemoveDocument={this.removeDocument}
- GetTransform={this.getTransform}
+ ScreenToLocalTransform={this.getTransform}
isTopMost={false}
Scaling={1}
ContainingCollectionView={this} DocumentView={this.props.ContainingDocumentView} />);
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 21780bdb3..9a0ce0782 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -123,7 +123,7 @@ export class CollectionSchemaView extends CollectionViewBase {
<div ref={measureRef}>
<DocumentView Document={children[this.selectedIndex]}
AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
- GetTransform={() => Transform.Identity}//TODO This should probably be an actual transform
+ ScreenToLocalTransform={() => Transform.Identity}//TODO This should probably be an actual transform
Scaling={this._parentScaling}
isTopMost={false}
DocumentView={undefined} ContainingCollectionView={me} />
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index aae85b3f9..a8dceff0a 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -17,7 +17,7 @@ export interface CollectionViewProps {
CollectionFieldKey: Key;
DocumentForCollection: Document;
ContainingDocumentView: Opt<DocumentView>;
- GetTransform: () => Transform;
+ ScreenToLocalTransform: () => Transform;
isSelected: () => boolean;
isTopMost: boolean;
select: (ctrlPressed: boolean) => void;
@@ -32,7 +32,7 @@ export class CollectionViewBase extends React.Component<CollectionViewProps> {
public static LayoutString(collectionType: string, fieldKey: string = "DataKey") {
return `<${collectionType} Scaling={Scaling} DocumentForCollection={Document}
- GetTransform={GetTransform} CollectionFieldKey={${fieldKey}} isSelected={isSelected} select={select}
+ ScreenToLocalTransform={ScreenToLocalTransform} CollectionFieldKey={${fieldKey}} isSelected={isSelected} select={select}
isTopMost={isTopMost}
ContainingDocumentView={DocumentView} BackgroundView={BackgroundView} />`;
}
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 31509d3ba..57527076b 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -76,7 +76,7 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
getTransform = (): Transform => {
- return this.props.GetTransform().translated(this.props.Document.GetNumber(KeyStore.X, 0), this.props.Document.GetNumber(KeyStore.Y, 0));
+ return this.props.ScreenToLocalTransform().translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0));
}
render() {
@@ -92,7 +92,7 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
backgroundColor: "transparent"
}} >
- <DocumentView {...this.props} Scaling={this.width / this.nativeWidth} GetTransform={this.getTransform} />
+ <DocumentView {...this.props} Scaling={this.width / this.nativeWidth} ScreenToLocalTransform={this.getTransform} />
</div>
);
}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 1db982f87..b25a29ad0 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -27,7 +27,7 @@ export interface DocumentViewProps {
Document: Document;
AddDocument?: (doc: Document) => void;
RemoveDocument?: (doc: Document) => boolean;
- GetTransform: () => Transform;
+ ScreenToLocalTransform: () => Transform;
isTopMost: boolean;
Scaling: number;
}
@@ -117,7 +117,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
this._contextMenuCanOpen = false;
if (this._mainCont.current != null && !this.topMost) {
this._contextMenuCanOpen = false;
- const [left, top] = this.props.GetTransform().inverse().transformPoint(0, 0);
+ const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
let dragData: { [id: string]: any } = {};
dragData["document"] = this;
dragData["xOffset"] = e.x - left;
@@ -224,9 +224,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
for (const key of this.layoutKeys) {
bindings[key.Name + "Key"] = key; // this maps string values of the form <keyname>Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data
}
- if (!bindings.GetTransform) {
- console.log("test");
- }
for (const key of this.layoutFields) {
let field = this.props.Document.Get(key);
bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field;