center-center 0.0.40 → 0.0.43

package/docs/index.html

@@ -7,7 +7,10 @@
 			{
 				"imports": {
 					"debug": "https://esm.sh/debug",
-					"center-center": "/assets/index.mjs"
+					"center-center": "/assets/index.mjs",
+					"#center-center/common": "/assets/common/index.mjs",
+					"#center-center/dom": "/assets/dom/index.mjs",
+					"#center-center/svg": "/assets/svg/index.mjs"
 				}
 			}
 		</script>

package/docs/index.mjs

@@ -80,7 +80,16 @@ app
     res.sendFile('docs/images/favicon.ico', { root: '.' })
   })
   .get('/assets/index.mjs', (req, res) => {
-    res.sendFile('index.mjs', { root: '.' })
+    res.sendFile('src/index.mjs', { root: '.' })
+  })
+  .get('/assets/common/index.mjs', (req, res) => {
+    res.sendFile('src/common/index.mjs', { root: '.' })
+  })
+  .get('/assets/dom/index.mjs', (req, res) => {
+    res.sendFile('src/dom/index.mjs', { root: '.' })
+  })
+  .get('/assets/svg/index.mjs', (req, res) => {
+    res.sendFile('src/svg/index.mjs', { root: '.' })
   })
   .get('/', (req, res) => {
     res.sendFile('docs/index.html', { root: '.' })

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "center-center",
-  "version": "0.0.40",
+  "version": "0.0.43",
   "description": "Position an element at the center center of a container",
-  "main": "./index.mjs",
+  "main": "./src/index.mjs",
   "type": "module",
-  "types": "./index.d.mts",
+  "types": "./src/index.d.mts",
   "author": {
     "name": "Jonathan Perry for Sequence Media Limited",
     "email": "sequencemedia@sequencemedia.net",
@@ -52,6 +52,16 @@
     "typescript": "^5.4.2"
   },
   "imports": {
-    "#center-center": "./index.mjs"
+    "#center-center/common": "./src/common/index.mjs",
+    "#center-center/dom": "./src/dom/index.mjs",
+    "#center-center/svg": "./src/svg/index.mjs",
+    "#center-center": "./src/index.mjs"
+  },
+  "exports": {
+    "./common": "./src/common/index.mjs",
+    "./dom": "./src/dom/index.mjs",
+    "./svg/view-box": "./src/svg/view-box/index.mjs",
+    "./svg": "./src/svg/index.mjs",
+    ".": "./src/index.mjs"
   }
 }

package/src/common/index.d.mts

@@ -0,0 +1,57 @@
+/**
+ *  The document `scrollingElement`
+ */
+export interface ScrollingElement {
+  scrollLeft: number
+  scrollTop: number
+}
+
+/**
+ * A Center Center `Rect`
+ */
+export interface CenterCenterRect {
+  left: number
+  top: number
+  width: number
+  height: number
+  right: number
+  bottom: number
+}
+
+/**
+ * Center Center `Rects`
+ */
+export interface CenterCenterRects {
+  viewport: CenterCenterRect
+  container: CenterCenterRect
+  target: CenterCenterRect
+}
+
+export function getScrollingElement (): ScrollingElement
+
+export function createViewportRect (): CenterCenterRect
+export function createDOMElementRect (element: Element): CenterCenterRect
+export function createSVGElementRect (element: SVGElement): CenterCenterRect
+export function createDOMRects (container: Element, target: Element): CenterCenterRect
+export function createSVGRects (container: Element, target: SVGElement): CenterCenterRect
+
+export function getRectLeft (rect: CenterCenterRect): number
+export function getRectTop (rect: CenterCenterRect): number
+export function getRectWidth (rect: CenterCenterRect): number
+export function getRectHeight (rect: CenterCenterRect): number
+
+export function getViewportRect (rects: CenterCenterRects): CenterCenterRect
+export function getContainerRect (rects: CenterCenterRects): CenterCenterRect
+export function getTargetRect (rects: CenterCenterRects): CenterCenterRect
+
+export function calculateRectX (rect: CenterCenterRect): number
+export function calculateRectY (rect: CenterCenterRect): number
+
+export function calculateBoundaryX (rects: CenterCenterRects): number
+export function calculateBoundaryY (rects: CenterCenterRects): number
+
+export function calculateContainerX (rects: CenterCenterRects): number
+export function calculateContainerY (rects: CenterCenterRects): number
+
+export function calculateTargetX (rects: CenterCenterRects): number
+export function calculateTargetY (rects: CenterCenterRects): number

package/{index.mjs → src/common/index.mjs}

@@ -1,100 +1,9 @@
 /**
- * @typedef {import('.').ScrollingElement} ScrollingElement
- * @typedef {import('.').CenterCenterRect} CenterCenterRect
- * @typedef {import('.').CenterCenterRects} CenterCenterRects
+ * @typedef {import('./index.mjs').ScrollingElement} ScrollingElement
+ * @typedef {import('./index.mjs').CenterCenterRect} CenterCenterRect
+ * @typedef {import('./index.mjs').CenterCenterRects} CenterCenterRects
  */
 
-const leftMap = new WeakMap()
-const topMap = new WeakMap()
-
-/**
- * Gets a parent element with `offsetLeft`
- *
- * @param {SVGElement} element
- * @returns {Element}
- */
-export function getParentElementForOffsetLeft (element) {
-  let parentElement = element.parentElement
-
-  while (!Reflect.has(parentElement, 'offsetLeft')) {
-    parentElement = parentElement.parentElement
-  }
-
-  return parentElement
-}
-
-/**
- * Gets a parent element with `offsetTop`
- *
- * @param {SVGElement} element
- * @returns {Element}
- */
-export function getParentElementForOffsetTop (element) {
-  let parentElement = element.parentElement
-
-  while (!Reflect.has(parentElement, 'offsetTop')) {
-    parentElement = parentElement.parentElement
-  }
-
-  return parentElement
-}
-
-/**
- * Gets the `offsetLeft` from the element or calculates the equivalent with
- * DOMRect `left` and the nearest `offsetLeft` from a parent
- *
- * @param {Element | SVGElement} element
- * @returns {number}
- */
-export function getLeft (element) {
-  if (Reflect.has(element, 'offsetLeft')) {
-    return (
-      Reflect.get(element, 'offsetLeft')
-    )
-  }
-
-  if (!leftMap.has(element)) leftMap.set(element, getParentElementForOffsetLeft(element))
-  const {
-    offsetLeft = 0
-  } = leftMap.get(element)
-
-  const {
-    left
-  } = element.getBoundingClientRect()
-
-  return (
-    offsetLeft - left
-  )
-}
-
-/**
- * Gets the `offsetTop` from the element or calculates the equivalent with
- * DOMRect `top` and the nearest `offsetTop` from a parent
- *
- * @param {Element | SVGElement} element
- * @returns {number}
- */
-export function getTop (element) {
-  if (Reflect.has(element, 'offsetTop')) {
-    return (
-      Reflect.get(element, 'offsetTop')
-    )
-  }
-
-  const {
-    top
-  } = element.getBoundingClientRect()
-
-  if (!topMap.has(element)) topMap.set(element, getParentElementForOffsetTop(element))
-  const {
-    offsetTop = 0
-  } = topMap.get(element)
-
-  return (
-    offsetTop - top
-  )
-}
-
 /**
  * Gets the document `scrollingElement` (or a valid alternative)
  *
@@ -112,46 +21,6 @@ export function getScrollingElement () {
   }
 }
 
-/**
- * Destructures the `left` field from a `Rect`
- *
- * @param {CenterCenterRect}
- * @returns {number}
- */
-export function getRectLeft ({ left }) {
-  return left
-}
-
-/**
- * Destructures the `top` field from a `Rect`
- *
- * @param {CenterCenterRect}
- * @returns {number}
- */
-export function getRectTop ({ top }) {
-  return top
-}
-
-/**
- * Destructures the `width` field from a `Rect`
- *
- * @param {CenterCenterRect}
- * @returns {number}
- */
-export function getRectWidth ({ width }) {
-  return width
-}
-
-/**
- * Destructures the `height` field from a `Rect`
- *
- * @param {CenterCenterRect}
- * @returns {number}
- */
-export function getRectHeight ({ height }) {
-  return height
-}
-
 /**
  * Creates a `Rect` for the viewport
  *
@@ -178,30 +47,6 @@ export function createViewportRect () {
   }
 }
 
-/**
- * Creates a `Rect` for an SVG element
- *
- * @param {Element} element
- * @returns {CenterCenterRect}
-*/
-export function createSVGElementRect (element) {
-  const {
-    x: left,
-    y: top,
-    width,
-    height
-  } = element.getBBox()
-
-  return {
-    left,
-    top,
-    width,
-    height,
-    right: (left + width),
-    bottom: (top + height)
-  }
-}
-
 /**
  * Creates a `Rect` for a DOM element
  *
@@ -235,15 +80,27 @@ export function createDOMElementRect (element) {
 }
 
 /**
- * Creates a `Rect` for a DOM element
+ * Creates a `Rect` for an SVG element
  *
- * @param {Element} element
+ * @param {SVGElement} element
  * @returns {CenterCenterRect}
 */
-export function createElementRect (element) {
-  return (
-    createDOMElementRect(element)
-  )
+export function createSVGElementRect (element) {
+  const {
+    x: left,
+    y: top,
+    width,
+    height
+  } = element.getBBox()
+
+  return {
+    left,
+    top,
+    width,
+    height,
+    right: (left + width),
+    bottom: (top + height)
+  }
 }
 
 /**
@@ -253,46 +110,125 @@ export function createElementRect (element) {
  * @param {Element} target
  * @returns {CenterCenterRects}
  */
-export function createSVGRects (container, target) {
+export function createDOMRects (container, target) {
   return {
     viewport: createViewportRect(),
     container: createDOMElementRect(container),
-    target: createSVGElementRect(target)
+    target: createDOMElementRect(target)
   }
 }
 
 /**
- * Creates `Rects` for the viewport as well as the DOM container and DOM target elements
+ * Creates `Rects` for the viewport as well as the DOM container and SVG target elements
  *
  * @param {Element} container
- * @param {Element} target
+ * @param {SVGElement} target
  * @returns {CenterCenterRects}
  */
-export function createDOMRects (container, target) {
+export function createSVGRects (container, target) {
   return {
     viewport: createViewportRect(),
     container: createDOMElementRect(container),
-    target: createDOMElementRect(target)
+    target: createSVGElementRect(target)
   }
 }
 
 /**
- * Creates `Rects` for the viewport as well as the container and target elements
+ * Destructures the `left` field from a `Rect`
  *
- * @param {Element} container
- * @param {Element} target
- * @returns {CenterCenterRects}
+ * @param {CenterCenterRect} rect
+ * @returns {number}
+ */
+export function getRectLeft ({ left }) {
+  return left
+}
+
+/**
+ * Destructures the `top` field from a `Rect`
+ *
+ * @param {CenterCenterRect} rect
+ * @returns {number}
+ */
+export function getRectTop ({ top }) {
+  return top
+}
+
+/**
+ * Destructures the `width` field from a `Rect`
+ *
+ * @param {CenterCenterRect} rect
+ * @returns {number}
+ */
+export function getRectWidth ({ width }) {
+  return width
+}
+
+/**
+ * Destructures the `height` field from a `Rect`
+ *
+ * @param {CenterCenterRect} rect
+ * @returns {number}
+ */
+export function getRectHeight ({ height }) {
+  return height
+}
+
+/**
+ * Destructures the viewport `Rect`
+ *
+ * @param {CenterCenterRects} rects
+ * @returns {CenterCenterRect}
+ */
+export function getViewportRect ({ viewport }) {
+  return viewport
+}
+
+/**
+ * Destructures the container `Rect`
+ *
+ * @param {CenterCenterRects} rects
+ * @returns {CenterCenterRect}
+ */
+export function getContainerRect ({ container }) {
+  return container
+}
+
+/**
+ * Destructures the target `Rect`
+ *
+ * @param {CenterCenterRects} rects
+ * @returns {CenterCenterRect}
+ */
+export function getTargetRect ({ target }) {
+  return target
+}
+
+/**
+ * Calculates the `x` coordinate of a `Rect`
+ *
+ * @param {CenterCenterRect}
+ * @returns {number}
+ */
+export function calculateRectX ({ left: l, width: w }) {
+  return (l + (w / 2))
+}
+
+/**
+ * Calculates the `y` coordinate of a `Rect`
+ *
+ * @param {CenterCenterRect}
+ * @returns {number}
  */
-export function createRects (container, target) {
-  return (
-    createDOMRects(container, target)
-  )
+export function calculateRectY ({ top: t, height: h }) {
+  return (t + (h / 2))
 }
 
 /**
- * Calculates the boundary `x` coordinate of the target in the container
+ * Calculates the right-most boundary `x` coordinate of the target in the container
+ *
+ * The range for target `x` is from left-most 0 to right-most boundary, inclusive
  *
- * @param {CenterCenterRects}
+ * @param {CenterCenterRects} rects
  * @returns {number}
  */
 export function calculateBoundaryX (rects) {
@@ -303,9 +239,11 @@ export function calculateBoundaryX (rects) {
 }
 
 /**
- * Calculates the boundary `y` coordinate of the target in the container
+ * Calculates the bottom-most boundary `y` coordinate of the target in the container
  *
- * @param {CenterCenterRects}
+ * The range for target `y` is from top-most 0 to bottom-most boundary, inclusive
+ *
+ * @param {CenterCenterRects} rects
  * @returns {number}
  */
 export function calculateBoundaryY (rects) {
@@ -318,7 +256,7 @@ export function calculateBoundaryY (rects) {
 /**
  * Calculates the `x` coordinate of the container
  *
- * @param {CenterCenterRects}
+ * @param {CenterCenterRects} rects
  * @returns {number}
  */
 export function calculateContainerX ({
@@ -342,7 +280,7 @@ export function calculateContainerX ({
 /**
  * Calculates the `y` coordinate of the container
  *
- * @param {CenterCenterRects}
+ * @param {CenterCenterRects} rects
  * @returns {number}
  */
 export function calculateContainerY ({
@@ -366,7 +304,7 @@ export function calculateContainerY ({
 /**
  * Calculates the `x` coordinate of the target
  *
- * @param {CenterCenterRects}
+ * @param {CenterCenterRects} rects
  * @returns {number}
  */
 export function calculateTargetX (rects) {
@@ -379,7 +317,7 @@ export function calculateTargetX (rects) {
 /**
  * Calculates the `y` coordinate of the target
  *
- * @param {CenterCenterRects}
+ * @param {CenterCenterRects} rects
  * @returns {number}
  */
 export function calculateTargetY (rects) {
@@ -388,63 +326,3 @@ export function calculateTargetY (rects) {
 
   return (y - (h / 2))
 }
-
-/**
- * Destructures the viewport `Rect`
- *
- * @param {CenterCenterRects}
- * @returns {CenterCenterRect}
- */
-export function getViewportRect ({ viewport }) {
-  return viewport
-}
-
-/**
- * Destructures the container `Rect`
- *
- * @param {CenterCenterRects}
- * @returns {CenterCenterRect}
- */
-export function getContainerRect ({ container }) {
-  return container
-}
-
-/**
- * Destructures the target `Rect`
- *
- * @param {CenterCenterRects}
- * @returns {CenterCenterRect}
- */
-export function getTargetRect ({ target }) {
-  return target
-}
-
-/**
- * Calculates the target `left` position
- *
- * @param {CenterCenterRects}
- * @returns {number}
- */
-export function calculateLeft (rects) {
-  const boundary = calculateBoundaryX(rects)
-  const x = calculateTargetX(rects)
-
-  return (
-    Math.max(0, Math.min(boundary, x))
-  )
-}
-
-/**
- * Calculates the target `top` position
- *
- * @param {CenterCenterRects}
- * @returns {number}
- */
-export function calculateTop (rects) {
-  const boundary = calculateBoundaryY(rects)
-  const y = calculateTargetY(rects)
-
-  return (
-    Math.max(0, Math.min(boundary, y))
-  )
-}

package/src/dom/index.d.mts

@@ -0,0 +1,7 @@
+import {
+  type CenterCenterRects
+} from '#center-center/common'
+
+export function createRects (container: Element, target: Element): CenterCenterRects
+export function calculateLeft (rects: CenterCenterRects): number
+export function calculateTop (rects: CenterCenterRects): number

package/src/dom/index.mjs

@@ -0,0 +1,46 @@
+/**
+ * @typedef {import('./common/index.mjs').ScrollingElement} ScrollingElement
+ * @typedef {import('./common/index.mjs').CenterCenterRect} CenterCenterRect
+ * @typedef {import('./common/index.mjs').CenterCenterRects} CenterCenterRects
+ */
+
+import {
+  calculateBoundaryX,
+  calculateBoundaryY,
+  calculateTargetX,
+  calculateTargetY
+} from '#center-center/common'
+
+export {
+  createDOMRects as createRects
+} from '#center-center/common'
+
+/**
+ * Calculates the target `left` position
+ *
+ * @param {CenterCenterRects} rects
+ * @returns {number}
+ */
+export function calculateLeft (rects) {
+  const boundary = calculateBoundaryX(rects)
+  const x = calculateTargetX(rects)
+
+  return (
+    Math.max(0, Math.min(boundary, x))
+  )
+}
+
+/**
+ * Calculates the target `top` position
+ *
+ * @param {CenterCenterRects} rects
+ * @returns {number}
+ */
+export function calculateTop (rects) {
+  const boundary = calculateBoundaryY(rects)
+  const y = calculateTargetY(rects)
+
+  return (
+    Math.max(0, Math.min(boundary, y))
+  )
+}

package/src/index.d.mts

@@ -0,0 +1,11 @@
+export type {
+  ScrollingElement,
+  CenterCenterRects,
+  CenterCenterRect
+} from '#center-center/common'
+
+export {
+  createRects,
+  calculateLeft,
+  calculateTop
+} from '#center-center'

package/src/index.mjs

@@ -0,0 +1,5 @@
+export {
+  createRects,
+  calculateLeft,
+  calculateTop
+} from '#center-center/dom'

package/src/svg/index.d.mts

@@ -0,0 +1,7 @@
+import {
+  type CenterCenterRects
+} from '#center-center/common'
+
+export function createRects (container: Element, target: SVGElement): CenterCenterRects
+export function calculateX (rects: CenterCenterRects): number
+export function calculateX (rects: CenterCenterRects): number

package/src/svg/index.mjs

@@ -0,0 +1,58 @@
+/**
+ * @typedef {import('../common/index.mjs').ScrollingElement} ScrollingElement
+ * @typedef {import('../common/index.mjs').CenterCenterRect} CenterCenterRect
+ * @typedef {import('../common/index.mjs').CenterCenterRects} CenterCenterRects
+ */
+
+import {
+  getTargetRect,
+  calculateRectX,
+  calculateRectY,
+  calculateContainerX,
+  calculateContainerY,
+  getContainerRect,
+  getRectWidth,
+  getRectHeight
+} from '#center-center/common'
+
+export {
+  createSVGRects as createRects
+} from '#center-center/common'
+
+/**
+ * Calculates the target `x` position
+ *
+ * @param {CenterCenterRects} rects
+ * @param {number | undefined} viewBoxW
+ * @param {number | undefined} scale
+ * @returns {number}
+ */
+export function calculateX (rects, viewBoxW = 0, scale = 1) {
+  const targetX = calculateRectX(getTargetRect(rects))
+  const containerX = calculateContainerX(rects)
+  const w = getRectWidth(getContainerRect(rects))
+  const ratio = (viewBoxW / w)
+
+  return (
+    targetX - ((containerX * ratio) / scale)
+  )
+}
+
+/**
+ * Calculates the target `y` position
+ *
+ * @param {CenterCenterRects} rects
+ * @param {number | undefined} viewBoxH
+ * @param {number | undefined} scale
+ * @returns {number}
+ */
+export function calculateY (rects, viewBoxH = 0, scale = 1) {
+  const targetY = calculateRectY(getTargetRect(rects))
+  const containerY = calculateContainerY(rects)
+  const h = getRectHeight(getContainerRect(rects))
+  const ratio = (viewBoxH / h)
+
+  return (
+    targetY - ((containerY * ratio) / scale)
+  )
+}

package/src/svg/view-box/index.mjs

@@ -0,0 +1,137 @@
+/**
+ *  An `<svg />` is of type `Element`
+ *
+ *  Its children are of `SVGElement`
+ */
+
+import debug from 'debug'
+
+const log = debug('center-center:view-box')
+
+export const X = 0
+export const Y = 1
+export const W = 2
+export const H = 3
+
+/**
+ * Transforms a string to a round number
+ *
+ * @param {string} s
+ * @returns {number}
+ */
+function toRound (s) {
+  return (
+    Math.round(Number(s))
+  )
+}
+
+/**
+ * Get the number at position `H` for the SVG element `viewBox` attribute
+ *
+ * @param {Element} svg
+ * @returns {number}
+ */
+export function getViewBoxXFor (svg) {
+  return (
+    getViewBoxX(getViewBox(svg))
+  )
+}
+
+/**
+ * Get the number at position `H` for the SVG element `viewBox` attribute
+ *
+ * @param {Element} svg
+ * @returns {number}
+ */
+export function getViewBoxYFor (svg) {
+  return (
+    getViewBoxY(getViewBox(svg))
+  )
+}
+
+/**
+ * Get the number at position `H` for the SVG element `viewBox` attribute
+ *
+ * @param {Element} svg
+ * @returns {number}
+ */
+export function getViewBoxWFor (svg) {
+  return (
+    getViewBoxW(getViewBox(svg))
+  )
+}
+
+/**
+ * Get the number at position `H` for the SVG element `viewBox` attribute
+ *
+ * @param {Element} svg
+ * @returns {number}
+ */
+export function getViewBoxHFor (svg) {
+  return (
+    getViewBoxH(getViewBox(svg))
+  )
+}
+
+/**
+ * Get the number at position `X`
+ *
+ * @param {number[]}
+ * @returns {number}
+ */
+export function getViewBoxX ({
+  [X]: x = 0
+}) {
+  return x
+}
+
+/**
+ * Get the number at position `Y`
+ *
+ * @param {number[]}
+ * @returns {number}
+ */
+export function getViewBoxY ({ [Y]: y = 0 }) {
+  return y
+}
+
+/**
+ * Get the number at position `W`
+ *
+ * @param {number[]}
+ * @returns {number}
+ */
+export function getViewBoxW ({ [W]: w = 0 }) {
+  return w
+}
+
+/**
+ * Get the number at position `H`
+ *
+ * @param {number[]}
+ * @returns {number}
+ */
+export function getViewBoxH ({ [H]: h = 0 }) {
+  return h
+}
+
+/**
+ * Get an SVG element `viewBox` attribute as an array of numbers
+ *
+ * @param {Element} svg
+ * @returns {number[]}
+ */
+export default function getViewBox (svg) {
+  log('getViewBox')
+
+  const viewBox = (
+    svg
+      .getAttribute('viewBox')
+      .split(String.fromCodePoint(32))
+      .map(toRound) // .map(Number).map(Math.round)
+  )
+
+  log(viewBox)
+
+  return viewBox
+}

package/index.d.mts

@@ -1,43 +0,0 @@
-export function getParentElementForOffsetLeft (element: SVGElement): Element
-export function getParentElementForOffsetTop (element: SVGElement): Element
-export function getLeft (element: Element | SVGElement): number
-export function getTop (element: Element | SVGElement): number
-export function getScrollingElement (): ScrollingElement
-export function getViewportRect (): CenterCenterRect
-export function getDOMElementRect (element: Element): CenterCenterRect
-export function getSVGElementRect (element: SVGElement): CenterCenterRect
-export function getElementRect (element: Element | SVGElement): CenterCenterRect
-export function getDOMRects (container: Element, target: Element): CenterCenterRects
-export function getSVGRects (container: Element, target: SVGElement): CenterCenterRects
-export function getRects (container: Element, target: Element | SVGElement): CenterCenterRects
-export function calculateLeft (rects: CenterCenterRects): number
-export function calculateTop (rects: CenterCenterRects): number
-
-/**
- *  The document `scrollingElement`
- */
-export interface ScrollingElement {
-  scrollLeft: number
-  scrollTop: number
-}
-
-/**
- * A Center Center `Rect`
- */
-export interface CenterCenterRect {
-  left: number
-  top: number
-  width: number
-  height: number
-  right: number
-  bottom: number
-}
-
-/**
- * Center Center `Rects`
- */
-export interface CenterCenterRects {
-  viewport: CenterCenterRect
-  container: CenterCenterRect
-  target: CenterCenterRect
-}