feat: update layout

slidevjs · Apr 22, 2021 · 5279077 · 5279077
1 parent 065c7e3
commit 5279077
Show file tree

Hide file tree

Showing 12 changed files with 99 additions and 63 deletions.
diff --git a/packages/aslide/client/App.vue b/packages/aslide/client/App.vue
@@ -2,7 +2,7 @@
 import { useHead } from '@vueuse/head'
 import { computed, provide } from 'vue'
 import { useNavigateControls } from './logic'
-import { scale, targetHeight, targetWidth } from './logic/scale'
+import { scale, targetHeight, targetWidth, offsetRight } from './logic/scale'
 import { injectClickDisabled } from './modules/directives'
 import Controls from './internals/Controls.vue'
 
@@ -15,7 +15,7 @@ const controls = useNavigateControls()
 const style = computed(() => ({
   height: `${targetHeight}px`,
   width: `${targetWidth}px`,
-  transform: `translate(-50%, -50%) scale(${scale.value})`,
+  transform: `translate(-50%, -50%) translateX(${-offsetRight.value / 2}px) scale(${scale.value})`,
 }))
 
 const query = new URLSearchParams(location.search)
@@ -30,8 +30,9 @@ function onClick(e: MouseEvent) {
 </script>
 
 <template>
-  <div>
-    <div class="page-root" @click="onClick">
+  <div class="page-root">
+    <div class="slide-root"
+     @click="onClick">
       <div class="slide-container" id="slide-container" :style="style">
         <RouterView :class="controls.currentRoute.value?.meta?.class || ''" />
       </div>
@@ -41,8 +42,8 @@ function onClick(e: MouseEvent) {
 </template>
 
 <style lang="postcss">
-.page-root {
-  @apply w-screen h-screen relative overflow-hidden bg-black select-none;
+.slide-root {
+  @apply w-full h-full relative overflow-hidden bg-black select-none;
 }
 
 .slide-container {

diff --git a/packages/aslide/client/index.html b/packages/aslide/client/index.html
@@ -6,14 +6,6 @@
 </head>
 <body>
   <div id="app"></div>
-  <script>
-    (function() {
-      const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-      const setting = localStorage.getItem('color-schema') || 'auto'
-      if (setting === 'dark' || (prefersDark && setting !== 'light'))
-        document.documentElement.classList.toggle('dark', true)
-    })()
-  </script>
   <script type="module" src="__ENTRY__"></script>
   <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 </body>

diff --git a/packages/aslide/client/internals/Editor.vue b/packages/aslide/client/internals/Editor.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { useEventListener, useFetch } from '@vueuse/core'
-import { computed, watch, ref, onMounted } from 'vue'
+import { useEventListener, useFetch, useIntervalFn, useRafFn, useTransition } from '@vueuse/core'
+import { computed, watch, ref, onMounted, onUnmounted } from 'vue'
 import { useNavigateControls } from '../logic'
+import { offsetRight } from '../logic/scale'
 import { activeElement, showEditor } from '../logic/state'
 import { useCodeMirror } from '../setup/codemirror'
 
@@ -77,10 +78,42 @@ onMounted(() => {
     },
   )
 })
+
+const width = ref(window.innerWidth * 0.4)
+
+onMounted(() => {
+  offsetRight.value = width.value
+})
+onUnmounted(() => {
+  offsetRight.value = 0
+})
+
+const handlerDown = ref(false)
+function onHandlerDown() {
+  handlerDown.value = true
+}
+useEventListener('pointermove', (e) => {
+  if (handlerDown.value) {
+    width.value = window.innerWidth - e.pageX
+    offsetRight.value = width.value
+  }
+}, { passive: true })
+useEventListener('pointerup', () => {
+  handlerDown.value = false
+})
 </script>
 
 <template>
-  <div class="fixed top-0 right-0 bottom-0 shadow bg-main w-1/2 p-4 grid grid-rows-[max-content,auto] h-full overflow-hidden">
+  <div
+    class="fixed h-full top-0 bottom-0 w-10px bg-gray-400 select-none opacity-0 hover:opacity-10 z-10"
+    :class="{'!opacity-30': handlerDown}"
+    :style="{right: `${width - 5}px`, cursor: 'col-resize'}"
+    @pointerdown="onHandlerDown"
+  ></div>
+  <div
+    class="fixed top-0 right-0 bottom-0 shadow bg-main p-4 grid grid-rows-[max-content,auto] h-full overflow-hidden"
+    :style="{width: `${width}px`}"
+  >
     <div class="flex pb-2 text-xl -mt-1">
       <span class="text-2xl pt-1">
         Slide Editor

diff --git a/packages/aslide/client/internals/WebCamera.vue b/packages/aslide/client/internals/WebCamera.vue
@@ -49,7 +49,7 @@ function fixPosistion() {
     y.value = window.innerHeight - size.value - 30
 }
 
-useEventListener(frame, 'mousedown', (e: MouseEvent) => {
+useEventListener(frame, 'pointerdown', (e: MouseEvent) => {
   if (frame.value) {
     frameDown.value = true
     const box = frame.value.getBoundingClientRect()
@@ -58,7 +58,7 @@ useEventListener(frame, 'mousedown', (e: MouseEvent) => {
   }
 })
 
-useEventListener(handler, 'mousedown', (e: MouseEvent) => {
+useEventListener(handler, 'pointerdown', (e: MouseEvent) => {
   if (frame.value) {
     handlerDown.value = true
     const box = frame.value.getBoundingClientRect()
@@ -67,12 +67,12 @@ useEventListener(handler, 'mousedown', (e: MouseEvent) => {
   }
 })
 
-useEventListener(window, 'mouseup', (e: MouseEvent) => {
+useEventListener(window, 'pointerup', (e: MouseEvent) => {
   frameDown.value = false
   handlerDown.value = false
 })
 
-useEventListener(window, 'mousemove', (e: MouseEvent) => {
+useEventListener(window, 'pointermove', (e: MouseEvent) => {
   if (frameDown.value) {
     x.value = e.screenX - deletaX
     y.value = e.screenY - deletaY

diff --git a/packages/aslide/client/logic/controls.ts b/packages/aslide/client/logic/controls.ts
@@ -2,7 +2,7 @@ import { computed, App, InjectionKey, inject, ref, ComputedRef, Ref } from 'vue'
 import { and, Fn, not, whenever } from '@vueuse/core'
 import { Router, RouteRecordRaw } from 'vue-router'
 import { clickCurrent, clickElements } from '../modules/directives'
-import { activeElement, magicKeys } from './state'
+import { isInputing, magicKeys } from './state'
 
 export interface NavigateControls {
   next: Fn
@@ -61,7 +61,6 @@ export function createNavigateControls(router: Router) {
     router.push(`/${next}${location.search}`)
   }
 
-  const isInputing = computed(() => ['INPUT', 'TEXTAREA'].includes(activeElement.value?.tagName || ''))
   const shortcutEnabled = and(not(paused), not(isInputing))
 
   whenever(and(magicKeys.space, shortcutEnabled), next)

diff --git a/packages/aslide/client/logic/scale.ts b/packages/aslide/client/logic/scale.ts
@@ -1,18 +1,24 @@
 import { useWindowSize } from '@vueuse/core'
-import { reactive, computed } from 'vue'
+import { computed, ref } from 'vue'
 
 export const aspect = 16 / 9
 export const targetWidth = 980
 export const targetHeight = targetWidth / aspect
 
-const screen = reactive(useWindowSize())
-const screenAspect = computed(() => screen.width / screen.height)
+export const offsetRight = ref(0)
+export const offsetBottom = ref(0)
+
+const { width: winWidth, height: winHeight } = useWindowSize()
+
+const width = computed(() => winWidth.value - offsetRight.value)
+const height = computed(() => winHeight.value - offsetBottom.value)
+const screenAspect = computed(() => width.value / height.value)
 
 export const scale = computed(() => {
   if (screenAspect.value < aspect)
-    return screen.width / targetWidth
-  return screen.height * aspect / targetWidth
+    return width.value / targetWidth
+  return height.value * aspect / targetWidth
 })
 
-export const marginTop = computed(() => (screen.height - targetHeight * scale.value) / 2)
-export const marginLeft = computed(() => (screen.width - targetWidth * scale.value) / 2)
+export const marginTop = computed(() => (height.value - targetHeight * scale.value) / 2)
+export const marginLeft = computed(() => (width.value - targetWidth * scale.value) / 2)
diff --git a/packages/aslide/client/logic/state.ts b/packages/aslide/client/logic/state.ts
@@ -1,8 +1,9 @@
-import { useMagicKeys } from '@vueuse/core'
-import { ref } from 'vue'
-import { useActiveElement } from './use'
+import { useMagicKeys, useActiveElement } from '@vueuse/core'
+import { computed, ref } from 'vue'
 
 export const activeElement = useActiveElement()
+export const isInputing = computed(() => ['INPUT', 'TEXTAREA'].includes(activeElement.value?.tagName || ''))
+
 export const magicKeys = useMagicKeys()
 export const showOverview = ref(false)
 export const showEditor = ref(false)
diff --git a/packages/aslide/client/logic/use.ts b/packages/aslide/client/logic/use.ts
diff --git a/packages/aslide/client/style/index.css b/packages/aslide/client/style/index.css
@@ -1,3 +1,14 @@
+html,
+body,
+#app,
+.page-root {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
 .icon-btn {
   @apply inline-block cursor-pointer select-none !outline-none;
   @apply opacity-75 transition duration-200 ease-in-out align-middle rounded p-2;

diff --git a/packages/aslide/package.json b/packages/aslide/package.json
@@ -48,9 +48,9 @@
     "@iconify/json": "^1.1.331",
     "@vitejs/plugin-vue": "^1.2.1",
     "@vue/compiler-sfc": "^3.0.11",
-    "@vueuse/core": "^4.8.4",
+    "@vueuse/core": "^4.9.0",
     "@vueuse/head": "^0.5.1",
-    "chalk": "^4.1.0",
+    "chalk": "^4.1.1",
     "codemirror": "^5.61.0",
     "fast-glob": "^3.2.5",
     "js-base64": "^3.6.0",

diff --git a/packages/theme-default/package.json b/packages/theme-default/package.json
@@ -14,11 +14,11 @@
   "peerDependencies": {
     "aslide": "*"
   },
+  "dependencies": {
+    "codemirror-theme-vars": "^0.1.0",
+    "prism-theme-vars": "^0.2.2"
+  },
   "devDependencies": {
     "aslide": "workspace:*"
-  },
-  "dependencies": {
-    "prism-theme-vars": "^0.2.2",
-    "codemirror-theme-vars": "^0.1.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml