From f7e6f63a2224428d7b5fcb97460c8b2379014dc8 Mon Sep 17 00:00:00 2001 From: Old Li Date: Tue, 3 Jun 2025 15:32:21 +0800 Subject: [PATCH 01/11] add zoomSpeed parameter --- src/BootstrapBlazor/wwwroot/modules/viewer.js | 23 +++++++++++++------ 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/src/BootstrapBlazor/wwwroot/modules/viewer.js b/src/BootstrapBlazor/wwwroot/modules/viewer.js index 591c51ef20e..7de439ad77b 100644 --- a/src/BootstrapBlazor/wwwroot/modules/viewer.js +++ b/src/BootstrapBlazor/wwwroot/modules/viewer.js @@ -19,7 +19,8 @@ export default { store: { scale: 1 }, - options: { max: null, min: 0.195 } + options: { max: null, min: 0.195 }, + zoomSpeed: el.querySelector('.bb-viewer-zoomspeed') }, ...config || {} } @@ -145,16 +146,24 @@ export default { // 右旋转功能 EventHandler.on(viewer.rotateRight, 'click', () => viewer.processImage(null, rotate => rotate + 90)) + + // 配置缩放速度因子（值越大缩放越快） + const BASE_SPEED = viewer.zoomSpeed ? viewer.zoomSpeed : 0.015; // 基础速度 + const handlerWheel = e => { - e.preventDefault() - const wheel = e.wheelDelta || -e.detail - const delta = Math.max(-1, Math.min(1, wheel)) + e.preventDefault(); + const wheel = e.wheelDelta || -e.detail; + const delta = Math.max(-1, Math.min(1, wheel)); + + // 动态计算速度（按住Shift时降速） + const zoomStep = e.shiftKey ? BASE_SPEED * 0.2 : BASE_SPEED; + if (delta > 0) { // 放大 - viewer.processImage(scale => scale + 0.015) + viewer.processImage(scale => scale + zoomStep); } else { - // 缩小 - viewer.processImage(scale => Math.max(0.195, scale - 0.015)) + // 缩小（保持最小缩放比例0.195） + viewer.processImage(scale => Math.max(0.195, scale - zoomStep)); } } // 鼠标放大缩小 From 77daacb649c48291fc92843569f135dfd463eb87 Mon Sep 17 00:00:00 2001 From: Old Li Date: Tue, 3 Jun 2025 19:26:01 +0800 Subject: [PATCH 02/11] Add ZoomSpeed parameter and remove zoomSpeed from viewer Introduced a new `ZoomSpeed` property in `ImagePreviewer.razor.cs` to allow configuration of the preview zoom speed, marked with the `[Parameter]` attribute for parent component usage. --- .../Components/ImagePreviewer/ImagePreviewer.razor.cs | 8 +++++++- .../Components/ImagePreviewer/ImagePreviewer.razor.js | 4 ++-- src/BootstrapBlazor/wwwroot/modules/viewer.js | 3 +-- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.cs b/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.cs index e206590c487..44003bb0578 100644 --- a/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.cs +++ b/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.cs @@ -78,6 +78,12 @@ public partial class ImagePreviewer [Parameter] public string? RotateRightIcon { get; set; } + /// + /// 获得/设置 预览缩放速度 + /// + [Parameter] + public double ZoomSpeed { get; set; } + [Inject] [NotNull] private IIconTheme? IconTheme { get; set; } @@ -126,5 +132,5 @@ protected override async Task OnAfterRenderAsync(bool firstRender) /// /// /// - protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, PreviewList); + protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, PreviewList, new { ZoomSpeed }); } diff --git a/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.js b/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.js index 47db46efbd7..8885fe574c3 100644 --- a/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.js +++ b/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.js @@ -1,7 +1,7 @@ import Data from "../../modules/data.js" import Viewer from "../../modules/viewer.js" -export function init(id, prevList) { +export function init(id, prevList, config) { const el = document.getElementById(id) if (el === null) { return @@ -9,7 +9,7 @@ export function init(id, prevList) { const viewer = { el, - viewer: Viewer.init(el, prevList) + viewer: Viewer.init(el, prevList, config) } Data.set(id, viewer) } diff --git a/src/BootstrapBlazor/wwwroot/modules/viewer.js b/src/BootstrapBlazor/wwwroot/modules/viewer.js index 7de439ad77b..1e0baf320ab 100644 --- a/src/BootstrapBlazor/wwwroot/modules/viewer.js +++ b/src/BootstrapBlazor/wwwroot/modules/viewer.js @@ -19,8 +19,7 @@ export default { store: { scale: 1 }, - options: { max: null, min: 0.195 }, - zoomSpeed: el.querySelector('.bb-viewer-zoomspeed') + options: { max: null, min: 0.195 } }, ...config || {} } From efaf7aac4e1766b39dd0774cb210a5810fc8fd96 Mon Sep 17 00:00:00 2001 From: Old Li Date: Tue, 3 Jun 2025 19:49:45 +0800 Subject: [PATCH 03/11] Add ZoomSpeed parameter to ImagePreviewer component Enhance the `ImagePreviewer` in `ImageViewer.razor` by introducing a new `ZoomSpeed` parameter, allowing users to adjust the zoom speed when displaying images. This update also includes the addition of the `ZoomSpeed` property in `ImageViewer.razor.cs`, making it publicly accessible and documented for better usability. --- .../Components/ImageViewer/ImageViewer.razor | 2 +- .../Components/ImageViewer/ImageViewer.razor.cs | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor b/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor index c15f7ce24c0..f4b59419090 100644 --- a/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor +++ b/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor @@ -14,7 +14,7 @@ @if (ShowPreviewList) { - + } diff --git a/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor.cs b/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor.cs index b57753cd4c2..bcf8ddcc453 100644 --- a/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor.cs +++ b/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor.cs @@ -118,6 +118,12 @@ public partial class ImageViewer [Parameter] public bool IsIntersectionObserver { get; set; } + /// + /// 获得/设置 预览缩放速度 + /// + [Parameter] + public double ZoomSpeed { get; set; } + [Inject] [NotNull] private IIconTheme? IconTheme { get; set; } From 82222e403abea260eb228126dce206dc130b7d95 Mon Sep 17 00:00:00 2001 From: Old Li Date: Tue, 3 Jun 2025 19:57:34 +0800 Subject: [PATCH 04/11] Refactor BASE_SPEED definition for clarity Updated the definition of the `BASE_SPEED` constant to use the nullish coalescing operator (`??`) instead of a ternary operator. This change simplifies the code by ensuring `BASE_SPEED` is set to `viewer.zoomSpeed` if defined, or defaults to `0.015` if not. Retained the existing comment for context. --- src/BootstrapBlazor/wwwroot/modules/viewer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BootstrapBlazor/wwwroot/modules/viewer.js b/src/BootstrapBlazor/wwwroot/modules/viewer.js index 1e0baf320ab..0e832f2af58 100644 --- a/src/BootstrapBlazor/wwwroot/modules/viewer.js +++ b/src/BootstrapBlazor/wwwroot/modules/viewer.js @@ -147,7 +147,7 @@ export default { // 配置缩放速度因子（值越大缩放越快） - const BASE_SPEED = viewer.zoomSpeed ? viewer.zoomSpeed : 0.015; // 基础速度 + const BASE_SPEED = viewer.zoomSpeed ?? 0.015; // 基础速度 const handlerWheel = e => { e.preventDefault(); From dca2003662e111520171aa4e357b4cb7dc761665 Mon Sep 17 00:00:00 2001 From: Old Li Date: Tue, 3 Jun 2025 20:07:05 +0800 Subject: [PATCH 05/11] update demo --- .../Components/Samples/ImageViewers.razor | 2 +- src/BootstrapBlazor.Server/Locales/en-US.json | 2 +- src/BootstrapBlazor.Server/Locales/zh-CN.json | 2 +- src/BootstrapBlazor/wwwroot/modules/viewer.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/ImageViewers.razor b/src/BootstrapBlazor.Server/Components/Samples/ImageViewers.razor index 83c2dd16e31..9fc3289c4a5 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/ImageViewers.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/ImageViewers.razor @@ -116,7 +116,7 @@ Name="PreviewList">
- +
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 52240212062..df9c0359079 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -5914,7 +5914,7 @@ "ImageViewerErrorTemplateTitle": "Load failed", "ImageViewerErrorTemplateIntro": "Can be set up by the Error Template open Error Template function, Url parameter Url unable to load images displayed when the content of the Template", "ImageViewerPreviewListTitle": "A larger preview", - "ImageViewerPreviewListIntro": "Can be set up by the Preview List opens a larger Preview of the function", + "ImageViewerPreviewListIntro": "Can be set up by the Preview List opens a larger Preview of the function,Set ZoomSpeed to control the speed of scrolling and scaling", "ImageViewersAttrUrl": "Picture Url", "ImageViewersAttrAlt": "Native Alt attribute", "ImageViewersAttrShowPlaceHolder": "Whether display placeholder for large images added", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 12e9dad5b55..e9831953c1d 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -5914,7 +5914,7 @@ "ImageViewerErrorTemplateTitle": "加载失败", "ImageViewerErrorTemplateIntro": "可通过设置 ErrorTemplate 开启错误模板功能，参数 Url 无法加载图片时显示此模板内容", "ImageViewerPreviewListTitle": "大图预览", - "ImageViewerPreviewListIntro": "可通过设置 PreviewList 开启预览大图的功能", + "ImageViewerPreviewListIntro": "可通过设置 PreviewList 开启预览大图的功能,设置 ZoomSpeed 控制滚动缩放时的速度", "ImageViewersAttrUrl": "图片 Url", "ImageViewersAttrAlt": "原生 alt 属性", "ImageViewersAttrShowPlaceHolder": "是否显示占位符 适用于大图片加载", diff --git a/src/BootstrapBlazor/wwwroot/modules/viewer.js b/src/BootstrapBlazor/wwwroot/modules/viewer.js index 0e832f2af58..1e0baf320ab 100644 --- a/src/BootstrapBlazor/wwwroot/modules/viewer.js +++ b/src/BootstrapBlazor/wwwroot/modules/viewer.js @@ -147,7 +147,7 @@ export default { // 配置缩放速度因子（值越大缩放越快） - const BASE_SPEED = viewer.zoomSpeed ?? 0.015; // 基础速度 + const BASE_SPEED = viewer.zoomSpeed ? viewer.zoomSpeed : 0.015; // 基础速度 const handlerWheel = e => { e.preventDefault(); From d20ca17b58dc5000524ef3d7a79be0c965c7cf80 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 4 Jun 2025 08:33:07 +0800 Subject: [PATCH 06/11] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E6=A0=BC?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Server/Locales/en-US.json | 2 +- src/BootstrapBlazor.Server/Locales/zh-CN.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index df9c0359079..872ce12f3b0 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -5914,7 +5914,7 @@ "ImageViewerErrorTemplateTitle": "Load failed", "ImageViewerErrorTemplateIntro": "Can be set up by the Error Template open Error Template function, Url parameter Url unable to load images displayed when the content of the Template", "ImageViewerPreviewListTitle": "A larger preview", - "ImageViewerPreviewListIntro": "Can be set up by the Preview List opens a larger Preview of the function,Set ZoomSpeed to control the speed of scrolling and scaling", + "ImageViewerPreviewListIntro": "Can be set up by the Preview List opens a larger Preview of the function, set ZoomSpeed to control the speed of scrolling and scaling", "ImageViewersAttrUrl": "Picture Url", "ImageViewersAttrAlt": "Native Alt attribute", "ImageViewersAttrShowPlaceHolder": "Whether display placeholder for large images added", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index e9831953c1d..a7742e06cc4 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -5914,7 +5914,7 @@ "ImageViewerErrorTemplateTitle": "加载失败", "ImageViewerErrorTemplateIntro": "可通过设置 ErrorTemplate 开启错误模板功能，参数 Url 无法加载图片时显示此模板内容", "ImageViewerPreviewListTitle": "大图预览", - "ImageViewerPreviewListIntro": "可通过设置 PreviewList 开启预览大图的功能,设置 ZoomSpeed 控制滚动缩放时的速度", + "ImageViewerPreviewListIntro": "可通过设置 PreviewList 开启预览大图的功能，设置 ZoomSpeed 控制滚动缩放时的速度", "ImageViewersAttrUrl": "图片 Url", "ImageViewersAttrAlt": "原生 alt 属性", "ImageViewersAttrShowPlaceHolder": "是否显示占位符 适用于大图片加载", From 786cbacafff7d013b4d18e9424869e0b2358bcac Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 4 Jun 2025 08:33:17 +0800 Subject: [PATCH 07/11] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=E6=B3=A8?= =?UTF-8?q?=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/wwwroot/modules/viewer.js | 74 ++++--------------- 1 file changed, 14 insertions(+), 60 deletions(-) diff --git a/src/BootstrapBlazor/wwwroot/modules/viewer.js b/src/BootstrapBlazor/wwwroot/modules/viewer.js index 1e0baf320ab..82661fe48d5 100644 --- a/src/BootstrapBlazor/wwwroot/modules/viewer.js +++ b/src/BootstrapBlazor/wwwroot/modules/viewer.js @@ -31,7 +31,6 @@ export default { viewer.pt = { top: 0, left: 0 } viewer.updateImage(viewer.index) - // // 消除 body 滚动条 viewer.body.classList.add('is-img-preview') viewer.el.classList.add('show') } @@ -101,15 +100,12 @@ export default { viewer.prevImg.style.marginTop = `${top}px` } - // 关闭按钮处理事件 EventHandler.on(viewer.closeButton, 'click', () => { viewer.body.classList.remove('is-img-preview') - // 恢复 Image viewer.resetImage() viewer.el.classList.remove('show') }) - // 上一张按钮处理事件 EventHandler.on(el, 'click', '.bb-viewer-prev', () => { viewer.index-- if (viewer.index < 0) { @@ -118,7 +114,6 @@ export default { viewer.updateImage(viewer.index) }) - // 下一张按钮处理事件 EventHandler.on(el, 'click', '.bb-viewer-next', () => { viewer.index++ if (viewer.index >= viewer.prevList.length) { @@ -127,75 +122,61 @@ export default { viewer.updateImage(viewer.index) }) - // 全屏/恢复按钮功能 EventHandler.on(viewer.fullScreen, 'click', () => { viewer.resetImage() viewer.el.classList.toggle('active') }) - // 放大功能 EventHandler.on(viewer.zoomOut, 'click', () => viewer.processImage(scale => scale + 0.2)) - - // 缩小功能 EventHandler.on(viewer.zoomIn, 'click', () => viewer.processImage(scale => Math.max(0.2, scale - 0.2))) - - // 左旋转功能 EventHandler.on(viewer.rotateLeft, 'click', () => viewer.processImage(null, rotate => rotate - 90)) - - // 右旋转功能 EventHandler.on(viewer.rotateRight, 'click', () => viewer.processImage(null, rotate => rotate + 90)) - - // 配置缩放速度因子（值越大缩放越快） - const BASE_SPEED = viewer.zoomSpeed ? viewer.zoomSpeed : 0.015; // 基础速度 + const BASE_SPEED = viewer.zoomSpeed ? viewer.zoomSpeed : 0.015; const handlerWheel = e => { e.preventDefault(); const wheel = e.wheelDelta || -e.detail; const delta = Math.max(-1, Math.min(1, wheel)); - // 动态计算速度（按住Shift时降速） const zoomStep = e.shiftKey ? BASE_SPEED * 0.2 : BASE_SPEED; if (delta > 0) { - // 放大 viewer.processImage(scale => scale + zoomStep); - } else { - // 缩小（保持最小缩放比例0.195） + } + else { viewer.processImage(scale => Math.max(0.195, scale - zoomStep)); } } - // 鼠标放大缩小 + EventHandler.on(viewer.prevImg, 'mousewheel', handlerWheel) EventHandler.on(viewer.prevImg, 'DOMMouseScroll', handlerWheel) - - // 点击遮罩关闭功能 EventHandler.on(viewer.mask, 'click', () => { viewer.closeButton.click() }) - - // 增加键盘支持 EventHandler.on(document, 'keydown', e => { if (e.key === "ArrowUp") { viewer.zoomOut.click() - } else if (e.key === "ArrowDown") { + } + else if (e.key === "ArrowDown") { viewer.zoomIn.click() - } else if (e.key === "ArrowLeft") { + } + else if (e.key === "ArrowLeft") { const prevButton = viewer.el.querySelector('.bb-viewer-prev') if (prevButton) { prevButton.click() } - } else if (e.key === "ArrowRight") { + } + else if (e.key === "ArrowRight") { const nextButton = viewer.el.querySelector('.bb-viewer-next') if (nextButton) { nextButton.click() } - } else if (e.key === "Escape") { + } + else if (e.key === "Escape") { viewer.closeButton.click() } }) - - // 缩放处理 EventHandler.on(viewer.prevImg, 'touchstart', e => { e.preventDefault() @@ -286,8 +267,6 @@ export default { e => { viewer.originX = e.clientX || e.touches[0].clientX viewer.originY = e.clientY || e.touches[0].clientY - - // 偏移量 viewer.pt.top = parseInt(viewer.prevImg.style.marginTop) viewer.pt.left = parseInt(viewer.prevImg.style.marginLeft) @@ -317,48 +296,23 @@ export default { }, dispose(viewer) { - - // 关闭按钮处理事件 EventHandler.off(viewer.closeButton, 'click') - - // 上一张按钮处理事件 EventHandler.off(viewer.element, 'click', '.bb-viewer-prev') - - // 下一张按钮处理事件 EventHandler.off(viewer.element, 'click', '.bb-viewer-next') - - // 全屏/恢复按钮功能 EventHandler.off(viewer.fullScreen, 'click') - - // 放大功能 EventHandler.off(viewer.zoomOut, 'click') - - // 缩小功能 EventHandler.off(viewer.zoomIn, 'click') - - // 左旋转功能 EventHandler.off(viewer.rotateLeft, 'click') - - // 右旋转功能 EventHandler.off(viewer.rotateRight, 'click') - - // 鼠标放大缩小 EventHandler.off(viewer.prevImg, 'mousewheel') EventHandler.off(viewer.prevImg, 'DOMMouseScroll') - - // 触摸放大缩小 EventHandler.off(viewer.prevImg, 'touchstart') EventHandler.off(viewer.prevImg, 'touchmove') EventHandler.off(viewer.prevImg, 'touchend') EventHandler.off(viewer.prevImg, 'touchcancel') - - //drag - Drag.dispose(viewer.prevImg) - - // 点击遮罩关闭功能 EventHandler.off(viewer.mask, 'click') - - // 增加键盘支持 EventHandler.off(document, 'keydown') + + Drag.dispose(viewer.prevImg) } } From 40189af616b430feb1a5b01887dfbb9411411cd1 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 4 Jun 2025 08:50:30 +0800 Subject: [PATCH 08/11] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=94=B9=E5=8F=82?= =?UTF-8?q?=E6=95=B0=E4=B8=BA=E5=8F=AF=E4=B8=BA=E7=A9=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/ImagePreviewer/ImagePreviewer.razor.cs | 4 ++-- .../Components/ImageViewer/ImageViewer.razor.cs | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.cs b/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.cs index 44003bb0578..88449f733b4 100644 --- a/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.cs +++ b/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.cs @@ -79,10 +79,10 @@ public partial class ImagePreviewer public string? RotateRightIcon { get; set; } /// - /// 获得/设置 预览缩放速度 + /// 获得/设置 预览缩放速度 默认 null 未设置取 0.015 值 /// [Parameter] - public double ZoomSpeed { get; set; } + public double? ZoomSpeed { get; set; } [Inject] [NotNull] diff --git a/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor.cs b/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor.cs index bcf8ddcc453..5cceae4f324 100644 --- a/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor.cs +++ b/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor.cs @@ -119,10 +119,10 @@ public partial class ImageViewer public bool IsIntersectionObserver { get; set; } /// - /// 获得/设置 预览缩放速度 + /// 获得/设置 预览缩放速度 默认 null 未设置取 0.015 值 /// [Parameter] - public double ZoomSpeed { get; set; } + public double? ZoomSpeed { get; set; } [Inject] [NotNull] From f03161bdeaad6572de389453c61f4ff90849990b Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 4 Jun 2025 08:50:44 +0800 Subject: [PATCH 09/11] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=E9=A2=84?= =?UTF-8?q?=E7=BC=96=E8=AF=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor.cs | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor.cs b/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor.cs index 5cceae4f324..0151b1c070a 100644 --- a/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor.cs +++ b/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor.cs @@ -28,9 +28,7 @@ public partial class ImageViewer /// [Parameter] [NotNull] -#if NET6_0_OR_GREATER [EditorRequired] -#endif public string? Url { get; set; } /// From 395e3dedcd2a315a129f53ffce1448f12e3043ad Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 4 Jun 2025 08:57:41 +0800 Subject: [PATCH 10/11] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=E7=BC=A9?= =?UTF-8?q?=E6=94=BE=E7=8E=87=E6=A3=80=E6=9F=A5=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/wwwroot/modules/viewer.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/BootstrapBlazor/wwwroot/modules/viewer.js b/src/BootstrapBlazor/wwwroot/modules/viewer.js index 82661fe48d5..9128dc535b4 100644 --- a/src/BootstrapBlazor/wwwroot/modules/viewer.js +++ b/src/BootstrapBlazor/wwwroot/modules/viewer.js @@ -3,6 +3,13 @@ import EventHandler from "./event-handler.js" export default { init(el, prevList, config) { + const BASE_SPEED = 0.015; + if (config.zoomSpeed && typeof config.zoomSpeed !== 'number') { + config.zoomSpeed = BASE_SPEED; + } + if (config.zoomSpeed <= 0) { + config.zoomSpeed = BASE_SPEED; + } const viewer = { ...{ el, @@ -132,14 +139,12 @@ export default { EventHandler.on(viewer.rotateLeft, 'click', () => viewer.processImage(null, rotate => rotate - 90)) EventHandler.on(viewer.rotateRight, 'click', () => viewer.processImage(null, rotate => rotate + 90)) - const BASE_SPEED = viewer.zoomSpeed ? viewer.zoomSpeed : 0.015; - const handlerWheel = e => { e.preventDefault(); const wheel = e.wheelDelta || -e.detail; const delta = Math.max(-1, Math.min(1, wheel)); - const zoomStep = e.shiftKey ? BASE_SPEED * 0.2 : BASE_SPEED; + const zoomStep = e.shiftKey ? viewer.zoomSpeed * 0.2 : viewer.zoomSpeed; if (delta > 0) { viewer.processImage(scale => scale + zoomStep); From a84aafcc5ddf6c7bf6d7248a24bf6c6d0e0871e9 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 4 Jun 2025 09:07:55 +0800 Subject: [PATCH 11/11] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20keydown=20?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E9=94=80=E6=AF=81=E5=AF=BC=E8=87=B4=E5=85=B6?= =?UTF-8?q?=E4=BB=96=E9=92=A9=E5=AD=90=E5=A4=B1=E6=95=88=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/wwwroot/modules/viewer.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/BootstrapBlazor/wwwroot/modules/viewer.js b/src/BootstrapBlazor/wwwroot/modules/viewer.js index 9128dc535b4..1ed481cf4f8 100644 --- a/src/BootstrapBlazor/wwwroot/modules/viewer.js +++ b/src/BootstrapBlazor/wwwroot/modules/viewer.js @@ -159,7 +159,8 @@ export default { EventHandler.on(viewer.mask, 'click', () => { viewer.closeButton.click() }) - EventHandler.on(document, 'keydown', e => { + + viewer.keyHandler = e => { if (e.key === "ArrowUp") { viewer.zoomOut.click() } @@ -181,7 +182,8 @@ export default { else if (e.key === "Escape") { viewer.closeButton.click() } - }) + } + EventHandler.on(document, 'keydown', viewer.keyHandler); EventHandler.on(viewer.prevImg, 'touchstart', e => { e.preventDefault() @@ -316,7 +318,7 @@ export default { EventHandler.off(viewer.prevImg, 'touchend') EventHandler.off(viewer.prevImg, 'touchcancel') EventHandler.off(viewer.mask, 'click') - EventHandler.off(document, 'keydown') + EventHandler.off(document, 'keydown', viewer.keyHandler) Drag.dispose(viewer.prevImg) }