@svgedit/svgcanvas 7.1.4

package/svgroot.js

@@ -0,0 +1,36 @@
+/**
+ * Tools for SVG Root Element.
+ * @module svgcanvas
+ * @license MIT
+ *
+ * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller
+ */
+import { NS } from './namespaces.js'
+import { text2xml } from './utilities.js'
+
+/**
+* @function module:svgcanvas.svgRootElement svgRootElement the svg node and its children.
+* @param {Element} svgdoc - window.document
+* @param {ArgumentsArray} dimensions - dimensions of width and height
+* @returns {svgRootElement}
+*/
+export const svgRootElement = function (svgdoc, dimensions) {
+  return svgdoc.importNode(
+    text2xml(
+      `<svg id="svgroot" xmlns="${NS.SVG}" xlinkns="${NS.XLINK}" width="${dimensions[0]}" 
+        height="${dimensions[1]}" x="${dimensions[0]}" y="${dimensions[1]}" overflow="visible">
+        <defs>
+          <filter id="canvashadow" filterUnits="objectBoundingBox">
+            <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
+            <feOffset in="blur" dx="5" dy="5" result="offsetBlur"/>
+            <feMerge>
+              <feMergeNode in="offsetBlur"/>
+              <feMergeNode in="SourceGraphic"/>
+            </feMerge>
+          </filter>
+        </defs>
+      </svg>`
+    ).documentElement,
+    true
+  )
+}

package/text-actions.js

