zn svg draggable testcase

by bwl21

HTML

<script src="https://rawgit.com/svgdotjs/svg.js/master/dist/svg.js"></script>
<script src="https://cdn.rawgit.com/svgdotjs/svg.draggable.js/master/dist/svg.draggable.js"></script>
<div id="container">
  <svg width="2200" height="1400" viewBox="0, 0, 440, 297" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs">
    <rect id="ZN_1" x="1" y="1" width="418" height="295" rx="0" ry="0" fill="none" stroke="black" stroke-width="0.1"></rect>
    <rect id="ZN_2" x="0" y="0" width="420" height="297" rx="0" ry="0" fill="none" stroke="black" stroke-width="0.1"></rect>

    <g id="ZN_18" class="zn_draggable" fill="green" transform="matrix(1,0,0,1,0,-2)">
      <path class="znunhighlight" stroke-width="0.1" d="M-0.75 -5.34c0.12 0 0.45 -0.03 0.69 -0.03c2.91 -0.03 5.55 1.53 7.41 4.35c1.17 1.71 1.95 3.72 2.43 6.03c0.12 0.51 0.12 0.57 0.03 0.69c-0.12 0.21 -0.48 0.27 -0.69 0.12c-0.12 -0.09 -0.18 -0.24 -0.27 -0.69c-0.78 -3.63 -3.42 -6.54 -6.78 -7.38c-0.78 -0.21 -1.2 -0.24 -2.07 -0.24c-0.63 0 -0.84 0 -1.2 0.06c-1.83 0.27 -3.42 1.08 -4.8 2.37c-1.41 1.35 -2.4 3.21 -2.85 5.19c-0.09 0.45 -0.15 0.6 -0.27 0.69c-0.21 0.15 -0.57 0.09 -0.69 -0.12c-0.09 -0.12 -0.09 -0.18 0.03 -0.69c0.33 -1.62 0.78 -3 1.47 -4.38c1.77 -3.54 4.44 -5.67 7.56 -5.97zm0.33 7.47c1.38 -0.3 2.58 0.9 2.31 2.25c-0.15 0.72 -0.78 1.35 -1.47 1.5c-1.38 0.27 -2.58 -0.93 -2.31 -2.31c0.15 -0.69 0.78 -1.29 1.47 -1.44z"
      fill="black" transform="translate(100.3,16) translate(0,0) scale(0.1452741606873948)"></path>
    </g>

    <text x="189" y="16" id="ZN_19" font-size="4" font-family="Arial" transform="scale(1.05, 1) translate(0,-1.5)" text-anchor="start">
      <tspan dy="1.2em" x="80">Drag me (ZN_19)</tspan>
    </text>

    <g id="ZN_20" x="304.76190476190476" y="7" class="zn_draggable">
      <text x="304.76190476190476" y="7" id="ZN_20" font-size="6.666666666666667" font-family="Arial" transform="scale(1.05, 1) translate(0,-2.5)"...

CSS

#container {
  width: 400px;
  max-width: 100%;
  position: absolute;
  left: 0px;
  top: 50px;
}

rect.abcref {
  fill: grey;
  fill-opacity: 0.01
}

rect.abcref:hover {
  fill-opacity: 0.5
}

rect.highlight {
  fill: red;
  fill-opacity: 0.2
}

.zn-nilfield {
  border: 1px solid #b5b4b6 !important;
  background-color: #b5b4b6 !important;
}

.znunhighlight {
  stroke: #000000;
}

.zn-statusbar {
  border: 1px solid #b5b4b6 !important;
}

.zn_draggable {
  cursor: pointer;
}

#mysvg {
  fill: #000;
  stroke: #fff;
  fill-opacity: 0.0;
  background: #000;
  stroke-width: 2.0;
  stroke-miterlimit: 10;
  max-width: 100%;
  height: auto;
  max-height: 400px;
}

JavaScript

function set_draggable(svg_element) {

  var xx = SVG.get(svg_element);
  xx.addClass("zn_draggable");

  xx.draggable(function(x, y) {
    return {
      x: Math.round(x),
      y: Math.round(y)
    }
  });

  var sx = 0,
    sy = 0;
  xx.on('dragstart', function(e) {
    sx = e.detail.p.x;
    sy = e.detail.p.y;
    this.fill("red");
  });

  // todo: don't know why 'this' is the only way to change the filling ...
  xx.on('dragend', function(e) {
    this.fill("green");
    var result = {
      delta: [e.detail.p.x - sx, e.detail.p.y - sy],
      element: svg_element
    };
    alert(JSON.stringify(result));
  })
}


set_draggable("ZN_18");
set_draggable("ZN_19");
set_draggable("ZN_20");
set_draggable("ZN_21");