feat(editor): switch pages

Novout · Oct 5, 2021 · 3c6d26e · 3c6d26e
1 parent c0c1e8c
commit 3c6d26e
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 12 deletions.
diff --git a/src/components/editor/aside/graph/AsideGraph.vue b/src/components/editor/aside/graph/AsideGraph.vue
@@ -7,8 +7,8 @@
       <div v-for="(page, index) in store.state.project.pages" :key="index">
         <div
           v-for="(entity, ind) in page.entity"
-          :id="`graph-${page.id}-${entity.id}`"
-          :key="`graph-${page.id}-${entity.id}`"
+          :id="`graph-${page.id}-${String(ind)}`"
+          :key="`graph-${page.id}-${String(ind)}`"
           @click="onClick(`#entity-${String(ind)}`, page)"
         >
           <AsideGraphItem :raw="entity.raw" :type="entity.type" />

diff --git a/src/components/editor/main/EditorBaseHeader.vue b/src/components/editor/main/EditorBaseHeader.vue
@@ -33,10 +33,36 @@
         />
       </svg>
     </HeroIcon>
-    <HeroIcon
-      class="wb-icon inline-flex"
-      @click.prevent="usePage(store).onCreatePage"
-    >
+    <div class="w-1 h-4 mx-2 bg-gray-500 dark:bg-gray-500"></div>
+    <HeroIcon class="wb-icon" @click="onUpPage">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 w-6"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    </HeroIcon>
+    <HeroIcon class="wb-icon" @click="onDownPage">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 w-6"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    </HeroIcon>
+    <HeroIcon class="wb-icon inline-flex" @click="usePage(store).onCreatePage">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="h-6 w-6"
@@ -50,10 +76,7 @@
         />
       </svg>
     </HeroIcon>
-    <HeroIcon
-      class="wb-icon inline-flex"
-      @click.prevent="usePage(store).onDeletePage"
-    >
+    <HeroIcon class="wb-icon inline-flex" @click="usePage(store).onDeletePage">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="h-6 w-6"
@@ -74,20 +97,43 @@
 <script setup lang="ts">
   import { usePage } from '@/use/page'
   import { useStore } from 'vuex'
+  import { useEvent } from '@/use/event'
 
   const store = useStore()
 
-  const onFinder = () => {
+  const onFinder = (e: MouseEvent) => {
+    useEvent().stopAll(e)
+
     store.commit(
       'absolute/switchShortcutFinder',
       !store.state.absolute.shortcuts.finder
     )
   }
 
-  const onSwitcher = () => {
+  const onSwitcher = (e: MouseEvent) => {
+    useEvent().stopAll(e)
+
     store.commit(
       'absolute/switchShortcutSwitcher',
       !store.state.absolute.shortcuts.switcher
     )
   }
+
+  const onUpPage = (e: MouseEvent) => {
+    useEvent().stopAll(e)
+
+    store.commit('project/switchPage', {
+      page: store.state.context,
+      direction: 'up',
+    })
+  }
+
+  const onDownPage = (e: MouseEvent) => {
+    useEvent().stopAll(e)
+
+    store.commit('project/switchPage', {
+      page: store.state.context,
+      direction: 'down',
+    })
+  }
 </script>
diff --git a/src/store/module/project.ts b/src/store/module/project.ts
@@ -108,6 +108,34 @@ export default {
 
       state.pages.splice(index, 1, page)
     },
+    switchPage(state: ProjectState, obj: Record<any, any>) {
+      const page = state.pages.filter(
+        (page: ContextState) => obj.page.id === page.id
+      )[0]
+
+      if (!page) return
+
+      const index = state.pages.indexOf(page)
+
+      if (index === -1) return
+
+      let sIndex
+      obj.direction === 'up' ? (sIndex = index - 1) : (sIndex = index + 1)
+
+      console.log(sIndex)
+
+      if (
+        (sIndex < 0 && obj.direction === 'up') ||
+        (sIndex >= state.pages.length && obj.direction === 'down')
+      )
+        return
+
+      const target = state.pages[sIndex]
+
+      const temp = state.pages[index]
+      state.pages[index] = target
+      state.pages[sIndex] = temp
+    },
   },
   actions: {},
   getters: {},

diff --git a/src/use/event.ts b/src/use/event.ts
@@ -0,0 +1,8 @@
+export const useEvent = () => {
+  const stopAll = async (e: MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  return { stopAll }
+}