fix yansern#15

Haixing-Hu · Jun 1, 2018 · d850f62 · d850f62
1 parent d9a17be
commit d850f62
Show file tree

Hide file tree

Showing 9 changed files with 12,323 additions and 20 deletions.
diff --git a/demo/main.js b/demo/main.js
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
@@ -46,7 +46,10 @@ var __vue_module__ = {
       var initialPageX = ref.pageX;
       var initialPageY = ref.pageY;
 
+      console.log(("onMouseDown(" + resizer + ", " + initialPageX + ", " + initialPageY + ")"));
       if (resizer.className && resizer.className.match('multipane-resizer')) {
+        if (resizer.parentElement !== this.$el) { return; }
+        console.dir(this);
         var self = this;
         var container = self.$el;
         var layout = self.layout;
@@ -63,6 +66,7 @@ var __vue_module__ = {
         var resize = function (initialSize, offset) {
           if ( offset === void 0 ) offset = 0;
 
+          console.log(("resize (" + initialSize + ", " + offset + ")"));
           if (layout == LAYOUT_VERTICAL) {
             var containerWidth = container.clientWidth;
             var paneWidth = initialSize + offset;
@@ -86,7 +90,11 @@ 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));
+        console.log(("size = " + size));
 
         // Trigger paneResizeStart event
         self.$emit('paneResizeStart', pane, resizer, size);
@@ -95,20 +103,20 @@ var __vue_module__ = {
           var pageX = ref.pageX;
           var pageY = ref.pageY;
 
-          size =
-            layout == LAYOUT_VERTICAL
+          console.log(("onMouseMove (" + pageX + ", " + pageY + ")"));
+          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() {
+          console.log('onMouseUp');
           // 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",