slidev-theme-watabegg 1.1.2 → 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,31 +82,27 @@ 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`）:
-- `fit`: `contain | cover | width | height`（既定 `contain`）
-- `position`: `center | top | bottom | left | right` もしくは組み合わせ（例: `top left`）
-- `offset`: `[x, y]` または `{ x, y }`（px）
+- `offsetY`: 画像の中心からの初期スクロール量（px）
 
 操作:
-- Wheel: 縦パン
-- Shift + Wheel: 横パン
-- Alt + Wheel: 10% ずつ拡大縮小
-- タッチ: ドラッグでパン、ピンチでズーム
+- Wheel / トラックパッド: 縦スクロール
+- タッチ: 縦スクロール
 
-初期フィット/位置の例:
+初期位置の例:
 ```markdown
 ---
 layout: image-scroll
 image: /path/to/long-bg.jpg
 imageScroll:
-  fit: width
-  position: center
-  offset: [0, -120]
+  offsetY: 180
 ---
 ```
 

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,31 +86,27 @@ 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`):
-- `fit`: `contain | cover | width | height` (default `contain`)
-- `position`: `center | top | bottom | left | right` or combined (e.g. `top left`)
-- `offset`: `[x, y]` or `{ x, y }` in px
+- `offsetY`: initial scroll offset from image center in px
 
 Controls:
-- Wheel: pan vertically
-- Shift + Wheel: pan horizontally
-- Alt + Wheel: zoom in/out by 10%
-- Touch: drag to pan, pinch to zoom
+- Wheel / trackpad: vertical scroll
+- Touch: vertical scroll
 
-Example with initial fit/position:
+Example with initial position:
 ```markdown
 ---
 layout: image-scroll
 image: /path/to/long-bg.jpg
 imageScroll:
-  fit: width
-  position: center
-  offset: [0, -120]
+  offsetY: 180
 ---
 ```
 

package/example.md

@@ -140,15 +140,25 @@ 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:
-  fit: width
-  position: center
+  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,24 +2,23 @@
   <div
     class="slidev-layout image-scroll"
     ref="wrapperRef"
-    @wheel="onWheel"
+    @wheel.prevent="onWheel"
     @pointerdown="onPointerDown"
     @pointermove="onPointerMove"
     @pointerup="onPointerUp"
     @pointercancel="onPointerUp"
   >
-    <div class="image-layer" :class="{ 'is-panning': isPanning }">
-      <div class="image-translate" :style="translateStyle">
-        <img
-          v-if="imageSrc"
-          ref="imageRef"
-          :src="imageSrc"
-          alt="Scrollable background"
-          :style="imageStyle"
-          draggable="false"
-          @load="onImageLoad"
-        />
-      </div>
+    <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">
       <slot />
@@ -28,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()
@@ -36,15 +35,10 @@ const { $frontmatter } = useSlideContext()
 const imageSrc = computed(() => $frontmatter.image)
 
 const wrapperRef = ref<HTMLElement | null>(null)
+const scrollerRef = ref<HTMLElement | null>(null)
 const imageRef = ref<HTMLImageElement | null>(null)
 
-type FitMode = 'contain' | 'cover' | 'width' | 'height'
-
 type ImageScrollFrontmatter = {
-  fit?: FitMode | string
-  position?: string
-  offset?: [number, number] | { x?: number; y?: number }
-  offsetX?: number
   offsetY?: number
 }
 
@@ -54,266 +48,100 @@ const imageScrollOptions = computed<ImageScrollFrontmatter>(() => {
   return {}
 })
 
