Merge pull request #25 from David-Desmaisons/send-resize-event

Adding resize event

Author: David-Desmaisons

README.md

@@ -231,6 +231,14 @@ Failing to do so may result in a component whose size that will keep increasing.
 
      - `value` **Object** - {node, sunburst} The corresponding node and sunburst component 
 
+- `resize` 
+
+   Fired when component is resizing.
+
+   **arguments:** 
+
+     - `value` **Object** - {radius, height, width} Size information in pixel
+
 #### methods 
 
 - `highlightPath(node, opacity)` 

example/App.vue

@@ -77,10 +77,10 @@
         </div>
       </div>
       <div class="col-9">
-        <div class="card control-left">
+        <div class="card control-middle">
           <div class="card-header">Sunburst</div>
           <div class="card-body father">
-            <sunburst class="sunburst" :data="data" :centralCircleRelativeSize="centralCircleRelativeSize" :showLabels="showLabels" :minAngleDisplayed="minAngleDisplayed" :colorScheme="colorScheme" :colorScale="colorScale" :inAnimationDuration="inAnimationDuration" :outAnimationDuration="outAnimationDuration">
+            <sunburst id="resizable" class="sunburst" :data="data" :centralCircleRelativeSize="centralCircleRelativeSize" :showLabels="showLabels" :minAngleDisplayed="minAngleDisplayed" :colorScheme="colorScheme" :colorScale="colorScale" :inAnimationDuration="inAnimationDuration" :outAnimationDuration="outAnimationDuration">
 
               <breadcrumbTrail slot="legend" slot-scope="{ nodes, colorGetter, width }" :current="nodes.mouseOver" :root="nodes.root" :colorGetter="colorGetter" :from="nodes.zoomed" :width="width" />
 
@@ -99,6 +99,9 @@
 </template>
 
 <script>
+import $ from "jquery";
+import "jquery-ui/ui/widgets/resizable.js";
+
 import sunburst from "@/components/sunburst";
 import nodeInfoDisplayer from "@/components/nodeInfoDisplayer";
 import breadcrumbTrail from "@/components/breadcrumbTrail";
@@ -145,6 +148,11 @@ export default {
       return data.name; 
     }
   },
+  mounted(){
+    $("#resizable").resizable({
+      containment: "parent"
+    });
+  },
   components: {
     sunburst,
     nodeInfoDisplayer,
@@ -170,7 +178,7 @@ export default {
     height: 800px;
   }
 
-  .control-left {
+  .control-middle {
     height: 600px;
   }
 

example/main.js

@@ -2,6 +2,7 @@ import Vue from "vue";
 import App from "./App.vue";
 import "bootstrap/dist/css/bootstrap.css";
 import "font-awesome/less/font-awesome.less";
+import "jquery-ui/themes/base/all.css";
 
 Vue.config.productionTip = false;