center-center 0.0.39 → 0.0.40

package/docs/index.html

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

package/index.mjs

@@ -113,11 +113,51 @@ export function getScrollingElement () {
 }
 
 /**
- * Gets a `Rect` for the viewport
+ * 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
  *
  * @returns {CenterCenterRect}
  */
-export function getViewportRect () {
+export function createViewportRect () {
   const {
     innerWidth: width,
     innerHeight: height
@@ -139,12 +179,12 @@ export function getViewportRect () {
 }
 
 /**
- * Gets a `Rect` for an SVG element
+ * Creates a `Rect` for an SVG element
  *
  * @param {Element} element
  * @returns {CenterCenterRect}
 */
-export function getSVGElementRect (element) {
+export function createSVGElementRect (element) {
   const {
     x: left,
     y: top,
@@ -163,12 +203,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 +235,216 @@ export function getDOMElementRect (element) {
 }
 
 /**
- * Gets a `Rect` for a DOM element
+ * Creates a `Rect` for a DOM element
  *
  * @param {Element} element
  * @returns {CenterCenterRect}
 */
-export function getElementRect (element) {
+export function createElementRect (element) {
   return (
-    getDOMElementRect(element)
+    createDOMElementRect(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 DOM target elements
  *
  * @param {Element} container
  * @param {Element} 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
+ * Creates `Rects` for the viewport as well as the container and target elements
  *
  * @param {Element} container
  * @param {Element} target
  * @returns {CenterCenterRects}
  */
-export function getRects (container, target) {
+export function createRects (container, target) {
   return (
-    getDOMRects(container, target)
+    createDOMRects(container, target)
   )
 }
 
 /**
- * Calculates the target `left` position
+ * Calculates the boundary `x` coordinate of the target in the container
+ *
+ * @param {CenterCenterRects}
+ * @returns {number}
+ */
+export function calculateBoundaryX (rects) {
+  const containerW = getRectWidth(getContainerRect(rects))
+  const targetW = getRectWidth(getTargetRect(rects))
+
+  return (containerW - targetW)
+}
+
+/**
+ * Calculates the boundary `y` coordinate of the target in the container
+ *
+ * @param {CenterCenterRects}
+ * @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
  *
  * @param {CenterCenterRects}
  * @returns {number}
  */
-export function calculateLeft ({
+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}
  * @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}
+ * @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}
+ * @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}
+ * @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 + ((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.40",
   "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"