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

Introduce HandleControl

Browse source
This commit is contained in:
Henrik Giesel 2021-08-04 22:58:24 +02:00 committed by Damien Elmes
parent 18ed6597f5
commit 73d56df610
2 changed files with 144 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
ts/editor/HandleControl.svelte Normal file
View file

@ -0,0 +1,122 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { createEventDispatcher, getContext } from "svelte";
import { nightModeKey } from "components/context-keys";
export let active: boolean;
const dispatch = createEventDispatcher();
const nightMode = getContext(nightModeKey);
const onPointerdown =
(north: boolean, west: boolean) =>
(event: PointerEvent): void => {
dispatch("pointerclick", { north, west, originalEvent: event });
};
</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
/>
<style lang="scss">
div {
position: absolute;
width: 7px;
height: 7px;
border: 1px solid black;
&.active {
background-color: black;
}
&.nightMode {
border-color: white;
&.active {
background-color: white;
}
}
}
.nw {
top: -5px;
left: -5px;
border-bottom: none;
border-right: none;
&.active {
cursor: nw-resize;
}
}
.ne {
top: -5px;
right: -5px;
border-bottom: none;
border-left: none;
&.active {
cursor: ne-resize;
}
}
.sw {
bottom: -5px;
left: -5px;
border-top: none;
border-right: none;
&.active {
cursor: sw-resize;
}
}
.se {
bottom: -5px;
right: -5px;
border-top: none;
border-left: none;
&.active {
cursor: se-resize;
}
}
</style>

122
ts/editor/ImageHandle.svelte
View file

@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import HandleSelection from "./HandleSelection.svelte";
import HandleControl from "./HandleControl.svelte";
import ImageHandleFloat from "./ImageHandleFloat.svelte";
import ImageHandleSizeSelect from "./ImageHandleSizeSelect.svelte";
@ -117,10 +118,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let getDragWidth: (event: PointerEvent) => number;
let getDragHeight: (event: PointerEvent) => number;
const setPointerCapture =
(north: boolean, west: boolean) =>
(event: PointerEvent): void => {
if (!active || event.pointerId !== 1) {
function setPointerCapture({ detail }: CustomEvent): void {
if (!active || detail.originalEvent.pointerId !== 1) {
return;
}
@ -128,19 +127,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const imageLeft = imageRect!.left;
const imageRight = imageRect!.right;
const [multX, imageX] = west ? [-1, imageRight] : [1, -imageLeft];
const [multX, imageX] = detail.west ? [-1, imageRight] : [1, -imageLeft];
getDragWidth = ({ clientX }) => multX * clientX + imageX;
const imageTop = imageRect!.top;
const imageBottom = imageRect!.bottom;
const [multY, imageY] = north ? [-1, imageBottom] : [1, -imageTop];
const [multY, imageY] = detail.north ? [-1, imageBottom] : [1, -imageTop];
getDragHeight = ({ clientY }) => multY * clientY + imageY;
stopObserving();
(event.target as Element).setPointerCapture(event.pointerId);
};
const target = detail.originalEvent.target as Element;
target.setPointerCapture(detail.originalEvent.pointerId);
}
$: [minResizeWidth, minResizeHeight] =
aspectRatio > 1 ? [5 * aspectRatio, 5] : [5, 5 / aspectRatio];
@ -242,39 +243,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{/if}
{#if activeImage}
<div
class:nightMode
class:active
class="image-handle-control image-handle-control-nw"
on:mousedown|preventDefault
on:pointerdown={setPointerCapture(true, true)}
on:pointerup={startObserving}
on:pointermove={resize}
/>
<div
class:nightMode
class:active
class="image-handle-control image-handle-control-ne"
on:mousedown|preventDefault
on:pointerdown={setPointerCapture(true, false)}
on:pointerup={startObserving}
on:pointermove={resize}
/>
<div
class:nightMode
class:active
class="image-handle-control image-handle-control-sw"
on:mousedown|preventDefault
on:pointerdown={setPointerCapture(false, true)}
on:pointerup={startObserving}
on:pointermove={resize}
/>
<div
class:nightMode
class:active
class="image-handle-control image-handle-control-se"
on:mousedown|preventDefault
on:pointerdown={setPointerCapture(false, false)}
<HandleControl
{active}
on:pointerclick={setPointerCapture}
on:pointerup={startObserving}
on:pointermove={resize}
/>
@ -286,13 +257,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
position: absolute;
}
.image-handle-selection {
top: var(--top);
left: var(--left);
width: var(--width);
height: var(--height);
}
.image-handle-bg {
width: 100%;
height: 100%;
@ -343,66 +307,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
margin-left: var(--overflow-fix, 0);
}
}
.image-handle-control {
width: 7px;
height: 7px;
border: 1px solid black;
&.active {
background-color: black;
}
&.nightMode {
border-color: white;
&.active {
background-color: white;
}
}
}
.image-handle-control-nw {
top: -5px;
left: -5px;
border-bottom: none;
border-right: none;
&.active {
cursor: nw-resize;
}
}
.image-handle-control-ne {
top: -5px;
right: -5px;
border-bottom: none;
border-left: none;
&.active {
cursor: ne-resize;
}
}
.image-handle-control-sw {
bottom: -5px;
left: -5px;
border-top: none;
border-right: none;
&.active {
cursor: sw-resize;
}
}
.image-handle-control-se {
bottom: -5px;
right: -5px;
border-top: none;
border-left: none;
&.active {
cursor: se-resize;
}
}
</style>