Add min/max zoom support

docs-kr/network/interaction.html

@@ -144,6 +144,8 @@ <h3>옵션</h3>
         <tr><td>selectable</td>             <td>Boolean</td><td><code>true</code></td><td>true인 경우, 사용자가 노드와 Edge를 선택할 수 있습니다.</td></tr>
         <tr><td>selectConnectedEdges</td>   <td>Boolean</td><td><code>true</code></td><td>true인 경우, Node를 선택할 때, 연결 Edge가 강조 표시됩니다.</td></tr>
         <tr><td>tooltipDelay</td>           <td>Number</td>             <td><code>300</code></td>        <td>Node나 Edge에 정의된 <code>'title'</code> 필드가 있다면, 팝업 툴팁으로 표시될 수 있습니다. 툴팁 자체는 CSS를 사용하여 완전히 스타일을 지정할 수 있는 HTML 요소입니다. 지연 시간은 툴팁이 표시되기까지 걸리는 시간(밀리 초)입니다.</td></tr>
+        <tr><td>zoomMin</td>                <td>Number</td>             <td><code>0.00001</code></td>    <td><!-- TODO --></td></tr>
+        <tr><td>zoomMax</td>                <td>Number</td>             <td><code>10</code></td>         <td><!-- TODO --></td></tr>
         <tr><td>zoomView</td>               <td>Boolean</td>            <td><code>true</code></td>      <td>true인 경우, 사용자가 확대할 수 있습니다.</td></tr>
     </table>
 

docs/network/interaction.html

@@ -144,6 +144,8 @@ <h3>Options</h3>
         <tr><td>selectable</td>             <td>Boolean</td><td><code>true</code></td><td>When true, the nodes and edges can be selected by the user.</td></tr>
         <tr><td>selectConnectedEdges</td>   <td>Boolean</td><td><code>true</code></td><td>When true, on selecting a node, its connecting edges are highlighted.</td></tr>
         <tr><td>tooltipDelay</td>           <td>Number</td>             <td><code>300</code></td>        <td>When nodes or edges have a defined <code>'title'</code> field, this can be shown as a pop-up tooltip. The tooltip itself is an HTML element that can be fully styled using CSS. The delay is the amount of time in milliseconds it takes before the tooltip is shown.</td></tr>
+        <tr><td>zoomMin</td>                <td>Number</td>             <td><code>0.00001</code></td>    <td>Minimum value the user can zoom out.</td></tr>
+        <tr><td>zoomMax</td>                <td>Number</td>             <td><code>10</code></td>         <td>Maximum value the user can zoom in.</td></tr>
         <tr><td>zoomView</td>               <td>Boolean</td>            <td><code>true</code></td>      <td>When true, the user can zoom in.</td></tr>
     </table>
 

lib/network/modules/InteractionHandler.js

@@ -453,11 +453,11 @@ class InteractionHandler {
   zoom(scale, pointer) {
     if (this.options.zoomView === true) {
       let scaleOld = this.body.view.scale;
-      if (scale < 0.00001) {
-        scale = 0.00001;
+      if (scale < this.options.zoomMin) {
+        scale = this.options.zoomMin;
       }
-      if (scale > 10) {
-        scale = 10;
+      if (scale > this.options.zoomMax) {
+        scale = this.options.zoomMax;
       }
 
       let preScaleDragPointer = undefined;

lib/network/options.js

@@ -210,6 +210,8 @@ let allOptions = {
     selectConnectedEdges: { boolean: bool },
     hoverConnectedEdges: { boolean: bool },
     tooltipDelay: { number },
+    zoomMin: { number },
+    zoomMax: { number },
     zoomView: { boolean: bool },
     zoomSpeed: { number },
     __type__: { object }
@@ -667,6 +669,8 @@ let configureOptions = {
     selectConnectedEdges: true,
     hoverConnectedEdges: true,
     tooltipDelay: [300, 0, 1000, 25],
+    zoomMin: [0.02, 0, 0.1, 0.005],
+    zoomMax: [10, 9.995, 10, 0.005],
     zoomView: true,
     zoomSpeed: [1, 0.1, 2, 0.1]
   },