@jiant/canvable 0.0.1 → 0.0.3

package/README.md

@@ -1,6 +1,6 @@
-# CanvasBuilder
+# Canvable
 
-CanvasBuilder é uma biblioteca para criação de cenas em canvas com um sistema de nós, permitindo a construção de elementos e interações de forma intuitiva, similar a uma engine de jogos 2D. A biblioteca oferece suporte para objetos gráficos, entrada de usuário, câmera, e muito mais, permitindo criar experiências interativas de maneira modular e flexível.
+Canvable é uma biblioteca para criação de cenas em canvas com um sistema de nós, permitindo a construção de elementos e interações de forma intuitiva, similar a uma engine de jogos 2D. A biblioteca oferece suporte para objetos gráficos, entrada de usuário, câmera, e muito mais, permitindo criar experiências interativas de maneira modular e flexível.
 
 ## Instalação
 
@@ -9,7 +9,7 @@ CanvasBuilder é uma biblioteca para criação de cenas em canvas com um sistema
 Se você está utilizando o NPM, pode instalar a biblioteca com:
 
 ```bash
-npm install @jiant/canvasbuilder
+npm install @jiant/canvable
 ```
 
 ### Usando Yarn
@@ -17,7 +17,7 @@ npm install @jiant/canvasbuilder
 Se você está utilizando o Yarn, pode instalar com:
 
 ```bash
-yarn add @jiant/canvasbuilder
+yarn add @jiant/canvable
 ```
 
 ## Exemplos de Uso
