Spaces:
Runtime error
Runtime error
File size: 1,480 Bytes
be26971 7d4e291 be26971 b4efffa be26971 b4efffa 7d4e291 be26971 7d4e291 be26971 dc37474 7d4e291 b4efffa be26971 6a839c1 dc37474 be26971 6a839c1 be26971 6a839c1 dc37474 b4efffa be26971 6a839c1 be26971 7d4e291 dc37474 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 63 64 |
<script lang="ts">
import LoadingIcon from '$lib/LoadingIcon.svelte';
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 { loadingState } from '$lib/store';
import { useMyPresence } from '$lib/liveblocks';
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(event: Event) {
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} {prompt} {transform} {isDragging} {interactive} />
</div>
|