@nayan-ui/engine 0.0.0-stage → 1.0.0-beta.3

package/lib/module/drawing/DrawingDocument.js

@@ -0,0 +1,256 @@
+"use strict";
+
+import NativeEngine from '../native/NativeNayanEngine';
+
+/** Native document settings; React may display this snapshot but never owns the tool state. */
+
+/** A committed stroke's geometry in document coordinates, for colliders, tracing and scoring. */
+
+/** The composited ink under a document point (straight alpha; transparent paper is alpha 0). */
+
+/**
+ * A native art document. Touches and live rendering never subscribe to React state.
+ *
+ * Games use the same document without `DrawingCanvas`: bind `texture()` to any entity, feed
+ * `input(..., 'document')` from the game's own touches or world hits, and read `strokes()`,
+ * `sample()` and `coverage()` for colliders and scoring. Create one document per game screen and
+ * `clear()` it on replay; `dispose()` it on unmount (this also frees its texture).
+ */
+export class DrawingDocument {
+  disposed = false;
+  boundTexture = null;
+  constructor(width, height, pixelRatio = 2) {
+    if (!NativeEngine || typeof NativeEngine.drawingCreate !== 'function') {
+      throw new Error('Drawing requires a native app rebuild with the updated Nayan engine.');
+    }
+    NativeEngine.renderWarmUp?.();
+    const id = NativeEngine.drawingCreate(width, height, pixelRatio);
+    if (id < 0) throw new Error('Unable to create drawing: invalid dimensions or memory limit.');
+    this.id = id;
+    this.width = width;
+    this.height = height;
+  }
+  get isDisposed() {
+    return this.disposed;
+  }
+  call(command) {
+    if (this.disposed) throw new Error('Drawing document has been disposed');
+    const result = JSON.parse(NativeEngine.drawingCommand(this.id, JSON.stringify(command)));
+    if (!result.ok) throw new Error(result.error || 'Drawing operation failed');
+    return result.value;
+  }
+  setBrush(options) {
+    return this.call({
+      op: 'brush',
+      ...options
+    });
+  }
+  updateControls(options) {
+    return this.call({
+      op: 'controls',
+      ...options
+    });
+  }
+  /** Atomic import: errors leave the current artwork intact, including unknown legacy metadata. */
+  load(paths) {
+    return this.call({
+      op: 'load',
+      paths
+    });
+  }
+  get state() {
+    return this.call({
+      op: 'state'
+    });
+  }
+  exportPaths() {
+    return JSON.stringify(this.call({
+      op: 'paths'
+    }));
+  }
+  /** Rust checks idleness and revision atomically; autosave never finishes a live stroke. */
+  setEditingEnabled(enabled) {
+    return this.call({
+      op: 'editing',
+      enabled
+    });
+  }
+  captureDraft(afterRevision = -1) {
+    return this.call({
+      op: 'draft',
+      afterRevision
+    });
+  }
+  /** Browser change stream. Native canvases deliver changes directly from their display clock. */
+  readChange() {
+    return this.call({
+      op: 'event'
+    });
+  }
+  exportSVG() {
+    return this.call({
+      op: 'svg'
+    });
+  }
+  /** Full editable project: preserves layer order, visibility, locks and original SVG metadata. */
+  exportProject() {
+    return JSON.stringify(this.call({
+      op: 'project'
+    }));
+  }
+  layer(action, options = {}) {
+    return this.call({
+      op: 'layer',
+      action,
+      ...options
+    });
+  }
+  fill(x, y, tolerance = 0.08) {
+    return this.call({
+      op: 'fill',
+      x,
+      y,
+      tolerance
+    });
+  }
+  shapeCatalog() {
+    return this.call({
+      op: 'shapes'
+    });
+  }
+  addShape(kind, x, y, endX, endY, filled = false) {
+    return this.call({
+      op: 'shape',
+      kind,
+      x,
+      y,
+      endX,
+      endY,
+      filled
+    });
+  }
+  snapshot() {
+    return this.call({
+      op: 'png'
+    });
+  }
+  undo() {
+    return this.call({
+      op: 'undo'
+    });
+  }
+  redo() {
+    return this.call({
+      op: 'redo'
+    });
+  }
+  clear() {
+    return this.call({
+      op: 'clear'
+    });
+  }
+  invalidateView() {
+    return this.call({
+      op: 'invalidateView'
+    });
+  }
+  resetView() {
+    return this.call({
+      op: 'resetView'
+    });
+  }
+  /** Fit the full artwork or fill the viewport width without changing saved dimensions. */
+  setViewFit(fit) {
+    return this.call({
+      op: 'viewFit',
+      fit
+    });
+  }
+  finish() {
+    return this.call({
+      op: 'finish'
+    });
+  }
+  cancel() {
+    return this.call({
+      op: 'cancel'
+    });
+  }
+  /**
+   * Feeds one pointer sample: 0 begin, 1 move, 2 end, 3 cancel. `view` coordinates are relative to
+   * a `DrawingCanvas` and follow its zoom/pan (browser pointer sampling; native canvases feed
+   * touches straight into the Rust core). `document` coordinates skip the view mapping, for games
+   * that convert their own touches or world hits (e.g. a raycast's texture UV × document size).
+   */
+  input(phase, x, y, pressure = 1, space = 'view') {
+    this.call({
+      op: 'touch',
+      phase,
+      x,
+      y,
+      pressure,
+      space
+    });
+  }
+  /**
+   * A live texture of the artwork (transparent paper, straight alpha), usable as any entity's
+   * `texture`. In-progress strokes appear immediately; only changed rows are uploaded each frame.
+   * Created once per document and freed by `dispose()`. Its pixels are not readable through
+   * texture APIs; use `sample()`, `coverage()` or `snapshot()`.
+   */
+  texture() {
+    if (!this.boundTexture) this.boundTexture = Object.freeze(this.call({
+      op: 'texture'
+    }));
+    return this.boundTexture;
+  }
+  /** Committed strokes from index `from`, flattened to `tolerance` document units (default 0.5). */
+  strokes(options = {}) {
+    return this.call({
+      op: 'strokes',
+      ...options
+    });
+  }
+  /** The ink under a document point, or null off the paper. Includes an in-progress stroke. */
+  sample(x, y) {
+    return this.call({
+      op: 'sample',
+      x,
+      y
+    });
+  }
+  /** Fraction (0..1) of a document rectangle covered by ink, for colouring and scratch-off scoring. */
+  coverage(options = {}) {
+    return this.call({
+      op: 'coverage',
+      ...options
+    });
+  }
+  transform(dx, dy, scale = 1) {
+    return this.call({
+      op: 'transform',
+      dx,
+      dy,
+      scale
+    });
+  }
+  /** Browser presentation; iOS and Android use native display clocks with automatic suspension. */
+  present(width, height, background = '#ffffff', pixelRatio = 1) {
+    return this.call({
+      op: 'render',
+      surface: this.id,
+      width,
+      height,
+      background,
+      pixelWidth: Math.round(width * pixelRatio),
+      pixelHeight: Math.round(height * pixelRatio)
+    });
+  }
+  dispose() {
+    if (this.disposed) return;
+    NativeEngine.drawingDestroy(this.id);
+    this.disposed = true;
+    this.boundTexture = null;
+  }
+}
+//# sourceMappingURL=DrawingDocument.js.map

