fix: presist editor state

slidevjs · May 7, 2021 · 1086ed2 · 1086ed2
1 parent 7c82247
commit 1086ed2
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/packages/client/internals/Editor.vue b/packages/client/internals/Editor.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
 import { computed, watch, ref, onMounted, onUnmounted } from 'vue'
-import { activeElement, showEditor } from '../state'
+import { activeElement, showEditor, editorWidth } from '../state'
 import { useCodeMirror } from '../setup/codemirror'
 import { currentRoute, currentSlideId } from '../logic/nav'
 import { useDynamicSlideInfo } from '../logic/note'
@@ -85,10 +85,8 @@ onMounted(() => {
   )
 })
 
-const width = ref(window.innerWidth * 0.4)
-
 onMounted(() => {
-  offsetRight.value = width.value
+  offsetRight.value = editorWidth.value
 })
 onUnmounted(() => {
   offsetRight.value = 0
@@ -99,8 +97,8 @@ function onHandlerDown() {
   handlerDown.value = true
 }
 function updateWidth(v: number) {
-  width.value = Math.min(Math.max(200, v), window.innerWidth - 200)
-  offsetRight.value = width.value
+  editorWidth.value = Math.min(Math.max(200, v), window.innerWidth - 200)
+  offsetRight.value = editorWidth.value
 }
 useEventListener('pointermove', (e) => {
   if (handlerDown.value)
@@ -110,7 +108,7 @@ useEventListener('pointerup', () => {
   handlerDown.value = false
 })
 useEventListener('resize', () => {
-  updateWidth(width.value)
+  updateWidth(editorWidth.value)
 })
 
 const editorLink = computed(() => {
@@ -125,12 +123,12 @@ const editorLink = computed(() => {
   <div
     class="fixed h-full top-0 bottom-0 w-10px bg-gray-400 select-none opacity-0 hover:opacity-10 z-100"
     :class="{'!opacity-30': handlerDown}"
-    :style="{right: `${width - 5}px`, cursor: 'col-resize'}"
+    :style="{right: `${editorWidth - 5}px`, cursor: 'col-resize'}"
     @pointerdown="onHandlerDown"
   ></div>
   <div
     class="shadow bg-main p-4 grid grid-rows-[max-content,1fr] h-full overflow-hidden border-l border-gray-400 border-opacity-20"
-    :style="{width: `${width}px`}"
+    :style="{width: `${editorWidth}px`}"
   >
     <div class="flex pb-2 text-xl -mt-1">
       <div class="mr-4 rounded flex">

diff --git a/packages/client/internals/Play.vue b/packages/client/internals/Play.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { isPrintMode, showEditor, windowSize, isScreenVertical, slideScale } from '../state'
 import { next, prev, currentRoute, clicks, clicksElements, useSwipeControls } from '../logic/nav'
 import { registerShotcuts } from '../logic/shortcuts'
@@ -22,6 +22,8 @@ function onClick(e: MouseEvent) {
 }
 
 useSwipeControls(root)
+
+const presistNav = computed(() => isScreenVertical.value || showEditor.value)
 </script>
 
 <template>
@@ -39,11 +41,11 @@ useSwipeControls(root)
       <template #controls>
         <div
           class="absolute bottom-0 left-0 transition duration-300 opacity-0 hover:opacity-100"
-          :class="isScreenVertical ? 'opacity-100 right-0' : 'oapcity-0 p-2'"
+          :class="presistNav ? 'opacity-100 right-0' : 'oapcity-0 p-2'"
         >
           <NavControls
             class="m-auto"
-            :class="isScreenVertical
+            :class="presistNav
               ? 'text-white bg-transparent'
               : 'rounded-md bg-main shadow dark:(border border-gray-400 border-opacity-10)'"
           />

diff --git a/packages/client/state/index.ts b/packages/client/state/index.ts
@@ -2,7 +2,6 @@ import { useMagicKeys, useActiveElement, useStorage, useUrlSearchParams, useBrea
 import { computed, ref } from 'vue'
 
 export const showOverview = ref(false)
-export const showEditor = ref(false)
 export const showRecordingDialog = ref(false)
 export const showInfoDialog = ref(false)
 export const showGotoDialog = ref(false)
@@ -22,6 +21,9 @@ export const currentCamera = useStorage<string>('slidev-camera', 'default')
 export const currentMic = useStorage<string>('slidev-mic', 'default')
 export const slideScale = useStorage<number>('slidev-scale', null)
 
+export const showEditor = useStorage('slidev-show-editor', false)
+export const editorWidth = useStorage('slidev-editor-width', window.innerWidth * 0.4)
+
 export const isPrintMode = computed(() => query.print != null)
 
 export const toggleOverview = useToggle(showOverview)