diff --git a/ts/editor/ImageHandle.svelte b/ts/editor/ImageHandle.svelte index d22184d13..453215e94 100644 --- a/ts/editor/ImageHandle.svelte +++ b/ts/editor/ImageHandle.svelte @@ -13,6 +13,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html export let imageRule: CSSStyleRule | null = null; export let container: HTMLElement; + $: showDimensions = image + ? parseInt(getComputedStyle(image).getPropertyValue("width")) > 220 + : false; + + $: selector = `:not([src="${image?.getAttribute("src")}"])`; + $: active = imageRule?.selectorText.includes(selector) as boolean; + let naturalWidth = 0; let naturalHeight = 0; @@ -65,19 +72,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html const heightIncrease = dragHeight / naturalHeight; if (widthIncrease > heightIncrease) { - width = dragWidth; - height = naturalHeight * widthIncrease; + width = Math.trunc(dragWidth); + height = Math.trunc(naturalHeight * widthIncrease); } else { - height = dragHeight; - width = naturalWidth * heightIncrease; + height = Math.trunc(dragHeight); + width = Math.trunc(naturalWidth * heightIncrease); } + showDimensions = width > 220; + image!.style.width = `${width}px`; image!.style.height = `${height}px`; } + let sizeSelect: any; + + function onDblclick() { + sizeSelect.toggleActualSize(); + } + const nightMode = getContext(nightModeKey); - let active: boolean = false; {#if image && imageRule} @@ -85,21 +99,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html style="--top: {top}px; --left: {left}px; --width: {width}px; --height: {height}px;" class="image-handle-selection" > -
+
-
- {width}×{height} (Original: {naturalWidth}×{naturalHeight}) -
+ {#if showDimensions} +
+ {width}×{height} (Original: {naturalWidth}×{naturalHeight}) +
+ {/if}