refactor: DOM structure (#1556)

packages/client/composables/useNav.ts

@@ -55,7 +55,7 @@ export interface SlidevContextNav {
  /** Go to previous slide */
  prevSlide: (lastClicks?: boolean) => Promise<void>
  /** Go to slide */
- go: (page: number | string, clicks?: number) => Promise<void>
+ go: (page: number | string, clicks?: number, force?: boolean) => Promise<void>
  /** Go to the first slide */
  goFirst: () => Promise<void>
  /** Go to the last slide */
@@ -181,14 +181,14 @@ export function useNavBase(
  return go(total.value)
  }
 
- async function go(page: number | string, clicks: number = 0) {
+ async function go(page: number | string, clicks: number = 0, force = false) {
  skipTransition.value = false
  const pageChanged = currentSlideNo.value !== page
  const clicksChanged = clicks !== queryClicks.value
  const meta = getSlide(page)?.meta
  const clicksStart = meta?.slide?.frontmatter.clicksStart ?? 0
  clicks = clamp(clicks, clicksStart, meta?.__clicksContext?.total ?? CLICKS_MAX)
- if (pageChanged || clicksChanged) {
+ if (force || pageChanged || clicksChanged) {
  await router?.push({
  path: getSlidePath(page, isPresenter.value),
  query: {
@@ -380,9 +380,16 @@ export const useNav = createSharedComposable((): SlidevContextNavFull => {
  watch(
  [nav.total, state.currentRoute],
  async () => {
- if (state.hasPrimarySlide.value && !getSlide(state.currentRoute.value.params.no as string)) {
- // The current slide may has been removed. Redirect to the last slide.
- await nav.goLast()
+ const no = state.currentRoute.value.params.no as string
+ if (state.hasPrimarySlide.value && !getSlide(no)) {
+ if (no && no !== 'index.html') {
+ // The current slide may has been removed. Redirect to the last slide.
+ await nav.go(nav.total.value, 0, true)
+ }
+ else {
+ // Redirect to the first slide
+ await nav.go(1, 0, true)
+ }
  }
  },
  { flush: 'pre', immediate: true },

packages/client/constants.ts

@@ -11,7 +11,6 @@ export const injectionSlideScale = '$$slidev-slide-scale' as unknown as Injectio
 export const injectionSlidevContext = '$$slidev-context' as unknown as InjectionKey<UnwrapNestedRefs<SlidevContext>>
 export const injectionRoute = '$$slidev-route' as unknown as InjectionKey<SlideRoute>
 export const injectionRenderContext = '$$slidev-render-context' as unknown as InjectionKey<Ref<RenderContext>>
-export const injectionActive = '$$slidev-active' as unknown as InjectionKey<Ref<boolean>>
 export const injectionFrontmatter = '$$slidev-fontmatter' as unknown as InjectionKey<Record<string, any>>
 export const injectionSlideZoom = '$$slidev-slide-zoom' as unknown as InjectionKey<ComputedRef<number>>
 

packages/client/env.ts

@@ -16,3 +16,5 @@ export const slideHeight = computed(() => Math.ceil(slideWidth.value / slideAspe
 export const themeVars = computed(() => {
  return objectMap(configs.themeConfig || {}, (k, v) => [`--slidev-theme-${k}`, v])
 })
+
+export const slidesTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')

packages/client/internals/Controls.vue

@@ -1,12 +1,19 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue'
-import { showInfoDialog, showOverview, showRecordingDialog } from '../state'
+import { showInfoDialog, showRecordingDialog } from '../state'
 import { configs } from '../env'
+import { useNav } from '../composables/useNav'
 import QuickOverview from './QuickOverview.vue'
 import InfoDialog from './InfoDialog.vue'
 import Goto from './Goto.vue'
 import ContextMenu from './ContextMenu.vue'
 
+const { isEmbedded } = useNav()
+const drawingEnabled = __SLIDEV_FEATURE_DRAWINGS__ && !configs.drawings.presenterOnly && !isEmbedded.value
+const DrawingControls = shallowRef<any>()
+if (drawingEnabled)
+ import('../internals/DrawingControls.vue').then(v => DrawingControls.value = v.default)
+
 const WebCamera = shallowRef<any>()
 const RecordingDialog = shallowRef<any>()
 if (__SLIDEV_FEATURE_RECORD__) {
@@ -16,7 +23,8 @@ if (__SLIDEV_FEATURE_RECORD__) {
 </script>
 
 <template>
- <QuickOverview v-model="showOverview" />
+ <DrawingControls v-if="drawingEnabled && DrawingControls" />
+ <QuickOverview />
  <Goto />
  <WebCamera v-if="WebCamera" />
  <RecordingDialog v-if="RecordingDialog" v-model="showRecordingDialog" />

packages/client/internals/DrawingControls.vue

@@ -136,4 +136,4 @@ function setBrushColor(color: typeof brush.color) {
 .v-popper--theme-menu .v-popper__arrow-inner {
  --uno: border-main;
 }
-</style>../composables/drawings
+</style>

packages/client/internals/DrawingLayer.vue

@@ -25,4 +25,4 @@ onBeforeUnmount(() => {
  class="w-full h-full absolute top-0"
  :class="{ 'pointer-events-none': !drawingEnabled, 'touch-none': drawingEnabled }"
  />
-</template>../composables/drawings
+</template>

packages/client/internals/DrawingPreview.vue

@@ -12,4 +12,4 @@ const { drawingState } = useDrawings()
  class="w-full h-full absolute top-0 pointer-events-none"
  v-html="drawingState[page]"
  />
-</template>../composables/drawings
+</template>

packages/client/internals/NavControls.vue

@@ -53,10 +53,6 @@ const barStyle = computed(() => props.persist
 const RecordingControls = shallowRef<any>()
 if (__SLIDEV_FEATURE_RECORD__)
  import('./RecordingControls.vue').then(v => RecordingControls.value = v.default)
-
-const DrawingControls = shallowRef<any>()
-if (__SLIDEV_FEATURE_DRAWINGS__)
- import('./DrawingControls.vue').then(v => DrawingControls.value = v.default)
 </script>
 
 <template>
@@ -179,4 +175,4 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
  <CustomNavControls />
  </div>
  </nav>
-</template>../composables/drawings
+</template>

packages/client/internals/NoteDisplay.vue

@@ -17,7 +17,7 @@ const emit = defineEmits<{
  (type: 'markerClick', e: MouseEvent, clicks: number): void
 }>()
 
-const withClicks = computed(() => props.clicksContext?.current != null && props.noteHtml?.includes('slidev-note-click-mark'))
+const withClicks = computed(() => props.clicksContext != null && props.noteHtml?.includes('slidev-note-click-mark'))
 const noteDisplay = ref<HTMLElement | null>(null)
 
 const CLASS_FADE = 'slidev-note-fade'

packages/client/internals/QuickOverview.vue

@@ -1,25 +1,20 @@
 <script setup lang="ts">
-import { useEventListener, useVModel } from '@vueuse/core'
+import { useEventListener } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
 import { breakpoints, showOverview, windowSize } from '../state'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
 import { createFixedClicks } from '../composables/useClicks'
-import { getSlideClass } from '../utils'
 import { CLICKS_MAX } from '../constants'
 import { useNav } from '../composables/useNav'
 import SlideContainer from './SlideContainer.vue'
 import SlideWrapper from './SlideWrapper.vue'
 import DrawingPreview from './DrawingPreview.vue'
 import IconButton from './IconButton.vue'
 
-const props = defineProps<{ modelValue: boolean }>()
-const emit = defineEmits(['update:modelValue'])
-const value = useVModel(props, 'modelValue', emit)
-
 const { currentSlideNo, go: goSlide, slides } = useNav()
 
 function close() {
- value.value = false
+ showOverview.value = false
 }
 
 function go(page: number) {
@@ -117,10 +112,10 @@ setTimeout(() => {
  leave-to-class="opacity-0 scale-102 !backdrop-blur-0px"
  >
  <div
- v-if="value || activeSlidesLoaded"
- v-show="value"
- class="bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)]"
- @click="close()"
+ v-if="showOverview || activeSlidesLoaded"
+ v-show="showOverview"
+ class="fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)] z-20 bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px"
+ @click="close"
  >
  <div
  class="grid gap-y-4 gap-x-8 w-full"
@@ -142,10 +137,7 @@ setTimeout(() => {
  class="pointer-events-none"
  >
  <SlideWrapper
- :is="route.component"
- v-if="route?.component"
  :clicks-context="createFixedClicks(route, CLICKS_MAX)"
- :class="getSlideClass(route)"
  :route="route"
  render-context="overview"
  />
@@ -168,12 +160,12 @@ setTimeout(() => {
  </div>
  </div>
  </Transition>
- <div v-if="value" class="fixed top-4 right-4 text-gray-400 flex flex-col items-center gap-2">
+ <div v-if="showOverview" class="fixed top-4 right-4 z-20 text-gray-400 flex flex-col items-center gap-2">
  <IconButton title="Close" class="text-2xl" @click="close">
  <carbon:close />
  </IconButton>
  <IconButton
- v-if="__DEV__"
+ v-if="__SLIDEV_FEATURE_PRESENTER__"
  as="a"
  title="Slides Overview"
  target="_blank"

packages/client/internals/Settings.vue

@@ -16,7 +16,7 @@ const items: SelectionItem<number>[] = [
 </script>
 
 <template>
- <div class="text-sm">
+ <div class="text-sm select-none">
  <SelectList v-model="slideScale" title="Scale" :items="items" />
  </div>
 </template>

packages/client/internals/SlideContainer.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { provideLocal, useElementSize, useStyleTag } from '@vueuse/core'
-import { computed, ref, watchEffect } from 'vue'
-import { configs, slideAspect, slideHeight, slideWidth } from '../env'
+import { computed, ref } from 'vue'
 import { injectionSlideElement, injectionSlideScale } from '../constants'
+import { slideAspect, slideHeight, slideWidth } from '../env'
 import { useNav } from '../composables/useNav'
+import { slideScale } from '../state'
 
 const props = defineProps({
  width: {
@@ -12,83 +13,64 @@ const props = defineProps({
  meta: {
  default: () => ({}) as any,
  },
- scale: {
- type: [Number, String],
- },
  isMain: {
  type: Boolean,
  default: false,
  },
 })
 
-const { clicksDirection, isPrintMode } = useNav()
+const { isPrintMode } = useNav()
 
-const root = ref<HTMLDivElement | null>(null)
-const rootSize = useElementSize(root)
+const container = ref<HTMLDivElement | null>(null)
+const containerSize = useElementSize(container)
 const slideElement = ref<HTMLElement | null>(null)
 
-const width = computed(() => props.width ? props.width : rootSize.width.value)
-const height = computed(() => props.width ? props.width / slideAspect.value : rootSize.height.value)
-
-if (props.width) {
- watchEffect(() => {
- if (root.value) {
- root.value.style.width = `${width.value}px`
- root.value.style.height = `${height.value}px`
- }
- })
-}
-
-const screenAspect = computed(() => width.value / height.value)
+const width = computed(() => props.width ?? containerSize.width.value)
+const height = computed(() => props.width ? props.width / slideAspect.value : containerSize.height.value)
 
 const scale = computed(() => {
- if (props.scale && !isPrintMode.value)
- return +props.scale
- if (screenAspect.value < slideAspect.value)
- return width.value / slideWidth.value
- return height.value * slideAspect.value / slideWidth.value
+ if (slideScale.value && !isPrintMode.value)
+ return +slideScale.value
+ return Math.min(width.value / slideWidth.value, height.value / slideHeight.value)
 })
 
-const style = computed(() => ({
+const contentStyle = computed(() => ({
  'height': `${slideHeight.value}px`,
  'width': `${slideWidth.value}px`,
  'transform': `translate(-50%, -50%) scale(${scale.value})`,
  '--slidev-slide-scale': scale.value,
 }))
 
-const className = computed(() => ({
- 'select-none': !configs.selectable,
- 'slidev-nav-go-forward': clicksDirection.value > 0,
- 'slidev-nav-go-backward': clicksDirection.value < 0,
-}))
-
-if (props.isMain) {
- useStyleTag(computed(() => `
- :root {
- --slidev-slide-scale: ${scale.value};
+const containerStyle = computed(() => props.width
+ ? {
+ width: `${props.width}px`,
+ height: `${props.width / slideAspect.value}px`,
  }
- `))
-}
+ : {},
+)
+
+if (props.isMain)
+ useStyleTag(computed(() => `:root { --slidev-slide-scale: ${scale.value}; }`))
 
 provideLocal(injectionSlideScale, scale)
 provideLocal(injectionSlideElement, slideElement)
 </script>
 
 <template>
- <div id="slide-container" ref="root" class="slidev-slides-container" :class="className">
- <div id="slide-content" ref="slideElement" class="slidev-slide-content" :style="style">
+ <div :id="isMain ? 'slide-container' : undefined" ref="container" class="slidev-slide-container" :style="containerStyle">
+ <div :id="isMain ? 'slide-content' : undefined" ref="slideElement" class="slidev-slide-content" :style="contentStyle">
  <slot />
  </div>
  <slot name="controls" />
  </div>
 </template>
 
-<style lang="postcss">
-#slide-container {
- @apply relative overflow-hidden break-after-page;
+<style scoped lang="postcss">
+.slidev-slide-container {
+ @apply relative w-full h-full overflow-hidden;
 }
 
-#slide-content {
- @apply relative overflow-hidden bg-main absolute left-1/2 top-1/2;
+.slidev-slide-content {
+ @apply absolute left-1/2 top-1/2 overflow-hidden bg-main;
 }
 </style>