Fix planner resize anchoring and alignment

static/planner.js

@@ -7,6 +7,7 @@
     activePage: 0,
     dragTaskId: null,
     interaction: null,
+    suppressClickUntil: 0,
   };
 
   const PIXELS_PER_MINUTE = 1.16;
@@ -15,9 +16,12 @@
   const CANVAS_GAP = 18;
   const SNAP_MINUTES = 5;
   const MIN_DURATION = 15;
+  const MIN_BLOCK_HEIGHT = MIN_DURATION * PIXELS_PER_MINUTE;
   const AXIS_LABEL_MIN_GAP = 28;
+  const CLICK_SUPPRESS_MS = 260;
 
   const pageTrack = document.getElementById("pageTrack");
+  const pageSlides = Array.from(document.querySelectorAll(".page-slide"));
   const plannerDateInput = document.getElementById("plannerDateInput");
   const plannerPrevDay = document.getElementById("plannerPrevDay");
   const plannerNextDay = document.getElementById("plannerNextDay");
@@ -185,12 +189,55 @@
     if (task && task.schedule) {
       return Math.max(MIN_DURATION, toMinutes(task.schedule.end_time) - toMinutes(task.schedule.start_time));
     }
-    return Number((state.planner.settings && state.planner.settings.default_task_duration_minutes) || 45);
+    return Math.max(MIN_DURATION, Number((state.planner.settings && state.planner.settings.default_task_duration_minutes) || 45));
+  }
+
+  function minutesToPixels(minutes) {
+    return minutes * PIXELS_PER_MINUTE;
+  }
+
+  function getBlockHeight(startMinutes, endMinutes) {
+    return Math.max(minutesToPixels(endMinutes - startMinutes), MIN_BLOCK_HEIGHT);
+  }
+
+  function setBlockBounds(block, startMinutes, endMinutes, dayStart) {
+    const height = getBlockHeight(startMinutes, endMinutes);
+    block.style.top = `${minutesToPixels(startMinutes - dayStart)}px`;
+    block.style.height = `${height}px`;
+    return height;
+  }
+
+  function updateEventLayout(block, startMinutes, endMinutes, dayStart) {
+    const height = setBlockBounds(block, startMinutes, endMinutes, dayStart);
+    block.classList.toggle("is-compact", height < 64);
+    block.classList.toggle("is-tight", height < 32);
+    return height;
+  }
+
+  function getPointerDeltaMinutes(pointerStartY, clientY) {
+    return snapMinutes((clientY - pointerStartY) / PIXELS_PER_MINUTE);
+  }
+
+  function suppressRecentClicks(duration = CLICK_SUPPRESS_MS) {
+    state.suppressClickUntil = Date.now() + duration;
+  }
+
+  function beginPlannerInteraction() {
+    document.body.classList.add("planner-interacting");
+    suppressRecentClicks();
+  }
+
+  function finishPlannerInteraction() {
+    document.body.classList.remove("planner-interacting");
+    suppressRecentClicks();
   }
 
   function setActivePage(index) {
     state.activePage = clamp(index, 0, 1);
     pageTrack.style.transform = `translateX(-${state.activePage * 100}%)`;
+    pageSlides.forEach((slide, slideIndex) => {
+      slide.classList.toggle("is-active", slideIndex === state.activePage);
+    });
     document.querySelectorAll(".story-tab").forEach((tab) => {
       tab.classList.toggle("is-active", Number(tab.dataset.goPage) === state.activePage);
     });
@@ -361,8 +408,8 @@
 
       const band = document.createElement("div");
       band.className = "timeline-slot-band";
-      band.style.top = `${(slotStart - dayStart) * PIXELS_PER_MINUTE}px`;
-      band.style.height = `${Math.max((slotEnd - slotStart) * PIXELS_PER_MINUTE, 52)}px`;
+      band.style.top = `${minutesToPixels(slotStart - dayStart)}px`;
+      band.style.height = `${minutesToPixels(slotEnd - slotStart)}px`;
       band.innerHTML = `
         <strong>${escapeHtml(slot.label)}</strong>
         <span>${escapeHtml(slot.start)} - ${escapeHtml(slot.end)}</span>
@@ -378,16 +425,16 @@
     Array.from(lineMarkers).sort((left, right) => left - right).forEach((minute) => {
       const line = document.createElement("div");
       line.className = `timeline-line ${minute % 60 === 0 ? "is-hour" : "is-slot"}`;
-      line.style.top = `${(minute - dayStart) * PIXELS_PER_MINUTE}px`;
+      line.style.top = `${minutesToPixels(minute - dayStart)}px`;
       canvasLayer.appendChild(line);
     });
 
     const axisLabelMinutes = [];
     const appendAxisLabel = (minute) => {
-      const top = (minute - dayStart) * PIXELS_PER_MINUTE;
+      const top = minutesToPixels(minute - dayStart);
       const previous = axisLabelMinutes[axisLabelMinutes.length - 1];
       if (previous !== undefined) {
-        const previousTop = (previous - dayStart) * PIXELS_PER_MINUTE;
+        const previousTop = minutesToPixels(previous - dayStart);
         if (top - previousTop < AXIS_LABEL_MIN_GAP) {
           return;
         }
@@ -406,7 +453,7 @@
     axisLabelMinutes.forEach((minute) => {
       const tick = document.createElement("div");
       tick.className = "timeline-axis-tick";
-      tick.style.top = `${(minute - dayStart) * PIXELS_PER_MINUTE}px`;
+      tick.style.top = `${minutesToPixels(minute - dayStart)}px`;
       tick.textContent = minutesToTime(minute);
       axisLayer.appendChild(tick);
     });
@@ -423,8 +470,8 @@
       const endMinutes = toMinutes(block.end);
       const overlay = document.createElement("div");
       overlay.className = "timeline-major-block";
-      overlay.style.top = `${(startMinutes - dayStart) * PIXELS_PER_MINUTE}px`;
-      overlay.style.height = `${Math.max((endMinutes - startMinutes) * PIXELS_PER_MINUTE, 88)}px`;
+      overlay.style.top = `${minutesToPixels(startMinutes - dayStart)}px`;
+      overlay.style.height = `${minutesToPixels(endMinutes - startMinutes)}px`;
       overlay.innerHTML = `<span>${escapeHtml(block.label)}</span>`;
       canvasLayer.appendChild(overlay);
     });
@@ -434,10 +481,9 @@
       const leftPercent = widthPercent * (item.column || 0);
       const block = document.createElement("article");
       block.className = `planner-event ${item.kind === "course" ? "course-event" : "task-event"} ${item.completed ? "is-complete" : ""}`;
-      block.style.top = `${(item.startMinutes - dayStart) * PIXELS_PER_MINUTE}px`;
-      block.style.height = `${Math.max((item.endMinutes - item.startMinutes) * PIXELS_PER_MINUTE, 54)}px`;
       block.style.left = `${leftPercent}%`;
       block.style.width = `calc(${widthPercent}% - 8px)`;
+      updateEventLayout(block, item.startMinutes, item.endMinutes, dayStart);
 
       if (item.kind === "course") {
         if (item.color) {
@@ -476,27 +522,37 @@
               return;
             }
 
+            event.preventDefault();
+            event.stopPropagation();
+
             const mode = event.target.closest("[data-resize-task-start]")
               ? "resize-start"
               : event.target.closest("[data-resize-task-end]")
                 ? "resize-end"
                 : "move";
 
-            const rect = getCanvasRect();
-            if (!rect) {
-              return;
-            }
-
+            beginPlannerInteraction();
             state.interaction = {
               mode,
               block,
               taskId: item.task_id,
+              pointerId: event.pointerId,
+              pointerStartY: event.clientY,
+              initialStartMinutes: item.startMinutes,
+              initialEndMinutes: item.endMinutes,
               startMinutes: item.startMinutes,
               endMinutes: item.endMinutes,
               duration: item.endMinutes - item.startMinutes,
-              offsetY: event.clientY - (rect.top + ((item.startMinutes - dayStart) * PIXELS_PER_MINUTE)),
             };
 
+            if (typeof block.setPointerCapture === "function") {
+              try {
+                block.setPointerCapture(event.pointerId);
+              } catch (error) {
+                // Ignore browsers that reject capture for synthetic pointer sequences.
+              }
+            }
+
             block.classList.add("is-dragging");
           });
         }
@@ -517,8 +573,7 @@
       const duration = getTaskDuration(task);
       const startMinutes = clamp(clientYToMinutes(event.clientY), dayStart, dayEnd - duration);
       preview.style.display = "block";
-      preview.style.top = `${(startMinutes - dayStart) * PIXELS_PER_MINUTE}px`;
-      preview.style.height = `${Math.max(duration * PIXELS_PER_MINUTE, 54)}px`;
+      setBlockBounds(preview, startMinutes, startMinutes + duration, dayStart);
       preview.textContent = `${minutesToTime(startMinutes)} - ${minutesToTime(startMinutes + duration)}`;
     });
 
@@ -601,6 +656,13 @@
     }
   }
 
+  document.addEventListener("click", (event) => {
+    if (Date.now() < state.suppressClickUntil) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }, true);
+
   document.addEventListener("click", (event) => {
     const pageButton = event.target.closest("[data-go-page]");
     if (pageButton) {
@@ -634,6 +696,7 @@
     state.dragTaskId = card.dataset.plannerTaskId;
     event.dataTransfer.setData("text/plain", state.dragTaskId);
     event.dataTransfer.effectAllowed = "move";
+    beginPlannerInteraction();
     card.classList.add("is-dragging");
   });
 
@@ -643,6 +706,7 @@
       card.classList.remove("is-dragging");
     }
     state.dragTaskId = null;
+    finishPlannerInteraction();
     const preview = document.getElementById("timelineDropPreview");
     if (preview) {
       preview.style.display = "none";
@@ -650,51 +714,71 @@
   });
 
   document.addEventListener("pointermove", (event) => {
-    if (!state.interaction) {
+    if (!state.interaction || event.pointerId !== state.interaction.pointerId) {
       return;
     }
 
+    event.preventDefault();
+
     const { dayStart, dayEnd } = getPlannerConfig();
+    const deltaMinutes = getPointerDeltaMinutes(state.interaction.pointerStartY, event.clientY);
+
     if (state.interaction.mode === "move") {
+      const duration = state.interaction.initialEndMinutes - state.interaction.initialStartMinutes;
       const startMinutes = clamp(
-        clientYToMinutes(event.clientY - state.interaction.offsetY + 8),
+        state.interaction.initialStartMinutes + deltaMinutes,
         dayStart,
-        dayEnd - state.interaction.duration
+        dayEnd - duration
       );
       state.interaction.startMinutes = startMinutes;
-      state.interaction.endMinutes = startMinutes + state.interaction.duration;
+      state.interaction.endMinutes = startMinutes + duration;
+      state.interaction.duration = duration;
     } else if (state.interaction.mode === "resize-start") {
       const startMinutes = clamp(
-        clientYToMinutes(event.clientY),
+        state.interaction.initialStartMinutes + deltaMinutes,
         dayStart,
-        state.interaction.endMinutes - MIN_DURATION
+        state.interaction.initialEndMinutes - MIN_DURATION
       );
       state.interaction.startMinutes = startMinutes;
+      state.interaction.endMinutes = state.interaction.initialEndMinutes;
       state.interaction.duration = state.interaction.endMinutes - state.interaction.startMinutes;
     } else {
       const endMinutes = clamp(
-        clientYToMinutes(event.clientY),
-        state.interaction.startMinutes + MIN_DURATION,
+        state.interaction.initialEndMinutes + deltaMinutes,
+        state.interaction.initialStartMinutes + MIN_DURATION,
         dayEnd
       );
+      state.interaction.startMinutes = state.interaction.initialStartMinutes;
       state.interaction.endMinutes = endMinutes;
       state.interaction.duration = state.interaction.endMinutes - state.interaction.startMinutes;
     }
 
-    state.interaction.block.style.top = `${(state.interaction.startMinutes - dayStart) * PIXELS_PER_MINUTE}px`;
-    state.interaction.block.style.height = `${Math.max((state.interaction.endMinutes - state.interaction.startMinutes) * PIXELS_PER_MINUTE, 54)}px`;
+    updateEventLayout(
+      state.interaction.block,
+      state.interaction.startMinutes,
+      state.interaction.endMinutes,
+      dayStart
+    );
     updateEventTimeLabel(state.interaction.block, state.interaction.startMinutes, state.interaction.endMinutes);
   });
 
-  document.addEventListener("pointerup", () => {
-    if (!state.interaction) {
-      return;
+  function releaseInteractionPointer(current) {
+    if (
+      current
+      && typeof current.block.releasePointerCapture === "function"
+      && typeof current.block.hasPointerCapture === "function"
+      && current.pointerId !== undefined
+      && current.block.hasPointerCapture(current.pointerId)
+    ) {
+      try {
+        current.block.releasePointerCapture(current.pointerId);
+      } catch (error) {
+        // Ignore browsers that already released pointer capture.
+      }
     }
+  }
 
-    const current = state.interaction;
-    current.block.classList.remove("is-dragging");
-    state.interaction = null;
-
+  function persistInteraction(current) {
     requestJSON(`/api/tasks/${current.taskId}/schedule`, {
       method: "PATCH",
       body: JSON.stringify({
@@ -706,7 +790,36 @@
       .then(() => loadPlanner(state.selectedDate, true))
       .then(() => showToast("规划时间已更新"))
       .catch((error) => showToast(error.message, "error"));
-  });
+  }
+
+  function finishInteraction(event) {
+    if (!state.interaction) {
+      return;
+    }
+
+    if (event && event.pointerId !== undefined && event.pointerId !== state.interaction.pointerId) {
+      return;
+    }
+
+    const current = state.interaction;
+    current.block.classList.remove("is-dragging");
+    state.interaction = null;
+    releaseInteractionPointer(current);
+    finishPlannerInteraction();
+
+    if (
+      current.startMinutes === current.initialStartMinutes
+      && current.endMinutes === current.initialEndMinutes
+    ) {
+      return;
+    }
+
+    persistInteraction(current);
+  }
+
+  document.addEventListener("pointerup", finishInteraction);
+  document.addEventListener("pointercancel", finishInteraction);
+  window.addEventListener("blur", finishInteraction);
 
   plannerDateInput.addEventListener("change", () => {
     if (plannerDateInput.value) {
@@ -738,4 +851,5 @@
   });
 
   renderPlanner();
+  setActivePage(0);
 })();

static/v020.css

@@ -60,6 +60,17 @@
   max-width: 100%;
   min-width: 100%;
   overflow: hidden;
+  pointer-events: none;
+}
+
+.page-slide.is-active {
+  pointer-events: auto;
+}
+
+body.planner-interacting,
+body.planner-interacting * {
+  user-select: none !important;
+  -webkit-user-select: none !important;
 }
 
 .page-home {
@@ -225,6 +236,7 @@
   position: absolute;
   left: 10px;
   right: 10px;
+  box-sizing: border-box;
   padding: 12px;
   border-radius: 18px;
   background: rgba(255, 255, 255, 0.04);
@@ -261,6 +273,7 @@
   position: absolute;
   left: 0;
   right: 0;
+  box-sizing: border-box;
   border-radius: 22px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.015) 100%);
   pointer-events: none;
@@ -278,6 +291,8 @@
 .planner-event,
 .timeline-drop-preview {
   position: absolute;
+  box-sizing: border-box;
+  overflow: hidden;
   border-radius: 20px;
   padding: 14px;
   border: 1px solid rgba(255, 255, 255, 0.08);
@@ -285,6 +300,10 @@
   box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2);
 }
 
+.planner-event {
+  touch-action: none;
+}
+
 .planner-event::before,
 .timeline-drop-preview::before {
   content: "";
@@ -304,6 +323,7 @@
 
 .planner-event-top strong {
   max-width: 72%;
+  line-height: 1.2;
 }
 
 .planner-event-meta {
@@ -338,20 +358,21 @@
 
 .planner-event-resize {
   position: absolute;
-  left: 18px;
-  right: 18px;
-  height: 8px;
+  left: 10px;
+  right: 10px;
+  height: 6px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.18);
+  background: linear-gradient(90deg, rgba(123, 231, 234, 0.9), rgba(97, 210, 159, 0.72));
   cursor: ns-resize;
+  z-index: 2;
 }
 
 .planner-event-resize-top {
-  top: 8px;
+  top: 0;
 }
 
 .planner-event-resize-bottom {
-  bottom: 8px;
+  bottom: 0;
 }
 
 .planner-event.is-dragging,
@@ -359,6 +380,64 @@
   opacity: 0.8;
 }
 
+.planner-event.is-compact {
+  border-radius: 16px;
+  padding: 8px 12px 10px;
+}
+
+.planner-event.is-compact::before {
+  border-radius: 16px 0 0 16px;
+}
+
+.task-event.is-compact .planner-event-top {
+  display: grid;
+  gap: 4px;
+}
+
+.task-event.is-compact .planner-event-meta,
+.task-event.is-compact .planner-event-clear {
+  display: none;
+}
+
+.course-event.is-compact .planner-lock-badge {
+  display: none;
+}
+
+.course-event.is-compact .planner-event-meta {
+  margin-top: 4px;
+  font-size: 0.76rem;
+}
+
+.course-event.is-compact .planner-event-meta span:last-child {
+  display: none;
+}
+
+.planner-event.is-tight {
+  padding: 6px 10px;
+}
+
+.planner-event.is-tight .planner-event-meta,
+.planner-event.is-tight .planner-event-clear,
+.planner-event.is-tight .planner-lock-badge,
+.planner-event.is-tight .planner-event-time {
+  display: none;
+}
+
+.planner-event.is-tight .planner-event-top {
+  display: block;
+}
+
+.planner-event.is-tight .planner-event-top strong {
+  max-width: 100%;
+  font-size: 0.74rem;
+}
+
+.planner-event.is-tight .planner-event-resize {
+  left: 8px;
+  right: 8px;
+  height: 5px;
+}
+
 .planner-sidebar {
   padding: 18px;
   display: grid;