yel/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2025-12-14 21:15:18 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix SVG size calulation, only use style attribute (#36133) (#36134)
Some checks are pending
release-nightly / nightly-binary (push) Waiting to run
Details
release-nightly / nightly-docker-rootful (push) Waiting to run
Details
release-nightly / nightly-docker-rootless (push) Waiting to run
Details

Browse Source 
Backport of https://github.com/go-gitea/gitea/pull/36133, only the
bugfix part.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
silverwind 2025-12-12 08:40:27 +01:00 committed by GitHub
parent 3d66e75a47
commit 8d6442a43e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web_src/css/base.css
View File

@ -39,6 +39,8 @@
--gap-inline: 0.25rem; /* gap for inline texts and elements, for example: the spaces for sentence with labels, button text, etc */
--gap-block: 0.5rem; /* gap for element blocks, for example: spaces between buttons, menu image & title, header icon & title etc */
--background-view-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYlWN4+vTpf3SMDTAMBYXYBLFpHgoKAeiOf0SGE9kbAAAAAElFTkSuQmCC") right bottom var(--color-primary-light-7);
}
@media (min-width: 768px) and (max-width: 1200px) {

2
web_src/css/features/imagediff.css
View File

@ -13,7 +13,7 @@
.image-diff-container img {
border: 1px solid var(--color-primary-light-7);
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYlWN4+vTpf3SMDTAMBYXYBLFpHgoKAeiOf0SGE9kbAAAAAElFTkSuQmCC") right bottom var(--color-primary-light-7);
background: var(--background-view-image);
}
.image-diff-container .before-container {

1
web_src/css/repo/file-view.css
View File

@ -81,6 +81,7 @@
.view-raw img[src$=".svg" i] {
max-height: 600px !important;
max-width: 600px !important;
background: var(--background-view-image);
}
.file-view-render-container {

24
web_src/js/features/imagediff.ts
View File

@ -38,14 +38,14 @@ function getDefaultSvgBoundsIfUndefined(text: string, src: string) {
return null;
}
function createContext(imageAfter: HTMLImageElement, imageBefore: HTMLImageElement) {
function createContext(imageAfter: HTMLImageElement, imageBefore: HTMLImageElement, svgBoundsInfo: any) {
const sizeAfter = {
width: imageAfter?.width || 0,
height: imageAfter?.height || 0,
width: svgBoundsInfo.after?.width || imageAfter?.width || 0,
height: svgBoundsInfo.after?.height || imageAfter?.height || 0,
};
const sizeBefore = {
width: imageBefore?.width || 0,
height: imageBefore?.height || 0,
width: svgBoundsInfo.before?.width || imageBefore?.width || 0,
height: svgBoundsInfo.before?.height || imageBefore?.height || 0,
};
const maxSize = {
width: Math.max(sizeBefore.width, sizeAfter.width),
@ -92,7 +92,8 @@ class ImageDiff {
boundsInfo: containerEl.querySelector('.bounds-info-before'),
}];
await Promise.all(imageInfos.map(async (info) => {
const svgBoundsInfo: any = {before: null, after: null};
await Promise.all(imageInfos.map(async (info, index) => {
const [success] = await Promise.all(Array.from(info.images, (img) => {
return loadElem(img, info.path);
}));
@ -102,11 +103,8 @@ class ImageDiff {
const resp = await GET(info.path);
const text = await resp.text();
const bounds = getDefaultSvgBoundsIfUndefined(text, info.path);
svgBoundsInfo[index === 0 ? 'after' : 'before'] = bounds;
if (bounds) {
for (const el of info.images) {
el.setAttribute('width', String(bounds.width));
el.setAttribute('height', String(bounds.height));
}
hideElem(info.boundsInfo);
}
}
@ -115,10 +113,10 @@ class ImageDiff {
const imagesAfter = imageInfos[0].images;
const imagesBefore = imageInfos[1].images;
this.initSideBySide(createContext(imagesAfter[0], imagesBefore[0]));
this.initSideBySide(createContext(imagesAfter[0], imagesBefore[0], svgBoundsInfo));
if (imagesAfter.length > 0 && imagesBefore.length > 0) {
this.initSwipe(createContext(imagesAfter[1], imagesBefore[1]));
this.initOverlay(createContext(imagesAfter[2], imagesBefore[2]));
this.initSwipe(createContext(imagesAfter[1], imagesBefore[1], svgBoundsInfo));
this.initOverlay(createContext(imagesAfter[2], imagesBefore[2], svgBoundsInfo));
}
queryElemChildren(containerEl, '.image-diff-tabs', (el) => el.classList.remove('is-loading'));
}