@jiant/canvable 0.0.1-fix

package/dist/main.mjs

@@ -0,0 +1,464 @@
+// src/constants.ts
+var TWO_PI = Math.PI * 2;
+
+// src/classes/Vector2D.ts
+var Vector2D = class _Vector2D {
+  /**
+   * Creates a new Vector2D instance
+   * @param x - The x component of the vector
+   * @param y - The y component of the vector
+   */
+  constructor(x = 0, y = 0) {
+    this.x = x;
+    this.y = y;
+  }
+  /**
+   * Adds another vector to this vector
+   * @param vector - The vector to add
+   * @param self - If true, modifies the current vector in place, otherwise returns a new vector
+   * @returns A new Vector2D representing the sum
+   */
+  add(vector, self = false) {
+    if (self) {
+      this.x += vector.x;
+      this.y += vector.y;
+      return this;
+    } else {
+      return new _Vector2D(this.x + vector.x, this.y + vector.y);
+    }
+  }
+  /**
+   * Subtracts another vector from this vector
+   * @param vector - The vector to subtract
+   * @param self - If true, modifies the current vector in place, otherwise returns a new vector
+   * @returns A new Vector2D representing the difference
+   */
+  subtract(vector, self = false) {
+    if (self) {
+      this.x -= vector.x;
+      this.y -= vector.y;
+      return this;
+    } else {
+      return new _Vector2D(this.x - vector.x, this.y - vector.y);
+    }
+  }
+  /**
+   * Multiplies this vector by a scalar value
+   * @param scalar - The scalar value to multiply by
+   * @returns A new Vector2D scaled by the input value
+   */
+  multiply(scalar) {
+    return new _Vector2D(this.x * scalar, this.y * scalar);
+  }
+  /**
+   * Divides this vector by a scalar value
+   * @param scalar - The scalar value to divide by
+   * @throws {Error} If scalar is zero
+   * @returns A new Vector2D divided by the scalar value
+   */
+  divide(scalar) {
+    if (scalar === 0) throw new Error("Cannot divide by zero");
+    return new _Vector2D(this.x / scalar, this.y / scalar);
+  }
+  /**
+   * Calculates the magnitude (length) of this vector
+   * @returns The magnitude of the vector
+   */
+  magnitude() {
+    return Math.sqrt(this.x * this.x + this.y * this.y);
+  }
+  /**
+   * Creates a normalized (unit) vector pointing in the same direction
+   * @returns A new Vector2D with magnitude 1 (or 0 if this vector is 0)
+   */
+  normalize() {
+    const mag = this.magnitude();
+    if (mag === 0) return new _Vector2D(0, 0);
+    return this.divide(mag);
+  }
+  /**
+   * Calculates the dot product with another vector
+   * @param vector - The vector to calculate the dot product with
+   * @returns The dot product of the two vectors
+   */
+  dot(vector) {
+    return this.x * vector.x + this.y * vector.y;
+  }
+  /**
+   * Calculates the 2D cross product with another vector
+   * @param vector - The vector to calculate the cross product with
+   * @returns The magnitude of the cross product
+   */
+  cross(vector) {
+    return this.x * vector.y - this.y * vector.x;
+  }
+  /**
+   * Calculates the angle between this vector and another vector
+   * @param vector - The vector to calculate the angle with
+   * @returns The angle in radians between the two vectors
+   */
+  angle(vector) {
+    const dot = this.dot(vector);
+    const mags = this.magnitude() * vector.magnitude();
+    return Math.acos(dot / mags);
+  }
+  /**
+   * Rotates the vector by a given angle
+   * @param angle - The angle to rotate by (in radians)
+   * @returns A new Vector2D rotated by the specified angle
+   */
+  rotate(angle) {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    return new _Vector2D(this.x * cos - this.y * sin, this.x * sin + this.y * cos);
+  }
+  /**
+   * Calculates the distance to another vector
+   * @param vector - The vector to calculate the distance to
+   * @returns The distance between the two vectors
+   */
+  distance(vector) {
+    return this.subtract(vector).magnitude();
+  }
+  /**
+   * Projects this vector onto another vector
+   * @param vector - The vector to project onto
+   * @returns A new Vector2D representing the projection
+   */
+  project(vector) {
+    const normalized = vector.normalize();
+    const scalar = this.dot(normalized);
+    return normalized.multiply(scalar);
+  }
+  /**
+   * Reflects this vector across a normal
+   * @param normal - The normal vector to reflect across
+   * @returns A new Vector2D representing the reflection
+   */
+  reflect(normal) {
+    const normalized = normal.normalize();
+    return this.subtract(normalized.multiply(2 * this.dot(normalized)));
+  }
+  /**
+   * Linearly interpolates between this vector and another vector
+   * @param vector - The vector to interpolate towards
+   * @param t - The interpolation parameter (0-1)
+   * @returns A new Vector2D representing the interpolated vector
+   */
+  lerp(vector, t) {
+    return new _Vector2D(this.x + (vector.x - this.x) * t, this.y + (vector.y - this.y) * t);
+  }
+  /**
+   * Limits the magnitude of this vector to a maximum value
+   * @param max - The maximum magnitude
+   * @returns A new Vector2D with limited magnitude
+   */
+  limit(max) {
+    const mag = this.magnitude();
+    if (mag > max) {
+      return this.normalize().multiply(max);
+    }
+    return new _Vector2D(this.x, this.y);
+  }
+  /**
+   * Checks if this vector is equal to another vector within a tolerance
+   * @param vector - The vector to compare with
+   * @param tolerance - The maximum difference allowed (default: 0.000001)
+   * @returns True if the vectors are equal within the tolerance
+   */
+  equals(vector, tolerance = 1e-6) {
+    return Math.abs(this.x - vector.x) < tolerance && Math.abs(this.y - vector.y) < tolerance;
+  }
+  /**
+   * Creates a copy of this vector
+   * @returns A new Vector2D with the same components
+   */
+  clone() {
+    return new _Vector2D(this.x, this.y);
+  }
+  /**
+   * Converts the vector to a string representation
+   * @returns A string representation of the vector
+   */
+  toString() {
+    return `Vector2D(${this.x}, ${this.y})`;
+  }
+  /**
+   * Creates a vector pointing in a specific direction
+   * @param angle - The angle in radians
+   * @param magnitude - The length of the vector (default: 1)
+   * @returns A new Vector2D with the specified angle and magnitude
+   */
+  static fromAngle(angle, magnitude = 1) {
+    return new _Vector2D(magnitude * Math.cos(angle), magnitude * Math.sin(angle));
+  }
+  /**
+   * Creates a random vector with the specified magnitude
+   * @param magnitude - The length of the vector (default: 1)
+   * @returns A new Vector2D with random direction and specified magnitude
+   */
+  static random(magnitude = 1) {
+    const angle = Math.random() * TWO_PI;
+    return _Vector2D.fromAngle(angle, magnitude);
+  }
+  /**
+   * Adds two vectors together
+   * @param v1 - The first vector
+   * @param v2 - The second vector
+   * @returns A new Vector2D representing the sum
+   */
+  static add(v1, v2) {
+    return v1.add(v2);
+  }
+  /**
+   * Subtracts one vector from another
+   * @param v1 - The vector to subtract from
+   * @param v2 - The vector to subtract
+   * @returns A new Vector2D representing the difference
+   */
+  static subtract(v1, v2) {
+    return v1.subtract(v2);
+  }
+  /**
+   * Calculates the distance between two vectors
+   * @param v1 - The first vector
+   * @param v2 - The second vector
+   * @returns The distance between the vectors
+   */
+  static distance(v1, v2) {
+    return v1.distance(v2);
+  }
+};
+
+// src/nodes/Node.ts
+import { v4 as uuidv4 } from "uuid";
+var Node = class {
+  id;
+  pos;
+  children = [];
+  scene;
+  constructor(config) {
+    const { id, pos } = config || {};
+    this.id = id || this.generateID();
+    this.pos = pos || new Vector2D();
+  }
+  addObject(object) {
+    this.children.push(object);
+  }
+  removeObject(object) {
+    const index = this.children.indexOf(object);
+    if (index !== -1) {
+      this.children.splice(index, 1);
+    }
+  }
+  generateID() {
+    return uuidv4();
+  }
+};
+
+// src/nodes/Circle.ts
+var Circle = class extends Node {
+  vel = new Vector2D();
+  size = 10;
+  friction = 0.1;
+  constructor(config) {
+    super();
+    this.vel = config?.vel || new Vector2D();
+    this.size = config?.size || 10;
+    this.friction = config?.friction || 0.1;
+  }
+  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.fillStyle = "transparent";
+      ctx.lineWidth = 3;
+      ctx.strokeStyle = "white";
+      ctx.stroke();
+      ctx.closePath();
+    }
+    ctx.beginPath();
+    ctx.arc(relativePos.x, relativePos.y, radius, 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();
+  constructor() {
+    super();
+    this.setupListeners();
+  }
+  setupListeners() {
+    window.addEventListener("keydown", this.handleKeyDown.bind(this));
+    window.addEventListener("keyup", this.handleKeyUp.bind(this));
+    window.addEventListener("mousedown", this.handleMouseDown.bind(this));
+    window.addEventListener("mouseup", this.handleMouseUp.bind(this));
+  }
+  handleKeyDown(event) {
+    const key = event.key;
+    if (!this.keyState.get(key)) {
+      this.keyState.set(key, true);
+      this.keyJustPressed.add(key);
+    }
+  }
+  handleKeyUp(event) {
+    const key = event.key;
+    this.keyState.set(key, false);
+    this.keyJustPressed.delete(key);
+  }
+  handleMouseDown(event) {
+    const button = event.button;
+    if (!this.mouseState.get(button)) {
+      this.mouseState.set(button, true);
+      this.mouseJustPressed.add(button);
+    }
+  }
+  handleMouseUp(event) {
+    const button = event.button;
+    this.mouseState.set(button, false);
+    this.mouseJustPressed.delete(button);
+  }
+  justPressed(keyOrButton) {
+    if (typeof keyOrButton === "string") {
+      return this.keyJustPressed.has(keyOrButton);
+    } else if (typeof keyOrButton === "number") {
+      return this.mouseJustPressed.has(keyOrButton);
+    }
+    return false;
+  }
+  isPressed(keyOrButton) {
+    if (typeof keyOrButton === "string") {
+      return !!this.keyState.get(keyOrButton);
+    } else if (typeof keyOrButton === "number") {
+      return !!this.mouseState.get(keyOrButton);
+    }
+    return false;
+  }
+  postUpdate() {
+    this.keyJustPressed.clear();
+    this.mouseJustPressed.clear();
+  }
+};
+
+// src/nodes/Scene.ts
+var Scene = class extends Node {
+  camera;
+  inputManager;
+  ctx;
+  lastTime = 0;
+  totalTime = 0;
+  constructor(ctx, opts) {
+    super();
+    this.ctx = ctx;
+    this.camera = opts?.camera || new Camera();
+    this.inputManager = opts?.inputManager || new InputManager();
+    this.setup();
+  }
+  addObject(object) {
+    super.addObject(object);
+    object.scene = this;
+  }
+  setup() {
+    this.resizeCanvas();
+  }
+  resizeCanvas() {
+    const canvas = this.ctx.canvas;
+    const style = getComputedStyle(canvas);
+    const width = parseInt(style.width);
+    const height = parseInt(style.height);
+    canvas.width = width;
+    canvas.height = height;
+  }
+  update(deltaTime) {
+    this.camera.update(deltaTime);
+    this.children.forEach((child) => {
+      if (isUpdatable(child)) {
+        child.update(deltaTime);
+      }
+    });
+  }
+  draw(ctx) {
+    ctx.fillStyle = ctx.canvas.style.backgroundColor;
+    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+    this.children.forEach((child) => {
+      if (isDrawable(child)) {
+        child.draw(ctx);
+      }
+    });
+  }
+  gameLoop(callback, targetFPS = 60) {
+    const frameInterval = 1e3 / targetFPS;
+    let lastFrameTime = 0;
+    const loop = (currentTime) => {
+      try {
+        const elapsed = currentTime - lastFrameTime;
+        if (elapsed > frameInterval) {
+          const deltaTime = (currentTime - this.lastTime) / 1e3;
+          this.lastTime = currentTime;
+          this.totalTime += deltaTime;
+          lastFrameTime = currentTime - elapsed % frameInterval;
+          this.update(deltaTime);
+          this.draw(this.ctx);
+          if (callback) {
+            callback(deltaTime, this.totalTime);
+          }
+          this.inputManager.postUpdate();
+        }
+      } catch (error) {
+        console.error("Error in game loop:", error);
+      }
+      requestAnimationFrame(loop);
+    };
+    this.lastTime = performance.now();
+    requestAnimationFrame(loop);
+  }
+};
+function isUpdatable(obj) {
+  return "update" in obj;
+}
+function isDrawable(obj) {
+  return "draw" in obj;
+}
+
+// src/main.ts
+function getCanvas(id) {
+  const canvas = document.getElementById(id);
+  if (!canvas) {
+    throw new Error(`Canvas with id "${id}" not found`);
+  }
+  return canvas;
+}
+export {
+  Camera,
+  Circle,
+  Node,
+  Scene,
+  TWO_PI,
+  Vector2D,
+  getCanvas
+};

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@jiant/canvable",
+  "version": "0.0.1-fix",
+  "description": "A tool for building canvas apps",
+  "main": "./dist/main.js",
+  "module": "./dist/main.mjs",
+  "types": "./dist/main.d.ts",
+  "type": "commonjs",
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "dependencies": {
+    "uuid": "^11.0.3"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2",
+    "tsup": "^8.3.5"
+  },
+  "keywords": [
+    "canvas",
+    "graphics",
+    "drawing",
+    "visualization"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}