@@ -0,0 +1,530 @@
+/**
+ * @module text-actions Tools for Text edit functions
+ * @license MIT
+ *
+ * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller
+ */
+
+import { NS } from './namespaces.js'
+import {
+  transformPoint, getMatrix
+} from './math.js'
+import {
+  assignAttributes, getElement, getBBox as utilsGetBBox
+} from './utilities.js'
+import {
+  supportsGoodTextCharPos
+} from '../../src/common/browser.js'
+
+let svgCanvas = null
+
+/**
+* @function module:text-actions.init
+* @param {module:text-actions.svgCanvas} textActionsContext
+* @returns {void}
+*/
+export const init = (canvas) => {
+  svgCanvas = canvas
+}
+
+/**
+* Group: Text edit functions
+* Functions relating to editing text elements.
+* @namespace {PlainObject} textActions
+* @memberof module:svgcanvas.SvgCanvas#
+*/
+export const textActionsMethod = (function () {
+  let curtext
+  let textinput
+  let cursor
+  let selblock
+  let blinker
+  let chardata = []
+  let textbb // , transbb;
+  let matrix
+  let lastX; let lastY
+  let allowDbl
+
+  /**
+*
+* @param {Integer} index
+* @returns {void}
+*/
+  function setCursor (index) {
+    const empty = (textinput.value === '')
+    textinput.focus()
+
+    if (!arguments.length) {
+      if (empty) {
+        index = 0
+      } else {
+        if (textinput.selectionEnd !== textinput.selectionStart) { return }
+        index = textinput.selectionEnd
+      }
+    }
+
+    const charbb = chardata[index]
+    if (!empty) {
+      textinput.setSelectionRange(index, index)
+    }
+    cursor = getElement('text_cursor')
+    if (!cursor) {
+      cursor = document.createElementNS(NS.SVG, 'line')
+      assignAttributes(cursor, {
+        id: 'text_cursor',
+        stroke: '#333',
+        'stroke-width': 1
+      })
+      getElement('selectorParentGroup').append(cursor)
+    }
+
+    if (!blinker) {
+      blinker = setInterval(function () {
+        const show = (cursor.getAttribute('display') === 'none')
+        cursor.setAttribute('display', show ? 'inline' : 'none')
+      }, 600)
+    }
+
+    const startPt = ptToScreen(charbb.x, textbb.y)
+    const endPt = ptToScreen(charbb.x, (textbb.y + textbb.height))
+
+    assignAttributes(cursor, {
+      x1: startPt.x,
+      y1: startPt.y,
+      x2: endPt.x,
+      y2: endPt.y,
+      visibility: 'visible',
+      display: 'inline'
+    })
+
+    if (selblock) { selblock.setAttribute('d', '') }
+  }
+
+  /**
+*
+* @param {Integer} start
+* @param {Integer} end
+* @param {boolean} skipInput
+* @returns {void}
+*/
+  function setSelection (start, end, skipInput) {
+    if (start === end) {
+      setCursor(end)
+      return
+    }
+
+    if (!skipInput) {
+      textinput.setSelectionRange(start, end)
+    }
+
+    selblock = getElement('text_selectblock')
+    if (!selblock) {
+      selblock = document.createElementNS(NS.SVG, 'path')
+      assignAttributes(selblock, {
+        id: 'text_selectblock',
+        fill: 'green',
+        opacity: 0.5,
+        style: 'pointer-events:none'
+      })
+      getElement('selectorParentGroup').append(selblock)
+    }
+
+    const startbb = chardata[start]
+    const endbb = chardata[end]
+
+    cursor.setAttribute('visibility', 'hidden')
+
+    const tl = ptToScreen(startbb.x, textbb.y)
+    const tr = ptToScreen(startbb.x + (endbb.x - startbb.x), textbb.y)
+    const bl = ptToScreen(startbb.x, textbb.y + textbb.height)
+    const br = ptToScreen(startbb.x + (endbb.x - startbb.x), textbb.y + textbb.height)
+
+    const dstr = 'M' + tl.x + ',' + tl.y +
+' L' + tr.x + ',' + tr.y +
+' ' + br.x + ',' + br.y +
+' ' + bl.x + ',' + bl.y + 'z'
+
+    assignAttributes(selblock, {
+      d: dstr,
+      display: 'inline'
+    })
+  }
+
+  /**
+*
+* @param {Float} mouseX
+* @param {Float} mouseY
+* @returns {Integer}
+*/
+  function getIndexFromPoint (mouseX, mouseY) {
+    // Position cursor here
+    const pt = svgCanvas.getSvgRoot().createSVGPoint()
+    pt.x = mouseX
+    pt.y = mouseY
+
+    // No content, so return 0
+    if (chardata.length === 1) { return 0 }
+    // Determine if cursor should be on left or right of character
+    let charpos = curtext.getCharNumAtPosition(pt)
+    if (charpos < 0) {
+      // Out of text range, look at mouse coords
+      charpos = chardata.length - 2
+      if (mouseX <= chardata[0].x) {
+        charpos = 0
+      }
+    } else if (charpos >= chardata.length - 2) {
+      charpos = chardata.length - 2
+    }
+    const charbb = chardata[charpos]
+    const mid = charbb.x + (charbb.width / 2)
+    if (mouseX > mid) {
+      charpos++
+    }
+    return charpos
+  }
+
+  /**
+*
+* @param {Float} mouseX
+* @param {Float} mouseY
+* @returns {void}
+*/
+  function setCursorFromPoint (mouseX, mouseY) {
+    setCursor(getIndexFromPoint(mouseX, mouseY))
+  }
+
+  /**
+*
+* @param {Float} x
+* @param {Float} y
+* @param {boolean} apply
+* @returns {void}
+*/
+  function setEndSelectionFromPoint (x, y, apply) {
+    const i1 = textinput.selectionStart
+    const i2 = getIndexFromPoint(x, y)
+
+    const start = Math.min(i1, i2)
+    const end = Math.max(i1, i2)
+    setSelection(start, end, !apply)
+  }
+
+  /**
+*
+* @param {Float} xIn
+* @param {Float} yIn
+* @returns {module:math.XYObject}
+*/
+  function screenToPt (xIn, yIn) {
+    const out = {
+      x: xIn,
+      y: yIn
+    }
+    const zoom = svgCanvas.getZoom()
+    out.x /= zoom
+    out.y /= zoom
+
+    if (matrix) {
+      const pt = transformPoint(out.x, out.y, matrix.inverse())
+      out.x = pt.x
+      out.y = pt.y
+    }
+
+    return out
+  }
+
+  /**
+*
+* @param {Float} xIn
+* @param {Float} yIn
+* @returns {module:math.XYObject}
+*/
+  function ptToScreen (xIn, yIn) {
+    const out = {
+      x: xIn,
+      y: yIn
+    }
+
+    if (matrix) {
+      const pt = transformPoint(out.x, out.y, matrix)
+      out.x = pt.x
+      out.y = pt.y
+    }
+    const zoom = svgCanvas.getZoom()
+    out.x *= zoom
+    out.y *= zoom
+
+    return out
+  }
+
+  /**
+*
+* @param {Event} evt
+* @returns {void}
+*/
+  function selectAll (evt) {
+    setSelection(0, curtext.textContent.length)
+    evt.target.removeEventListener('click', selectAll)
+  }
+
+  /**
+*
+* @param {Event} evt
+* @returns {void}
+*/
+  function selectWord (evt) {
+    if (!allowDbl || !curtext) { return }
+    const zoom = svgCanvas.getZoom()
+    const ept = transformPoint(evt.pageX, evt.pageY, svgCanvas.getrootSctm())
+    const mouseX = ept.x * zoom
+    const mouseY = ept.y * zoom
+    const pt = screenToPt(mouseX, mouseY)
+
+    const index = getIndexFromPoint(pt.x, pt.y)
+    const str = curtext.textContent
+    const first = str.substr(0, index).replace(/[a-z\d]+$/i, '').length
+    const m = str.substr(index).match(/^[a-z\d]+/i)
+    const last = (m ? m[0].length : 0) + index
+    setSelection(first, last)
+
+    // Set tripleclick
+    svgCanvas.$click(evt.target, selectAll)
+
+    setTimeout(function () {
+      evt.target.removeEventListener('click', selectAll)
+    }, 300)
+  }
+
+  return /** @lends module:svgcanvas.SvgCanvas#textActions */ {
+    /**
+* @param {Element} target
+* @param {Float} x
+* @param {Float} y
+* @returns {void}
+*/
+    select (target, x, y) {
+      curtext = target
+      svgCanvas.textActions.toEditMode(x, y)
+    },
+    /**
+* @param {Element} elem
+* @returns {void}
+*/
+    start (elem) {
+      curtext = elem
+      svgCanvas.textActions.toEditMode()
+    },
+    /**
+* @param {external:MouseEvent} evt
+* @param {Element} mouseTarget
+* @param {Float} startX
+* @param {Float} startY
+* @returns {void}
+*/
+    mouseDown (evt, mouseTarget, startX, startY) {
+      const pt = screenToPt(startX, startY)
+
+      textinput.focus()
+      setCursorFromPoint(pt.x, pt.y)
+      lastX = startX
+      lastY = startY
+
+      // TODO: Find way to block native selection
+    },
+    /**
+* @param {Float} mouseX
+* @param {Float} mouseY
+* @returns {void}
+*/
+    mouseMove (mouseX, mouseY) {
+      const pt = screenToPt(mouseX, mouseY)
+      setEndSelectionFromPoint(pt.x, pt.y)
+    },
+    /**
+* @param {external:MouseEvent} evt
+* @param {Float} mouseX
+* @param {Float} mouseY
+* @returns {void}
+*/
+    mouseUp (evt, mouseX, mouseY) {
+      const pt = screenToPt(mouseX, mouseY)
+
+      setEndSelectionFromPoint(pt.x, pt.y, true)
+
+      // TODO: Find a way to make this work: Use transformed BBox instead of evt.target
+      // if (lastX === mouseX && lastY === mouseY
+      //   && !rectsIntersect(transbb, {x: pt.x, y: pt.y, width: 0, height: 0})) {
+      //   svgCanvas.textActions.toSelectMode(true);
+      // }
+
+      if (
+        evt.target !== curtext &&
+  mouseX < lastX + 2 &&
+  mouseX > lastX - 2 &&
+  mouseY < lastY + 2 &&
+  mouseY > lastY - 2
+      ) {
+        svgCanvas.textActions.toSelectMode(true)
+      }
+    },
+    /**
+* @function
+* @param {Integer} index
+* @returns {void}
+*/
+    setCursor,
+    /**
+* @param {Float} x
+* @param {Float} y
+* @returns {void}
+*/
+    toEditMode (x, y) {
+      allowDbl = false
+      svgCanvas.setCurrentMode('textedit')
+      svgCanvas.selectorManager.requestSelector(curtext).showGrips(false)
+      // Make selector group accept clicks
+      /* const selector = */ svgCanvas.selectorManager.requestSelector(curtext) // Do we need this? Has side effect of setting lock, so keeping for now, but next line wasn't being used
+      // const sel = selector.selectorRect;
+
+      svgCanvas.textActions.init()
+
+      curtext.style.cursor = 'text'
+
+      // if (supportsEditableText()) {
+      //   curtext.setAttribute('editable', 'simple');
+      //   return;
+      // }
+
+      if (!arguments.length) {
+        setCursor()
+      } else {
+        const pt = screenToPt(x, y)
+        setCursorFromPoint(pt.x, pt.y)
+      }
+
+      setTimeout(function () {
+        allowDbl = true
+      }, 300)
+    },
+    /**
+* @param {boolean|Element} selectElem
+* @fires module:svgcanvas.SvgCanvas#event:selected
+* @returns {void}
+*/
+    toSelectMode (selectElem) {
+      svgCanvas.setCurrentMode('select')
+      clearInterval(blinker)
+      blinker = null
+      if (selblock) { selblock.setAttribute('display', 'none') }
+      if (cursor) { cursor.setAttribute('visibility', 'hidden') }
+      curtext.style.cursor = 'move'
+
+      if (selectElem) {
+        svgCanvas.clearSelection()
+        curtext.style.cursor = 'move'
+
+        svgCanvas.call('selected', [curtext])
+        svgCanvas.addToSelection([curtext], true)
+      }
+      if (!curtext?.textContent.length) {
+        // No content, so delete
+        svgCanvas.deleteSelectedElements()
+      }
+
+      textinput.blur()
+
+      curtext = false
+
+      // if (supportsEditableText()) {
+      //   curtext.removeAttribute('editable');
+      // }
+    },
+    /**
+* @param {Element} elem
+* @returns {void}
+*/
+    setInputElem (elem) {
+      textinput = elem
+    },
+    /**
+* @returns {void}
+*/
+    clear () {
+      if (svgCanvas.getCurrentMode() === 'textedit') {
+        svgCanvas.textActions.toSelectMode()
+      }
+    },
+    /**
+* @param {Element} _inputElem Not in use
+* @returns {void}
+*/
+    init (_inputElem) {
+      if (!curtext) { return }
+      let i; let end
+      // if (supportsEditableText()) {
+      //   curtext.select();
+      //   return;
+      // }
+
+      if (!curtext.parentNode) {
+        // Result of the ffClone, need to get correct element
+        const selectedElements = svgCanvas.getSelectedElements()
+        curtext = selectedElements[0]
+        svgCanvas.selectorManager.requestSelector(curtext).showGrips(false)
+      }
+
+      const str = curtext.textContent
+      const len = str.length
+
+      const xform = curtext.getAttribute('transform')
+
+      textbb = utilsGetBBox(curtext)
+
+      matrix = xform ? getMatrix(curtext) : null
+
+      chardata = []
+      chardata.length = len
+      textinput.focus()
+
+      curtext.removeEventListener('dblclick', selectWord)
+      curtext.addEventListener('dblclick', selectWord)
+
+      if (!len) {
+        end = { x: textbb.x + (textbb.width / 2), width: 0 }
+      }
+
+      for (i = 0; i < len; i++) {
+        const start = curtext.getStartPositionOfChar(i)
+        end = curtext.getEndPositionOfChar(i)
+
+        if (!supportsGoodTextCharPos()) {
+          const zoom = svgCanvas.getZoom()
+          const offset = svgCanvas.contentW * zoom
+          start.x -= offset
+          end.x -= offset
+
+          start.x /= zoom
+          end.x /= zoom
+        }
+
+        // Get a "bbox" equivalent for each character. Uses the
+        // bbox data of the actual text for y, height purposes
+
+        // TODO: Decide if y, width and height are actually necessary
+        chardata[i] = {
+          x: start.x,
+          y: textbb.y, // start.y?
+          width: end.x - start.x,
+          height: textbb.height
+        }
+      }
+
+      // Add a last bbox for cursor at end of text
+      chardata.push({
+        x: end.x,
+        width: 0
+      })
+      setSelection(textinput.selectionStart, textinput.selectionEnd, true)
+    }
+  }
+}())

