Spaces:
Runtime error
Runtime error
File size: 1,992 Bytes
be26971 7d4e291 be26971 b4efffa d11af81 b4efffa be26971 b4efffa 7d4e291 be26971 7d4e291 be26971 dc37474 7d4e291 b4efffa be26971 d11af81 dc37474 be26971 6a839c1 2fe0733 be26971 2fe0733 be26971 6a839c1 dc37474 2fe0733 b4efffa be26971 2fe0733 6a839c1 be26971 7d4e291 2fe0733 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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<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)) - 256;
const y = round(transform.invertY(event.y)) - 256;
position = {
x,
y
};
myPresence.update({
cursor: {
x: x + 256,
y: y + 256
}
});
}
function dragended(event: Event) {
isDragging = false;
const x = round(transform.invertX(event.x)) - 256;
const y = round(transform.invertY(event.y)) - 256;
myPresence.update({
frame: {
x,
y
}
});
}
// Update cursor presence to current pointer location
function handlePointerMove(event: PointerEvent) {
event.preventDefault();
const x = round(transform.invertX(event.clientX));
const y = round(transform.invertY(event.clientY));
myPresence.update({
cursor: {
x,
y
}
});
}
// When the pointer leaves the page, set cursor presence to null
function handlePointerLeave() {
myPresence.update({
cursor: null
});
}
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>
|