GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-11-06 20:57:13 -05:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Implement HandleBackground

Browse source
This commit is contained in:
Henrik Giesel 2021-08-05 02:58:52 +02:00 committed by Damien Elmes
parent 40c62c8c41
commit 1c99d163d1
2 changed files with 32 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
ts/editor/HandleBackground.svelte Normal file
View file

@ -0,0 +1,14 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<div on:mousedown|preventDefault on:click on:dblclick />
<style lang="scss">
div {
width: 100%;
height: 100%;
background-color: black;
opacity: 0.2;
}
</style>

46
ts/editor/ImageHandle.svelte
View file

@ -3,6 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--> -->
<script lang="ts"> <script lang="ts">
import HandleBackground from "./HandleBackground.svelte";
import HandleSelection from "./HandleSelection.svelte"; import HandleSelection from "./HandleSelection.svelte";
import HandleControl from "./HandleControl.svelte"; import HandleControl from "./HandleControl.svelte";
import ImageHandleFloat from "./ImageHandleFloat.svelte"; import ImageHandleFloat from "./ImageHandleFloat.svelte";
@ -195,12 +196,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--height="{height}px" --height="{height}px"
> >
{#if activeImage} {#if activeImage}
<div <HandleBackground on:dblclick={onDblclick} />
class="image-handle-bg" {/if}
on:mousedown|preventDefault
on:dblclick={onDblclick}
/>
{#if sheet}
<div class="image-handle-size-select" class:is-rtl={isRtl}>
<ImageHandleSizeSelect
bind:this={sizeSelect}
bind:active
{container}
{sheet}
{activeImage}
{isRtl}
on:update={updateSizesWithDimensions}
/>
</div>
{/if}
{#if activeImage}
{#if showFloat} {#if showFloat}
<div <div
class="image-handle-float" class="image-handle-float"
@ -223,23 +236,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
>(Original: {naturalWidth}&times;{naturalHeight})</span >(Original: {naturalWidth}&times;{naturalHeight})</span
>{/if} >{/if}
</div> </div>
{/if}
{#if sheet}
<div class="image-handle-size-select" class:is-rtl={isRtl}>
<ImageHandleSizeSelect
bind:this={sizeSelect}
bind:active
{container}
{sheet}
{activeImage}
{isRtl}
on:update={updateSizesWithDimensions}
/>
</div>
{/if}
{#if activeImage}
<HandleControl <HandleControl
{active} {active}
on:pointerclick={setPointerCapture} on:pointerclick={setPointerCapture}
@ -254,13 +251,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
position: absolute; position: absolute;
} }
.image-handle-bg {
width: 100%;
height: 100%;
background-color: black;
opacity: 0.2;
}
.image-handle-float { .image-handle-float {
top: 3px; top: 3px;
left: 3px; left: 3px;