0

I'm working on a Cinema related project for mobile-browser with Vue.js. I got the seat planning with position:absolute inside position:relative div. Apart from the seat planning, I also want the seating plan to be zoom-able. I managed to make it scalable by setting the scale of the parent div. However there are couple problems with that.

  1. The seats are not horizontally center with the Screen since they are position:absolute.
  2. I want the scaling of the seating plan to be fit to the parent div.
  3. Also when I Zooming In, the seats on the left are not visible.

Here's my code:

var app = new Vue({
  el: '#app',
  data: {
    seats,
    zoomScale: 1,
  },
  methods: {
    zoom: function (action) {
      if (action == '-') this.zoomScale -= 0.2;
      else if (action == '+') this.zoomScale += 0.2;
      else this.zoomScale = 1;
    }
  }
})
.screen {
  width: 400px;
  text-align: center;
}

.seat-plan {
  border: 1px solid pink;
  position: relative;
  width: 400px;
  height: 300px;
  
  overflow: auto;
}

.zoom-able {
  position: relative;
  width: 100%;
  height: 100%;
}

.seat {
  position: absolute;
  appearance: none;
  background: gray;
  color: white;
  border: 0;
  font-size: 0.6rem;
  width: 22px;
  height: 22px;
}
<div id="app">
  <div class="screen">Screen</div>

  <div class="seat-plan">

    <div
      class="zoom-able"
      :style="{transform: `scale(${zoomScale})`}"
    >
      <button
        class="seat"
        v-for="(seat, index) in seats"
        :key="index"
        :style="{left: `${seat.x}px`,top: `${seat.y}px`}"
       >
        {{ index }}
      </button>
    </div>

  </div>

  <div>{{ zoomScale }}</div>
  <div class="zoom-buttons">
    <button @click="zoom('-')">-</button>
    <button @click="zoom('default')">default</button>
    <button @click="zoom('+')">+</button>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var seats = [{"x":78,"y":0,},{"x":104,"y":0,},{"x":130,"y":0,},{"x":156,"y":0,},{"x":182,"y":0,},{"x":208,"y":0,},{"x":234,"y":0,},{"x":286,"y":0,},{"x":312,"y":0,},{"x":338,"y":0,},{"x":364,"y":0,},{"x":390,"y":0,},{"x":416,"y":0,},{"x":52,"y":34,},{"x":78,"y":34,},{"x":104,"y":34,},{"x":130,"y":34,},{"x":156,"y":34,},{"x":182,"y":34,},{"x":208,"y":34,},{"x":234,"y":34,},{"x":286,"y":34,},{"x":312,"y":34,},{"x":338,"y":34,},{"x":364,"y":34,},{"x":390,"y":34,},{"x":416,"y":34,},{"x":442,"y":34,},{"x":52,"y":68,},{"x":78,"y":68,},{"x":104,"y":68,},{"x":130,"y":68,},{"x":156,"y":68,},{"x":182,"y":68,},{"x":208,"y":68,},{"x":234,"y":68,},{"x":286,"y":68,},{"x":312,"y":68,},{"x":338,"y":68,},{"x":364,"y":68,},{"x":390,"y":68,},{"x":416,"y":68,},{"x":442,"y":68,},{"x":52,"y":102,},{"x":78,"y":102,},{"x":104,"y":102,},{"x":130,"y":102,},{"x":156,"y":102,},{"x":182,"y":102,},{"x":208,"y":102,},{"x":234,"y":102,},{"x":286,"y":102,},{"x":312,"y":102,},{"x":338,"y":102,},{"x":364,"y":102,},{"x":390,"y":102,},{"x":416,"y":102,},{"x":442,"y":102,},{"x":52,"y":136,},{"x":78,"y":136,},{"x":104,"y":136,},{"x":130,"y":136,},{"x":156,"y":136,},{"x":182,"y":136,},{"x":208,"y":136,},{"x":234,"y":136,},{"x":286,"y":136,},{"x":312,"y":136,},{"x":338,"y":136,},{"x":364,"y":136,},{"x":390,"y":136,},{"x":416,"y":136,},{"x":442,"y":136,},{"x":78,"y":170,},{"x":104,"y":170,},{"x":130,"y":170,},{"x":156,"y":170,},{"x":182,"y":170,},{"x":208,"y":170,},{"x":234,"y":170,},{"x":286,"y":170,},{"x":312,"y":170,},{"x":338,"y":170,},{"x":364,"y":170,},{"x":390,"y":170,},{"x":416,"y":170,}]
</script>
WaiLin
  • 161
  • 1
  • 2
  • 15

1 Answers1

0

Okay, I've been solving the wrong problem. Finally I found my solution from this Q&A.

The problem was from the css transform-origin which is causing the positioning of the buttons when transform: scale(). So the solution is wrapping the buttons with a div and set transform-origin: 0 0;, which will reset the origin of the div wrapping the buttons when scaling.

WaiLin
  • 161
  • 1
  • 2
  • 15