scrollwheel to change planet size

src/components/ObjectSettings.vue

@@ -9,21 +9,21 @@
       </div>
       <div>
         Distance Δ:
-        <input type="number" min="50" max="1000"
+        <input type="number" :min="MIN_DISTANCE_PLANET" :max="MAX_DISTANCE_PLANET"
           :value="distance"
           @input="update('distance', $event.target.value)"
         />
       </div>
       <div>
         Radius r:
-        <input type="number" min="1" max="125"
+        <input type="number" :min="MIN_SIZE_PLANET" :max="MAX_SIZE_PLANET"
           :value="radius"
           @input="update('radius', $event.target.value)"
         />
       </div>
       <div>
         Rings:
-        <input type="number" min="0" max="15"
+        <input type="number" :min="MIN_AMOUNT_RINGS" :max="MAX_AMOUNT_RINGS"
           :value="rings"
           @input="update('rings', $event.target.value)"
         />
@@ -47,6 +47,16 @@
 
 <script setup>
 import { ref, computed } from 'vue'
+import {
+  MIN_SIZE_STAR,
+  MAX_SIZE_STAR,
+  MIN_SIZE_PLANET,
+  MAX_SIZE_PLANET,
+  MIN_DISTANCE_PLANET,
+  MAX_DISTANCE_PLANET,
+  MIN_AMOUNT_RINGS,
+  MAX_AMOUNT_RINGS,
+} from '../constants'
 
 const props = defineProps({
   distance: Number,

src/components/SystemDiagram.vue

@@ -9,7 +9,7 @@
       :id="o.name"
       :style="{ transform: `translateX(${o === draggedObject ? draggingDelta : 0}px)` }"
       @pointerdown.left="startDragging($event, o)"
-      @pointerleft="stopDragging"
+      @wheel="resizeObject"
     >
       <g class="rings" v-for="i in o.rings">
         <circle :r="o.radius - 5 + 2*i" :cx="o.distance" cy="150" />
@@ -34,6 +34,12 @@
 <script setup>
 import { ref, computed } from 'vue'
 import steepCurve from '../steep-curve'
+import {
+  MIN_SIZE_PLANET,
+  MAX_SIZE_PLANET,
+  MIN_DISTANCE_PLANET,
+  MAX_DISTANCE_PLANET,
+} from '../constants'
 
 const props = defineProps({
   star: Object,
@@ -62,8 +68,12 @@ function stopDragging (event) {
   event.target.removeEventListener('pointerup', stopDragging)
   console.debug('stop draggin', draggedObject.value.name)
 
-  const newDistance = draggedObject.value.distance + draggingDelta.value
+  let distance = draggedObject.value.distance + draggingDelta.value
-  emit('update', { distance: newDistance })
+
+  if (distance < MIN_DISTANCE_PLANET) distance = MIN_DISTANCE_PLANET
+  if (distance > MAX_DISTANCE_PLANET) distance = MAX_DISTANCE_PLANET
+
+  emit('update', { distance })
 
   dragStart = 0
   draggingDelta.value = 0
@@ -91,4 +101,18 @@ function startDragging (event, object) {
   window.addEventListener('pointerup', stopDragging)
   event.target.addEventListener('pointerup', stopDragging)
 }
+
+function resizeObject (event) {
+  if (!props.selectedObject) return
+
+  event.preventDefault()
+
+  let radius = props.selectedObject.radius
+  radius = Math.round(radius + event.deltaY * -0.01)
+
+  if (radius < MIN_SIZE_PLANET) radius = MIN_SIZE_PLANET
+  if (radius > MAX_SIZE_PLANET) radius = MAX_SIZE_PLANET
+
+  emit('update', { radius })
+}
 </script>

src/components/SystemSettings.vue

@@ -4,11 +4,19 @@
     <menu id="system-settings">
       <label>
         Name
-        <input type="text" :value="designation" @input="update('designation', $event.target.value)" />
+        <input type="text"
+          :value="designation"
+          @input="update('designation', $event.target.value)"
+        />
       </label>
       <label>
         Star Size
-        <input type="range" min="50" max="1500" :value="radius" @input="update('radius', $event.target.value)" />
+        <input type="range"
+          :min="MIN_SIZE_STAR"
+          :max="MAX_SIZE_STAR"
+          :value="radius"
+          @input="update('radius', $event.target.value)"
+        />
         ({{ radius }})
       </label>
     </menu>
@@ -17,6 +25,10 @@
 
 <script setup>
 import { ref } from 'vue'
+import {
+  MIN_SIZE_STAR,
+  MAX_SIZE_STAR,
+} from '../constants'
 
 const props = defineProps({
   designation: String,

src/constants.js

@@ -0,0 +1,12 @@
+export const MIN_SIZE_STAR = 50
+export const MAX_SIZE_STAR = 1500
+
+export const MIN_SIZE_PLANET = 1
+export const MAX_SIZE_PLANET = 125
+
+export const MIN_AMOUNT_RINGS = 0
+export const MAX_AMOUNT_RINGS = 15
+
+export const MIN_DISTANCE_PLANET = 32
+export const MAX_DISTANCE_PLANET = 999
+