Add a Mat Layer with grid paper and a chessboard (#28)

src/index.html

@@ -51,30 +51,34 @@
 <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({
     id: 'svg_table',
     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>
 

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) {

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
     })
   },

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'