playing around with separate store

app/src/App.vue

 <template>
   <div id="app">
-    <div id="nav">
-      <navigation/>
-    </div>
+    <navigation />
     <router-view />
   </div>
 </template>
@@ -23,11 +21,25 @@ export default {
 </script>
 <style>
 @import url('https://rsms.me/inter/inter.css');
+body {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
 
 #app {
   font-family: 'Inter var', Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  padding-top: 40px;
 }
 
 h1 {

app/src/components/Navigation.vue

@@ -29,6 +29,7 @@ nav {
   align-items: center;
   justify-content: flex-start;
   padding: 10px;
+  height: 40px;
 }
 nav a {
   font-weight: bold;

app/src/experimental/PanZoomContainer.vue

@@ -10,38 +10,31 @@
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
+  border: 5px solid red;
 }
 .inner {
   width: 2000px;
   height: 2000px;
-  background-color: rgb(50, 50, 50);
-  background-image: linear-gradient(
-      0deg,
-      transparent 24%,
-      rgba(255, 255, 255, 0.05) 25%,
-      rgba(255, 255, 255, 0.05) 26%,
-      transparent 27%,
-      transparent 74%,
-      rgba(255, 255, 255, 0.05) 75%,
-      rgba(255, 255, 255, 0.05) 76%,
-      transparent 77%,
-      transparent
-    ),
-    linear-gradient(
-      90deg,
-      transparent 24%,
-      rgba(255, 255, 255, 0.05) 25%,
-      rgba(255, 255, 255, 0.05) 26%,
-      transparent 27%,
-      transparent 74%,
-      rgba(255, 255, 255, 0.05) 75%,
-      rgba(255, 255, 255, 0.05) 76%,
-      transparent 77%,
-      transparent
-    );
-
   position: relative;
   transform-origin: 0 0;
+  background-size: 40px 40px;
+  background-color: rgb(245, 245, 245);
+  background-image: radial-gradient(
+    circle,
+    rgba(0, 0, 0, 0.5) 1px,
+    rgba(0, 0, 0, 0) 1px
+  );
+}
+.indicator {
+  position: absolute;
+  z-index: 4;
+  top: 20px;
+  right: 20px;
+  font-size: 12px;
+  color: white;
+  padding: 10px;
+  border-radius: 3px;
+  background: rgb(50, 50, 50);
 }
 </style>
 
@@ -64,11 +57,14 @@
     <div
       class="inner"
       v-bind:style="{
+        width: `${width}px`,
+        height: `${height}px`,
         transform: `translate(${translation.x}px, ${translation.y}px) scale(${scale})`
       }"
     >
       <slot></slot>
     </div>
+    <div class="indicator">{{ scalePercentage }}</div>
   </div>
 </template>
 <script>
@@ -125,16 +121,23 @@ export default {
     translationBounds: {
       type: Object,
       default() {
-        return { xMin: -1000, xMax: 1000, yMin: -1000, yMax: 1000 }
+        return { xMin: -500, xMax: 500, yMin: -500, yMax: 500 }
       }
     },
+    width: Number,
+    height: Number,
     minScale: {
       type: Number,
-      default: 0.05
+      default: 0.3
     },
     maxScale: {
       type: Number,
-      default: 3.0
+      default: 2.0
+    }
+  },
+  computed: {
+    scalePercentage() {
+      return `${(this.scale * 100).toFixed(0)}%`
     }
   },
   methods: {

app/src/experimental/editorStore.js

+const store = new Vuex.Store({
+      namespaced: true,
+
+  state: {
+    count: 1
+  },
+  mutations: {
+    increment (state) {
+      // mutate state
+      state.count++
+    }
+  }
+})

app/src/views/Sandbox.vue

 <template>
-  <div class="container">
-    <pzc>
-      <div class="board">Inner</div>
-    </pzc>
-  </div>
+  <pzc v-bind:width="2000" v-bind:height="2000">
+    <h1>Inner</h1>
+  </pzc>
 </template>
+
 <script>
 import { mapState } from 'vuex'
 import PanZoomContainer from '../experimental/PanZoomContainer'