Merge pull request #31 from fupduck/features/different_markers_per_color

Features/different markers per color
dwilhelm89 · Sep 9, 2017 · e38e752 · e38e752
2 parents 165a3bd + 7a05050
commit e38e752
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 15 deletions.
diff --git a/dist/javascript/Leaflet.StyleEditor.min.js b/dist/javascript/Leaflet.StyleEditor.min.js
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "devDependencies": {
         "grunt": "~1.x",
         "grunt-contrib-concat": "~1.x",
-        "grunt-contrib-uglify": "~3.x",
+        "grunt-contrib-uglify": "git://github.com/gruntjs/grunt-contrib-uglify.git#harmony",
         "grunt-contrib-cssmin": "~2.x"
     },
     "repository": {

diff --git a/src/javascript/Control.js b/src/javascript/Control.js
@@ -5,7 +5,7 @@ L.Control.StyleEditor = L.Control.extend({
         colorRamp: ['#1abc9c', '#2ecc71', '#3498db', '#9b59b6', '#34495e', '#16a085', '#27ae60', '#2980b9', '#8e44ad',
                     '#2c3e50', '#f1c40f', '#e67e22', '#e74c3c', '#ecf0f1', '#95a5a6', '#f39c12', '#d35400', '#c0392b',
                     '#bdc3c7', '#7f8c8d'],
-        defaultColor: 'f39c12',
+        defaultColor: null,
         currentElement: null,
         markerType: L.StyleEditor.marker.DefaultMarker,
         geometryForm: L.StyleEditor.forms.GeometryForm,
@@ -17,6 +17,8 @@ L.Control.StyleEditor = L.Control.extend({
             tooltip: 'Click on the element you want to style',
             tooltipNext: 'Choose another element you want to style'
         },
+        markers: null,
+        defaultMarker: null,
         useGrouping: true
     },
 

diff --git a/src/javascript/Form/MarkerForm.js b/src/javascript/Form/MarkerForm.js
@@ -10,7 +10,7 @@ L.StyleEditor.forms.MarkerForm = L.StyleEditor.forms.Form.extend({
 
     /** before showing the MarkerForm update currently used MarkerIcon */
     preShow: function () {
-        Object.assign(this.options.styleEditorOptions.markerType.options.iconOptions,
+        Object.assign(this.options.styleEditorOptions.markerType.getIconOptions(),
             this.options.styleEditorOptions.util.getCurrentElement().options.icon.options);
     }
 });
diff --git a/src/javascript/FormElements/IconElement.js b/src/javascript/FormElements/IconElement.js
@@ -19,7 +19,7 @@ L.StyleEditor.formElements.IconElement = L.StyleEditor.formElements.FormElement.
     style: function () {
         this._styleSelectInputImage(this.options.selectBoxImage,
             this.options.styleEditorOptions.markerType.options.iconOptions.icon);
-        this._createColorSelect(this.options.styleEditorOptions.markerType.options.iconOptions.color);
+        this._createColorSelect(this.options.styleEditorOptions.markerType.options.iconOptions.iconColor);
         this._hideSelectOptions();
     },
 
@@ -57,15 +57,14 @@ L.StyleEditor.formElements.IconElement = L.StyleEditor.formElements.FormElement.
         if (!this.options.selectOptions) {
             this.options.selectOptions = {};
         }
-
         if (color in this.options.selectOptions)
             return;
 
         var uiElement = this.options.uiElement;
         var selectOptionWrapper =
             L.DomUtil.create('ul', this._selectOptionWrapperClasses, uiElement);
 
-        this.options.styleEditorOptions.markerType.options.markers.forEach(function (option) {
+        this.options.styleEditorOptions.util.getMarkersForColor(color).forEach(function (option) {
             var selectOption = L.DomUtil.create('li', this._selectOptionClasses, selectOptionWrapper);
             var selectImage = this._createSelectInputImage(selectOption);
             this._styleSelectInputImage(selectImage, option, color);

diff --git a/src/javascript/Marker/Marker.js b/src/javascript/Marker/Marker.js
@@ -8,27 +8,22 @@ L.StyleEditor.marker.Marker = L.Class.extend({
     /** set standard icon */
     initialize: function(options) {
         L.setOptions(this, options);
-        this.options.iconOptions = {
-            iconSize: [20, 50],
-            iconColor: 'rgb(41, 128, 185)',
-            icon: 'square'
-        };
     },
 
     /** create new Marker and show it */
     setNewMarker: function() {
-        var iconOptions = this.options.iconOptions;
+        var iconOptions = this.getIconOptions();
 
         if (iconOptions.iconSize && iconOptions.icon && iconOptions.iconColor) {
-            var newIcon = this.createMarkerIcon(iconOptions);
+            var newIcon = this._createMarkerIcon(iconOptions);
             var currentElement = this.options.styleEditorOptions.currentElement.target;
             currentElement.setIcon(newIcon);
         }
     },
 
     /** set styling options */
     setStyle: function (styleOption, value) {
-        var iconOptions = this.options.iconOptions;
+        var iconOptions = this.getIconOptions();
         if(iconOptions[styleOption] != value) {
             iconOptions[styleOption] = value;
             this.setNewMarker();
@@ -38,6 +33,49 @@ L.StyleEditor.marker.Marker = L.Class.extend({
     /** create HTML used to */
     createSelectHTML: function(parentUiElement, iconOptions, icon) {
         this.createSelectHTML(parentUiElement, iconOptions, icon);
+    },
+
+    getIconOptions: function() {
+        if (!this.options.iconOptions) {
+            var color = this.options.styleEditorOptions.defaultColor;
+            if (color == null) {
+                color = this.options.defaultColor;
+            }
+            if (color == null && this.options.colorRamp != null) {
+                color = this.options.colorRamp[0];
+            }
+            if (color == null) {
+                color = this.options.styleEditorOptions.colorRamp[0];
+            }
+
+            color = this.options.styleEditorOptions.util.rgbToHex(color);
+
+            this.options.iconOptions = {
+                iconSize: [20, 50],
+                iconColor: color,
+                icon:  this.options.styleEditorOptions.util.getDefaultMarkerForColor(color)
+            };
+        }
+
+        return this._ensureMarkerIcon(this.options.iconOptions);
+    },
+
+    _createMarkerIcon: function(iconOptions) {
+        iconOptions = this.getIconOptions(iconOptions);
+        return this.createMarkerIcon(iconOptions);
+    },
+
+    _ensureMarkerIcon: function(iconOptions) {
+        var markers = this.options.styleEditorOptions.util.getMarkersForColor(iconOptions.iconColor);
+
+        if (markers.includes(iconOptions.icon)) {
+            return iconOptions;
+        }
+
+        iconOptions.icon = this.options.styleEditorOptions.util.getDefaultMarkerForColor(iconOptions.iconColor);
+
+        return iconOptions;
+
     }
 });
 

diff --git a/src/javascript/Util.js b/src/javascript/Util.js
@@ -28,6 +28,9 @@ L.StyleEditor.Util = L.Class.extend({
     rgbToHex: function(rgb, no_hash) {
         if (!rgb) {
             rgb = this.options.styleEditorOptions.defaultColor;
+            if(rgb.indexOf('#') != 0) {
+                rgb = '#'+rgb;
+            }
         }
 
         if (rgb.indexOf('#') == 0) {
@@ -37,6 +40,10 @@ L.StyleEditor.Util = L.Class.extend({
             return rgb;
         }
 
+        if (rgb.indexOf('(') < 0) {
+            return '#' + rgb;
+        }
+
         var without_hash = '';
         rgb = rgb.substring(4).replace(')', '').split(',');
         without_hash = this._componentToHex(parseInt(rgb[0], 10)) + this._componentToHex(parseInt(rgb[1], 10)) +
@@ -103,4 +110,75 @@ L.StyleEditor.Util = L.Class.extend({
         return hex.length === 1 ? '0' + hex : hex;
     },
 
+    /** get the markers for a specific color **/
+    getMarkersForColor: function(color) {
+        color = this.rgbToHex(color);
+
+        var markers = this.options.styleEditorOptions.markerType.options.markers;
+        var controlMarkers = this.options.styleEditorOptions.markers;
+
+        // if only an array of markers is given return it
+        if (!Array.isArray(markers)) {
+
+            // if color is specified return specific markers
+            if (Object.keys(markers).includes(color)) {
+                markers = markers[color];
+            } else {
+                markers = markers['default'];
+            }
+        }
+        if (controlMarkers != null) {
+            if(!Array.isArray(controlMarkers)) {
+                var keys = Object.keys(controlMarkers);
+                if(keys.includes(color)) {
+                    controlMarkers = controlMarkers[color];
+                } else if (keys.includes('default')) {
+                    controlMarkers = controlMarkers['default'];
+                } else {
+                    controlMarkers = markers;
+                }
+            }
+
+            return markers.filter((n) => controlMarkers.includes(n))
+        }
+        return markers;
+    },
+
+    /** get default marker for specific color **/
+    getDefaultMarkerForColor: function(color) {
+        color = this.rgbToHex(color);
+
+        var markers = this.getMarkersForColor(color);
+
+        var defMarkers = [];
+
+        var defaultMarker = this.options.styleEditorOptions.defaultMarker;
+        if (defaultMarker != null) {
+            if (typeof defaultMarker === 'string') {
+                defMarkers.push(defaultMarker);
+            }
+            if (Object.keys(defaultMarker).includes(color)) {
+                defMarkers.push(defaultMarker[color]);
+            }
+
+        }
+
+        defaultMarker = this.options.styleEditorOptions.markerType.options.defaultMarker;
+        if (defaultMarker != undefined) {
+            if (typeof defaultMarker === 'string') {
+                defMarkers.push(defaultMarker);
+            }
+            if (Object.keys(defaultMarker).includes(color)) {
+                defMarkers.push(defaultMarker[color]);
+            }
+        }
+
+        defMarkers.filter((n) => markers.includes(n));
+        if (defMarkers.length > 0) {
+            return defMarkers[0];
+        }
+
+        return markers[0];
+    }
+
 });