-const fitMode = computed<FitMode>(() => {
-  const value = imageScrollOptions.value.fit
-  if (!value) return 'contain'
-  const normalized = String(value).toLowerCase()
-  if (normalized === 'cover') return 'cover'
-  if (normalized === 'width' || normalized === 'fit-width') return 'width'
-  if (normalized === 'height' || normalized === 'fit-height') return 'height'
-  return 'contain'
-})
-
-const positionMode = computed(() => imageScrollOptions.value.position ?? 'center')
-
-const offsetMode = computed(() => {
-  const raw = imageScrollOptions.value
-  const offset = raw.offset
-  let x = Number(raw.offsetX ?? 0)
-  let y = Number(raw.offsetY ?? 0)
-  if (Array.isArray(offset)) {
-    x = Number(offset[0] ?? x)
-    y = Number(offset[1] ?? y)
-  } else if (offset && typeof offset === 'object') {
-    x = Number((offset as { x?: number }).x ?? x)
-    y = Number((offset as { y?: number }).y ?? y)
-  }
-  return { x, y }
+const offsetY = computed(() => {
+  const raw = imageScrollOptions.value.offsetY ?? 0
+  const value = Number(raw)
+  return Number.isFinite(value) ? value : 0
 })
 
-const baseTransform = reactive({ x: 0, y: 0, scale: 1 })
-const userTransform = reactive({ x: 0, y: 0, scale: 1 })
-
 const imageSize = reactive({ width: 0, height: 0 })
 const wrapperSize = reactive({ width: 0, height: 0 })
 
-const isPanning = ref(false)
-const lastPointer = reactive({ x: 0, y: 0 })
-const activePointers = new Map<number, { x: number; y: number }>()
-const pinchState = reactive({
-  active: false,
-  startDistance: 0,
-  startUserScale: 1,
-  anchorImagePoint: { x: 0, y: 0 },
-})
-
-const MIN_SCALE = 0.4
-const MAX_SCALE = 4
-const ZOOM_STEP = 0.1
-
 const clamp = (val: number, min: number, max: number) => Math.min(max, Math.max(min, val))
 
-const resetTransform = () => {
-  baseTransform.scale = 1
-  baseTransform.x = 0
-  baseTransform.y = 0
-  userTransform.scale = 1
-  userTransform.x = 0
-  userTransform.y = 0
-}
-
-const panBy = (dx: number, dy: number) => {
-  userTransform.x += dx
-  userTransform.y += dy
-}
-
-const getWrapperPoint = (event: { clientX: number; clientY: number }) => {
-  const rect = wrapperRef.value?.getBoundingClientRect()
-  if (!rect) return { x: 0, y: 0 }
-  return { x: event.clientX - rect.left, y: event.clientY - rect.top }
-}
-
-const getTotalTransform = () => ({
-  x: baseTransform.x + userTransform.x,
-  y: baseTransform.y + userTransform.y,
-  scale: baseTransform.scale * userTransform.scale,
-})
-
-const getImagePoint = (anchor: { x: number; y: number }, total: { x: number; y: number; scale: number }) => ({
-  x: (anchor.x - total.x) / total.scale,
-  y: (anchor.y - total.y) / total.scale,
-})
-
-const applyScaleAtPoint = (nextUserScale: number, anchor: { x: number; y: number }, anchorImagePoint?: { x: number; y: number }) => {
-  const currentTotal = getTotalTransform()
-  const imagePoint = anchorImagePoint ?? getImagePoint(anchor, currentTotal)
-  const nextTotalScale = baseTransform.scale * nextUserScale
-  const nextTotalX = anchor.x - imagePoint.x * nextTotalScale
-  const nextTotalY = anchor.y - imagePoint.y * nextTotalScale
-  userTransform.scale = nextUserScale
-  userTransform.x = nextTotalX - baseTransform.x
-  userTransform.y = nextTotalY - baseTransform.y
-}
+const isTouching = ref(false)
+const lastTouchY = ref(0)
 
 const normalizeWheel = (event: WheelEvent) => {
-  let { deltaX, deltaY } = event
+  let { deltaY } = event
   if (event.deltaMode === 1) {
-    deltaX *= 16
     deltaY *= 16
   } else if (event.deltaMode === 2) {
-    deltaX *= wrapperSize.height || 1
     deltaY *= wrapperSize.height || 1
   }
-  return { deltaX, deltaY }
+  return deltaY
 }
 
 const onWheel = (event: WheelEvent) => {
-  if (!imageSrc.value) return
-
-  event.preventDefault()
-
-  if (event.altKey) {
-    const anchor = getWrapperPoint(event)
-    const zoomFactor = event.deltaY < 0 ? 1 + ZOOM_STEP : 1 - ZOOM_STEP
-    const nextScale = clamp(userTransform.scale * zoomFactor, MIN_SCALE, MAX_SCALE)
-    if (nextScale === userTransform.scale) return
-    applyScaleAtPoint(nextScale, anchor)
-    return
-  }
-
-  const { deltaX, deltaY } = normalizeWheel(event)
-  if (event.shiftKey) {
-    panBy(-deltaY, 0)
-  } else {
-    panBy(0, -deltaY)
-  }
+  const scroller = scrollerRef.value
+  if (!scroller || !imageSrc.value) return
+  scroller.scrollTop += normalizeWheel(event)
 }
 
 let resizeObserver: ResizeObserver | null = null
 
 const onPointerDown = (event: PointerEvent) => {
   if (!imageSrc.value) return
-  if (event.pointerType === 'mouse' && event.button !== 0) return
+  if (event.pointerType !== 'touch') return
   wrapperRef.value?.setPointerCapture(event.pointerId)
-  const point = getWrapperPoint(event)
-  activePointers.set(event.pointerId, point)
-  if (activePointers.size === 1) {
-    isPanning.value = true
-    lastPointer.x = point.x
-    lastPointer.y = point.y
-  }
-  if (activePointers.size === 2) {
-    isPanning.value = false
-    const [first, second] = Array.from(activePointers.values())
-    const center = { x: (first.x + second.x) / 2, y: (first.y + second.y) / 2 }
-    const distance = Math.hypot(first.x - second.x, first.y - second.y)
-    const total = getTotalTransform()
-    pinchState.active = true
-    pinchState.startDistance = distance
-    pinchState.startUserScale = userTransform.scale
-    pinchState.anchorImagePoint = getImagePoint(center, total)
-  }
+  isTouching.value = true
+  lastTouchY.value = event.clientY
 }
 
 const onPointerMove = (event: PointerEvent) => {
-  if (!activePointers.has(event.pointerId)) return
-  const point = getWrapperPoint(event)
-  activePointers.set(event.pointerId, point)
-
-  if (activePointers.size === 1 && !pinchState.active) {
-    const dx = point.x - lastPointer.x
-    const dy = point.y - lastPointer.y
-    panBy(dx, dy)
-    lastPointer.x = point.x
-    lastPointer.y = point.y
-    event.preventDefault()
-    return
-  }
-
-  if (activePointers.size >= 2 && pinchState.active) {
-    const [first, second] = Array.from(activePointers.values())
-    const center = { x: (first.x + second.x) / 2, y: (first.y + second.y) / 2 }
-    const distance = Math.hypot(first.x - second.x, first.y - second.y)
-    if (pinchState.startDistance > 0) {
-      const factor = distance / pinchState.startDistance
-      const nextScale = clamp(pinchState.startUserScale * factor, MIN_SCALE, MAX_SCALE)
-      applyScaleAtPoint(nextScale, center, pinchState.anchorImagePoint)
-      event.preventDefault()
-    }
-  }
+  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()
 }
 
 const onPointerUp = (event: PointerEvent) => {
-  if (activePointers.has(event.pointerId)) {
-    activePointers.delete(event.pointerId)
-  }
-  if (activePointers.size < 2) {
-    pinchState.active = false
-  }
-  if (activePointers.size === 1) {
-    const [remaining] = Array.from(activePointers.values())
-    lastPointer.x = remaining.x
-    lastPointer.y = remaining.y
-    isPanning.value = true
-  } else {
-    isPanning.value = false
-  }
+  if (event.pointerType !== 'touch') return
+  isTouching.value = false
+  wrapperRef.value?.releasePointerCapture(event.pointerId)
 }
 
-const computeBaseTransform = () => {
-  if (!imageSrc.value) return
-  if (!imageSize.width || !imageSize.height) return
-  if (!wrapperSize.width || !wrapperSize.height) return
-
-  const scaleX = wrapperSize.width / imageSize.width
-  const scaleY = wrapperSize.height / imageSize.height
-  let scale = scaleX
-  switch (fitMode.value) {
-    case 'cover':
-      scale = Math.max(scaleX, scaleY)
-      break
-    case 'height':
-      scale = scaleY
-      break
-    case 'width':
-      scale = scaleX
-      break
-    default:
-      scale = Math.min(scaleX, scaleY)
-  }
-
-  const scaledWidth = imageSize.width * scale
-  const scaledHeight = imageSize.height * scale
-  const position = String(positionMode.value).toLowerCase()
-  const parts = position.split(/\s+/).filter(Boolean)
-  let xAlign: 'left' | 'center' | 'right' = 'center'
-  let yAlign: 'top' | 'center' | 'bottom' = 'center'
+const scaledHeight = computed(() => {
+  if (!imageSize.width || !imageSize.height || !wrapperSize.width) return 0
+  return (imageSize.height * wrapperSize.width) / imageSize.width
+})
 
-  for (const part of parts) {
-    if (part === 'left' || part === 'center' || part === 'right') xAlign = part
-    if (part === 'top' || part === 'center' || part === 'bottom') yAlign = part
-  }
-  if (parts.length === 1) {
-    if (parts[0] === 'top' || parts[0] === 'bottom') {
-      yAlign = parts[0] as typeof yAlign
-      xAlign = 'center'
-    }
-    if (parts[0] === 'left' || parts[0] === 'right') {
-      xAlign = parts[0] as typeof xAlign
-      yAlign = 'center'
-    }
-  }
+const getRenderedImageHeight = () => {
+  const image = imageRef.value
+  if (!image) return 0
+  const rect = image.getBoundingClientRect()
+  return rect.height
+}
 
-  const alignAxis = (container: number, content: number, align: 'left' | 'center' | 'right' | 'top' | 'bottom') => {
-    if (align === 'left' || align === 'top') return 0
-    if (align === 'right' || align === 'bottom') return container - content
-    return (container - content) / 2
-  }
+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 offset = offsetMode.value
-  baseTransform.scale = scale
-  baseTransform.x = alignAxis(wrapperSize.width, scaledWidth, xAlign) + offset.x
-  baseTransform.y = alignAxis(wrapperSize.height, scaledHeight, yAlign) + offset.y
-  userTransform.scale = 1
-  userTransform.x = 0
-  userTransform.y = 0
+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
-  computeBaseTransform()
+  scheduleApplyDefaultScroll()
 }
 
 const updateWrapperSize = () => {
@@ -323,28 +151,24 @@ const updateWrapperSize = () => {
   wrapperSize.height = rect.height
 }
 
-const imageStyle = computed(() => ({
-  width: imageSize.width ? `${imageSize.width}px` : 'auto',
-  height: imageSize.height ? `${imageSize.height}px` : 'auto',
-  transform: `scale(${baseTransform.scale * userTransform.scale})`,
-  transformOrigin: '0 0',
-}))
-
-const translateStyle = computed(() => ({
-  transform: `translate3d(${baseTransform.x + userTransform.x}px, ${baseTransform.y + userTransform.y}px, 0)`,
-}))
+const imageStyle = computed(() => {
+  if (!imageSize.width || !imageSize.height) return {}
+  return {
+    aspectRatio: `${imageSize.width} / ${imageSize.height}`,
+  }
+})
 
 onMounted(() => {
   updateWrapperSize()
   if (imageRef.value?.complete && imageRef.value.naturalWidth) {
     imageSize.width = imageRef.value.naturalWidth
     imageSize.height = imageRef.value.naturalHeight
-    computeBaseTransform()
   }
+  scheduleApplyDefaultScroll()
   if (wrapperRef.value) {
     resizeObserver = new ResizeObserver(() => {
       updateWrapperSize()
-      computeBaseTransform()
+      scheduleApplyDefaultScroll()
     })
     resizeObserver.observe(wrapperRef.value)
   }
@@ -353,17 +177,16 @@ onMounted(() => {
 onBeforeUnmount(() => {
   resizeObserver?.disconnect()
   resizeObserver = null
-  activePointers.clear()
 })
 
 watch(imageSrc, () => {
   imageSize.width = 0
   imageSize.height = 0
-  resetTransform()
+  if (scrollerRef.value) scrollerRef.value.scrollTop = 0
 })
 
-watch([fitMode, positionMode, offsetMode], () => {
-  computeBaseTransform()
+watch([scaledHeight, offsetY], () => {
+  scheduleApplyDefaultScroll()
 })
 </script>
 
@@ -376,32 +199,21 @@ watch([fitMode, positionMode, offsetMode], () => {
   touch-action: none;
 }
 
-.image-layer {
+.image-scroll__scroller {
   position: absolute;
   inset: 0;
-  overflow: hidden;
-  cursor: grab;
-  user-select: none;
-}
-
-.image-layer.is-panning {
-  cursor: grabbing;
-}
-
-.image-translate {
-  position: absolute;
-  top: 0;
-  left: 0;
-  will-change: transform;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-gutter: stable;
+  overscroll-behavior: contain;
 }
 
-.image-layer img {
+.image-scroll__image {
   display: block;
+  width: 100%;
   max-width: none;
-  max-height: none;
   pointer-events: none;
   user-select: none;
-  will-change: transform;
 }
 
 .content {
@@ -409,5 +221,6 @@ watch([fitMode, positionMode, offsetMode], () => {
   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.2",
+  "version": "1.1.3",
   "type": "module",
   "author": "watabegg",
   "description": "Slidev theme for educational purposes, especially teaching.",