diff --git a/src/renderer/src/components/Preview/utils.ts b/src/renderer/src/components/Preview/utils.ts index aeafd2dfcc..423f57d41f 100644 --- a/src/renderer/src/components/Preview/utils.ts +++ b/src/renderer/src/components/Preview/utils.ts @@ -1,4 +1,4 @@ -import { makeSvgScalable } from '@renderer/utils' +import { makeSvgSizeAdaptive } from '@renderer/utils' /** * Renders an SVG string inside a host element's Shadow DOM to ensure style encapsulation. @@ -68,7 +68,7 @@ export function renderSvgInShadowHost(svgContent: string, hostElement: HTMLEleme // Type guard if (svgElement instanceof SVGSVGElement) { // Standardize the SVG element for proper scaling - makeSvgScalable(svgElement) + makeSvgSizeAdaptive(svgElement) // Append the SVG element to the shadow root shadowRoot.appendChild(svgElement) diff --git a/src/renderer/src/pages/home/Markdown/MarkdownSvgRenderer.tsx b/src/renderer/src/pages/home/Markdown/MarkdownSvgRenderer.tsx index a516d17e80..81840a0ebf 100644 --- a/src/renderer/src/pages/home/Markdown/MarkdownSvgRenderer.tsx +++ b/src/renderer/src/pages/home/Markdown/MarkdownSvgRenderer.tsx @@ -1,4 +1,4 @@ -import { makeSvgScalable } from '@renderer/utils/image' +import { makeSvgSizeAdaptive } from '@renderer/utils/image' import React, { FC, useEffect, useRef, useState } from 'react' interface SvgProps extends React.SVGProps { @@ -28,7 +28,7 @@ const MarkdownSvgRenderer: FC = (props) => { useEffect(() => { if (needsMeasurement && svgRef.current && !isMeasured) { // The element is a real DOM node, we can now measure it. - makeSvgScalable(svgRef.current) + makeSvgSizeAdaptive(svgRef.current) // Set flag to prevent re-measuring on subsequent renders setIsMeasured(true) } diff --git a/src/renderer/src/utils/__tests__/image.test.ts b/src/renderer/src/utils/__tests__/image.test.ts index 67feb7a640..b1363917e4 100644 --- a/src/renderer/src/utils/__tests__/image.test.ts +++ b/src/renderer/src/utils/__tests__/image.test.ts @@ -7,7 +7,7 @@ import { captureScrollableDivAsDataURL, compressImage, convertToBase64, - makeSvgScalable + makeSvgSizeAdaptive } from '../image' // mock 依赖 @@ -127,7 +127,7 @@ describe('utils/image', () => { }) }) - describe('makeSvgScalable', () => { + describe('makeSvgSizeAdaptive', () => { const createSvgElement = (svgString: string): SVGElement => { const div = document.createElement('div') div.innerHTML = svgString @@ -151,7 +151,7 @@ describe('utils/image', () => { .spyOn(SVGElement.prototype, 'getBoundingClientRect') .mockReturnValue({ width: 133, height: 106 } as DOMRect) - const result = makeSvgScalable(svgElement) as SVGElement + const result = makeSvgSizeAdaptive(svgElement) as SVGElement expect(spy).toHaveBeenCalled() expect(result.getAttribute('viewBox')).toBe('0 0 133 106') @@ -166,7 +166,7 @@ describe('utils/image', () => { const svgElement = createSvgElement('') const spy = vi.spyOn(SVGElement.prototype, 'getBoundingClientRect') // Spy to ensure it's NOT called - const result = makeSvgScalable(svgElement) as SVGElement + const result = makeSvgSizeAdaptive(svgElement) as SVGElement expect(spy).not.toHaveBeenCalled() expect(result.getAttribute('viewBox')).toBe('0 0 50 50') @@ -184,7 +184,7 @@ describe('utils/image', () => { .spyOn(SVGElement.prototype, 'getBoundingClientRect') .mockReturnValue({ width: 0, height: 0 } as DOMRect) - const result = makeSvgScalable(svgElement) as SVGElement + const result = makeSvgSizeAdaptive(svgElement) as SVGElement expect(result.hasAttribute('viewBox')).toBe(false) expect(result.style.maxWidth).toBe('100pt') // Falls back to width attribute @@ -195,7 +195,7 @@ describe('utils/image', () => { it('should only set width="100%" if width/height attributes are missing', () => { const svgElement = createSvgElement('') - const result = makeSvgScalable(svgElement) as SVGElement + const result = makeSvgSizeAdaptive(svgElement) as SVGElement expect(result.hasAttribute('viewBox')).toBe(false) expect(result.style.maxWidth).toBe('') @@ -206,7 +206,7 @@ describe('utils/image', () => { it('should return the element unchanged if it is not an SVGElement', () => { const divElement = document.createElement('div') const originalOuterHTML = divElement.outerHTML - const result = makeSvgScalable(divElement) + const result = makeSvgSizeAdaptive(divElement) expect(result.outerHTML).toBe(originalOuterHTML) }) diff --git a/src/renderer/src/utils/image.ts b/src/renderer/src/utils/image.ts index f729ba666b..6ba0c894d1 100644 --- a/src/renderer/src/utils/image.ts +++ b/src/renderer/src/utils/image.ts @@ -311,7 +311,7 @@ function measureElementSize(element: Element): { width: number; height: number } * - 把 width 改为 100% * - 移除 height */ -export const makeSvgScalable = (element: Element): Element => { +export const makeSvgSizeAdaptive = (element: Element): Element => { // type guard if (!(element instanceof SVGElement)) { return element