feat: resizable viewport (#19)

* dnd: add drag event in dnd polyfill * feat: make viewport be resizable * feat: allow to resize from any corner of resizable element * refactor: rewrite render function with template of renderer * fix: avoid throwing assertion error when canceling node selection * feat: add a toolbar to show and edit viewport size * test: add test for matchSelectedNodeWithStyles * test: add test of Resizable component * test: add Toolbar test * test: add more test for Toolbar
ktsn · Apr 5, 2018 · 98bd2fe · 98bd2fe
1 parent 8ca762b
commit 98bd2fe
Show file tree

Hide file tree

Showing 13 changed files with 816 additions and 68 deletions.
diff --git a/src/view/App.vue b/src/view/App.vue
@@ -21,6 +21,7 @@ export default Vue.extend({
 body {
   padding: 0;
   margin: 0;
+  background-color: #ddd;
 }
 </style>
 

diff --git a/src/view/components/PageMain.vue b/src/view/components/PageMain.vue
@@ -1,12 +1,27 @@
 <template>
   <div>
-    <Renderer
-      v-if="renderingDocument"
-      :document="renderingDocument"
-      @select="select"
-      @dragover="setDraggingPlace"
-      @add="applyDraggingElement"
-    />
+    <div class="page-layout">
+      <div class="page-layout-renderer">
+        <Renderer
+          v-if="renderingDocument"
+          :document="renderingDocument"
+          :width="width"
+          :height="height"
+          @select="select"
+          @dragover="setDraggingPlace"
+          @add="applyDraggingElement"
+          @resize="resize"
+        />
+      </div>
+
+      <div class="page-layout-toolbar">
+        <Toolbar
+          :width="width"
+          :height="height"
+          @resize="resize"
+        />
+      </div>
+    </div>
 
     <div v-if="document" class="information-pane" :class="{ open: openPane }">
       <div class="information-pane-scroller">
@@ -57,7 +72,9 @@ import Renderer from './Renderer.vue'
 import ScopeInformation from './ScopeInformation.vue'
 import StyleInformation from './StyleInformation.vue'
 import ComponentCatalog from './ComponentCatalog.vue'
+import Toolbar from './Toolbar.vue'
 import { projectHelpers, ScopedDocument } from '../store/modules/project'
+import { viewportHelpers } from '@/view/store/modules/viewport'
 
 export default Vue.extend({
   name: 'PageMain',
@@ -66,7 +83,8 @@ export default Vue.extend({
     Renderer,
     ScopeInformation,
     StyleInformation,
-    ComponentCatalog
+    ComponentCatalog,
+    Toolbar
   },
 
   data() {
@@ -82,6 +100,8 @@ export default Vue.extend({
       matchedRules: 'matchedRules'
     }),
 
+    ...viewportHelpers.mapState(['width', 'height']),
+
     ...projectHelpers.mapGetters({
       document: 'currentDocument',
       renderingDocument: 'currentRenderingDocument',
@@ -95,20 +115,40 @@ export default Vue.extend({
     }
   },
 
-  methods: projectHelpers.mapActions([
-    'startDragging',
-    'endDragging',
-    'setDraggingPlace',
-    'select',
-    'applyDraggingElement',
-    'addDeclaration',
-    'removeDeclaration',
-    'updateDeclaration'
-  ])
+  methods: {
+    ...projectHelpers.mapActions([
+      'startDragging',
+      'endDragging',
+      'setDraggingPlace',
+      'select',
+      'applyDraggingElement',
+      'addDeclaration',
+      'removeDeclaration',
+      'updateDeclaration'
+    ]),
+
+    ...viewportHelpers.mapActions(['resize'])
+  }
 })
 </script>
 
 <style lang="scss" scoped>
+.page-layout-renderer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 32px;
+}
+
+.page-layout-toolbar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 32px;
+}
+
 .information-pane {
   position: fixed;
   right: 0;

diff --git a/src/view/components/Renderer.vue b/src/view/components/Renderer.vue
@@ -1,63 +1,59 @@
+<template>
+  <div class="renderer" @click="$emit('select')">
+    <Viewport :width="width" :height="height" @resize="$emit('resize', arguments[0])">
+      <VueComponent
+        :uri="document.uri"
+        :template="document.template"
+        :props="document.props"
+        :data="document.data"
+        :child-components="document.childComponents"
+        :styles="document.styleCode"
+        @select="$emit('select', arguments[0])"
+        @dragover="$emit('dragover', arguments[0])"
+        @add="$emit('add')"
+      />
+    </Viewport>
+  </div>
+</template>
+
 <script lang="ts">
-import Vue, { VNode } from 'vue'
+import Vue from 'vue'
 import Viewport from './Viewport.vue'
 import VueComponent from './VueComponent.vue'
 import { ScopedDocument } from '../store/modules/project'
 
 export default Vue.extend({
   name: 'Renderer',
-  functional: true,
+
+  components: {
+    Viewport,
+    VueComponent
+  },
 
   props: {
     document: {
       type: Object as () => ScopedDocument,
       required: true
+    },
+    width: {
+      type: Number,
+      required: true
+    },
+    height: {
+      type: Number,
+      required: true
     }
-  },
-
-  // @ts-ignore
-  render(h, { props, listeners }): VNode {
-    const { document: d } = props
-    return h(
-      'div',
-      {
-        class: 'renderer',
-        on: {
-          click: () => {
-            if (listeners.select) {
-              listeners.select()
-            }
-          }
-        }
-      },
-      [
-        h(Viewport, [
-          h(VueComponent, {
-            props: {
-              uri: d.uri,
-              template: d.template,
-              props: d.props,
-              data: d.data,
-              childComponents: d.childComponents,
-              styles: d.styleCode
-            },
-            on: listeners
-          })
-        ])
-      ]
-    )
   }
 })
 </script>
 
 <style lang="scss" scoped>
 .renderer {
   all: initial;
+  overflow: auto;
   display: block;
   position: relative;
-  box-sizing: border-box;
   height: 100%;
   width: 100%;
-  background-color: #ddd;
 }
 </style>