From 3cddb4529042e5ee60fb9d0c42e7bcac4e2dbea8 Mon Sep 17 00:00:00 2001
From: Jussi Surma-Aho <L4929@student.jamk.fi>
Date: Mon, 17 Jun 2019 15:14:37 +0300
Subject: [PATCH] Text box functionality, still not fully functional; Remove
 zoom control at top left corner; Add max and min zooms; Non-functional fix to
 dragging out of bounds

---
 src/App.css                 | 18 ++++++++++++++++--
 src/components/DrawTools.js | 35 ++++++++++++++++++++++++++++-------
 src/components/UserMap.js   |  4 ++--
 3 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/App.css b/src/App.css
index 33c48b2..c875df1 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,8 @@
+/*
+  Do not touch classes with 'leaflet' in them!
+  They're Leaflet's own classes
+*/
+
 body {
   margin: 0;
   padding: 0;
@@ -151,16 +156,25 @@ div.login button:hover {
 	-moz-user-select: text;
 	-ms-user-select: text;
 	user-select: text;
-	pointer-events: auto;
+  pointer-events: auto;
+  cursor: auto;
+}
+
+.leaflet-tooltip-top:before,
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+  pointer-events: auto;
 }
 
 /* Editing editable tooltips */
 .editable {
-  cursor: text;
+  cursor: text; /* the cursor icon doesn't change by default when hovering on top of the text; overriding */
   min-width: 120px;
   min-height: 18px;
 }
 
+/* placeholder text for tooltip */
 [contenteditable=true]:empty:before {
   content: attr(placeholder);
   display: block; /* For Firefox */
diff --git a/src/components/DrawTools.js b/src/components/DrawTools.js
index 33b5d83..666ff65 100644
--- a/src/components/DrawTools.js
+++ b/src/components/DrawTools.js
@@ -16,12 +16,13 @@ L.Draw.MarkerTextBox = L.Draw.Marker.extend({
 	options: {
 		icon: emptyicon,
 		repeatMode: false,
+		interactive: true
 	},
 	initialize: function (map, options) {
 		this.type = 'textbox'; // important to have a unique type, so that it won't get mixed up with other elements
-    this.featureTypeCode = 'textbox';
+    	this.featureTypeCode = 'textbox';
 		L.Draw.Feature.prototype.initialize.call(this, map, options);
-  }
+  	}
 });
 
 L.DrawToolbar.include ({
@@ -47,7 +48,7 @@ L.DrawToolbar.include ({
 			handler: new L.Draw.Marker(map, this.options.marker),
 			title: L.drawLocal.draw.toolbar.buttons.marker
 		},{
-      enabled: this.options.marker,
+      		enabled: this.options.marker,
 			handler: new L.Draw.MarkerTextBox(map, this.options.marker),
 			title: 'Write text'
 		}];
@@ -55,6 +56,13 @@ L.DrawToolbar.include ({
 });
 
 class DrawTools extends Component {
+	constructor(props){
+	  super(props);
+	  this.state = {
+		  geoJSONAll: [] // property for all GeoJSON data in the map
+	  }
+	}
+
 	_onCreated = (e) => {
 		// check if a drawn polyline has just one point in it
 		if (e.layerType === 'polyline' && e.layer.getLatLngs().length === 1) {
@@ -62,13 +70,26 @@ class DrawTools extends Component {
 			return;
 		}
 		// binding text field to textbox
+		// clicking on tooltip fires the marker's click handler
 		if (e.layerType === 'textbox') {
-			e.layer.bindTooltip('<div class="editable" contenteditable="true" placeholder="Type here"></div>', {permanent: true});
+			e.layer.bindTooltip('<div class="editable" contenteditable="true" placeholder="Click here and type"></div>', {permanent: true, direction: 'center', interactive: true});
 		}
-		// turning layer data to geoJSON
+		// turning layer data to GeoJSON
 		let layer = e.layer;
-		let geoJSON = layer.toGeoJSON();
-		console.log(JSON.stringify(geoJSON, null, 4)); // makes the output readable in the console
+    this.makeGeoJSON(e.layer);
+    
+    /* Original GeoJSON code. Uncomment if needed
+    let geoJSON = layer.toGeoJSON();
+    console.log(JSON.stringify(geoJSON, null, 4)); // makes the output readable in the console
+    */
+	}
+
+	makeGeoJSON = (e) => {
+    let geoJSON = e.toGeoJSON();
+    let newAllGeoJSON = this.state.geoJSONAll;
+    newAllGeoJSON.push(geoJSON);
+    console.log(JSON.stringify(newAllGeoJSON, null, 4));
+    this.setState({geoJSONAll: newAllGeoJSON});
 	}
 
 	render() {
diff --git a/src/components/UserMap.js b/src/components/UserMap.js
index 2a5d9d1..b22033f 100644
--- a/src/components/UserMap.js
+++ b/src/components/UserMap.js
@@ -92,9 +92,9 @@ class UserMap extends Component {
         minZoom='7'
         maxZoom='17'
         // onzoomend={this.testers} // getting the zoom level
-        maxBounds={this.props.bounds}
+        maxBounds={this.props.bounds} // maxBounds settings don't work for now, for some reason
         maxBoundsViscosity='1'
-        zoomControl={false} /* remove the default zoom control button at the top left corner */>
+        zoomControl={false} /* remove the default zoom control button at the top left corner */ >
         <TileLayer
           attribution='&copy; <a href="https://www.maanmittauslaitos.fi/">Maanmittauslaitos</a>'
           url={this.props.mapUrl}
-- 
GitLab