@grida/canvas-wasm 0.0.1 → 0.0.3

package/README.md

@@ -12,23 +12,16 @@ pnpm install @grida/canvas-wasm
 import init from "@grida/canvas-wasm";
 
 const factory = await init({
-  // locate the wasm binary file
+  // locate the wasm binary file (location may vary by version)
+  // e.g. this will resolve to https://unpkg.com/@grida/canvas-wasm@0.0.2/dist/grida_canvas_wasm.wasm
   locateFile: (path) =>
-    `https://unpkg.com/@grida/canvas-wasm@<VERSION>/bin/${path}`,
+    `https://unpkg.com/@grida/canvas-wasm@<VERSION>/${path}`,
 });
 
 // your canvas element
-const canvas = document.querySelector("#canvas");
-const context = canvas.getContext("webgl2", {
-  antialias: true,
-  depth: true,
-  stencil: true,
-  alpha: true,
-});
-
-const scene = factory.createSurface(context, 100, 100);
+const canvas = document.getElementById("canvas") as HTMLCanvasElement;
+const scene = factory.createWebGLCanvasSurface(canvas);
 
 // ready to draw
-scene.createRectangleNode();
-scene.redraw();
+scene.loadDummyScene();
 ```

package/dist/index.d.mts

@@ -1,3 +1,91 @@
+declare function createGridaCanvas(moduleArg?: {
+  locateFile?: (path: string, scriptDirectory: string) => string;
+}): Promise<createGridaCanvas.GridaCanvasWasmBindings>;
+
+declare namespace createGridaCanvas {
+  interface GridaCanvasWasmBindings {
+    // ====================================================================================================
+    // EMSCRIPTEN EXPOSED METHODS
+    // ====================================================================================================
+    GL: {
+      registerContext(
+        context: WebGLRenderingContext,
+        options: { majorVersion: number }
+      ): number;
+      makeContextCurrent(handle: number): void;
+    };
+    stringToUTF8(str: string, outPtr: number, maxBytesToWrite: number): void;
+    lengthBytesUTF8(str: string): number;
+    ___wbindgen_malloc(a0: number, a1: number): number;
+    ___wbindgen_free(a0: number, a1: number, a2: number): void;
+    ___wbindgen_realloc(a0: number, a1: number, a2: number, a3: number): number;
+
+    // core memory wrapper
+    _allocate(len: number): number;
+    _deallocate(ptr: number, len: number): void;
+
+    // ====================================================================================================
+    // INITIALIZATION
+    // ====================================================================================================
+    _init(width: number, height: number): GridaCanvasWebGlApplicationPtr;
+
+    // ====================================================================================================
+    // APPLICATION METHODS
+    // ====================================================================================================
+    _tick(state: GridaCanvasWebGlApplicationPtr): void;
+    _resize_surface(
+      state: GridaCanvasWebGlApplicationPtr,
+      width: number,
+      height: number
+    ): void;
+    _redraw(state: GridaCanvasWebGlApplicationPtr): void;
+    _load_scene_json(
+      state: GridaCanvasWebGlApplicationPtr,
+      ptr: number,
+      len: number
+    ): void;
+    _load_dummy_scene(state: GridaCanvasWebGlApplicationPtr): void;
+    _load_benchmark_scene(
+      state: GridaCanvasWebGlApplicationPtr,
+      cols: number,
+      rows: number
+    ): void;
+    _pointer_move(
+      state: GridaCanvasWebGlApplicationPtr,
+      x: number,
+      y: number
+    ): void;
+    _command(
+      state: GridaCanvasWebGlApplicationPtr,
+      id: number,
+      a: number,
+      b: number
+    ): void;
+    _devtools_rendering_set_show_tiles(
+      state: GridaCanvasWebGlApplicationPtr,
+      show: boolean
+    ): void;
+    _devtools_rendering_set_show_fps_meter(
+      state: GridaCanvasWebGlApplicationPtr,
+      show: boolean
+    ): void;
+    _devtools_rendering_set_show_stats(
+      state: GridaCanvasWebGlApplicationPtr,
+      show: boolean
+    ): void;
+    _devtools_rendering_set_show_hit_testing(
+      state: GridaCanvasWebGlApplicationPtr,
+      show: boolean
+    ): void;
+    _devtools_rendering_set_show_ruler(
+      state: GridaCanvasWebGlApplicationPtr,
+      show: boolean
+    ): void;
+  }
+}
+
+type GridaCanvasWebGlApplicationPtr = number;
+
 interface GridaCanvasInitOptions {
   /**
    * This callback will be invoked when the loader needs to fetch a file (e.g.
@@ -16,17 +104,69 @@ interface GridaCanvasInitOptions {
 declare function init(opts?: GridaCanvasInitOptions): Promise<ApplicationFactory>;
 declare class ApplicationFactory {
     private readonly module;
-    constructor(module: GridaCanvasWasmBindings);
-    createSurface(width: number, height: number): Grida2D;
+    constructor(module: createGridaCanvas.GridaCanvasWasmBindings);
+    createWebGLCanvasSurface(canvas: HTMLCanvasElement): Grida2D;
 }
 declare class Grida2D {
     private ptr;
     private module;
-    constructor(module: GridaCanvasWasmBindings, ptr: GridaCanvasWebGlApplicationPtr);
+    constructor(module: createGridaCanvas.GridaCanvasWasmBindings, ptr: number);
+    _alloc_string(txt: string): [number, number];
+    _free_string(ptr: number, len: number): void;
+    /**
+     * Load a scene from a JSON string.
+     * @param data - The JSON string to load.
+     */
+    loadScene(data: string): void;
+    /**
+     * @deprecated - test use only
+     */
+    loadDummyScene(): void;
+    /**
+     * @deprecated - test use only
+     */
+    loadBenchmarkScene(cols: number, rows: number): void;
+    /**
+     * Tick the application clock.
+     * bind this to requestAnimationFrame loop or similar
+     */
     tick(): void;
+    /**
+     * Resize the surface.
+     * @param width - The width of the surface.
+     * @param height - The height of the surface.
+     */
     resize(width: number, height: number): void;
     redraw(): void;
     execCommand(command: "ZoomIn" | "ZoomOut"): void;
+    execCommandPan(tx: number, ty: number): void;
+    execCommandZoomDelta(tz: number): void;
+    pointermove(x: number, y: number): void;
+    /**
+     * Set the visibility of the tiles.
+     * @param show - The visibility of the tiles.
+     */
+    devtools_rendering_set_show_tiles(show: boolean): void;
+    /**
+     * Set the visibility of the FPS meter.
+     * @param show - The visibility of the FPS meter.
+     */
+    devtools_rendering_set_show_fps_meter(show: boolean): void;
+    /**
+     * Set the visibility of the stats.
+     * @param show - The visibility of the stats.
+     */
+    devtools_rendering_set_show_stats(show: boolean): void;
+    /**
+     * Set the visibility of the hit testing.
+     * @param show - The visibility of the hit testing.
+     */
+    devtools_rendering_set_show_hit_testing(show: boolean): void;
+    /**
+     * Set the visibility of the ruler.
+     * @param show - The visibility of the ruler.
+     */
+    devtools_rendering_set_show_ruler(show: boolean): void;
 }
 
 export { init as default };

package/dist/index.d.ts

@@ -1,3 +1,91 @@
+declare function createGridaCanvas(moduleArg?: {
+  locateFile?: (path: string, scriptDirectory: string) => string;
+}): Promise<createGridaCanvas.GridaCanvasWasmBindings>;
+
+declare namespace createGridaCanvas {
+  interface GridaCanvasWasmBindings {
+    // ====================================================================================================
+    // EMSCRIPTEN EXPOSED METHODS
+    // ====================================================================================================
+    GL: {
+      registerContext(
+        context: WebGLRenderingContext,
+        options: { majorVersion: number }
+      ): number;
+      makeContextCurrent(handle: number): void;
+    };
+    stringToUTF8(str: string, outPtr: number, maxBytesToWrite: number): void;
+    lengthBytesUTF8(str: string): number;
+    ___wbindgen_malloc(a0: number, a1: number): number;
+    ___wbindgen_free(a0: number, a1: number, a2: number): void;
+    ___wbindgen_realloc(a0: number, a1: number, a2: number, a3: number): number;
+
+    // core memory wrapper
+    _allocate(len: number): number;
+    _deallocate(ptr: number, len: number): void;
+
+    // ====================================================================================================
+    // INITIALIZATION
+    // ====================================================================================================
+    _init(width: number, height: number): GridaCanvasWebGlApplicationPtr;
+
+    // ====================================================================================================
+    // APPLICATION METHODS
+    // ====================================================================================================
+    _tick(state: GridaCanvasWebGlApplicationPtr): void;
+    _resize_surface(
+      state: GridaCanvasWebGlApplicationPtr,
+      width: number,
+      height: number
+    ): void;
+    _redraw(state: GridaCanvasWebGlApplicationPtr): void;
+    _load_scene_json(
+      state: GridaCanvasWebGlApplicationPtr,
+      ptr: number,
+      len: number
+    ): void;
+    _load_dummy_scene(state: GridaCanvasWebGlApplicationPtr): void;
+    _load_benchmark_scene(
+      state: GridaCanvasWebGlApplicationPtr,
+      cols: number,
+      rows: number
+    ): void;
+    _pointer_move(
+      state: GridaCanvasWebGlApplicationPtr,
+      x: number,
+      y: number
+    ): void;
+    _command(
+      state: GridaCanvasWebGlApplicationPtr,
+      id: number,
+      a: number,
+      b: number
+    ): void;
+    _devtools_rendering_set_show_tiles(
+      state: GridaCanvasWebGlApplicationPtr,
+      show: boolean
+    ): void;
+    _devtools_rendering_set_show_fps_meter(
+      state: GridaCanvasWebGlApplicationPtr,
+      show: boolean
+    ): void;
+    _devtools_rendering_set_show_stats(
+      state: GridaCanvasWebGlApplicationPtr,
+      show: boolean
+    ): void;
+    _devtools_rendering_set_show_hit_testing(
+      state: GridaCanvasWebGlApplicationPtr,
+      show: boolean
+    ): void;
+    _devtools_rendering_set_show_ruler(
+      state: GridaCanvasWebGlApplicationPtr,
+      show: boolean
+    ): void;
+  }
+}
+
+type GridaCanvasWebGlApplicationPtr = number;
+
 interface GridaCanvasInitOptions {
   /**
    * This callback will be invoked when the loader needs to fetch a file (e.g.
@@ -16,17 +104,69 @@ interface GridaCanvasInitOptions {
 declare function init(opts?: GridaCanvasInitOptions): Promise<ApplicationFactory>;
 declare class ApplicationFactory {
     private readonly module;
-    constructor(module: GridaCanvasWasmBindings);
-    createSurface(width: number, height: number): Grida2D;
+    constructor(module: createGridaCanvas.GridaCanvasWasmBindings);
+    createWebGLCanvasSurface(canvas: HTMLCanvasElement): Grida2D;
 }
 declare class Grida2D {
     private ptr;
     private module;
-    constructor(module: GridaCanvasWasmBindings, ptr: GridaCanvasWebGlApplicationPtr);
+    constructor(module: createGridaCanvas.GridaCanvasWasmBindings, ptr: number);
+    _alloc_string(txt: string): [number, number];
+    _free_string(ptr: number, len: number): void;
+    /**
+     * Load a scene from a JSON string.
+     * @param data - The JSON string to load.
+     */
+    loadScene(data: string): void;
+    /**
+     * @deprecated - test use only
+     */
+    loadDummyScene(): void;
+    /**
+     * @deprecated - test use only
+     */
+    loadBenchmarkScene(cols: number, rows: number): void;
+    /**
+     * Tick the application clock.
+     * bind this to requestAnimationFrame loop or similar
+     */
     tick(): void;
+    /**
+     * Resize the surface.
+     * @param width - The width of the surface.
+     * @param height - The height of the surface.
+     */
     resize(width: number, height: number): void;
     redraw(): void;
     execCommand(command: "ZoomIn" | "ZoomOut"): void;
+    execCommandPan(tx: number, ty: number): void;
+    execCommandZoomDelta(tz: number): void;
+    pointermove(x: number, y: number): void;
+    /**
+     * Set the visibility of the tiles.
+     * @param show - The visibility of the tiles.
+     */
+    devtools_rendering_set_show_tiles(show: boolean): void;
+    /**
+     * Set the visibility of the FPS meter.
+     * @param show - The visibility of the FPS meter.
+     */
+    devtools_rendering_set_show_fps_meter(show: boolean): void;
+    /**
+     * Set the visibility of the stats.
+     * @param show - The visibility of the stats.
+     */
+    devtools_rendering_set_show_stats(show: boolean): void;
+    /**
+     * Set the visibility of the hit testing.
+     * @param show - The visibility of the hit testing.
+     */
+    devtools_rendering_set_show_hit_testing(show: boolean): void;
+    /**
+     * Set the visibility of the ruler.
+     * @param show - The visibility of the ruler.
+     */
+    devtools_rendering_set_show_ruler(show: boolean): void;
 }
 
 export { init as default };

package/dist/index.js

@@ -7384,20 +7384,35 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 var import_grida_canvas_wasm = __toESM(require_grida_canvas_wasm());
 async function init(opts) {
-  const bindings = await createGridaCanvas({ locateFile: opts == null ? void 0 : opts.locateFile });
-  return new ApplicationFactory(bindings);
+  const bindings = await (0, import_grida_canvas_wasm.default)({ locateFile: opts == null ? void 0 : opts.locateFile });
+  return new ApplicationFactory(
+    bindings
+  );
 }
 var ApplicationFactory = class {
   module;
   constructor(module2) {
     this.module = module2;
   }
-  createSurface(width, height) {
-    const ptr = this.module._init(width, height);
+  createWebGLCanvasSurface(canvas) {
+    const context = canvas.getContext("webgl2", {
+      antialias: true,
+      depth: true,
+      stencil: true,
+      alpha: true
+    });
+    if (!context) {
+      throw new Error("Failed to get WebGL2 context");
+    }
+    const handle = this.module.GL.registerContext(context, {
+      majorVersion: 2
+    });
+    this.module.GL.makeContextCurrent(handle);
+    const ptr = this.module._init(canvas.width, canvas.height);
     return new Grida2D(this.module, ptr);
   }
 };
-var ApplicationCommandKey = {
+var ApplicationCommandID = {
   ZoomIn: 1,
   ZoomOut: 2,
   ZoomDelta: 3,
@@ -7410,9 +7425,48 @@ var Grida2D = class {
     this.module = module2;
     this.ptr = ptr;
   }
+  _alloc_string(txt) {
+    const len = this.module.lengthBytesUTF8(txt) + 1;
+    const ptr = this.module._allocate(len);
+    this.module.stringToUTF8(txt, ptr, len);
+    return [ptr, len];
+  }
+  _free_string(ptr, len) {
+    this.module._deallocate(ptr, len);
+  }
+  /**
+   * Load a scene from a JSON string.
+   * @param data - The JSON string to load.
+   */
+  loadScene(data) {
+    const [ptr, len] = this._alloc_string(data);
+    this.module._load_scene_json(this.ptr, ptr, len - 1);
+    this._free_string(ptr, len);
+  }
+  /**
+   * @deprecated - test use only
+   */
+  loadDummyScene() {
+    this.module._load_dummy_scene(this.ptr);
+  }
+  /**
+   * @deprecated - test use only
+   */
+  loadBenchmarkScene(cols, rows) {
+    this.module._load_benchmark_scene(this.ptr, cols, rows);
+  }
+  /**
+   * Tick the application clock.
+   * bind this to requestAnimationFrame loop or similar
+   */
   tick() {
     this.module._tick(this.ptr);
   }
+  /**
+   * Resize the surface.
+   * @param width - The width of the surface.
+   * @param height - The height of the surface.
+   */
   resize(width, height) {
     this.module._resize_surface(this.ptr, width, height);
   }
@@ -7420,6 +7474,53 @@ var Grida2D = class {
     this.module._redraw(this.ptr);
   }
   execCommand(command) {
-    this.module._command(this.ptr, ApplicationCommandKey[command], 0, 0);
+    this.module._command(this.ptr, ApplicationCommandID[command], 0, 0);
+  }
+  execCommandPan(tx, ty) {
+    this.module._command(this.ptr, ApplicationCommandID.Pan, tx, ty);
+  }
+  execCommandZoomDelta(tz) {
+    this.module._command(this.ptr, ApplicationCommandID.ZoomDelta, tz, 0);
+  }
+  pointermove(x, y) {
+    this.module._pointer_move(this.ptr, x, y);
+  }
+  // ====================================================================================================
+  // DEVTOOLS
+  // ====================================================================================================
+  /**
+   * Set the visibility of the tiles.
+   * @param show - The visibility of the tiles.
+   */
+  devtools_rendering_set_show_tiles(show) {
+    this.module._devtools_rendering_set_show_tiles(this.ptr, show);
+  }
+  /**
+   * Set the visibility of the FPS meter.
+   * @param show - The visibility of the FPS meter.
+   */
+  devtools_rendering_set_show_fps_meter(show) {
+    this.module._devtools_rendering_set_show_fps_meter(this.ptr, show);
+  }
+  /**
+   * Set the visibility of the stats.
+   * @param show - The visibility of the stats.
+   */
+  devtools_rendering_set_show_stats(show) {
+    this.module._devtools_rendering_set_show_stats(this.ptr, show);
+  }
+  /**
+   * Set the visibility of the hit testing.
+   * @param show - The visibility of the hit testing.
+   */
+  devtools_rendering_set_show_hit_testing(show) {
+    this.module._devtools_rendering_set_show_hit_testing(this.ptr, show);
+  }
+  /**
+   * Set the visibility of the ruler.
+   * @param show - The visibility of the ruler.
+   */
+  devtools_rendering_set_show_ruler(show) {
+    this.module._devtools_rendering_set_show_ruler(this.ptr, show);
   }
 };

package/dist/index.mjs

@@ -7380,20 +7380,35 @@ var require_grida_canvas_wasm = __commonJS({
 // lib/index.ts
 var import_grida_canvas_wasm = __toESM(require_grida_canvas_wasm());
 async function init(opts) {
-  const bindings = await createGridaCanvas({ locateFile: opts == null ? void 0 : opts.locateFile });
-  return new ApplicationFactory(bindings);
+  const bindings = await (0, import_grida_canvas_wasm.default)({ locateFile: opts == null ? void 0 : opts.locateFile });
+  return new ApplicationFactory(
+    bindings
+  );
 }
 var ApplicationFactory = class {
   module;
   constructor(module) {
     this.module = module;
   }
-  createSurface(width, height) {
-    const ptr = this.module._init(width, height);
+  createWebGLCanvasSurface(canvas) {
+    const context = canvas.getContext("webgl2", {
+      antialias: true,
+      depth: true,
+      stencil: true,
+      alpha: true
+    });
+    if (!context) {
+      throw new Error("Failed to get WebGL2 context");
+    }
+    const handle = this.module.GL.registerContext(context, {
+      majorVersion: 2
+    });
+    this.module.GL.makeContextCurrent(handle);
+    const ptr = this.module._init(canvas.width, canvas.height);
     return new Grida2D(this.module, ptr);
   }
 };
-var ApplicationCommandKey = {
+var ApplicationCommandID = {
   ZoomIn: 1,
   ZoomOut: 2,
   ZoomDelta: 3,
@@ -7406,9 +7421,48 @@ var Grida2D = class {
     this.module = module;
     this.ptr = ptr;
   }
+  _alloc_string(txt) {
+    const len = this.module.lengthBytesUTF8(txt) + 1;
+    const ptr = this.module._allocate(len);
+    this.module.stringToUTF8(txt, ptr, len);
+    return [ptr, len];
+  }
+  _free_string(ptr, len) {
+    this.module._deallocate(ptr, len);
+  }
+  /**
+   * Load a scene from a JSON string.
+   * @param data - The JSON string to load.
+   */
+  loadScene(data) {
+    const [ptr, len] = this._alloc_string(data);
+    this.module._load_scene_json(this.ptr, ptr, len - 1);
+    this._free_string(ptr, len);
+  }
+  /**
+   * @deprecated - test use only
+   */
+  loadDummyScene() {
+    this.module._load_dummy_scene(this.ptr);
+  }
+  /**
+   * @deprecated - test use only
+   */
+  loadBenchmarkScene(cols, rows) {
+    this.module._load_benchmark_scene(this.ptr, cols, rows);
+  }
+  /**
+   * Tick the application clock.
+   * bind this to requestAnimationFrame loop or similar
+   */
   tick() {
     this.module._tick(this.ptr);
   }
+  /**
+   * Resize the surface.
+   * @param width - The width of the surface.
+   * @param height - The height of the surface.
+   */
   resize(width, height) {
     this.module._resize_surface(this.ptr, width, height);
   }
@@ -7416,7 +7470,54 @@ var Grida2D = class {
     this.module._redraw(this.ptr);
   }
   execCommand(command) {
-    this.module._command(this.ptr, ApplicationCommandKey[command], 0, 0);
+    this.module._command(this.ptr, ApplicationCommandID[command], 0, 0);
+  }
+  execCommandPan(tx, ty) {
+    this.module._command(this.ptr, ApplicationCommandID.Pan, tx, ty);
+  }
+  execCommandZoomDelta(tz) {
+    this.module._command(this.ptr, ApplicationCommandID.ZoomDelta, tz, 0);
+  }
+  pointermove(x, y) {
+    this.module._pointer_move(this.ptr, x, y);
+  }
+  // ====================================================================================================
+  // DEVTOOLS
+  // ====================================================================================================
+  /**
+   * Set the visibility of the tiles.
+   * @param show - The visibility of the tiles.
+   */
+  devtools_rendering_set_show_tiles(show) {
+    this.module._devtools_rendering_set_show_tiles(this.ptr, show);
+  }
+  /**
+   * Set the visibility of the FPS meter.
+   * @param show - The visibility of the FPS meter.
+   */
+  devtools_rendering_set_show_fps_meter(show) {
+    this.module._devtools_rendering_set_show_fps_meter(this.ptr, show);
+  }
+  /**
+   * Set the visibility of the stats.
+   * @param show - The visibility of the stats.
+   */
+  devtools_rendering_set_show_stats(show) {
+    this.module._devtools_rendering_set_show_stats(this.ptr, show);
+  }
+  /**
+   * Set the visibility of the hit testing.
+   * @param show - The visibility of the hit testing.
+   */
+  devtools_rendering_set_show_hit_testing(show) {
+    this.module._devtools_rendering_set_show_hit_testing(this.ptr, show);
+  }
+  /**
+   * Set the visibility of the ruler.
+   * @param show - The visibility of the ruler.
+   */
+  devtools_rendering_set_show_ruler(show) {
+    this.module._devtools_rendering_set_show_ruler(this.ptr, show);
   }
 };
 export {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@grida/canvas-wasm",
   "description": "WASM bindings for Grida Canvas",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "keywords": [
     "grida",
     "canvas",