@svgedit/svgcanvas 7.2.6 → 7.4.1

package/core/sanitize.js

@@ -7,7 +7,8 @@
  */
 
 import { getReverseNS, NS } from './namespaces.js'
-import { getHref, setHref, getUrlFromAttr } from './utilities.js'
+import { getHref, getRefElem, setHref, getUrlFromAttr } from './utilities.js'
+import { warn } from '../common/logger.js'
 
 const REVERSE_NS = getReverseNS()
 
@@ -21,7 +22,7 @@ const REVERSE_NS = getReverseNS()
 const svgGenericWhiteList = ['class', 'id', 'display', 'transform', 'style']
 const svgWhiteList_ = {
   // SVG Elements
-  a: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'mask', 'opacity', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'xlink:href', 'xlink:title'],
+  a: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'href', 'mask', 'opacity', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'xlink:href', 'xlink:title'],
   circle: ['clip-path', 'clip-rule', 'cx', 'cy', 'enable-background', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'mask', 'opacity', 'r', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage'],
   clipPath: ['clipPathUnits'],
   defs: [],
@@ -36,20 +37,24 @@ const svgWhiteList_ = {
   feMergeNode: ['in'],
   feMorphology: ['in', 'operator', 'radius'],
   feOffset: ['dx', 'in', 'dy', 'result'],
-  filter: ['color-interpolation-filters', 'filterRes', 'filterUnits', 'height', 'primitiveUnits', 'requiredFeatures', 'width', 'x', 'xlink:href', 'y'],
+  filter: ['color-interpolation-filters', 'filterRes', 'filterUnits', 'height', 'href', 'primitiveUnits', 'requiredFeatures', 'width', 'x', 'xlink:href', 'y'],
   foreignObject: ['font-size', 'height', 'opacity', 'requiredFeatures', 'width', 'x', 'y'],
   g: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'font-family', 'font-size', 'font-style', 'font-weight', 'text-anchor'],
-  image: ['clip-path', 'clip-rule', 'filter', 'height', 'mask', 'opacity', 'requiredFeatures', 'systemLanguage', 'width', 'x', 'xlink:href', 'xlink:title', 'y'],
+  image: [
+    'clip-path', 'clip-rule', 'filter', 'height', 'mask', 'opacity',
+    'preserveAspectRatio', 'requiredFeatures', 'systemLanguage', 'viewBox',
+    'width', 'x', 'href', 'xlink:href', 'xlink:title', 'y'
+  ],
   line: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'x1', 'x2', 'y1', 'y2'],
-  linearGradient: ['gradientTransform', 'gradientUnits', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'x1', 'x2', 'xlink:href', 'y1', 'y2'],
+  linearGradient: ['gradientTransform', 'gradientUnits', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'x1', 'x2', 'href', 'xlink:href', 'y1', 'y2'],
   marker: ['markerHeight', 'markerUnits', 'markerWidth', 'orient', 'preserveAspectRatio', 'refX', 'refY', 'se_type', 'systemLanguage', 'viewBox'],
   mask: ['height', 'maskContentUnits', 'maskUnits', 'width', 'x', 'y'],
   metadata: [],
   path: ['clip-path', 'clip-rule', 'd', 'enable-background', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage'],
-  pattern: ['height', 'patternContentUnits', 'patternTransform', 'patternUnits', 'requiredFeatures', 'systemLanguage', 'viewBox', 'width', 'x', 'xlink:href', 'y'],
+  pattern: ['height', 'patternContentUnits', 'patternTransform', 'patternUnits', 'requiredFeatures', 'systemLanguage', 'viewBox', 'width', 'x', 'href', 'xlink:href', 'y'],
   polygon: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'sides', 'shape', 'edge', 'point', 'starRadiusMultiplier', 'r', 'radialshift', 'r2', 'orient', 'cx', 'cy'],
   polyline: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'se:connector'],
