Drawing SVG Polyline

interactive tool for drawing paths joint with some editable points

by Grzegorz Matyszewski

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<div id="paths"></div>
<input type="hidden" id="input">

JavaScript

Path = function(target, options) {

	this.events = [];

	if (typeof TweenMax === 'undefined') {
  	console.warn('no TweenMax found!');
  }

	var currentPoint = null;
  var currentPath = null;
  var grabbed = null;
  var dragged = false;
  var svg, list, btns, settings, paths;
  var clickedLineIndex = null;
  var clickedPathIndex = null;
  var timeout = null;
  var el = target;
  var cache = [];
  var self = this;
  
  
  
  // executes events outside this class
  var execEvent = function (type) {
    if ( !self.events[type] ) { return; }
    for ( var i = 0; i < self.events[type].length; i++ ) {
      self.events[type][i].apply(self, [].slice.call(arguments, 1));
    }
  }



  var onClick = function(e) {
    
    if (currentPath == null) {
      currentPath = paths.length;
      currentPoint = null;
      paths.push([]);
    }
    
    var points = paths[clickedPathIndex !== null ? clickedPathIndex : currentPath];

    // if selected point is NOT first nor last, deselect:
    if (points !== null && currentPoint !== 0 && currentPoint !== points.length - 1 && points.length !== 0 && clickedLineIndex === null) {
      currentPoint = null;
      currentPath = null;
    } else {
      var newPoint = { x: e.offsetX, y: e.offsetY };

      if (clickedLineIndex !== null) {
        points.splice(clickedLineIndex + 1, 0, newPoint);
        currentPoint = clickedLineIndex + 1;
        currentPath = clickedPathIndex;
      } else if (currentPoint !== points.length - 1) { // prepent new point:
        points.unshift(newPoint);
        currentPoint = 0;
      } else { // append new point:
        points.push(newPoint);
        currentPoint = points.length - 1;
      }
      
      store();
      execEvent('change', cleanup(paths));
    }

		draw();

    clickedLineIndex = null;
    clickedPathIndex = null;
  }



  var onMouseMove = function(e) {
    if (grabbed !== null) {
      if (!!dragged || (Math.abs(paths[currentPath][grabbed].startX - e.offsetX) > 5 &&...