svgedit/packages/svgcanvas/core/math.js

/**
 * Mathematical utilities.
 * @module math
 * @license MIT
 *
 * ©2010 Alexis Deveria, ©2010 Jeff Schiller
 */

/**
 * @typedef {Object} AngleCoord45
 * @property {number} x - The angle-snapped x value
 * @property {number} y - The angle-snapped y value
 * @property {number} a - The angle (in radians) at which to snap
 */

/**
 * @typedef {Object} XYObject
 * @property {number} x
 * @property {number} y
 */

import { NS } from './namespaces.js'

// Constants
const NEAR_ZERO = 1e-10

// Create a throwaway SVG element for matrix operations
const svg = document.createElementNS(NS.SVG, 'svg')

/**
 * Transforms a point by a given matrix without DOM calls.
 * @function transformPoint
 * @param {number} x - The x coordinate
 * @param {number} y - The y coordinate
 * @param {SVGMatrix} m - The transformation matrix
 * @returns {XYObject} The transformed point
 */
export const transformPoint = (x, y, m) => ({
  x: m.a * x + m.c * y + m.e,
  y: m.b * x + m.d * y + m.f
})

/**
 * Gets the transform list (baseVal) from an element if it exists.
 * @function getTransformList
 * @param {Element} elem - An SVG element or element with a transform list
 * @returns {SVGTransformList|undefined} The transform list, if any
 */
export const getTransformList = elem => {
  if (elem.transform?.baseVal) {
    return elem.transform.baseVal
  }
  if (elem.gradientTransform?.baseVal) {
    return elem.gradientTransform.baseVal
  }
  if (elem.patternTransform?.baseVal) {
    return elem.patternTransform.baseVal
  }
  console.warn('No transform list found. Check browser compatibility.', elem)
}

/**
 * Checks if a matrix is the identity matrix.
 * @function isIdentity
 * @param {SVGMatrix} m - The matrix to check
 * @returns {boolean} True if it's an identity matrix (1,0,0,1,0,0)
 */
export const isIdentity = m =>
  m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1 && m.e === 0 && m.f === 0

/**
 * Multiplies multiple matrices together (m1 * m2 * ...).
 * Near-zero values are rounded to zero.
 * @function matrixMultiply
 * @param {...SVGMatrix} args - The matrices to multiply
 * @returns {SVGMatrix} The resulting matrix
 */
export const matrixMultiply = (...args) => {
  // If no matrices are given, return an identity matrix
  if (args.length === 0) {
    return svg.createSVGMatrix()
  }

  const m = args.reduceRight((prev, curr) => curr.multiply(prev))

  // Round near-zero values to zero
  if (Math.abs(m.a) < NEAR_ZERO) m.a = 0
  if (Math.abs(m.b) < NEAR_ZERO) m.b = 0
  if (Math.abs(m.c) < NEAR_ZERO) m.c = 0
  if (Math.abs(m.d) < NEAR_ZERO) m.d = 0
  if (Math.abs(m.e) < NEAR_ZERO) m.e = 0
  if (Math.abs(m.f) < NEAR_ZERO) m.f = 0

  return m
}

/**
 * Checks if a transform list includes a non-identity matrix transform.
 * @function hasMatrixTransform
 * @param {SVGTransformList} [tlist] - The transform list to check
 * @returns {boolean} True if a matrix transform is found
 */
export const hasMatrixTransform = tlist => {
  if (!tlist) return false
  for (let i = 0; i < tlist.numberOfItems; i++) {
    const xform = tlist.getItem(i)
    if (
      xform.type === SVGTransform.SVG_TRANSFORM_MATRIX &&
      !isIdentity(xform.matrix)
    ) {
      return true
    }
  }
  return false
}

/**
 * @typedef {Object} TransformedBox
 * @property {XYObject} tl - Top-left coordinate
 * @property {XYObject} tr - Top-right coordinate
 * @property {XYObject} bl - Bottom-left coordinate
 * @property {XYObject} br - Bottom-right coordinate
 * @property {Object} aabox
 * @property {number} aabox.x - Axis-aligned x
 * @property {number} aabox.y - Axis-aligned y
 * @property {number} aabox.width - Axis-aligned width
 * @property {number} aabox.height - Axis-aligned height
 */

