Merge branch 'combined-multipane' of https://github.com/Haixing-Hu/vu…

…e-multipane into fix-15-14-7 * 'combined-multipane' of https://github.com/Haixing-Hu/vue-multipane: rebuild the source remove the debug logging statements in the source files fix yansern#15 # Conflicts: # demo/main.js # dist/vue-multipane.esm.js # dist/vue-multipane.js # dist/vue-multipane.min.js # src/multipane.js
jhlee8804 · Mar 27, 2019 · bce5d34 · bce5d34
2 parents 8b0d6ca + 8b92e49
commit bce5d34
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 19 deletions.
diff --git a/demo/src/App.js b/demo/src/App.js
@@ -1,11 +1,13 @@
 import VerticalPanes from './VerticalPanes.vue';
 import HorizontalPanes from './HorizontalPanes.vue';
 import CustomResizer from './CustomResizer.vue';
+import CombinedVerticalHorizontalPanes from './CombinedVerticalHorizontalPanes.vue';
 
 export default {
   components: {
     VerticalPanes,
     HorizontalPanes,
     CustomResizer,
+    CombinedVerticalHorizontalPanes,
   },
 };
diff --git a/demo/src/App.vue b/demo/src/App.vue
@@ -39,6 +39,19 @@
       <CustomResizer></CustomResizer>
     </div>
   </section>
+  <section class="hero">
+    <div class="hero-body">
+      <div class="columns">
+        <div class="column">
+          <h2 class="title">Combined Vertical and Horizontal Panes</h2>
+        </div>
+        <div class="column is-narrow">
+          <a href="https://github.com/yansern/vue-multipane/blob/master/demo/src/CombinedVerticalHorizontalPanes.vue" class="button is-warning">View code &raquo;</a>
+        </div>
+      </div>
+      <CombinedVerticalHorizontalPanes></CombinedVerticalHorizontalPanes>
+    </div>
+  </section>
 </div>
 </template>
 