-  radialGradient: ['cx', 'cy', 'fx', 'fy', 'gradientTransform', 'gradientUnits', 'r', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'xlink:href'],
+  radialGradient: ['cx', 'cy', 'fx', 'fy', 'gradientTransform', 'gradientUnits', 'r', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'href', 'xlink:href'],
   rect: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'height', 'mask', 'opacity', 'requiredFeatures', 'rx', 'ry', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'width', 'x', 'y'],
   stop: ['offset', 'requiredFeatures', 'stop-opacity', 'systemLanguage', 'stop-color', 'gradientUnits', 'gradientTransform'],
   style: ['type'],
@@ -57,10 +62,10 @@ const svgWhiteList_ = {
   switch: ['requiredFeatures', 'systemLanguage'],
   symbol: ['fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'opacity', 'overflow', 'preserveAspectRatio', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'viewBox', 'width', 'height'],
   text: ['clip-path', 'clip-rule', 'dominant-baseline', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'text-anchor', 'letter-spacing', 'word-spacing', 'text-decoration', 'textLength', 'lengthAdjust', 'x', 'xml:space', 'y'],
-  textPath: ['dominant-baseline', 'method', 'requiredFeatures', 'spacing', 'startOffset', 'systemLanguage', 'xlink:href'],
+  textPath: ['dominant-baseline', 'href', 'method', 'requiredFeatures', 'spacing', 'startOffset', 'systemLanguage', 'xlink:href'],
   title: [],
   tspan: ['clip-path', 'clip-rule', 'dx', 'dy', 'dominant-baseline', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'mask', 'opacity', 'requiredFeatures', 'rotate', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'text-anchor', 'textLength', 'x', 'xml:space', 'y'],
-  use: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'height', 'mask', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'width', 'x', 'xlink:href', 'y', 'overflow'],
+  use: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'height', 'href', 'mask', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'width', 'x', 'xlink:href', 'y', 'overflow'],
   // Filter Primitives
   feComponentTransfer: ['in', 'result'],
   feFuncR: ['type', 'tableValues', 'slope', 'intercept', 'amplitude', 'exponent', 'offset'],
