From 5d61e668307c67de2693d564e20e45a2234db493 Mon Sep 17 00:00:00 2001
From: Shandy Brown <github@ezide.com>
Date: Sat, 20 Mar 2021 13:38:14 -0700
Subject: [PATCH] Add a Mat Layer with grid paper and a chessboard (#28)

---
 src/index.html                |  52 ++--
 src/index.js                  |  51 +++-
 src/js/select_box.js          |   6 +-
 src/spatial.js                |   2 +
 src/svg/v1/mat_chessboard.svg | 465 ++++++++++++++++++++++++++++++++
 src/svg/v1/mat_gridpaper.svg  | 481 ++++++++++++++++++++++++++++++++++
 src/svg_draggable.js          |  56 +++-
 7 files changed, 1078 insertions(+), 35 deletions(-)
 create mode 100644 src/svg/v1/mat_chessboard.svg
 create mode 100644 src/svg/v1/mat_gridpaper.svg

diff --git a/src/index.html b/src/index.html
index a3deed1..99f98de 100644
--- a/src/index.html
+++ b/src/index.html
@@ -51,11 +51,22 @@
 <script>
 var table_border_rect
 var svg_table
+var layer_mats
 var layer_objects
 var layer_ui
 var viewport
 var origViewportSize
 
+function createLayer(id) {
+  layer = svg_table.group()
+  layer.attr({
+    id: id,
+  })
+  layer.addClass('layer')
+  layer.addClass(id)
+  return layer
+}
+
 function initSvgTable(el) {
   svg_table = SVG.adopt(el)
   svg_table.attr({
@@ -63,18 +74,11 @@
     width: origViewportSize[0],
     height: origViewportSize[1],
   })
-  layer_objects = svg_table.group()
-  layer_objects.attr({
-    id: 'layer_objects',
-  })
-  layer_objects.addClass('layer')
-  layer_objects.addClass('layer_objects')
-  layer_ui = svg_table.group()
-  layer_ui.attr({
-    id: 'layer_ui',
-  })
-  layer_ui.addClass('layer')
-  layer_ui.addClass('layer_ui')
+
+  layer_mats = createLayer('layer_mats')
+  layer_objects = createLayer('layer_objects')
+  layer_ui = createLayer('layer_ui')
+
   viewport.add(svg_table)
 
   makeDraggable(SVG.adopt(byId('svg_viewport')), svg_table)
@@ -1750,7 +1754,7 @@ <h1 id="image_dice_h1">Image Dice</h1>
 
   _import_foreign_svg(body)
   .then(nest => {
-    add_to_screen(nest, {})
+    add_to_layer_objects(nest, {})
     ui.popdown_dialog('dialog_svgfile')
   })
 }
@@ -1904,7 +1908,7 @@ <h3>Examples:</h3>
     height: h,
     fill: color,
   });
-  add_to_screen(nest)
+  add_to_layer_objects(nest)
   ui.popdown_dialog('dialog_rect')
 }
 
@@ -2053,7 +2057,7 @@ <h3>Examples:</h3>
     return;
   }
   var nest = make_text(c, color, bgcolor)
-  add_to_screen(nest)
+  add_to_layer_objects(nest)
   ui.popdown_dialog('dialog_text')
 }
 
@@ -2140,7 +2144,7 @@ <h3>Examples:</h3>
     cy: h / 2,
     fill: color,
   })
-  add_to_screen(nest)
+  add_to_layer_objects(nest)
   ui.popdown_dialog('dialog_ellipse')
 }
 
@@ -2207,6 +2211,7 @@ <h3>Examples:</h3>
       <ul class="left">
         <li><a href="#drawing">Drawing</a></li>
         <li><a href="#dynamic_tray">Dynamic Tray</a></li>
+        <li><a href="#mats">Mats</a></li>
       </ul>
     </div>
     </nav>
@@ -2291,6 +2296,21 @@ <h1 id="dynamic_tray_h1">Dynamic Tray</h1>
         Genesys
       </button>
     </section>
+    <section id="mats_section">
+      <a name="mats"></a>
+      <h1 id="mats_h1">Mats</h1>
+      <p>
+      Mats go beneath other objects and have snap-to behaviour
+      </p>
+      <button class="btn btn-small modal-close"
+        onclick="add_mat('svg/v1/mat_gridpaper.svg')">
+        Grid Paper
+      </button>
+      <button class="btn btn-small modal-close"
+        onclick="add_mat('svg/v1/mat_chessboard.svg')">
+        Chessboard
+      </button>
+    </section>
     </div>
   </div>
 
