Binding the config prop
Svelte-Konva is able to keep certain props in sync with the internal state of Konva (position, rotation, scale, ...) after dragend
and transformend
events in case the prop is bound.
Disabling automatic syncing
In most cases this default behavior of svelte-konva listening to the dragend
and transformend
events is what you want. In some cases this might not be beneficial though (mainly for performance reasons). In such cases you can opt out of this behavior by passing the staticConfig
prop to the component, in which case svelte-konva will not listen to those events and update the bound props:
<script>
import { Stage, Layer, Rect } from 'svelte-konva';
// x and y values will not be synced with actual position after dragend even if bound
const config = { x: 100, y: 100, width: 400, height: 200, fill: 'blue', draggable: true };
</script>
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<Rect {...config} staticConfig />
</Layer>
</Stage>
Keep in mind that svelte-konva will evaluate the staticConfig
prop only once during component initialization. Changing the staticConfig
prop after the component has been initialized will not have any effect.
Drag the different rings and observe the reactive changes triggered by Svelte. Note that only the bound ring (yellow) changes the coordinates on dragend
automatically.