jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(canvas): only show reminder calendar on icon click, not on shape select/drag 

Remove the auto-opening calendar on shape selection and the drag-to-calendar
compact mode. The 📅 icon on selected shapes remains as the entry point.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-20 11:15:18 -07:00
parent 15c118923b
commit 92df7d332d
1 changed files with 3 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
website/canvas.html
View File

@ -2357,12 +2357,6 @@
.rw-day.today { color: #818cf8; font-weight: 700; } .rw-day.today { color: #818cf8; font-weight: 700; }
.rw-day.other { color: #333; cursor: default; } .rw-day.other { color: #333; cursor: default; }
.rw-day.other:hover { background: none; } .rw-day.other:hover { background: none; }
.rw-day.drop-highlight {
background: rgba(245,158,11,0.25) !important;
border-color: #f59e0b !important;
color: #fff !important; font-weight: 700;
transform: scale(1.15); box-shadow: 0 0 8px rgba(245,158,11,0.4);
}
.rw-day.has-reminder { .rw-day.has-reminder {
position: relative; position: relative;
} }
@ -2391,15 +2385,6 @@
.shape-schedule-icon:hover { .shape-schedule-icon:hover {
background: #2a2a3e; border-color: #818cf8; background: #2a2a3e; border-color: #818cf8;
} }
#reminder-widget.rw-compact {
width: 200px; padding: 10px; top: auto; bottom: 16px; right: 16px;
border-color: #f59e0b;
}
#reminder-widget.rw-compact .rw-header,
#reminder-widget.rw-compact .rw-shape-label { font-size: 10px; margin-bottom: 4px; }
#reminder-widget.rw-compact .rw-day { font-size: 9px; }
#reminder-widget.rw-compact .rw-nav-btn { font-size: 11px; }
#reminder-widget.rw-compact .rw-month { font-size: 10px; }
</style> </style>
<div id="reminder-widget"> <div id="reminder-widget">
<div class="rw-header"><span class="rw-header-icon">🔔</span> Remind me of this on:</div> <div class="rw-header"><span class="rw-header-icon">🔔</span> Remind me of this on:</div>
@ -3114,7 +3099,6 @@
} }
} }
__miCanvasBridge.setSelection([...selectedShapeIds]); __miCanvasBridge.setSelection([...selectedShapeIds]);
updateReminderWidget();
updateScheduleIcon(); updateScheduleIcon();
} }
@ -6893,53 +6877,9 @@
} }
} }
// ── Drag-to-calendar: show compact calendar when shape is being moved ── // Stubs — drag-to-calendar removed; schedule via 📅 icon only
let dragCalendarActive = false; function onShapeMoveStart(shape) {}
let dragCalendarShape = null; function onShapeMoveEnd() {}
let dragMoveTimer = null;
let lastPointerPos = { x: 0, y: 0 };
// Track pointer globally for drop detection
document.addEventListener("pointermove", (e) => { lastPointerPos.x = e.clientX; lastPointerPos.y = e.clientY; }, { passive: true });
function onShapeMoveStart(shape) {
if (dragMoveTimer) clearTimeout(dragMoveTimer);
dragCalendarShape = shape;
dragMoveTimer = setTimeout(() => {
if (!dragCalendarShape) return;
dragCalendarActive = true;
rwSelectedShape = dragCalendarShape;
const info = getShapeInfo(dragCalendarShape);
rwLabel.innerHTML = `<span class="rw-shape-badge" style="background:${info.color}">${info.typeName}</span> ${info.label}`;
rwWidget.classList.add("visible", "rw-compact");
rwFeedback.textContent = "Drop on a day to set reminder";
renderRwCalendar();
}, 200);
}
function onShapeMoveEnd() {
if (dragMoveTimer) { clearTimeout(dragMoveTimer); dragMoveTimer = null; }
if (!dragCalendarActive) { dragCalendarShape = null; return; }
// Check if pointer is over a calendar day
const hitEl = document.elementFromPoint(lastPointerPos.x, lastPointerPos.y);
const dayEl = hitEl?.closest?.(".rw-day[data-rw-date]");
if (dayEl && rwSelectedShape) {
createReminderForShape(dayEl.dataset.rwDate);
}
rwWidget.classList.remove("rw-compact");
if (!dayEl) rwWidget.classList.remove("visible");
dragCalendarActive = false;
dragCalendarShape = null;
}
// Highlight calendar days on hover during drag
setInterval(() => {
if (!dragCalendarActive) return;
const hitEl = document.elementFromPoint(lastPointerPos.x, lastPointerPos.y);
rwGrid.querySelectorAll(".rw-day").forEach(d => d.classList.remove("drop-highlight"));
const dayEl = hitEl?.closest?.(".rw-day[data-rw-date]");
if (dayEl) dayEl.classList.add("drop-highlight");
}, 60);
rwPrev.addEventListener("click", () => { rwPrev.addEventListener("click", () => {
rwDate = new Date(rwDate.getFullYear(), rwDate.getMonth() - 1, 1); rwDate = new Date(rwDate.getFullYear(), rwDate.getMonth() - 1, 1);