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

Fix ButtonDropdown disappearing when mouseupping on HandleBackground

Browse source
This commit is contained in:
Henrik Giesel 2021-09-02 20:03:12 +02:00 committed by Damien Elmes
parent add6d86ae6
commit bbf03a6b93
4 changed files with 19 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ts/editor/HandleBackground.svelte
View file

@ -11,7 +11,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
onMount(() => dispatch("mount", { background }));
</script>
<div bind:this={background} on:mousedown|preventDefault on:click on:dblclick />
<div
bind:this={background}
on:mousedown|preventDefault
on:dblclick
/>
<style lang="scss">
div {

8
ts/editor/HandleControl.svelte
View file

@ -32,9 +32,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class:active
class="control nw"
on:mousedown|preventDefault
on:click
on:pointerdown={onPointerdown(true, true)}
on:pointerup
on:pointermove
/>
<div
@ -42,9 +40,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class:active
class="control ne"
on:mousedown|preventDefault
on:click
on:pointerdown={onPointerdown(true, false)}
on:pointerup
on:pointermove
/>
<div
@ -52,9 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class:active
class="control sw"
on:mousedown|preventDefault
on:click
on:pointerdown={onPointerdown(false, true)}
on:pointerup
on:pointermove
/>
<div
@ -62,9 +56,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class:active
class="control se"
on:mousedown|preventDefault
on:click
on:pointerdown={onPointerdown(false, false)}
on:pointerup
on:pointermove
/>
</div>

1
ts/editor/HandleSelection.svelte
View file

@ -37,6 +37,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<div
bind:this={selection}
use:updateSelection
on:click={(event) => /* prevent triggering Bootstrap dropdown */ event.stopImmediatePropagation()}
style="--left: {left}px; --top: {top}px; --width: {width}px; --height: {height}px; --offsetX: {offsetX}px; --offsetY: {offsetY}px;"
>
<slot />

24
ts/editor/ImageHandle.svelte
View file

@ -62,20 +62,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
/* window resizing */
const resizeObserver = new ResizeObserver(async () => {
if (activeImage) {
await updateSizesWithDimensions();
}
await updateSizesWithDimensions();
});
function startObserving() {
console.log('start observe');
resizeObserver.observe(container);
}
function stopObserving() {
console.log('stop observe');
resizeObserver.unobserve(container);
}
startObserving();
$: observes = Boolean(activeImage);
$: if (observes) {
startObserving();
} else {
stopObserving();
}
/* memoized position of image on resize start
* prevents frantic behavior when image shift into the next/previous line */
@ -83,7 +88,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let getDragHeight: (event: PointerEvent) => number;
function setPointerCapture({ detail }: CustomEvent): void {
if (detail.originalEvent.pointerId !== 1) {
const pointerId = detail.originalEvent.pointerId;
if (pointerId !== 1) {
return;
}
@ -101,10 +108,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
getDragHeight = ({ clientY }) => multY * clientY + imageY;
stopObserving();
const target = detail.originalEvent.target as Element;
target.setPointerCapture(detail.originalEvent.pointerId);
target.setPointerCapture(pointerId);
}
$: [minResizeWidth, minResizeHeight] =
@ -165,7 +170,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:mount={(event) => createDropdown(event.detail.selection)}
>
<HandleBackground
on:click={(event) => event.stopPropagation()}
on:dblclick={toggleActualSize}
/>
@ -182,13 +186,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
activeSize={8}
offsetX={5}
offsetY={5}
on:click={(event) => event.stopPropagation()}
on:pointerclick={(event) => {
if (active) {
setPointerCapture(event);
}
}}
on:pointerup={startObserving}
on:pointermove={(event) => {
resize(event);
updateSizesWithDimensions();