feat(client/mermaid): integrate same pan/zoom

apps/client/package.json

@@ -62,6 +62,7 @@
     "preact": "10.28.1",
     "react-i18next": "16.5.1",
     "react-window": "2.2.3",
+    "react-zoom-pan-pinch": "3.7.0",
     "reveal.js": "5.2.1",
     "svg-pan-zoom": "3.6.2",
     "tabulator-tables": "6.3.1",

apps/client/src/widgets/note_tree.ts

@@ -153,7 +153,7 @@ const TPL = /*html*/`
 const MAX_SEARCH_RESULTS_IN_TREE = 100;
 
 // this has to be hanged on the actual elements to effectively intercept and stop click event
-const cancelClickPropagation: (e: JQuery.ClickEvent | MouseEvent) => void = (e) => e.stopPropagation();
+const cancelClickPropagation: (e: JQuery.ClickEvent) => void = (e) => e.stopPropagation();
 
 // TODO: Fix once we remove Node.js API from public
 type Timeout = NodeJS.Timeout | string | number | undefined;
@@ -353,7 +353,6 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
         this.$tree.fancytree({
             titlesTabbable: true,
             keyboard: true,
-            toggleEffect: false,
             extensions: ["dnd5", "clones", "filter"],
             source: treeData,
             scrollOfs: {
@@ -599,7 +598,102 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
             clones: {
                 highlightActiveClones: true
             },
-            enhanceTitle: buildEnhanceTitle(),
+            async enhanceTitle (
+                event: Event,
+                data: {
+                    node: Fancytree.FancytreeNode;
+                    noteId: string;
+                }
+            ) {
+                const node = data.node;
+
+                if (!node.data.noteId) {
+                    // if there's "non-note" node, then don't enhance
+                    // this can happen for e.g. "Load error!" node
+                    return;
+                }
+
+                const note = await froca.getNote(node.data.noteId, true);
+
+                if (!note) {
+                    return;
+                }
+
+                const activeNoteContext = appContext.tabManager.getActiveContext();
+
+                const $span = $(node.span);
+
+                $span.find(".tree-item-button").remove();
+                $span.find(".note-indicator-icon").remove();
+
+                const isHoistedNote = activeNoteContext && activeNoteContext.hoistedNoteId === note.noteId && note.noteId !== "root";
+
+                if (note.hasLabel("workspace") && !isHoistedNote) {
+                    const $enterWorkspaceButton = $(`<span class="tree-item-button tn-icon enter-workspace-button bx bx-door-open" title="${t("note_tree.hoist-this-note-workspace")}"></span>`).on(
+                        "click",
+                        cancelClickPropagation
+                    );
+
+                    $span.append($enterWorkspaceButton);
+                }
+
+                if (note.type === "search") {
+                    const $refreshSearchButton = $(`<span class="tree-item-button tn-icon refresh-search-button bx bx-refresh" title="${t("note_tree.refresh-saved-search-results")}"></span>`).on(
+                        "click",
+                        cancelClickPropagation
+                    );
+
+                    $span.append($refreshSearchButton);
+                }
+
+                // TODO: Deduplicate with server's notes.ts#getAndValidateParent
+                if (!["search", "launcher"].includes(note.type)
+                    && !note.isOptions()
+                    && !note.isLaunchBarConfig()
+                    && !note.noteId.startsWith("_help")
+                ) {
+                    const $createChildNoteButton = $(`<span class="tree-item-button tn-icon add-note-button bx bx-plus" title="${t("note_tree.create-child-note")}"></span>`).on(
+                        "click",
+                        cancelClickPropagation
+                    );
+
+                    $span.append($createChildNoteButton);
+                }
+
+                if (isHoistedNote) {
+                    const $unhoistButton = $(`<span class="tree-item-button tn-icon unhoist-button bx bx-door-open" title="${t("note_tree.unhoist")}"></span>`).on("click", cancelClickPropagation);
+
+                    $span.append($unhoistButton);
+                }
+
+                // Add clone indicator with tooltip if note has multiple parents
+                const parentNotes = note.getParentNotes();
+                const realParents = parentNotes.filter(
+                    (parent) => !["_share", "_lbBookmarks"].includes(parent.noteId) && parent.type !== "search"
+                );
+
+                if (realParents.length > 1) {
+                    const parentTitles = realParents.map((p) => p.title).join(", ");
+                    const tooltipText = realParents.length === 2
+                        ? t("note_tree.clone-indicator-tooltip-single", { parent: realParents[1].title })
+                        : t("note_tree.clone-indicator-tooltip", { count: realParents.length, parents: parentTitles });
+
+                    const $cloneIndicator = $(`<span class="note-indicator-icon clone-indicator"></span>`);
+                    $cloneIndicator.attr("title", tooltipText);
+                    $span.find(".fancytree-title").append($cloneIndicator);
+                }
+
+                // Add shared indicator with tooltip if note is shared
+                if (note.isShared()) {
+                    const shareId = note.getOwnedLabelValue("shareAlias") || note.noteId;
+                    const shareUrl = `${location.origin}${location.pathname}share/${shareId}`;
+                    const tooltipText = t("note_tree.shared-indicator-tooltip-with-url", { url: shareUrl });
+
+                    const $sharedIndicator = $(`<span class="note-indicator-icon shared-indicator"></span>`);
+                    $sharedIndicator.attr("title", tooltipText);
+                    $span.find(".fancytree-title").append($sharedIndicator);
+                }
+            },
             // this is done to automatically lazy load all expanded notes after tree load
             loadChildren: (event, data) => {
                 data.node.visit((subNode) => {
@@ -1788,100 +1882,3 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
         return items;
     }
 }
-
-function buildEnhanceTitle() {
-    const createChildTemplate = document.createElement("span");
-    createChildTemplate.className = "tree-item-button tn-icon add-note-button bx bx-plus";
-    createChildTemplate.title = t("note_tree.create-child-note");
-    createChildTemplate.addEventListener("click", cancelClickPropagation);
-
-    return async function enhanceTitle(event: Event,
-        data: {
-            node: Fancytree.FancytreeNode;
-            noteId: string;
-        }) {
-        const node = data.node;
-
-        if (!node.data.noteId) {
-            // if there's "non-note" node, then don't enhance
-            // this can happen for e.g. "Load error!" node
-            return;
-        }
-
-        const note = froca.getNoteFromCache(node.data.noteId);
-        if (!note) return;
-
-        const activeNoteContext = appContext.tabManager.getActiveContext();
-
-        const $span = $(node.span);
-
-        $span.find(".tree-item-button").remove();
-        $span.find(".note-indicator-icon").remove();
-
-        const isHoistedNote = activeNoteContext && activeNoteContext.hoistedNoteId === note.noteId && note.noteId !== "root";
-
-        if (note.hasLabel("workspace") && !isHoistedNote) {
-            const $enterWorkspaceButton = $(`<span class="tree-item-button tn-icon enter-workspace-button bx bx-door-open" title="${t("note_tree.hoist-this-note-workspace")}"></span>`).on(
-                "click",
-                cancelClickPropagation
-            );
-
-            $span.append($enterWorkspaceButton);
-        }
-
-        if (note.type === "search") {
-            const $refreshSearchButton = $(`<span class="tree-item-button tn-icon refresh-search-button bx bx-refresh" title="${t("note_tree.refresh-saved-search-results")}"></span>`).on(
-                "click",
-                cancelClickPropagation
-            );
-
-            $span.append($refreshSearchButton);
-        }
-
-        // TODO: Deduplicate with server's notes.ts#getAndValidateParent
-        if (!["search", "launcher"].includes(note.type)
-            && !note.isOptions()
-            && !note.isLaunchBarConfig()
-            && !note.noteId.startsWith("_help")
-        ) {
-            node.span.append(createChildTemplate.cloneNode());
-        }
-
-        if (isHoistedNote) {
-            const $unhoistButton = $(`<span class="tree-item-button tn-icon unhoist-button bx bx-door-open" title="${t("note_tree.unhoist")}"></span>`).on("click", cancelClickPropagation);
-
-            $span.append($unhoistButton);
-        }
-
-        // Add clone indicator with tooltip if note has multiple parents
-        const parentNotes = note.getParentNotes();
-        const realParents: FNote[] = [];
-        for (const parent of parentNotes) {
-            if (parent.noteId !== "_share" && parent.noteId !== "_lbBookmarks" && parent.type !== "search") {
-                realParents.push(parent);
-            }
-        }
-
-        if (realParents.length > 1) {
-            const parentTitles = realParents.map((p) => p.title).join(", ");
-            const tooltipText = realParents.length === 2
-                ? t("note_tree.clone-indicator-tooltip-single", { parent: realParents[1].title })
-                : t("note_tree.clone-indicator-tooltip", { count: realParents.length, parents: parentTitles });
-
-            const $cloneIndicator = $(`<span class="note-indicator-icon clone-indicator"></span>`);
-            $cloneIndicator.attr("title", tooltipText);
-            $span.find(".fancytree-title").append($cloneIndicator);
-        }
-
-        // Add shared indicator with tooltip if note is shared
-        if (note.isShared()) {
-            const shareId = note.getOwnedLabelValue("shareAlias") || note.noteId;
-            const shareUrl = `${location.origin}${location.pathname}share/${shareId}`;
-            const tooltipText = t("note_tree.shared-indicator-tooltip-with-url", { url: shareUrl });
-
-            const $sharedIndicator = $(`<span class="note-indicator-icon shared-indicator"></span>`);
-            $sharedIndicator.attr("title", tooltipText);
-            $span.find(".fancytree-title").append($sharedIndicator);
-        }
-    };
-}

apps/client/src/widgets/type_widgets/Image.tsx

@@ -1,29 +1,20 @@
+import "./Image.css";
+
 import { useEffect, useRef, useState } from "preact/hooks";
+import { TransformComponent,TransformWrapper } from "react-zoom-pan-pinch";
+
+import image_context_menu from "../../menus/image_context_menu";
+import { copyImageReferenceToClipboard } from "../../services/image";
 import { createImageSrcUrl } from "../../services/utils";
 import { useTriliumEvent, useUniqueName } from "../react/hooks";
-import "./Image.css";
-import { TypeWidgetProps } from "./type_widget";
-import WheelZoom from 'vanilla-js-wheel-zoom';
-import image_context_menu from "../../menus/image_context_menu";
 import { refToJQuerySelector } from "../react/react_utils";
-import { copyImageReferenceToClipboard } from "../../services/image";
+import { TypeWidgetProps } from "./type_widget";
 
 export default function Image({ note, ntxId }: TypeWidgetProps) {
     const uniqueId = useUniqueName("image");
     const containerRef = useRef<HTMLDivElement>(null);
     const [ refreshCounter, setRefreshCounter ] = useState(0);
 
-    // Set up pan & zoom
-    useEffect(() => {
-        const zoomInstance = WheelZoom.create(`#${uniqueId}`, {
-            maxScale: 50,
-            speed: 1.3,
-            zoomOnClick: false
-        });
-
-        return () => zoomInstance.destroy();
-    }, [ note ]);
-
     // Set up context menu
     useEffect(() => image_context_menu.setupContextMenu(refToJQuerySelector(containerRef)), []);
 
