Lavande/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2025-12-13 18:32:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix SVG size calulation, only use style attribute (#36133)

Browse Source 
Fixes: https://github.com/go-gitea/gitea/issues/35863

The old code had a conflict between using HTML attributes vs. style
properties where the style was overriding the previously set HTML
attributes:

```html
<img width="300" height="277.02439470988946" style="width: 275px; height: 0px;">
```

I made it so in all cases only `style` properties are used and the
previous width/height values are now set via `style`. Also I did a
number of much-needed typescript improvements to the file.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
silverwind
2025-12-12 08:39:02 +01:00
committed by GitHub
parent bfbc38f40c
commit 4cbcb91b7b
4 changed files with 115 additions and 88 deletions
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-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 */ --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) { @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 { .image-diff-container img {
border: 1px solid var(--color-primary-light-7); 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 { .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] { .view-raw img[src$=".svg" i] {
max-height: 600px !important; max-height: 600px !important;
max-width: 600px !important; max-width: 600px !important;
background: var(--background-view-image);
} }
.file-view-render-container { .file-view-render-container {

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

@@ -3,7 +3,33 @@ import {hideElem, loadElem, queryElemChildren, queryElems} from '../utils/dom.ts
import {parseDom} from '../utils.ts'; import {parseDom} from '../utils.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts'; import {fomanticQuery} from '../modules/fomantic/base.ts';
function getDefaultSvgBoundsIfUndefined(text: string, src: string) { type ImageContext = {
imageBefore: HTMLImageElement | undefined,
imageAfter: HTMLImageElement | undefined,
sizeBefore: {width: number, height: number},
sizeAfter: {width: number, height: number},
maxSize: {width: number, height: number},
ratio: [number, number, number, number],
};
type ImageInfo = {
path: string | null,
mime: string | null,
images: NodeListOf<HTMLImageElement>,
boundsInfo: HTMLElement | null,
};
type Bounds = {
width: number,
height: number,
} | null;
type SvgBoundsInfo = {
before: Bounds,
after: Bounds,
};
function getDefaultSvgBoundsIfUndefined(text: string, src: string): Bounds | null {
const defaultSize = 300; const defaultSize = 300;
const maxSize = 99999; const maxSize = 99999;
@@ -38,14 +64,14 @@ function getDefaultSvgBoundsIfUndefined(text: string, src: string) {
return null; return null;
} }
function createContext(imageAfter: HTMLImageElement, imageBefore: HTMLImageElement) { function createContext(imageAfter: HTMLImageElement, imageBefore: HTMLImageElement, svgBoundsInfo: SvgBoundsInfo): ImageContext {
const sizeAfter = { const sizeAfter = {
width: imageAfter?.width || 0, width: svgBoundsInfo.after?.width || imageAfter?.width || 0,
height: imageAfter?.height || 0, height: svgBoundsInfo.after?.height || imageAfter?.height || 0,
}; };
const sizeBefore = { const sizeBefore = {
width: imageBefore?.width || 0, width: svgBoundsInfo.before?.width || imageBefore?.width || 0,
height: imageBefore?.height || 0, height: svgBoundsInfo.before?.height || imageBefore?.height || 0,
}; };
const maxSize = { const maxSize = {
width: Math.max(sizeBefore.width, sizeAfter.width), width: Math.max(sizeBefore.width, sizeAfter.width),
@@ -80,7 +106,7 @@ class ImageDiff {
// the container may be hidden by "viewed" checkbox, so use the parent's width for reference // the container may be hidden by "viewed" checkbox, so use the parent's width for reference
this.diffContainerWidth = Math.max(containerEl.closest('.diff-file-box')!.clientWidth - 300, 100); this.diffContainerWidth = Math.max(containerEl.closest('.diff-file-box')!.clientWidth - 300, 100);
const imageInfos = [{ const imagePair: [ImageInfo, ImageInfo] = [{
path: containerEl.getAttribute('data-path-after'), path: containerEl.getAttribute('data-path-after'),
mime: containerEl.getAttribute('data-mime-after'), mime: containerEl.getAttribute('data-mime-after'),
images: containerEl.querySelectorAll<HTMLImageElement>('img.image-after'), // matches 3 <img> images: containerEl.querySelectorAll<HTMLImageElement>('img.image-after'), // matches 3 <img>
@@ -92,7 +118,8 @@ class ImageDiff {
boundsInfo: containerEl.querySelector('.bounds-info-before'), boundsInfo: containerEl.querySelector('.bounds-info-before'),
}]; }];
await Promise.all(imageInfos.map(async (info) => { const svgBoundsInfo: SvgBoundsInfo = {before: null, after: null};
await Promise.all(imagePair.map(async (info, index) => {
const [success] = await Promise.all(Array.from(info.images, (img) => { const [success] = await Promise.all(Array.from(info.images, (img) => {
return loadElem(img, info.path!); return loadElem(img, info.path!);
})); }));
@@ -102,115 +129,112 @@ class ImageDiff {
const resp = await GET(info.path!); const resp = await GET(info.path!);
const text = await resp.text(); const text = await resp.text();
const bounds = getDefaultSvgBoundsIfUndefined(text, info.path!); const bounds = getDefaultSvgBoundsIfUndefined(text, info.path!);
svgBoundsInfo[index === 0 ? 'after' : 'before'] = bounds;
if (bounds) { if (bounds) {
for (const el of info.images) {
el.setAttribute('width', String(bounds.width));
el.setAttribute('height', String(bounds.height));
}
hideElem(info.boundsInfo!); hideElem(info.boundsInfo!);
} }
} }
})); }));
const imagesAfter = imageInfos[0].images; const imagesAfter = imagePair[0].images;
const imagesBefore = imageInfos[1].images; const imagesBefore = imagePair[1].images;
this.initSideBySide(createContext(imagesAfter[0], imagesBefore[0])); this.initSideBySide(createContext(imagesAfter[0], imagesBefore[0], svgBoundsInfo));
if (imagesAfter.length > 0 && imagesBefore.length > 0) { if (imagesAfter.length > 0 && imagesBefore.length > 0) {
this.initSwipe(createContext(imagesAfter[1], imagesBefore[1])); this.initSwipe(createContext(imagesAfter[1], imagesBefore[1], svgBoundsInfo));
this.initOverlay(createContext(imagesAfter[2], imagesBefore[2])); this.initOverlay(createContext(imagesAfter[2], imagesBefore[2], svgBoundsInfo));
} }
queryElemChildren(containerEl, '.image-diff-tabs', (el) => el.classList.remove('is-loading')); queryElemChildren(containerEl, '.image-diff-tabs', (el) => el.classList.remove('is-loading'));
} }
initSideBySide(sizes: Record<string, any>) { initSideBySide(ctx: ImageContext) {
let factor = 1; let factor = 1;
if (sizes.maxSize.width > (this.diffContainerWidth - 24) / 2) { if (ctx.maxSize.width > (this.diffContainerWidth - 24) / 2) {
factor = (this.diffContainerWidth - 24) / 2 / sizes.maxSize.width; factor = (this.diffContainerWidth - 24) / 2 / ctx.maxSize.width;
} }
const widthChanged = sizes.imageAfter && sizes.imageBefore && sizes.imageAfter.naturalWidth !== sizes.imageBefore.naturalWidth; const widthChanged = ctx.imageAfter && ctx.imageBefore && ctx.imageAfter.naturalWidth !== ctx.imageBefore.naturalWidth;
const heightChanged = sizes.imageAfter && sizes.imageBefore && sizes.imageAfter.naturalHeight !== sizes.imageBefore.naturalHeight; const heightChanged = ctx.imageAfter && ctx.imageBefore && ctx.imageAfter.naturalHeight !== ctx.imageBefore.naturalHeight;
if (sizes.imageAfter) { if (ctx.imageAfter) {
const boundsInfoAfterWidth = this.containerEl.querySelector('.bounds-info-after .bounds-info-width'); const boundsInfoAfterWidth = this.containerEl.querySelector('.bounds-info-after .bounds-info-width');
if (boundsInfoAfterWidth) { if (boundsInfoAfterWidth) {
boundsInfoAfterWidth.textContent = `${sizes.imageAfter.naturalWidth}px`; boundsInfoAfterWidth.textContent = `${ctx.imageAfter.naturalWidth}px`;
boundsInfoAfterWidth.classList.toggle('green', widthChanged); boundsInfoAfterWidth.classList.toggle('green', widthChanged);
} }
const boundsInfoAfterHeight = this.containerEl.querySelector('.bounds-info-after .bounds-info-height'); const boundsInfoAfterHeight = this.containerEl.querySelector('.bounds-info-after .bounds-info-height');
if (boundsInfoAfterHeight) { if (boundsInfoAfterHeight) {
boundsInfoAfterHeight.textContent = `${sizes.imageAfter.naturalHeight}px`; boundsInfoAfterHeight.textContent = `${ctx.imageAfter.naturalHeight}px`;
boundsInfoAfterHeight.classList.toggle('green', heightChanged); boundsInfoAfterHeight.classList.toggle('green', heightChanged);
} }
} }
if (sizes.imageBefore) { if (ctx.imageBefore) {
const boundsInfoBeforeWidth = this.containerEl.querySelector('.bounds-info-before .bounds-info-width'); const boundsInfoBeforeWidth = this.containerEl.querySelector('.bounds-info-before .bounds-info-width');
if (boundsInfoBeforeWidth) { if (boundsInfoBeforeWidth) {
boundsInfoBeforeWidth.textContent = `${sizes.imageBefore.naturalWidth}px`; boundsInfoBeforeWidth.textContent = `${ctx.imageBefore.naturalWidth}px`;
boundsInfoBeforeWidth.classList.toggle('red', widthChanged); boundsInfoBeforeWidth.classList.toggle('red', widthChanged);
} }
const boundsInfoBeforeHeight = this.containerEl.querySelector('.bounds-info-before .bounds-info-height'); const boundsInfoBeforeHeight = this.containerEl.querySelector('.bounds-info-before .bounds-info-height');
if (boundsInfoBeforeHeight) { if (boundsInfoBeforeHeight) {
boundsInfoBeforeHeight.textContent = `${sizes.imageBefore.naturalHeight}px`; boundsInfoBeforeHeight.textContent = `${ctx.imageBefore.naturalHeight}px`;
boundsInfoBeforeHeight.classList.toggle('red', heightChanged); boundsInfoBeforeHeight.classList.toggle('red', heightChanged);
} }
} }
if (sizes.imageAfter) { if (ctx.imageAfter) {
const container = sizes.imageAfter.parentNode; const container = ctx.imageAfter.parentNode as HTMLElement;
sizes.imageAfter.style.width = `${sizes.sizeAfter.width * factor}px`; ctx.imageAfter.style.width = `${ctx.sizeAfter.width * factor}px`;
sizes.imageAfter.style.height = `${sizes.sizeAfter.height * factor}px`; ctx.imageAfter.style.height = `${ctx.sizeAfter.height * factor}px`;
container.style.margin = '10px auto'; container.style.margin = '10px auto';
container.style.width = `${sizes.sizeAfter.width * factor + 2}px`; container.style.width = `${ctx.sizeAfter.width * factor + 2}px`;
container.style.height = `${sizes.sizeAfter.height * factor + 2}px`; container.style.height = `${ctx.sizeAfter.height * factor + 2}px`;
} }
if (sizes.imageBefore) { if (ctx.imageBefore) {
const container = sizes.imageBefore.parentNode; const container = ctx.imageBefore.parentNode as HTMLElement;
sizes.imageBefore.style.width = `${sizes.sizeBefore.width * factor}px`; ctx.imageBefore.style.width = `${ctx.sizeBefore.width * factor}px`;
sizes.imageBefore.style.height = `${sizes.sizeBefore.height * factor}px`; ctx.imageBefore.style.height = `${ctx.sizeBefore.height * factor}px`;
container.style.margin = '10px auto'; container.style.margin = '10px auto';
container.style.width = `${sizes.sizeBefore.width * factor + 2}px`; container.style.width = `${ctx.sizeBefore.width * factor + 2}px`;
container.style.height = `${sizes.sizeBefore.height * factor + 2}px`; container.style.height = `${ctx.sizeBefore.height * factor + 2}px`;
} }
} }
initSwipe(sizes: Record<string, any>) { initSwipe(ctx: ImageContext) {
let factor = 1; let factor = 1;
if (sizes.maxSize.width > this.diffContainerWidth - 12) { if (ctx.maxSize.width > this.diffContainerWidth - 12) {
factor = (this.diffContainerWidth - 12) / sizes.maxSize.width; factor = (this.diffContainerWidth - 12) / ctx.maxSize.width;
} }
if (sizes.imageAfter) { if (ctx.imageAfter) {
const imgParent = sizes.imageAfter.parentNode; const imgParent = ctx.imageAfter.parentNode as HTMLElement;
const swipeFrame = imgParent.parentNode; const swipeFrame = imgParent.parentNode as HTMLElement;
sizes.imageAfter.style.width = `${sizes.sizeAfter.width * factor}px`; ctx.imageAfter.style.width = `${ctx.sizeAfter.width * factor}px`;
sizes.imageAfter.style.height = `${sizes.sizeAfter.height * factor}px`; ctx.imageAfter.style.height = `${ctx.sizeAfter.height * factor}px`;
imgParent.style.margin = `0px ${sizes.ratio[0] * factor}px`; imgParent.style.margin = `0px ${ctx.ratio[0] * factor}px`;
imgParent.style.width = `${sizes.sizeAfter.width * factor + 2}px`; imgParent.style.width = `${ctx.sizeAfter.width * factor + 2}px`;
imgParent.style.height = `${sizes.sizeAfter.height * factor + 2}px`; imgParent.style.height = `${ctx.sizeAfter.height * factor + 2}px`;
swipeFrame.style.padding = `${sizes.ratio[1] * factor}px 0 0 0`; swipeFrame.style.padding = `${ctx.ratio[1] * factor}px 0 0 0`;
swipeFrame.style.width = `${sizes.maxSize.width * factor + 2}px`; swipeFrame.style.width = `${ctx.maxSize.width * factor + 2}px`;
} }
if (sizes.imageBefore) { if (ctx.imageBefore) {
const imgParent = sizes.imageBefore.parentNode; const imgParent = ctx.imageBefore.parentNode as HTMLElement;
const swipeFrame = imgParent.parentNode; const swipeFrame = imgParent.parentNode as HTMLElement;
sizes.imageBefore.style.width = `${sizes.sizeBefore.width * factor}px`; ctx.imageBefore.style.width = `${ctx.sizeBefore.width * factor}px`;
sizes.imageBefore.style.height = `${sizes.sizeBefore.height * factor}px`; ctx.imageBefore.style.height = `${ctx.sizeBefore.height * factor}px`;
imgParent.style.margin = `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`; imgParent.style.margin = `${ctx.ratio[3] * factor}px ${ctx.ratio[2] * factor}px`;
imgParent.style.width = `${sizes.sizeBefore.width * factor + 2}px`; imgParent.style.width = `${ctx.sizeBefore.width * factor + 2}px`;
imgParent.style.height = `${sizes.sizeBefore.height * factor + 2}px`; imgParent.style.height = `${ctx.sizeBefore.height * factor + 2}px`;
swipeFrame.style.width = `${sizes.maxSize.width * factor + 2}px`; swipeFrame.style.width = `${ctx.maxSize.width * factor + 2}px`;
swipeFrame.style.height = `${sizes.maxSize.height * factor + 2}px`; swipeFrame.style.height = `${ctx.maxSize.height * factor + 2}px`;
} }
// extra height for inner "position: absolute" elements // extra height for inner "position: absolute" elements
const swipe = this.containerEl.querySelector<HTMLElement>('.diff-swipe'); const swipe = this.containerEl.querySelector<HTMLElement>('.diff-swipe');
if (swipe) { if (swipe) {
swipe.style.width = `${sizes.maxSize.width * factor + 2}px`; swipe.style.width = `${ctx.maxSize.width * factor + 2}px`;
swipe.style.height = `${sizes.maxSize.height * factor + 30}px`; swipe.style.height = `${ctx.maxSize.height * factor + 30}px`;
} }
this.containerEl.querySelector('.swipe-bar')!.addEventListener('mousedown', (e) => { this.containerEl.querySelector('.swipe-bar')!.addEventListener('mousedown', (e) => {
@@ -237,40 +261,40 @@ class ImageDiff {
document.addEventListener('mouseup', removeEventListeners); document.addEventListener('mouseup', removeEventListeners);
} }
initOverlay(sizes: Record<string, any>) { initOverlay(ctx: ImageContext) {
let factor = 1; let factor = 1;
if (sizes.maxSize.width > this.diffContainerWidth - 12) { if (ctx.maxSize.width > this.diffContainerWidth - 12) {
factor = (this.diffContainerWidth - 12) / sizes.maxSize.width; factor = (this.diffContainerWidth - 12) / ctx.maxSize.width;
} }
if (sizes.imageAfter) { if (ctx.imageAfter) {
const container = sizes.imageAfter.parentNode; const container = ctx.imageAfter.parentNode as HTMLElement;
sizes.imageAfter.style.width = `${sizes.sizeAfter.width * factor}px`; ctx.imageAfter.style.width = `${ctx.sizeAfter.width * factor}px`;
sizes.imageAfter.style.height = `${sizes.sizeAfter.height * factor}px`; ctx.imageAfter.style.height = `${ctx.sizeAfter.height * factor}px`;
container.style.margin = `${sizes.ratio[1] * factor}px ${sizes.ratio[0] * factor}px`; container.style.margin = `${ctx.ratio[1] * factor}px ${ctx.ratio[0] * factor}px`;
container.style.width = `${sizes.sizeAfter.width * factor + 2}px`; container.style.width = `${ctx.sizeAfter.width * factor + 2}px`;
container.style.height = `${sizes.sizeAfter.height * factor + 2}px`; container.style.height = `${ctx.sizeAfter.height * factor + 2}px`;
} }
if (sizes.imageBefore) { if (ctx.imageBefore) {
const container = sizes.imageBefore.parentNode; const container = ctx.imageBefore.parentNode as HTMLElement;
const overlayFrame = container.parentNode; const overlayFrame = container.parentNode as HTMLElement;
sizes.imageBefore.style.width = `${sizes.sizeBefore.width * factor}px`; ctx.imageBefore.style.width = `${ctx.sizeBefore.width * factor}px`;
sizes.imageBefore.style.height = `${sizes.sizeBefore.height * factor}px`; ctx.imageBefore.style.height = `${ctx.sizeBefore.height * factor}px`;
container.style.margin = `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`; container.style.margin = `${ctx.ratio[3] * factor}px ${ctx.ratio[2] * factor}px`;
container.style.width = `${sizes.sizeBefore.width * factor + 2}px`; container.style.width = `${ctx.sizeBefore.width * factor + 2}px`;
container.style.height = `${sizes.sizeBefore.height * factor + 2}px`; container.style.height = `${ctx.sizeBefore.height * factor + 2}px`;
// some inner elements are `position: absolute`, so the container's height must be large enough // some inner elements are `position: absolute`, so the container's height must be large enough
overlayFrame.style.width = `${sizes.maxSize.width * factor + 2}px`; overlayFrame.style.width = `${ctx.maxSize.width * factor + 2}px`;
overlayFrame.style.height = `${sizes.maxSize.height * factor + 2}px`; overlayFrame.style.height = `${ctx.maxSize.height * factor + 2}px`;
} }
const rangeInput = this.containerEl.querySelector<HTMLInputElement>('input[type="range"]')!; const rangeInput = this.containerEl.querySelector<HTMLInputElement>('input[type="range"]')!;
function updateOpacity() { function updateOpacity() {
if (sizes.imageAfter) { if (ctx.imageAfter) {
sizes.imageAfter.parentNode.style.opacity = `${Number(rangeInput.value) / 100}`; (ctx.imageAfter.parentNode as HTMLElement).style.opacity = `${Number(rangeInput.value) / 100}`;
} }
} }