connor/calendar
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix drag interaction issues in week view

Browse Source 
- Fix drag-to-create being blocked by existing events
- Add creating-event CSS class that disables pointer events on existing events
- Fix single clicks creating temporary event boxes
- Add mouse button state check to prevent post-mouseup movement being treated as drag
- Ensure temp event boxes only appear during actual drag operations (has_moved=true)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-09-02 10:55:39 -04:00
parent 7c2901f453
commit 57e434e4ff
2 changed files with 34 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/week_view.rs
View File

@@ -399,6 +399,13 @@ pub fn week_view(props: &WeekViewProps) -> Html {
let drag_state = drag_state_clone.clone();
let time_increment = props.time_increment;
Callback::from(move |e: MouseEvent| {
// Only process mouse move if a button is still pressed
if e.buttons() == 0 {
// No mouse button pressed, clear drag state
drag_state.set(None);
return;
}
if let Some(mut current_drag) = (*drag_state).clone() {
if current_drag.is_dragging {
// Use layer_y for consistent coordinate calculation
@@ -568,9 +575,20 @@ pub fn week_view(props: &WeekViewProps) -> Html {
})
};
// Check if currently dragging to create an event
let is_creating_event = if let Some(drag) = (*drag_state).clone() {
matches!(drag.drag_type, DragType::CreateEvent) && drag.is_dragging
} else {
false
};
html! {
<div
class={classes!("week-day-column", if is_today { Some("today") } else { None })}
class={classes!(
"week-day-column",
if is_today { Some("today") } else { None },
if is_creating_event { Some("creating-event") } else { None }
)}
{onmousedown}
{onmousemove}
{onmouseup}
@@ -852,7 +870,7 @@ pub fn week_view(props: &WeekViewProps) -> Html {
// Temporary event box during drag
{
if let Some(drag) = (*drag_state).clone() {
if drag.is_dragging && drag.start_date == *date {
if drag.is_dragging && drag.has_moved && drag.start_date == *date {
match &drag.drag_type {
DragType::CreateEvent => {
let start_y = drag.start_y.min(drag.current_y);

14
frontend/styles.css
View File

@@ -802,6 +802,20 @@ body {
white-space: nowrap;
}
/* Disable pointer events on existing events when creating a new event */
.week-day-column.creating-event .week-event {
pointer-events: none;
opacity: 0.6; /* Visual feedback that events are not interactive */
}
.week-day-column.creating-event .week-event .event-content {
pointer-events: none;
}
.week-day-column.creating-event .week-event .resize-handle {
pointer-events: none;
}
.week-event:hover {
filter: brightness(1.1);
z-index: 4;