mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2025-12-26 20:12:38 +08:00
refactor: rename makeSvgScalable to makeSvgSizeAdaptive
This commit is contained in:
parent
95cfab9367
commit
f5cadaef41
@ -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)
|
||||
|
||||
@ -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<SVGSVGElement> {
|
||||
@ -28,7 +28,7 @@ const MarkdownSvgRenderer: FC<SvgProps> = (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)
|
||||
}
|
||||
|
||||
@ -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('<svg viewBox="0 0 50 50" width="100pt" height="80pt"></svg>')
|
||||
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('<svg></svg>')
|
||||
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)
|
||||
})
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user