one-screen-scale 1.0.0 → 1.1.0

package/src/core.js

@@ -1,156 +1,160 @@
-/**
- * 一屏自适应缩放 — 核心算法（框架无关）
- *
- * 两种模式：
- *   'contain'     一屏展示，内容不溢出，用 min(scaleX, scaleY)
- *   'fixed-width' 固定视觉宽度，内容可滚动，反向补高
- */
-
-// ---------- helpers ----------
-
-function resolveEl(el) {
-  if (!el) return null
-  if (typeof el === 'string') return document.querySelector(el)
-  if (el instanceof HTMLElement) return el
-  // Vue ref / React ref
-  if (el.value instanceof HTMLElement) return el.value
-  if (el.current instanceof HTMLElement) return el.current
-  return null
-}
-
-// ---------- scale calculation ----------
-
-export function calculateScale({
-  sourceWidth,
-  sourceHeight,
-  targetWidth = (typeof window !== 'undefined' ? window.innerWidth : 1920),
-  targetHeight = (typeof window !== 'undefined' ? window.innerHeight : 1080),
-  mode = 'contain',
-  visualWidth = 450,     // fixed-width 模式下的目标视觉宽度
-  screenWidth = (typeof window !== 'undefined' ? window.screen.width : 1920),     // fixed-width 模式下的设备屏幕宽度
-}) {
-  if (!sourceWidth || !sourceHeight || sourceWidth <= 0 || sourceHeight <= 0) return 1
-
-  let scale
-
-  if (mode === 'fixed-width') {
-    if(screenWidth < visualWidth){
-      scale = 1
-    }else{
-      scale = visualWidth / Math.max(targetWidth, screenWidth)
-    }
-  } else {
-    const sx = targetWidth / sourceWidth
-    const sy = targetHeight / sourceHeight
-    scale = Math.min(sx, sy)
-  }
-
-  return scale
-}
-
-// ---------- apply / read ----------
-
-export function applyScale(el, scale, origin = 'top center') {
-  const target = resolveEl(el)
-  if (!target) return
-  target.style.transform = `scale(${scale})`
-  target.style.transformOrigin = origin
-}
-
-export function getPageScale(el) {
-  const target = resolveEl(el)
-  if (!target) return 1
-
-  const style = window.getComputedStyle(target)
-  const t = style.transform
-  if (!t || t === 'none') return 1
-
-  // matrix(a, b, c, d, e, f) — 2d
-  const m2 = t.match(/matrix\(([^,]+),\s*[^,]+,\s*[^,]+,\s*([^,]+)/)
-  if (m2) return (parseFloat(m2[1]) + parseFloat(m2[2])) / 2
-
-  // matrix3d — 3d
-  const m3 = t.match(/matrix3d\(([^,]+),[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,([^,]+)\)/)
-  if (m3) return (parseFloat(m3[1]) + parseFloat(m3[2])) / 2
-
-  // scale(x, y) or scale(s)
-  const sm = t.match(/scale\(([^)]+)\)/)
-  if (sm) {
-    const vals = sm[1].split(',').map(v => parseFloat(v.trim()))
-    return vals.length >= 2 ? (vals[0] + vals[1]) / 2 : vals[0]
-  }
-
-  return 1
-}
-
-export function getInverseScale(el = '.share-page') {
-  const s = getPageScale(el)
-  return s > 0 ? 1 / s : 1
-}
-
-// ---------- scaler instance ----------
-
-export function createScaler(el, options = {}) {
-  const target = resolveEl(el)
-  if (!target) throw new Error('[one-screen-scale] element not found')
-
-  const {
-    mode = 'contain',
-    visualWidth = 450,
-    origin = 'top center',
-    autoResize = true
-  } = options
-
-  let currentScale = 1
-  let handler = null
-
-  function compute() {
-    const sw = target.offsetWidth
-    const sh = target.offsetHeight
-    const tw = window.innerWidth
-    const th = window.innerHeight
-
-    return calculateScale({
-      sourceWidth: sw,
-      sourceHeight: sh,
-      targetWidth: tw,
-      targetHeight: th,
-      mode,
-      visualWidth,
-      screenWidth: window.screen.width
-    })
-  }
-
-  function refresh() {
-    const next = compute()
-    if (next !== currentScale) {
-      currentScale = next
-      applyScale(target, next, origin)
-
-      // fixed-width 模式：反向补偿高度
-      if (mode === 'fixed-width' && next > 0) {
-        target.style.width = `${Math.max(window.innerWidth, window.screen.width)}px`
-        target.style.height = `${Math.round(window.innerHeight / next)}px`
-      }
-    }
-    return currentScale
-  }
-
-  function start() {
-    refresh()
-    if (autoResize) {
-      handler = () => refresh()
-      window.addEventListener('resize', handler)
-    }
-    return currentScale
-  }
-
-  function stop() {
-    if (handler) {
-      window.removeEventListener('resize', handler)
-      handler = null
-    }
-  }
-
-  return { start, stop, refresh, getScale: () => currentScale }
-}
+/**
+ * 一屏自适应缩放 — 核心算法（框架无关）
+ *
+ * 两种模式：
+ *   'contain'     一屏展示，内容不溢出，用 min(scaleX, scaleY)
+ *   'fixed-width' 固定视觉宽度，内容可滚动，反向补高
+ */
+
+// ---------- helpers ----------
+
+function resolveEl(el) {
+  if (!el) return null
+  if (typeof el === 'string') return document.querySelector(el)
+  if (el instanceof HTMLElement) return el
+  // Vue ref / React ref
+  if (el.value instanceof HTMLElement) return el.value
+  if (el.current instanceof HTMLElement) return el.current
+  return null
+}
+
+// ---------- scale calculation ----------
+
+export function calculateScale({
+  sourceWidth,
+  sourceHeight,
+  targetWidth = (typeof window !== 'undefined' ? window.innerWidth : 1920),
+  targetHeight = (typeof window !== 'undefined' ? window.innerHeight : 1080),
+  mode = 'contain',
+  visualWidth = 450,     // fixed-width 模式下的目标视觉宽度
+  // screenWidth = (typeof window !== 'undefined' ? window.screen.width : 1920),     // fixed-width 模式下的设备屏幕宽度
+}) {
+  if (!sourceWidth || !sourceHeight || sourceWidth <= 0 || sourceHeight <= 0) return 1
+
+  let scale
+
+  if (mode === 'fixed-width') {
+    // if(screenWidth < visualWidth){
+    //   scale = 1
+    // }else{
+    //   scale = visualWidth / Math.max(targetWidth, screenWidth)
+    // }
+    // 只用视口宽：视口比目标宽才缩小，否则 1:1（保持清晰）
+    scale = targetWidth > visualWidth ? visualWidth / targetWidth : 1
+  } else {
+    const sx = targetWidth / sourceWidth
+    const sy = targetHeight / sourceHeight
+    scale = Math.min(sx, sy)
+  }
+
+  return scale
+}
+
+// ---------- apply / read ----------
+
+export function applyScale(el, scale, origin = 'top center') {
+  const target = resolveEl(el)
+  if (!target) return
+  target.style.transform = `scale(${scale})`
+  target.style.transformOrigin = origin
+}
+
+export function getPageScale(el) {
+  const target = resolveEl(el)
+  if (!target) return 1
+
+  const style = window.getComputedStyle(target)
+  const t = style.transform
+  if (!t || t === 'none') return 1
+
+  // matrix(a, b, c, d, e, f) — 2d
+  const m2 = t.match(/matrix\(([^,]+),\s*[^,]+,\s*[^,]+,\s*([^,]+)/)
+  if (m2) return (parseFloat(m2[1]) + parseFloat(m2[2])) / 2
+
+  // matrix3d — 3d
+  const m3 = t.match(/matrix3d\(([^,]+),[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,[^,]+,([^,]+)\)/)
+  if (m3) return (parseFloat(m3[1]) + parseFloat(m3[2])) / 2
+
+  // scale(x, y) or scale(s)
+  const sm = t.match(/scale\(([^)]+)\)/)
+  if (sm) {
+    const vals = sm[1].split(',').map(v => parseFloat(v.trim()))
+    return vals.length >= 2 ? (vals[0] + vals[1]) / 2 : vals[0]
+  }
+
+  return 1
+}
+
+export function getInverseScale(el = '.share-page') {
+  const s = getPageScale(el)
+  return s > 0 ? 1 / s : 1
+}
+
+// ---------- scaler instance ----------
+
+export function createScaler(el, options = {}) {
+  const target = resolveEl(el)
+  if (!target) throw new Error('[one-screen-scale] element not found')
+
+  const {
+    mode = 'contain',
+    visualWidth = 450,
+    origin = 'top center',
+    autoResize = true
+  } = options
+
+  let currentScale = 1
+  let handler = null
+
+  function compute() {
+    const sw = target.offsetWidth
+    const sh = target.offsetHeight
+    const tw = document.documentElement.clientWidth || window.innerWidth
+    const th = window.innerHeight
+
+    return calculateScale({
+      sourceWidth: sw,
+      sourceHeight: sh,
+      targetWidth: tw,
+      targetHeight: th,
+      mode,
+      visualWidth,
+      // screenWidth: window.screen.width
+    })
+  }
+
+  function refresh() {
+    const next = compute()
+    if (next !== currentScale) {
+      currentScale = next
+      applyScale(target, next, origin)
+    }
+
+    // fixed-width 模式：反向补偿高度
+    if (mode === 'fixed-width' && next > 0) {
+      // target.style.width = `${Math.max(window.innerWidth, window.screen.width)}px`
+      const viewportWidth = document.documentElement.clientWidth || window.innerWidth
+      target.style.width = `${viewportWidth}px`
+      target.style.height = `${Math.round(window.innerHeight / next)}px`
+    }
+    return currentScale
+  }
+
+  function start() {
+    refresh()
+    if (autoResize) {
+      handler = () => refresh()
+      window.addEventListener('resize', handler)
+    }
+    return currentScale
+  }
+
+  function stop() {
+    if (handler) {
+      window.removeEventListener('resize', handler)
+      handler = null
+    }
+  }
+
+  return { start, stop, refresh, getScale: () => currentScale }
+}

package/src/directives.js

@@ -1,34 +1,34 @@
-/**
- * Vue 3 指令
- *   v-fit-screen   页面级缩放
- *   v-compensate   组件级反缩放补偿
- */
-import { createScaler } from './core.js'
-
-// ---- v-fit-screen ----
-
-export const vFitScreen = {
-  mounted(el, binding) {
-    const options = binding.value || {}
-    const scaler = createScaler(el, options)
-    scaler.start()
-    el.__fitScreenScaler = scaler
-  },
-
-  updated(el, binding) {
-    const scaler = el.__fitScreenScaler
-    if (scaler) {
-      const options = binding.value || {}
-      // 简单处理：重新 refresh
-      scaler.refresh()
-    }
-  },
-
-  unmounted(el) {
-    const scaler = el.__fitScreenScaler
-    if (scaler) {
-      scaler.stop()
-      delete el.__fitScreenScaler
-    }
-  }
-}
+/**
+ * Vue 3 指令
+ *   v-fit-screen   页面级缩放
+ *   v-compensate   组件级反缩放补偿
+ */
+import { createScaler } from './core.js'
+
+// ---- v-fit-screen ----
+
+export const vFitScreen = {
+  mounted(el, binding) {
+    const options = binding.value || {}
+    const scaler = createScaler(el, options)
+    scaler.start()
+    el.__fitScreenScaler = scaler
+  },
+
+  updated(el, binding) {
+    const scaler = el.__fitScreenScaler
+    if (scaler) {
+      const options = binding.value || {}
+      // 简单处理：重新 refresh
+      scaler.refresh()
+    }
+  },
+
+  unmounted(el) {
+    const scaler = el.__fitScreenScaler
+    if (scaler) {
+      scaler.stop()
+      delete el.__fitScreenScaler
+    }
+  }
+}

package/src/index.d.ts

@@ -1,46 +1,46 @@
-// ===== 核心 =====
-
-export interface ScaleOptions {
-  sourceWidth: number
-  sourceHeight: number
-  targetWidth?: number
-  targetHeight?: number
-  mode?: 'contain' | 'fixed-width'
-  visualWidth?: number
-  screenWidth?: number
-}
-
-export interface ScalerOptions {
-  mode?: 'contain' | 'fixed-width'
-  visualWidth?: number
-  origin?: string
-  autoResize?: boolean
-}
-
-export interface ScalerInstance {
-  start: () => number
-  stop: () => void
-  refresh: () => number
-  getScale: () => number
-}
-
-export function calculateScale(options: ScaleOptions): number
-export function applyScale(el: HTMLElement | string, scale: number, origin?: string): void
-export function getPageScale(el?: HTMLElement | string): number
-export function getInverseScale(el?: HTMLElement | string): number
-export function createScaler(el: HTMLElement | string, options?: ScalerOptions): ScalerInstance
-
-// ===== Vue =====
-
-import type { Ref, Directive } from 'vue'
-
-export const vFitScreen: Directive<HTMLElement, ScalerOptions>
-
-export function useFitScreen(
-  targetRef: Ref<HTMLElement | null> | HTMLElement,
-  options?: ScalerOptions
-): {
-  scale: Ref<number>
-  inverseScale: Ref<number>
-  refresh: () => void
-}
+// ===== 核心 =====
+
+export interface ScaleOptions {
+  sourceWidth: number
+  sourceHeight: number
+  targetWidth?: number
+  targetHeight?: number
+  mode?: 'contain' | 'fixed-width'
+  visualWidth?: number
+  // screenWidth?: number
+}
+
+export interface ScalerOptions {
+  mode?: 'contain' | 'fixed-width'
+  visualWidth?: number
+  origin?: string
+  autoResize?: boolean
+}
+
+export interface ScalerInstance {
+  start: () => number
+  stop: () => void
+  refresh: () => number
+  getScale: () => number
+}
+
+export function calculateScale(options: ScaleOptions): number
+export function applyScale(el: HTMLElement | string, scale: number, origin?: string): void
+export function getPageScale(el?: HTMLElement | string): number
+export function getInverseScale(el?: HTMLElement | string): number
+export function createScaler(el: HTMLElement | string, options?: ScalerOptions): ScalerInstance
+
+// ===== Vue =====
+
+import type { Ref, Directive } from 'vue'
+
+export const vFitScreen: Directive<HTMLElement, ScalerOptions>
+
+export function useFitScreen(
+  targetRef: Ref<HTMLElement | null> | HTMLElement,
+  options?: ScalerOptions
+): {
+  scale: Ref<number>
+  inverseScale: Ref<number>
+  refresh: () => void
+}

package/src/index.js

@@ -1,14 +1,14 @@
-// ---- 核心（框架无关） ----
-export {
-  calculateScale,
-  applyScale,
-  getPageScale,
-  getInverseScale,
-  createScaler
-} from './core.js'
-
-// ---- Vue 指令 ----
-export { vFitScreen } from './directives.js'
-
-// ---- Vue Composable ----
-export { useFitScreen } from './composables.js'
+// ---- 核心（框架无关） ----
+export {
+  calculateScale,
+  applyScale,
+  getPageScale,
+  getInverseScale,
+  createScaler
+} from './core.js'
+
+// ---- Vue 指令 ----
+export { vFitScreen } from './directives.js'
+
+// ---- Vue Composable ----
+export { useFitScreen } from './composables.js'

package/src/react.d.ts

@@ -1,19 +1,19 @@
-// ===== React =====
-
-import type { RefObject } from 'react'
-
-export interface ScalerOptions {
-  mode?: 'contain' | 'fixed-width'
-  visualWidth?: number
-  origin?: string
-  autoResize?: boolean
-}
-
-export function useFitScreen(
-  targetRef: RefObject<HTMLElement | null> | HTMLElement,
-  options?: ScalerOptions
-): {
-  scale: number
-  inverseScale: number
-  refresh: () => void
-}
+// ===== React =====
+
+import type { RefObject } from 'react'
+
+export interface ScalerOptions {
+  mode?: 'contain' | 'fixed-width'
+  visualWidth?: number
+  origin?: string
+  autoResize?: boolean
+}
+
+export function useFitScreen(
+  targetRef: RefObject<HTMLElement | null> | HTMLElement,
+  options?: ScalerOptions
+): {
+  scale: number
+  inverseScale: number
+  refresh: () => void
+}

package/src/react.js

@@ -1,46 +1,46 @@
-/**
- * React hook
- *   useFitScreen(ref, options) → { scale, inverseScale, refresh }
- */
-import { useRef, useState, useEffect, useCallback } from 'react'
-import { createScaler } from './core.js'
-
-export function useFitScreen(targetRef, options = {}) {
-  const [scale, setScale] = useState(1)
-  const [inverseScale, setInverseScale] = useState(1)
-  const scalerRef = useRef(null)
-
-  useEffect(() => {
-    const el = targetRef?.current ?? targetRef
-    if (!el) return
-
-    const scaler = createScaler(el, options)
-    scalerRef.current = scaler
-    const s = scaler.start()
-    setScale(s)
-    setInverseScale(s > 0 ? 1 / s : 1)
-
-    const onResize = () => {
-      const s = scaler.getScale()
-      setScale(s)
-      setInverseScale(s > 0 ? 1 / s : 1)
-    }
-    window.addEventListener('resize', onResize)
-
-    return () => {
-      window.removeEventListener('resize', onResize)
-      scaler.stop()
-      scalerRef.current = null
-    }
-  }, [targetRef])
-
-  const refresh = useCallback(() => {
-    const el = targetRef?.current ?? targetRef
-    if (!el || !scalerRef.current) return
-    const s = scalerRef.current.refresh()
-    setScale(s)
-    setInverseScale(s > 0 ? 1 / s : 1)
-  }, [targetRef])
-
-  return { scale, inverseScale, refresh }
-}
+/**
+ * React hook
+ *   useFitScreen(ref, options) → { scale, inverseScale, refresh }
+ */
+import { useRef, useState, useEffect, useCallback } from 'react'
+import { createScaler } from './core.js'
+
+export function useFitScreen(targetRef, options = {}) {
+  const [scale, setScale] = useState(1)
+  const [inverseScale, setInverseScale] = useState(1)
+  const scalerRef = useRef(null)
+
+  useEffect(() => {
+    const el = targetRef?.current ?? targetRef
+    if (!el) return
+
+    const scaler = createScaler(el, options)
+    scalerRef.current = scaler
+    const s = scaler.start()
+    setScale(s)
+    setInverseScale(s > 0 ? 1 / s : 1)
+
+    const onResize = () => {
+      const s = scaler.getScale()
+      setScale(s)
+      setInverseScale(s > 0 ? 1 / s : 1)
+    }
+    window.addEventListener('resize', onResize)
+
+    return () => {
+      window.removeEventListener('resize', onResize)
+      scaler.stop()
+      scalerRef.current = null
+    }
+  }, [targetRef])
+
+  const refresh = useCallback(() => {
+    const el = targetRef?.current ?? targetRef
+    if (!el || !scalerRef.current) return
+    const s = scalerRef.current.refresh()
+    setScale(s)
+    setInverseScale(s > 0 ? 1 / s : 1)
+  }, [targetRef])
+
+  return { scale, inverseScale, refresh }
+}