package/touch.js

@@ -0,0 +1,51 @@
+// http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript/
+/**
+ *
+ * @param {Event} ev
+ * @returns {void}
+ */
+const touchHandler = (ev) => {
+  ev.preventDefault()
+  const { changedTouches } = ev
+  const first = changedTouches[0]
+
+  let type = ''
+  switch (ev.type) {
+    case 'touchstart': type = 'mousedown'; break
+    case 'touchmove': type = 'mousemove'; break
+    case 'touchend': type = 'mouseup'; break
+    default: return
+  }
+
+  const { screenX, screenY, clientX, clientY } = first
+  const simulatedEvent = new MouseEvent(type, {
+    // Event interface
+    bubbles: true,
+    cancelable: true,
+    // UIEvent interface
+    view: window,
+    detail: 1, // click count
+    // MouseEvent interface (customized)
+    screenX,
+    screenY,
+    clientX,
+    clientY,
+    // MouseEvent interface (defaults) - these could be removed
+    ctrlKey: false,
+    altKey: false,
+    shiftKey: false,
+    metaKey: false,
+    button: 0, // main button (usually left)
+    relatedTarget: null
+  })
+  if (changedTouches.length < 2) {
+    first.target.dispatchEvent(simulatedEvent)
+  }
+}
+
+export const init = (svgCanvas) => {
+  svgCanvas.svgroot.addEventListener('touchstart', touchHandler)
+  svgCanvas.svgroot.addEventListener('touchmove', touchHandler)
+  svgCanvas.svgroot.addEventListener('touchend', touchHandler)
+  svgCanvas.svgroot.addEventListener('touchcancel', touchHandler)
+}