fix(2d): respect offset in absolute positions (#987)

motion-canvas · Mar 11, 2024 · 491080d · 491080d
1 parent 11ef7ea
commit 491080d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/packages/2d/src/lib/components/Node.ts b/packages/2d/src/lib/components/Node.ts
@@ -191,8 +191,7 @@ export class Node implements Promisable<Node> {
   public declare readonly absolutePosition: SimpleVector2Signal<this>;
 
   protected getAbsolutePosition(): Vector2 {
-    const matrix = this.localToWorld();
-    return new Vector2(matrix.m41, matrix.m42);
+    return new Vector2(this.parentToWorld().transformPoint(this.position()));
   }
 
   protected setAbsolutePosition(value: SignalValue<PossibleVector2>) {
@@ -600,6 +599,18 @@ export class Node implements Promisable<Node> {
     return this.parent()?.worldToLocal() ?? new DOMMatrix();
   }
 
+  /**
+   * Get the parent-to-world matrix for this node.
+   *
+   * @remarks
+   * This matrix transforms vectors from local space of this node's parent to
+   * world space.
+   */
+  @computed()
+  public parentToWorld(): DOMMatrix {
+    return this.parent()?.localToWorld() ?? new DOMMatrix();
+  }
+
   /**
    * Get the local-to-parent matrix for this node.
    *

diff --git a/packages/docs/docs/getting-started/positioning.mdx b/packages/docs/docs/getting-started/positioning.mdx
@@ -130,6 +130,11 @@ The available matrices include:
 <ApiSnippet url={'/api/2d/components/Node#localToParent'} />
 <hr />
 
+### `Node.parentToWorld`
+
+<ApiSnippet url={'/api/2d/components/Node#parentToWorld'} />
+<hr />
+
 ### `Node.worldToParent`
 
 <ApiSnippet url={'/api/2d/components/Node#worldToParent'} />