diff --git a/src/index.js b/src/index.js
index 915e89f..1958f4c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -220,15 +220,6 @@ function _import_foreign_svg(body, url) { /* RETURNS PROMISE */
     'data-app-url': url,
     'data-orig-name': origId,
   })
-  // Ensure the imported SVG is of a reasonable screen size
-  if (nest.width() < 30 || nest.width() > 520) {
-    console.warn('Reigned in the width to 100. Was', nest.width())
-    nest.width(100)
-  }
-  if (nest.height() < 30 || nest.height() > 520) {
-    console.warn('Reigned in the height to 100. Was', nest.height())
-    nest.height(100)
-  }
   nest.addClass('draggable-group')
   //TODO: should this be nest.node instead of frame?
   var promises = []
@@ -498,8 +489,17 @@ function add_n_objects_from_prototype(n, prototype, center) {
   }
 }
 
-function add_to_screen(nest, attrs) {
-  console.log('add_to_screen', attrs)
+function add_to_layer_mats(nest) {
+  console.log('add_to_layer_mats')
+  let center = ui.player_marker_position()
+  nest.x(center[0])
+  nest.y(center[1])
+  layer_mats.add(nest)
+  init_with_namespaces(nest.node)
+}
+
+function add_to_layer_objects(nest, attrs) {
+  console.log('add_to_layer_objects', attrs)
   setColor(nest.node, (attrs && attrs.color) || getUserColor())
   let center = ui.player_marker_position()
   if (attrs && attrs.offset !== undefined) {
@@ -519,11 +519,34 @@ async function add_object(url, attrs) {
   // console.log('add_object', url, attrs)
   let nest = await import_foreign_svg(url)
 
+  // Ensure the imported SVG is of a reasonable screen size
+  if (nest.width() < 30 || nest.width() > 420) {
+    console.warn('Reined in the width to 100. Was', nest.width())
+    nest.width(100)
+  }
+  if (nest.height() < 30 || nest.height() > 420) {
+    console.warn('Reined in the height to 100. Was', nest.height())
+    nest.height(100)
+  }
+
+  // Allow 400 miliseconds for the scripts to load
+  if (alreadyAddedObjectURLs[url]) {
+    add_to_layer_objects(nest, attrs)
+  } else {
+    setTimeout(add_to_layer_objects.bind(null, nest, attrs), 400)
+  }
+  alreadyAddedObjectURLs[url] = 1
+}
+
+async function add_mat(url) {
+  // console.log('add_mat', url )
+  let nest = await import_foreign_svg(url)
+
   // Allow 400 miliseconds for the scripts to load
   if (alreadyAddedObjectURLs[url]) {
-    add_to_screen(nest, attrs)
+    add_to_layer_mats(nest)
   } else {
-    setTimeout(add_to_screen.bind(null, nest, attrs), 400)
+    setTimeout(add_to_layer_mats.bind(null, nest), 400)
   }
   alreadyAddedObjectURLs[url] = 1
 }
@@ -538,7 +561,7 @@ async function clone_object(el, attrs) {
     subEl.id = 'o_' + base32.short_id() + i
     i++
   })
-  add_to_screen(nest, attrs)
+  add_to_layer_objects(nest, attrs)
 }
 
 function pop_from_parent(childElem) {
diff --git a/src/js/select_box.js b/src/js/select_box.js
index 7f800e7..d7bf721 100644
--- a/src/js/select_box.js
+++ b/src/js/select_box.js
@@ -82,8 +82,10 @@ var select_box = {
       selectedEl = layer_objects.node.querySelector('#' + id)
       svg_el = SVG.adopt(selectedEl)
       // console.log('x', newX + offsets[i][0] )
-      svg_el.x( newX + offsets[i][0] )
-      svg_el.y( newY + offsets[i][1] )
+      svg_el.attr({
+        x: newX + offsets[i][0],
+        y: newY + offsets[i][1],
+      })
       i += 1
     })
   },
