slidev-theme-watabegg 1.1.1 → 1.1.3

package/README.ja.md

@@ -52,7 +52,7 @@ transition: fade
 | cover | 表紙 | グラデーション波 + title/subtitle/author |
 | two-cols | 2カラム | `::left::` / `::right::` スロット |
 | image | 背景画像 | `image:` 指定 + `TextBox` で自由配置 |
-| image-scroll | 背景画像（パンとズーム） | `image:` 指定 + 縦長背景 + `TextBox` |
+| image-scroll | 背景画像（縦スクロール） | `image:` 指定 + 縦長背景 + `TextBox` |
 | end | 終了スライド | シンプルな終了画面 |
 
 ### two-cols 例
@@ -82,11 +82,30 @@ image: /path/to/bg.jpg
 ---
 layout: image-scroll
 image: /path/to/long-bg.jpg
+imageScroll:
+  offsetY: -120
 ---
 ```
 
 ![image-scroll 例](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/7.png)
 
+image-scroll オプション（frontmatter `imageScroll`）:
+- `offsetY`: 画像の中心からの初期スクロール量（px）
+
+操作:
+- Wheel / トラックパッド: 縦スクロール
+- タッチ: 縦スクロール
+
+初期位置の例:
+```markdown
+---
+layout: image-scroll
+image: /path/to/long-bg.jpg
+imageScroll:
+  offsetY: 180
+---
+```
+
 ## コンポーネント
 ### QuestionList
 入れ子質問/解答・Markdown 埋め込み・階層別スタイル。

package/README.md

@@ -56,7 +56,7 @@ Below: `color: blue` example.
 | cover | Title slide | Gradient wave + title/subtitle/author |
 | two-cols | Two columns | Slots: `::left::` / `::right::` |
 | image | Background image | Use `image:` + absolutely placed `TextBox` |
-| image-scroll | Background image (pan & zoom) | Use `image:` with tall background + `TextBox` |
+| image-scroll | Background image (vertical scroll) | Use `image:` with tall background + `TextBox` |
 | end | Ending slide | Simple finish screen |
 
 ### two-cols Example
@@ -86,11 +86,30 @@ image: /path/to/bg.jpg
 ---
 layout: image-scroll
 image: /path/to/long-bg.jpg
+imageScroll:
+  offsetY: -120
 ---
 ```
 
 ![image-scroll Example](https://raw.githubusercontent.com/watabegg/slidev-theme-watabegg/refs/heads/main/example/7.png)
 
+image-scroll options (frontmatter `imageScroll`):
+- `offsetY`: initial scroll offset from image center in px
+
+Controls:
+- Wheel / trackpad: vertical scroll
+- Touch: vertical scroll
+
+Example with initial position:
+```markdown
+---
+layout: image-scroll
+image: /path/to/long-bg.jpg
+imageScroll:
+  offsetY: 180
+---
+```
+
 ## Components
 ### QuestionList
 Nested questions/answers with per-level styles and Markdown rendering.

package/example.md

@@ -139,13 +139,26 @@ image: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?auto=format
 ---
 layout: image-scroll
 image: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=2400&q=80'
+imageScroll:
+  offsetY: -120
 ---
 
-- マウスホイール: 拡大
-- Shift + ホイール: 縮小
-- 左クリックホールド + ドラッグ: 移動
+## image-scroll: 縦長画像を「横幅フィット＋縦スクロール」で表示
 
-画像を全画面で扱いつつ、ズーム・パンを試せます。
+- 画像はスライド幅に合わせて表示
+- 縦方向はホイール / タッチでスクロール
+- `offsetY` で初期位置を調整（中心からのpx）
+
+ここでは `offsetY: -120` で少し上寄せしています。
+
+---
+layout: image-scroll
+image: 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=2400&q=80'
+---
+
+## offsetY の例（中心から上へ 300px）
+
+背景の見せたい位置が決まっているときに便利です。
 
 ---
 

package/layouts/image-scroll.vue

@@ -2,16 +2,22 @@
   <div
     class="slidev-layout image-scroll"
     ref="wrapperRef"
-    @wheel="onWheel"
-    @mousedown="onMouseDown"
+    @wheel.prevent="onWheel"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+    @pointercancel="onPointerUp"
   >
-    <div class="image-layer" :class="{ 'is-panning': isPanning }">
+    <div class="image-scroll__scroller" ref="scrollerRef">
       <img
         v-if="imageSrc"
+        ref="imageRef"
         :src="imageSrc"
         alt="Scrollable background"
+        class="image-scroll__image"
         :style="imageStyle"
         draggable="false"
+        @load="onImageLoad"
       />
     </div>
     <div class="content">
@@ -21,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 import { useSlideContext } from '@slidev/client'
 
 const { $frontmatter } = useSlideContext()
@@ -29,77 +35,158 @@ const { $frontmatter } = useSlideContext()
 const imageSrc = computed(() => $frontmatter.image)
 
 const wrapperRef = ref<HTMLElement | null>(null)
-const scale = ref(1)
-const position = reactive({ x: 0, y: 0 })
-const isPanning = ref(false)
-const lastPointer = reactive({ x: 0, y: 0 })
+const scrollerRef = ref<HTMLElement | null>(null)
+const imageRef = ref<HTMLImageElement | null>(null)
 
-const MIN_SCALE = 0.4
-const MAX_SCALE = 4
-const ZOOM_STEP = 0.12
+type ImageScrollFrontmatter = {
+  offsetY?: number
+}
+
+const imageScrollOptions = computed<ImageScrollFrontmatter>(() => {
+  const raw = $frontmatter.imageScroll
+  if (raw && typeof raw === 'object') return raw as ImageScrollFrontmatter
+  return {}
+})
+
+const offsetY = computed(() => {
+  const raw = imageScrollOptions.value.offsetY ?? 0
+  const value = Number(raw)
+  return Number.isFinite(value) ? value : 0
+})
+
+const imageSize = reactive({ width: 0, height: 0 })
+const wrapperSize = reactive({ width: 0, height: 0 })
 
 const clamp = (val: number, min: number, max: number) => Math.min(max, Math.max(min, val))
 
-const resetTransform = () => {
-  scale.value = 1
-  position.x = 0
-  position.y = 0
+const isTouching = ref(false)
+const lastTouchY = ref(0)
+
+const normalizeWheel = (event: WheelEvent) => {
+  let { deltaY } = event
+  if (event.deltaMode === 1) {
+    deltaY *= 16
+  } else if (event.deltaMode === 2) {
+    deltaY *= wrapperSize.height || 1
+  }
+  return deltaY
 }
 
 const onWheel = (event: WheelEvent) => {
-  if (!imageSrc.value) return
+  const scroller = scrollerRef.value
+  if (!scroller || !imageSrc.value) return
+  scroller.scrollTop += normalizeWheel(event)
+}
 
-  // Default: wheelで拡大。Shift押下時は縮小方向を優先。
-  const direction = event.shiftKey ? -1 : event.deltaY < 0 ? 1 : -1
-  const next = clamp(scale.value + direction * ZOOM_STEP, MIN_SCALE, MAX_SCALE)
+let resizeObserver: ResizeObserver | null = null
 
-  if (next === scale.value) return
+const onPointerDown = (event: PointerEvent) => {
+  if (!imageSrc.value) return
+  if (event.pointerType !== 'touch') return
+  wrapperRef.value?.setPointerCapture(event.pointerId)
+  isTouching.value = true
+  lastTouchY.value = event.clientY
+}
 
+const onPointerMove = (event: PointerEvent) => {
+  if (!isTouching.value || event.pointerType !== 'touch') return
+  const scroller = scrollerRef.value
+  if (!scroller) return
+  const deltaY = event.clientY - lastTouchY.value
+  scroller.scrollTop -= deltaY
+  lastTouchY.value = event.clientY
   event.preventDefault()
-  scale.value = next
 }
 
-const onMouseDown = (event: MouseEvent) => {
-  if (!imageSrc.value || event.button !== 0) return
-  isPanning.value = true
-  lastPointer.x = event.clientX
-  lastPointer.y = event.clientY
-  window.addEventListener('mousemove', onMouseMove)
-  window.addEventListener('mouseup', onMouseUp)
+const onPointerUp = (event: PointerEvent) => {
+  if (event.pointerType !== 'touch') return
+  isTouching.value = false
+  wrapperRef.value?.releasePointerCapture(event.pointerId)
 }
 
-const onMouseMove = (event: MouseEvent) => {
-  if (!isPanning.value) return
-  const dx = event.clientX - lastPointer.x
-  const dy = event.clientY - lastPointer.y
-  position.x += dx
-  position.y += dy
-  lastPointer.x = event.clientX
-  lastPointer.y = event.clientY
-  event.preventDefault()
+const scaledHeight = computed(() => {
+  if (!imageSize.width || !imageSize.height || !wrapperSize.width) return 0
+  return (imageSize.height * wrapperSize.width) / imageSize.width
+})
+
+const getRenderedImageHeight = () => {
+  const image = imageRef.value
+  if (!image) return 0
+  const rect = image.getBoundingClientRect()
+  return rect.height
 }
 
-const onMouseUp = () => {
-  isPanning.value = false
-  window.removeEventListener('mousemove', onMouseMove)
-  window.removeEventListener('mouseup', onMouseUp)
+const applyDefaultScroll = () => {
+  const scroller = scrollerRef.value
+  if (!scroller) return
+  const renderedHeight = getRenderedImageHeight()
+  const totalHeight = renderedHeight || scaledHeight.value
+  if (!totalHeight) return
+  const viewportHeight = scroller.clientHeight || wrapperSize.height
+  const maxScroll = Math.max(0, totalHeight - viewportHeight)
+  const desired = maxScroll / 2 + offsetY.value
+  scroller.scrollTop = clamp(desired, 0, maxScroll)
 }
 
-const imageStyle = computed(() => ({
-  transform: `translate(${position.x}px, ${position.y}px) scale(${scale.value})`,
-}))
+const scheduleApplyDefaultScroll = () => {
+  if (!imageSrc.value) return
+  nextTick(() => {
+    requestAnimationFrame(() => {
+      applyDefaultScroll()
+    })
+  })
+}
+
+const onImageLoad = (event: Event) => {
+  const target = event.target as HTMLImageElement
+  imageSize.width = target.naturalWidth
+  imageSize.height = target.naturalHeight
+  scheduleApplyDefaultScroll()
+}
+
+const updateWrapperSize = () => {
+  const rect = wrapperRef.value?.getBoundingClientRect()
+  if (!rect) return
+  wrapperSize.width = rect.width
+  wrapperSize.height = rect.height
+}
+
+const imageStyle = computed(() => {
+  if (!imageSize.width || !imageSize.height) return {}
+  return {
+    aspectRatio: `${imageSize.width} / ${imageSize.height}`,
+  }
+})
 
 onMounted(() => {
-  resetTransform()
+  updateWrapperSize()
+  if (imageRef.value?.complete && imageRef.value.naturalWidth) {
+    imageSize.width = imageRef.value.naturalWidth
+    imageSize.height = imageRef.value.naturalHeight
+  }
+  scheduleApplyDefaultScroll()
+  if (wrapperRef.value) {
+    resizeObserver = new ResizeObserver(() => {
+      updateWrapperSize()
+      scheduleApplyDefaultScroll()
+    })
+    resizeObserver.observe(wrapperRef.value)
+  }
 })
 
 onBeforeUnmount(() => {
-  window.removeEventListener('mousemove', onMouseMove)
-  window.removeEventListener('mouseup', onMouseUp)
+  resizeObserver?.disconnect()
+  resizeObserver = null
 })
 
 watch(imageSrc, () => {
-  resetTransform()
+  imageSize.width = 0
+  imageSize.height = 0
+  if (scrollerRef.value) scrollerRef.value.scrollTop = 0
+})
+
+watch([scaledHeight, offsetY], () => {
+  scheduleApplyDefaultScroll()
 })
 </script>
 
@@ -107,26 +194,26 @@ watch(imageSrc, () => {
 .slidev-layout.image-scroll {
   position: relative;
   height: 100%;
+  padding: 0;
   overflow: hidden;
+  touch-action: none;
 }
 
-.image-layer {
+.image-scroll__scroller {
   position: absolute;
   inset: 0;
-  overflow: hidden;
-  cursor: grab;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-gutter: stable;
+  overscroll-behavior: contain;
 }
 
-.image-layer.is-panning {
-  cursor: grabbing;
-}
-
-.image-layer img {
+.image-scroll__image {
+  display: block;
   width: 100%;
-  height: 100%;
-  object-fit: contain;
-  will-change: transform;
-  transition: transform 80ms ease-out;
+  max-width: none;
+  pointer-events: none;
+  user-select: none;
 }
 
 .content {
@@ -134,5 +221,6 @@ watch(imageSrc, () => {
   z-index: 1;
   height: 100%;
   padding: 2rem;
+  box-sizing: border-box;
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-watabegg",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "type": "module",
   "author": "watabegg",
   "description": "Slidev theme for educational purposes, especially teaching.",

package/styles/layout.css

@@ -110,24 +110,34 @@
   position: relative;
   padding: 0;
   overflow: hidden;
+  touch-action: none;
 
   .image-layer {
     position: absolute;
     inset: 0;
     cursor: grab;
     overflow: hidden;
+    user-select: none;
   }
 
   .image-layer.is-panning {
     cursor: grabbing;
   }
 
+  .image-translate {
+    position: absolute;
+    top: 0;
+    left: 0;
+    will-change: transform;
+  }
+
   .image-layer img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
+    display: block;
+    max-width: none;
+    max-height: none;
+    pointer-events: none;
+    user-select: none;
     will-change: transform;
-    transition: transform 80ms ease-out;
   }
 
   .content {