@svgedit/svgcanvas 7.2.6 → 7.4.1

package/CHANGES.md

@@ -1,5 +1,11 @@
 # svgcanvas CHANGES
 
+
+## 7.2.7
+- Prefer href to xlink href (#1059)
+- Fix group rotation (#1058)
+- Fixed a bug where a rotated text or image did not translate correctly. (#1055) 
+
 ## 7.2.5
 - update dependencies
 

package/common/browser.js

@@ -8,60 +8,127 @@
 
 const NSSVG = 'http://www.w3.org/2000/svg'
 
-const { userAgent } = navigator
-
-// Note: Browser sniffing should only be used if no other detection method is possible
-const isWebkit_ = userAgent.includes('AppleWebKit')
-const isGecko_ = userAgent.includes('Gecko/')
-const isChrome_ = userAgent.includes('Chrome/')
-const isMac_ = userAgent.includes('Macintosh')
-
-// text character positioning (for IE9 and now Chrome)
-const supportsGoodTextCharPos_ = (function () {
-  const svgroot = document.createElementNS(NSSVG, 'svg')
-  const svgContent = document.createElementNS(NSSVG, 'svg')
-  document.documentElement.append(svgroot)
-  svgContent.setAttribute('x', 5)
-  svgroot.append(svgContent)
-  const text = document.createElementNS(NSSVG, 'text')
-  text.textContent = 'a'
-  svgContent.append(text)
-  try { // Chrome now fails here
-    const pos = text.getStartPositionOfChar(0).x
-    return (pos === 0)
-  } catch (err) {
-    return false
-  } finally {
-    svgroot.remove()
+/**
+ * Browser capabilities and detection object.
+ * Uses modern feature detection and lazy evaluation patterns.
+ */
+class BrowserDetector {
+  #userAgent = navigator.userAgent
+  #cachedResults = new Map()
+
+  /**
+   * Detects if the browser is WebKit-based
+   * @returns {boolean}
+   */
+  get isWebkit () {
+    if (!this.#cachedResults.has('isWebkit')) {
+      this.#cachedResults.set('isWebkit', this.#userAgent.includes('AppleWebKit'))
+    }
+    return this.#cachedResults.get('isWebkit')
+  }
+
+  /**
+   * Detects if the browser is Gecko-based
+   * @returns {boolean}
+   */
+  get isGecko () {
+    if (!this.#cachedResults.has('isGecko')) {
+      this.#cachedResults.set('isGecko', this.#userAgent.includes('Gecko/'))
+    }
+    return this.#cachedResults.get('isGecko')
+  }
+
+  /**
+   * Detects if the browser is Chrome
+   * @returns {boolean}
+   */
+  get isChrome () {
+    if (!this.#cachedResults.has('isChrome')) {
+      this.#cachedResults.set('isChrome', this.#userAgent.includes('Chrome/'))
+    }
+    return this.#cachedResults.get('isChrome')
+  }
+
+  /**
+   * Detects if the platform is macOS
+   * @returns {boolean}
+   */
+  get isMac () {
+    if (!this.#cachedResults.has('isMac')) {
+      this.#cachedResults.set('isMac', this.#userAgent.includes('Macintosh'))
+    }
+    return this.#cachedResults.get('isMac')
+  }
+
+  /**
+   * Tests if the browser supports accurate text character positioning
+   * @returns {boolean}
+   */
+  get supportsGoodTextCharPos () {
+    if (!this.#cachedResults.has('supportsGoodTextCharPos')) {
+      this.#cachedResults.set('supportsGoodTextCharPos', this.#testTextCharPos())
+    }
+    return this.#cachedResults.get('supportsGoodTextCharPos')
   }
-}())
 
-// Public API
+  /**
+   * Private method to test text character positioning support
+   * @returns {boolean}
+   */
+  #testTextCharPos () {
+    const svgroot = document.createElementNS(NSSVG, 'svg')
+    const svgContent = document.createElementNS(NSSVG, 'svg')
+    document.documentElement.append(svgroot)
+    svgContent.setAttribute('x', 5)
+    svgroot.append(svgContent)
+    const text = document.createElementNS(NSSVG, 'text')
+    text.textContent = 'a'
+    svgContent.append(text)
 
+    try {
+      const pos = text.getStartPositionOfChar(0).x
+      return pos === 0
+    } catch (err) {
+      return false
+    } finally {
+      svgroot.remove()
+    }
+  }
+}
+
+// Create singleton instance
+const browser = new BrowserDetector()
+
+// Export as functions for backward compatibility
 /**
  * @function module:browser.isWebkit
  * @returns {boolean}
-*/
-export const isWebkit = () => isWebkit_
+ */
+export const isWebkit = () => browser.isWebkit
+
 /**
  * @function module:browser.isGecko
  * @returns {boolean}
-*/
-export const isGecko = () => isGecko_
+ */
+export const isGecko = () => browser.isGecko
+
 /**
  * @function module:browser.isChrome
  * @returns {boolean}
-*/
-export const isChrome = () => isChrome_
+ */
+export const isChrome = () => browser.isChrome
 
 /**
  * @function module:browser.isMac
  * @returns {boolean}
-*/
-export const isMac = () => isMac_
+ */
+export const isMac = () => browser.isMac
 
 /**
  * @function module:browser.supportsGoodTextCharPos
  * @returns {boolean}
-*/
-export const supportsGoodTextCharPos = () => supportsGoodTextCharPos_
+ */
+export const supportsGoodTextCharPos = () => browser.supportsGoodTextCharPos
+
+// Export browser instance for direct access
+export default browser

package/common/logger.js

@@ -0,0 +1,151 @@
+/**
+ * Centralized logging utility for SVGCanvas.
+ * Provides configurable log levels and the ability to disable logging in production.
+ * @module logger
+ * @license MIT
+ */
+
+/**
+ * Log levels in order of severity
+ * @enum {number}
+ */
+export const LogLevel = {
+  NONE: 0,
+  ERROR: 1,
+  WARN: 2,
+  INFO: 3,
+  DEBUG: 4
+}
+
+/**
+ * Logger configuration
+ * @type {Object}
+ */
+const config = {
+  currentLevel: LogLevel.WARN,
+  enabled: true,
+  prefix: '[SVGCanvas]'
+}
+
+/**
+ * Set the logging level
+ * @param {LogLevel} level - The log level to set
+ * @returns {void}
+ */
+export const setLogLevel = (level) => {
+  if (Object.values(LogLevel).includes(level)) {
+    config.currentLevel = level
+  }
+}
+
+/**
+ * Enable or disable logging
+ * @param {boolean} enabled - Whether logging should be enabled
+ * @returns {void}
+ */
+export const setLoggingEnabled = (enabled) => {
+  config.enabled = Boolean(enabled)
+}
+
+/**
+ * Set the log prefix
+ * @param {string} prefix - The prefix to use for log messages
+ * @returns {void}
+ */
+export const setLogPrefix = (prefix) => {
+  config.prefix = String(prefix)
+}
+
+/**
+ * Format a log message with prefix and context
+ * @param {string} message - The log message
+ * @param {string} [context=''] - Optional context information
+ * @returns {string} Formatted message
+ */
+const formatMessage = (message, context = '') => {
+  const contextStr = context ? ` [${context}]` : ''
+  return `${config.prefix}${contextStr} ${message}`
+}
+
+/**
+ * Log an error message
+ * @param {string} message - The error message
+ * @param {Error|any} [error] - Optional error object or additional data
+ * @param {string} [context=''] - Optional context (e.g., module name)
+ * @returns {void}
+ */
+export const error = (message, error, context = '') => {
+  if (!config.enabled || config.currentLevel < LogLevel.ERROR) return
+
+  console.error(formatMessage(message, context))
+  if (error) {
+    console.error(error)
+  }
+}
+
+/**
+ * Log a warning message
+ * @param {string} message - The warning message
+ * @param {any} [data] - Optional additional data
+ * @param {string} [context=''] - Optional context (e.g., module name)
+ * @returns {void}
+ */
+export const warn = (message, data, context = '') => {
+  if (!config.enabled || config.currentLevel < LogLevel.WARN) return
+
+  console.warn(formatMessage(message, context))
+  if (data !== undefined) {
+    console.warn(data)
+  }
+}
+
+/**
+ * Log an info message
+ * @param {string} message - The info message
+ * @param {any} [data] - Optional additional data
+ * @param {string} [context=''] - Optional context (e.g., module name)
+ * @returns {void}
+ */
+export const info = (message, data, context = '') => {
+  if (!config.enabled || config.currentLevel < LogLevel.INFO) return
+
+  console.info(formatMessage(message, context))
+  if (data !== undefined) {
+    console.info(data)
+  }
+}
+
+/**
+ * Log a debug message
+ * @param {string} message - The debug message
+ * @param {any} [data] - Optional additional data
+ * @param {string} [context=''] - Optional context (e.g., module name)
+ * @returns {void}
+ */
+export const debug = (message, data, context = '') => {
+  if (!config.enabled || config.currentLevel < LogLevel.DEBUG) return
+
+  console.debug(formatMessage(message, context))
+  if (data !== undefined) {
+    console.debug(data)
+  }
+}
+
+/**
+ * Get current logger configuration
+ * @returns {Object} Current configuration
+ */
+export const getConfig = () => ({ ...config })
+
+// Default export as namespace
+export default {
+  LogLevel,
+  setLogLevel,
+  setLoggingEnabled,
+  setLogPrefix,
+  error,
+  warn,
+  info,
+  debug,
+  getConfig
+}

package/common/util.js

@@ -2,197 +2,138 @@
  * @param {any} obj
  * @returns {any}
  */
-export function findPos (obj) {
-  let curleft = 0
-  let curtop = 0
-  if (obj.offsetParent) {
+export const findPos = (obj) => {
+  let left = 0
+  let top = 0
+
+  if (obj?.offsetParent) {
+    let current = obj
     do {
-      curleft += obj.offsetLeft
-      curtop += obj.offsetTop
-    // eslint-disable-next-line no-cond-assign
-    } while (obj = obj.offsetParent)
-    return { left: curleft, top: curtop }
+      left += current.offsetLeft
+      top += current.offsetTop
+      current = current.offsetParent
+    } while (current)
   }
-  return { left: curleft, top: curtop }
-}
 
-export function isObject (item) {
-  return (item && typeof item === 'object' && !Array.isArray(item))
+  return { left, top }
 }
 
-export function mergeDeep (target, source) {
-  const output = Object.assign({}, target)
+export const isObject = (item) =>
+  item && typeof item === 'object' && !Array.isArray(item)
+
+export const mergeDeep = (target, source) => {
+  const output = { ...target }
+
   if (isObject(target) && isObject(source)) {
-    Object.keys(source).forEach((key) => {
+    for (const key of Object.keys(source)) {
       if (isObject(source[key])) {
-        if (!(key in target)) { Object.assign(output, { [key]: source[key] }) } else { output[key] = mergeDeep(target[key], source[key]) }
+        output[key] = key in target
+          ? mergeDeep(target[key], source[key])
+          : source[key]
       } else {
-        Object.assign(output, { [key]: source[key] })
+        output[key] = source[key]
       }
-    })
+    }
   }
+
   return output
 }
 
 /**
  * Get the closest matching element up the DOM tree.
+ * Uses native Element.closest() when possible for better performance.
  * @param  {Element} elem     Starting element
  * @param  {String}  selector Selector to match against (class, ID, data attribute, or tag)
- * @return {Boolean|Element}  Returns null if not match found
+ * @return {Element|null}     Returns null if no match found
  */
-export function getClosest (elem, selector) {
-  const firstChar = selector.charAt(0)
-  const supports = 'classList' in document.documentElement
-  let attribute; let value
-  // If selector is a data attribute, split attribute from value
-  if (firstChar === '[') {
-    selector = selector.substr(1, selector.length - 2)
-    attribute = selector.split('=')
-    if (attribute.length > 1) {
-      value = true
-      attribute[1] = attribute[1].replace(/"/g, '').replace(/'/g, '')
+export const getClosest = (elem, selector) => {
+  // Use native closest for standard CSS selectors
+  if (elem?.closest) {
+    try {
+      return elem.closest(selector)
+    } catch (e) {
+      // Fallback for invalid selectors
     }
   }
-  // Get closest match
-  for (; elem && elem !== document && elem.nodeType === 1; elem = elem.parentNode) {
-    // If selector is a class
-    if (firstChar === '.') {
-      if (supports) {
-        if (elem.classList.contains(selector.substr(1))) {
-          return elem
-        }
-      } else {
-        if (new RegExp('(^|\\s)' + selector.substr(1) + '(\\s|$)').test(elem.className)) {
-          return elem
-        }
-      }
-    }
-    // If selector is an ID
-    if (firstChar === '#') {
-      if (elem.id === selector.substr(1)) {
-        return elem
-      }
-    }
-    // If selector is a data attribute
-    if (firstChar === '[') {
-      if (elem.hasAttribute(attribute[0])) {
-        if (value) {
-          if (elem.getAttribute(attribute[0]) === attribute[1]) {
-            return elem
-          }
-        } else {
-          return elem
-        }
-      }
-    }
-    // If selector is a tag
-    if (elem.tagName.toLowerCase() === selector) {
-      return elem
-    }
+
+  // Fallback implementation for edge cases
+  const selectorMatcher = {
+    '.': (el, sel) => el.classList?.contains(sel.slice(1)),
+    '#': (el, sel) => el.id === sel.slice(1),
+    '[': (el, sel) => {
+      const [attr, val] = sel.slice(1, -1).split('=').map(s => s.replace(/["']/g, ''))
+      return val ? el.getAttribute(attr) === val : el.hasAttribute(attr)
+    },
+    tag: (el, sel) => el.tagName?.toLowerCase() === sel
   }
+
+  const firstChar = selector.charAt(0)
+  const matcher = selectorMatcher[firstChar] || selectorMatcher.tag
+
+  for (let current = elem; current && current !== document && current.nodeType === 1; current = current.parentNode) {
+    if (matcher(current, selector)) return current
+  }
+
   return null
 }
 
 /**
- * Get all DOM element up the tree that contain a class, ID, or data attribute
+ * Get all DOM elements up the tree that match a selector
  * @param  {Node} elem The base element
  * @param  {String} selector The class, id, data attribute, or tag to look for
- * @return {Array} Null if no match
+ * @return {Array|null} Array of matching elements or null if no match
  */
-export function getParents (elem, selector) {
+export const getParents = (elem, selector) => {
   const parents = []
+  const matchers = {
+    '.': (el, sel) => el.classList?.contains(sel.slice(1)),
+    '#': (el, sel) => el.id === sel.slice(1),
+    '[': (el, sel) => el.hasAttribute(sel.slice(1, -1)),
+    tag: (el, sel) => el.tagName?.toLowerCase() === sel
+  }
+
   const firstChar = selector?.charAt(0)
-  // Get matches
-  for (; elem && elem !== document; elem = elem.parentNode) {
-    if (selector) {
-      // If selector is a class
-      if (firstChar === '.') {
-        if (elem.classList.contains(selector.substr(1))) {
-          parents.push(elem)
-        }
-      }
-      // If selector is an ID
-      if (firstChar === '#') {
-        if (elem.id === selector.substr(1)) {
-          parents.push(elem)
-        }
-      }
-      // If selector is a data attribute
-      if (firstChar === '[') {
-        if (elem.hasAttribute(selector.substr(1, selector.length - 1))) {
-          parents.push(elem)
-        }
-      }
-      // If selector is a tag
-      if (elem.tagName.toLowerCase() === selector) {
-        parents.push(elem)
-      }
-    } else {
-      parents.push(elem)
+  const matcher = selector ? (matchers[firstChar] || matchers.tag) : null
+
+  for (let current = elem; current && current !== document; current = current.parentNode) {
+    if (!selector || matcher(current, selector)) {
+      parents.push(current)
     }
   }
-  // Return parents if any exist
-  return parents.length ? parents : null
+
+  return parents.length > 0 ? parents : null
 }
 
-export function getParentsUntil (elem, parent, selector) {
+export const getParentsUntil = (elem, parent, selector) => {
   const parents = []
-  const parentType = parent?.charAt(0)
-  const selectorType = selector?.selector.charAt(0)
-  // Get matches
-  for (; elem && elem !== document; elem = elem.parentNode) {
-    // Check if parent has been reached
-    if (parent) {
-      // If parent is a class
-      if (parentType === '.') {
-        if (elem.classList.contains(parent.substr(1))) {
-          break
-        }
-      }
-      // If parent is an ID
-      if (parentType === '#') {
-        if (elem.id === parent.substr(1)) {
-          break
-        }
-      }
-      // If parent is a data attribute
-      if (parentType === '[') {
-        if (elem.hasAttribute(parent.substr(1, parent.length - 1))) {
-          break
-        }
-      }
-      // If parent is a tag
-      if (elem.tagName.toLowerCase() === parent) {
-        break
-      }
+
+  const matchers = {
+    '.': (el, sel) => el.classList?.contains(sel.slice(1)),
+    '#': (el, sel) => el.id === sel.slice(1),
+    '[': (el, sel) => el.hasAttribute(sel.slice(1, -1)),
+    tag: (el, sel) => el.tagName?.toLowerCase() === sel
+  }
+
+  const getMatcherFn = (selectorStr) => {
+    if (!selectorStr) return null
+    const firstChar = selectorStr.charAt(0)
+    return matchers[firstChar] || matchers.tag
+  }
+
+  const parentMatcher = getMatcherFn(parent)
+  const selectorMatcher = getMatcherFn(selector)
+
+  for (let current = elem; current && current !== document; current = current.parentNode) {
+    // Check if we've reached the parent boundary
+    if (parent && parentMatcher?.(current, parent)) {
+      break
     }
-    if (selector) {
-      // If selector is a class
-      if (selectorType === '.') {
-        if (elem.classList.contains(selector.substr(1))) {
-          parents.push(elem)
-        }
-      }
-      // If selector is an ID
-      if (selectorType === '#') {
-        if (elem.id === selector.substr(1)) {
-          parents.push(elem)
-        }
-      }
-      // If selector is a data attribute
-      if (selectorType === '[') {
-        if (elem.hasAttribute(selector.substr(1, selector.length - 1))) {
-          parents.push(elem)
-        }
-      }
-      // If selector is a tag
-      if (elem.tagName.toLowerCase() === selector) {
-        parents.push(elem)
-      }
-    } else {
-      parents.push(elem)
+
+    // Add to results if matches selector (or no selector specified)
+    if (!selector || selectorMatcher?.(current, selector)) {
+      parents.push(current)
     }
   }
-  // Return parents if any exist
-  return parents.length ? parents : null
+
+  return parents.length > 0 ? parents : null
 }