svgedit/editor/extensions/ext-connector.js

/* eslint-disable no-var */
/* globals svgEditor, svgCanvas, $ */
/*
 * ext-connector.js
 *
 * Licensed under the MIT License
 *
 * Copyright(c) 2010 Alexis Deveria
 *
 */

svgEditor.addExtension('Connector', function (S) {
  var svgcontent = S.svgcontent,
    svgroot = S.svgroot,
    getNextId = S.getNextId,
    getElem = S.getElem,
    addElem = S.addSvgElementFromJson,
    selManager = S.selectorManager,
    curConfig = svgEditor.curConfig,
    started = false,
    startX,
    startY,
    curLine,
    startElem,
    endElem,
    connections = [],
    connSel = '.se_connector',
    seNs,
    // connect_str = '-SE_CONNECT-',
    selElems = [],
    elData = $.data;

  var langList = {
    'en': [
      {'id': 'mode_connect', 'title': 'Connect two objects'}
    ],
    'fr': [
      {'id': 'mode_connect', 'title': 'Connecter deux objets'}
    ]
  };

  function getBBintersect (x, y, bb, offset) {
    if (offset) {
      offset -= 0;
      bb = $.extend({}, bb);
      bb.width += offset;
      bb.height += offset;
      bb.x -= offset / 2;
      bb.y -= offset / 2;
    }

    var midX = bb.x + bb.width / 2;
    var midY = bb.y + bb.height / 2;
    var lenX = x - midX;
    var lenY = y - midY;

    var slope = Math.abs(lenY / lenX);

    var ratio;

    if (slope < bb.height / bb.width) {
      ratio = (bb.width / 2) / Math.abs(lenX);
    } else {
      ratio = (bb.height / 2) / Math.abs(lenY);
    }

    return {
      x: midX + lenX * ratio,
      y: midY + lenY * ratio
    };
  }

  function getOffset (side, line) {
    var giveOffset = !!line.getAttribute('marker-' + side);
    // var giveOffset = $(line).data(side+'_off');

    // TODO: Make this number (5) be based on marker width/height
    var size = line.getAttribute('stroke-width') * 5;
    return giveOffset ? size : 0;
  }

  function showPanel (on) {
    var connRules = $('#connector_rules');
    if (!connRules.length) {
      connRules = $('<style id="connector_rules"></style>').appendTo('head');
    }
    connRules.text(!on ? '' : '#tool_clone, #tool_topath, #tool_angle, #xy_panel { display: none !important; }');
    $('#connector_panel').toggle(on);
  }

  function setPoint (elem, pos, x, y, setMid) {
    var i, pts = elem.points;
    var pt = svgroot.createSVGPoint();
    pt.x = x;
    pt.y = y;
    if (pos === 'end') { pos = pts.numberOfItems - 1; }
    // TODO: Test for this on init, then use alt only if needed
    try {
      pts.replaceItem(pt, pos);
    } catch (err) {
      // Should only occur in FF which formats points attr as "n,n n,n", so just split
      var ptArr = elem.getAttribute('points').split(' ');
      for (i = 0; i < ptArr.length; i++) {
        if (i === pos) {
          ptArr[i] = x + ',' + y;
        }
      }
      elem.setAttribute('points', ptArr.join(' '));
    }

    if (setMid) {
      // Add center point
      var ptStart = pts.getItem(0);
      var ptEnd = pts.getItem(pts.numberOfItems - 1);
      setPoint(elem, 1, (ptEnd.x + ptStart.x) / 2, (ptEnd.y + ptStart.y) / 2);
    }
  }

  function updateLine (diffX, diffY) {
    // Update line with element
    var i = connections.length;
    while (i--) {
      var conn = connections[i];
      var line = conn.connector;
      // var elem = conn.elem;

      var pre = conn.is_start ? 'start' : 'end';
      // var sw = line.getAttribute('stroke-width') * 5;

      // Update bbox for this element
      var bb = elData(line, pre + '_bb');
      bb.x = conn.start_x + diffX;
      bb.y = conn.start_y + diffY;
      elData(line, pre + '_bb', bb);

      var altPre = conn.is_start ? 'end' : 'start';

      // Get center pt of connected element
      var bb2 = elData(line, altPre + '_bb');
      var srcX = bb2.x + bb2.width / 2;
      var srcY = bb2.y + bb2.height / 2;

      // Set point of element being moved
      var pt = getBBintersect(srcX, srcY, bb, getOffset(pre, line)); // $(line).data(pre+'_off')?sw:0
      setPoint(line, conn.is_start ? 0 : 'end', pt.x, pt.y, true);

      // Set point of connected element
      var pt2 = getBBintersect(pt.x, pt.y, elData(line, altPre + '_bb'), getOffset(altPre, line));
      setPoint(line, conn.is_start ? 'end' : 0, pt2.x, pt2.y, true);
    }
  }

  function findConnectors (elems) {
    var i;
    if (!elems) { elems = selElems; }
    var connectors = $(svgcontent).find(connSel);
    connections = [];

    // Loop through connectors to see if one is connected to the element
    connectors.each(function () {
      var addThis;
      function add () {
        if ($.inArray(this, elems) !== -1) {
          // Pretend this element is selected
          addThis = true;
        }
      }

      // Grab the ends
      var parts = [];
      ['start', 'end'].forEach(function (pos, i) {
        var key = 'c_' + pos;
        var part = elData(this, key);
        if (part == null) {
          part = document.getElementById(
            this.attributes['se:connector'].value.split(' ')[i]
          );
          elData(this, 'c_' + pos, part.id);
          elData(this, pos + '_bb', svgCanvas.getStrokedBBox([part]));
        } else part = document.getElementById(part);
        parts.push(part);
      }.bind(this));

      for (i = 0; i < 2; i++) {
        var cElem = parts[i];

        addThis = false;
        // The connected element might be part of a selected group
        $(cElem).parents().each(add);

        if (!cElem || !cElem.parentNode) {
          $(this).remove();
          continue;
        }
        if ($.inArray(cElem, elems) !== -1 || addThis) {
          var bb = svgCanvas.getStrokedBBox([cElem]);
          connections.push({
            elem: cElem,
            connector: this,
            is_start: (i === 0),
            start_x: bb.x,
            start_y: bb.y
          });
        }
      }
    });
  }

  function updateConnectors (elems) {
    // Updates connector lines based on selected elements
    // Is not used on mousemove, as it runs getStrokedBBox every time,
    // which isn't necessary there.
    var i, j;
    findConnectors(elems);
    if (connections.length) {
      // Update line with element
      i = connections.length;
      while (i--) {
        var conn = connections[i];
        var line = conn.connector;
        var elem = conn.elem;

        // var sw = line.getAttribute('stroke-width') * 5;
        var pre = conn.is_start ? 'start' : 'end';

        // Update bbox for this element
        var bb = svgCanvas.getStrokedBBox([elem]);
        bb.x = conn.start_x;
        bb.y = conn.start_y;
        elData(line, pre + '_bb', bb);
        /* var addOffset = */ elData(line, pre + '_off');

        var altPre = conn.is_start ? 'end' : 'start';

        // Get center pt of connected element
        var bb2 = elData(line, altPre + '_bb');
        var srcX = bb2.x + bb2.width / 2;
        var srcY = bb2.y + bb2.height / 2;

        // Set point of element being moved
        var pt = getBBintersect(srcX, srcY, bb, getOffset(pre, line));
        setPoint(line, conn.is_start ? 0 : 'end', pt.x, pt.y, true);

        // Set point of connected element
        var pt2 = getBBintersect(pt.x, pt.y, elData(line, altPre + '_bb'), getOffset(altPre, line));
        setPoint(line, conn.is_start ? 'end' : 0, pt2.x, pt2.y, true);

        // Update points attribute manually for webkit
        if (navigator.userAgent.indexOf('AppleWebKit') !== -1) {
          var pts = line.points;
          var len = pts.numberOfItems;
          var ptArr = [];
          for (j = 0; j < len; j++) {
            pt = pts.getItem(j);
            ptArr[j] = pt.x + ',' + pt.y;
          }
          line.setAttribute('points', ptArr.join(' '));
        }
      }
    }
  }

  // Do once
  (function () {
    var gse = svgCanvas.groupSelectedElements;

    svgCanvas.groupSelectedElements = function () {
      svgCanvas.removeFromSelection($(connSel).toArray());
      return gse.apply(this, arguments);
    };

    var mse = svgCanvas.moveSelectedElements;

    svgCanvas.moveSelectedElements = function () {
      var cmd = mse.apply(this, arguments);
      updateConnectors();
      return cmd;
    };

    seNs = svgCanvas.getEditorNS();
  }());

  // Do on reset
  function init () {
    // Make sure all connectors have data set
    $(svgcontent).find('*').each(function () {
      var conn = this.getAttributeNS(seNs, 'connector');
      if (conn) {
        this.setAttribute('class', connSel.substr(1));
        var connData = conn.split(' ');
        var sbb = svgCanvas.getStrokedBBox([getElem(connData[0])]);
        var ebb = svgCanvas.getStrokedBBox([getElem(connData[1])]);
        $(this).data('c_start', connData[0])
          .data('c_end', connData[1])
          .data('start_bb', sbb)
          .data('end_bb', ebb);
        svgCanvas.getEditorNS(true);
      }
    });
    // updateConnectors();
  }

  // $(svgroot).parent().mousemove(function (e) {
  // // if (started
  // //   || svgCanvas.getMode() !== 'connector'
  // //  || e.target.parentNode.parentNode !== svgcontent) return;
  //
  // console.log('y')
  // // if (e.target.parentNode.parentNode === svgcontent) {
  // //
  // // }
  // });

  return {
    name: 'Connector',
    svgicons: svgEditor.curConfig.imgPath + 'conn.svg',
    buttons: [{
      id: 'mode_connect',
      type: 'mode',
      icon: svgEditor.curConfig.imgPath + 'cut.png',
      title: 'Connect two objects',
      includeWith: {
        button: '#tool_line',
        isDefault: false,
        position: 1
      },
      events: {
        'click': function () {
          svgCanvas.setMode('connector');
        }
      }
    }],
    addLangData: function (lang) {
      return {
        data: langList[lang]
      };
    },
    mouseDown: function (opts) {
      var e = opts.event;
      startX = opts.start_x;
      startY = opts.start_y;
      var mode = svgCanvas.getMode();

      if (mode === 'connector') {
        if (started) { return; }

        var mouseTarget = e.target;

        var parents = $(mouseTarget).parents();

        if ($.inArray(svgcontent, parents) !== -1) {
          // Connectable element

          // If child of foreignObject, use parent
          var fo = $(mouseTarget).closest('foreignObject');
          startElem = fo.length ? fo[0] : mouseTarget;

          // Get center of source element
          var bb = svgCanvas.getStrokedBBox([startElem]);
          var x = bb.x + bb.width / 2;
          var y = bb.y + bb.height / 2;

          started = true;
          curLine = addElem({
            'element': 'polyline',
            'attr': {
              'id': getNextId(),
              'points': (x + ',' + y + ' ' + x + ',' + y + ' ' + startX + ',' + startY),
              'stroke': '#' + curConfig.initStroke.color,
              'stroke-width': (!startElem.stroke_width || startElem.stroke_width === 0) ? curConfig.initStroke.width : startElem.stroke_width,
              'fill': 'none',
              'opacity': curConfig.initStroke.opacity,
              'style': 'pointer-events:none'
            }
          });
          elData(curLine, 'start_bb', bb);
        }
        return {
          started: true
        };
      }
      if (mode === 'select') {
        findConnectors();
      }
    },
    mouseMove: function (opts) {
      var zoom = svgCanvas.getZoom();
      // var e = opts.event;
      var x = opts.mouse_x / zoom;
      var y = opts.mouse_y / zoom;

      var diffX = x - startX,
        diffY = y - startY;

      var mode = svgCanvas.getMode();

      if (mode === 'connector' && started) {
        // var sw = curLine.getAttribute('stroke-width') * 3;
        // Set start point (adjusts based on bb)
        var pt = getBBintersect(x, y, elData(curLine, 'start_bb'), getOffset('start', curLine));
        startX = pt.x;
        startY = pt.y;

        setPoint(curLine, 0, pt.x, pt.y, true);

        // Set end point
        setPoint(curLine, 'end', x, y, true);
      } else if (mode === 'select') {
        var slen = selElems.length;

        while (slen--) {
          var elem = selElems[slen];
          // Look for selected connector elements
          if (elem && elData(elem, 'c_start')) {
            // Remove the "translate" transform given to move
            svgCanvas.removeFromSelection([elem]);
            svgCanvas.getTransformList(elem).clear();
          }
        }
        if (connections.length) {
          updateLine(diffX, diffY);
        }
      }
    },
    mouseUp: function (opts) {
      // var zoom = svgCanvas.getZoom();
      var e = opts.event,
        // x = opts.mouse_x / zoom,
        // y = opts.mouse_y / zoom,
        mouseTarget = e.target;

      if (svgCanvas.getMode() === 'connector') {
        var fo = $(mouseTarget).closest('foreignObject');
        if (fo.length) { mouseTarget = fo[0]; }

        var parents = $(mouseTarget).parents();

        if (mouseTarget === startElem) {
          // Start line through click
          started = true;
          return {
            keep: true,
            element: null,
            started: started
          };
        }
        if ($.inArray(svgcontent, parents) === -1) {
          // Not a valid target element, so remove line
          $(curLine).remove();
          started = false;
          return {
            keep: false,
            element: null,
            started: started
          };
        }
        // Valid end element
        endElem = mouseTarget;

        var startId = startElem.id, endId = endElem.id;
        var connStr = startId + ' ' + endId;
        var altStr = endId + ' ' + startId;
        // Don't create connector if one already exists
        var dupe = $(svgcontent).find(connSel).filter(function () {
          var conn = this.getAttributeNS(seNs, 'connector');
          if (conn === connStr || conn === altStr) { return true; }
        });
        if (dupe.length) {
          $(curLine).remove();
          return {
            keep: false,
            element: null,
            started: false
          };
        }

        var bb = svgCanvas.getStrokedBBox([endElem]);

        var pt = getBBintersect(startX, startY, bb, getOffset('start', curLine));
        setPoint(curLine, 'end', pt.x, pt.y, true);
        $(curLine)
          .data('c_start', startId)
          .data('c_end', endId)
          .data('end_bb', bb);
        seNs = svgCanvas.getEditorNS(true);
        curLine.setAttributeNS(seNs, 'se:connector', connStr);
        curLine.setAttribute('class', connSel.substr(1));
        curLine.setAttribute('opacity', 1);
        svgCanvas.addToSelection([curLine]);
        svgCanvas.moveToBottomSelectedElement();
        selManager.requestSelector(curLine).showGrips(false);
        started = false;
        return {
          keep: true,
          element: curLine,
          started: started
        };
      }
    },
    selectedChanged: function (opts) {
      // TODO: Find better way to skip operations if no connectors are in use
      if (!$(svgcontent).find(connSel).length) { return; }

      if (svgCanvas.getMode() === 'connector') {
        svgCanvas.setMode('select');
      }

      // Use this to update the current selected elements
      selElems = opts.elems;

      var i = selElems.length;

      while (i--) {
        var elem = selElems[i];
        if (elem && elData(elem, 'c_start')) {
          selManager.requestSelector(elem).showGrips(false);
          if (opts.selectedElement && !opts.multiselected) {
            // TODO: Set up context tools and hide most regular line tools
            showPanel(true);
          } else {
            showPanel(false);
          }
        } else {
          showPanel(false);
        }
      }
      updateConnectors();
    },
    elementChanged: function (opts) {
      var elem = opts.elems[0];
      if (elem && elem.tagName === 'svg' && elem.id === 'svgcontent') {
        // Update svgcontent (can change on import)
        svgcontent = elem;
        init();
      }

      // Has marker, so change offset
      var start;
      if (elem && (
        elem.getAttribute('marker-start') ||
        elem.getAttribute('marker-mid') ||
        elem.getAttribute('marker-end')
      )) {
        start = elem.getAttribute('marker-start');
        var mid = elem.getAttribute('marker-mid');
        var end = elem.getAttribute('marker-end');
        curLine = elem;
        $(elem)
          .data('start_off', !!start)
          .data('end_off', !!end);

        if (elem.tagName === 'line' && mid) {
          // Convert to polyline to accept mid-arrow

          var x1 = Number(elem.getAttribute('x1'));
          var x2 = Number(elem.getAttribute('x2'));
          var y1 = Number(elem.getAttribute('y1'));
          var y2 = Number(elem.getAttribute('y2'));
          var id = elem.id;

          var midPt = (' ' + ((x1 + x2) / 2) + ',' + ((y1 + y2) / 2) + ' ');
          var pline = addElem({
            'element': 'polyline',
            'attr': {
              'points': (x1 + ',' + y1 + midPt + x2 + ',' + y2),
              'stroke': elem.getAttribute('stroke'),
              'stroke-width': elem.getAttribute('stroke-width'),
              'marker-mid': mid,
              'fill': 'none',
              'opacity': elem.getAttribute('opacity') || 1
            }
          });
          $(elem).after(pline).remove();
          svgCanvas.clearSelection();
          pline.id = id;
          svgCanvas.addToSelection([pline]);
          elem = pline;
        }
      }
      // Update line if it's a connector
      if (elem.getAttribute('class') === connSel.substr(1)) {
        start = getElem(elData(elem, 'c_start'));
        updateConnectors([start]);
      } else {
        updateConnectors();
      }
    },
    IDsUpdated: function (input) {
      var remove = [];
      input.elems.forEach(function (elem) {
        if ('se:connector' in elem.attr) {
          elem.attr['se:connector'] = elem.attr['se:connector'].split(' ')
            .map(function (oldID) { return input.changes[oldID]; }).join(' ');

          // Check validity - the field would be something like 'svg_21 svg_22', but
          // if one end is missing, it would be 'svg_21' and therefore fail this test
          if (!/. ./.test(elem.attr['se:connector'])) {
            remove.push(elem.attr.id);
          }
        }
      });
      return {remove: remove};
    },
    toolButtonStateUpdate: function (opts) {
      if (opts.nostroke) {
        if ($('#mode_connect').hasClass('tool_button_current')) {
          svgEditor.clickSelect();
        }
      }
      $('#mode_connect')
        .toggleClass('disabled', opts.nostroke);
    }
  };
});