MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-26 18:23:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

use vueuse

Browse Source
This commit is contained in:
pa
2026-03-15 21:17:02 +09:00
parent 8624ac20fa
commit 9e0116fce7
9 changed files with 48 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/Charts/components/MutualFriends.vue
View File

@@ -244,6 +244,7 @@
<script setup>
defineOptions({ name: 'ChartsMutual' });
import { useLocalStorage } from '@vueuse/core';
import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
@@ -516,24 +517,9 @@
const selectedFriendId = ref(null);
const EXCLUDED_FRIENDS_KEY = 'VRCX_MutualGraphExcludedFriends';
const excludedFriendIds = ref(loadExcludedFriends());
function loadExcludedFriends() {
try {
const stored = localStorage.getItem(EXCLUDED_FRIENDS_KEY);
if (stored) return JSON.parse(stored);
} catch {
/* ignore */
}
return [];
}
function saveExcludedFriends() {
localStorage.setItem(EXCLUDED_FRIENDS_KEY, JSON.stringify(excludedFriendIds.value));
}
const excludedFriendIds = useLocalStorage(EXCLUDED_FRIENDS_KEY, []);
watch(excludedFriendIds, async () => {
saveExcludedFriends();
if (lastMutualMap) {
try {
await applyGraph(lastMutualMap);

51
src/views/Favorites/composables/useFavoritesCardScaling.js
View File

@@ -2,10 +2,10 @@ import {
computed,
nextTick,
onBeforeMount,
onBeforeUnmount,
ref,
watch
} from 'vue';
import { useResizeObserver } from '@vueuse/core';
import configRepository from '../../../services/config.js';
@@ -58,9 +58,6 @@ export function useFavoritesCardScaling(options = {}) {
const containerRef = ref(null);
const containerWidth = ref(0);
let resizeObserver;
let cleanupWindowResize;
const updateContainerWidth = (el = containerRef.value) => {
const element = el ?? containerRef.value;
if (!element) {
@@ -73,17 +70,6 @@ export function useFavoritesCardScaling(options = {}) {
);
};
const disconnectResizeObserver = () => {
if (resizeObserver) {
resizeObserver.disconnect();
resizeObserver = undefined;
}
if (cleanupWindowResize) {
cleanupWindowResize();
cleanupWindowResize = undefined;
}
};
const cardScale = computed({
get: () => cardScaleBase.value,
set: (value) => {
@@ -212,46 +198,21 @@ export function useFavoritesCardScaling(options = {}) {
watch(
containerRef,
(element) => {
disconnectResizeObserver();
if (!element) {
containerWidth.value = 0;
return;
}
nextTick(() => updateContainerWidth(element));
if (typeof ResizeObserver !== 'undefined') {
const observedElement = element;
resizeObserver = new ResizeObserver((entries) => {
if (!entries?.length) {
return;
}
const [entry] = entries;
const width =
entry.contentRect?.width ??
observedElement?.clientWidth ??
0;
containerWidth.value = Math.max(width, 0);
});
resizeObserver.observe(element);
return;
}
if (typeof window !== 'undefined') {
const handleResize = () => updateContainerWidth(element);
window.addEventListener('resize', handleResize, {
passive: true
});
cleanupWindowResize = () => {
window.removeEventListener('resize', handleResize);
};
}
},
{ immediate: true }
);
onBeforeUnmount(() => {
disconnectResizeObserver();
useResizeObserver(containerRef, (entries) => {
const [entry] = entries;
const width =
entry?.contentRect?.width ?? containerRef.value?.clientWidth ?? 0;
containerWidth.value = Math.max(width, 0);
});
onBeforeMount(async () => {

48
src/views/FriendsLocations/FriendsLocations.vue
View File

@@ -138,7 +138,8 @@
</template>
<script setup>
import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
import { useResizeObserver } from '@vueuse/core';
import { computed, nextTick, onBeforeMount, onMounted, reactive, ref, watch } from 'vue';
import { ChevronDown, Loader2, Settings } from 'lucide-vue-next';
import { Field, FieldContent, FieldLabel } from '@/components/ui/field';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -262,8 +263,6 @@
const gridWidth = ref(0);
let measureScheduled = false;
let pendingGridWidthUpdate = false;
let resizeObserver;
let cleanupResize;
const updateGridWidth = () => {
const wrap = scrollbarRef.value;
@@ -275,45 +274,19 @@
};
const setupResizeHandling = () => {
if (cleanupResize) {
cleanupResize();
cleanupResize = undefined;
}
const wrap = scrollbarRef.value;
if (!wrap) {
return;
}
updateGridWidth();
if (typeof ResizeObserver !== 'undefined') {
resizeObserver = new ResizeObserver((entries) => {
if (!entries || entries.length === 0) {
return;
}
const [entry] = entries;
gridWidth.value = entry.contentRect?.width ?? wrap.clientWidth ?? 0;
});
resizeObserver.observe(wrap);
cleanupResize = () => {
resizeObserver?.disconnect();
resizeObserver = undefined;
};
return;
}
if (typeof window !== 'undefined') {
const handleResize = () => {
updateGridWidth();
};
window.addEventListener('resize', handleResize, { passive: true });
cleanupResize = () => {
window.removeEventListener('resize', handleResize);
};
}
};
useResizeObserver(scrollbarRef, (entries) => {
const [entry] = entries;
gridWidth.value = entry?.contentRect?.width ?? scrollbarRef.value?.clientWidth ?? 0;
});
const normalizedSearchTerm = computed(() => searchTerm.value.trim().toLowerCase());
const toEntries = (list = [], instanceId) =>
@@ -905,13 +878,6 @@
});
});
onBeforeUnmount(() => {
if (cleanupResize) {
cleanupResize();
cleanupResize = undefined;
}
});
/**
*
*/

47
src/views/MyAvatars/composables/useAvatarCardGrid.js
View File

@@ -2,10 +2,10 @@ import {
computed,
nextTick,
onBeforeMount,
onBeforeUnmount,
ref,
watch
} from 'vue';
import { useResizeObserver } from '@vueuse/core';
import configRepository from '../../../services/config.js';
@@ -47,9 +47,6 @@ export function useAvatarCardGrid(options = {}) {
const gridContainerRef = ref(null);
const containerWidth = ref(0);
let resizeObserver;
let cleanupResize;
const updateContainerWidth = (el) => {
const element = el ?? gridContainerRef.value;
if (!element) {
@@ -62,17 +59,6 @@ export function useAvatarCardGrid(options = {}) {
);
};
const disconnectResize = () => {
if (resizeObserver) {
resizeObserver.disconnect();
resizeObserver = undefined;
}
if (cleanupResize) {
cleanupResize();
cleanupResize = undefined;
}
};
const cardScale = computed({
get: () => cardScaleBase.value,
set: (value) => {
@@ -207,39 +193,22 @@ export function useAvatarCardGrid(options = {}) {
watch(
gridContainerRef,
(element) => {
disconnectResize();
if (!element) {
containerWidth.value = 0;
return;
}
nextTick(() => updateContainerWidth(element));
if (typeof ResizeObserver !== 'undefined') {
resizeObserver = new ResizeObserver((entries) => {
if (!entries?.length) return;
const [entry] = entries;
containerWidth.value = Math.max(
entry.contentRect?.width ?? element.clientWidth ?? 0,
0
);
});
resizeObserver.observe(element);
return;
}
if (typeof window !== 'undefined') {
const handleResize = () => updateContainerWidth(element);
window.addEventListener('resize', handleResize, {
passive: true
});
cleanupResize = () =>
window.removeEventListener('resize', handleResize);
}
},
{ immediate: true }
);
onBeforeUnmount(() => disconnectResize());
useResizeObserver(gridContainerRef, (entries) => {
const [entry] = entries;
containerWidth.value = Math.max(
entry?.contentRect?.width ?? gridContainerRef.value?.clientWidth ?? 0,
0
);
});
onBeforeMount(async () => {
try {

11
src/views/Tools/ScreenshotMetadata.vue
View File

@@ -148,7 +148,8 @@
<script setup>
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
import { useEventListener } from '@vueuse/core';
import { onMounted, reactive, ref } from 'vue';
import { useGalleryStore, useUserStore, useVrcxStore } from '@/stores';
import { ArrowLeft } from 'lucide-vue-next';
import { Badge } from '@/components/ui/badge';
@@ -198,11 +199,6 @@
if (!screenshotMetadataDialog.metadata.filePath) {
getAndDisplayLastScreenshot();
}
window.addEventListener('keyup', handleComponentKeyup);
});
onBeforeUnmount(() => {
window.removeEventListener('keyup', handleComponentKeyup);
});
const handleComponentKeyup = (event) => {
@@ -220,6 +216,9 @@
}
};
useEventListener(window, 'keyup', handleComponentKeyup);
/**
*
*/