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

Reset height, so it defaults to "auto"

Browse source 
* This allows more flexible dynamic resizing for the image in the (p)reviewer
This commit is contained in:
Henrik Giesel 2021-07-26 22:31:47 +02:00 committed by Damien Elmes
parent b07c46f88f
commit f9000de16c
1 changed files with 24 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
ts/editor/ImageHandle.svelte
View file

@ -15,16 +15,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let container: HTMLElement; export let container: HTMLElement;
$: selector = `:not([src="${image?.getAttribute("src")}"])`;
$: naturalWidth = image?.naturalWidth;
$: naturalHeight = image?.naturalHeight;
$: aspectRatio = naturalWidth && naturalHeight ? naturalWidth / naturalHeight : NaN;
$: showDimensions = image $: showDimensions = image
? parseInt(getComputedStyle(image).getPropertyValue("width")) > 100 ? parseInt(getComputedStyle(image).getPropertyValue("width")) > 100
: false; : false;
$: selector = `:not([src="${image?.getAttribute("src")}"])`;
$: active = imageRule?.selectorText.includes(selector) as boolean; $: active = imageRule?.selectorText.includes(selector) as boolean;
let naturalWidth = 0;
let naturalHeight = 0;
let actualWidth = ""; let actualWidth = "";
let actualHeight = ""; let actualHeight = "";
let customDimensions = false; let customDimensions = false;
@ -58,26 +59,29 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
startObserving(); startObserving();
function updateSizes() { function updateSizes() {
const imageRect = image!.getBoundingClientRect();
const containerRect = container.getBoundingClientRect(); const containerRect = container.getBoundingClientRect();
const imageRect = image!.getBoundingClientRect();
naturalWidth = image!.naturalWidth;
naturalHeight = image!.naturalHeight;
containerTop = containerRect.top; containerTop = containerRect.top;
containerLeft = containerRect.left; containerLeft = containerRect.left;
top = imageRect.top - containerTop; top = imageRect!.top - containerTop;
left = imageRect.left - containerLeft; left = imageRect!.left - containerLeft;
width = image!.clientWidth; width = image!.clientWidth;
height = image!.clientHeight; height = image!.clientHeight;
/* we do not want the actual width, but rather the intended display width */
const widthProperty = image!.style.width; const widthProperty = image!.style.width;
let inPixel = false;
customDimensions = false; customDimensions = false;
if (widthProperty) { if (widthProperty) {
actualWidth = widthProperty.endsWith("px") if (widthProperty.endsWith("px")) {
? widthProperty.substring(0, widthProperty.length - 2) actualWidth = widthProperty.substring(0, widthProperty.length - 2);
: widthProperty; inPixel = true;
} else {
actualWidth = widthProperty;
}
customDimensions = true; customDimensions = true;
} else { } else {
actualWidth = String(naturalWidth); actualWidth = String(naturalWidth);
@ -89,6 +93,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
? heightProperty.substring(0, heightProperty.length - 2) ? heightProperty.substring(0, heightProperty.length - 2)
: heightProperty; : heightProperty;
customDimensions = true; customDimensions = true;
} else if (inPixel) {
actualHeight = String(Math.trunc(Number(actualWidth) / aspectRatio));
} else { } else {
actualHeight = String(naturalHeight); actualHeight = String(naturalHeight);
} }
@ -113,21 +119,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const dragWidth = event.clientX - containerLeft - left; const dragWidth = event.clientX - containerLeft - left;
const dragHeight = event.clientY - containerTop - top; const dragHeight = event.clientY - containerTop - top;
const widthIncrease = dragWidth / naturalWidth; const widthIncrease = dragWidth / naturalWidth!;
const heightIncrease = dragHeight / naturalHeight; const heightIncrease = dragHeight / naturalHeight!;
if (widthIncrease > heightIncrease) { if (widthIncrease > heightIncrease) {
width = Math.trunc(dragWidth); width = Math.trunc(dragWidth);
height = Math.trunc(naturalHeight * widthIncrease); height = Math.trunc(naturalHeight! * widthIncrease);
} else { } else {
height = Math.trunc(dragHeight); height = Math.trunc(dragHeight);
width = Math.trunc(naturalWidth * heightIncrease); width = Math.trunc(naturalWidth! * heightIncrease);
} }
showDimensions = width > 100; showDimensions = width > 100;
image!.style.width = `${width}px`; image!.style.width = `${width}px`;
image!.style.height = `${height}px`; image!.style.removeProperty("height");
} }
let sizeSelect: any; let sizeSelect: any;