Merge pull request #13 from clagomess/fit-svg-into-container

Fit svg into container
clagomess · Nov 26, 2019 · 52af2a2 · 52af2a2
2 parents 0f25b1a + 8644612
commit 52af2a2
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
 </head>
 <body>
 
-<div id="mapa" style="height: 550px; width: 600px; border: 1px solid"></div>
+<div id="mapa" style="height: 400px; width: 600px; border: 1px solid"></div>
 <br>
 <input type="button" value="Brasil Federacao" onclick="brasilFederacao()">
 <input type="button" value="Brasil Mesorregiao" onclick="brasilMesorregiao()">

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mapa-brasil",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Gráfico dinámico do mapa do Brasil",
   "main": "src/mapa-brasil.js",
   "keywords": [

diff --git a/src/core/interactable.js b/src/core/interactable.js
@@ -32,6 +32,8 @@ let dragEvent = (svgContainer) => {
       return;
     }
 
+    svgContainer.style.cursor = "grab";
+
     canSvgPathClickEvents(svgContainer, false);
 
     dragPosY = (evt.clientY - dragClientY);
@@ -42,6 +44,7 @@ let dragEvent = (svgContainer) => {
   };
 
   let onDragEnd = (evt) => {
+    svgContainer.style.cursor = "pointer";
     moving = false;
     canSvgPathClickEvents(svgContainer, true);
   };
@@ -84,21 +87,45 @@ let touchEvent = (svgContainer) => {
   svgContainer.addEventListener("touchend", onDrag);
 };
 
-module.exports = (element) => {
+let fitSvgIntoContainer = (element) => {
   let svgContainer = element.getElementsByClassName("svg-container")[0];
+  let svgEl = svgContainer.getElementsByTagName("svg")[0];
+
+  const containerWidth = element.clientWidth;
+  const containerHeight = element.clientHeight;
+  let svgWidth = +svgEl.getAttribute('width');
+  let svgHeight = +svgEl.getAttribute('height');
+
   svgContainer.style.position = "absolute";
   svgContainer.style.top = "0px";
   svgContainer.style.left = "0px";
-  svgContainer.style.width = "100%";
-  svgContainer.style.cursor = "grab";
+  svgContainer.style.cursor = "pointer";
   svgContainer.setAttribute("draggable", "true");
 
+  if(((containerWidth * svgHeight) / svgWidth) > containerHeight){
+    svgWidth = (containerHeight * svgWidth) / svgHeight;
+  }
+
+  svgEl.style.width = (svgWidth >= containerWidth ? containerWidth : svgWidth) + 'px';
+  svgEl.style.height = 'auto';
+
+  // margim left
+  dragPosX = ((containerWidth - svgWidth) / 2);
+  svgContainer.style.left = dragPosX + 'px';
+};
+
+module.exports = (element) => {
+  let svgContainer = element.getElementsByClassName("svg-container")[0];
+
   // RESET VARS
   dragClientY = 0;
   dragClientX = 0;
   dragPosY = 0;
   dragPosX = 0;
 
+  // FIT
+  fitSvgIntoContainer(element);
+
   // DRAG EVENT
   dragEvent(svgContainer);
 

diff --git a/src/mapa-brasil.js b/src/mapa-brasil.js
@@ -30,8 +30,6 @@ let draw = (element, options) => {
 
     // SVG
     let svgEl = element.getElementsByClassName("svg-container")[0].getElementsByTagName("svg")[0];
-    svgEl.style.width = "100%";
-    svgEl.style.height = "auto";
 
     // paths
     let listPath = svgEl.getElementsByTagName("g")[0].getElementsByTagName("path");