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

Hide Float icons when width too small + Avoid too small resizing

Browse source
This commit is contained in:
Henrik Giesel 2021-07-27 16:54:23 +02:00 committed by Damien Elmes
parent f379e18e6f
commit e581d593d3
1 changed files with 19 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
ts/editor/ImageHandle.svelte
View file

@ -21,7 +21,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
$: aspectRatio = naturalWidth && naturalHeight ? naturalWidth / naturalHeight : NaN; $: aspectRatio = naturalWidth && naturalHeight ? naturalWidth / naturalHeight : NaN;
$: showDimensions = image $: showDimensions = image
? parseInt(getComputedStyle(image).getPropertyValue("width")) > 100 ? parseInt(getComputedStyle(image).getPropertyValue("height")) >= 50
: false;
$: showFloat = image
? parseInt(getComputedStyle(image).getPropertyValue("width")) >= 100
: false; : false;
$: active = imageRule?.selectorText.includes(selector) as boolean; $: active = imageRule?.selectorText.includes(selector) as boolean;
@ -88,13 +92,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
const heightProperty = image!.style.height; const heightProperty = image!.style.height;
if (heightProperty) { if (inPixel || heightProperty === "auto") {
actualHeight = String(Math.trunc(Number(actualWidth) / aspectRatio));
} else if (heightProperty) {
actualHeight = heightProperty.endsWith("px") actualHeight = heightProperty.endsWith("px")
? 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);
} }
@ -123,14 +127,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const heightIncrease = dragHeight / naturalHeight!; const heightIncrease = dragHeight / naturalHeight!;
if (widthIncrease > heightIncrease) { if (widthIncrease > heightIncrease) {
width = Math.trunc(dragWidth); width = Math.max(Math.trunc(dragWidth), 12);
height = Math.trunc(naturalHeight! * widthIncrease); height = Math.trunc(naturalHeight! * (width / naturalWidth!));
} else { } else {
height = Math.trunc(dragHeight); height = Math.max(Math.trunc(dragHeight), 10);
width = Math.trunc(naturalWidth! * heightIncrease); width = Math.trunc(naturalWidth! * (height / naturalHeight!));
} }
showDimensions = width > 100; showDimensions = height >= 50;
showFloat = width >= 100;
image!.style.width = `${width}px`; image!.style.width = `${width}px`;
image!.style.removeProperty("height"); image!.style.removeProperty("height");
@ -157,9 +162,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:mousedown|preventDefault on:mousedown|preventDefault
on:dblclick={onDblclick} on:dblclick={onDblclick}
/> />
<div class="image-handle-float" class:is-rtl={isRtl}> {#if showFloat}
<ImageHandleFloat {isRtl} bind:float={image.style.float} /> <div class="image-handle-float" class:is-rtl={isRtl}>
</div> <ImageHandleFloat {isRtl} bind:float={image.style.float} />
</div>
{/if}
<div class="image-handle-size-select" class:is-rtl={isRtl}> <div class="image-handle-size-select" class:is-rtl={isRtl}>
<ImageHandleSizeSelect <ImageHandleSizeSelect
bind:this={sizeSelect} bind:this={sizeSelect}