package/lib/module/drawing/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/globals.d.ts

@@ -0,0 +1,12 @@
+// Hermes provides performance.now(); React Native's typings do not declare it.
+declare const performance: { now(): number };
+
+// Generated by the WASM build; allows checking source before the generated files exist.
+declare module '*build/web/engine_core.js' {
+  export default function init(): Promise<import('./native/BrowserEngine').WasmCore>;
+  export function attach_canvas(id: number, canvas: HTMLCanvasElement): Promise<void>;
+  export function install_asset_storage(driver: unknown): void;
+  export function can_warm_asset_record(bytes: number): boolean;
+  export function restore_asset_record(name: string, bytes: Uint8Array): boolean;
+  export function read_saved_asset(key: string): Promise<Uint8Array>;
+}

package/lib/module/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+// Public API of @nayan-ui/engine.
+
+// World: entities, physics, collisions, animation, particles, picking.
+export { World, isEngineAvailable } from "./world/World.js";
+export { quat } from "./world/quat.js";
+export { effects } from "./world/effects.js";
+export { Scoreboard } from "./world/Scoreboard.js";
+// Rendering and touch.
+export { GameView } from "./render/GameView.js";
+export { warmUpEngine, getMeshIdLimit } from "./render/meshes.js";
+
+// Models, custom shapes, textures and fonts.
+
+export { loadModel } from "./assets/model.js";
+export { clearAssetCache } from "./assets/AssetCache.js";
+export { ProceduralCache } from "./assets/ProceduralCache.js";
+export { loadTexture } from "./assets/texture.js";
+export { Solid, solidGeometry, createSolid, optimizeGeometry, createGeometryLods, getGeometryStats, deformGeometry } from "./assets/modelling.js";
+export { loft, block, ellipsoid, smoothCurve } from "./assets/loft.js";
+export { parametricSurface } from "./assets/surface.js";
+export { createShape, extrude, lathe, merge, Path, recolor, shapeGeometry, smoothNormals, tube } from "./assets/shape.js";
+export { loadFont, measureText } from "./assets/font.js";
+// Sound and haptics.
+export { audio } from "./media/audio.js";
+export { haptics } from "./media/haptics.js";
+// Input.
+export { Joystick, useJoystick } from './input/Joystick';
+export { createKeyboardInput } from "./input/keyboard.js";
+// Shared types.
+export { MAX_MESHES } from "./types.js";
+// Native 2D drawing, SVG compatibility and transparent PNG snapshots; documents also texture game entities.
+export { DrawingDocument } from "./drawing/DrawingDocument.js";
+export { DrawingCanvas } from './drawing/DrawingCanvas';
+//# sourceMappingURL=index.js.map

