diff --git a/changelog.md b/changelog.md index c5c8b11..314002d 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,13 @@ # Changelog +## 2026-01-04 - 3.5.1 - fix(sidebar) +disable frame CSS transition while user is resizing the sidebar to prevent janky animations + +- Added isResizing boolean property to wcc-frame to toggle transitions during resize +- Set frame.isResizing = true at resize start and false on mouseup to re-enable transitions +- Updated CSS to skip transition while isResizing is true +- Files changed: ts_web/elements/wcc-frame.ts, ts_web/elements/wcc-sidebar.ts + ## 2026-01-04 - 3.5.0 - feat(wcctools) add context menu and pinning support, persist pinned state in URL, and add grouped demo test elements diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index f2796b7..c199f82 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-wcctools', - version: '3.5.0', + version: '3.5.1', description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.' } diff --git a/ts_web/elements/wcc-frame.ts b/ts_web/elements/wcc-frame.ts index e44d106..0709d3d 100644 --- a/ts_web/elements/wcc-frame.ts +++ b/ts_web/elements/wcc-frame.ts @@ -22,6 +22,9 @@ export class WccFrame extends DeesElement { @property({ type: Number }) accessor sidebarWidth: number = 200; + @property({ type: Boolean }) + accessor isResizing: boolean = false; + public static styles = [ css` :host { @@ -59,7 +62,7 @@ export class WccFrame extends DeesElement { border: 10px solid #ffaeaf; left: ${this.sidebarWidth}px; `} - transition: all 0.3s ease; + transition: ${this.isResizing ? 'none' : 'all 0.3s ease'}; ${this.isNative ? 'padding: 0px;' : (() => { switch (this.viewport) { case 'desktop': diff --git a/ts_web/elements/wcc-sidebar.ts b/ts_web/elements/wcc-sidebar.ts index 866fd7e..28d5bab 100644 --- a/ts_web/elements/wcc-sidebar.ts +++ b/ts_web/elements/wcc-sidebar.ts @@ -768,6 +768,11 @@ export class WccSidebar extends DeesElement { const frame = this.dashboardRef?.shadowRoot?.querySelector('wcc-frame') as any; const properties = this.dashboardRef?.shadowRoot?.querySelector('wcc-properties') as any; + // Disable frame transition during resize + if (frame) { + frame.isResizing = true; + } + const onMouseMove = (e: MouseEvent) => { const newWidth = Math.min(400, Math.max(150, startWidth + (e.clientX - startX))); this.sidebarWidth = newWidth; @@ -784,6 +789,10 @@ export class WccSidebar extends DeesElement { this.isResizing = false; document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); + // Re-enable frame transition + if (frame) { + frame.isResizing = false; + } // Dispatch event on release for URL persistence this.dispatchEvent(new CustomEvent('widthChanged', { detail: this.sidebarWidth })); };