@waica/engine 0.25.0 → 0.27.0

package/dist/components/hitbox.js

@@ -8,6 +8,7 @@ import { resolveCollisionPoints, } from '../collision-shape.js';
  */
 export class Hitbox extends Component {
     static componentName = 'Hitbox';
+    static space = '2d';
     static params = {
         layer: { label: 'Collision Layer' },
         collidesWith: { label: 'Collision Mask', kind: 'string-list' },

package/dist/components/light.d.ts

@@ -1,4 +1,4 @@
-import { Component } from '../component.js';
+import { Component, type ComponentSpace } from '../component.js';
 import type { LightField } from '../light-field.js';
 /**
  * A source of 2D light owned by its entity (issue #78, `CONTEXT.md` Light):
@@ -10,6 +10,7 @@ import type { LightField } from '../light-field.js';
  */
 export declare class Light extends Component {
     static componentName: string;
+    static space: ComponentSpace;
     static params: {
         radius: {
             label: string;

package/dist/components/light.js

@@ -12,6 +12,7 @@ const finiteOr = (value, fallback) => (Number.isFinite(value) ? value : fallback
  */
 export class Light extends Component {
     static componentName = 'Light';
+    static space = '2d';
     static params = {
         radius: { label: 'Radius', min: 0, step: 0.25 },
         color: { label: 'Color', kind: 'color' },

package/dist/components/model.d.ts

@@ -0,0 +1,71 @@
+import * as THREE from 'three/webgpu';
+import type { ModelHandle } from '../assets/model-cache.js';
+import { Component, type ComponentSpace } from '../component.js';
+export type ModelShape = 'box' | 'sphere' | 'plane';
+/**
+ * A 3D thing an entity draws (3D scenes, ADR 0027): a glTF/glb from `src`
+ * (a `waica:` uri or a project path, loaded once through `game.assets`) or a
+ * primitive `shape` of a `color` and a uniform `size`. With both, `src` wins.
+ * Its root hangs under the entity's node, so the entity's position, rotation
+ * and scale place it; the glTF keeps the materials it ships with, a
+ * primitive has a standard (lit) node material. `color` and `size` follow the
+ * inspector live; a new `src` or `shape` rebuilds the content. Destroying it
+ * removes the root and disposes only what it created — never the cached glTF.
+ * In a 2D scene it creates nothing (`validate_project` reports it).
+ */
+export declare class Model extends Component {
+    static componentName: string;
+    static space: ComponentSpace;
+    static params: {
+        src: {
+            label: string;
+            kind: "model";
+        };
+        shape: {
+            label: string;
+            options: ModelShape[];
+        };
+        color: {
+            label: string;
+            kind: "color";
+        };
+        size: {
+            label: string;
+            min: number;
+            step: number;
+        };
+    };
+    static transient: string[];
+    /** What this Model draws, under the entity's node; null until it is ready. The Pointer ray-casts against it. */
+    root: THREE.Group | null;
+    /**
+     * The handle of the glTF it draws (issue #166 CA-6): `handle.root` is the
+     * child of `root`, `handle.animations` its clips once settled — what an
+     * Animator beside it plays. Null for a primitive, in a 2D scene and before
+     * the component is ready; replaced on every rebuild.
+     */
+    handle: ModelHandle | null;
+    private _src;
+    private _shape;
+    private _color;
+    private _size;
+    private _primitive;
+    /** A `waica:` uri or project path to a `.glb` / `.gltf`; empty draws the primitive `shape`. */
+    get src(): string;
+    set src(value: string);
+    get shape(): ModelShape;
+    set shape(value: ModelShape);
+    /** `0xrrggbb` of a primitive. */
+    get color(): number;
+    set color(value: number);
+    /** Uniform scale of a primitive: the box side, sphere diameter or plane side in world units. */
+    get size(): number;
+    set size(value: number);
+    onReady(): void;
+    onDestroy(): void;
+    private build;
+    private buildPrimitive;
+    private rebuild;
+    /** Empties the root and disposes the primitive this Model created; a glTF's clone only leaves the graph. */
+    private clear;
+}

package/dist/components/model.js

@@ -0,0 +1,128 @@
+import * as THREE from 'three/webgpu';
+import { Component } from '../component.js';
+const SHAPES = ['box', 'sphere', 'plane'];
+/** One unit of the shape: a box of side 1, a sphere of diameter 1, a plane of side 1 lying flat on the ground (normal up). */
+function primitiveGeometry(shape) {
+    switch (shape) {
+        case 'sphere':
+            return new THREE.SphereGeometry(0.5, 32, 16);
+        case 'plane':
+            return new THREE.PlaneGeometry(1, 1).rotateX(-Math.PI / 2);
+        case 'box':
+            return new THREE.BoxGeometry(1, 1, 1);
+    }
+}
+/**
+ * A 3D thing an entity draws (3D scenes, ADR 0027): a glTF/glb from `src`
+ * (a `waica:` uri or a project path, loaded once through `game.assets`) or a
+ * primitive `shape` of a `color` and a uniform `size`. With both, `src` wins.
+ * Its root hangs under the entity's node, so the entity's position, rotation
+ * and scale place it; the glTF keeps the materials it ships with, a
+ * primitive has a standard (lit) node material. `color` and `size` follow the
+ * inspector live; a new `src` or `shape` rebuilds the content. Destroying it
+ * removes the root and disposes only what it created — never the cached glTF.
+ * In a 2D scene it creates nothing (`validate_project` reports it).
+ */
+export class Model extends Component {
+    static componentName = 'Model';
+    static space = '3d';
+    static params = {
+        src: { label: 'Model file', kind: 'model' },
+        shape: { label: 'Shape', options: [...SHAPES] },
+        color: { label: 'Color', kind: 'color' },
+        size: { label: 'Size', min: 0.01, step: 0.1 },
+    };
+    static transient = ['root', 'handle'];
+    /** What this Model draws, under the entity's node; null until it is ready. The Pointer ray-casts against it. */
+    root = null;
+    /**
+     * The handle of the glTF it draws (issue #166 CA-6): `handle.root` is the
+     * child of `root`, `handle.animations` its clips once settled — what an
+     * Animator beside it plays. Null for a primitive, in a 2D scene and before
+     * the component is ready; replaced on every rebuild.
+     */
+    handle = null;
+    _src = '';
+    _shape = 'box';
+    _color = 0xffffff;
+    _size = 1;
+    _primitive = null;
+    /** A `waica:` uri or project path to a `.glb` / `.gltf`; empty draws the primitive `shape`. */
+    get src() {
+        return this._src;
+    }
+    set src(value) {
+        this._src = value;
+        this.rebuild();
+    }
+    get shape() {
+        return this._shape;
+    }
+    set shape(value) {
+        this._shape = SHAPES.includes(value) ? value : 'box';
+        this.rebuild();
+    }
+    /** `0xrrggbb` of a primitive. */
+    get color() {
+        return this._color;
+    }
+    set color(value) {
+        this._color = value;
+        this._primitive?.mesh.material.color.setHex(value);
+    }
+    /** Uniform scale of a primitive: the box side, sphere diameter or plane side in world units. */
+    get size() {
+        return this._size;
+    }
+    set size(value) {
+        this._size = value;
+        this._primitive?.mesh.scale.setScalar(value);
+    }
+    onReady() {
+        // Draws only in a 3D scene, like Sun and PointLight: 2.5D is a later block, and a lit-less mesh would come out black.
+        if (this.game.space !== '3d')
+            return;
+        this.root = new THREE.Group();
+        this.root.name = 'waica:model';
+        this.entity.node.add(this.root);
+        this.build();
+    }
+    onDestroy() {
+        this.clear();
+        this.root?.removeFromParent();
+    }
+    build() {
+        if (!this.root)
+            return;
+        if (this._src) {
+            this.handle = this.game.assets.model(this._src);
+            this.root.add(this.handle.root);
+        }
+        else {
+            this.buildPrimitive(this.root);
+        }
+    }
+    buildPrimitive(root) {
+        const material = new THREE.MeshStandardNodeMaterial({ color: this._color });
+        const mesh = new THREE.Mesh(primitiveGeometry(this._shape), material);
+        mesh.scale.setScalar(this._size);
+        root.add(mesh);
+        this._primitive = { mesh };
+    }
+    rebuild() {
+        if (!this.root)
+            return;
+        this.clear();
+        this.build();
+    }
+    /** Empties the root and disposes the primitive this Model created; a glTF's clone only leaves the graph. */
+    clear() {
+        this.root?.clear();
+        this.handle = null;
+        if (!this._primitive)
+            return;
+        this._primitive.mesh.geometry.dispose();
+        this._primitive.mesh.material.dispose();
+        this._primitive = null;
+    }
+}

package/dist/components/particle-emitter.d.ts

@@ -1,4 +1,4 @@
-import { Component } from '../component.js';
+import { Component, type ComponentSpace } from '../component.js';
 import type { YSortBatchParticipant, YSortEntry } from '../render-sort.js';
 export type ParticleVector = [number, number];
 export type ParticleSpace = 'world' | 'local';
@@ -8,6 +8,7 @@ export type ParticleBlend = 'normal' | 'additive';
 /** A fixed-capacity source of short-lived, batched 2D particles. */
 export declare class ParticleEmitter extends Component implements YSortBatchParticipant {
     static componentName: string;
+    static space: ComponentSpace;
     static displayName: string;
     static params: {
         rate: {

package/dist/components/particle-emitter.js

@@ -5,6 +5,7 @@ import { setEmissive } from '../render-layers.js';
 /** A fixed-capacity source of short-lived, batched 2D particles. */
 export class ParticleEmitter extends Component {
     static componentName = 'ParticleEmitter';
+    static space = '2d';
     static displayName = 'Particle Emitter';
     static params = {
         rate: { label: 'Rate', min: 0 },

package/dist/components/point-light.d.ts

@@ -0,0 +1,75 @@
+import * as THREE from 'three/webgpu';
+import { Component, type ComponentSpace } from '../component.js';
+/**
+ * A point light in a 3D scene (ADR 0027, `CONTEXT.md` Point Light): it shines
+ * in every direction from the entity's position plus an offset (in the
+ * entity's local frame: it turns and scales with the entity, so a lantern's
+ * offset follows the object it hangs on), reaching
+ * `distance` world units (0 = without limit) and fading with `decay` (2 is
+ * physical). Not the 2D `Light`, which paints a light-map. No shadows. In a
+ * 2D scene it creates nothing; the three light lives under the entity's node
+ * and leaves with it.
+ */
+export declare class PointLight extends Component {
+    static componentName: string;
+    static space: ComponentSpace;
+    static displayName: string;
+    static params: {
+        color: {
+            label: string;
+            kind: "color";
+        };
+        intensity: {
+            label: string;
+            min: number;
+            step: number;
+        };
+        distance: {
+            label: string;
+            min: number;
+            step: number;
+        };
+        decay: {
+            label: string;
+            min: number;
+            step: number;
+        };
+        offsetX: {
+            label: string;
+        };
+        offsetY: {
+            label: string;
+        };
+        offsetZ: {
+            label: string;
+        };
+    };
+    static transient: string[];
+    /** The three light, null in a 2D scene or before the component is ready. */
+    light: THREE.PointLight | null;
+    private _color;
+    private _intensity;
+    private _distance;
+    private _decay;
+    private _offsetX;
+    private _offsetY;
+    private _offsetZ;
+    get color(): number;
+    set color(value: number);
+    get intensity(): number;
+    set intensity(value: number);
+    /** World units the light reaches; 0 reaches without limit. */
+    get distance(): number;
+    set distance(value: number);
+    get decay(): number;
+    set decay(value: number);
+    get offsetX(): number;
+    set offsetX(value: number);
+    get offsetY(): number;
+    set offsetY(value: number);
+    get offsetZ(): number;
+    set offsetZ(value: number);
+    onReady(): void;
+    onDestroy(): void;
+    private place;
+}

package/dist/components/point-light.js

@@ -0,0 +1,102 @@
+import * as THREE from 'three/webgpu';
+import { Component } from '../component.js';
+/**
+ * A point light in a 3D scene (ADR 0027, `CONTEXT.md` Point Light): it shines
+ * in every direction from the entity's position plus an offset (in the
+ * entity's local frame: it turns and scales with the entity, so a lantern's
+ * offset follows the object it hangs on), reaching
+ * `distance` world units (0 = without limit) and fading with `decay` (2 is
+ * physical). Not the 2D `Light`, which paints a light-map. No shadows. In a
+ * 2D scene it creates nothing; the three light lives under the entity's node
+ * and leaves with it.
+ */
+export class PointLight extends Component {
+    static componentName = 'PointLight';
+    static space = '3d';
+    static displayName = 'Point light (3D)';
+    static params = {
+        color: { label: 'Color', kind: 'color' },
+        intensity: { label: 'Intensity', min: 0, step: 0.5 },
+        distance: { label: 'Distance (0 = unlimited)', min: 0, step: 0.5 },
+        decay: { label: 'Decay', min: 0, step: 0.1 },
+        offsetX: { label: 'x offset' },
+        offsetY: { label: 'y offset' },
+        offsetZ: { label: 'z offset' },
+    };
+    static transient = ['light'];
+    /** The three light, null in a 2D scene or before the component is ready. */
+    light = null;
+    _color = 0xffffff;
+    _intensity = 1;
+    _distance = 0;
+    _decay = 2;
+    _offsetX = 0;
+    _offsetY = 0;
+    _offsetZ = 0;
+    get color() {
+        return this._color;
+    }
+    set color(value) {
+        this._color = value;
+        this.light?.color.setHex(value);
+    }
+    get intensity() {
+        return this._intensity;
+    }
+    set intensity(value) {
+        this._intensity = value;
+        if (this.light)
+            this.light.intensity = value;
+    }
+    /** World units the light reaches; 0 reaches without limit. */
+    get distance() {
+        return this._distance;
+    }
+    set distance(value) {
+        this._distance = value;
+        if (this.light)
+            this.light.distance = value;
+    }
+    get decay() {
+        return this._decay;
+    }
+    set decay(value) {
+        this._decay = value;
+        if (this.light)
+            this.light.decay = value;
+    }
+    get offsetX() {
+        return this._offsetX;
+    }
+    set offsetX(value) {
+        this._offsetX = value;
+        this.place();
+    }
+    get offsetY() {
+        return this._offsetY;
+    }
+    set offsetY(value) {
+        this._offsetY = value;
+        this.place();
+    }
+    get offsetZ() {
+        return this._offsetZ;
+    }
+    set offsetZ(value) {
+        this._offsetZ = value;
+        this.place();
+    }
+    onReady() {
+        if (this.game.space !== '3d')
+            return;
+        this.light = new THREE.PointLight(this._color, this._intensity, this._distance, this._decay);
+        this.entity.node.add(this.light);
+        this.place();
+    }
+    onDestroy() {
+        this.light?.removeFromParent();
+    }
+    place() {
+        this.light?.position.set(this._offsetX, this._offsetY, this._offsetZ);
+    }
+}

package/dist/components/rigid-body.d.ts

@@ -0,0 +1,114 @@
+import { Component, type ComponentSpace } from '../component.js';
+import type { Vec3Json } from '../scene-camera-3d.js';
+export type RigidBodyType = 'dynamic' | 'kinematic';
+export declare const RIGID_BODY_TYPES: readonly RigidBodyType[];
+/** A 3D vector as the body's public API reads and writes it. */
+export interface BodyVector {
+    x: number;
+    y: number;
+    z: number;
+}
+/**
+ * Makes the entity's `Collider` a body that moves (ADR 0028). A `dynamic` body
+ * is Rapier's: it falls under the scene's gravity, bounces, stacks and rests,
+ * and after every Simulation Step the engine writes the entity's position and
+ * rotation from it. A `kinematic` body is moved by code. It needs a `Collider`
+ * on the same entity (`validate_project` reports a body without one, and at
+ * runtime none is created). `mass` is the collider's mass; `velocity` is the
+ * initial linear velocity. A `kinematic` body is a character: every step the
+ * engine moves it through Rapier's character controller by its
+ * `desiredVelocity` on x and z and its own vertical velocity under gravity,
+ * stopping at walls, climbing steps up to `stepHeight` and slopes up to
+ * `maxSlope`, sticking to the ground within `snapDistance`, and pushing
+ * dynamic bodies it walks into. A param outside its range (`type` unknown,
+ * `mass` under the minimum, a `velocity` that is not three numbers) creates
+ * no body and warns once; `validate_project` reports it as
+ * `invalid-rigid-body-param`. A RigidBody in a 2D scene creates nothing.
+ */
+export declare class RigidBody extends Component {
+    static componentName: string;
+    static space: ComponentSpace;
+    static params: {
+        type: {
+            label: string;
+            options: RigidBodyType[];
+        };
+        mass: {
+            label: string;
+            min: number;
+            step: number;
+        };
+        gravityScale: {
+            label: string;
+            step: number;
+        };
+        linearDamping: {
+            label: string;
+            min: number;
+            step: number;
+        };
+        angularDamping: {
+            label: string;
+            min: number;
+            step: number;
+        };
+        lockRotations: {
+            label: string;
+        };
+        velocity: {
+            label: string;
+            kind: "vector3";
+        };
+        stepHeight: {
+            label: string;
+            min: number;
+            step: number;
+        };
+        maxSlope: {
+            label: string;
+            min: number;
+            max: number;
+            step: number;
+        };
+        snapDistance: {
+            label: string;
+            min: number;
+            step: number;
+        };
+    };
+    static transient: string[];
+    type: RigidBodyType;
+    mass: number;
+    gravityScale: number;
+    linearDamping: number;
+    angularDamping: number;
+    lockRotations: boolean;
+    /** The initial linear velocity `[x, y, z]`, applied when the body is created. */
+    velocity: Vec3Json;
+    /** Kinematic only: the tallest step it climbs without jumping. */
+    stepHeight: number;
+    /** Kinematic only: the steepest slope it climbs, in degrees. */
+    maxSlope: number;
+    /** Kinematic only: how far below its feet it still sticks to the ground (walking down steps and slopes). */
+    snapDistance: number;
+    /**
+     * Kinematic only: where it walks, in units per second on the world x and z
+     * axes. A motor sets it; the physics step reads it every Simulation Step and
+     * moves the body through the character controller. It stays until set again.
+     */
+    desiredVelocity: {
+        x: number;
+        z: number;
+    };
+    /** The body's linear velocity now, in units per second; zero before it exists. Assigning sets it. */
+    get linearVelocity(): BodyVector;
+    set linearVelocity(value: BodyVector);
+    /** Launches a kinematic body upward at `speed` (units per second), only while it stands on something; whether it did. */
+    jump(speed: number): boolean;
+    /** Whether the body stands on something; only a kinematic body moved by the character controller can. */
+    get grounded(): boolean;
+    /** Pushes a dynamic body with an instantaneous impulse (mass · velocity change); a no-op on any other body. */
+    applyImpulse(impulse: BodyVector): void;
+    onReady(): void;
+    onDestroy(): void;
+}

package/dist/components/rigid-body.js

@@ -0,0 +1,83 @@
+import { Component } from '../component.js';
+export const RIGID_BODY_TYPES = ['dynamic', 'kinematic'];
+const ZERO = { x: 0, y: 0, z: 0 };
+/**
+ * Makes the entity's `Collider` a body that moves (ADR 0028). A `dynamic` body
+ * is Rapier's: it falls under the scene's gravity, bounces, stacks and rests,
+ * and after every Simulation Step the engine writes the entity's position and
+ * rotation from it. A `kinematic` body is moved by code. It needs a `Collider`
+ * on the same entity (`validate_project` reports a body without one, and at
+ * runtime none is created). `mass` is the collider's mass; `velocity` is the
+ * initial linear velocity. A `kinematic` body is a character: every step the
+ * engine moves it through Rapier's character controller by its
+ * `desiredVelocity` on x and z and its own vertical velocity under gravity,
+ * stopping at walls, climbing steps up to `stepHeight` and slopes up to
+ * `maxSlope`, sticking to the ground within `snapDistance`, and pushing
+ * dynamic bodies it walks into. A param outside its range (`type` unknown,
+ * `mass` under the minimum, a `velocity` that is not three numbers) creates
+ * no body and warns once; `validate_project` reports it as
+ * `invalid-rigid-body-param`. A RigidBody in a 2D scene creates nothing.
+ */
+export class RigidBody extends Component {
+    static componentName = 'RigidBody';
+    static space = '3d';
+    static params = {
+        type: { label: 'Type', options: [...RIGID_BODY_TYPES] },
+        mass: { label: 'Mass', min: 0.001, step: 0.1 },
+        gravityScale: { label: 'Gravity scale', step: 0.1 },
+        linearDamping: { label: 'Linear damping', min: 0, step: 0.1 },
+        angularDamping: { label: 'Angular damping', min: 0, step: 0.1 },
+        lockRotations: { label: 'Lock rotations' },
+        velocity: { label: 'Initial velocity', kind: 'vector3' },
+        stepHeight: { label: 'Step height', min: 0, step: 0.05 },
+        maxSlope: { label: 'Max slope (degrees)', min: 0, max: 89, step: 1 },
+        snapDistance: { label: 'Snap to ground', min: 0, step: 0.05 },
+    };
+    // Live reads and writes of the body, not authorable defaults (they need a Game to answer).
+    static transient = ['linearVelocity', 'desiredVelocity'];
+    type = 'dynamic';
+    mass = 1;
+    gravityScale = 1;
+    linearDamping = 0;
+    angularDamping = 0;
+    lockRotations = false;
+    /** The initial linear velocity `[x, y, z]`, applied when the body is created. */
+    velocity = [0, 0, 0];
+    /** Kinematic only: the tallest step it climbs without jumping. */
+    stepHeight = 0.3;
+    /** Kinematic only: the steepest slope it climbs, in degrees. */
+    maxSlope = 45;
+    /** Kinematic only: how far below its feet it still sticks to the ground (walking down steps and slopes). */
+    snapDistance = 0.2;
+    /**
+     * Kinematic only: where it walks, in units per second on the world x and z
+     * axes. A motor sets it; the physics step reads it every Simulation Step and
+     * moves the body through the character controller. It stays until set again.
+     */
+    desiredVelocity = { x: 0, z: 0 };
+    /** The body's linear velocity now, in units per second; zero before it exists. Assigning sets it. */
+    get linearVelocity() {
+        return this.game.physics.velocityOf(this.entity) ?? { ...ZERO };
+    }
+    set linearVelocity(value) {
+        this.game.physics.setVelocityOf(this.entity, value);
+    }
+    /** Launches a kinematic body upward at `speed` (units per second), only while it stands on something; whether it did. */
+    jump(speed) {
+        return this.game.physics.jumpOf(this.entity, speed);
+    }
+    /** Whether the body stands on something; only a kinematic body moved by the character controller can. */
+    get grounded() {
+        return this.game.physics.groundedOf(this.entity);
+    }
+    /** Pushes a dynamic body with an instantaneous impulse (mass · velocity change); a no-op on any other body. */
+    applyImpulse(impulse) {
+        this.game.physics.applyImpulseTo(this.entity, impulse);
+    }
+    onReady() {
+        this.game.physics.attach(this.entity);
+    }
+    onDestroy() {
+        this.game.physics.detach(this.entity);
+    }
+}

package/dist/components/solid.d.ts

@@ -1,4 +1,4 @@
-import { Component } from '../component.js';
+import { Component, type ComponentSpace } from '../component.js';
 import { type CollisionPoint, type CollisionShape } from '../collision-shape.js';
 /**
  * Static collider. Character motors (e.g. PlatformerMotor) collide against
@@ -9,6 +9,7 @@ import { type CollisionPoint, type CollisionShape } from '../collision-shape.js'
  */
 export declare class Solid extends Component {
     static componentName: string;
+    static space: ComponentSpace;
     static params: {
         offsetX: {
             label: string;

package/dist/components/solid.js

@@ -9,6 +9,7 @@ import { collisionBounds, resolveCollisionPoints, } from '../collision-shape.js'
  */
 export class Solid extends Component {
     static componentName = 'Solid';
+    static space = '2d';
     static params = {
         offsetX: { label: 'x offset' },
         offsetY: { label: 'y offset' },

package/dist/components/sprite.d.ts

@@ -1,4 +1,4 @@
-import { Component } from '../component.js';
+import { Component, type ComponentSpace } from '../component.js';
 import type { YSortParticipant } from '../render-sort.js';
 export type SpriteShape = 'rectangle' | 'circle';
 /**
@@ -7,6 +7,7 @@ export type SpriteShape = 'rectangle' | 'circle';
  */
 export declare class Sprite extends Component implements YSortParticipant {
     static componentName: string;
+    static space: ComponentSpace;
     static params: {
         offsetX: {
             label: string;

package/dist/components/sprite.js

@@ -11,6 +11,7 @@ const clampAnchor = (value) => Math.min(1, Math.max(0, value));
  */
 export class Sprite extends Component {
     static componentName = 'Sprite';
+    static space = '2d';
     static params = {
         offsetX: { label: 'x offset' },
         offsetY: { label: 'y offset' },