package/lib/module/input/Joystick.js

@@ -0,0 +1,84 @@
+"use strict";
+
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Animated, PanResponder, StyleSheet, View } from 'react-native';
+
+/** Written by `<Joystick>` on touch; read it from your game loop. Each axis is in -1..1, y is up. */
+import { jsx as _jsx } from "react/jsx-runtime";
+/** A joystick state that lives as long as the component: `const stick = useJoystick()`. */
+export function useJoystick() {
+  return useRef({
+    x: 0,
+    y: 0
+  }).current;
+}
+/**
+ * A relative touch stick: wherever the finger lands inside the pad is the center.
+ * Updates `state` synchronously on the JS thread, so there is no React re-render per touch.
+ */
+export function Joystick({
+  state,
+  size = 150,
+  style
+}) {
+  const knob = useRef(new Animated.ValueXY()).current;
+  const knobSize = size * 0.4;
+  const reach = (size - knobSize) / 2;
+  const reset = useCallback(() => {
+    state.x = 0;
+    state.y = 0;
+    knob.setValue({
+      x: 0,
+      y: 0
+    });
+  }, [state, knob]);
+  useEffect(() => reset, [reset]);
+  const pan = useMemo(() => PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onPanResponderMove: (_, g) => {
+      const d = Math.hypot(g.dx, g.dy);
+      const k = d > reach ? reach / d : 1;
+      const dx = g.dx * k;
+      const dy = g.dy * k;
+      state.x = dx / reach;
+      state.y = -dy / reach;
+      knob.setValue({
+        x: dx,
+        y: dy
+      });
+    },
+    onPanResponderRelease: reset,
+    onPanResponderTerminate: reset
+  }), [state, knob, reach, reset]);
+  return /*#__PURE__*/_jsx(View, {
+    ...pan.panHandlers,
+    style: [styles.base, {
+      width: size,
+      height: size,
+      borderRadius: size / 2
+    }, style],
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.knob, {
+        width: knobSize,
+        height: knobSize,
+        borderRadius: knobSize / 2
+      }, {
+        transform: knob.getTranslateTransform()
+      }]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  base: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255,255,255,0.08)',
+    borderWidth: 2,
+    borderColor: 'rgba(255,255,255,0.25)'
+  },
+  knob: {
+    backgroundColor: 'rgba(255,255,255,0.55)'
+  }
+});
+//# sourceMappingURL=Joystick.js.map

package/lib/module/input/Joystick.web.js

@@ -0,0 +1,93 @@
+"use strict";
+
+import { useCallback, useEffect, useRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function useJoystick() {
+  return useRef({
+    x: 0,
+    y: 0
+  }).current;
+}
+export function Joystick({
+  state,
+  size = 150,
+  style
+}) {
+  const knob = useRef(null);
+  const pointer = useRef(null);
+  const origin = useRef({
+    x: 0,
+    y: 0
+  });
+  const reach = size * 0.3;
+  const reset = useCallback(() => {
+    pointer.current = null;
+    state.x = state.y = 0;
+    if (knob.current) knob.current.style.transform = 'translate(0px, 0px)';
+  }, [state]);
+  useEffect(() => {
+    const visibility = () => {
+      if (document.hidden) reset();
+    };
+    window.addEventListener('blur', reset);
+    document.addEventListener('visibilitychange', visibility);
+    return () => {
+      reset();
+      window.removeEventListener('blur', reset);
+      document.removeEventListener('visibilitychange', visibility);
+    };
+  }, [reset]);
+  const move = e => {
+    if (e.pointerId !== pointer.current) return;
+    const x = e.clientX - origin.current.x,
+      y = e.clientY - origin.current.y;
+    const scale = Math.min(1, reach / Math.max(1, Math.hypot(x, y)));
+    state.x = x * scale / reach;
+    state.y = -y * scale / reach;
+    knob.current.style.transform = `translate(${x * scale}px, ${y * scale}px)`;
+  };
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      boxSizing: 'border-box',
+      background: 'rgba(255,255,255,0.08)',
+      border: '2px solid rgba(255,255,255,0.25)',
+      touchAction: 'none',
+      ...style
+    },
+    onPointerDown: e => {
+      if (pointer.current !== null || e.button !== 0) return;
+      e.preventDefault();
+      pointer.current = e.pointerId;
+      origin.current = {
+        x: e.clientX,
+        y: e.clientY
+      };
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    onPointerMove: move,
+    onPointerUp: e => {
+      if (e.pointerId === pointer.current) reset();
+    },
+    onPointerCancel: reset,
+    onLostPointerCapture: e => {
+      if (e.pointerId === pointer.current) reset();
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      ref: knob,
+      style: {
+        pointerEvents: 'none',
+        width: size * 0.4,
+        height: size * 0.4,
+        borderRadius: '50%',
+        background: 'rgba(255,255,255,0.55)'
+      }
+    })
+  });
+}
+//# sourceMappingURL=Joystick.web.js.map