@hayro_o7/labyrinth 0.0.1 → 0.0.2

package/README.md

@@ -60,7 +60,11 @@ npm install labyrinth
   autoPlay={false}
   showGrid={true}
   colors={customColors}
+  onControls={(controls) => (labyrinthControls = controls)}
 />
+
+<button on:click={() => labyrinthControls?.play()}>Play</button>
+<button on:click={() => labyrinthControls?.pause()}>Pause</button>
 ```
 
 ## API Reference
@@ -91,6 +95,7 @@ Generates a perfect maze (exactly one path between any two points) using the Rec
 | `legend` | `boolean` | `true` | Toggle the legend panel |
 | `stepCount` | `boolean` | `true` | Toggle the step counter |
 | `colors` | `ColorScheme` | default theme | Custom color scheme (see below) |
+| `onControls` | `(controls: LabyrinthControls) => void` | `undefined` | Receive imperative control methods |
 
 ### Algorithms
 
@@ -147,6 +152,30 @@ const customColors: ColorScheme = {
 
 All color properties are optional - only specify the ones you want to override.
 
+### Imperative Controls
+
+You can access imperative controls (play/pause/reset/step) by providing `onControls`:
+
+```svelte
+<script lang="ts">
+  import { Labyrinth, generateLabyrinth } from '@hayro_o7/labyrinth';
+  import type { LabyrinthControls } from '@hayro_o7/labyrinth';
+
+  const graph = generateLabyrinth(20, 20);
+  let controls: LabyrinthControls | null = null;
+</script>
+
+<Labyrinth {graph} onControls={(c) => (controls = c)} />
+
+<div class="external-controls">
+  <button on:click={() => controls?.play()}>Play</button>
+  <button on:click={() => controls?.pause()}>Pause</button>
+  <button on:click={() => controls?.reset()}>Reset</button>
+  <button on:click={() => controls?.stepBackward()}>Step Back</button>
+  <button on:click={() => controls?.stepForward()}>Step Forward</button>
+</div>
+```
+
 ### Types
 
 ```typescript
@@ -194,6 +223,14 @@ interface ColorScheme {
   buttonsdisabled?: string;
   buttonstext?: string;
 }
+
+interface LabyrinthControls {
+  play: () => void;
+  pause: () => void;
+  reset: () => void;
+  stepForward: () => void;
+  stepBackward: () => void;
+}
 ```
 
 ## Development

package/dist/components/Labyrinth.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Graph, AlgorithmType, PathStep } from '../types';
+	import type { Graph, AlgorithmType, PathStep, LabyrinthControls } from '../types';
 	import { dijkstra } from '../algorithms/dijkstra';
 	import { astar } from '../algorithms/astar';
 
@@ -18,6 +18,7 @@
 		animationSpeed?: number;
 		showGrid?: boolean;
 		colors?: ColorScheme;
+		onControls?: (controls: LabyrinthControls) => void;
 	}
 
 	let {
@@ -32,9 +33,9 @@
 		stepCount = true,
 		animationSpeed = 50,
 		showGrid = true,
-		colors
+		colors,
+		onControls
 	}: Props = $props();
-
 	const defaultColors: Required<ColorScheme> = {
 		start: '#22c55e',
 		end: '#ef4444',
@@ -182,6 +183,18 @@
 
 	const width = $derived(graph.width * cellSize);
 	const height = $derived(graph.height * cellSize);
+
+	const controlApi: LabyrinthControls = {
+		play,
+		pause,
+		reset,
+		stepForward,
+		stepBackward
+	};
+
+	$effect(() => {
+		onControls?.(controlApi);
+	});
 </script>
 
 <div class="labyrinth-container" style={cssVars}>

package/dist/components/Labyrinth.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Graph, AlgorithmType } from '../types';
+import type { Graph, AlgorithmType, LabyrinthControls } from '../types';
 import type { ColorScheme } from '../types';
 interface Props {
     graph: Graph;
@@ -13,6 +13,7 @@ interface Props {
     animationSpeed?: number;
     showGrid?: boolean;
     colors?: ColorScheme;
+    onControls?: (controls: LabyrinthControls) => void;
 }
 declare const Labyrinth: import("svelte").Component<Props, {}, "">;
 type Labyrinth = ReturnType<typeof Labyrinth>;

package/dist/index.d.ts

@@ -2,4 +2,4 @@ export { generateLabyrinth } from './labyrinth-generator';
 export { dijkstra } from './algorithms/dijkstra';
 export { astar } from './algorithms/astar';
 export { default as Labyrinth } from './components/Labyrinth.svelte';
-export type { Graph, GraphNode, Point, Cell, PathStep, AlgorithmResult, AlgorithmType, ColorScheme } from './types';
+export type { Graph, GraphNode, Point, Cell, PathStep, AlgorithmResult, AlgorithmType, ColorScheme, LabyrinthControls } from './types';

package/dist/types.d.ts

@@ -54,3 +54,10 @@ export interface ColorScheme {
     buttonsdisabled?: string;
     buttonstext?: string;
 }
+export interface LabyrinthControls {
+    play: () => void;
+    pause: () => void;
+    reset: () => void;
+    stepForward: () => void;
+    stepBackward: () => void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hayro_o7/labyrinth",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",