@@ -42,11 +33,23 @@ export default function Image({ note, ntxId }: TypeWidgetProps) {
 
     return (
         <div ref={containerRef} className="note-detail-image-wrapper">
-            <img
-                id={uniqueId}
-                className="note-detail-image-view"
-                src={createImageSrcUrl(note)}
-            />
+            <TransformWrapper
+                initialScale={1}
+                centerOnInit
+            >
+                <TransformComponent
+                    wrapperStyle={{
+                        width: "100%",
+                        height: "100%"
+                    }}
+                >
+                    <img
+                        id={uniqueId}
+                        className="note-detail-image-view"
+                        src={createImageSrcUrl(note)}
+                    />
+                </TransformComponent>
+            </TransformWrapper>
         </div>
-    )
+    );
 }

apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx

@@ -1,13 +1,15 @@
-import { useCallback, useEffect, useRef, useState } from "preact/hooks";
-import { t } from "../../../services/i18n";
-import SplitEditor, { PreviewButton, SplitEditorProps } from "./SplitEditor";
-import { RawHtmlBlock } from "../../react/RawHtml";
-import server from "../../../services/server";
-import svgPanZoom from "svg-pan-zoom";
 import { RefObject } from "preact";
-import { useElementSize, useTriliumEvent } from "../../react/hooks";
-import utils from "../../../services/utils";
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
+import svgPanZoom from "svg-pan-zoom";
+
+import { t } from "../../../services/i18n";
+import server from "../../../services/server";
 import toast from "../../../services/toast";
