Spaces:
Runtime error
Runtime error
File size: 1,444 Bytes
be26971 7d4e291 be26971 b4efffa d11af81 b4efffa be26971 b4efffa 7d4e291 be26971 7d4e291 be26971 dc37474 7d4e291 b4efffa be26971 d11af81 dc37474 be26971 6a839c1 be26971 6a839c1 dc37474 b4efffa be26971 6a839c1 be26971 7d4e291 d11af81 be26971 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<script lang="ts">
import Frame from '$lib/Frame.svelte';
import { drag } from 'd3-drag';
import { select } from 'd3-selection';
import { round } from '$lib/utils';
import type { ZoomTransform } from 'd3-zoom';
import { onMount } from 'svelte';
import { useMyPresence } from '$lib/liveblocks';
import { loadingState } from '$lib/store';
const myPresence = useMyPresence();
export let transform: ZoomTransform;
export let color = 'black';
export let interactive = false;
let position = {
x: 768,
y: 768
};
let frameElement: HTMLDivElement;
let isDragging = false;
$: prompt = $myPresence?.currentPrompt;
onMount(() => {
function dragstarted() {
isDragging = true;
}
function dragged(event: Event) {
const x = round(transform.invertX(event.x) - 512 / 2);
const y = round(transform.invertY(event.y) - 512 / 2);
position = {
x,
y
};
}
function dragended(event: Event) {
isDragging = false;
const x = round(transform.invertX(event.x) - 512 / 2);
const y = round(transform.invertY(event.y) - 512 / 2);
myPresence.update({
frame: {
x,
y
}
});
}
const dragHandler = drag().on('start', dragstarted).on('drag', dragged).on('end', dragended);
select(frameElement).call(dragHandler as any);
});
</script>
<div bind:this={frameElement}>
<Frame {color} {position} loadingState={$loadingState} {prompt} {transform} {isDragging} {interactive} />
</div>
|