From 7ce52cd34b076eae60a331d5774043ded9df2ba7 Mon Sep 17 00:00:00 2001 From: Claudio Gomes da Silva Date: Tue, 26 Nov 2019 19:26:21 -0300 Subject: [PATCH 1/4] fit-svg-into-container: fit function --- index.html | 2 +- src/core/interactable.js | 24 ++++++++++++++++++++++-- src/mapa-brasil.js | 2 -- 3 files changed, 23 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index ca06094..926d46c 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ -
+

diff --git a/src/core/interactable.js b/src/core/interactable.js index a5adaf8..dfa0e93 100644 --- a/src/core/interactable.js +++ b/src/core/interactable.js @@ -84,15 +84,35 @@ 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.setAttribute("draggable", "true"); + if(((containerWidth * svgHeight) / svgWidth) > containerHeight){ + svgWidth = (containerHeight * svgWidth) / svgHeight; + } + + svgEl.style.width = (svgWidth >= containerWidth ? containerWidth : svgWidth) + 'px'; + svgEl.style.height = 'auto'; +}; + +module.exports = (element) => { + let svgContainer = element.getElementsByClassName("svg-container")[0]; + + // FIT + fitSvgIntoContainer(element); + // RESET VARS dragClientY = 0; dragClientX = 0; diff --git a/src/mapa-brasil.js b/src/mapa-brasil.js index 33ac21d..9b24107 100644 --- 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"); From 3234606d5b3cca6397e016b18302ec377e885599 Mon Sep 17 00:00:00 2001 From: Claudio Gomes da Silva Date: Tue, 26 Nov 2019 19:29:23 -0300 Subject: [PATCH 2/4] fit-svg-into-container: style.cursor grab only on drag --- src/core/interactable.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/core/interactable.js b/src/core/interactable.js index dfa0e93..330432f 100644 --- 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); }; @@ -96,7 +99,7 @@ let fitSvgIntoContainer = (element) => { svgContainer.style.position = "absolute"; svgContainer.style.top = "0px"; svgContainer.style.left = "0px"; - svgContainer.style.cursor = "grab"; + svgContainer.style.cursor = "pointer"; svgContainer.setAttribute("draggable", "true"); if(((containerWidth * svgHeight) / svgWidth) > containerHeight){ From ad428b4814d12ec6d2619e924cfb7c5298f38cfe Mon Sep 17 00:00:00 2001 From: Claudio Gomes da Silva Date: Tue, 26 Nov 2019 19:38:43 -0300 Subject: [PATCH 3/4] fit-svg-into-container: fit center --- src/core/interactable.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/core/interactable.js b/src/core/interactable.js index 330432f..621af04 100644 --- a/src/core/interactable.js +++ b/src/core/interactable.js @@ -108,20 +108,24 @@ let fitSvgIntoContainer = (element) => { 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]; - // FIT - fitSvgIntoContainer(element); - // RESET VARS dragClientY = 0; dragClientX = 0; dragPosY = 0; dragPosX = 0; + // FIT + fitSvgIntoContainer(element); + // DRAG EVENT dragEvent(svgContainer); From 864461284bba431a5a89ffa0c1bf40d51960ee9a Mon Sep 17 00:00:00 2001 From: Claudio Gomes da Silva Date: Tue, 26 Nov 2019 19:39:14 -0300 Subject: [PATCH 4/4] fit-svg-into-container: release 1.0.5 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 36630cf..905dd1e 100644 --- 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": [