Spaces:
Runtime error
Runtime error
File size: 3,051 Bytes
be26971 7d4e291 4346adf be26971 4346adf be26971 b4efffa d11af81 b4efffa 4346adf be26971 b4efffa 7d4e291 be26971 7d4e291 be26971 dc37474 7d4e291 8239db2 b4efffa f7d189a be26971 f7d189a dc37474 be26971 6a839c1 f7d189a be26971 2fe0733 4df0c49 2fe0733 be26971 6a839c1 dc37474 f7d189a b4efffa be26971 2fe0733 4df0c49 2fe0733 6a839c1 93b70aa be26971 7d4e291 2fe0733 8239db2 2fe0733 4346adf be26971 4346adf |
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 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
<script lang="ts">
import Frame from '$lib/Frame.svelte';
import PPButton from '$lib/Buttons/PPButton.svelte';
import DragButton from '$lib/Buttons/DragButton.svelte';
import MaskButton from '$lib/Buttons/MaskButton.svelte';
import { drag } from 'd3-drag';
import { select } from 'd3-selection';
import { round } from '$lib/utils';
import type { ZoomTransform } from 'd3-zoom';
import { onMount, createEventDispatcher } from 'svelte';
import { useMyPresence } from '$lib/liveblocks';
import { loadingState } from '$lib/store';
const myPresence = useMyPresence();
const dispatch = createEventDispatcher();
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;
$: isLoading = $myPresence?.isLoading || false;
let offsetX = 0;
let offsetY = 0;
onMount(() => {
function dragstarted(event: Event) {
const rect = (event.sourceEvent.target as HTMLElement).getBoundingClientRect();
if (event.sourceEvent instanceof TouchEvent) {
offsetX = event.sourceEvent.targetTouches[0].pageX - rect.left;
offsetY = event.sourceEvent.targetTouches[0].pageY - rect.top;
} else {
offsetX = event.sourceEvent.pageX - rect.left;
offsetY = event.sourceEvent.pageY - rect.top;
}
isDragging = true;
}
function dragged(event: Event) {
const x = round(transform.invertX(event.x - offsetX));
const y = round(transform.invertY(event.y - offsetY));
position = {
x,
y
};
myPresence.update({
cursor: {
x: transform.invertX(event.x),
y: transform.invertY(event.y)
}
});
}
function dragended(event: Event) {
isDragging = false;
const x = round(transform.invertX(event.x - offsetX));
const y = round(transform.invertY(event.y - offsetY));
myPresence.update({
frame: {
x,
y
}
});
}
function handlePointerMove(event: PointerEvent) {
myPresence.update({
cursor: {
x: transform.invertX(event.clientX),
y: transform.invertY(event.clientY)
}
});
}
function handlePointerLeave() {
myPresence.update({
cursor: null
});
}
const dragHandler = drag().on('start', dragstarted).on('drag', dragged).on('end', dragended);
select(frameElement)
.call(dragHandler as any)
.on('pointermove', handlePointerMove)
.on('pointerleave', handlePointerLeave);
});
</script>
<div bind:this={frameElement}>
<Frame
{color}
{position}
loadingState={$loadingState}
{prompt}
{transform}
{isLoading}
{isDragging}
{interactive}
>
<div slot="bottom">
{#if !isDragging}
<div class="py-2">
<PPButton on:click={() => dispatch('paintMode', { mode: 'paint' })} />
</div>
{/if}
</div>
<div slot="right">
{#if !isDragging}
<div class="px-2 flex flex-col gap-2">
<DragButton />
<MaskButton />
</div>
{/if}
</div>
</Frame>
</div>
<style lang="postcss" scoped>
</style>
|