PLG_Development/PLG-MuDiCS
3
0
Fork 0
mirror of https://codeberg.org/PLG-Development/PLG-MuDiCS synced 2026-07-06 17:07:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(control): Drag and Drop in DisplayView was completely buggy, now its just a little bit buggy

Browse Source
This commit is contained in:
E44
2026-01-14 18:48:10 +01:00
parent 5ca2487598
commit 5b93250e22
8 changed files with 1368 additions and 1501 deletions
Download Patch File Download Diff File Expand all files Collapse all files
control/frontend/src/lib/components/DisplayObject.svelte
+24 -22
View File
@@ -8,38 +8,40 @@
import DNDGrip from '$lib/components/DNDGrip.svelte';
import { Menu, Pin, PinOff, VideoOff } from 'lucide-svelte';
import OnlineState from './OnlineState.svelte';
import type { Display, MenuOption } from '$lib/ts/types';
import type { Display, DisplayIdObject, MenuOption } from '$lib/ts/types';
import { is_selected, select, selected_display_ids } from '$lib/ts/stores/select';
import { screenshot_loop } from '$lib/ts/stores/displays';
import { get_display_by_id, screenshot_loop } from '$lib/ts/stores/displays';
import { change_file_path, current_file_path } from '$lib/ts/stores/files';
import { liveQuery } from 'dexie';
let {
display,
display_id_object,
get_display_menu_options,
close_pinned_display
}: {
display: Display;
display_id_object: DisplayIdObject;
get_display_menu_options: (display_id: string) => MenuOption[];
close_pinned_display: () => void;
} = $props();
let hovering_unselectable = $state(false);
let display = liveQuery(() => get_display_by_id(display_id_object.id));
async function onclick(e: Event) {
e.stopPropagation();
select(selected_display_ids, display.id, 'toggle');
select(selected_display_ids, display_id_object.id, 'toggle');
// force file view update
await change_file_path($current_file_path);
}
async function on_preview_click(e: MouseEvent) {
if ($pinned_display_id === display.id) {
if ($pinned_display_id === display_id_object.id) {
close_pinned_display();
} else {
$pinned_display_id = display.id;
$pinned_display_id = display_id_object.id;
}
await screenshot_loop(display.id);
await screenshot_loop(display_id_object.id);
e.stopPropagation();
}
</script>
@@ -52,7 +54,7 @@
if (e.key === 'Enter' || e.key === ' ') onclick(e);
}}
{onclick}
class="p-1 {get_selectable_color_classes(is_selected(display.id, $selected_display_ids), {
class="p-1 {get_selectable_color_classes(is_selected(display_id_object.id, $selected_display_ids), {
bg: true,
hover: true,
active: !hovering_unselectable,
@@ -68,12 +70,12 @@
onclick={on_preview_click}
>
<div class="flex h-full w-full items-center justify-center">
{#if $pinned_display_id === display.id}
{#if $pinned_display_id === display_id_object.id}
<div class="size-[50%]">
<Pin class="size-full" />
</div>
{:else if display.preview.url}
<img src={display.preview.url} alt="preview" class="w-full object-cover bg-black" />
{:else if $display && $display.preview.url}
<img src={$display.preview.url} alt="preview" class="w-full object-cover bg-black" />
{:else}
<!-- No Signal -->
<div class="size-full bg-black flex justify-center items-center">
@@ -84,11 +86,11 @@
<!-- Hover Effect -->
<span
class="pointer-events-none absolute inset-0 {$pinned_display_id === display.id
class="pointer-events-none absolute inset-0 {$pinned_display_id === display_id_object.id
? 'bg-stone-700'
: 'bg-stone-700/70'} opacity-0 transition-opacity duration-200 flex items-center justify-center group-hover:opacity-100"
>
{#if $pinned_display_id === display.id}
{#if $pinned_display_id === display_id_object.id}
<PinOff class="size-[50%]" aria-hidden="true" />
{:else}
<Pin class="size-[50%]" aria-hidden="true" />
@@ -100,20 +102,20 @@
class="h-full flex flex-col justify-center gap-1 select-none
min-w-0 basis-0 flex-1"
>
<div class="text-xl font-bold truncate w-full" title={display.name}>
{display.name}
<div class="text-xl font-bold truncate w-full" title={$display?.name ?? ''}>
{$display?.name ?? ''}
</div>
<OnlineState
selected={is_selected(display.id, $selected_display_ids)}
status={display.status}
selected={is_selected(display_id_object.id, $selected_display_ids)}
status={$display?.status ?? null}
/>
</div>
</div>
<!-- Right Controls -->
<div class="flex flex-row h-full items-center gap-2 pr-3">
<DNDGrip
bg={get_selectable_color_classes(is_selected(display.id, $selected_display_ids), {
bg={get_selectable_color_classes(is_selected(display_id_object.id, $selected_display_ids), {
bg: true
})}
/>
@@ -125,16 +127,16 @@
>
<Button
bg="bg-transparent"
hover_bg={get_selectable_color_classes(is_selected(display.id, $selected_display_ids), {
hover_bg={get_selectable_color_classes(is_selected(display_id_object.id, $selected_display_ids), {
bg: true
})}
active_bg={get_selectable_color_classes(is_selected(display.id, $selected_display_ids), {
active_bg={get_selectable_color_classes(is_selected(display_id_object.id, $selected_display_ids), {
bg: true
})}
click_function={(e) => {
e.stopPropagation();
}}
menu_options={get_display_menu_options(display.id)}
menu_options={get_display_menu_options(display_id_object.id)}
>
<Menu />
</Button>