aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/util/Transform.ts19
-rw-r--r--src/client/views/DocumentDecorations.tsx9
-rw-r--r--src/client/views/Main.tsx6
-rw-r--r--src/client/views/collections/CollectionFreeFormView.tsx16
-rw-r--r--src/client/views/collections/CollectionViewBase.tsx4
-rw-r--r--src/client/views/nodes/DocumentView.tsx71
6 files changed, 43 insertions, 82 deletions
diff --git a/src/client/util/Transform.ts b/src/client/util/Transform.ts
index 7861ed308..3edc8d569 100644
--- a/src/client/util/Transform.ts
+++ b/src/client/util/Transform.ts
@@ -7,6 +7,10 @@ export class Transform {
return new Transform(0, 0, 1);
}
+ get TranslateX(): number { return this._translateX; }
+ get TranslateY(): number { return this._translateY; }
+ get Scale(): number { return this._scale; }
+
constructor(x: number, y: number, scale: number) {
this._translateX = x;
this._translateY = y;
@@ -42,6 +46,17 @@ export class Transform {
return this.copy().scale(scale);
}
+ scaleAbout = (scale: number, x: number, y: number): Transform => {
+ this._translateX += x * this._scale - x * this._scale * scale;
+ this._translateY += y * this._scale - y * this._scale * scale;
+ this._scale *= scale;
+ return this;
+ }
+
+ scaledAbout = (scale: number, x: number, y: number): Transform => {
+ return this.copy().scaleAbout(scale, x, y);
+ }
+
preScale = (scale: number): Transform => {
this._scale *= scale;
this._translateX *= scale;
@@ -83,6 +98,10 @@ export class Transform {
return [x, y];
}
+ transformDirection = (x: number, y: number): [number, number] => {
+ return [x * this._scale, y * this._scale];
+ }
+
inverse = () => {
return new Transform(-this._translateX / this._scale, -this._translateY / this._scale, 1 / this._scale)
}
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 7efaa5533..85b44307f 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -25,11 +25,12 @@ export class DocumentDecorations extends React.Component {
!(element.props.ContainingCollectionView instanceof CollectionFreeFormView)) {
return bounds;
}
- var spt = element.TransformToScreenPoint(0, 0);
- var bpt = element.TransformToScreenPoint(element.width, element.height);
+ let transform = element.getTransform().inverse();
+ var [sptX, sptY] = transform.transformPoint(0, 0);
+ var [bptX, bptY] = transform.transformDirection(element.width, element.height);
return {
- x: Math.min(spt.ScreenX, bounds.x), y: Math.min(spt.ScreenY, bounds.y),
- r: Math.max(bpt.ScreenX, bounds.r), b: Math.max(bpt.ScreenY, bounds.b)
+ x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y),
+ r: Math.max(bptX, bounds.r), b: Math.max(bptY, bounds.b)
}
}, { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE });
}
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index ba92cc17e..6ca0000b8 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -66,10 +66,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
let doc6 = Documents.CollectionDocument(docset2, {
x: 350, y: 100, width: 600, height: 600, title: "docking collection"
});
- let mainNodes = null;// mainContainer.GetFieldT(KeyStore.Data, ListField);
- if (!mainNodes) {
- mainNodes = new ListField<Document>();
- }
+ let mainNodes = mainContainer.GetOrCreate<ListField<Document>>(KeyStore.Data, ListField);
// mainNodes.Data.push(doc6);
// mainNodes.Data.push(doc2);
mainNodes.Data.push(doc4);
@@ -78,7 +75,6 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
// mainNodes.Data.push(doc1);
// mainNodes.Data.push(doc2);
mainNodes.Data.push(doc6);
- mainContainer.Set(KeyStore.Data, mainNodes);
}
//}
//);
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 15450d737..975eaaae8 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -123,14 +123,17 @@ export class CollectionFreeFormView extends CollectionViewBase {
let coefficient = 1000;
// if (modes[e.deltaMode] == 'pixels') coefficient = 50;
// else if (modes[e.deltaMode] == 'lines') coefficient = 1000; // This should correspond to line-height??
+ let transform = this.getTransform();
+ let localTransform = this.getLocalTransform();
- let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY);
+ let deltaScale = (1 - (e.deltaY / coefficient)) * transform.Scale;
+ let newDeltaScale = this.isAnnotationOverlay ? Math.max(1, deltaScale) : deltaScale;
+ let [x, y] = transform.transformPoint(e.clientX, e.clientY);
- var deltaScale = (1 - (e.deltaY / coefficient)) * Ss;
- var newDeltaScale = this.isAnnotationOverlay ? Math.max(1, deltaScale) : deltaScale;
+ localTransform.scaleAbout(newDeltaScale, x, y);
this.props.DocumentForCollection.SetNumber(KeyStore.Scale, newDeltaScale);
- this.SetPan(ContainerX - (LocalX * newDeltaScale + Xx), ContainerY - (LocalY * newDeltaScale + Yy));
+ this.SetPan(localTransform.TranslateX, localTransform.TranslateY);
}
@action
@@ -213,6 +216,11 @@ export class CollectionFreeFormView extends CollectionViewBase {
return this.props.GetTransform().scaled(this.scale).translate(x, y);
}
+ getLocalTransform = (): Transform => {
+ const [x, y] = this.translate;
+ return new Transform(x, y, this.scale);
+ }
+
render() {
const Document: Document = this.props.DocumentForCollection;
const value: Document[] = Document.GetList<Document>(this.props.CollectionFieldKey, []);
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index 7e2fcb39d..cf5bc70c4 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -28,7 +28,9 @@ export const COLLECTION_BORDER_WIDTH = 2;
export class CollectionViewBase extends React.Component<CollectionViewProps> {
public static LayoutString(collectionType: string, fieldKey: string = "DataKey") {
- return `<${collectionType} Scaling={Scaling} DocumentForCollection={Document} CollectionFieldKey={${fieldKey}} ContainingDocumentView={DocumentView} BackgroundView={BackgroundView} />`;
+ return `<${collectionType} Scaling={Scaling} DocumentForCollection={Document}
+ GetTransform={GetTransform} CollectionFieldKey={${fieldKey}}
+ ContainingDocumentView={DocumentView} BackgroundView={BackgroundView} />`;
}
@computed
public get active(): boolean {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 3a73f2fde..d7ecc6d9d 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -69,80 +69,15 @@ export class DocumentView extends React.Component<DocumentViewProps> {
return 1;
}
- //
- // Converts a coordinate in the screen space of the app into a local document coordinate.
- //
- public TransformToLocalPoint(screenX: number, screenY: number) {
- // if this collection view is nested within another collection view, then
- // first transform the screen point into the parent collection's coordinate space.
- let { LocalX: parentX, LocalY: parentY } = this.props.ContainingCollectionView != undefined &&
- this.props.ContainingCollectionView.props.ContainingDocumentView != undefined ?
- this.props.ContainingCollectionView.props.ContainingDocumentView.TransformToLocalPoint(screenX, screenY) :
- { LocalX: screenX, LocalY: screenY };
- let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH;
- let ContainerY: number = parentY - COLLECTION_BORDER_WIDTH;
-
- var Xx = this.props.Document.GetData(KeyStore.X, NumberField, Number(0));
- var Yy = this.props.Document.GetData(KeyStore.Y, NumberField, Number(0));
- // CollectionDockingViews change the location of their children frames without using a Dash transformation.
- // They also ignore any transformation that may have been applied to their content document.
- // NOTE: this currently assumes CollectionDockingViews aren't nested.
- if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
- var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
- Xx = rx - COLLECTION_BORDER_WIDTH;
- Yy = ry - COLLECTION_BORDER_WIDTH;
- }
-
- let Ss = this.props.Document.GetNumber(KeyStore.Scale, 1);
- let Panxx = this.props.Document.GetData(KeyStore.PanX, NumberField, Number(0));
- let Panyy = this.props.Document.GetData(KeyStore.PanY, NumberField, Number(0));
- let LocalX = (ContainerX - (Xx + Panxx)) / Ss;
- let LocalY = (ContainerY - (Yy + Panyy)) / Ss;
-
- return { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY };
- }
-
- //
- // Converts a point in 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 } {
-
- var Xx = this.props.Document.GetData(KeyStore.X, NumberField, Number(0));
- var Yy = this.props.Document.GetData(KeyStore.Y, NumberField, Number(0));
- // CollectionDockingViews change the location of their children frames without using a Dash transformation.
- // They also ignore any transformation that may have been applied to their content document.
- // NOTE: this currently assumes CollectionDockingViews aren't nested.
- if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
- var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
- Xx = rx - COLLECTION_BORDER_WIDTH;
- Yy = ry - COLLECTION_BORDER_WIDTH + 18 * Ss;
- }
-
- let W = COLLECTION_BORDER_WIDTH;
- let H = COLLECTION_BORDER_WIDTH;
- let parentX = (localX - W) * Ss + (Xx + Panxx) + W;
- let parentY = (localY - H) * Ss + (Yy + Panyy) + H;
-
- // if this collection view is nested within another collection view, then
- // first transform the local point into the parent collection's coordinate space.
- let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined;
- if (containingDocView != undefined) {
- let ss = containingDocView.props.Document.GetNumber(KeyStore.Scale, 1) * this.props.Scaling;
- let panxx = containingDocView.props.Document.GetData(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
- let panyy = containingDocView.props.Document.GetData(KeyStore.PanY, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
- let { ScreenX, ScreenY } = containingDocView.TransformToScreenPoint(parentX, parentY, ss, panxx, panyy);
- parentX = ScreenX;
- parentY = ScreenY;
- }
- return { ScreenX: parentX, ScreenY: parentY };
- }
-
render() {
let bindings = { ...this.props } as any;
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;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 03:28:14 +0000