GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-25 01:06:35 -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

155
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 { 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 nightMode = getContext(nightModeKey);
@ -19,48 +23,57 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script>
<div
class:nightMode
class:active
class="nw"
on:mousedown|preventDefault
on:pointerdown={onPointerdown(true, true)}
on:pointerup
on:pointermove
/>
<div
class:nightMode
class:active
class="ne"
on:mousedown|preventDefault
on:pointerdown={onPointerdown(true, false)}
on:pointerup
on:pointermove
/>
<div
class:nightMode
class:active
class="sw"
on:mousedown|preventDefault
on:pointerdown={onPointerdown(false, true)}
on:pointerup
on:pointermove
/>
<div
class:nightMode
class:active
class="se"
on:mousedown|preventDefault
on:pointerdown={onPointerdown(false, false)}
on:pointerup
on:pointermove
/>
class="d-contents"
style="--offsetX: {offsetX}px; --offsetY: {offsetY}px; --activeSize: {activeSize}px;"
>
<div
class:nightMode
class:active
class="nw"
on:mousedown|preventDefault
on:pointerdown={onPointerdown(true, true)}
on:pointerup
on:pointermove
/>
<div
class:nightMode
class:active
class="ne"
on:mousedown|preventDefault
on:pointerdown={onPointerdown(true, false)}
on:pointerup
on:pointermove
/>
<div
class:nightMode
class:active
class="sw"
on:mousedown|preventDefault
on:pointerdown={onPointerdown(false, true)}
on:pointerup
on:pointermove
/>
<div
class:nightMode
class:active
class="se"
on:mousedown|preventDefault
on:pointerdown={onPointerdown(false, false)}
on:pointerup
on:pointermove
/>
</div>
<style lang="scss">
div {
.d-contents {
display: contents;
}
div > div {
position: absolute;
width: 7px;
height: 7px;
width: var(--activeSize);
height: var(--activeSize);
border: 1px solid black;
&.active {
@ -74,49 +87,49 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
background-color: white;
}
}
}
.nw {
top: -5px;
left: -5px;
border-bottom: none;
border-right: none;
&.nw {
top: calc(0px - var(--offsetY));
left: calc(0px - var(--offsetX));
border-bottom: none;
border-right: none;
&.active {
cursor: nw-resize;
&.active {
cursor: nw-resize;
}
}
}
.ne {
top: -5px;
right: -5px;
border-bottom: none;
border-left: none;
&.ne {
top: calc(0px - var(--offsetY));
right: calc(0px - var(--offsetX));
border-bottom: none;
border-left: none;
&.active {
cursor: ne-resize;
&.active {
cursor: ne-resize;
}
}
}
.sw {
bottom: -5px;
left: -5px;
border-top: none;
border-right: none;
&.sw {
bottom: calc(0px - var(--offsetY));
left: calc(0px - var(--offsetX));
border-top: none;
border-right: none;
&.active {
cursor: sw-resize;
&.active {
cursor: sw-resize;
}
}
}
.se {
bottom: -5px;
right: -5px;
border-top: none;
border-left: none;
&.se {
bottom: calc(0px - var(--offsetY));
right: calc(0px - var(--offsetX));
border-top: none;
border-left: none;
&.active {
cursor: se-resize;
&.active {
cursor: se-resize;
}
}
}
</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 activeImage: HTMLImageElement | null;
export let offsetX = 0;
export let offsetY = 0;
$: if (activeImage) {
updateSelection();
} else {
@ -41,7 +44,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script>
<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 />
</div>
@ -50,9 +53,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
div {
position: absolute;
left: var(--left, 0);
top: var(--top, 0);
width: var(--width);
height: var(--height);
left: calc(var(--left, 0px) - var(--offsetX, 0px));
top: calc(var(--top, 0px) - var(--offsetY, 0px));
width: calc(var(--width) + 2 * var(--offsetX, 0px));
height: calc(var(--height) + 2 * var(--offsetY, 0px));
}
</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
{active}
activeSize={7}
offsetX={5}
offsetY={5}
on:pointerclick={setPointerCapture}
on:pointerup={startObserving}
on:pointermove={resize}