index.php

   1 <!DOCTYPE html>
   2 <svg id="map" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1525 405" width="1525">
   3 <style>
   4         .block {
   5                 fill: rgba(0,255,255,0.8);
   6         }
   7 </style>
   8 <?php
   9 require 'config.php';
  10 $sth = $dbh->prepare('SELECT id, x, y, width, height, occupant FROM rects');
  11 $sth->execute();
  12 $sth->bind_result($id, $x, $y, $w, $h, $occupant);
  13 while ($sth->fetch()) {
  14         echo '<rect x="' . $x . '" y="' . $y . '" width="' . $w . '" height="' . $h . '" class="block" />' . PHP_EOL;
  15 }
  16 $sth->close();
  17
  18 $sth = $dbh->prepare('SELECT id, pointset, occupant FROM polys');
  19 $sth->execute();
  20 $sth->bind_result($id, $pointset, $occupant);
  21 while ($sth->fetch()) {
  22         echo '<polygon points="' . $pointset . '" class="block" />' . PHP_EOL;
  23 }
  24 ?>
  25         <image href="https://private.simplynuc.com/john-test/plan/495.svg" width="1525" />
  26 </svg>
  27 <script>
  28 var max_variance = 5;
  29
  30 var svgNS = "http://www.w3.org/2000/svg";
  31
  32 var ele = document.getElementById('map');
  33 var startpos = null;
  34 var poslist = [];
  35 var in_progress = null;
  36 ele.addEventListener('mousedown', function (ev) {
  37         in_progress = document.createElementNS(svgNS, 'circle');
  38         in_progress.setAttributeNS(null,'r',5);
  39         in_progress.setAttributeNS(null,'cx',ev.offsetX);
  40         in_progress.setAttributeNS(null,'cy',ev.offsetY);
  41         ele.appendChild(in_progress);
  42         startpos = [ev.offsetX, ev.offsetY];
  43 });
  44 ele.addEventListener('mouseup', function (ev) {
  45         if (startpos) {
  46                 if (!poslist.length && (Math.abs(startpos[0]-ev.offsetX) > max_variance || Math.abs(startpos[1]-ev.offsetY) > max_variance)) {
  47                         // rectangle mode
  48                         console.log(startpos, [ev.offsetX, ev.offsetY]);
  49                         in_progress.parentNode.removeChild(in_progress);
  50                 } else {
  51                         // polygon mode
  52                         poslist.push(in_progress);
  53                 }
  54                 startpos = null;
  55         }
  56 });
  57 ele.addEventListener('mousemove', function (ev) {
  58         if (startpos && !poslist.length) {
  59                 if (Math.abs(startpos[0]-ev.offsetX) > max_variance || Math.abs(startpos[1]-ev.offsetY) > max_variance) {
  60                         if (in_progress.tagName == 'circle') {
  61                                 in_progress.parentNode.removeChild(in_progress);
  62                                 in_progress = null;
  63                         }
  64                         if (!in_progress) {
  65                                 in_progress = document.createElementNS(svgNS, 'rect');
  66                         }
  67                         in_progress.setAttributeNS(null,'fill','rgba(0,0,255,0.5)');
  68                         in_progress.setAttributeNS(null,'x',startpos[0]);
  69                         in_progress.setAttributeNS(null,'y',startpos[1]);
  70                         in_progress.setAttributeNS(null,'width',ev.offsetX-startpos[0]);
  71                         in_progress.setAttributeNS(null,'height',ev.offsetY-startpos[1]);
  72                         ele.appendChild(in_progress);
  73                         // display in-progress rectangle
  74                 }
  75         }
  76 });
  77
  78 function clear_poslist() {
  79         poslist.forEach(function (v) { v.parentNode.removeChild(v); });
  80         poslist = [];
  81 }
  82 </script>