Fix canvas control buttons being unusable on mobile

components/canvas/Canvas.vue

@@ -150,24 +150,26 @@ dark:border-dark-purple
 
 */
 
-const dragHandler = useDrag(({ event: Event, delta: [x, y] }: { event: Event, delta: number[] }) => { 
+const pinchHandler = usePinch(({ event, offset: [z] }: { event: Event, offset: number[] }) => { 
-    event?.preventDefault();
+    event.stopPropagation();
+    event.preventDefault();
+    zoom.value = clamp(z / 2048, minZoom.value, 3);
+}, {
+    domTarget: canvas,
+    eventOptions: { passive: false, }
+})
+const dragHandler = useDrag(({ event, delta: [x, y] }: { event: Event, delta: number[] }) => { 
+    event.stopPropagation();
+    event.preventDefault();
     dispX.value += x / zoom.value;
     dispY.value += y / zoom.value;
 }, {
     domTarget: canvas,
     eventOptions: { passive: false, }
 })
-const pinchHandler = usePinch(({ event: Event, offset: [z] }: { event: Event, offset: number[] }) => { 
+const wheelHandler = useWheel(({ event, delta: [x, y] }: { event: Event, delta: number[] }) => { 
-    event?.preventDefault();
+    event.stopPropagation();
-    console.log(z);
+    event.preventDefault();
-    zoom.value = clamp(z / 2048, minZoom.value, 3);
-}, {
-    domTarget: canvas,
-    eventOptions: { passive: false, }
-})
-const wheelHandler = useWheel(({ event: Event, delta: [x, y] }: { event: Event, delta: number[] }) => { 
-    event?.preventDefault();
     zoom.value = clamp(zoom.value + y * -0.001, minZoom.value, 3);
 }, {
     domTarget: canvas,
@@ -180,7 +182,7 @@ const wheelHandler = useWheel(({ event: Event, delta: [x, y] }: { event: Event,
         <template #default>
             <div id="canvas" ref="canvas" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none"
                 :style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
-                <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute sm:top-2 top-10 left-2 z-30 overflow-hidden">
+                <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute sm:top-2 top-10 left-2 z-[35] overflow-hidden">
                     <Tooltip message="Zoom avant" side="right">
                         <div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
                             <Icon icon="radix-icons:plus" />

layouts/default.vue

@@ -57,7 +57,7 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue/dist/iconify.js';
 
-const open = ref(true);
+const open = ref(false);
 const { loggedIn } = useUserSession();
 
 const { data: pages } = await useLazyFetch('/api/navigation', {

pages/explore/edit/[...path].vue

@@ -4,8 +4,8 @@
             <Title>Modification de {{ page.title }}</Title>
         </Head>
         <div class="flex flex-col xl:flex-row xl:justify-between justify-center items-center w-full px-4 pb-4 border-b border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0">
-            <input type="text" v-model="page.title" placeholder="Titre" class="flex-1 mx-4 h-16 caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 appearance-none outline-none px-3 py-1 text-5xl font-thin bg-transparent" />
+            <input type="text" v-model="page.title" placeholder="Titre" class="flex-1 mx-4 h-16 w-full caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 appearance-none outline-none px-3 py-1 text-5xl font-thin bg-transparent" />
-            <div class="flex gap-4 self-end xl:self-auto">
+            <div class="flex gap-4 self-end xl:self-auto flex-wrap">
                 <Tooltip message="Consultable uniquement par le propriétaire" side="bottom"><Switch label="Privé" v-model="page.private" /></Tooltip>
                 <Tooltip message="Afficher dans le menu de navigation" side="bottom"><Switch label="Navigable" v-model="page.navigable" /></Tooltip>
                 <Button @click="() => save()" :loading="saveStatus === 'pending'" class="border-light-blue dark:border-dark-blue hover:border-light-blue dark:hover:border-dark-blue focus:shadow-light-blue dark:focus:shadow-dark-blue">Enregistrer</Button>
@@ -13,13 +13,13 @@
         </div>
         <div class="my-4 flex-1 w-full max-h-full flex">
             <template v-if="page.type === 'markdown'">
-                <SplitterGroup direction="horizontal" class="flex-1 w-full flex">
+                <SplitterGroup direction="horizontal" class="flex-1 w-full flex" >
-                    <SplitterPanel asChild>
+                    <SplitterPanel asChild collapsible :collapsedSize="0" :minSize="20" v-slot="{ isCollapsed }" :defaultSize="50">
-                        <textarea v-model="page.content" class="flex-1 bg-transparent appearance-none outline-none max-h-full resize-none !overflow-y-auto"></textarea>
+                        <textarea v-model="page.content" class="flex-1 bg-transparent appearance-none outline-none max-h-full resize-none !overflow-y-auto" :class="{ 'hidden': isCollapsed }"></textarea>
                     </SplitterPanel>
                     <SplitterResizeHandle class="bg-light-35 dark:bg-dark-35 w-px xl!mx-4 mx-2" />
-                    <SplitterPanel asChild>
+                    <SplitterPanel asChild collapsible :collapsedSize="0" :minSize="20" v-slot="{ isCollapsed }">
-                        <div class="flex-1 max-h-full !overflow-y-auto px-8"><Markdown :content="debounced" :proses="{ 'a': FakeA }" /></div>
+                        <div class="flex-1 max-h-full !overflow-y-auto px-8" :class="{ 'hidden': isCollapsed }"><Markdown :content="debounced" :proses="{ 'a': FakeA }" /></div>
                     </SplitterPanel>
                 </SplitterGroup>
             </template>