@@ -91,7 +96,7 @@ const svgWhiteList_ = {
   mphantom: [],
   mprescripts: [],
   mroot: [],
-  mrow: ['xlink:href', 'xlink:type', 'xmlns:xlink'],
+  mrow: ['href', 'xlink:href', 'xlink:type', 'xmlns:xlink'],
   mspace: ['depth', 'height', 'width'],
   msqrt: [],
   mstyle: ['displaystyle', 'mathbackground', 'mathcolor', 'mathvariant', 'scriptlevel'],
@@ -126,22 +131,24 @@ const svgWhiteList_ = {
 }
 
 // add generic attributes to all elements of the whitelist
-Object.keys(svgWhiteList_).forEach((element) => { svgWhiteList_[element] = [...svgWhiteList_[element], ...svgGenericWhiteList] })
+for (const [element, attrs] of Object.entries(svgWhiteList_)) {
+  svgWhiteList_[element] = [...attrs, ...svgGenericWhiteList]
+}
 
 // Produce a Namespace-aware version of svgWhitelist
 const svgWhiteListNS_ = {}
-Object.entries(svgWhiteList_).forEach(([elt, atts]) => {
+for (const [elt, atts] of Object.entries(svgWhiteList_)) {
   const attNS = {}
-  Object.entries(atts).forEach(([_i, att]) => {
+  for (const att of atts) {
     if (att.includes(':')) {
-      const v = att.split(':')
-      attNS[v[1]] = NS[(v[0]).toUpperCase()]
+      const [prefix, localName] = att.split(':')
+      attNS[localName] = NS[prefix.toUpperCase()]
     } else {
       attNS[att] = att === 'xmlns' ? NS.XMLNS : null
     }
-  })
+  }
   svgWhiteListNS_[elt] = attNS
-})
+}
 
 /**
 * Sanitizes the input node and its children.
@@ -190,16 +197,20 @@ export const sanitizeSvg = (node) => {
       // our whitelist or is a namespace declaration for one of our allowed namespaces
       if (attrNsURI !== allowedAttrsNS[attrLocalName] && attrNsURI !== NS.XMLNS &&
        !(attrNsURI === NS.XMLNS && REVERSE_NS[attr.value])) {
-        // Bypassing the whitelist to allow se: and oi: prefixes
-        // We can add specific namepaces on demand for now.
-        // Is there a more appropriate way to do this?
-        if (attrName.startsWith('se:') || attrName.startsWith('oi:') || attrName.startsWith('data-')) {
-          // We should bypass the namespace aswell
-          const seAttrNS = (attrName.startsWith('se:')) ? NS.SE : ((attrName.startsWith('oi:')) ? NS.OI : null)
-          seAttrs.push([attrName, attr.value, seAttrNS])
-        } else {
-          console.warn(`sanitizeSvg: attribute ${attrName} in element ${node.nodeName} not in whitelist is removed`)
-          node.removeAttributeNS(attrNsURI, attrLocalName)
+        // Special case: allow href attribute even without namespace if it's in the whitelist
+        const isHrefAttribute = (attrLocalName === 'href' && allowedAttrs.includes('href'))
+        if (!isHrefAttribute) {
+          // Bypassing the whitelist to allow se: and oi: prefixes
+          // We can add specific namepaces on demand for now.
+          // Is there a more appropriate way to do this?
+          if (attrName.startsWith('se:') || attrName.startsWith('oi:') || attrName.startsWith('data-')) {
+            // We should bypass the namespace aswell
+            const seAttrNS = (attrName.startsWith('se:')) ? NS.SE : ((attrName.startsWith('oi:')) ? NS.OI : null)
+            seAttrs.push([attrName, attr.value, seAttrNS])
+          } else {
+            warn(`attribute ${attrName} in element ${node.nodeName} not in whitelist is removed: ${node.outerHTML}`, null, 'sanitize')
+            node.removeAttributeNS(attrNsURI, attrLocalName)
+          }
         }
       }
 
@@ -220,38 +231,64 @@ export const sanitizeSvg = (node) => {
       }
     }
 
+    // If legacy xlink:href is present but href is missing, mirror it to href for modern browsers
+    const xlinkHref = node.getAttributeNS(NS.XLINK, 'href')
+    if (xlinkHref) {
+      node.setAttribute('href', xlinkHref)
+      node.removeAttributeNS(NS.XLINK, 'href')
+    }
+
     Object.values(seAttrs).forEach(([att, val, ns]) => {
       node.setAttributeNS(ns, att, val)
     })
 
-    // for some elements that have a xlink:href, ensure the URI refers to a local element
-    // (but not for links)
+    // for some elements that have a xlink:href or href, ensure the URI refers to a local element
+    // (but not for links and other elements where external hrefs are allowed)
     const href = getHref(node)
     if (href &&
       ['filter', 'linearGradient', 'pattern',
         'radialGradient', 'textPath', 'use'].includes(node.nodeName) && href[0] !== '#') {
       // remove the attribute (but keep the element)
       setHref(node, '')
-      console.warn(`sanitizeSvg: attribute href in element ${node.nodeName} pointing to a non-local reference (${href}) is removed`)
+      warn(`attribute href in element ${node.nodeName} pointing to a non-local reference (${href}) is removed: ${node.outerHTML}`, null, 'sanitize')
       node.removeAttributeNS(NS.XLINK, 'href')
+      node.removeAttribute('href')
     }
 
     // Safari crashes on a <use> without a xlink:href, so we just remove the node here
     if (node.nodeName === 'use' && !getHref(node)) {
-      console.warn(`sanitizeSvg: element ${node.nodeName} without a xlink:href is removed`)
+      warn(`element ${node.nodeName} without a xlink:href or href is removed: ${node.outerHTML}`, null, 'sanitize')
       node.remove()
       return
     }
+    // For <use> elements with missing width/height, derive defaults from referenced viewBox/size for proper sizing/selection
+    if (node.nodeName === 'use') {
+      const ref = getRefElem(getHref(node))
+      if (ref) {
+        const refViewBox = ref.getAttribute('viewBox')
+        const viewBoxParts = refViewBox ? refViewBox.split(/[\s,]+/).map(Number) : null
+        const refWidth = Number(ref.getAttribute('width'))
+        const refHeight = Number(ref.getAttribute('height'))
+        if (!node.hasAttribute('width')) {
+          const width = viewBoxParts?.[2] || refWidth
+          if (width) node.setAttribute('width', width)
+        }
+        if (!node.hasAttribute('height')) {
+          const height = viewBoxParts?.[3] || refHeight
+          if (height) node.setAttribute('height', height)
+        }
+      }
+    }
     // if the element has attributes pointing to a non-local reference,
     // need to remove the attribute
-    Object.values(['clip-path', 'fill', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'stroke'], (attr) => {
+    ['clip-path', 'fill', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'stroke'].forEach((attr) => {
       let val = node.getAttribute(attr)
       if (val) {
         val = getUrlFromAttr(val)
         // simply check for first character being a '#'
         if (val && val[0] !== '#') {
           node.setAttribute(attr, '')
-          console.warn(`sanitizeSvg: attribute ${attr} in element ${node.nodeName} pointing to a non-local reference (${val}) is removed`)
+          warn(`attribute ${attr} in element ${node.nodeName} pointing to a non-local reference (${val}) is removed: ${node.outerHTML}`, null, 'sanitize')
           node.removeAttribute(attr)
         }
       }
@@ -264,7 +301,7 @@ export const sanitizeSvg = (node) => {
   } else {
     // remove all children from this node and insert them before this node
     // TODO: in the case of animation elements this will hardly ever be correct
-    console.warn(`sanitizeSvg: element ${node.nodeName} not supported is removed`)
+    warn(`element ${node.nodeName} not supported is removed: ${node.outerHTML}`, null, 'sanitize')
     const children = []
     while (node.hasChildNodes()) {
       children.push(parent.insertBefore(node.firstChild, node))

package/core/select.js

@@ -10,12 +10,37 @@ import { isWebkit } from '../common/browser.js'
 import { getRotationAngle, getBBox, getStrokedBBox } from './utilities.js'
 import { transformListToTransform, transformBox, transformPoint, matrixMultiply, getTransformList } from './math.js'
 import { NS } from './namespaces'
+import { warn } from '../common/logger.js'
 
 let svgCanvas
-let selectorManager_ // A Singleton
 // change radius if touch screen
 const gripRadius = window.ontouchstart ? 10 : 4
 
+/**
+ * Private singleton manager for selector state
+ */
+class SelectModule {
+  #selectorManager = null
+
+  /**
+   * Initialize the select module with canvas
+   * @param {Object} canvas - The SVG canvas instance
+   * @returns {void}
+   */
+  init (canvas) {
+    svgCanvas = canvas
+    this.#selectorManager = new SelectorManager()
+  }
+
+  /**
+   * Get the singleton SelectorManager instance
+   * @returns {SelectorManager} The SelectorManager instance
+   */
+  getSelectorManager () {
+    return this.#selectorManager
+  }
+}
+
 /**
 * Private class for DOM element selection boxes.
 */
@@ -38,14 +63,14 @@ export class Selector {
     // this holds a reference to the <g> element that holds all visual elements of the selector
     this.selectorGroup = svgCanvas.createSVGElement({
       element: 'g',
-      attr: { id: ('selectorGroup' + this.id) }
+      attr: { id: `selectorGroup${this.id}` }
     })
 
     // this holds a reference to the path rect
     this.selectorRect = svgCanvas.createSVGElement({
       element: 'path',
       attr: {
-        id: ('selectedBox' + this.id),
+        id: `selectedBox${this.id}`,
         fill: 'none',
         stroke: '#22C',
         'stroke-width': '1',
@@ -91,11 +116,11 @@ export class Selector {
   */
   showGrips (show) {
     const bShow = show ? 'inline' : 'none'
-    selectorManager_.selectorGripsGroup.setAttribute('display', bShow)
+    selectModule.getSelectorManager().selectorGripsGroup.setAttribute('display', bShow)
     const elem = this.selectedElement
     this.hasGrips = show
     if (elem && show) {
-      this.selectorGroup.append(selectorManager_.selectorGripsGroup)
+      this.selectorGroup.append(selectModule.getSelectorManager().selectorGripsGroup)
       Selector.updateGripCursors(getRotationAngle(elem))
     }
   }
@@ -108,7 +133,7 @@ export class Selector {
   resize (bbox) {
     const dataStorage = svgCanvas.getDataStorage()
     const selectedBox = this.selectorRect
-    const mgr = selectorManager_
+    const mgr = selectModule.getSelectorManager()
     const selectedGrips = mgr.selectorGrips
     const selected = this.selectedElement
     const zoom = svgCanvas.getZoom()
@@ -130,7 +155,7 @@ export class Selector {
     while (currentElt.parentNode) {
       if (currentElt.parentNode && currentElt.parentNode.tagName === 'g' && currentElt.parentNode.transform) {
         if (currentElt.parentNode.transform.baseVal.numberOfItems) {
-          parentTransformationMatrix = matrixMultiply(transformListToTransform(getTransformList(selected.parentNode)).matrix, parentTransformationMatrix)
+          parentTransformationMatrix = matrixMultiply(transformListToTransform(getTransformList(currentElt.parentNode)).matrix, parentTransformationMatrix)
         }
       }
       currentElt = currentElt.parentNode
@@ -213,10 +238,7 @@ export class Selector {
         nbah = (maxy - miny)
       }
 
-      const dstr = 'M' + nbax + ',' + nbay +
-        ' L' + (nbax + nbaw) + ',' + nbay +
-        ' ' + (nbax + nbaw) + ',' + (nbay + nbah) +
-        ' ' + nbax + ',' + (nbay + nbah) + 'z'
+      const dstr = `M${nbax},${nbay} L${nbax + nbaw},${nbay} ${nbax + nbaw},${nbay + nbah} ${nbax},${nbay + nbah}z`
 
       const xform = angle ? 'rotate(' + [angle, cx, cy].join(',') + ')' : ''
 
@@ -257,15 +279,15 @@ export class Selector {
   * @returns {void}
   */
   static updateGripCursors (angle) {
-    const dirArr = Object.keys(selectorManager_.selectorGrips)
+    const dirArr = Object.keys(selectModule.getSelectorManager().selectorGrips)
     let steps = Math.round(angle / 45)
     if (steps < 0) { steps += 8 }
     while (steps > 0) {
       dirArr.push(dirArr.shift())
       steps--
     }
-    Object.values(selectorManager_.selectorGrips).forEach((gripElement, i) => {
-      gripElement.setAttribute('style', ('cursor:' + dirArr[i] + '-resize'))
+    Object.values(selectModule.getSelectorManager().selectorGrips).forEach((gripElement, i) => {
+      gripElement.setAttribute('style', `cursor:${dirArr[i]}-resize`)
     })
   }
 }
@@ -341,10 +363,10 @@ export class SelectorManager {
       const grip = svgCanvas.createSVGElement({
         element: 'circle',
         attr: {
-          id: ('selectorGrip_resize_' + dir),
+          id: `selectorGrip_resize_${dir}`,
           fill: '#22C',
           r: gripRadius,
-          style: ('cursor:' + dir + '-resize'),
+          style: `cursor:${dir}-resize`,
           // This expands the mouse-able area of the grips making them
           // easier to grab with the mouse.
           // This works in Opera and WebKit, but does not work in Firefox
@@ -462,7 +484,7 @@ export class SelectorManager {
     const sel = this.selectorMap[elem.id]
     if (!sel?.locked) {
       // TODO(codedread): Ensure this exists in this module.
-      console.warn('WARNING! selector was released but was already unlocked')
+      warn('WARNING! selector was released but was already unlocked', null, 'select')
     }
     for (let i = 0; i < N; ++i) {
       if (this.selectors[i] && this.selectors[i] === sel) {
@@ -541,6 +563,9 @@ export class SelectorManager {
  * @property {module:select.Dimensions} dimensions
  */
 
+// Export singleton instance for backward compatibility
+const selectModule = new SelectModule()
+
 /**
  * Initializes this module.
  * @function module:select.init
@@ -549,12 +574,11 @@ export class SelectorManager {
  * @returns {void}
  */
 export const init = (canvas) => {
-  svgCanvas = canvas
-  selectorManager_ = new SelectorManager()
+  selectModule.init(canvas)
 }
 
 /**
  * @function module:select.getSelectorManager
  * @returns {module:select.SelectorManager} The SelectorManager instance.
  */
-export const getSelectorManager = () => selectorManager_
+export const getSelectorManager = () => selectModule.getSelectorManager()