@hayro_o7/labyrinth 0.0.1 → 0.0.3

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';
 
@@ -13,11 +13,13 @@
 		startNode?: string;
 		endNode?: string;
 		autoPlay?: boolean;
+		buttons?: boolean;
 		legend?: boolean;
 		stepCount?: boolean;
 		animationSpeed?: number;
 		showGrid?: boolean;
 		colors?: ColorScheme;
+		onControls?: (controls: LabyrinthControls) => void;
 	}
 
 	let {
@@ -28,13 +30,14 @@
 		startNode = '0,0',
 		endNode,
 		autoPlay = false,
+		buttons = true,
 		legend = true,
 		stepCount = true,
 		animationSpeed = 50,
 		showGrid = true,
-		colors
+		colors,
+		onControls
 	}: Props = $props();
-
 	const defaultColors: Required<ColorScheme> = {
 		start: '#22c55e',
 		end: '#ef4444',
@@ -182,6 +185,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}>
@@ -254,11 +269,13 @@
 	</svg>
 
 	<div class="controls">
-		<button onclick={play} disabled={isPlaying}>Play</button>
-		<button onclick={pause} disabled={!isPlaying}>Pause</button>
-		<button onclick={reset}>Reset</button>
-		<button onclick={stepBackward} disabled={isPlaying || currentStepIndex === 0}>Step Back</button>
-		<button onclick={stepForward} disabled={isPlaying || currentStepIndex === steps.length}>Step Forward</button>
+		{#if buttons}
+			<button onclick={play} disabled={isPlaying}>Play</button>
+			<button onclick={pause} disabled={!isPlaying}>Pause</button>
+			<button onclick={reset}>Reset</button>
+			<button onclick={stepBackward} disabled={isPlaying || currentStepIndex === 0}>Step Back</button>
+			<button onclick={stepForward} disabled={isPlaying || currentStepIndex === steps.length}>Step Forward</button>
+		{/if}
 		{#if stepCount}
 			<span class="step-counter">
 				Step: {currentStepIndex} / {steps.length}

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;
@@ -8,11 +8,13 @@ interface Props {
     startNode?: string;
     endNode?: string;
     autoPlay?: boolean;
+    buttons?: boolean;
     legend?: boolean;
     stepCount?: boolean;
     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.3",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",