JSFiddle - React, Tailwind, and code Playground

by mamounothman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- SVG Fenster -->
<div id="content">
  <svg id="drawing" title="Layouteditor" viewBox="0 0 600 500" xmlns="http://www.w3.org/2000/svg" version="2.0" preserveAspectRatio="xMidYMid meet">
    <g transform="translate(10, 10)" id="159" class="draggable preview symbol" pointer-events="fill" style="touch-action: nonhttps://jsfiddle.net/e; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
      <desc>
        <insert x="140" y="120"></insert>
        <pins>
          <pin id="1" x="140" y="120" direction="up"></pin>
          <pin id="2" x="140" y="120" direction="down"></pin>
        </pins>
        <properties>
          <property id="20010" x="100" y="160" angle="0"></property>
        </properties>
      </desc>
      <rect class="CDC300" x="80" y="100" width="41" height="41" fill="none"></rect>
      <line class="CDC300" x1="140" y1="120" x2="121" y2="120" fill="none"></line>
      <text class="CDC300" x="100" y="131" fill="#000000" text-anchor="middle" font-size="30px" font-family="sans-serif" stroke-width="0.3">T</text>
      <text id="20010" class="CDC400" x="75" y="125" text-anchor="end">=HTC+HSP1</text>
      <circle class="insertpoint" cx="140" cy="120" r="3"></circle>
      <circle class="pin" cx="140" cy="120" r="2"></circle>
    </g>
    <g id="159" class="draggable preview symbol" pointer-events="fill" style="touch-action: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
      <desc>
        <insert x="140" y="120"></insert>
        <pins>
          <pin id="1" x="140" y="120" direction="up"></pin>
          <pin id="2" x="140" y="120" direction="down"></pin>
        </pins>
        <properties>
          <property id="20010" x="100" y="160" angle="0"></property>
        </properties>
      </desc>
      <rect class="CDC300" x="80" y="100" width="41" height="41"...

CSS

.preview {
  /*cursor: grab;*/
  stroke: #000000;
  stroke-width: 0, 8;
}

/*Symbolgrafik*/
.CDC300 {
  /*fill: none;
    stroke-width: 0.8;
    stroke: #ff0000;*/
  opacity: 0.7;
}

/*BMK sichtbar*/
.CDC400 {
  font: 16px sans-serif;
  fill: #000000;
  stroke-width: 0;
}

/*Pin-Marker*/
.pin {
  visibility: hidden;
  /*visibility: visible;*/
  fill: #4cff00;
}

/*EinfĂĽgepunkt*/
.insertpoint {
  visibility: hidden;
  /*visibility: visible;*/
  fill: #ff0000;
}

.mouseovereffect {
    opacity: 1;
    stroke-width: 2;
}

JavaScript

$(document).ready(function() {
  d3.selectAll('.symbol')
  .on("mouseover", onMouseOver)
  .on("mouseout", onMouseOut)
    .call(d3.drag()
      .on("start", dragStart)
      .on("drag", dragging)
      .on("end", dragEnd));
console.log("ready");
})

function dragStart() {
  console.log("dragStart");
}

function dragging() {
	var xpos = d3.event.x;
  var ypos = d3.event.y;
  
  d3.selectAll('.draggable').each(function(){
		d3.select(this).attr("transform", "translate("+ xpos+ " " + ypos + ")");
	});
  console.log(xpos);
}

function dragEnd() {
  console.log("dragEnd");
}

function onMouseOver(d, i) {
  d3.select(this).style('cursor', 'pointer').classed('mouseovereffect', true);
}
function onMouseOut(){
	d3.select(this).style('cursor', 'default').classed('mouseovereffect', false);
}