animation

by Abhi9kt

HTML

<body>
  <div class="inputParams">
    <div class="inputParam">
      <label for="elementType">Element Type</label>
      <input id="elementType" name="elementType" type="text"/>
    </div>
    <div class="inputParam">
      <label for="elementName">Element Name</label>
      <input id="elementName" name="elementName" type="text"/>
    </div>
    <div class="inputParam">
      <label for="xPos">X-Position</label>
      <input id="xPos" name="xPos" type="text"/>    
    </div>
    <div class="inputParam">
      <label for="yPos">Y-Position</label>
      <input id="yPos" name="yPos" type="text"/>
    </div>
    <div class="inputParam">
      <label for="width">Width:</label>
      <input id="width" name="width" type="text"/>    
    </div>
    <div class="inputParam">
      <label for="height">Height:</label>
      <input id="height" name="height" type="text"/>   
    </div>
    <div>
      <input type="button" value="create" onclick="createNewElement()"/>
    </div>
  </div>

  
  <svg id="drawArea" width="512" height="512" viewBox="0 0 256 256" onload="makeDraggable(evt);">
  </svg>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>

CSS

.inputParams {
  padding-bottom: 20px;
}

.inputParam input {
  padding: 2px;
}

rect .draggable {
  cursor: move;
}

#drawArea rect {
  rx: 5;
  ry: 5;
}

#drawArea line {
  stroke: black;
  stroke-width: 2;
}

#drawArea circle {
  stroke: black;
}

JavaScript

/* anime({
  targets: '.pointer',
  cx: [16, 216],
  easing: 'easeInOutQuad',
  loop: true,
  direction: 'alternate',
  duration: '1000'

}); */

function makeDraggable(evt) {
  var svg = evt.target;
  svg.addEventListener('mousedown', startDrag);
  svg.addEventListener('mousemove', drag);
  svg.addEventListener('mouseup', endDrag);
  svg.addEventListener('mouseleave', endDrag);
  function startDrag(evt) {
  }
  function drag(evt) {
  }
  function endDrag(evt) {
  }
}

function createNewElement() {
	svg = d3.select('#drawArea');
  elementType = d3.select('#elementType').property('value');
  attrValueInputIds = {
  	'x position': '#xPos',
    'y position': '#yPos',
    'element name': '#elementName',
    'width': '#width',
    'height': '#height'
  }
  if (elementType === "rect") {
  	svg = svg.append('rect');
  	requiredProps = [['x position', 'x'], ['y position', 'y'], ['element name', 'class'], ['width', 'width'], ['height', 'height']];

    for(let i=0; i < requiredProps.length; i++) {
    	p = requiredProps[i];
    	attrValue = d3.select(attrValueInputIds[p[0]]).property('value');
    	if (!attrValue) {
      	window.alert(p[0] + ' is null');
      	return;
      } else {
      	svg = svg.attr(p[1], attrValue);
      }
    }
  } else if (elementType === "circle") {
  	svg = svg.append('circle').attr('stroke', 'black');
    requiredProps = [['x position', 'cx'], ['y position', 'cy'], ['element name', 'class'], ['width', 'r']];
     for(let i=0; i < requiredProps.length; i++) {
    	p = requiredProps[i];
    	attrValue = d3.select(attrValueInputIds[p[0]]).property('value');
    	if (!attrValue) {
      	window.alert(p[0] + ' is null');
      	return;
      } else {
      	svg = svg.attr(p[1], attrValue);
      }
    }
  } else if (elementType === "line") {
  	svg = svg.append('line');
    requiredProps = [['x position', 'x1'], ['y position', 'y1'], ['element name', 'class'], ['width', 'x2'], ['height', 'y2']];
     for(let i=0; i < requiredProps.length; i++) {
...