Skip to content

Commit 443900f

Browse files
ildyriaildyria
committed
add checks in debug mode
1 parent a921383 commit 443900f

4 files changed

Lines changed: 113 additions & 27 deletions

File tree

‎resources/js/components/gallery/albumModule/AlbumThumbPanel.vue‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -56,15 +56,15 @@
5656
<script setup lang="ts">
5757
import Panel from "primevue/panel";
5858
import { AlbumThumbConfig } from "@/components/gallery/albumModule/thumbs/AlbumThumb.vue";
59-
import { computed } from "vue";
59+
import { computed, onMounted, watch } from "vue";
6060
import { SplitData, useSplitter } from "@/composables/album/splitter";
6161
import Timeline from "primevue/timeline";
6262
import { useLycheeStateStore } from "@/stores/LycheeState";
6363
import { storeToRefs } from "pinia";
6464
import AlbumThumbPanelList from "./AlbumThumbPanelList.vue";
6565
6666
const lycheeStore = useLycheeStateStore();
67-
const { are_nsfw_visible, is_timeline_left_border_visible } = storeToRefs(lycheeStore);
67+
const { are_nsfw_visible, is_timeline_left_border_visible, is_debug_enabled } = storeToRefs(lycheeStore);
6868
6969
const props = defineProps<{
7070
header: string;
@@ -83,7 +83,7 @@ const emits = defineEmits<{
8383
contexted: [idx: number, event: MouseEvent];
8484
}>();
8585
86-
const { spliter } = useSplitter();
86+
const { spliter, verifyOrder } = useSplitter();
8787
8888
const propagateClicked = (idx: number, e: MouseEvent) => {
8989
emits("clicked", idx, e);
@@ -94,16 +94,40 @@ const propagateMenuOpen = (idx: number, e: MouseEvent) => {
9494
};
9595
9696
const albumsTimeLine = computed<SplitData<App.Http.Resources.Models.ThumbAlbumResource>[]>(() =>
97-
spliter(
98-
props.albums as App.Http.Resources.Models.ThumbAlbumResource[],
99-
(a: App.Http.Resources.Models.ThumbAlbumResource) => a.timeline?.time_date ?? "",
100-
(a: App.Http.Resources.Models.ThumbAlbumResource) => a.timeline?.format ?? "Others",
101-
),
97+
split(props.albums as App.Http.Resources.Models.ThumbAlbumResource[]),
10298
);
10399
104100
const isTimeline = computed(() => props.isTimeline && albumsTimeLine.value.length > 1);
105101
106102
const headerClass = computed(() => {
107103
return props.isAlone ? "hidden" : "";
108104
});
105+
106+
function split(albums: App.Http.Resources.Models.ThumbAlbumResource[]) {
107+
return spliter(
108+
albums,
109+
(a: App.Http.Resources.Models.ThumbAlbumResource) => a.timeline?.time_date ?? "",
110+
(a: App.Http.Resources.Models.ThumbAlbumResource) => a.timeline?.format ?? "Others",
111+
);
112+
}
113+
114+
onMounted(() => {
115+
validate(props.albums as App.Http.Resources.Models.ThumbAlbumResource[]);
116+
});
117+
118+
function validate(albums: App.Http.Resources.Models.ThumbAlbumResource[]) {
119+
if (props.isTimeline) {
120+
const splitted = split(albums);
121+
verifyOrder(is_debug_enabled.value, albums, splitted);
122+
}
123+
}
124+
125+
watch(
126+
() => props.album?.id,
127+
() => {
128+
if (props.isTimeline) {
129+
validate(props.albums as App.Http.Resources.Models.ThumbAlbumResource[]);
130+
}
131+
},
132+
);
109133
</script>

‎resources/js/components/gallery/albumModule/PhotoThumbPanel.vue‎

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
:galleryConfig="props.galleryConfig"
1212
:selectedPhotos="props.selectedPhotos"
1313
:iter="0"
14-
:idx="0"
14+
:group-idx="0"
1515
@clicked="propagateClicked"
1616
@selected="propagateSelected"
1717
@contexted="propagateMenuOpen"
@@ -33,7 +33,7 @@
3333
:galleryConfig="props.galleryConfig"
3434
:selectedPhotos="props.selectedPhotos"
3535
:iter="slotProps.item.iter"
36-
:idx="slotProps.index"
36+
:group-idx="slotProps.index"
3737
:isTimeline="isTimeline"
3838
@contexted="propagateMenuOpen"
3939
@selected="propagateSelected"
@@ -57,7 +57,7 @@
5757
:galleryConfig="props.galleryConfig"
5858
:selectedPhotos="props.selectedPhotos"
5959
:iter="photoTimeline.iter"
60-
:idx="idx"
60+
:group-idx="idx"
6161
:isTimeline="isTimeline"
6262
@contexted="propagateMenuOpen"
6363
@selected="propagateSelected"
@@ -79,9 +79,11 @@ import Timeline from "primevue/timeline";
7979
import PhotoThumbPanelList from "./PhotoThumbPanelList.vue";
8080
import PhotoThumbPanelControl from "./PhotoThumbPanelControl.vue";
8181
import { isTouchDevice } from "@/utils/keybindings-utils";
82+
import { onMounted } from "vue";
83+
import { watch } from "vue";
8284
8385
const lycheeStore = useLycheeStateStore();
84-
const { is_timeline_left_border_visible } = storeToRefs(lycheeStore);
86+
const { is_timeline_left_border_visible, is_debug_enabled } = storeToRefs(lycheeStore);
8587
8688
const props = defineProps<{
8789
header: string;
@@ -122,15 +124,39 @@ const propagateMenuOpen = (idx: number, e: MouseEvent) => {
122124
emits("contexted", idx, e);
123125
};
124126
125-
const { spliter } = useSplitter();
127+
const { spliter, verifyOrder } = useSplitter();
126128
127129
const photosTimeLine = computed<SplitData<App.Http.Resources.Models.PhotoResource>[]>(() =>
128-
spliter(
129-
props.photos as App.Http.Resources.Models.PhotoResource[],
130-
(p: App.Http.Resources.Models.PhotoResource) => p.timeline?.time_date ?? "",
131-
(p: App.Http.Resources.Models.PhotoResource) => p.timeline?.format ?? "Others",
132-
),
130+
split(props.photos as App.Http.Resources.Models.PhotoResource[]),
133131
);
134132
135133
const isTimeline = computed(() => props.isTimeline && photosTimeLine.value.length > 1);
134+
135+
function split(albums: App.Http.Resources.Models.PhotoResource[]) {
136+
return spliter(
137+
albums,
138+
(a: App.Http.Resources.Models.PhotoResource) => a.timeline?.time_date ?? "",
139+
(a: App.Http.Resources.Models.PhotoResource) => a.timeline?.format ?? "Others",
140+
);
141+
}
142+
143+
onMounted(() => {
144+
validate(props.photos as App.Http.Resources.Models.PhotoResource[]);
145+
});
146+
147+
function validate(albums: App.Http.Resources.Models.PhotoResource[]) {
148+
if (props.isTimeline) {
149+
const splitted = split(albums);
150+
verifyOrder(is_debug_enabled.value, albums, splitted);
151+
}
152+
}
153+
154+
watch(
155+
() => props.album?.id,
156+
() => {
157+
if (props.isTimeline) {
158+
validate(props.photos as App.Http.Resources.Models.PhotoResource[]);
159+
}
160+
},
161+
);
136162
</script>

‎resources/js/components/gallery/albumModule/PhotoThumbPanelList.vue‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
2-
<div class="relative flex flex-wrap flex-row shrink w-full justify-start align-top" :id="'photoListing' + props.idx">
2+
<div class="relative flex flex-wrap flex-row shrink w-full justify-start align-top" :id="'photoListing' + props.groupIdx">
33
<template v-for="(photo, idx) in props.photos" :key="photo.id">
44
<PhotoThumb
5-
@click="maySelect(idx + iter, $event)"
6-
@contextmenu.prevent="menuOpen(idx + iter, $event)"
5+
@click="maySelect(idx + props.iter, $event)"
6+
@contextmenu.prevent="menuOpen(idx + props.iter, $event)"
77
:is-selected="props.selectedPhotos.includes(photo.id)"
88
:photo="photo"
99
:album="props.album"
10-
:is-lazy="idx + iter > 10"
10+
:is-lazy="idx + props.iter > 10"
1111
/>
1212
</template>
1313
</div>
@@ -30,7 +30,7 @@ const props = defineProps<{
3030
galleryConfig: App.Http.Resources.GalleryConfigs.PhotoLayoutConfig;
3131
selectedPhotos: string[];
3232
iter: number;
33-
idx: number;
33+
groupIdx: number;
3434
}>();
3535
3636
const lycheeStore = useLycheeStateStore();
@@ -48,17 +48,21 @@ const emits = defineEmits<{
4848
selected: [idx: number, event: MouseEvent];
4949
contexted: [idx: number, event: MouseEvent];
5050
}>();
51-
const maySelect = (idx: number, e: MouseEvent) => {
51+
function maySelect(idx: number, e: MouseEvent) {
52+
console.log("maySelect", idx);
5253
if (ctrlKeyState.value || metaKeyState.value || shiftKeyState.value) {
5354
emits("selected", idx, e);
5455
return;
5556
}
5657
emits("clicked", idx, e);
57-
};
58-
const menuOpen = (idx: number, e: MouseEvent) => emits("contexted", idx, e);
58+
}
59+
function menuOpen(idx: number, e: MouseEvent) {
60+
console.log("menuOpen", idx);
61+
emits("contexted", idx, e);
62+
}
5963
6064
// Layouts stuff
61-
const { activateLayout } = useLayouts(props.galleryConfig, layout, timelineData, "photoListing" + props.idx);
65+
const { activateLayout } = useLayouts(props.galleryConfig, layout, timelineData, "photoListing" + props.groupIdx);
6266
onMounted(() => activateLayout());
6367
onUpdated(() => activateLayout());
6468
</script>

‎resources/js/composables/album/splitter.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,39 @@ export function useSplitter() {
2525
return ret;
2626
}
2727

28+
function verifyOrder(is_debug: boolean, data: { id: string }[], splitData: SplitData<{ id: string }>[]) {
29+
if (!is_debug) {
30+
return;
31+
}
32+
33+
const dataMap = new Map<string, number>();
34+
data.forEach((d, i) => {
35+
dataMap.set(d.id, i);
36+
});
37+
38+
let check = false;
39+
splitData.forEach((chunk) => {
40+
chunk.data.forEach((d, idx) => {
41+
const expected = dataMap.get(d.id);
42+
if (expected === undefined) {
43+
console.error(`Data not found in original data for id ${d.id} (WTF??)`);
44+
check = true;
45+
}
46+
const candidate = chunk.iter + idx;
47+
if (expected !== candidate) {
48+
console.error(`Data mismatch for id ${d.id} (expected ${expected}, got ${candidate})`);
49+
check = true;
50+
}
51+
});
52+
});
53+
54+
if (check) {
55+
alert("Data mismatch found in splitter, please check the console logs and contact the developer.");
56+
}
57+
}
58+
2859
return {
2960
spliter,
61+
verifyOrder,
3062
};
3163
}

0 commit comments

Comments
 (0)