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

Parameterize overlay handle offsets

Browse source
This commit is contained in:
Henrik Giesel 2021-08-06 00:16:15 +02:00 committed by Damien Elmes
parent f2f93ef67e
commit 017b6f9ff1
3 changed files with 95 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
ts/editor/HandleControl.svelte
View file

@ -6,7 +6,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { createEventDispatcher, getContext } from "svelte"; import { createEventDispatcher, getContext } from "svelte";
import { nightModeKey } from "components/context-keys"; import { nightModeKey } from "components/context-keys";
export let active: boolean; export let offsetX = 0;
export let offsetY = 0;
export let active = false;
export let activeSize = 5;
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const nightMode = getContext(nightModeKey); const nightMode = getContext(nightModeKey);
@ -18,6 +22,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}; };
</script> </script>
<div
class="d-contents"
style="--offsetX: {offsetX}px; --offsetY: {offsetY}px; --activeSize: {activeSize}px;"
>
<div <div
class:nightMode class:nightMode
class:active class:active
@ -54,13 +62,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:pointerup on:pointerup
on:pointermove on:pointermove
/> />
</div>
<style lang="scss"> <style lang="scss">
div { .d-contents {
display: contents;
}
div > div {
position: absolute; position: absolute;
width: 7px; width: var(--activeSize);
height: 7px; height: var(--activeSize);
border: 1px solid black; border: 1px solid black;
&.active { &.active {
@ -74,11 +87,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
background-color: white; background-color: white;
} }
} }
}
.nw { &.nw {
top: -5px; top: calc(0px - var(--offsetY));
left: -5px; left: calc(0px - var(--offsetX));
border-bottom: none; border-bottom: none;
border-right: none; border-right: none;
@ -87,9 +99,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
} }
.ne { &.ne {
top: -5px; top: calc(0px - var(--offsetY));
right: -5px; right: calc(0px - var(--offsetX));
border-bottom: none; border-bottom: none;
border-left: none; border-left: none;
@ -98,9 +110,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
} }
.sw { &.sw {
bottom: -5px; bottom: calc(0px - var(--offsetY));
left: -5px; left: calc(0px - var(--offsetX));
border-top: none; border-top: none;
border-right: none; border-right: none;
@ -109,9 +121,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
} }
.se { &.se {
bottom: -5px; bottom: calc(0px - var(--offsetY));
right: -5px; right: calc(0px - var(--offsetX));
border-top: none; border-top: none;
border-left: none; border-left: none;
@ -119,4 +131,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
cursor: se-resize; cursor: se-resize;
} }
} }
}
</style> </style>

13
ts/editor/HandleSelection.svelte
View file

@ -6,6 +6,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let container: HTMLElement; export let container: HTMLElement;
export let activeImage: HTMLImageElement | null; export let activeImage: HTMLImageElement | null;
export let offsetX = 0;
export let offsetY = 0;
$: if (activeImage) { $: if (activeImage) {
updateSelection(); updateSelection();
} else { } else {
@ -41,7 +44,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<div <div
style="--left: {left}px; --top: {top}px; --width: {width}px; --height: {height}px;" style="--left: {left}px; --top: {top}px; --width: {width}px; --height: {height}px; --offsetX: {offsetX}px; --offsetY: {offsetY}px;"
> >
<slot /> <slot />
</div> </div>
@ -50,9 +53,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
div { div {
position: absolute; position: absolute;
left: var(--left, 0); left: calc(var(--left, 0px) - var(--offsetX, 0px));
top: var(--top, 0); top: calc(var(--top, 0px) - var(--offsetY, 0px));
width: var(--width); width: calc(var(--width) + 2 * var(--offsetX, 0px));
height: var(--height); height: calc(var(--height) + 2 * var(--offsetY, 0px));
} }
</style> </style>

3
ts/editor/ImageHandle.svelte
View file

@ -179,6 +179,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<HandleControl <HandleControl
{active} {active}
activeSize={7}
offsetX={5}
offsetY={5}
on:pointerclick={setPointerCapture} on:pointerclick={setPointerCapture}
on:pointerup={startObserving} on:pointerup={startObserving}
on:pointermove={resize} on:pointermove={resize}