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

Better algorithmus for minimum resize + prevent overflow of dimensions

Browse source
This commit is contained in:
Henrik Giesel 2021-07-30 01:03:21 +02:00 committed by Damien Elmes
parent 083d173469
commit 5f1ed707ff
1 changed files with 38 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
ts/editor/ImageHandle.svelte
View file

@ -125,6 +125,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
(event.target as Element).setPointerCapture(event.pointerId); (event.target as Element).setPointerCapture(event.pointerId);
}; };
$: [minResizeWidth, minResizeHeight] =
aspectRatio > 1 ? [5 * aspectRatio, 5] : [5, 5 / aspectRatio];
function resize(event: PointerEvent): void { function resize(event: PointerEvent): void {
const element = event.target! as Element; const element = event.target! as Element;
@ -139,10 +142,10 @@ 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.max(Math.trunc(dragWidth), 12); width = Math.max(Math.trunc(dragWidth), minResizeWidth);
height = Math.trunc(naturalHeight! * (width / naturalWidth!)); height = Math.trunc(naturalHeight! * (width / naturalWidth!));
} else { } else {
height = Math.max(Math.trunc(dragHeight), 10); height = Math.max(Math.trunc(dragHeight), minResizeHeight);
width = Math.trunc(naturalWidth! * (height / naturalHeight!)); width = Math.trunc(naturalWidth! * (height / naturalHeight!));
} }
@ -162,6 +165,31 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const nightMode = getContext(nightModeKey); const nightMode = getContext(nightModeKey);
onDestroy(() => resizeObserver.disconnect()); onDestroy(() => resizeObserver.disconnect());
let overflowFix = 0;
function preventViewportIntersection(entries: IntersectionObserverEntry[]) {
const entry = entries[0];
console.log(entry.rootBounds!.width);
const overflow = isRtl
? entry.rootBounds!.width -
entry.boundingClientRect.x -
entry.boundingClientRect.width
: entry.boundingClientRect.x;
overflowFix = Math.min(0, overflowFix + overflow, overflow);
}
function noViewportOverflow(element: HTMLElement) {
const dimensionsObserver = new IntersectionObserver(
preventViewportIntersection
);
dimensionsObserver.observe(element);
return {
destroy: () => dimensionsObserver.disconnect(),
};
}
</script> </script>
<div <div
@ -182,7 +210,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{/if} {/if}
{#if showDimensions} {#if showDimensions}
<div class="image-handle-dimensions" class:is-rtl={isRtl}> <div
class="image-handle-dimensions"
class:is-rtl={isRtl}
style="--overflow-fix: {overflowFix}px"
use:noViewportOverflow
>
<span>{actualWidth}&times;{actualHeight}</span> <span>{actualWidth}&times;{actualHeight}</span>
{#if customDimensions}<span {#if customDimensions}<span
>(Original: {naturalWidth}&times;{naturalHeight})</span >(Original: {naturalWidth}&times;{naturalHeight})</span
@ -298,11 +331,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
bottom: 3px; bottom: 3px;
right: 3px; right: 3px;
margin-left: 3px; margin-left: 3px;
margin-right: var(--overflow-fix, 0);
&.is-rtl { &.is-rtl {
right: auto; right: auto;
left: 3px; left: 3px;
margin-right: 3px; margin-right: 3px;
margin-left: var(--overflow-fix, 0);
} }
} }