diff --git a/changelog.md b/changelog.md index a915d05..f16e161 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,14 @@ # Changelog +## 2026-01-04 - 3.31.0 - feat(dees-input-list) +enhance drag-and-drop reordering for dees-input-list and migrate tests to chromium runner + +- Add rich drag state to dees-input-list: dragStartY, dragCurrentY, targetIndex, itemHeight and originalItemRects for accurate hit detection. +- Introduce bound global drag handlers and centralized global drag end/cleanup logic (handleGlobalDragOver / handleGlobalDragEnd). +- Improve drag visuals and animations: 'dragging', 'move-up', 'move-down' transforms, box-shadow, and smoother transitions; prevent hover styling while dragging. +- Move reorder logic away from per-item drop to global drag end to avoid race/positioning issues and ensure consistent reflow and cleanup. +- Migrate many browser test files to chromium-specific variants (added *.chromium.ts) and remove duplicate browser test counterparts. + ## 2026-01-04 - 3.30.1 - fix(dees-statsgrid) refine spacing, sizing, and colors in dees-statsgrid for a tighter, more compact appearance diff --git a/test/test.browser.ts b/test/test.chromium.ts similarity index 100% rename from test/test.browser.ts rename to test/test.chromium.ts diff --git a/test/test.contextmenu-demo.browser.ts b/test/test.contextmenu-demo.chromium.ts similarity index 100% rename from test/test.contextmenu-demo.browser.ts rename to test/test.contextmenu-demo.chromium.ts diff --git a/test/test.contextmenu-nested-close.browser.ts b/test/test.contextmenu-nested-close.chromium.ts similarity index 100% rename from test/test.contextmenu-nested-close.browser.ts rename to test/test.contextmenu-nested-close.chromium.ts diff --git a/test/test.contextmenu-shadowdom.browser.ts b/test/test.contextmenu-shadowdom.chromium.ts similarity index 100% rename from test/test.contextmenu-shadowdom.browser.ts rename to test/test.contextmenu-shadowdom.chromium.ts diff --git a/test/test.contextmenu.browser.ts b/test/test.contextmenu.chromium.ts similarity index 100% rename from test/test.contextmenu.browser.ts rename to test/test.contextmenu.chromium.ts diff --git a/test/test.shadow-dom-containment.browser.ts b/test/test.shadow-dom-containment.chromium.ts similarity index 100% rename from test/test.shadow-dom-containment.browser.ts rename to test/test.shadow-dom-containment.chromium.ts diff --git a/test/test.tabs-indicator.browser.ts b/test/test.tabs-indicator.chromium.ts similarity index 100% rename from test/test.tabs-indicator.browser.ts rename to test/test.tabs-indicator.chromium.ts diff --git a/test/test.wysiwyg-basic.browser.ts b/test/test.wysiwyg-basic.chromium.ts similarity index 100% rename from test/test.wysiwyg-basic.browser.ts rename to test/test.wysiwyg-basic.chromium.ts diff --git a/test/test.wysiwyg-blockmovement.browser.ts b/test/test.wysiwyg-blockmovement.chromium.ts similarity index 100% rename from test/test.wysiwyg-blockmovement.browser.ts rename to test/test.wysiwyg-blockmovement.chromium.ts diff --git a/test/test.wysiwyg-blocks-debug.browser.ts b/test/test.wysiwyg-blocks-debug.chromium.ts similarity index 100% rename from test/test.wysiwyg-blocks-debug.browser.ts rename to test/test.wysiwyg-blocks-debug.chromium.ts diff --git a/test/test.wysiwyg-blocks.browser.ts b/test/test.wysiwyg-blocks.chromium.ts similarity index 100% rename from test/test.wysiwyg-blocks.browser.ts rename to test/test.wysiwyg-blocks.chromium.ts diff --git a/test/test.wysiwyg-blocktype-change.browser.ts b/test/test.wysiwyg-blocktype-change.chromium.ts similarity index 100% rename from test/test.wysiwyg-blocktype-change.browser.ts rename to test/test.wysiwyg-blocktype-change.chromium.ts diff --git a/test/test.wysiwyg-contextmenu.browser.ts b/test/test.wysiwyg-contextmenu.chromium.ts similarity index 100% rename from test/test.wysiwyg-contextmenu.browser.ts rename to test/test.wysiwyg-contextmenu.chromium.ts diff --git a/test/test.wysiwyg-dragdrop-simple.browser.ts b/test/test.wysiwyg-dragdrop-simple.chromium.ts similarity index 100% rename from test/test.wysiwyg-dragdrop-simple.browser.ts rename to test/test.wysiwyg-dragdrop-simple.chromium.ts diff --git a/test/test.wysiwyg-dragdrop-visual.browser.ts b/test/test.wysiwyg-dragdrop-visual.chromium.ts similarity index 100% rename from test/test.wysiwyg-dragdrop-visual.browser.ts rename to test/test.wysiwyg-dragdrop-visual.chromium.ts diff --git a/test/test.wysiwyg-dragdrop.browser.ts b/test/test.wysiwyg-dragdrop.chromium.ts similarity index 100% rename from test/test.wysiwyg-dragdrop.browser.ts rename to test/test.wysiwyg-dragdrop.chromium.ts diff --git a/test/test.wysiwyg-dragissue.browser.ts b/test/test.wysiwyg-dragissue.chromium.ts similarity index 100% rename from test/test.wysiwyg-dragissue.browser.ts rename to test/test.wysiwyg-dragissue.chromium.ts diff --git a/test/test.wysiwyg-dropindicator.browser.ts b/test/test.wysiwyg-dropindicator.chromium.ts similarity index 100% rename from test/test.wysiwyg-dropindicator.browser.ts rename to test/test.wysiwyg-dropindicator.chromium.ts diff --git a/test/test.wysiwyg-eventlisteners.browser.ts b/test/test.wysiwyg-eventlisteners.chromium.ts similarity index 100% rename from test/test.wysiwyg-eventlisteners.browser.ts rename to test/test.wysiwyg-eventlisteners.chromium.ts diff --git a/test/test.wysiwyg-keyboard.browser.ts b/test/test.wysiwyg-keyboard.chromium.ts similarity index 100% rename from test/test.wysiwyg-keyboard.browser.ts rename to test/test.wysiwyg-keyboard.chromium.ts diff --git a/test/test.wysiwyg-phase3.browser.ts b/test/test.wysiwyg-phase3.chromium.ts similarity index 100% rename from test/test.wysiwyg-phase3.browser.ts rename to test/test.wysiwyg-phase3.chromium.ts diff --git a/test/test.wysiwyg-selection-highlight.browser.ts b/test/test.wysiwyg-selection-highlight.chromium.ts similarity index 100% rename from test/test.wysiwyg-selection-highlight.browser.ts rename to test/test.wysiwyg-selection-highlight.chromium.ts diff --git a/test/test.wysiwyg-selection-simple.browser.ts b/test/test.wysiwyg-selection-simple.chromium.ts similarity index 100% rename from test/test.wysiwyg-selection-simple.browser.ts rename to test/test.wysiwyg-selection-simple.chromium.ts diff --git a/test/test.wysiwyg-split.browser.ts b/test/test.wysiwyg-split.chromium.ts similarity index 100% rename from test/test.wysiwyg-split.browser.ts rename to test/test.wysiwyg-split.chromium.ts diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 1a141d1..eb83c9b 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '3.30.1', + version: '3.31.0', description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' } diff --git a/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts b/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts index 2df4113..e2213f5 100644 --- a/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts +++ b/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts @@ -64,6 +64,26 @@ export class DeesInputList extends DeesInputBase { @state() accessor dragOverIndex: number = -1; + // Enhanced drag state for interactive reordering + @state() + accessor dragStartY: number = 0; + + @state() + accessor dragCurrentY: number = 0; + + @state() + accessor targetIndex: number = -1; + + @state() + accessor itemHeight: number = 0; + + // Bound event handlers for cleanup + private boundHandleGlobalDragOver: ((e: DragEvent) => void) | null = null; + private boundHandleGlobalDragEnd: (() => void) | null = null; + + // Store original item positions for accurate hit detection (before transforms) + private originalItemRects: DOMRect[] = []; + public static styles = [ themeDefaultStyles, ...DeesInputBase.baseStyles, @@ -113,7 +133,7 @@ export class DeesInputList extends DeesInputBase { padding: 12px 16px; border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')}; - transition: all 0.15s ease; + transition: transform 0.2s ease, background 0.15s ease, box-shadow 0.15s ease; position: relative; overflow: hidden; /* Prevent animation from affecting scroll bounds */ } @@ -122,20 +142,31 @@ export class DeesInputList extends DeesInputBase { border-bottom: none; } - .list-item:hover:not(.disabled) { + .list-items:not(.is-dragging) .list-item:hover:not(.disabled) { background: ${cssManager.bdTheme('hsl(0 0% 97.5%)', 'hsl(0 0% 6.9%)')}; } + /* Dragging item - follows cursor */ .list-item.dragging { - opacity: 0.4; - background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 10.8%)')}; + position: relative; + z-index: 100; + background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 12%)')}; + box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(0, 0, 0, 0.4)')}; + border-radius: 6px; + transition: box-shadow 0.15s ease, background 0.15s ease; } - .list-item.drag-over { - background: ${cssManager.bdTheme('hsl(210 40% 93.1%)', 'hsl(215 20.2% 13.8%)')}; - border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')}; + /* Items that need to move up to make space */ + .list-item.move-up { + transform: translateY(calc(-1 * var(--item-height, 48px))); } + /* Items that need to move down to make space */ + .list-item.move-down { + transform: translateY(var(--item-height, 48px)); + } + + .drag-handle { display: flex; align-items: center; @@ -313,27 +344,9 @@ export class DeesInputList extends DeesInputBase { background: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 34.9%)')}; } - /* Animation for adding/removing items */ - @keyframes slideIn { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0); - } - } - - .list-item { - animation: slideIn 0.2s ease; - } - - /* Override any inherited contain/content-visibility that might cause scrolling issues */ - .list-items, .list-item { - content-visibility: visible !important; - contain: none !important; - contain-intrinsic-size: auto !important; + /* Disable transitions during drop to prevent flash */ + .list-items.dropping .list-item { + transition: none !important; } `, ]; @@ -347,12 +360,11 @@ export class DeesInputList extends DeesInputBase {
${this.value.length > 0 ? this.value.map((item, index) => html`
this.handleDragStart(e, index)} @dragend=${this.handleDragEnd} @dragover=${(e: DragEvent) => this.handleDragOver(e, index)} - @dragleave=${this.handleDragLeave} @drop=${(e: DragEvent) => this.handleDrop(e, index)} > ${this.sortable && !this.disabled ? html` @@ -547,48 +559,313 @@ export class DeesInputList extends DeesInputBase { return confirm(message); } - // Drag and drop handlers + // Drag and drop handlers - Interactive implementation private handleDragStart(e: DragEvent, index: number) { if (!this.sortable || this.disabled) return; - + this.draggedIndex = index; + this.targetIndex = index; e.dataTransfer!.effectAllowed = 'move'; e.dataTransfer!.setData('text/plain', index.toString()); + + // Hide the default drag image + const emptyImg = new Image(); + emptyImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs='; + e.dataTransfer!.setDragImage(emptyImg, 0, 0); + + // Store initial mouse position + this.dragStartY = e.clientY; + this.dragCurrentY = e.clientY; + + // Measure item height and store all original positions before any transforms + const listItems = this.shadowRoot?.querySelector('.list-items'); + const allItems = Array.from(listItems?.querySelectorAll('.list-item') || []) as HTMLElement[]; + + if (allItems[index]) { + this.itemHeight = allItems[index].offsetHeight; + } + + // Store original positions for accurate hit detection (before any transforms are applied) + this.originalItemRects = allItems.map(item => item.getBoundingClientRect()); + + // Add class to container + listItems?.classList.add('is-dragging'); + + // Set up global event listeners + this.boundHandleGlobalDragOver = this.handleGlobalDragOver.bind(this); + this.boundHandleGlobalDragEnd = this.handleGlobalDragEnd.bind(this); + document.addEventListener('dragover', this.boundHandleGlobalDragOver); + document.addEventListener('dragend', this.boundHandleGlobalDragEnd); + } + + private handleGlobalDragOver(e: DragEvent) { + e.preventDefault(); + if (this.draggedIndex === -1) return; + + this.dragCurrentY = e.clientY; + + // Calculate which position the item should move to + const listItems = this.shadowRoot?.querySelector('.list-items'); + if (!listItems) return; + + const items = Array.from(listItems.querySelectorAll('.list-item')) as HTMLElement[]; + const draggedElement = items[this.draggedIndex]; + if (!draggedElement) return; + + // Apply transform to dragged item + const deltaY = this.dragCurrentY - this.dragStartY; + draggedElement.style.transform = `translateY(${deltaY}px)`; + + // Calculate the dragged item's current center position + const draggedRect = this.originalItemRects[this.draggedIndex]; + if (!draggedRect) return; + const draggedCenter = draggedRect.top + draggedRect.height / 2 + deltaY; + + // Determine target index: swap when dragged item's center crosses another item's center + // Account for items that have already shifted (their visual position changed) + let newTargetIndex = this.draggedIndex; + + for (let i = 0; i < items.length; i++) { + if (i === this.draggedIndex) continue; + + const rect = this.originalItemRects[i]; + if (!rect) continue; + + // Adjust item center based on whether it has shifted + let itemCenter = rect.top + rect.height / 2; + + // If item has moved, use its shifted position + if (items[i].classList.contains('move-up')) { + itemCenter -= this.itemHeight; + } else if (items[i].classList.contains('move-down')) { + itemCenter += this.itemHeight; + } + + if (draggedCenter < itemCenter && i < this.draggedIndex) { + newTargetIndex = i; + break; + } else if (draggedCenter > itemCenter && i > this.draggedIndex) { + newTargetIndex = i; + } + } + + // Update target index and apply move classes + if (newTargetIndex !== this.targetIndex) { + this.targetIndex = newTargetIndex; + this.updateItemPositions(items); + } + } + + private updateItemPositions(items: HTMLElement[]) { + const draggedIdx = this.draggedIndex; + const targetIdx = this.targetIndex; + + // Set CSS variable for item height + const listItems = this.shadowRoot?.querySelector('.list-items') as HTMLElement; + if (listItems) { + listItems.style.setProperty('--item-height', `${this.itemHeight}px`); + } + + items.forEach((item, i) => { + if (i === draggedIdx) return; // Skip dragged item + + item.classList.remove('move-up', 'move-down'); + item.style.setProperty('--item-height', `${this.itemHeight}px`); + + if (draggedIdx < targetIdx) { + // Dragging down: items between draggedIdx and targetIdx move up + if (i > draggedIdx && i <= targetIdx) { + item.classList.add('move-up'); + } + } else if (draggedIdx > targetIdx) { + // Dragging up: items between targetIdx and draggedIdx move down + if (i >= targetIdx && i < draggedIdx) { + item.classList.add('move-down'); + } + } + }); + } + + private handleGlobalDragEnd() { + // Clean up event listeners + if (this.boundHandleGlobalDragOver) { + document.removeEventListener('dragover', this.boundHandleGlobalDragOver); + this.boundHandleGlobalDragOver = null; + } + if (this.boundHandleGlobalDragEnd) { + document.removeEventListener('dragend', this.boundHandleGlobalDragEnd); + this.boundHandleGlobalDragEnd = null; + } + + const listItems = this.shadowRoot?.querySelector('.list-items'); + const items = listItems?.querySelectorAll('.list-item') as NodeListOf; + const draggedElement = items?.[this.draggedIndex]; + + // If no reorder needed, animate back and clean up + if (this.draggedIndex === -1 || this.targetIndex === -1 || this.draggedIndex === this.targetIndex) { + // Animate dragged item back to original position + if (draggedElement && this.draggedIndex !== -1) { + draggedElement.style.transition = 'transform 0.15s ease'; + draggedElement.style.transform = 'translateY(0)'; + + let handled = false; + const onReturn = () => { + if (handled) return; + handled = true; + draggedElement.removeEventListener('transitionend', onReturn); + this.cleanupDragState(listItems, items); + }; + + draggedElement.addEventListener('transitionend', onReturn, { once: true }); + setTimeout(onReturn, 200); + } else { + this.cleanupDragState(listItems, items); + } + return; + } + + // Calculate final position for dragged item + const draggedRect = this.originalItemRects[this.draggedIndex]; + const targetRect = this.originalItemRects[this.targetIndex]; + + if (!draggedRect || !targetRect || !draggedElement) { + this.cleanupDragState(listItems, items); + return; + } + + // Calculate where dragged item needs to go + let finalY: number; + if (this.targetIndex > this.draggedIndex) { + // Moving down: go to bottom of target + finalY = targetRect.bottom - draggedRect.bottom; + } else { + // Moving up: go to top of target + finalY = targetRect.top - draggedRect.top; + } + + // Animate dragged item to final position + draggedElement.style.transition = 'transform 0.15s ease'; + draggedElement.style.transform = `translateY(${finalY}px)`; + + // After animation completes, update data + let handled = false; + const onTransitionEnd = () => { + if (handled) return; + handled = true; + draggedElement.removeEventListener('transitionend', onTransitionEnd); + + // Disable all transitions + listItems?.classList.add('dropping'); + + // Force reflow so dropping class takes effect immediately + void (listItems as HTMLElement)?.offsetHeight; + + // Clean up all element state + items?.forEach(item => { + item.classList.remove('move-up', 'move-down', 'dragging'); + item.style.removeProperty('transform'); + item.style.removeProperty('transition'); + }); + + // Update data + const newValue = [...this.value]; + const [draggedItem] = newValue.splice(this.draggedIndex, 1); + newValue.splice(this.targetIndex, 0, draggedItem); + this.value = newValue; + this.emitChange(); + + // Reset state + this.draggedIndex = -1; + this.dragOverIndex = -1; + this.targetIndex = -1; + this.dragStartY = 0; + this.dragCurrentY = 0; + this.originalItemRects = []; + + // After render, ensure no animation then re-enable transitions + this.updateComplete.then(() => { + // Set inline transition:none on fresh elements + const freshItems = this.shadowRoot?.querySelectorAll('.list-item') as NodeListOf; + freshItems?.forEach(item => { + item.style.transition = 'none'; + }); + + // Force reflow + void (this.shadowRoot?.querySelector('.list-items') as HTMLElement)?.offsetHeight; + + // Now re-enable transitions + requestAnimationFrame(() => { + freshItems?.forEach(item => { + item.style.removeProperty('transition'); + }); + listItems?.classList.remove('dropping', 'is-dragging'); + }); + }); + }; + + draggedElement.addEventListener('transitionend', onTransitionEnd, { once: true }); + + // Fallback timeout in case transitionend doesn't fire + setTimeout(onTransitionEnd, 200); + } + + private cleanupDragState(listItems: Element | null | undefined, items: NodeListOf | undefined) { + listItems?.classList.add('dropping'); + + // Force reflow so dropping class takes effect immediately + void (listItems as HTMLElement)?.offsetHeight; + + items?.forEach(item => { + item.classList.remove('move-up', 'move-down', 'dragging'); + item.style.removeProperty('transform'); + item.style.removeProperty('transition'); + }); + + this.draggedIndex = -1; + this.dragOverIndex = -1; + this.targetIndex = -1; + this.dragStartY = 0; + this.dragCurrentY = 0; + this.originalItemRects = []; + + this.updateComplete.then(() => { + const freshItems = this.shadowRoot?.querySelectorAll('.list-item') as NodeListOf; + freshItems?.forEach(item => { + item.style.transition = 'none'; + }); + + void (this.shadowRoot?.querySelector('.list-items') as HTMLElement)?.offsetHeight; + + requestAnimationFrame(() => { + freshItems?.forEach(item => { + item.style.removeProperty('transition'); + }); + listItems?.classList.remove('dropping', 'is-dragging'); + }); + }); } private handleDragEnd() { - this.draggedIndex = -1; - this.dragOverIndex = -1; + // This is called by the native dragend on the element + // The actual cleanup is done in handleGlobalDragEnd + this.handleGlobalDragEnd(); } private handleDragOver(e: DragEvent, index: number) { if (!this.sortable || this.disabled) return; - e.preventDefault(); e.dataTransfer!.dropEffect = 'move'; - this.dragOverIndex = index; + // We handle positioning in handleGlobalDragOver now } private handleDragLeave() { - this.dragOverIndex = -1; + // No longer needed for visual feedback - handled by transform } private handleDrop(e: DragEvent, dropIndex: number) { if (!this.sortable || this.disabled) return; - e.preventDefault(); - const draggedIndex = parseInt(e.dataTransfer!.getData('text/plain')); - - if (draggedIndex !== dropIndex) { - const newValue = [...this.value]; - const [draggedItem] = newValue.splice(draggedIndex, 1); - newValue.splice(dropIndex, 0, draggedItem); - this.value = newValue; - this.emitChange(); - } - - this.draggedIndex = -1; - this.dragOverIndex = -1; + // The actual reorder happens in handleGlobalDragEnd } private emitChange() {