GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-11-10 22:57:11 -05:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Fix resetting image-handle-bg on no activeImage

Browse source
This commit is contained in:
Henrik Giesel 2021-07-30 20:37:10 +02:00 committed by Damien Elmes
parent a8ffdc2d7f
commit 899434c682
2 changed files with 34 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
ts/editor/ImageHandle.svelte
View file

@ -17,13 +17,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
$: naturalWidth = activeImage?.naturalWidth; $: naturalWidth = activeImage?.naturalWidth;
$: naturalHeight = activeImage?.naturalHeight; $: naturalHeight = activeImage?.naturalHeight;
$: aspectRatio = naturalWidth && naturalHeight ? naturalWidth / naturalHeight : NaN; $: aspectRatio = naturalWidth && naturalHeight ? naturalWidth / naturalHeight : NaN;
$: showFloat = activeImage ? Number(activeImage!.width) >= 100 : false; $: showFloat = activeImage ? Number(activeImage!.width) >= 100 : false;
let actualWidth = ""; /* SIZES */
let actualHeight = "";
let customDimensions = false;
let containerTop = 0; let containerTop = 0;
let containerLeft = 0; let containerLeft = 0;
@ -32,6 +28,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let width = 0; let width = 0;
let height = 0; let height = 0;
function updateSizes() {
const containerRect = container.getBoundingClientRect();
const imageRect = activeImage!.getBoundingClientRect();
containerTop = containerRect.top;
containerLeft = containerRect.left;
top = imageRect!.top - containerTop;
left = imageRect!.left - containerLeft;
width = activeImage!.clientWidth;
height = activeImage!.clientHeight;
}
function resetSizes() { function resetSizes() {
top = 0; top = 0;
left = 0; left = 0;
@ -39,9 +48,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
height = 0; height = 0;
} }
$: if (activeImage) {
updateSizes();
} else {
resetSizes();
}
let actualWidth = "";
let actualHeight = "";
let customDimensions = false;
let overflowFix = 0; let overflowFix = 0;
async function updateDimensions(dimensions: HTMLDivElement) { function updateDimensions(dimensions: HTMLDivElement) {
/* we do not want the actual width, but rather the intended display width */ /* we do not want the actual width, but rather the intended display width */
const widthAttribute = activeImage!.getAttribute("width"); const widthAttribute = activeImage!.getAttribute("width");
customDimensions = false; customDimensions = false;
@ -63,40 +81,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
actualHeight = String(naturalHeight); actualHeight = String(naturalHeight);
} }
await tick(); tick().then(() => {
const boundingClientRect = dimensions.getBoundingClientRect();
const overflow = isRtl
? window.innerWidth - boundingClientRect.x - boundingClientRect.width
: boundingClientRect.x;
const boundingClientRect = dimensions.getBoundingClientRect(); overflowFix = Math.min(0, overflowFix + overflow, overflow);
const overflow = isRtl });
? window.innerWidth - boundingClientRect.x - boundingClientRect.width
: boundingClientRect.x;
overflowFix = Math.min(0, overflowFix + overflow, overflow);
console.log("b", overflowFix);
}
async function updateSizes(dimensions: HTMLDivElement) {
const containerRect = container.getBoundingClientRect();
const imageRect = activeImage!.getBoundingClientRect();
containerTop = containerRect.top;
containerLeft = containerRect.left;
top = imageRect!.top - containerTop;
left = imageRect!.left - containerLeft;
width = activeImage!.clientWidth;
height = activeImage!.clientHeight;
await updateDimensions(dimensions);
}
function initialUpdate(dimensions: HTMLDivElement) {
updateSizes(dimensions);
return { destroy: resetSizes };
} }
let dimensions: HTMLDivElement; let dimensions: HTMLDivElement;
async function updateSizesWithDimensions() { async function updateSizesWithDimensions() {
await updateSizes(dimensions); updateSizes();
updateDimensions(dimensions);
} }
/* window resizing */ /* window resizing */
@ -214,7 +213,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class="image-handle-dimensions" class="image-handle-dimensions"
class:is-rtl={isRtl} class:is-rtl={isRtl}
style="--overflow-fix: {overflowFix}px" style="--overflow-fix: {overflowFix}px"
use:initialUpdate use:updateDimensions
> >
<span>{actualWidth}&times;{actualHeight}</span> <span>{actualWidth}&times;{actualHeight}</span>
{#if customDimensions}<span {#if customDimensions}<span

1
ts/editor/ImageHandleSizeSelect.svelte
View file

@ -96,7 +96,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const width = Number(image.getAttribute("width")) || image.width; const width = Number(image.getAttribute("width")) || image.width;
const height = Number(image.getAttribute("height")) || width / aspectRatio; const height = Number(image.getAttribute("height")) || width / aspectRatio;
console.log(width, height);
rule.style.setProperty( rule.style.setProperty(
"height", "height",
height < maxHeight ? `${height}px` : "auto", height < maxHeight ? `${height}px` : "auto",