v0.0.4

src/components/PlannerPage.vue

@@ -62,11 +62,17 @@ function buildTimedRange(baseTimetable, startIndex, endIndex, nextValue) {
   return nextTimetable
 }
 
-function startTimetableDrag(index) {
+function startTimetableDrag(index, event) {
+  if (event.button !== 0 && event.button !== 2) {
+    return
+  }
+
+  const shouldFill = event.button === 2 ? false : !props.timetable[index]
+
   dragState = {
     startIndex: index,
     baseTimetable: [...props.timetable],
-    nextValue: !props.timetable[index],
+    nextValue: shouldFill,
   }
 
   emit('update:timetable', buildTimedRange(dragState.baseTimetable, index, index, dragState.nextValue))
@@ -204,7 +210,8 @@ onBeforeUnmount(() => {
               :key="quarter"
               :class="props.timetable[index * 6 + quarter - 1] ? 'bg-stone-800/90' : 'bg-transparent'"
               class="h-full w-[30px] cursor-crosshair border-r border-dashed border-line transition-colors last:border-r-0 touch-none select-none"
-              @pointerdown.prevent="startTimetableDrag(index * 6 + quarter - 1)"
+              @contextmenu.prevent
+              @pointerdown.prevent="startTimetableDrag(index * 6 + quarter - 1, $event)"
               @pointerenter="moveTimetableDrag(index * 6 + quarter - 1)"
             />
           </div>