update objects dynamically, drag planets around

src/App.vue

@@ -4,7 +4,10 @@
     @select:font="setFont($event)"
     @select:theme="setTheme($event)"
   />
-  <SystemDiagram v-bind="{ star, objects, selectedObject }" @select="selectObject" />
+  <SystemDiagram v-bind="{ star, objects, selectedObject }"
+    @select="selectObject"
+    @update="updateSelectedObject"
+  />
 
   <section id="settings">
     <ObjectSettings v-if="selectedObject"
@@ -48,7 +51,7 @@ const star = reactive({
   radius: 400,
 })
 
-const objects = ref(exampleData)
+const objects = reactive(exampleData)
 const labelFonts = ['xolonium', 'douar', 'lack']
 const themes = ['default', 'retro', 'inverse', 'paper']
 
@@ -66,6 +69,13 @@ function selectObject (object) {
   selectedObject.value = object
 }
 
+function updateSelectedObject (payload) {
+  console.log('updating selected object', payload)
+  for (const key in payload) {
+    selectedObject.value[key] = payload[key]
+  }
+}
+
 function deleteObject (object) {
   if (deletedObject.value) {
     const lost = deletedObject.value.object.name
@@ -77,11 +87,11 @@ function deleteObject (object) {
   }
 
   if (!object) object = selectedObject.value
-  const index = objects.value.indexOf(object)
+  const index = objects.indexOf(object)
 
   console.debug('deleting object at index', index)
 
-  if (index >= 0) objects.value.splice(index, 1)
+  if (index >= 0) objects.splice(index, 1)
   if (object === selectedObject.value) selectedObject.value = null
 
   deletedObject.value = { index, object }
@@ -90,12 +100,12 @@ function deleteObject (object) {
 function restoreDeleted () {
   const { index, object } = deletedObject.value
   console.debug('restoring deleted object', index)
-  objects.value.splice(index, 0, object)
+  objects.splice(index, 0, object)
   deletedObject.value = null
 }
 
 function autoName (obj) {
-  const index = objects.value.indexOf(obj)
+  const index = objects.indexOf(obj)
   return `${star.designation}-${index}`
 }
 

src/app.css

@@ -124,7 +124,7 @@ text.tilted { transform: rotate(-45deg) translate(0, 100%); transform-origin: le
 #axis { stroke-width: 1; }
 #designation { fill: var(--fg-graphic); text-anchor: end; font-family: var(--title-font); }
 #star { fill: var(--fill-star); }
-.object { fill: var(--fg-graphic); text-anchor: middle; font-size: .6em; cursor: pointer; }
+.object { fill: var(--fg-graphic); text-anchor: middle; font-size: .6em; cursor: pointer; transform-box: fill-box; }
 .object > line { stroke-width: .5; }
 .satellite { text-anchor: start; font-size: .7em; }
 .rings { stroke: var(--fg-graphic); fill: none; transform: skew(-45deg); transform-origin: 50%; }

src/components/SystemDiagram.vue

@@ -7,8 +7,9 @@
       class="object"
       :class="{ selected: o === selectedObject }"
       :id="o.name"
-      @mousedown.left="startDragging(o)"
-      @mouseup.left="stopDragging"
+      :style="{ transform: `translateX(${o === draggedObject ? draggingDelta : 0}px)` }"
+      @pointerdown.left="startDragging($event, o)"
+      @pointerleft="stopDragging"
     >
       <g class="rings" v-for="i in o.rings">
         <circle :r="o.radius - 5 + 2*i" :cx="o.distance" cy="150" />
@@ -40,7 +41,7 @@ const props = defineProps({
   selectedObject: Object,
 })
 
-const emit = defineEmits([ 'select' ])
+const emit = defineEmits([ 'select', 'update' ])
 
 const starCX = computed(() => {
   const r = props.star.radius
@@ -48,13 +49,38 @@ const starCX = computed(() => {
 })
 
 const draggedObject = ref(null)
+const draggingDelta = ref(0)
+let dragStart = 0
 
-function startDragging (object) {
-  emit('select', object)
-  draggedObject.value = object
-}
-function stopDragging () {
+// TODO: when releasing the pointer outside of the dragged element, this
+//       function is called but somehow doesn't remove the event listener?
+function stopDragging (event) {
+  window.removeEventListener('pointermove', updateDelta)
+  window.removeEventListener('pointerup', stopDragging)
+  event.target.removeEventListener('pointerup', stopDragging)
+  console.debug('stop draggin', draggedObject.value.name)
+
+  const newDistance = draggedObject.value.distance + draggingDelta.value
+  emit('update', { distance: newDistance })
+
+  dragStart = 0
+  draggingDelta.value = 0
   draggedObject.value = null
+  event.target.onmousemove = null
 }
 
+function updateDelta (event) {
+  console.log('updateDelta', event.clientX, dragStart)
+  draggingDelta.value = event.clientX - dragStart
+}
+
+function startDragging (event, object) {
+  console.debug('start draggin', object.name)
+  emit('select', object)
+  draggedObject.value = object
+  dragStart = event.clientX
+  window.addEventListener('pointermove', updateDelta)
+  window.addEventListener('pointerup', stopDragging)
+  event.target.addEventListener('pointerup', stopDragging)
+}
 </script>