mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-07-07 15:55:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

fix(ReferencePoint): handle target selection via event delegation for clicks

Browse source
This commit is contained in:
Smit 2025-06-28 17:51:02 +05:30
parent d1e6d9a312
commit 37eade0204
1 changed files with 16 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

29
frontend/src/components/widgets/inputs/ReferencePointInput.svelte
View file

@ -10,22 +10,25 @@
let { value, disabled = false, onvalue }: Props = $props();
function setValue(event: MouseEvent) {
let element = event.target as HTMLElement;
let position = element.dataset.position as ReferencePoint;
onvalue?.(position);
const element = event.target as HTMLDivElement;
const button = element.parentElement;
if (button) {
let position = button.dataset.position! as ReferencePoint;
onvalue?.(position);
}
}
</script>
<div class="reference-point-input" class:disabled>
<button onclick={setValue} data-position="TopLeft" class="row-1 col-1" class:active={value === "TopLeft"} tabindex="-1" {disabled}><div></div></button>
<button onclick={setValue} data-position="TopCenter" class="row-1 col-2" class:active={value === "TopCenter"} tabindex="-1" {disabled}><div></div></button>
<button onclick={setValue} data-position="TopRight" class="row-1 col-3" class:active={value === "TopRight"} tabindex="-1" {disabled}><div></div></button>
<button onclick={setValue} data-position="CenterLeft" class="row-2 col-1" class:active={value === "CenterLeft"} tabindex="-1" {disabled}><div></div></button>
<button onclick={setValue} data-position="Center" class="row-2 col-2" class:active={value === "Center"} tabindex="-1" {disabled}><div></div></button>
<button onclick={setValue} data-position="CenterRight" class="row-2 col-3" class:active={value === "CenterRight"} tabindex="-1" {disabled}><div></div></button>
<button onclick={setValue} data-position="BottomLeft" class="row-3 col-1" class:active={value === "BottomLeft"} tabindex="-1" {disabled}><div></div></button>
<button onclick={setValue} data-position="BottomCenter" class="row-3 col-2" class:active={value === "BottomCenter"} tabindex="-1" {disabled}><div></div></button>
<button onclick={setValue} data-position="BottomRight" class="row-3 col-3" class:active={value === "BottomRight"} tabindex="-1" {disabled}><div></div></button>
<div class="reference-point-input" class:disabled onclick={setValue}>
<button data-position="TopLeft" class="row-1 col-1" class:active={value === "TopLeft"} tabindex="-1" {disabled}><div></div></button>
<button data-position="TopCenter" class="row-1 col-2" class:active={value === "TopCenter"} tabindex="-1" {disabled}><div></div></button>
<button data-position="TopRight" class="row-1 col-3" class:active={value === "TopRight"} tabindex="-1" {disabled}><div></div></button>
<button data-position="CenterLeft" class="row-2 col-1" class:active={value === "CenterLeft"} tabindex="-1" {disabled}><div></div></button>
<button data-position="Center" class="row-2 col-2" class:active={value === "Center"} tabindex="-1" {disabled}><div></div></button>
<button data-position="CenterRight" class="row-2 col-3" class:active={value === "CenterRight"} tabindex="-1" {disabled}><div></div></button>
<button data-position="BottomLeft" class="row-3 col-1" class:active={value === "BottomLeft"} tabindex="-1" {disabled}><div></div></button>
<button data-position="BottomCenter" class="row-3 col-2" class:active={value === "BottomCenter"} tabindex="-1" {disabled}><div></div></button>
<button data-position="BottomRight" class="row-3 col-3" class:active={value === "BottomRight"} tabindex="-1" {disabled}><div></div></button>
</div>
<style lang="scss" global>