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

Move selector / active logic up to ImageHandle

Browse source
This commit is contained in:
Henrik Giesel 2021-07-21 15:52:48 +02:00 committed by Damien Elmes
parent a09187007d
commit def2333605
2 changed files with 32 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
ts/editor/ImageHandle.svelte
View file

@ -13,6 +13,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let imageRule: CSSStyleRule | null = null; export let imageRule: CSSStyleRule | null = null;
export let container: HTMLElement; export let container: HTMLElement;
$: showDimensions = image
? parseInt(getComputedStyle(image).getPropertyValue("width")) > 220
: false;
$: selector = `:not([src="${image?.getAttribute("src")}"])`;
$: active = imageRule?.selectorText.includes(selector) as boolean;
let naturalWidth = 0; let naturalWidth = 0;
let naturalHeight = 0; let naturalHeight = 0;
@ -65,19 +72,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const heightIncrease = dragHeight / naturalHeight; const heightIncrease = dragHeight / naturalHeight;
if (widthIncrease > heightIncrease) { if (widthIncrease > heightIncrease) {
width = dragWidth; width = Math.trunc(dragWidth);
height = naturalHeight * widthIncrease; height = Math.trunc(naturalHeight * widthIncrease);
} else { } else {
height = dragHeight; height = Math.trunc(dragHeight);
width = naturalWidth * heightIncrease; width = Math.trunc(naturalWidth * heightIncrease);
} }
showDimensions = width > 220;
image!.style.width = `${width}px`; image!.style.width = `${width}px`;
image!.style.height = `${height}px`; image!.style.height = `${height}px`;
} }
let sizeSelect: any;
function onDblclick() {
sizeSelect.toggleActualSize();
}
const nightMode = getContext(nightModeKey); const nightMode = getContext(nightModeKey);
let active: boolean = false;
</script> </script>
{#if image && imageRule} {#if image && imageRule}
@ -85,21 +99,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
style="--top: {top}px; --left: {left}px; --width: {width}px; --height: {height}px;" style="--top: {top}px; --left: {left}px; --width: {width}px; --height: {height}px;"
class="image-handle-selection" class="image-handle-selection"
> >
<div class="image-handle-bg" /> <div class="image-handle-bg" on:dblclick={onDblclick} />
<div class="image-handle-buttons"> <div class="image-handle-buttons">
<ImageHandleButtons bind:float={image.style.float} /> <ImageHandleButtons bind:float={image.style.float} />
</div> </div>
<div class="image-handle-size-select"> <div class="image-handle-size-select">
<ImageHandleSizeSelect <ImageHandleSizeSelect
bind:this={sizeSelect}
bind:active
{selector}
{image} {image}
{imageRule} {imageRule}
bind:active
on:update={updateSizes} on:update={updateSizes}
/> />
</div> </div>
<div class="image-handle-dimensions"> {#if showDimensions}
{width}&times;{height} (Original: {naturalWidth}&times;{naturalHeight}) <div class="image-handle-dimensions">
</div> {width}&times;{height} (Original: {naturalWidth}&times;{naturalHeight})
</div>
{/if}
<div class:nightMode class="image-handle-control image-handle-control-nw" /> <div class:nightMode class="image-handle-control image-handle-control-nw" />
<div class:nightMode class="image-handle-control image-handle-control-ne" /> <div class:nightMode class="image-handle-control image-handle-control-ne" />
<div <div

10
ts/editor/ImageHandleSizeSelect.svelte
View file

@ -14,16 +14,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let image: HTMLImageElement; export let image: HTMLImageElement;
export let imageRule: CSSStyleRule; export let imageRule: CSSStyleRule;
export let selector: string;
const selector = `:not([src="${image.getAttribute("src")}"])`; export let active: boolean;
export let active = imageRule.selectorText.includes(selector);
$: icon = active ? sizeActual : sizeMinimized; $: icon = active ? sizeActual : sizeMinimized;
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
function toggleActualSize() { export function toggleActualSize() {
if (!image.hasAttribute("src")) { if (!image.hasAttribute("src")) {
return; return;
} }
@ -36,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
active = true; active = true;
} }
dispatch("update"); dispatch("update", active);
} }
</script> </script>