@snap-engine/asset-base-svelte 0.2.0

package/README.md

@@ -0,0 +1,23 @@
+# @snap-engine/asset-base-svelte
+
+Svelte wrappers for SnapEngine's shared foundational asset components.
+
+## Install
+
+```bash
+npm install @snap-engine/asset-base-svelte @snap-engine/asset-base @snap-engine/core
+```
+
+## Includes
+
+- `Engine`
+- `Camera`
+- `Background`
+
+## Usage
+
+```svelte
+<script>
+  import { Engine, Camera, Background } from "@snap-engine/asset-base-svelte";
+</script>
+```

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@snap-engine/asset-base-svelte",
+  "version": "0.2.0",
+  "type": "module",
+  "svelte": "./src/index.ts",
+  "exports": {
+    ".": {
+      "svelte": "./src/index.ts"
+    },
+    "./Engine.svelte": "./src/Engine.svelte",
+    "./Background.svelte": "./src/Background.svelte",
+    "./Camera.svelte": "./src/Camera.svelte",
+    "./engine": "./src/engineState.svelte.ts"
+  },
+  "dependencies": {
+    "@snap-engine/asset-base": "^0.2.0"
+  },
+  "description": "Svelte wrappers for SnapEngine shared asset components",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "snapengine",
+    "svelte",
+    "ui",
+    "camera",
+    "background"
+  ],
+  "author": "Tomoki Fukazawa",
+  "license": "MIT",
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
+}

package/src/Background.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { onMount, setContext, getContext } from "svelte";
+    import { Background } from "@snap-engine/asset-base";
+    import type { Engine } from "@snap-engine/core";
+    let background: HTMLDivElement | null = null;
+
+    const engine:Engine = getContext("engine");
+    let bg = new Background(engine, null);
+
+    setContext("bg", bg);
+
+    onMount(() => {
+        bg.element = background as HTMLElement;
+    });
+</script>
+
+
+<div id="sl-background" bind:this={background}></div>
+
+
+<style lang="scss">
+    #sl-background {
+        background-color: #fff;
+        background-image: radial-gradient(circle, #cccccc 2px, transparent 1px);
+        user-select: none;
+    }
+</style>

package/src/Camera.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { onMount, getContext, setContext } from "svelte";
+  import { CameraControl as CameraControlObject } from "@snap-engine/asset-base";
+  import type { Engine } from "@snap-engine/core";
+
+  let {
+    children,
+    zoomLock,
+    panLock,
+    cameraControl = $bindable<CameraControlObject | null>(null),
+  }: {
+    children: any;
+    zoomLock?: boolean;
+    panLock?: boolean;
+    cameraControl?: CameraControlObject | null;
+  } = $props();
+
+  let cameraControlElement: HTMLDivElement | null = null;
+  const engine: Engine = getContext("engine");
+  const cameraControlInstance = new CameraControlObject(engine, {
+    zoomLock: zoomLock ?? false,
+    panLock: panLock ?? false,
+  });
+
+  cameraControl = cameraControlInstance;
+  setContext("cameraControl", cameraControlInstance);
+
+  onMount(() => {
+    cameraControlInstance.element = cameraControlElement as HTMLElement;
+  });
+</script>
+
+<div id="snap-camera-control" bind:this={cameraControlElement}>
+  {@render children()}
+</div>
+
+<style lang="scss">
+  #snap-camera-control {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    user-select: none;
+  }
+</style>

package/src/Engine.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { setContext } from "svelte";
+  import { getEngine } from "./engineState.svelte";
+  import type { Engine } from "@snap-engine/core";
+  import { DebugRenderer } from "@snap-engine/core/debug";
+  import { CollisionEngine } from "@snap-engine/core/collision";
+
+  let {
+    id,
+    children,
+    engine = $bindable<Engine | null>(null),
+    debug = false,
+  }: {
+    id: string;
+    style?: Record<string, string>;
+    children: any;
+    engine?: Engine | null;
+    debug?: boolean;
+  } = $props();
+  let canvas: HTMLDivElement | null = null;
+  let mounted = $state(false);
+  let pendingDebugEnable = $state(false);
+
+  const resolvedEngine = (engine ?? getEngine(id)) as Engine;
+  engine = resolvedEngine;
+  setContext("engine", resolvedEngine);
+
+  resolvedEngine.setCollisionEngine(new CollisionEngine());
+
+  onMount(() => {
+    resolvedEngine.assignDom(canvas as HTMLElement);
+    resolvedEngine.camera?.setCameraPosition(0, 0);
+    mounted = true;
+
+    // Apply any debug state that was requested before mount
+    if (pendingDebugEnable) {
+      resolvedEngine.setDebugRenderer(new DebugRenderer());
+      pendingDebugEnable = false;
+    }
+  });
+
+  $effect(() => {
+    if (debug) {
+      if (mounted) {
+        resolvedEngine.setDebugRenderer(new DebugRenderer());
+      } else {
+        pendingDebugEnable = true;
+      }
+    } else {
+      resolvedEngine.disableDebug();
+      pendingDebugEnable = false;
+    }
+  });
+
+  export function enableDebug() {
+    if (mounted) {
+      resolvedEngine.setDebugRenderer(new DebugRenderer());
+    } else {
+      pendingDebugEnable = true;
+    }
+  }
+
+  export function disableDebug() {
+    resolvedEngine.disableDebug();
+    pendingDebugEnable = false;
+  }
+</script>
+
+<div
+  id="snap-canvas"
+  bind:this={canvas}
+  style="height: 100%; overflow: hidden; position: relative;"
+>
+  {@render children()}
+</div>
+
+<style lang="scss">
+</style>

package/src/engineState.svelte.ts

@@ -0,0 +1,16 @@
+import { ElementObject, Engine } from "@snap-engine/core";
+import type { Component } from "svelte";
+let engineDict: { [key: string]: Engine } = {};
+
+export function getEngine(id: string) {
+  if (!engineDict[id]) {
+    engineDict[id] = new Engine();
+  }
+  return engineDict[id];
+}
+
+export interface ObjectData {
+  svelteComponent: Component;
+  object: ElementObject;
+  prop?: { [key: string]: any };
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { default as Engine } from "./Engine.svelte";
+export { default as Background } from "./Background.svelte";
+export { default as Camera } from "./Camera.svelte";
+export { getEngine, type ObjectData } from "./engineState.svelte";