/**
 * Transforms a rectangular box using a given matrix.
 * @function transformBox
 * @param {number} l - Left coordinate
 * @param {number} t - Top coordinate
 * @param {number} w - Width
 * @param {number} h - Height
 * @param {SVGMatrix} m - Transformation matrix
 * @returns {TransformedBox} The transformed box information
 */
export const transformBox = (l, t, w, h, m) => {
  const tl = transformPoint(l, t, m)
  const tr = transformPoint(l + w, t, m)
  const bl = transformPoint(l, t + h, m)
  const br = transformPoint(l + w, t + h, m)

  const minx = Math.min(tl.x, tr.x, bl.x, br.x)
  const maxx = Math.max(tl.x, tr.x, bl.x, br.x)
  const miny = Math.min(tl.y, tr.y, bl.y, br.y)
  const maxy = Math.max(tl.y, tr.y, bl.y, br.y)

  return {
    tl,
    tr,
    bl,
    br,
    aabox: {
      x: minx,
      y: miny,
      width: maxx - minx,
      height: maxy - miny
    }
  }
}

/**
 * Consolidates a transform list into a single matrix transform without modifying the original list.
 * @function transformListToTransform
 * @param {SVGTransformList} tlist - The transform list
 * @param {number} [min=0] - Optional start index
 * @param {number} [max] - Optional end index, defaults to tlist length-1
 * @returns {SVGTransform} A single transform from the combined matrices
 */
export const transformListToTransform = (tlist, min = 0, max = null) => {
  if (!tlist) {
    return svg.createSVGTransformFromMatrix(svg.createSVGMatrix())
  }

  const start = Number.parseInt(min, 10)
  const end = Number.parseInt(max ?? tlist.numberOfItems - 1, 10)
  const low = Math.min(start, end)
  const high = Math.max(start, end)

  let combinedMatrix = svg.createSVGMatrix()
  for (let i = low; i <= high; i++) {
    // If out of range, use identity
    const currentMatrix =
      i >= 0 && i < tlist.numberOfItems
        ? tlist.getItem(i).matrix
        : svg.createSVGMatrix()
    combinedMatrix = matrixMultiply(combinedMatrix, currentMatrix)
  }

  return svg.createSVGTransformFromMatrix(combinedMatrix)
}

/**
 * Gets the matrix of a given element's transform list.
 * @function getMatrix
 * @param {Element} elem - The element to check
 * @returns {SVGMatrix} The transformation matrix
 */
export const getMatrix = elem => {
  const tlist = getTransformList(elem)
  return transformListToTransform(tlist).matrix
}

/**
 * Returns a coordinate snapped to the nearest 45-degree angle.
 * @function snapToAngle
 * @param {number} x1 - First point's x
 * @param {number} y1 - First point's y
 * @param {number} x2 - Second point's x
 * @param {number} y2 - Second point's y
 * @returns {AngleCoord45} The angle-snapped coordinates and angle
 */
export const snapToAngle = (x1, y1, x2, y2) => {
  const snap = Math.PI / 4 // 45 degrees
  const dx = x2 - x1
  const dy = y2 - y1
  const angle = Math.atan2(dy, dx)
  const dist = Math.hypot(dx, dy)
  const snapAngle = Math.round(angle / snap) * snap

  return {
    x: x1 + dist * Math.cos(snapAngle),
    y: y1 + dist * Math.sin(snapAngle),
    a: snapAngle
  }
}

/**
 * Checks if two rectangles intersect.
 * Both r1 and r2 are expected to have {x, y, width, height}.
 * @function rectsIntersect
 * @param {{x:number,y:number,width:number,height:number}} r1 - First rectangle
 * @param {{x:number,y:number,width:number,height:number}} r2 - Second rectangle
 * @returns {boolean} True if the rectangles intersect
 */
export const rectsIntersect = (r1, r2) =>
  r2.x < r1.x + r1.width &&
  r2.x + r2.width > r1.x &&
  r2.y < r1.y + r1.height &&
  r2.y + r2.height > r1.y