svgedit/packages/svgcanvas/blur-event.js

/**
 * Tools for blur event.
 * @module blur
 * @license MIT
 * @copyright 2011 Jeff Schiller
 */

let svgCanvas = null

/**
* @function module:blur.init
* @param {module:blur.blurContext} blurContext
* @returns {void}
*/
export const init = (canvas) => {
  svgCanvas = canvas
}

/**
* Sets the `stdDeviation` blur value on the selected element without being undoable.
* @function module:svgcanvas.SvgCanvas#setBlurNoUndo
* @param {Float} val - The new `stdDeviation` value
* @returns {void}
*/
export const setBlurNoUndo = function (val) {
  const selectedElements = svgCanvas.getSelectedElements()
  if (!svgCanvas.getFilter()) {
    svgCanvas.setBlur(val)
    return
  }
  if (val === 0) {
    // Don't change the StdDev, as that will hide the element.
    // Instead, just remove the value for "filter"
    svgCanvas.changeSelectedAttributeNoUndo('filter', '')
    svgCanvas.setFilterHidden(true)
  } else {
    const elem = selectedElements[0]
    if (svgCanvas.getFilterHidden()) {
      svgCanvas.changeSelectedAttributeNoUndo('filter', 'url(#' + elem.id + '_blur)')
    }
    const filter = svgCanvas.getFilter()
    svgCanvas.changeSelectedAttributeNoUndo('stdDeviation', val, [filter.firstChild])
    svgCanvas.setBlurOffsets(filter, val)
  }
}

/**
*
* @returns {void}
*/
function finishChange () {
  const bCmd = svgCanvas.undoMgr.finishUndoableChange()
  svgCanvas.getCurCommand().addSubCommand(bCmd)
  svgCanvas.addCommandToHistory(svgCanvas.getCurCommand())
  svgCanvas.setCurCommand(null)
  svgCanvas.setFilter(null)
}

/**
* Sets the `x`, `y`, `width`, `height` values of the filter element in order to
* make the blur not be clipped. Removes them if not neeeded.
* @function module:svgcanvas.SvgCanvas#setBlurOffsets
* @param {Element} filterElem - The filter DOM element to update
* @param {Float} stdDev - The standard deviation value on which to base the offset size
* @returns {void}
*/
export const setBlurOffsets = function (filterElem, stdDev) {
  if (stdDev > 3) {
    // TODO: Create algorithm here where size is based on expected blur
    svgCanvas.assignAttributes(filterElem, {
      x: '-50%',
      y: '-50%',
      width: '200%',
      height: '200%'
    }, 100)
  } else {
    filterElem.removeAttribute('x')
    filterElem.removeAttribute('y')
    filterElem.removeAttribute('width')
    filterElem.removeAttribute('height')
  }
}

/**
* Adds/updates the blur filter to the selected element.
* @function module:svgcanvas.SvgCanvas#setBlur
* @param {Float} val - Float with the new `stdDeviation` blur value
* @param {boolean} complete - Whether or not the action should be completed (to add to the undo manager)
* @returns {void}
*/
export const setBlur = function (val, complete) {
  const {
    InsertElementCommand, ChangeElementCommand, BatchCommand
  } = svgCanvas.history

  const selectedElements = svgCanvas.getSelectedElements()
  if (svgCanvas.getCurCommand()) {
    finishChange()
    return
  }

  // Looks for associated blur, creates one if not found
  const elem = selectedElements[0]
  const elemId = elem.id
  svgCanvas.setFilter(svgCanvas.getElement(elemId + '_blur'))

  val -= 0

  const batchCmd = new BatchCommand()

  // Blur found!
  if (svgCanvas.getFilter()) {
    if (val === 0) {
      svgCanvas.setFilter(null)
    }
  } else {
    // Not found, so create
    const newblur = svgCanvas.addSVGElementsFromJson({
      element: 'feGaussianBlur',
      attr: {
        in: 'SourceGraphic',
        stdDeviation: val
      }
    })

    svgCanvas.setFilter(svgCanvas.addSVGElementsFromJson({
      element: 'filter',
      attr: {
        id: elemId + '_blur'
      }
    }))
    svgCanvas.getFilter().append(newblur)
    svgCanvas.findDefs().append(svgCanvas.getFilter())

    batchCmd.addSubCommand(new InsertElementCommand(svgCanvas.getFilter()))
  }

  const changes = { filter: elem.getAttribute('filter') }

  if (val === 0) {
    elem.removeAttribute('filter')
    batchCmd.addSubCommand(new ChangeElementCommand(elem, changes))
    return
  }

  svgCanvas.changeSelectedAttribute('filter', 'url(#' + elemId + '_blur)')
  batchCmd.addSubCommand(new ChangeElementCommand(elem, changes))
  svgCanvas.setBlurOffsets(svgCanvas.getFilter(), val)
  const filter = svgCanvas.getFilter()
  svgCanvas.setCurCommand(batchCmd)
  svgCanvas.undoMgr.beginUndoableChange('stdDeviation', [filter ? filter.firstChild : null])
  if (complete) {
    svgCanvas.setBlurNoUndo(val)
    finishChange()
  }
}