From 34278c4b043f4239ff7cd33254d98f5623edb15a Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Thu, 11 Dec 2025 19:16:12 +0000 Subject: [PATCH] fix(viewer): Improve sidebar resizing UX and update deps --- changelog.md | 9 +++++++++ package.json | 4 ++-- pnpm-lock.yaml | 29 ++++++++++++++++++++++------- ts/00_commitinfo_data.ts | 2 +- ts_web/00_commitinfo_data.ts | 2 +- ts_web/elements/viewer.ts | 8 +++++++- 6 files changed, 42 insertions(+), 12 deletions(-) diff --git a/changelog.md b/changelog.md index bd659b9..4519fb2 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,14 @@ # Changelog +## 2025-12-11 - 2.1.1 - fix(viewer) +Improve sidebar resizing UX and update deps + +- Add smooth width transition for the thumbnail sidebar to improve resize visuals +- Disable viewport CSS transitions while user is actively resizing the sidebar to avoid janky animations +- Mark viewport as resizing in classes so layout updates skip transitions during drag +- Make sidebar resize mousemove listener passive to improve scrolling/interaction performance +- Bump @design.estate/dees-wcctools to ^2.0.0 and @git.zone/tswatch to ^2.3.11 + ## 2025-12-11 - 2.1.0 - feat(viewer) Add smooth zoom and scroll animations to viewer diff --git a/package.json b/package.json index 00ca45b..b4ce620 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@design.estate/dees-catalog": "^3.3.0", "@design.estate/dees-domtools": "^2.3.6", "@design.estate/dees-element": "^2.1.3", - "@design.estate/dees-wcctools": "^1.3.0", + "@design.estate/dees-wcctools": "^2.0.0", "@git.zone/tsrun": "^2.0.0", "@push.rocks/smartfile": "^13.1.0", "@push.rocks/smartfs": "^1.2.0", @@ -42,7 +42,7 @@ "@git.zone/tsbuild": "^3.1.2", "@git.zone/tsbundle": "^2.6.3", "@git.zone/tstest": "^3.1.3", - "@git.zone/tswatch": "^2.3.10", + "@git.zone/tswatch": "^2.3.11", "@push.rocks/projectinfo": "^5.0.2" }, "files": [ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c167766..c5cb510 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,8 +18,8 @@ importers: specifier: ^2.1.3 version: 2.1.3 '@design.estate/dees-wcctools': - specifier: ^1.3.0 - version: 1.3.0 + specifier: ^2.0.0 + version: 2.0.0 '@git.zone/tsrun': specifier: ^2.0.0 version: 2.0.0 @@ -67,8 +67,8 @@ importers: specifier: ^3.1.3 version: 3.1.3(@push.rocks/smartserve@1.4.0)(socks@2.8.7)(typescript@5.9.3) '@git.zone/tswatch': - specifier: ^2.3.10 - version: 2.3.10(@tiptap/pm@2.27.1) + specifier: ^2.3.11 + version: 2.3.11(@tiptap/pm@2.27.1) '@push.rocks/projectinfo': specifier: ^5.0.2 version: 5.0.2 @@ -304,6 +304,9 @@ packages: '@design.estate/dees-wcctools@1.3.0': resolution: {integrity: sha512-+yd8c1gTIKNRQYCvG0xu6Am8dHsRm7ymluX2gnoBQN4aFOpZgIBi/v9CvGyPhTD1p/VRouIBz1wsUCejnwrFCA==} + '@design.estate/dees-wcctools@2.0.0': + resolution: {integrity: sha512-+JXzU/FzOs48NcynbozX0lPfvszhp0mODdZU2ECCTkwOQi+0smhYAlFTUNZ8JcWSLDq3g5HqRMv7XoJELMk4Zw==} + '@emnapi/core@1.7.1': resolution: {integrity: sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg==} @@ -509,8 +512,8 @@ packages: resolution: {integrity: sha512-t+/cKV21JHK8X7NGAmihs5M/eMm+V+jn4R5rzfwGG97WJFAcP5qE1Os9VYtyZw3tx/NZXA2yA4abo/ELluTuRA==} hasBin: true - '@git.zone/tswatch@2.3.10': - resolution: {integrity: sha512-88bdzD15mYoG0T0AUTg8ATNkV/dN5ecqfiYcQRX1gJHmLrE2yqymFGkb0W0/xWgpcRakc08V+wRbSI7pqg+EOQ==} + '@git.zone/tswatch@2.3.11': + resolution: {integrity: sha512-FJWOsPQ9i0INn1i7uqMD0ECrZ6bwwGQC8oFDEx9PLcaS+qHpGsYj3P9UscpW1N78P+6Yd1WFUfBh9sUQiKm+KA==} hasBin: true '@happy-dom/global-registrator@15.11.7': @@ -5002,6 +5005,18 @@ snapshots: - supports-color - vue + '@design.estate/dees-wcctools@2.0.0': + dependencies: + '@design.estate/dees-domtools': 2.3.6 + '@design.estate/dees-element': 2.1.3 + '@push.rocks/smartdelay': 3.0.5 + lit: 3.3.1 + transitivePeerDependencies: + - '@nuxt/kit' + - react + - supports-color + - vue + '@emnapi/core@1.7.1': dependencies: '@emnapi/wasi-threads': 1.1.0 @@ -5230,7 +5245,7 @@ snapshots: - utf-8-validate - vue - '@git.zone/tswatch@2.3.10(@tiptap/pm@2.27.1)': + '@git.zone/tswatch@2.3.11(@tiptap/pm@2.27.1)': dependencies: '@api.global/typedserver': 7.11.1(@tiptap/pm@2.27.1) '@git.zone/tsbundle': 2.6.3 diff --git a/ts/00_commitinfo_data.ts b/ts/00_commitinfo_data.ts index e9826ac..6dc5b22 100644 --- a/ts/00_commitinfo_data.ts +++ b/ts/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-document', - version: '2.1.0', + version: '2.1.1', description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.' } diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index e9826ac..6dc5b22 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-document', - version: '2.1.0', + version: '2.1.1', description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.' } diff --git a/ts_web/elements/viewer.ts b/ts_web/elements/viewer.ts index 94a01a0..83185a9 100644 --- a/ts_web/elements/viewer.ts +++ b/ts_web/elements/viewer.ts @@ -142,6 +142,7 @@ export class DeDocumentViewer extends DeesElement { flex-direction: column; z-index: 50; box-sizing: border-box; + transition: width 0.2s ease; } .sidebar--collapsed { @@ -551,6 +552,10 @@ export class DeDocumentViewer extends DeesElement { transition: left 0.2s ease; } + .viewport--resizing { + transition: none !important; + } + .viewport--with-sidebar { left: var(--current-sidebar-width, 140px); } @@ -621,6 +626,7 @@ export class DeDocumentViewer extends DeesElement { "viewport", this.zoomMode !== "auto" ? "viewport--centered" : "", this.showThumbnails ? "viewport--with-sidebar" : "", + this.isResizingSidebar ? "viewport--resizing" : "", ].filter(Boolean).join(" "); return html` @@ -1004,7 +1010,7 @@ export class DeDocumentViewer extends DeesElement { document.body.style.userSelect = ""; }; - document.addEventListener("mousemove", onMouseMove); + document.addEventListener("mousemove", onMouseMove, { passive: true }); document.addEventListener("mouseup", onMouseUp); document.body.style.cursor = "ew-resize"; document.body.style.userSelect = "none";