center-center 0.0.41 → 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>
@@ -15,7 +18,7 @@
 			import debug from 'debug'
 
 			import {
-				createDOMRects,
+				createRects,
 				calculateLeft,
 				calculateTop
 			} from 'center-center'
@@ -73,7 +76,7 @@
 				log('render')
 
 				window.requestAnimationFrame(() => {
-					const rects = createDOMRects(container, target)
+					const rects = createRects(container, target)
 					const left = calculateLeft(rects)
 					const top = calculateTop(rects)
 

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.41",
+  "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,7 +1,7 @@
 /**
- * @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
  */
 
 /**
@@ -21,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
  *
@@ -88,18 +48,26 @@ export function createViewportRect () {
 }
 
 /**
- * Creates a `Rect` for an SVG element
+ * Creates a `Rect` for a DOM element
  *
- * @param {SVGElement} element
+ * @param {Element} element
  * @returns {CenterCenterRect}
 */
-export function createSVGElementRect (element) {
+export function createDOMElementRect (element) {
   const {
-    x: left,
-    y: top,
+    scrollLeft,
+    scrollTop
+  } = getScrollingElement()
+
+  const {
+    x,
+    y,
     width,
     height
-  } = element.getBBox()
+  } = element.getBoundingClientRect()
+
+  const left = (scrollLeft + x)
+  const top = (scrollTop + y)
 
   return {
     left,
@@ -112,26 +80,18 @@ export function createSVGElementRect (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 createDOMElementRect (element) {
-  const {
-    scrollLeft,
-    scrollTop
-  } = getScrollingElement()
-
+export function createSVGElementRect (element) {
   const {
-    x,
-    y,
+    x: left,
+    y: top,
     width,
     height
-  } = element.getBoundingClientRect()
-
-  const left = (scrollLeft + x)
-  const top = (scrollTop + y)
+  } = element.getBBox()
 
   return {
     left,
@@ -144,63 +104,103 @@ export function createDOMElementRect (element) {
 }
 
 /**
- * Creates `Rects` for the viewport as well as the DOM container and SVG target elements
+ * Creates `Rects` for the viewport as well as the DOM container and DOM target elements
  *
  * @param {Element} container
- * @param {SVGElement} target
+ * @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)
   }
 }
 
 /**
- * Calculates the right-most boundary `x` coordinate of the target in the container
+ * Destructures the `left` field from a `Rect`
  *
- * The range for target `x` is from left-most 0 to right-most boundary, inclusive
+ * @param {CenterCenterRect} rect
+ * @returns {number}
+ */
+export function getRectLeft ({ left }) {
+  return left
+}
+
+/**
+ * Destructures the `top` field from a `Rect`
  *
- * @param {CenterCenterRects} rects
+ * @param {CenterCenterRect} rect
  * @returns {number}
  */
-export function calculateBoundaryX (rects) {
-  const containerW = getRectWidth(getContainerRect(rects))
-  const targetW = getRectWidth(getTargetRect(rects))
+export function getRectTop ({ top }) {
+  return top
+}
 
-  return (containerW - targetW)
+/**
+ * Destructures the `width` field from a `Rect`
+ *
+ * @param {CenterCenterRect} rect
+ * @returns {number}
+ */
+export function getRectWidth ({ width }) {
+  return width
 }
 
 /**
- * Calculates the bottom-most boundary `y` coordinate of the target in the container
+ * Destructures the `height` field from a `Rect`
  *
- * The range for target `y` is from top-most 0 to bottom-most boundary, inclusive
+ * @param {CenterCenterRect} rect
+ * @returns {number}
+ */
+export function getRectHeight ({ height }) {
+  return height
+}
+
+/**
+ * Destructures the viewport `Rect`
  *
  * @param {CenterCenterRects} rects
- * @returns {number}
+ * @returns {CenterCenterRect}
  */
-export function calculateBoundaryY (rects) {
-  const containerH = getRectHeight(getContainerRect(rects))
-  const targetH = getRectHeight(getTargetRect(rects))
+export function getViewportRect ({ viewport }) {
+  return viewport
+}
 
-  return (containerH - targetH)
+/**
+ * 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
 }
 
 /**
@@ -223,6 +223,36 @@ export function calculateRectY ({ top: t, height: h }) {
   return (t + (h / 2))
 }
 
+/**
+ * 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} rects
+ * @returns {number}
+ */
+export function calculateBoundaryX (rects) {
+  const containerW = getRectWidth(getContainerRect(rects))
+  const targetW = getRectWidth(getTargetRect(rects))
+
+  return (containerW - targetW)
+}
+
+/**
+ * Calculates the bottom-most boundary `y` coordinate of the target in the container
+ *
+ * The range for target `y` is from top-most 0 to bottom-most boundary, inclusive
+ *
+ * @param {CenterCenterRects} rects
+ * @returns {number}
+ */
+export function calculateBoundaryY (rects) {
+  const containerH = getRectHeight(getContainerRect(rects))
+  const targetH = getRectHeight(getTargetRect(rects))
+
+  return (containerH - targetH)
+}
+
 /**
  * Calculates the `x` coordinate of the container
  *
@@ -296,101 +326,3 @@ export function calculateTargetY (rects) {
 
   return (y - (h / 2))
 }
-
-/**
- * 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 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)
-  )
-}
-
-/**
- * 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/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/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
-}