center-center 0.0.39 → 0.0.41

package/docs/index.html

@@ -15,7 +15,7 @@
 			import debug from 'debug'
 
 			import {
-				getRects,
+				createDOMRects,
 				calculateLeft,
 				calculateTop
 			} from 'center-center'
@@ -73,7 +73,7 @@
 				log('render')
 
 				window.requestAnimationFrame(() => {
-					const rects = getRects(container, target)
+					const rects = createDOMRects(container, target)
 					const left = calculateLeft(rects)
 					const top = calculateTop(rects)
 

package/index.mjs

@@ -4,120 +4,69 @@
  * @typedef {import('.').CenterCenterRects} CenterCenterRects
  */
 
-const leftMap = new WeakMap()
-const topMap = new WeakMap()
-
 /**
- * Gets a parent element with `offsetLeft`
+ * Gets the document `scrollingElement` (or a valid alternative)
  *
- * @param {SVGElement} element
- * @returns {Element}
+ * @returns {ScrollingElement}
  */
-export function getParentElementForOffsetLeft (element) {
-  let parentElement = element.parentElement
-
-  while (!Reflect.has(parentElement, 'offsetLeft')) {
-    parentElement = parentElement.parentElement
+export function getScrollingElement () {
+  if (Reflect.has(document, 'scrollingElement')) {
+    const scrollingElement = Reflect.get(document, 'scrollingElement')
+    if (scrollingElement) return scrollingElement
   }
 
-  return parentElement
+  return {
+    scrollLeft: 0,
+    scrollTop: 0
+  }
 }
 
 /**
- * Gets a parent element with `offsetTop`
+ * Destructures the `left` field from a `Rect`
  *
- * @param {SVGElement} element
- * @returns {Element}
+ * @param {CenterCenterRect}
+ * @returns {number}
  */
-export function getParentElementForOffsetTop (element) {
-  let parentElement = element.parentElement
-
-  while (!Reflect.has(parentElement, 'offsetTop')) {
-    parentElement = parentElement.parentElement
-  }
-
-  return parentElement
+export function getRectLeft ({ left }) {
+  return left
 }
 
 /**
- * Gets the `offsetLeft` from the element or calculates the equivalent with
- * DOMRect `left` and the nearest `offsetLeft` from a parent
+ * Destructures the `top` field from a `Rect`
  *
- * @param {Element | SVGElement} element
+ * @param {CenterCenterRect}
  * @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
-  )
+export function getRectTop ({ top }) {
+  return top
 }
 
 /**
- * Gets the `offsetTop` from the element or calculates the equivalent with
- * DOMRect `top` and the nearest `offsetTop` from a parent
+ * Destructures the `width` field from a `Rect`
  *
- * @param {Element | SVGElement} element
+ * @param {CenterCenterRect}
  * @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
-  )
+export function getRectWidth ({ width }) {
+  return width
 }
 
 /**
- * Gets the document `scrollingElement` (or a valid alternative)
+ * Destructures the `height` field from a `Rect`
  *
- * @returns {ScrollingElement}
+ * @param {CenterCenterRect}
+ * @returns {number}
  */
-export function getScrollingElement () {
-  if (Reflect.has(document, 'scrollingElement')) {
-    const scrollingElement = Reflect.get(document, 'scrollingElement')
-    if (scrollingElement) return scrollingElement
-  }
-
-  return {
-    scrollLeft: 0,
-    scrollTop: 0
-  }
+export function getRectHeight ({ height }) {
+  return height
 }
 
 /**
- * Gets a `Rect` for the viewport
+ * Creates a `Rect` for the viewport
  *
  * @returns {CenterCenterRect}
  */
-export function getViewportRect () {
+export function createViewportRect () {
   const {
     innerWidth: width,
     innerHeight: height
@@ -139,12 +88,12 @@ export function getViewportRect () {
 }
 
 /**
- * Gets a `Rect` for an SVG element
+ * Creates a `Rect` for an SVG element
  *
- * @param {Element} element
+ * @param {SVGElement} element
  * @returns {CenterCenterRect}
 */
-export function getSVGElementRect (element) {
+export function createSVGElementRect (element) {
   const {
     x: left,
     y: top,
@@ -163,12 +112,12 @@ export function getSVGElementRect (element) {
 }
 
 /**
- * Gets a `Rect` for a DOM element
+ * Creates a `Rect` for a DOM element
  *
  * @param {Element} element
  * @returns {CenterCenterRect}
 */
-export function getDOMElementRect (element) {
+export function createDOMElementRect (element) {
   const {
     scrollLeft,
     scrollTop
@@ -195,118 +144,253 @@ export function getDOMElementRect (element) {
 }
 
 /**
- * Gets a `Rect` for a DOM element
- *
- * @param {Element} element
- * @returns {CenterCenterRect}
-*/
-export function getElementRect (element) {
-  return (
-    getDOMElementRect(element)
-  )
-}
-
-/**
- * Gets `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 getSVGRects (container, target) {
+export function createSVGRects (container, target) {
   return {
-    viewport: getViewportRect(),
-    container: getDOMElementRect(container),
-    target: getSVGElementRect(target)
+    viewport: createViewportRect(),
+    container: createDOMElementRect(container),
+    target: createSVGElementRect(target)
   }
 }
 
 /**
- * Gets `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 DOM target elements
  *
  * @param {Element} container
  * @param {Element} target
  * @returns {CenterCenterRects}
  */
-export function getDOMRects (container, target) {
+export function createDOMRects (container, target) {
   return {
-    viewport: getViewportRect(),
-    container: getDOMElementRect(container),
-    target: getDOMElementRect(target)
+    viewport: createViewportRect(),
+    container: createDOMElementRect(container),
+    target: createDOMElementRect(target)
   }
 }
 
 /**
- * Gets `Rects` for the viewport as well as the container and target elements
+ * Calculates the right-most boundary `x` coordinate of the target in the container
  *
- * @param {Element} container
- * @param {Element} target
- * @returns {CenterCenterRects}
+ * The range for target `x` is from left-most 0 to right-most boundary, inclusive
+ *
+ * @param {CenterCenterRects} rects
+ * @returns {number}
  */
-export function getRects (container, target) {
-  return (
-    getDOMRects(container, target)
-  )
+export function calculateBoundaryX (rects) {
+  const containerW = getRectWidth(getContainerRect(rects))
+  const targetW = getRectWidth(getTargetRect(rects))
+
+  return (containerW - targetW)
 }
 
 /**
- * Calculates the target `left` position
+ * 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 a `Rect`
  *
- * @param {CenterCenterRects}
+ * @param {CenterCenterRect}
  * @returns {number}
  */
-export function calculateLeft ({
+export function calculateRectX ({ left: l, width: w }) {
+  return (l + (w / 2))
+}
+
+/**
+ * Calculates the `y` coordinate of a `Rect`
+ *
+ * @param {CenterCenterRect}
+ * @returns {number}
+ */
+export function calculateRectY ({ top: t, height: h }) {
+  return (t + (h / 2))
+}
+
+/**
+ * Calculates the `x` coordinate of the container
+ *
+ * @param {CenterCenterRects} rects
+ * @returns {number}
+ */
+export function calculateContainerX ({
   viewport: {
     left: viewportL,
     right: viewportR
   },
   container: {
     left: containerL,
-    width: containerW,
     right: containerR
-  },
-  target: {
-    width: targetW
   }
 }) {
   const l = Math.max(viewportL, containerL)
   const r = Math.min(viewportR, containerR)
   const w = (r - l)
   const x = (l - containerL)
-  const boundary = (containerW - targetW)
 
-  return (
-    Math.max(0, Math.min(boundary, x + ((w / 2) - (targetW / 2))))
-  )
+  return (x + (w / 2))
 }
 
 /**
- * Calculates the target `top` position
+ * Calculates the `y` coordinate of the container
  *
- * @param {CenterCenterRects}
+ * @param {CenterCenterRects} rects
  * @returns {number}
  */
-export function calculateTop ({
+export function calculateContainerY ({
   viewport: {
     top: viewportT,
     bottom: viewportB
   },
   container: {
     top: containerT,
-    height: containerH,
     bottom: containerB
-  },
-  target: {
-    height: targetH
   }
 }) {
   const t = Math.max(viewportT, containerT)
   const b = Math.min(viewportB, containerB)
   const h = (b - t)
   const y = (t - containerT)
-  const boundary = (containerH - targetH)
+
+  return (y + (h / 2))
+}
+
+/**
+ * Calculates the `x` coordinate of the target
+ *
+ * @param {CenterCenterRects} rects
+ * @returns {number}
+ */
+export function calculateTargetX (rects) {
+  const x = calculateContainerX(rects)
+  const w = getRectWidth(getTargetRect(rects))
+
+  return (x - (w / 2))
+}
+
+/**
+ * Calculates the `y` coordinate of the target
+ *
+ * @param {CenterCenterRects} rects
+ * @returns {number}
+ */
+export function calculateTargetY (rects) {
+  const y = calculateContainerY(rects)
+  const h = getRectHeight(getTargetRect(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 + ((h / 2) - (targetH / 2))))
+    Math.max(0, Math.min(boundary, y))
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "center-center",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "description": "Position an element at the center center of a container",
   "main": "./index.mjs",
   "type": "module",
@@ -49,7 +49,7 @@
     "mocha": "^10.3.0",
     "nodemon": "^3.1.0",
     "npm-run-all": "^4.1.5",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.2"
   },
   "imports": {
     "#center-center": "./index.mjs"

package/src/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
+}