addPointGripMethod = function (index, x, y) {
  // create the container of all the point grips
  const pointGripContainer = getGripContainerMethod()

  let pointGrip = getElement('pathpointgrip_' + index)
  // create it
  if (!pointGrip) {
    pointGrip = document.createElementNS(NS.SVG, 'circle')
    const atts = {
      id: 'pathpointgrip_' + index,
      display: 'none',
      r: 4,
      fill: '#0FF',
      stroke: '#00F',
      'stroke-width': 2,
      cursor: 'move',
      style: 'pointer-events:all'
    }
    const uiStrings = svgCanvas.getUIStrings()
    if ('pathNodeTooltip' in uiStrings) { // May be empty if running path.js without svg-editor
      atts['xlink:title'] = uiStrings.pathNodeTooltip
    }
    assignAttributes(pointGrip, atts)
    pointGripContainer.append(pointGrip)

    const grip = document.getElementById('pathpointgrip_' + index)
    grip?.addEventListener('dblclick', () => {
      const path = svgCanvas.getPathObj()
      if (path) {
        path.setSegType()
      }
    })
  }
  if (x && y) {
    // set up the point grip element and display it
    assignAttributes(pointGrip, {
      cx: x,
      cy: y,
      display: 'inline'
    })
  }
  return pointGrip
}
Requires prior call to `setUiStrings` if `xlink:title`
   to be set on the grip.
@function module:path.addPointGrip
@param {Integer} index
@param {Integer} x
@param {Integer} y
@returns {SVGCircleElement}