@@ -27,7 +27,7 @@ yarn add @jiant/canvasbuilder
 A seguir está um exemplo básico de como criar uma cena e adicionar um objeto nela:
 
 ```typescript
-import { Circle, getCanvas, Scene } from "@jiant/canvasbuilder";
+import { Circle, getCanvas, Scene } from "@jiant/canvable";
 import "./style.css";
 
 // Obtendo o canvas

package/dist/main.d.mts

@@ -2,14 +2,22 @@
  * A 2D vector class for mathematical operations and physics calculations
  */
 declare class Vector2D {
-    x: number;
-    y: number;
+    private _x;
+    private _y;
+    constructor(x?: number, y?: number);
+    onChange: ((delta: Vector2D) => void)[];
     /**
-     * Creates a new Vector2D instance
-     * @param x - The x component of the vector
-     * @param y - The y component of the vector
+     * Sets the x component of the vector and notifies any registered callbacks.
+     * @param x - The new x value for the vector.
      */
-    constructor(x?: number, y?: number);
+    set x(x: number);
+    /**
+     * Sets the y component of the vector and notifies any registered callbacks.
+     * @param y - The new y value for the vector.
+     */
+    set y(y: number);
+    get x(): number;
+    get y(): number;
     /**
      * Adds another vector to this vector
      * @param vector - The vector to add
@@ -159,7 +167,7 @@ declare const TWO_PI: number;
 
 declare class Camera extends Node {
     zoom: number;
-    constructor(x?: number, y?: number, zoom?: number);
+    constructor(zoom?: number);
     update(deltaTime: number): void;
     transformCoordinates(position: Vector2D): Vector2D;
 }
@@ -169,8 +177,10 @@ declare class InputManager extends Node {
     private keyJustPressed;
     private mouseState;
     private mouseJustPressed;
+    mousePos: Vector2D;
     constructor();
     private setupListeners;
+    private handleMouseMove;
     private handleKeyDown;
     private handleKeyUp;
     private handleMouseDown;
@@ -208,18 +218,24 @@ declare class Scene extends Node {
 interface NodeConfig {
     id?: string;
     pos?: Vector2D;
+    scene?: Scene;
 }
 declare class Node {
-    id: string;
     pos: Vector2D;
+    id: string;
     children: Node[];
     scene?: Scene;
-    constructor(config?: NodeConfig);
+    constructor(scene?: Scene, config?: NodeConfig);
     addObject(object: Node): void;
     removeObject(object: Node): void;
     private generateID;
 }
 
+declare abstract class BoundingBox extends Node {
+    abstract checkCollision(other: BoundingBox): boolean;
+    abstract isPointInside(_point: Vector2D): boolean;
+}
+
 interface CircleConfig {
     vel?: Vector2D;
     size?: number;
@@ -230,10 +246,18 @@ declare class Circle extends Node {
     vel: Vector2D;
     size: number;
     friction: number;
-    constructor(config?: CircleConfig);
+    boundingBox: BoundingBox;
+    constructor(scene?: Scene, config?: CircleConfig);
     draw(ctx: CanvasRenderingContext2D, selected?: boolean): void;
 }
 
+declare class CircleBoundingBox extends BoundingBox {
+    radius: number;
+    constructor(scene?: Scene, radius?: number);
+    checkCollision(other: BoundingBox): boolean;
+    isPointInside(_point: Vector2D): boolean;
+}
+
 declare function getCanvas(id: string): HTMLCanvasElement;
 
-export { Camera, Circle, type CircleConfig, type Drawable, Node, type NodeConfig, Scene, type SceneOptions, TWO_PI, type Updatable, Vector2D, getCanvas };
+export { BoundingBox, Camera, Circle, CircleBoundingBox, type CircleConfig, type Drawable, Node, type NodeConfig, Scene, type SceneOptions, TWO_PI, type Updatable, Vector2D, getCanvas };

package/dist/main.d.ts

@@ -2,14 +2,22 @@
  * A 2D vector class for mathematical operations and physics calculations
  */
 declare class Vector2D {
-    x: number;
-    y: number;
+    private _x;
+    private _y;
+    constructor(x?: number, y?: number);
+    onChange: ((delta: Vector2D) => void)[];
     /**
-     * Creates a new Vector2D instance
-     * @param x - The x component of the vector
-     * @param y - The y component of the vector
+     * Sets the x component of the vector and notifies any registered callbacks.
+     * @param x - The new x value for the vector.
      */
-    constructor(x?: number, y?: number);
+    set x(x: number);
+    /**
+     * Sets the y component of the vector and notifies any registered callbacks.
+     * @param y - The new y value for the vector.
+     */
+    set y(y: number);
+    get x(): number;
+    get y(): number;
     /**
      * Adds another vector to this vector
      * @param vector - The vector to add
@@ -159,7 +167,7 @@ declare const TWO_PI: number;
 
 declare class Camera extends Node {
     zoom: number;
-    constructor(x?: number, y?: number, zoom?: number);
+    constructor(zoom?: number);
     update(deltaTime: number): void;
     transformCoordinates(position: Vector2D): Vector2D;
 }
@@ -169,8 +177,10 @@ declare class InputManager extends Node {
     private keyJustPressed;
     private mouseState;
     private mouseJustPressed;
+    mousePos: Vector2D;
     constructor();
     private setupListeners;
+    private handleMouseMove;
     private handleKeyDown;
     private handleKeyUp;
     private handleMouseDown;
@@ -208,18 +218,24 @@ declare class Scene extends Node {
 interface NodeConfig {
     id?: string;
     pos?: Vector2D;
+    scene?: Scene;
 }
 declare class Node {
-    id: string;
     pos: Vector2D;
+    id: string;
     children: Node[];
     scene?: Scene;
-    constructor(config?: NodeConfig);
+    constructor(scene?: Scene, config?: NodeConfig);
     addObject(object: Node): void;
     removeObject(object: Node): void;
     private generateID;
 }
 
+declare abstract class BoundingBox extends Node {
+    abstract checkCollision(other: BoundingBox): boolean;
+    abstract isPointInside(_point: Vector2D): boolean;
+}
+
 interface CircleConfig {
     vel?: Vector2D;
     size?: number;
@@ -230,10 +246,18 @@ declare class Circle extends Node {
     vel: Vector2D;
     size: number;
     friction: number;
-    constructor(config?: CircleConfig);
+    boundingBox: BoundingBox;
+    constructor(scene?: Scene, config?: CircleConfig);
     draw(ctx: CanvasRenderingContext2D, selected?: boolean): void;
 }
 
+declare class CircleBoundingBox extends BoundingBox {
+    radius: number;
+    constructor(scene?: Scene, radius?: number);
+    checkCollision(other: BoundingBox): boolean;
+    isPointInside(_point: Vector2D): boolean;
+}
+
 declare function getCanvas(id: string): HTMLCanvasElement;
 
-export { Camera, Circle, type CircleConfig, type Drawable, Node, type NodeConfig, Scene, type SceneOptions, TWO_PI, type Updatable, Vector2D, getCanvas };
+export { BoundingBox, Camera, Circle, CircleBoundingBox, type CircleConfig, type Drawable, Node, type NodeConfig, Scene, type SceneOptions, TWO_PI, type Updatable, Vector2D, getCanvas };

package/dist/main.js

@@ -20,10 +20,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/main.ts
 var main_exports = {};
 __export(main_exports, {
+  BoundingBox: () => BoundingBox,
   Camera: () => Camera,
   Circle: () => Circle,
+  CircleBoundingBox: () => CircleBoundingBox,
   Node: () => Node,
-  Scene: () => Scene,
+  Scene: () => Scene2,
   TWO_PI: () => TWO_PI,
   Vector2D: () => Vector2D,
   getCanvas: () => getCanvas
@@ -35,14 +37,39 @@ var TWO_PI = Math.PI * 2;
 
 // src/classes/Vector2D.ts
 var Vector2D = class _Vector2D {
+  _x = 0;
+  _y = 0;
+  constructor(x = 0, y = 0) {
+    this._x = x;
+    this._y = y;
+  }
+  onChange = [];
   /**
-   * Creates a new Vector2D instance
-   * @param x - The x component of the vector
-   * @param y - The y component of the vector
+   * Sets the x component of the vector and notifies any registered callbacks.
+   * @param x - The new x value for the vector.
    */
-  constructor(x = 0, y = 0) {
-    this.x = x;
-    this.y = y;
+  set x(x) {
+    const d = new _Vector2D(x - this._x, this.y - this._y);
+    for (const callback of this.onChange) {
+      callback(d);
+    }
+    this._x = x;
+  }
+  /**
+   * Sets the y component of the vector and notifies any registered callbacks.
+   * @param y - The new y value for the vector.
+   */
+  set y(y) {
+    for (const callback of this.onChange) {
+      callback(new _Vector2D(this.x - this._x, y - this._y));
+    }
+    this._y = y;
+  }
+  get x() {
+    return this._x;
+  }
+  get y() {
+    return this._y;
   }
   /**
    * Adds another vector to this vector
@@ -265,17 +292,24 @@ var Vector2D = class _Vector2D {
 // src/nodes/Node.ts
 var import_uuid = require("uuid");
 var Node = class {
-  id;
   pos;
+  id;
   children = [];
   scene;
-  constructor(config) {
+  constructor(scene, config) {
+    this.scene = scene;
     const { id, pos } = config || {};
     this.id = id || this.generateID();
     this.pos = pos || new Vector2D();
+    this.pos.onChange.push((delta) => {
+      for (const child of this.children) {
+        child.pos = child.pos.add(delta);
+      }
+    });
   }
   addObject(object) {
     this.children.push(object);
+    if (!object.scene) object.scene = this.scene;
   }
   removeObject(object) {
     const index = this.children.indexOf(object);
@@ -288,25 +322,76 @@ var Node = class {
   }
 };
 
+// src/nodes/BoundingBox.ts
+var BoundingBox = class extends Node {
+};
+
+// src/nodes/Camera.ts
+var Camera = class extends Node {
+  zoom;
+  constructor(zoom = 1) {
+    super();
+    this.zoom = zoom;
+  }
+  update(deltaTime) {
+  }
+  transformCoordinates(position) {
+    return new Vector2D((position.x - this.pos.x) * this.zoom, (position.y - this.pos.y) * this.zoom);
+  }
+};
+
+// src/nodes/CircleBoundingBox.ts
+var CircleBoundingBox = class _CircleBoundingBox extends BoundingBox {
+  radius;
+  constructor(scene, radius) {
+    super(scene);
+    this.radius = radius || 10;
+  }
+  checkCollision(other) {
+    if (other instanceof _CircleBoundingBox) {
+      const thisPoint = this.scene?.camera.transformCoordinates(new Vector2D(this.pos.x, this.pos.y));
+      const otherPoint = this.scene?.camera.transformCoordinates(new Vector2D(other.pos.x, other.pos.y));
+      if (!thisPoint || !otherPoint) return false;
+      const dx = thisPoint.x - otherPoint.x;
+      const dy = thisPoint.y - otherPoint.y;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      return distance < this.radius + other.radius;
+    }
+    return false;
+  }
+  isPointInside(_point) {
+    const point = this.scene?.camera.transformCoordinates(_point);
+    if (!point) return false;
+    const dx = this.pos.x - point.x;
+    const dy = this.pos.y - point.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    return distance < this.radius;
+  }
+};
+
 // src/nodes/Circle.ts
 var Circle = class extends Node {
   vel = new Vector2D();
   size = 10;
   friction = 0.1;
-  constructor(config) {
-    super();
+  boundingBox = new CircleBoundingBox(this.scene, this.size);
+  constructor(scene, config) {
+    super(scene);
     this.vel = config?.vel || new Vector2D();
     this.size = config?.size || 10;
     this.friction = config?.friction || 0.1;
+    if (config?.startsWithBoundingBox) {
+      this.boundingBox = new CircleBoundingBox(scene, this.size);
+      this.addObject(this.boundingBox);
+    }
   }
   draw(ctx, selected) {
-    const radius = 10;
     const cameraPos = this.scene?.camera.pos || new Vector2D();
     const cameraScale = this.scene?.camera.zoom || 1;
     const relativePos = new Vector2D((this.pos.x - cameraPos.x) * cameraScale, (this.pos.y - cameraPos.y) * cameraScale);
     if (selected) {
       ctx.beginPath();
-      ctx.arc(relativePos.x, relativePos.y, radius + 5, 0, Math.PI * 2);
+      ctx.arc(relativePos.x, relativePos.y, this.size + 5, 0, Math.PI * 2);
       ctx.fillStyle = "transparent";
       ctx.lineWidth = 3;
       ctx.strokeStyle = "white";
@@ -314,33 +399,20 @@ var Circle = class extends Node {
       ctx.closePath();
     }
     ctx.beginPath();
-    ctx.arc(relativePos.x, relativePos.y, radius, 0, Math.PI * 2);
+    ctx.arc(relativePos.x, relativePos.y, this.size, 0, Math.PI * 2);
     ctx.fillStyle = "blue";
     ctx.fill();
     ctx.closePath();
   }
 };
 
-// src/nodes/Camera.ts
-var Camera = class extends Node {
-  zoom;
-  constructor(x = 0, y = 0, zoom = 1) {
-    super();
-    this.zoom = zoom;
-  }
-  update(deltaTime) {
-  }
-  transformCoordinates(position) {
-    return new Vector2D((position.x - this.pos.x) * this.zoom, (position.y - this.pos.y) * this.zoom);
-  }
-};
-
 // src/nodes/InputManager.ts
 var InputManager = class extends Node {
   keyState = /* @__PURE__ */ new Map();
   keyJustPressed = /* @__PURE__ */ new Set();
   mouseState = /* @__PURE__ */ new Map();
   mouseJustPressed = /* @__PURE__ */ new Set();
+  mousePos = new Vector2D();
   constructor() {
     super();
     this.setupListeners();
@@ -350,6 +422,10 @@ var InputManager = class extends Node {
     window.addEventListener("keyup", this.handleKeyUp.bind(this));
     window.addEventListener("mousedown", this.handleMouseDown.bind(this));
     window.addEventListener("mouseup", this.handleMouseUp.bind(this));
+    window.addEventListener("mousemove", this.handleMouseMove.bind(this));
+  }
+  handleMouseMove(event) {
+    this.mousePos = new Vector2D(event.clientX, event.clientY);
   }
   handleKeyDown(event) {
     const key = event.key;
@@ -398,7 +474,7 @@ var InputManager = class extends Node {
 };
 
 // src/nodes/Scene.ts
-var Scene = class extends Node {
+var Scene2 = class extends Node {
   camera;
   inputManager;
   ctx;
@@ -412,8 +488,8 @@ var Scene = class extends Node {
     this.setup();
   }
   addObject(object) {
-    super.addObject(object);
     object.scene = this;
+    super.addObject(object);
   }
   setup() {
     this.resizeCanvas();
@@ -487,8 +563,10 @@ function getCanvas(id) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BoundingBox,
   Camera,
   Circle,
+  CircleBoundingBox,
   Node,
   Scene,
   TWO_PI,

package/dist/main.mjs

@@ -3,14 +3,39 @@ var TWO_PI = Math.PI * 2;
 
 // src/classes/Vector2D.ts
 var Vector2D = class _Vector2D {
+  _x = 0;
+  _y = 0;
+  constructor(x = 0, y = 0) {
+    this._x = x;
+    this._y = y;
+  }
+  onChange = [];
   /**
-   * Creates a new Vector2D instance
-   * @param x - The x component of the vector
-   * @param y - The y component of the vector
+   * Sets the x component of the vector and notifies any registered callbacks.
+   * @param x - The new x value for the vector.
    */
-  constructor(x = 0, y = 0) {
-    this.x = x;
-    this.y = y;
+  set x(x) {
+    const d = new _Vector2D(x - this._x, this.y - this._y);
+    for (const callback of this.onChange) {
+      callback(d);
+    }
+    this._x = x;
+  }
+  /**
+   * Sets the y component of the vector and notifies any registered callbacks.
+   * @param y - The new y value for the vector.
+   */
+  set y(y) {
+    for (const callback of this.onChange) {
+      callback(new _Vector2D(this.x - this._x, y - this._y));
+    }
+    this._y = y;
+  }
+  get x() {
+    return this._x;
+  }
+  get y() {
+    return this._y;
   }
   /**
    * Adds another vector to this vector
@@ -233,17 +258,24 @@ var Vector2D = class _Vector2D {
 // src/nodes/Node.ts
 import { v4 as uuidv4 } from "uuid";
 var Node = class {
-  id;
   pos;
+  id;
   children = [];
   scene;
-  constructor(config) {
+  constructor(scene, config) {
+    this.scene = scene;
     const { id, pos } = config || {};
     this.id = id || this.generateID();
     this.pos = pos || new Vector2D();
+    this.pos.onChange.push((delta) => {
+      for (const child of this.children) {
+        child.pos = child.pos.add(delta);
+      }
+    });
   }
   addObject(object) {
     this.children.push(object);
+    if (!object.scene) object.scene = this.scene;
   }
   removeObject(object) {
     const index = this.children.indexOf(object);
@@ -256,25 +288,76 @@ var Node = class {
   }
 };
 
+// src/nodes/BoundingBox.ts
+var BoundingBox = class extends Node {
+};
+
+// src/nodes/Camera.ts
+var Camera = class extends Node {
+  zoom;
+  constructor(zoom = 1) {
+    super();
+    this.zoom = zoom;
+  }
+  update(deltaTime) {
+  }
+  transformCoordinates(position) {
+    return new Vector2D((position.x - this.pos.x) * this.zoom, (position.y - this.pos.y) * this.zoom);
+  }
+};
+
+// src/nodes/CircleBoundingBox.ts
+var CircleBoundingBox = class _CircleBoundingBox extends BoundingBox {
+  radius;
+  constructor(scene, radius) {
+    super(scene);
+    this.radius = radius || 10;
+  }
+  checkCollision(other) {
+    if (other instanceof _CircleBoundingBox) {
+      const thisPoint = this.scene?.camera.transformCoordinates(new Vector2D(this.pos.x, this.pos.y));
+      const otherPoint = this.scene?.camera.transformCoordinates(new Vector2D(other.pos.x, other.pos.y));
+      if (!thisPoint || !otherPoint) return false;
+      const dx = thisPoint.x - otherPoint.x;
+      const dy = thisPoint.y - otherPoint.y;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      return distance < this.radius + other.radius;
+    }
+    return false;
+  }
+  isPointInside(_point) {
+    const point = this.scene?.camera.transformCoordinates(_point);
+    if (!point) return false;
+    const dx = this.pos.x - point.x;
+    const dy = this.pos.y - point.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    return distance < this.radius;
+  }
+};
+
 // src/nodes/Circle.ts
 var Circle = class extends Node {
   vel = new Vector2D();
   size = 10;
   friction = 0.1;
-  constructor(config) {
-    super();
+  boundingBox = new CircleBoundingBox(this.scene, this.size);
+  constructor(scene, config) {
+    super(scene);
     this.vel = config?.vel || new Vector2D();
     this.size = config?.size || 10;
     this.friction = config?.friction || 0.1;
+    if (config?.startsWithBoundingBox) {
+      this.boundingBox = new CircleBoundingBox(scene, this.size);
+      this.addObject(this.boundingBox);
+    }
   }
   draw(ctx, selected) {
-    const radius = 10;
     const cameraPos = this.scene?.camera.pos || new Vector2D();
     const cameraScale = this.scene?.camera.zoom || 1;
     const relativePos = new Vector2D((this.pos.x - cameraPos.x) * cameraScale, (this.pos.y - cameraPos.y) * cameraScale);
     if (selected) {
       ctx.beginPath();
-      ctx.arc(relativePos.x, relativePos.y, radius + 5, 0, Math.PI * 2);
+      ctx.arc(relativePos.x, relativePos.y, this.size + 5, 0, Math.PI * 2);
       ctx.fillStyle = "transparent";
       ctx.lineWidth = 3;
       ctx.strokeStyle = "white";
@@ -282,33 +365,20 @@ var Circle = class extends Node {
       ctx.closePath();
     }
     ctx.beginPath();
-    ctx.arc(relativePos.x, relativePos.y, radius, 0, Math.PI * 2);
+    ctx.arc(relativePos.x, relativePos.y, this.size, 0, Math.PI * 2);
     ctx.fillStyle = "blue";
     ctx.fill();
     ctx.closePath();
   }
 };
 
-// src/nodes/Camera.ts
-var Camera = class extends Node {
-  zoom;
-  constructor(x = 0, y = 0, zoom = 1) {
-    super();
-    this.zoom = zoom;
-  }
-  update(deltaTime) {
-  }
-  transformCoordinates(position) {
-    return new Vector2D((position.x - this.pos.x) * this.zoom, (position.y - this.pos.y) * this.zoom);
-  }
-};
-
 // src/nodes/InputManager.ts
 var InputManager = class extends Node {
   keyState = /* @__PURE__ */ new Map();
   keyJustPressed = /* @__PURE__ */ new Set();
   mouseState = /* @__PURE__ */ new Map();
   mouseJustPressed = /* @__PURE__ */ new Set();
+  mousePos = new Vector2D();
   constructor() {
     super();
     this.setupListeners();
@@ -318,6 +388,10 @@ var InputManager = class extends Node {
     window.addEventListener("keyup", this.handleKeyUp.bind(this));
     window.addEventListener("mousedown", this.handleMouseDown.bind(this));
     window.addEventListener("mouseup", this.handleMouseUp.bind(this));
+    window.addEventListener("mousemove", this.handleMouseMove.bind(this));
+  }
+  handleMouseMove(event) {
+    this.mousePos = new Vector2D(event.clientX, event.clientY);
   }
   handleKeyDown(event) {
     const key = event.key;
@@ -366,7 +440,7 @@ var InputManager = class extends Node {
 };
 
 // src/nodes/Scene.ts
-var Scene = class extends Node {
+var Scene2 = class extends Node {
   camera;
   inputManager;
   ctx;
@@ -380,8 +454,8 @@ var Scene = class extends Node {
     this.setup();
   }
   addObject(object) {
-    super.addObject(object);
     object.scene = this;
+    super.addObject(object);
   }
   setup() {
     this.resizeCanvas();
@@ -454,10 +528,12 @@ function getCanvas(id) {
   return canvas;
 }
 export {
+  BoundingBox,
   Camera,
   Circle,
+  CircleBoundingBox,
   Node,
-  Scene,
+  Scene2 as Scene,
   TWO_PI,
   Vector2D,
   getCanvas

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiant/canvable",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A tool for building canvas apps",
   "main": "./dist/main.js",
   "module": "./dist/main.mjs",
@@ -27,6 +27,10 @@
     "drawing",
     "visualization"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SrDouglax/Canvable.git"
+  },
   "publishConfig": {
     "access": "public"
   }