GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-24 16:56:36 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Constrain with proportions in SizeSelect

Browse source
This commit is contained in:
Henrik Giesel 2021-07-29 23:57:14 +02:00 committed by Damien Elmes
parent 2f94208381
commit 083d173469
1 changed files with 27 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
ts/editor/ImageHandleSizeSelect.svelte
View file

@ -27,12 +27,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
active = rule.cssText.endsWith("{ }"); active = rule.cssText.endsWith("{ }");
} }
} }
$: icon = active ? sizeActual : sizeMinimized;
export let isRtl: boolean; export let isRtl: boolean;
export let maxWidth = 250; export let maxWidth = 250;
export let maxHeight = 125; export let maxHeight = 125;
$: icon = active ? sizeActual : sizeMinimized; $: restrictionAspectRatio = maxWidth / maxHeight;
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -87,14 +88,32 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
function setImageRule(image: HTMLImageElement, rule: CSSStyleRule): void { function setImageRule(image: HTMLImageElement, rule: CSSStyleRule): void {
const width = Number(image.getAttribute("width")) | image.width; const aspectRatio = image.naturalWidth / image.naturalHeight;
if (restrictionAspectRatio - aspectRatio > 1) {
// restricted by height
rule.style.setProperty("width", "auto", "important");
const width = Number(image.getAttribute("width")) || image.width;
const height = Number(image.getAttribute("height")) || width / aspectRatio;
console.log(width, height);
rule.style.setProperty(
"height",
height < maxHeight ? `${height}px` : "auto",
"important"
);
} else {
// square or restricted by width
const width = Number(image.getAttribute("width")) || image.width;
rule.style.setProperty(
"width",
width < maxWidth ? `${width}px` : "auto",
"important"
);
rule.style.setProperty("height", "auto", "important");
}
rule.style.setProperty(
"width",
width < maxWidth ? `${width}px` : "auto",
"important"
);
rule.style.setProperty("height", "auto", "important");
rule.style.setProperty("max-width", `min(${maxWidth}px, 100%)`, "important"); rule.style.setProperty("max-width", `min(${maxWidth}px, 100%)`, "important");
rule.style.setProperty("max-height", `${maxHeight}px`, "important"); rule.style.setProperty("max-height", `${maxHeight}px`, "important");
} }