WIP default zoom

reflex-app · Oct 29, 2018 · be2abba · be2abba
1 parent 39e67e2
commit be2abba
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 47 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,9 +1,9 @@
 <template>
   <div id="app">
-    <Toolbar/>
+    <Toolbar ref="toolbar"/>
     <div id="canvas-container">
       <div id="canvas" ref="canvas">
-        <Artboards/>
+        <Artboards ref="artboards"/>
       </div>
     </div>
   </div>
@@ -12,7 +12,7 @@
 <script>
 import Toolbar from "./components/Toolbar.vue";
 import Artboards from "./components/Artboards.vue";
-import panzoom from "panzoom"
+import panzoom from "panzoom";
 
 export default {
   name: "app",
@@ -21,9 +21,43 @@ export default {
     Toolbar
     // TODO: Create Settings
   },
+  methods: {
+    contentWidth() {
+      const width = window.innerWidth / (this.$refs.artboards.$el.clientWidth / 2);
+      // eslint-disable-next-line 
+      console.log(width);
+      
+      return Number(width);
+    },
+    contentHeight() {
+      const otherElements = this.$refs.toolbar.$el.clientHeight;
+      const height =
+        window.innerHeight / this.$refs.artboards.$el.clientHeight +
+        otherElements;
+      return Number(height);
+    },
+    minZoom() {
+      return Number(Math.min(this.contentWidth(), this.contentHeight()));
+    }
+    // TODO: Add currentZoomScale() to Vuex store
+    // currentZoomScale() {
+    //   return document.panzoomInstance.getTransform();
+    // }
+  },
   mounted() {
     // Attach panzoom (pan + zoom-able canvas)
-    document.panzoomInstance = panzoom(this.$refs.canvas);
+    document.panzoomInstance = panzoom(this.$refs.canvas, {
+      maxZoom: 1,
+      minZoom: 0.1
+    });
+
+    // Start by zooming in
+    // TODO: This currently doesn't calculate the correct height
+    document.panzoomInstance.zoomAbs(
+      this.contentWidth(),
+      this.contentHeight(),
+      this.minZoom()
+    );
   }
 };
 </script>

diff --git a/src/components/Artboard.vue b/src/components/Artboard.vue
@@ -6,53 +6,53 @@
     @click="state.isSelected = !state.isSelected"
     >
       <div class="artboard__top">
-          <div>
-              W: 
-              <input 
-                type="text" 
-                :value="artboard.width"
-                @blur="validateArtboardSizeInput('width', $event.target.value)"
-                @keyup.enter="validateArtboardSizeInput('width', $event.target.value)"
-                class="artboard__width" 
-                auto-complete="off"
-              />
-              H: 
-              <input 
-                type="text" 
-                :value="artboard.height"
-                @blur="validateArtboardSizeInput('height', $event.target.value)"
-                @keyup.enter="validateArtboardSizeInput('height', $event.target.value)"
-                class="artboard__height" 
-                auto-complete="off"
-              />
+        <div>
+          W: 
+          <input 
+            type="text" 
+            :value="artboard.width"
+            @blur="validateArtboardSizeInput('width', $event.target.value)"
+            @keyup.enter="validateArtboardSizeInput('width', $event.target.value)"
+            class="artboard__width" 
+            auto-complete="off"
+          />
+          H: 
+          <input 
+            type="text" 
+            :value="artboard.height"
+            @blur="validateArtboardSizeInput('height', $event.target.value)"
+            @keyup.enter="validateArtboardSizeInput('height', $event.target.value)"
+            class="artboard__height" 
+            auto-complete="off"
+          />
+        </div>
+        <!-- Show a loader when state.isLoading == true -->
+        <div class="artboard__loader is-loading" v-if="state.isLoading">
+          <div class="content">
+            <div class="lds-ripple">
+              <div></div>
+              <div></div>
+            </div>
           </div>
-          <!-- Show a loader when state.isLoading == true -->
-          <div class="artboard__loader is-loading" v-if="state.isLoading">
-              <div class="content">
-                  <div class="lds-ripple">
-                      <div></div>
-                      <div></div>
-                  </div>
-              </div>
-          </div>
-          <button class="button button--small artboard__delete-button" v-on:click="$emit('remove', artboard.id)">Delete</button>
+        </div>
+        <button class="button button--small artboard__delete-button" v-on:click="$emit('remove', artboard.id)">Delete</button>
       </div>
       <div class="artboard__keypoints"></div>
       <div class="artboard__content">
-          <iframe 
-            v-bind:src="url"
-            ref="iframe"
-            class="iframe"
-            nwfaketop 
-            frameborder="0"
-            >
-          </iframe>
-          <div class="artboard__handles">
-              <div 
-                @mousedown="triggerResize"
-                class="handle__bottom"
-              />
-          </div>
+        <iframe 
+          v-bind:src="url"
+          ref="iframe"
+          class="iframe"
+          nwfaketop 
+          frameborder="0"
+          >
+        </iframe>
+        <div class="artboard__handles">
+            <div 
+              @mousedown="triggerResize"
+              class="handle__bottom"
+            />
+        </div>
       </div>
       <NewArtboardButton @add="$emit('add')"/>
   </div>