From 94bc550c67bf55f6fe568833c93f9fb70932d577 Mon Sep 17 00:00:00 2001 From: Jin <22962980+JYC333@users.noreply.github.com> Date: Fri, 28 Mar 2025 16:16:33 +0100 Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20move=20wheel=20zoom=20t?= =?UTF-8?q?o=20webpack?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 3 ++- package.json | 2 +- src/public/app/services/content_renderer.ts | 19 +++++++++++-------- src/public/app/services/library_loader.ts | 5 ----- src/public/app/types.d.ts | 7 ------- src/public/app/widgets/type_widgets/image.ts | 19 +++++++++++-------- 6 files changed, 25 insertions(+), 30 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1d6021055..fef3349ec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -91,7 +91,6 @@ "tmp": "0.2.3", "turndown": "7.2.0", "unescape": "1.0.1", - "vanilla-js-wheel-zoom": "9.0.4", "ws": "8.18.1", "xml2js": "0.6.2", "yauzl": "3.2.0" @@ -192,6 +191,7 @@ "typedoc": "0.28.1", "typescript": "5.8.2", "typescript-eslint": "8.28.0", + "vanilla-js-wheel-zoom": "9.0.4", "vitest": "3.0.9", "webpack": "5.98.0", "webpack-cli": "6.0.1", @@ -21207,6 +21207,7 @@ "version": "9.0.4", "resolved": "https://registry.npmjs.org/vanilla-js-wheel-zoom/-/vanilla-js-wheel-zoom-9.0.4.tgz", "integrity": "sha512-OjmS9ihEKBCRw2OQ7IiIdQGXdC5gTEEmtcAWZcPeNAJaYiS61KCd02Z72YMtIoXLGN5TZP+wliBMylLAsr6wow==", + "dev": true, "license": "MIT" }, "node_modules/vary": { diff --git a/package.json b/package.json index 7ef7a8055..bb0c7c357 100644 --- a/package.json +++ b/package.json @@ -150,7 +150,6 @@ "tmp": "0.2.3", "turndown": "7.2.0", "unescape": "1.0.1", - "vanilla-js-wheel-zoom": "9.0.4", "ws": "8.18.1", "xml2js": "0.6.2", "yauzl": "3.2.0" @@ -248,6 +247,7 @@ "typedoc": "0.28.1", "typescript": "5.8.2", "typescript-eslint": "8.28.0", + "vanilla-js-wheel-zoom": "9.0.4", "vitest": "3.0.9", "webpack": "5.98.0", "webpack-cli": "6.0.1", diff --git a/src/public/app/services/content_renderer.ts b/src/public/app/services/content_renderer.ts index a1999cffe..7afdc76d0 100644 --- a/src/public/app/services/content_renderer.ts +++ b/src/public/app/services/content_renderer.ts @@ -15,7 +15,7 @@ import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js"; import { normalizeMimeTypeForCKEditor } from "./mime_type_definitions.js"; import renderDoc from "./doc_renderer.js"; import { t } from "i18next"; -import type { Mermaid } from "mermaid"; +import WheelZoom from 'vanilla-js-wheel-zoom'; let idCounter = 1; @@ -150,13 +150,16 @@ function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery { - WZoom.create(`#${$img.attr("id")}`, { - maxScale: 50, - speed: 1.3, - zoomOnClick: false - }); - }); + setTimeout(() => { + const element = document.querySelector(`#${$img.attr("id")}`); + if (element) { + WheelZoom.create(`#${$img.attr("id")}`, { + maxScale: 50, + speed: 1.3, + zoomOnClick: false + }); + } + }, 0); } imageContextMenuService.setupContextMenu($img); diff --git a/src/public/app/services/library_loader.ts b/src/public/app/services/library_loader.ts index 129dca688..babd4a14d 100644 --- a/src/public/app/services/library_loader.ts +++ b/src/public/app/services/library_loader.ts @@ -51,10 +51,6 @@ const KATEX: Library = { css: ["node_modules/katex/dist/katex.min.css"] }; -const WHEEL_ZOOM: Library = { - js: ["node_modules/vanilla-js-wheel-zoom/dist/wheel-zoom.min.js"] -}; - const MARKJS: Library = { js: ["node_modules/mark.js/dist/jquery.mark.es6.min.js"] }; @@ -176,7 +172,6 @@ export default { CODE_MIRROR, CALENDAR_WIDGET, KATEX, - WHEEL_ZOOM, MARKJS, HIGHLIGHT_JS, LEAFLET diff --git a/src/public/app/types.d.ts b/src/public/app/types.d.ts index da0ad927a..0228c3756 100644 --- a/src/public/app/types.d.ts +++ b/src/public/app/types.d.ts @@ -132,13 +132,6 @@ declare global { var renderMathInElement: (element: HTMLElement, options: { trust: boolean; }) => void; - var WZoom = { - create(selector: string, opts: { - maxScale: number; - speed: number; - zoomOnClick: boolean - }) - }; interface CKCodeBlockLanguage { language: string; label: string; diff --git a/src/public/app/widgets/type_widgets/image.ts b/src/public/app/widgets/type_widgets/image.ts index e235abaef..a14af8af8 100644 --- a/src/public/app/widgets/type_widgets/image.ts +++ b/src/public/app/widgets/type_widgets/image.ts @@ -1,10 +1,10 @@ import utils from "../../services/utils.js"; import TypeWidget from "./type_widget.js"; -import libraryLoader from "../../services/library_loader.js"; import imageContextMenuService from "../../menus/image_context_menu.js"; import imageService from "../../services/image.js"; import type FNote from "../../entities/fnote.js"; import type { EventData } from "../../components/app_context.js"; +import WheelZoom from 'vanilla-js-wheel-zoom'; const TPL = `
@@ -54,13 +54,16 @@ class ImageTypeWidget extends TypeWidget { this.$imageWrapper = this.$widget.find(".note-detail-image-wrapper"); this.$imageView = this.$widget.find(".note-detail-image-view").attr("id", `image-view-${utils.randomString(10)}`); - libraryLoader.requireLibrary(libraryLoader.WHEEL_ZOOM).then(() => { - WZoom.create(`#${this.$imageView.attr("id")}`, { - maxScale: 50, - speed: 1.3, - zoomOnClick: false - }); - }); + setTimeout(() => { + const element = document.querySelector(`#${this.$imageView.attr("id")}`); + if (element) { + WheelZoom.create(`#${this.$imageView.attr("id")}`, { + maxScale: 50, + speed: 1.3, + zoomOnClick: false + }); + } + }, 0); imageContextMenuService.setupContextMenu(this.$imageView);