diff --git a/QuickLook.Plugin/QuickLook.Plugin.ImageViewer/Resources/svg2html.js b/QuickLook.Plugin/QuickLook.Plugin.ImageViewer/Resources/svg2html.js index 222f94e..98a4c79 100644 --- a/QuickLook.Plugin/QuickLook.Plugin.ImageViewer/Resources/svg2html.js +++ b/QuickLook.Plugin/QuickLook.Plugin.ImageViewer/Resources/svg2html.js @@ -1,12 +1,23 @@ -// SvgViewer: Provides SVG preview with the following features: -// - Fit SVG to window with no upscaling -// - Mouse wheel zoom in/out (with smooth animation) -// - Double-click to fit SVG to window -// - Mouse drag to pan (only when SVG is larger than the container) -// - Pan is limited to visible overflow area -// - Handles SVGs with or without width/height/viewBox attributes -// - Resets pan on zoom or fit -// - No animation during pan, smooth animation during zoom/fit +/** + * SvgViewer: Provides SVG preview with the following features. + * + * Requirements: + * - Requires the following HTML structure: + *
+ *
+ *
+ * - SVG content is obtained via chrome.webview.hostObjects.external.GetSvgContent() + * + * Features: + * - Fit SVG to window with no upscaling + * - Mouse wheel zoom in/out (with smooth animation) + * - Double-click to fit SVG to window + * - Mouse drag to pan (only when SVG is larger than the container) + * - Pan is limited to visible overflow area + * - Handles SVGs with or without width/height/viewBox attributes + * - Resets pan on zoom or fit + * - No animation during pan, smooth animation during zoom/fit + */ class SvgViewer { constructor() { // Initial scale and scale limits @@ -33,7 +44,10 @@ class SvgViewer { this.lastMouseY = 0; } - // Ensure SVG has proper size attributes and extract viewBox dimensions + /** + * Ensure SVG has proper size attributes and extract viewBox dimensions. + * @param {SVGElement} svgElement The SVG element to fix. + */ fixSvgSize(svgElement) { let widthAttr = svgElement.getAttribute('width'); let heightAttr = svgElement.getAttribute('height'); @@ -71,7 +85,10 @@ class SvgViewer { this.viewBoxHeight = viewBoxHeight; } - // Calculate the base scale to fit SVG into the container + /** + * Calculate the base scale to fit SVG into the container. + * @returns {number} The base scale factor. + */ computeBaseScale() { if (!this.viewBoxWidth || !this.viewBoxHeight) return 1; @@ -82,7 +99,9 @@ class SvgViewer { return Math.min(scaleX, scaleY, 1); // Never upscale by default } - // Update SVG transform for scale and pan + /** + * Update SVG transform for scale and pan. + */ updateTransform() { // Calculate actual SVG display size const container = document.getElementById('svgContainer'); @@ -103,19 +122,25 @@ class SvgViewer { this.svgElement.style.transformOrigin = 'center center'; } - // Enable transform transition (for zoom) + /** + * Enable transform transition (for zoom). + */ enableTransition() { this.svgElement.style.transition = 'transform 0.1s ease-out'; this.transitionEnabled = true; } - // Disable transform transition (for pan) + /** + * Disable transform transition (for pan). + */ disableTransition() { this.svgElement.style.transition = ''; this.transitionEnabled = false; } - // Fit SVG to window and reset pan + /** + * Fit SVG to window and reset pan. + */ fitToWindow() { this.baseScale = this.computeBaseScale(); this.scale = this.baseScale; @@ -124,7 +149,9 @@ class SvgViewer { this.updateTransform(); } - // Bind mouse and wheel events for zoom and pan + /** + * Bind mouse and wheel events for zoom and pan. + */ bindEvents() { // Zoom with mouse wheel this.wrapper.addEventListener("wheel", (e) => { @@ -167,6 +194,7 @@ class SvgViewer { this.disableTransition(); // Disable animation while panning } }); + // Pan on mouse move window.addEventListener('mousemove', (e) => { if (!this.isDragging) return; @@ -192,6 +220,7 @@ class SvgViewer { this.updateTransform(); } }); + // End pan on mouse up window.addEventListener('mouseup', () => { if (this.isDragging) { @@ -201,7 +230,10 @@ class SvgViewer { }); } - // Initialize SVG viewer + /** + * Initialize SVG viewer. + * @async + */ async init() { const rawSvg = await chrome.webview.hostObjects.external.GetSvgContent(); const parser = new DOMParser();