Merge pull request #101 from mapbender/feature/update-to-version-4

more digitizer enhancements
mapbender · Feb 7, 2024 · cb1786a · cb1786a
2 parents 9f673bb + c53d2c6
commit cb1786a
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,14 @@
 * Add default whitepace: pre-line in text fields to keep formatting ([PR#98](https://github.com/mapbender/mapbender-digitizer/pull/98))
 * Allow to set text area height by providing row attribute  ([PR#98](https://github.com/mapbender/mapbender-digitizer/pull/98))
 * Add option `paging` on root level to disable paging ([PR#99](https://github.com/mapbender/mapbender-digitizer/pull/99))
+* Allow to set maximumSelectionLength in select2 (type select) ([PR#101](https://github.com/mapbender/mapbender-digitizer/pull/101))
+* Make 'eval' in change event error safe ([PR#101](https://github.com/mapbender/mapbender-digitizer/pull/101))
+* Allow labelOutline properties in styleAdapter (labelOutlineColor, labelOutlineWidth, labelYOffset, labelXOffset) ([PR#101](https://github.com/mapbender/mapbender-digitizer/pull/101))
+* Adjust copy symbol ([PR#101](https://github.com/mapbender/mapbender-digitizer/pull/101)) 
+* Adjust border display of mandatory fields (inputs, select, select2, textarea) ([PR#101](https://github.com/mapbender/mapbender-digitizer/pull/101))
+* Adjust display of refresh button  ([PR#101](https://github.com/mapbender/mapbender-digitizer/pull/101))
+* Allow popup.modal and popup.position  ([PR#101](https://github.com/mapbender/mapbender-digitizer/pull/101))
+* Allow zoomBuffer parameter ([PR#101](https://github.com/mapbender/mapbender-digitizer/pull/101))
 
 ## 1.5.7
 * Rewrite context menu for Openlayers 7 compatibility

diff --git a/src/Mapbender/DataManagerBundle/Resources/public/FormRenderer.js b/src/Mapbender/DataManagerBundle/Resources/public/FormRenderer.js
@@ -217,7 +217,10 @@
                         s2options.dropdownParent = scope;
                     }
                     var style = $select.attr('style');
-                    $(this).select2(s2options);
+                    $select.select2(s2options);
+                    if ($select.is('[required]')) {
+                        $select.next('.select2-container').addClass('select2-required');
+                    }
                     // Forward custom css rules from (now hidden) select2-ified select to visible select2 element
                     var $group = $select.closest('.mb-3');
                     var widthRxp = /width\s*:\s*[^;]*;?\s*/;
@@ -612,7 +615,8 @@
                 // Safest width inside .mb-3 / Bootstrap grids
                 width: '100%',
                 placeholder: placeholderText || '',
-                allowClear: !required && !!placeholderText
+                allowClear: !required && !!placeholderText,
+                maximumSelectionLength: item.maximumSelectionLength || null,
             };
         },
         handle_radioGroup_: function(settings) {
@@ -737,7 +741,11 @@
                         var element = $input;
                         var el = element;
                         return function() {
-                            eval(code);
+                           try {
+                               eval(code);
+                           } catch(e) {
+                               console.warn("Error in eval",code);
+                           }
                         };
                     })(handler);
                 }

diff --git a/src/Mapbender/DataManagerBundle/Resources/public/dataManager.element.js b/src/Mapbender/DataManagerBundle/Resources/public/dataManager.element.js
@@ -492,6 +492,8 @@
                 minWidth = parseInt(width.replace(/px$/, '')) || minWidth
             }
             return {
+                position:  schema.popup.position || {},
+                modal: schema.popup.modal || false,
                 title: schema.popup.title || Mapbender.trans('mb.data-manager.details_title'),
                 width: schema.popup.width,
                 minWidth: minWidth,

diff --git a/src/Mapbender/DataManagerBundle/Resources/styles/dataManager.element.scss b/src/Mapbender/DataManagerBundle/Resources/styles/dataManager.element.scss
@@ -189,6 +189,15 @@ $buttonActiveTextColor: #fff !default;
     color: #707070;
     font-size: 11px;
 
+    textarea:required,
+    select:required ,
+    input:required,
+    .select2-required .select2-selection {
+        border: 2px solid #D5A99F;
+        border-radius: 4px;
+        transition: border-color 0.3s ease
+    }
+
     > .ui-tabs .ui-tabs-panel, &.content-padding {
         padding: 15px;
     }
@@ -308,17 +317,6 @@ $buttonActiveTextColor: #fff !default;
         margin-top: 0;
     }
 
-    div.mandatory {
-        input, select, textarea, .select2-selection {
-            border: 2px solid #D5A99F; /* Slightly thicker border for better visibility */
-            border-radius: 4px; /* Rounded corners for a smoother look */
-            transition: border-color 0.3s ease; /* Smooth transition for border color */
-
-            &.select2-search__field {
-                border: none;
-            }
-        }
-    }
 }
 
 .data-manager-datepicker {

diff --git a/src/Mapbender/DataManagerBundle/Resources/views/Element/DataManager.html.twig b/src/Mapbender/DataManagerBundle/Resources/views/Element/DataManager.html.twig
@@ -26,10 +26,10 @@
             <div class="btn-group">
                 {%- block toolset_buttons -%}
                 <button type="button"
-                        class="-fn-refresh btn btn-secondary"
+                        class="-fn-refresh btn btn-outline-secondary"
                         title="{{ 'mb.actions.refresh' | trans }}"><i class="fa fas fa-refresh"></i></button>
                 <button type="button"
-                        class="-fn-create-item btn btn-secondary"
+                        class="-fn-create-item btn btn-outline-secondary"
                         title="{{ 'mb.data.store.create' | trans }}"><i class="fa fas fa-plus"></i></button>
                 {%- endblock -%}
             </div>

diff --git a/src/Mapbender/DigitizerBundle/Resources/public/StyleAdapter.js b/src/Mapbender/DigitizerBundle/Resources/public/StyleAdapter.js
@@ -24,7 +24,7 @@
         placeholderRx_: /\${([^}]+)}/g,
         styleFunctionFromSvgRules: function(styleConfig, dataCallback) {
             var self = this;
-            var placeholderCandidates = ['fillColor', 'strokeColor', 'label', 'fontColor', 'externalGraphic'];
+            var placeholderCandidates = ['fillColor', 'strokeColor', 'label', 'fontColor', 'externalGraphic', 'labelOutlineColor', 'labelOutlineWidth', 'labelYOffset', 'labelXOffset'];
             return (function(styleConfig) {
                 var placeholderProps = self.detectDataPlaceholders_(styleConfig, placeholderCandidates);
                 var labelValue = styleConfig.label;
@@ -127,6 +127,17 @@
             var textStyle = this.getDefaultTextStyle();
             textStyle.setFont(this.canvasFontRuleFromSvg(ol2Style));
             this.resolveTextStyle_(textStyle, ol2Style);
+            if (ol2Style.labelOutlineWidth) {
+                textStyle.setStroke(new ol.style.Stroke({
+                    color: ol2Style.labelOutlineColor || '#ffffff', // Default to white if not specified
+                    width: ol2Style.labelOutlineWidth
+                }));
+            }
+            if (ol2Style.labelXOffset || ol2Style.labelYOffset) {
+                textStyle.setOffsetX(ol2Style.labelXOffset || 0);
+                textStyle.setOffsetY(ol2Style.labelYOffset || 0);
+            }
+
             return textStyle;
         },
         getIconStyle: function(styleConfig) {
@@ -176,6 +187,12 @@
             if (styleConfig.fontColor || (typeof styleConfig.fontOpacity !== 'undefined')) {
                 targetStyle.getFill().setColor(this.parseSvgColor(styleConfig, 'fontColor', 'fontOpacity', targetStyle.getFill().getColor()));
             }
+            if (styleConfig.labelOutlineWidth) {
+                targetStyle.getStroke() && targetStyle.getStroke().setWidth(styleConfig.labelOutlineWidth);
+                targetStyle.getStroke() && targetStyle.getStroke().setColor(styleConfig.labelOutlineColor || targetStyle.getStroke().getColor());
+            }
+            targetStyle.setOffsetX(styleConfig.labelXOffset || 0);
+            targetStyle.setOffsetY(styleConfig.labelYOffset || 0);
         },
         /**
          * @param {Object} style

diff --git a/src/Mapbender/DigitizerBundle/Resources/public/mapbender.element.digitizer.js b/src/Mapbender/DigitizerBundle/Resources/public/mapbender.element.digitizer.js
@@ -669,7 +669,7 @@
             });
         },
         zoomToFeature: function(schema, feature) {
-            Mapbender.Model.zoomToFeature(feature);
+            Mapbender.Model.zoomToFeature(feature, { buffer: schema.zoomBuffer || 10 });
         },
         _getEditDialogPopupConfig: function(schema, dataItem) {
             var options = this._superApply(arguments);

diff --git a/src/Mapbender/DigitizerBundle/Resources/views/Element/Digitizer.html.twig b/src/Mapbender/DigitizerBundle/Resources/views/Element/Digitizer.html.twig
@@ -2,7 +2,7 @@
 {%- block table_buttons -%}
     <button type="button"
             class="-fn-copy btn btn-outline-secondary"
-            title="{{ 'mb.digitizer.feature.clone.title' | trans }}"><i class="fa fas fa-copy"></i></button>
+            title="{{ 'mb.digitizer.feature.clone.title' | trans }}"><i class="fa far fa-copy"></i></button>
     {#- eat whitespace -#}
     <button type="button"
             class="-fn-edit-style btn btn-outline-secondary"