Skip to content

Commit

Permalink
Improve event propagation in responsive stage component
Browse files Browse the repository at this point in the history
  • Loading branch information
TeyKey1 committed Apr 24, 2024
1 parent 2a18b63 commit 6135245
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 2 deletions.
1 change: 1 addition & 0 deletions src/lib/Stage.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Stage.html),
setContainerContext(Container.Stage, inner);
</script>

<!-- TODO: Figure out a way to split the konvaEvents from restProps (otherwise konva event hooks might also be called on div events)-->
<div bind:this={stage} {...restProps}>
{#if isReady && children}
{@render children()}
Expand Down
21 changes: 19 additions & 2 deletions src/routes/ResponsiveStage.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,15 @@
handle?: null | Konva.Stage;
} & KonvaEventHooks;
let { children, handle = $bindable(), ...restProps }: Props = $props();
let {
children,
handle = $bindable(),
onpointerdblclick,
onpointerdown,
onpointerup,
onpointermove,
onmouseout
}: Props = $props();
let container: HTMLDivElement;
Expand Down Expand Up @@ -43,7 +51,16 @@
</script>

<div bind:this={container} style="max-height: 70vh;">
<Stage {config} style="border: solid grey 5px;" bind:handle {...restProps}>
<Stage
{config}
style="border: solid grey 5px;"
bind:handle
{onpointerdblclick}
{onpointerdown}
{onpointerup}
{onpointermove}
{onmouseout}
>
{@render children()}
</Stage>
</div>

0 comments on commit 6135245

Please sign in to comment.