Reverted last commits to test if workflow works

src/assets/blockly/blocks.js

@@ -3,6 +3,8 @@ import * as Blockly from 'blockly';
 import { ColorWheelField } from "blockly-field-color-wheel";
 import { FieldSlider } from "@blockly/field-slider";
 
+import { PlusMinus } from '@blockly/block-plus-minus';
+
 import { createMinusField } from './field_minus';
 import { createPlusField } from './field_plus';
 //import { MutatorIcon } from 'blockly/core/icons';

src/components/Canvas.vue

@@ -2,9 +2,11 @@
 import { onMounted, onUnmounted, ref } from "vue";
 import { useSound } from "@vueuse/sound";
 import click from "../assets/sounds/add_particle.wav";
+import slider from "../assets/sounds/hover.wav";
 
 const playbackRate = ref(1.0);
 const { play } = useSound(click, { volume: 0.5, playbackRate, interrupt: false });
+const { play: playSlider } = useSound(slider, { volume: 0.5, interrupt: false });
 
 let timer = null;
 
@@ -81,6 +83,23 @@ const onPointerEnter = () => {
   }
 };
 
+let mouseWheelTimer = null;
+
+const onMouseWheel = (event) => {
+  const delta = Math.max(-1, Math.min(1, event.deltaY));
+
+  // If a timer is already running, don't start another one
+  if (mouseWheelTimer) return;
+
+  // Start a timer to play the slider after 75ms
+  mouseWheelTimer = setTimeout(() => {
+    playSlider({ playbackRate: delta > 0 ? 0.8 : 0.75 });
+
+    // Clear the timer
+    mouseWheelTimer = null;
+  }, 15);
+};
+
 onMounted(() => {
   // There is an existing canvas with id glcanvas. I want to move that canvas to this component
   const glcanvas = document.getElementById("glcanvas");
@@ -93,6 +112,7 @@ onMounted(() => {
   canvas.value.addEventListener("pointerup", onPointerUp);
   canvas.value.addEventListener("pointerout", onPointerOut);
   canvas.value.addEventListener("pointerenter", onPointerEnter);
+  canvas.value.addEventListener("wheel", onMouseWheel);
 
   // Trigger windows resize event to make the canvas resize
   window.dispatchEvent(new Event("resize"));
@@ -103,6 +123,7 @@ onUnmounted(() => {
   canvas.value.removeEventListener("pointerup", onPointerUp);
   canvas.value.removeEventListener("pointerout", onPointerOut);
   canvas.value.removeEventListener("pointerenter", onPointerEnter);
+  canvas.value.removeEventListener("wheel", onMouseWheel);
 });
 
 </script>

src/components/CanvasControls.vue

@@ -10,7 +10,6 @@ import click from "../assets/sounds/select.wav";
 import hover from "../assets/sounds/hover.wav";
 import { useSimulationStore } from "../stores/simulation";
 import BlockDialog from "./BlockDialog.vue";
-import BrushSlider from "./BrushSlider.vue";
 
 const { play } = useSound(click, { volume: 0.5, interrupt: true });
 const { play: playHover } = useSound(hover, { volume: 0.5, interrupt: false });
@@ -54,7 +53,6 @@ async function resize_simulation(previous_size, new_size, duration) {
     var t = (Date.now() - start) / duration;
     var value = lerp(current, new_size, t);
     wasm_exports.resize_simulation(js_object(Math.round(value).toString()));
-    store.canvas_size = Math.round(value);
     await new Promise((r) => setTimeout(r, 1000 / 60));
   }
 
@@ -82,25 +80,17 @@ function playHoverSound() {
   }
 }
 
-function stepSimulation() {
-  wasm_exports.step_simulation();
-  play();
-}
-
 function showModal(e) {
   modal.value.showModal();
 }
 </script>
 
 <template>
   <div class="flex w-full gap-2 flex-wrap justify-between items-center bg-slate-600/50 rounded-xl mb-4 p-2">
-      <div class="flex gap-2 flex-wrap justify-start items-center grow" v-auto-animate="{ duration: 100 }">
-        <button @mouseenter="playHoverSound" :class="buttonClass" @click="togglePause" :title="[paused ? 'Unpause the simulation' : 'Pause the simulation']">
+      <div class="flex gap-2 flex-wrap justify-start items-center grow">
+        <button @mouseenter="playHoverSound" :class="buttonClass" @click="togglePause">
           <i :class="['ph-duotone', paused ? 'ph-play' : 'ph-pause']"></i>
         </button>
-        <button @mouseenter="playHoverSound" v-if="paused" :class="buttonClass" @click="stepSimulation" title="Run the simulation once">
-          <i class="ph ph-caret-line-right font-black"></i>
-        </button>
         <button @mouseenter="playHoverSound" :class="buttonClass" title="Clear all the particles" @click="clear"><i
             class="ph-duotone ph-broom"></i></button>
         <button @mouseenter="playHoverSound" :class="buttonClass"
@@ -120,7 +110,6 @@ function showModal(e) {
           <option value="150" selected>Normal</option>
           <option value="300">Big</option>
         </select>
-        <BrushSlider></BrushSlider>
       </div>
 
       <button @mouseenter="playHoverSound" :class="buttonClass" title="Clear all the particles" @click="showModal"><i class="text-orange-400 ph-duotone ph-question"></i></button>

src/components/ParticleButtons.vue

@@ -29,7 +29,6 @@ function removeSelected() {
 
 function add() {
   store.addParticle(ParticleModel.create());
-  store.selectParticle(store.particle_array.length - 1);
   playAdd();
 }