+import utils from "../../../services/utils";
+import { useElementSize, useTriliumEvent } from "../../react/hooks";
+import { RawHtmlBlock } from "../../react/RawHtml";
+import SplitEditor, { PreviewButton, SplitEditorProps } from "./SplitEditor";
 
 interface SvgSplitEditorProps extends Omit<SplitEditorProps, "previewContent"> {
     /**
@@ -117,11 +119,20 @@ export default function SvgSplitEditor({ ntxId, note, attachmentName, renderSvg,
             onContentChanged={onContentChanged}
             dataSaved={onSave}
             previewContent={(
-                <RawHtmlBlock
-                    className="render-container"
-                    containerRef={containerRef}
-                    html={svg}
-                />
+                <TransformWrapper>
+                    <TransformComponent
+                        wrapperStyle={{
+                            width: "100%",
+                            height: "100%"
+                        }}
+                    >
+                        <RawHtmlBlock
+                            className="render-container"
+                            containerRef={containerRef}
+                            html={svg}
+                        />
+                    </TransformComponent>
+                </TransformWrapper>
             )}
             previewButtons={
                 <>
@@ -144,7 +155,7 @@ export default function SvgSplitEditor({ ntxId, note, attachmentName, renderSvg,
             }
             {...props}
         />
-    )
+    );
 }
 
 function useResizer(containerRef: RefObject<HTMLDivElement>, noteId: string, svg: string | undefined) {
@@ -181,7 +192,7 @@ function useResizer(containerRef: RefObject<HTMLDivElement>, noteId: string, svg
             lastPanZoom.current = {
                 pan: zoomInstance.getPan(),
                 zoom: zoomInstance.getZoom()
-            }
+            };
             zoomRef.current = undefined;
             zoomInstance.destroy();
         };

packages/ckeditor5/src/i18n.ts

@@ -50,11 +50,6 @@ const LOCALE_MAPPINGS: Record<DISPLAYABLE_LOCALE_IDS, LocaleMapping | null> = {
         coreTranslation: () => import("ckeditor5/translations/ja.js"),
         premiumFeaturesTranslation: () => import("ckeditor5-premium-features/translations/ja.js"),
     },
-    pl: {
-        languageCode: "pl",
-        coreTranslation: () => import("ckeditor5/translations/pl.js"),
-        premiumFeaturesTranslation: () => import("ckeditor5-premium-features/translations/pl.js"),
-    },
     pt: {
         languageCode: "pt",
         coreTranslation: () => import("ckeditor5/translations/pt.js"),

pnpm-lock.yaml

@@ -295,6 +295,9 @@ importers:
       react-window:
         specifier: 2.2.3
         version: 2.2.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react-zoom-pan-pinch:
+        specifier: 3.7.0
+        version: 3.7.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       reveal.js:
         specifier: 5.2.1
         version: 5.2.1
@@ -12144,6 +12147,13 @@ packages:
       react: ^18.0.0 || ^19.0.0
       react-dom: ^18.0.0 || ^19.0.0
 
+  react-zoom-pan-pinch@3.7.0:
+    resolution: {integrity: sha512-UmReVZ0TxlKzxSbYiAj+LeGRW8s8LraAFTXRAxzMYnNRgGPsxCudwZKVkjvGmjtx7SW/hZamt69NUmGf4xrkXA==}
+    engines: {node: '>=8', npm: '>=5'}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+
   react@16.14.0:
     resolution: {integrity: sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==}
     engines: {node: '>=0.10.0'}
@@ -15361,8 +15371,6 @@ snapshots:
       '@ckeditor/ckeditor5-core': 47.3.0
       '@ckeditor/ckeditor5-utils': 47.3.0
       ckeditor5: 47.3.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-code-block@47.3.0(patch_hash=2361d8caad7d6b5bddacc3a3b4aa37dbfba260b1c1b22a450413a79c1bb1ce95)':
     dependencies:
@@ -15428,8 +15436,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.3.0
       '@ckeditor/ckeditor5-watchdog': 47.3.0
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-dev-build-tools@54.2.3(@swc/helpers@0.5.17)(tslib@2.8.1)(typescript@5.9.3)':
     dependencies:
@@ -28467,6 +28473,11 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
+  react-zoom-pan-pinch@3.7.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
   react@16.14.0:
     dependencies:
       loose-envify: 1.4.0