diff --git a/demo/src/CombinedVerticalHorizontalPanes.vue b/demo/src/CombinedVerticalHorizontalPanes.vue
@@ -0,0 +1,66 @@
+<template>
+    <multipane layout="vertical" class="container">
+        <div class="left">
+            <h6 class="title is-6">Pane 1</h6>
+        </div>
+        <multipane-resizer></multipane-resizer>
+        <multipane layout="horizontal" class="right">
+            <div class="top">
+              <h6 class="title is-6">Pane 2</h6>
+            </div>
+            <multipane-resizer></multipane-resizer>
+            <div class="bottom">
+              <h6 class="title is-6">Pane 3</h6>
+            </div>
+        </multipane>
+    </multipane>
+</template>
+
+<script>
+import { Multipane, MultipaneResizer } from '@/src';
+
+export default {
+  components: {
+    Multipane,
+    MultipaneResizer,
+  },
+};
+</script>
+
+<style>
+.container {
+  height: 600px;
+  width: 100%;
+}
+
+.left {
+  width: 50%;
+  min-width: 20%;
+  max-width: 80%;
+  height: 600px;
+  border: 1px solid #ccc;
+  background: #eee;
+}
+
+.right {
+  flex-grow: 1;
+  height: 600px;
+  border: 1px solid #ccc;
+  background: #eee;
+}
+
+.top {
+  height: 300px;
+  min-height: 20%;
+  max-height: 80%;
+  width: 100%;
+  border: 1px solid #ccc;
+  background: #eee;
+}
+.bottom {
+  flex-grow: 1;
+  width: 100%;
+  border: 1px solid #ccc;
+  background: #eee;
+}
+</style>
diff --git a/dist/vue-multipane.esm.js b/dist/vue-multipane.esm.js
diff --git a/dist/vue-multipane.js b/dist/vue-multipane.js
@@ -47,6 +47,7 @@ var __vue_module__ = {
       var initialPageY = ref.pageY;
 
       if ('string' === typeof resizer.className && resizer.className.match('multipane-resizer')) {
+        if (resizer.parentElement !== this.$el) { return; }
         var self = this;
         var container = self.$el;
         var layout = self.layout;
@@ -86,7 +87,10 @@ var __vue_module__ = {
         self.isResizing = true;
 
         // Resize once to get current computed size
-        var size = resize();
+        // let size = resize();
+        var size = (layout == LAYOUT_VERTICAL
+                    ? resize(initialPaneWidth)
+                    : resize(initialPaneHeight));
 
         // Trigger paneResizeStart event
         self.$emit('paneResizeStart', pane, resizer, size);
@@ -95,20 +99,18 @@ var __vue_module__ = {
           var pageX = ref.pageX;
           var pageY = ref.pageY;
 
-          size =
-            layout == LAYOUT_VERTICAL
+          var size = (layout == LAYOUT_VERTICAL
               ? resize(initialPaneWidth, pageX - initialPageX)
-              : resize(initialPaneHeight, pageY - initialPageY);
+              : resize(initialPaneHeight, pageY - initialPageY));
 
           self.$emit('paneResize', pane, resizer, size);
         };
 
         var onMouseUp = function() {
           // Run resize one more time to set computed width/height.
-          size =
-            layout == LAYOUT_VERTICAL
-              ? resize(pane.clientWidth)
-              : resize(pane.clientHeight);
+          var size = (layout == LAYOUT_VERTICAL
+                      ? resize(pane.clientWidth)
+                      : resize(pane.clientHeight));
 
           // This removes is-resizing class to container
           self.isResizing = false;

diff --git a/dist/vue-multipane.min.js b/dist/vue-multipane.min.js
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "build:prod": "cross-env rollup -c rollup.config.prod.js",
     "build:dev": "cross-env rollup -c rollup.config.dev.js",
     "build:esm": "cross-env rollup -c rollup.config.esm.js",
-    "build:demo": "cross-env NODE_ENV=production webpack --progress --hide-modules --env.entry=demo --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "build:demo": "cross-env NODE_ENV=development webpack --progress --hide-modules --env.entry=demo --config=node_modules/laravel-mix/setup/webpack.config.js",
     "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --inline --env.entry=demo --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "license": "MIT",

diff --git a/src/multipane.js b/src/multipane.js
@@ -38,6 +38,7 @@ export default {
   methods: {
     onMouseDown({ target: resizer, pageX: initialPageX, pageY: initialPageY }) {
       if ('string' === typeof resizer.className && resizer.className.match('multipane-resizer')) {
+        if (resizer.parentElement !== this.$el) return;
         let self = this;
         let { $el: container, layout } = self;
 
@@ -75,26 +76,27 @@ export default {
         self.isResizing = true;
 
         // Resize once to get current computed size
-        let size = resize();
+        // let size = resize();
+        let size = (layout == LAYOUT_VERTICAL
+                    ? resize(initialPaneWidth)
+                    : resize(initialPaneHeight));
 
         // Trigger paneResizeStart event
         self.$emit('paneResizeStart', pane, resizer, size);
 
         const onMouseMove = function({ pageX, pageY }) {
-          size =
-            layout == LAYOUT_VERTICAL
+          let size = (layout == LAYOUT_VERTICAL
               ? resize(initialPaneWidth, pageX - initialPageX)
-              : resize(initialPaneHeight, pageY - initialPageY);
+              : resize(initialPaneHeight, pageY - initialPageY));
 
           self.$emit('paneResize', pane, resizer, size);
         };
 
         const onMouseUp = function() {
           // Run resize one more time to set computed width/height.
-          size =
-            layout == LAYOUT_VERTICAL
-              ? resize(pane.clientWidth)
-              : resize(pane.clientHeight);
+          let size = (layout == LAYOUT_VERTICAL
+                      ? resize(pane.clientWidth)
+                      : resize(pane.clientHeight));
 
           // This removes is-resizing class to container
           self.isResizing = false;