svgedit/src/svgcanvas/text-actions.js

Powerful SVG-Editor for your browser

/**
 * @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, getElem, getBBox as utilsGetBBox
} from './utilities.js';
import {
  supportsGoodTextCharPos
} from '../common/browser.js';

let textActionsContext_ = null;

/**
* @function module:text-actions.init
* @param {module:text-actions.textActionsContext_} textActionsContext
* @returns {void}
*/
export const init = function (textActionsContext) {
  textActionsContext_ = textActionsContext;
};

/**
* 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 = getElem('text_cursor');
    if (!cursor) {
      cursor = document.createElementNS(NS.SVG, 'line');
      assignAttributes(cursor, {
        id: 'text_cursor',
        stroke: '#333',
        'stroke-width': 1
      });
      getElem('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 = getElem('text_selectblock');
    if (!selblock) {
      selblock = document.createElementNS(NS.SVG, 'path');
      assignAttributes(selblock, {
        id: 'text_selectblock',
        fill: 'green',
        opacity: 0.5,
        style: 'pointer-events:none'
      });
      getElem('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 = textActionsContext_.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 currentZoom = textActionsContext_.getCurrentZoom();
    out.x /= currentZoom;
    out.y /= currentZoom;

    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 currentZoom = textActionsContext_.getCurrentZoom();
    out.x *= currentZoom;
    out.y *= currentZoom;

    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 currentZoom = textActionsContext_.getCurrentZoom();
    const ept = transformPoint(evt.pageX, evt.pageY, textActionsContext_.getrootSctm());
    const mouseX = ept.x * currentZoom;
    const mouseY = ept.y * currentZoom;
    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
    evt.target.addEventListener('click', 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;
      textActionsContext_.getCanvas().textActions.toEditMode(x, y);
    },
    /**
* @param {Element} elem
* @returns {void}
*/
    start (elem) {
      curtext = elem;
      textActionsContext_.getCanvas().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})) {
      //   textActionsContext_.getCanvas().textActions.toSelectMode(true);
      // }

      if (
        evt.target !== curtext &&
  mouseX < lastX + 2 &&
  mouseX > lastX - 2 &&
  mouseY < lastY + 2 &&
  mouseY > lastY - 2
      ) {
        textActionsContext_.getCanvas().textActions.toSelectMode(true);
      }
    },
    /**
* @function
* @param {Integer} index
* @returns {void}
*/
    setCursor,
    /**
* @param {Float} x
* @param {Float} y
* @returns {void}
*/
    toEditMode (x, y) {
      allowDbl = false;
      textActionsContext_.setCurrentMode('textedit');
      textActionsContext_.getCanvas().selectorManager.requestSelector(curtext).showGrips(false);
      // Make selector group accept clicks
      /* const selector = */ textActionsContext_.getCanvas().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;

      textActionsContext_.getCanvas().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) {
      textActionsContext_.setCurrentMode('select');
      clearInterval(blinker);
      blinker = null;
      if (selblock) { selblock.setAttribute('display', 'none'); }
      if (cursor) { cursor.setAttribute('visibility', 'hidden'); }
      curtext.style.cursor = 'move';

      if (selectElem) {
        textActionsContext_.getCanvas().clearSelection();
        curtext.style.cursor = 'move';

        textActionsContext_.call('selected', [ curtext ]);
        textActionsContext_.getCanvas().addToSelection([ curtext ], true);
      }
      if (curtext && !curtext.textContent.length) {
        // No content, so delete
        textActionsContext_.getCanvas().deleteSelectedElements();
      }

      textinput.blur();

      curtext = false;

      // if (supportsEditableText()) {
      //   curtext.removeAttribute('editable');
      // }
    },
    /**
* @param {Element} elem
* @returns {void}
*/
    setInputElem (elem) {
      textinput = elem;
    },
    /**
* @returns {void}
*/
    clear () {
      if (textActionsContext_.getCurrentMode() === 'textedit') {
        textActionsContext_.getCanvas().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 = textActionsContext_.getSelectedElements();
        curtext = selectedElements[0];
        textActionsContext_.getCanvas().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 currentZoom = textActionsContext_.getCurrentZoom();
          const offset = textActionsContext_.getCanvas().contentW * currentZoom;
          start.x -= offset;
          end.x -= offset;

          start.x /= currentZoom;
          end.x /= currentZoom;
        }

        // 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);
    }
  };
}());