From 012b19c79ea80c810c4d788ee43dc63977a8f0cb Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sun, 10 Mar 2024 00:29:52 +0100
Subject: [PATCH] fix: clear hydra on reset

---
 packages/hydra/hydra.mjs  | 16 +++++++++++++---
 website/src/repl/Repl.jsx |  8 ++++++++
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/hydra/hydra.mjs b/packages/hydra/hydra.mjs
index dc1ba3f9..83d25cc4 100644
--- a/packages/hydra/hydra.mjs
+++ b/packages/hydra/hydra.mjs
@@ -1,4 +1,4 @@
-import { getDrawContext } from '@strudel/core';
+import { getDrawContext, controls } from '@strudel/core';
 
 let latestOptions;
 
@@ -11,6 +11,7 @@ function appendCanvas(c) {
   return testCanvas;
 }
 
+let hydra;
 export async function initHydra(options = {}) {
   // reset if options have changed since last init
   if (latestOptions && JSON.stringify(latestOptions) !== JSON.stringify(options)) {
@@ -19,7 +20,6 @@ export async function initHydra(options = {}) {
   latestOptions = options;
   //load and init hydra
   if (!document.getElementById('hydra-canvas')) {
-    console.log('reinit..');
     const {
       src = 'https://unpkg.com/hydra-synth',
       feedStrudel = false,
@@ -27,7 +27,7 @@ export async function initHydra(options = {}) {
     } = { detectAudio: false, ...options };
 
     await import(/* @vite-ignore */ src);
-    const hydra = new Hydra(hydraConfig);
+    hydra = new Hydra(hydraConfig);
     if (feedStrudel) {
       const { canvas } = getDrawContext();
       canvas.style.display = 'none';
@@ -37,4 +37,14 @@ export async function initHydra(options = {}) {
   }
 }
 
+export function clearHydra() {
+  if (hydra) {
+    hydra.hush();
+  }
+  globalThis.s0?.clear();
+  document.getElementById('hydra-canvas')?.remove();
+  globalThis.speed = controls.speed;
+  globalThis.shape = controls.shape;
+}
+
 export const H = (p) => () => p.queryArc(getTime(), getTime())[0].value;
diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index c5a8fa09..e80b37a9 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -17,6 +17,7 @@ import {
 import { defaultAudioDeviceName } from '../settings.mjs';
 import { getAudioDevices, setAudioDevice } from './util.mjs';
 import { StrudelMirror, defaultSettings } from '@strudel/codemirror';
+import { clearHydra } from '@strudel/hydra';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { settingsMap, useSettings } from '../settings.mjs';
 import {
@@ -75,6 +76,11 @@ export function Repl({ embedded = false }) {
       onUpdateState: (state) => {
         setReplState({ ...state });
       },
+      onToggle: (playing) => {
+        if (!playing) {
+          clearHydra();
+        }
+      },
       afterEval: (all) => {
         const { code } = all;
         setLatestCode(code);
@@ -165,6 +171,7 @@ export function Repl({ embedded = false }) {
   const resetEditor = async () => {
     resetGlobalEffects();
     clearCanvas();
+    clearHydra();
     resetLoadedSounds();
     editorRef.current.repl.setCps(0.5);
     await prebake(); // declare default samples
@@ -189,6 +196,7 @@ export function Repl({ embedded = false }) {
     setActivePattern(patternData.id);
     setViewingPatternData(patternData);
     clearCanvas();
+    clearHydra();
     resetLoadedSounds();
     resetGlobalEffects();
     await prebake(); // declare default samples