WIP- add <g> bumbu/svg-pan-zoom#146

seanpdoyle · May 28, 2019 · 1536864 · 1536864
1 parent e8d387f
commit 1536864
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 39 deletions.
diff --git a/app/javascript/controllers/seats_controller.js b/app/javascript/controllers/seats_controller.js
@@ -14,22 +14,15 @@ export default class extends Controller {
       zoomScaleSensitivity: 0.75,
       minZoom: 1.0,
       maxZoom: 8,
-      beforePan: this.updatePan.bind(this),
-      beforeZoom: this.updateZoom.bind(this),
+      viewportSelector: "#map-viewport",
     })
-
-    if (zoom && x && y) {
-      zoom = parseFloat(zoom)
-      x = parseFloat(x)
-      y = parseFloat(y)
-      this.map.zoom(zoom)
-      this.map.pan({ x, y })
-    }
     this.selectSeats()
   }
 
   disconnect() {
-    this.map.destroy()
+    if (!this.mapTarget.hasAttribute("data-turbolinks-permanent")) {
+      this.map.destroy()
+    }
   }
 
   discardMap() {
@@ -75,15 +68,4 @@ export default class extends Controller {
   zoomOut() {
     this.map.zoomOut()
   }
-
-  updateZoom(_, zoom) {
-    this.mapTarget.dataset.zoom = zoom
-  }
-
-  updatePan(_, { x, y }) {
-    const { dataset } = this.mapTarget
-
-    dataset.x = x
-    dataset.y = y
-  }
 }
diff --git a/app/views/seats/_frame.html.erb b/app/views/seats/_frame.html.erb
@@ -91,23 +91,25 @@
             </symbol>
           </svg>
 
-          <% seats.each do |seat| %>
-            <a href="<%= venue_floor_seat_path(venue, floor, seat) %>" aria-label="<%= seat.row_number %>">
-              <use
-                xlink:href="#seat-icon-unselected"
-                width="12px"
-                height="12px"
-                x="<%= seat.x %>"
-                y="<%= seat.y %>"
-                data-target="seats.seat"
-                data-seat-id="<%= seat.id %>"
-                data-selected-icon="#seat-icon-selected"
-                data-unselected-icon="#seat-icon-unselected"
-                data-price="<%= seat.price %>"
-              >
-              </use>
-            </a>
-          <% end %>
+          <g id="map-viewport">
+            <% seats.each do |seat| %>
+              <a href="<%= venue_floor_seat_path(venue, floor, seat) %>" aria-label="<%= seat.row_number %>">
+                <use
+                  xlink:href="#seat-icon-unselected"
+                  width="12px"
+                  height="12px"
+                  x="<%= seat.x %>"
+                  y="<%= seat.y %>"
+                  data-target="seats.seat"
+                  data-seat-id="<%= seat.id %>"
+                  data-selected-icon="#seat-icon-selected"
+                  data-unselected-icon="#seat-icon-unselected"
+                  data-price="<%= seat.price %>"
+                >
+                </use>
+              </a>
+            <% end %>
+          </g>
         </svg>
 
         <div class="syos-frame__map-zoom syos-control-zoom">