diff --git a/src/spatial.js b/src/spatial.js
index fc39ac7..f0e2f4f 100644
--- a/src/spatial.js
+++ b/src/spatial.js
@@ -11,6 +11,8 @@ function pointInsideBox(point, box) {
 }
 
 var spatial = {
+  pointInsideBox: pointInsideBox,
+
   getTopLevelSVGNodeList: () => {
     return layer_objects.node.querySelectorAll(
       '#' + layer_objects.id() + ' > .draggable-group'
diff --git a/src/svg/v1/mat_chessboard.svg b/src/svg/v1/mat_chessboard.svg
new file mode 100644
index 0000000..3d73edc
--- /dev/null
+++ b/src/svg/v1/mat_chessboard.svg
@@ -0,0 +1,465 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="800"
+   height="800"
+   viewBox="0 0 211.66666 211.66667"
+   version="1.1"
+   class="mat_chessboard"
+   id="svg151"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <defs id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g id="g219" class="snaptarget" >
+    <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         width="22.1"
+         height="22.1"
+         x="9.3"
+         y="181.0" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         y="156.6"
+         x="9.3"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         width="22.1"
+         height="22.1"
+         x="9.3"
+         y="132.3" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         y="107.9"
+         x="9.3"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         y="181.0"
+         x="33.7"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="58.0"
+         y="181.0" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         y="181.0"
+         x="82.4"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="82.4"
+         y="156.6" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         y="156.6"
+         x="58.0"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="33.7"
+         y="156.6" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         y="132.3"
+         x="33.7"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="58.0"
+         y="132.3" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         y="132.3"
+         x="82.4"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="82.4"
+         y="107.9" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         y="107.9"
+         x="58.0"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="33.7"
+         y="107.9" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         y="181.0"
+         x="106.7"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="106.7"
+         y="156.6" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         y="132.3"
+         x="106.7"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="106.7"
+         y="107.9" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="131.1"
+         y="181.0" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         y="181.0"
+         x="155.4"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="179.8"
+         y="181.0" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         y="156.6"
+         x="179.8"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="155.4"
+         y="156.6" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         y="156.6"
+         x="131.1"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="131.1"
+         y="132.3" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         y="132.3"
+         x="155.4"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="179.8"
+         y="132.3" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         y="107.9"
+         x="179.8"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="155.4"
+         y="107.9" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         y="107.9"
+         x="131.1"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         y="83.6"
+         x="9.3"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="9.3"
+         y="59.2" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         y="34.9"
+         x="9.3"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="33.7"
+         y="83.6" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         y="83.6"
+         x="58.0"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="82.4"
+         y="83.6" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         y="59.2"
+         x="82.4"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="58.0"
+         y="59.2" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         y="59.2"
+         x="33.7"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="33.7"
+         y="34.9" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         y="34.9"
+         x="58.0"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="82.4"
+         y="34.9" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         y="10.6"
+         x="82.4"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="58.0"
+         y="10.6" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         y="10.6"
+         x="33.7"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="106.7"
+         y="83.6" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         y="59.2"
+         x="106.7"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="106.7"
+         y="34.9" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         y="10.6"
+         x="106.7"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         y="83.6"
+         x="131.1"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="155.4"
+         y="83.6" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         y="83.6"
+         x="179.8"
+         height="22.1"
+         width="22.1" />
+      <rect
+         tyle="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="179.8"
+         y="59.2" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         y="59.2"
+         x="155.4"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="131.1"
+         y="59.2" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         y="34.9"
+         x="131.1"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="155.4"
+         y="34.9" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         y="34.9"
+         x="179.8"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="179.8"
+         y="10.6" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         y="10.6"
+         x="155.4"
+         height="22.1"
+         width="22.1" />
+      <rect
+         style="fill:#1a1a1a;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="131.1"
+         y="10.6" />
+      <rect
+         style="fill:#f2f2f2;fill-opacity:1;stroke-width:2.0"
+         
+         width="22.1"
+         height="22.1"
+         x="9.3"
+         y="10.6" />
+    </g>
+  </g>
+</svg>
diff --git a/src/svg/v1/mat_gridpaper.svg b/src/svg/v1/mat_gridpaper.svg
new file mode 100644
index 0000000..73c995f
--- /dev/null
+++ b/src/svg/v1/mat_gridpaper.svg
@@ -0,0 +1,481 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="800"
+   height="800"
+   viewBox="0 0 211.6 211.6"
+   version="1.1"
+   class="gridpaper"
+   >
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:1"
+
+       width="211.66"
+       height="211.66"
+       x="0"
+       y="0" />
+    <path
+       style="fill:none;stroke:#00ffff;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 21.679412,10.69939 V 202.33331"
+       id="path10"
+        />
+    <path
+       id="path12"
+       d="M 42.84608,10.69939 V 202.33331"
+       style="fill:none;stroke:#00ffff;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    <path
+       style="fill:none;stroke:#00ffff;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 64.012748,10.69939 V 202.33331"
+       id="path14"
+        />
+    <path
+       id="path16"
+       d="M 85.179416,10.69939 V 202.33331"
+       style="fill:none;stroke:#00ffff;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    <path
+       style="fill:none;stroke:#00ffff;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 106.34609,10.69939 V 202.33331"
+       id="path18"
+        />
+    <path
+       
+       id="path20"
+       d="M 127.51277,10.69939 V 202.33331"
+       style="fill:none;stroke:#00ffff;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    <path
+       style="fill:none;stroke:#00ffff;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 148.67945,10.69939 V 202.33331"
+       id="path22"
+        />
+    <path
+       
+       id="path24"
+       d="M 169.84613,10.69939 V 202.33331"
+       style="fill:none;stroke:#00ffff;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    <path
+       style="fill:none;stroke:#00ffff;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 10,106.51635 H 201.63392"
+       id="path26"
+        />
+    <path
+       style="fill:none;stroke:#00ffff;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 191.01281,10.69939 V 202.33331"
+       id="path28"
+        />
+    <path
+       
+       id="path30"
+       d="M 10,85.349669 H 201.63392"
+       style="fill:none;stroke:#00ffff;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    <path
+       style="fill:none;stroke:#00ffff;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 10,64.182989 H 201.63392"
+       id="path32"
+        />
+    <path
+       
+       id="path34"
+       d="M 10,43.016309 H 201.63392"
+       style="fill:none;stroke:#00ffff;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    <path
+       style="fill:none;stroke:#00ffff;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 10,21.849629 H 201.63392"
+       id="path36"
+        />
+    <path
+       
+       id="path38"
+       d="M 10,127.68303 H 201.63392"
+       style="fill:none;stroke:#00ffff;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    <path
+       style="fill:none;stroke:#00ffff;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 10,148.84971 H 201.63392"
+       id="path40"
+        />
+    <path
+       
+       id="path42"
+       d="M 10,170.01639 H 201.63392"
+       style="fill:none;stroke:#00ffff;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    <path
+       style="fill:none;stroke:#00ffff;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 10,191.18307 H 201.63392"
+       id="path44"
+        />
+    <g
+       id="g219"
+       class="snaptarget"
+       style="opacity:1;fill:#fafafa;fill-opacity:1"
+       transform="translate(0,-84.6)">
+      <rect
+         x="27.516668"
+         y="261.54581"
+         height="8"
+         width="8"
+         id="rect21" />
+      <rect
+         width="8"
+         height="8"
+         x="27.516668"
+         y="240.37914"
+         id="rect23" />
+      <rect
+         y="219.21245"
+         x="27.516668"
+         height="8"
+         width="8"
+         id="rect25" />
+      <rect
+         width="8"
+         height="8"
+         x="27.516668"
+         y="198.04576"
+         id="rect27" />
+      <rect
+         width="8"
+         height="8"
+         x="48.683338"
+         y="261.54581"
+         id="rect29" />
+      <rect
+         y="261.54581"
+         x="69.849998"
+         height="8"
+         width="8"
+         id="rect31" />
+      <rect
+         width="8"
+         height="8"
+         x="91.016663"
+         y="261.54581"
+         id="rect33" />
+      <rect
+         y="240.37914"
+         x="91.016663"
+         height="8"
+         width="8"
+         id="rect35" />
+      <rect
+         width="8"
+         height="8"
+         x="69.849998"
+         y="240.37914"
+         id="rect37" />
+      <rect
+         y="240.37914"
+         x="48.683338"
+         height="8"
+         width="8"
+         id="rect39" />
+      <rect
+         width="8"
+         height="8"
+         x="48.683338"
+         y="219.21245"
+         id="rect41" />
+      <rect
+         y="219.21245"
+         x="69.849998"
+         height="8"
+         width="8"
+         id="rect43" />
+      <rect
+         width="8"
+         height="8"
+         x="91.016663"
+         y="219.21245"
+         id="rect45" />
+      <rect
+         y="198.04576"
+         x="91.016663"
+         height="8"
+         width="8"
+         id="rect47" />
+      <rect
+         width="8"
+         height="8"
+         x="69.849998"
+         y="198.04576"
+         id="rect49" />
+      <rect
+         y="198.04576"
+         x="48.683338"
+         height="8"
+         width="8"
+         id="rect51" />
+      <rect
+         width="8"
+         height="8"
+         x="112.18331"
+         y="261.54581"
+         id="rect53" />
+      <rect
+         y="240.37914"
+         x="112.18331"
+         height="8"
+         width="8"
+         id="rect55" />
+      <rect
+         width="8"
+         height="8"
+         x="112.18331"
+         y="219.21245"
+         id="rect57" />
+      <rect
+         y="198.04576"
+         x="112.18331"
+         height="8"
+         width="8"
+         id="rect59" />
+      <rect
+         y="261.54581"
+         x="133.34999"
+         height="8"
+         width="8"
+         id="rect61" />
+      <rect
+         width="8"
+         height="8"
+         x="154.51668"
+         y="261.54581"
+         id="rect63" />
+      <rect
+         y="261.54581"
+         x="175.68336"
+         height="8"
+         width="8"
+         id="rect65" />
+      <rect
+         width="8"
+         height="8"
+         x="175.68336"
+         y="240.37914"
+         id="rect67" />
+      <rect
+         y="240.37914"
+         x="154.51668"
+         height="8"
+         width="8"
+         id="rect69" />
+      <rect
+         width="8"
+         height="8"
+         x="133.34999"
+         y="240.37914"
+         id="rect71" />
+      <rect
+         y="219.21245"
+         x="133.34999"
+         height="8"
+         width="8"
+         id="rect73" />
+      <rect
+         width="8"
+         height="8"
+         x="154.51668"
+         y="219.21245"
+         id="rect75" />
+      <rect
+         y="219.21245"
+         x="175.68336"
+         height="8"
+         width="8"
+         id="rect77" />
+      <rect
+         width="8"
+         height="8"
+         x="175.68336"
+         y="198.04576"
+         id="rect79" />
+      <rect
+         y="198.04576"
+         x="154.51668"
+         height="8"
+         width="8"
+         id="rect81" />
+      <rect
+         width="8"
+         height="8"
+         x="133.34999"
+         y="198.04576"
+         id="rect83" />
+      <rect
+         width="8"
+         height="8"
+         x="27.516668"
+         y="176.87907"
+         id="rect85" />
+      <rect
+         y="155.71239"
+         x="27.516668"
+         height="8"
+         width="8"
+         id="rect87" />
+      <rect
+         width="8"
+         height="8"
+         x="27.516668"
+         y="134.5457"
+         id="rect89" />
+      <rect
+         y="113.37902"
+         x="27.516668"
+         height="8"
+         width="8"
+         id="rect91" />
+      <rect
+         y="176.87907"
+         x="48.683338"
+         height="8"
+         width="8"
+         id="rect93" />
+      <rect
+         width="8"
+         height="8"
+         x="69.849998"
+         y="176.87907"
+         id="rect95" />
+      <rect
+         y="176.87907"
+         x="91.016663"
+         height="8"
+         width="8"
+         id="rect97" />
+      <rect
+         width="8"
+         height="8"
+         x="91.016663"
+         y="155.71239"
+         id="rect99" />
+      <rect
+         y="155.71239"
+         x="69.849998"
+         height="8"
+         width="8" />
+      <rect
+         width="8"
+         height="8"
+         x="48.683338"
+         y="155.71239" />
+      <rect
+         y="134.5457"
+         x="48.683338"
+         height="8"
+         width="8" />
+      <rect
+         width="8"
+         height="8"
+         x="69.849998"
+         y="134.5457" />
+      <rect
+         y="134.5457"
+         x="91.016663"
+         height="8"
+         width="8" />
+      <rect
+         width="8"
+         height="8"
+         x="91.016663"
+         y="113.37902" />
+      <rect
+         y="113.37902"
+         x="69.849998"
+         height="8"
+         width="8" />
+      <rect
+         width="8"
+         height="8"
+         x="48.683338"
+         y="113.37902" />
+      <rect
+         y="176.87907"
+         x="112.18331"
+         height="8"
+         width="8" />
+      <rect
+         width="8"
+         height="8"
+         x="112.18331"
+         y="155.71239" />
+      <rect
+         y="134.5457"
+         x="112.18331"
+         height="8"
+         width="8" />
+      <rect
+         width="8"
+         height="8"
+         x="112.18331"
+         y="113.37902" />
+      <rect
+         width="8"
+         height="8"
+         x="133.34999"
+         y="176.87907" />
+      <rect
+         y="176.87907"
+         x="154.51668"
+         height="8"
+         width="8" />
+      <rect
+         width="8"
+         height="8"
+         x="175.68336"
+         y="176.87907" />
+      <rect
+         y="155.71239"
+         x="175.68336"
+         height="8"
+         width="8" />
+      <rect
+         width="8"
+         height="8"
+         x="154.51668"
+         y="155.71239" />
+      <rect
+         y="155.71239"
+         x="133.34999"
+         height="8"
+         width="8" />
+      <rect
+         width="8"
+         height="8"
+         x="133.34999"
+         y="134.5457" />
+      <rect
+         y="134.5457"
+         x="154.51668"
+         height="8"
+         width="8" />
+      <rect
+         width="8"
+         height="8"
+         x="175.68336"
+         y="134.5457" />
+      <rect
+         y="113.37902"
+         x="175.68336"
+         height="8"
+         width="8" />
+      <rect
+         width="8"
+         height="8"
+         x="154.51668"
+         y="113.37902" />
+      <rect
+         y="113.37902"
+         x="133.34999"
+         height="8"
+         width="8" />
+    </g>
+  </g>
+</svg>
diff --git a/src/svg_draggable.js b/src/svg_draggable.js
index 543fc17..37c2b01 100644
--- a/src/svg_draggable.js
+++ b/src/svg_draggable.js
@@ -105,7 +105,6 @@ function makeDraggable(viewport, table) {
 
   function getMousePosition(evt) {
     //var CTM = viewport.node.getScreenCTM();
-    var CTM = table.node.getScreenCTM();
     if (evt.touches) {
       if (evt.touches.length === 0) {
         return mouse
@@ -114,12 +113,21 @@ function makeDraggable(viewport, table) {
     } else {
       evtPos = evt
     }
+    var CTM = table.node.getScreenCTM();
     return {
       x: (evtPos.clientX - CTM.e) / CTM.a,
       y: (evtPos.clientY - CTM.f) / CTM.d
     };
   }
 
+  function fromClientToSVGCoords(x,y) {
+    var CTM = table.node.getScreenCTM();
+    return {
+      x: (x) / CTM.a,
+      y: (y) / CTM.d,
+    };
+  }
+
   function mouseLeave(evt) {
     debug('mouseLeave')
     if (selectedEl) {
@@ -259,8 +267,17 @@ function makeDraggable(viewport, table) {
           tableBoundaries.minY,
           tableBoundaries.maxY - selectedEl.bbox().height,
         )
-        selectedEl.x(newX)
-        selectedEl.y(newY)
+        selectedEl.attr({
+          x: newX,
+          y: newY,
+        })
+        let snapDeltaCoords = snapTo()
+        if (snapDeltaCoords) {
+        selectedEl.attr({
+          x: newX + snapDeltaCoords.x,
+          y: newY + snapDeltaCoords.y,
+        })
+        }
         if (selectedEl.node.classList.contains('select_box')) {
           // Special case for select boxes: we tell them to move their
           // surrounded elements here, before the broadcast() so that
@@ -292,6 +309,39 @@ function makeDraggable(viewport, table) {
     }
   }
 
+  function snapTo() {
+    let deltaXY = null
+    let selBox = selectedEl.node.getBoundingClientRect()
+    let center = [
+      (selBox.x + selBox.width/2),
+      (selBox.y + selBox.height/2)
+    ]
+    // console.log("projected cneter", center)
+    table.node.querySelectorAll('.snaptarget > rect').forEach((el) => {
+      if ( selectedEl.node.id === el.id ) {
+        return // don't tell things they're being snapped into themselves
+      }
+      if (el.ownerSVGElement && el.ownerSVGElement.id === selectedEl.node.id) {
+        return // don't snap things into their own children
+      }
+      let snapBox = el.getBoundingClientRect()
+      let inside = spatial.pointInsideBox(center, snapBox)
+      if (!inside) {
+        return
+      }
+      // console.log('snap rect', el)
+      // console.log('snapbox ', snapBox)
+      // console.log('p center, ', center)
+      deltaXY = [
+        ((snapBox.x + snapBox.width/2) - center[0]),
+        ((snapBox.y + snapBox.height/2) - center[1]),
+      ]
+      // console.log('deltaXY', deltaXY)
+    })
+    // console.log('to svg coor', deltaXY ? fromClientToSVGCoords(deltaXY[0], deltaXY[1]) : null)
+    return deltaXY ? fromClientToSVGCoords(deltaXY[0], deltaXY[1]) : null
+  }
+
   function notifyDropTargetsDrag(evt) {
     table.node.querySelectorAll('.droptarget').forEach((el) => {
       if ( selectedEl.node.id === el.id ) {