feat: Makes parent configurable

CHANGELOG.md

@@ -7,13 +7,11 @@
 - Added `ellipse()` component.
 - Circle area is no longer a box.
 - Added restitution and friction.
+- Objects can switch parent by assigning the parent property or using setParent.
 - Added a fake cursor API.
+
   ```js
-  const myCursor = add([
-      fakeMouse(),
-      sprite("kat"),
-      pos(100, 100),
-  ]);
+  const myCursor = add([fakeMouse(), sprite("kat"), pos(100, 100)]);
 
   myCursor.press(); // trigger onClick events if the mouse is over
   myCursor.release();

examples/parenttest.js

@@ -0,0 +1,56 @@
+kaplay();
+
+loadBean();
+
+const centerBean = add([
+    pos(center()),
+    anchor("center"),
+    sprite("bean"),
+    area(),
+    rotate(0),
+    scale(2),
+    {
+        update() {
+            this.angle += 20 * dt();
+        },
+    },
+]);
+
+const orbitingBean = centerBean.add([
+    pos(vec2(100, 0)),
+    anchor("center"),
+    sprite("bean"),
+    area(),
+    rotate(0),
+    scale(1),
+    color(),
+    {
+        update() {
+            this.angle = -this.parent.transform.getRotation();
+            if (this.isHovering()) {
+                this.color = RED;
+            }
+            else {
+                this.color = WHITE;
+            }
+        },
+    },
+]);
+
+onMousePress(() => {
+    if (orbitingBean.parent === centerBean /* && orbitingBean.isHovering()*/) {
+        orbitingBean.setParent(getTreeRoot(), { keep: KeepFlags.All });
+    }
+});
+
+onMouseMove((pos, delta) => {
+    if (orbitingBean.parent !== centerBean) {
+        orbitingBean.pos = orbitingBean.pos.add(delta);
+    }
+});
+
+onMouseRelease(() => {
+    if (orbitingBean.parent !== centerBean) {
+        orbitingBean.setParent(centerBean, { keep: KeepFlags.All });
+    }
+});

src/components/index.ts

@@ -1,5 +1,5 @@
-export * from './draw';
-export * from './level';
-export * from './misc';
-export * from './physics';
-export * from './transform';
+export * from "./draw";
+export * from "./level";
+export * from "./misc";
+export * from "./physics";
+export * from "./transform";

src/game/make.ts

@@ -28,6 +28,18 @@ import {
     type Tag,
 } from "../types";
 import { KEventController, KEventHandler, uid } from "../utils";
+import type { Game } from "./game";
+
+export enum KeepFlags {
+    Pos = 1,
+    Angle = 2,
+    Scale = 4,
+    All = 7,
+}
+
+export type SetParentOpt = {
+    keep: KeepFlags;
+};
 
 export function make<T>(comps: CompList<T> = []): GameObj<T> {
     const compStates = new Map<string, Comp>();
@@ -39,6 +51,7 @@ export function make<T>(comps: CompList<T> = []): GameObj<T> {
     const treatTagsAsComponents = _k.globalOpt.tagsAsComponents;
     let onCurCompCleanup: Function | null = null;
     let paused = false;
+    let _parent: GameObj;
 
     // the game object without the event methods, added later
     const obj: Omit<GameObj, keyof typeof evs> = {
@@ -47,7 +60,42 @@ export function make<T>(comps: CompList<T> = []): GameObj<T> {
         hidden: false,
         transform: new Mat23(),
         children: [],
-        parent: null,
+
+        get parent() {
+            return _parent!;
+        },
+
+        set parent(p: GameObj) {
+            if (_parent === p) return;
+            const index = _parent
+                ? _parent.children.indexOf(this as GameObj)
+                : -1;
+            if (index !== -1) {
+                _parent.children.splice(index, 1);
+            }
+            _parent = p;
+            p.children.push(this as GameObj);
+        },
+
+        setParent(p: GameObj, opt: SetParentOpt) {
+            if (_parent === p) return;
+            const oldTransform = _parent.transform;
+            const newTransform = p.transform;
+            if ((opt.keep & KeepFlags.Pos) && this.pos !== undefined) {
+                oldTransform.transformPoint(this.pos, this.pos);
+                newTransform.inverse.transformPoint(this.pos, this.pos);
+            }
+            if ((opt.keep & KeepFlags.Angle) && this.angle !== undefined) {
+                this.angle += newTransform.getRotation()
+                    - oldTransform.getRotation();
+            }
+            if ((opt.keep & KeepFlags.Scale) && this.scale !== undefined) {
+                this.scale = this.scale.scale(
+                    oldTransform.getScale().invScale(newTransform.getScale()),
+                );
+            }
+            this.parent = p;
+        },
 
         set paused(p) {
             if (p === paused) return;
@@ -254,15 +302,15 @@ export function make<T>(comps: CompList<T> = []): GameObj<T> {
                             comp[k]?.();
                             onCurCompCleanup = null;
                         }
-                        : comp[<keyof typeof comp>k];
-                    gc.push(this.on(k, <any>func).cancel);
+                        : comp[<keyof typeof comp> k];
+                    gc.push(this.on(k, <any> func).cancel);
                 }
                 else {
                     if (this[k] === undefined) {
                         // assign comp fields to game obj
                         Object.defineProperty(this, k, {
-                            get: () => comp[<keyof typeof comp>k],
-                            set: (val) => comp[<keyof typeof comp>k] = val,
+                            get: () => comp[<keyof typeof comp> k],
+                            set: (val) => comp[<keyof typeof comp> k] = val,
                             configurable: true,
                             enumerable: true,
                         });
@@ -274,9 +322,9 @@ export function make<T>(comps: CompList<T> = []): GameObj<T> {
                         )?.id;
                         throw new Error(
                             `Duplicate component property: "${k}" while adding component "${comp.id}"`
-                            + (originalCompId
-                                ? ` (originally added by "${originalCompId}")`
-                                : ""),
+                                + (originalCompId
+                                    ? ` (originally added by "${originalCompId}")`
+                                    : ""),
                         );
                     }
                 }

src/index.ts

@@ -109,9 +109,11 @@ export type {
     Game,
     GameObjEventMap,
     GameObjEventNames,
+    KeepFlags,
     LevelOpt,
     SceneDef,
     SceneName,
+    SetParentOpt,
     TupleWithoutFirst,
 } from "./game";
 export type {

src/kaplay.ts

@@ -254,6 +254,7 @@ import {
     go,
     initEvents,
     initGame,
+    KeepFlags,
     layers,
     make,
     on,
@@ -1486,6 +1487,7 @@ const kaplay = <
         KEvent,
         KEventHandler,
         KEventController,
+        KeepFlags,
         cancel: () => EVENT_CANCEL_SYMBOL,
     };
 

src/math/math.ts

@@ -125,8 +125,8 @@ export class Vec2 {
         return Math.abs(this.x) > Math.abs(this.y)
             ? this.x < 0 ? Vec2.LEFT : Vec2.RIGHT
             : this.y < 0
-            ? Vec2.UP
-            : Vec2.DOWN;
+                ? Vec2.UP
+                : Vec2.DOWN;
     }
 
     /** Clone the vector */
@@ -259,6 +259,12 @@ export class Vec2 {
         return out;
     }
 
+    /** Scale by the inverse of another vector. or a single number */
+    invScale(...args: Vec2Args): Vec2 {
+        const s = vec2(...args);
+        return new Vec2(this.x / s.x, this.y / s.y);
+    }
+
     /** Get distance between another vector */
     dist(...args: Vec2Args): number {
         const p2 = vec2(...args);
@@ -1379,7 +1385,7 @@ export class Mat4 {
             const r = Math.sqrt(this.m[0] * this.m[0] + this.m[1] * this.m[1]);
             return new Vec2(
                 Math.atan(this.m[0] * this.m[4] + this.m[1] * this.m[5])
-                    / (r * r),
+                / (r * r),
                 0,
             );
         }
@@ -1388,7 +1394,7 @@ export class Mat4 {
             return new Vec2(
                 0,
                 Math.atan(this.m[0] * this.m[4] + this.m[1] * this.m[5])
-                    / (s * s),
+                / (s * s),
             );
         }
         else {
@@ -1927,7 +1933,7 @@ export function testPolygonPoint(poly: Polygon, pt: Vec2): boolean {
             ((p[i].y > pt.y) != (p[j].y > pt.y))
             && (pt.x
                 < (p[j].x - p[i].x) * (pt.y - p[i].y) / (p[j].y - p[i].y)
-                    + p[i].x)
+                + p[i].x)
         ) {
             c = !c;
         }
@@ -1945,7 +1951,7 @@ export function testEllipsePoint(ellipse: Ellipse, pt: Vec2): boolean {
     const vx = pt.x * c + pt.y * s;
     const vy = -pt.x * s + pt.y * c;
     return vx * vx / (ellipse.radiusX * ellipse.radiusX)
-            + vy * vy / (ellipse.radiusY * ellipse.radiusY) < 1;
+        + vy * vy / (ellipse.radiusY * ellipse.radiusY) < 1;
 }
 
 export function testEllipseCircle(ellipse: Ellipse, circle: Circle): boolean {
@@ -2882,7 +2888,7 @@ export class Ellipse {
         const vx = point.x * c + point.y * s;
         const vy = -point.x * s + point.y * c;
         return vx * vx / (this.radiusX * this.radiusX)
-                + vy * vy / (this.radiusY * this.radiusY) < 1;
+            + vy * vy / (this.radiusY * this.radiusY) < 1;
     }
     raycast(origin: Vec2, direction: Vec2): RaycastResult {
         return raycastEllipse(origin, direction, this);
@@ -3281,21 +3287,21 @@ export function kochanekBartels(
     const hx = h(
         pt2.x,
         0.5 * (1 - tension) * (1 + bias) * (1 + continuity) * (pt2.x - pt1.x)
-            + 0.5 * (1 - tension) * (1 - bias) * (1 - continuity)
-                * (pt3.x - pt2.x),
+        + 0.5 * (1 - tension) * (1 - bias) * (1 - continuity)
+        * (pt3.x - pt2.x),
         0.5 * (1 - tension) * (1 + bias) * (1 - continuity) * (pt3.x - pt2.x)
-            + 0.5 * (1 - tension) * (1 - bias) * (1 + continuity)
-                * (pt4.x - pt3.x),
+        + 0.5 * (1 - tension) * (1 - bias) * (1 + continuity)
+        * (pt4.x - pt3.x),
         pt3.x,
     );
     const hy = h(
         pt2.y,
         0.5 * (1 - tension) * (1 + bias) * (1 + continuity) * (pt2.y - pt1.y)
-            + 0.5 * (1 - tension) * (1 - bias) * (1 - continuity)
-                * (pt3.y - pt2.y),
+        + 0.5 * (1 - tension) * (1 - bias) * (1 - continuity)
+        * (pt3.y - pt2.y),
         0.5 * (1 - tension) * (1 + bias) * (1 - continuity) * (pt3.y - pt2.y)
-            + 0.5 * (1 - tension) * (1 - bias) * (1 + continuity)
-                * (pt4.y - pt3.y),
+        + 0.5 * (1 - tension) * (1 - bias) * (1 + continuity)
+        * (pt4.y - pt3.y),
         pt3.y,
     );
     return (t: number) => {