Merge remote-tracking branch 'origin/2.4'

camptocamp · Jul 11, 2019 · db76c92 · db76c92
2 parents 100b998 + c82f056
commit db76c92
Show file tree

Hide file tree

Showing 19 changed files with 157 additions and 153 deletions.
diff --git a/buildtools/svg-viewbox-loader.js b/buildtools/svg-viewbox-loader.js
@@ -1,5 +1,19 @@
+/**
+ * Webpack loader to be used after `svg-inline-loader`.
+ *
+ * It will:
+ *  * Fill the `viewBox` if it's missing (to be able to change the `width` and the `height`).
+ *  * Fill the `width` and `height` (required by OpenLayers).
+ *  * Allows to change the `width` and `height` (with `width` or `height` arguments).
+ *  * Remove the unneeded `x` and `y` property.
+ *
+ * See also the `svg` example.
+ */
+
 const simpleHTMLTokenizer = require('simple-html-tokenizer');
+const querystring = require('querystring');
 const generate = require('./generate-xml-from-tokens.js');
+const parseUnit = require('parse-absolute-css-unit')
 
 module.exports = function(source) {
   this.cacheable(true);
@@ -9,66 +23,57 @@ module.exports = function(source) {
     if (tag.type === 'StartTag' && tag.tagName === 'svg') {
       let width = undefined;
       let height = undefined;
-      let x = 0;
-      let y = 0;
+      let viewBox = undefined;
       for (const attribute of tag.attributes) {
         if (attribute[0] === 'width') {
           try {
-            width = parseFloat(attribute[1]);
+            width = parseUnit(attribute[1]);
           } catch (e) {
             console.warn('Unable to read width: ' + attribute[1]);
           }
         }
         if (attribute[0] === 'height') {
           try {
-            height = parseFloat(attribute[1]);
+            height = parseUnit(attribute[1]);
           } catch (e) {
             console.warn('Unable to read height: ' + attribute[1]);
           }
         }
-        if (attribute[0] === 'x') {
-          try {
-            x = parseFloat(attribute[1]);
-          } catch (e) {
-            console.warn('Unable to read x: ' + attribute[1]);
-          }
-        }
-        if (attribute[0] === 'y') {
-          try {
-            y = parseFloat(attribute[1]);
-          } catch (e) {
-            console.warn('Unable to read y: ' + attribute[1]);
-          }
-        }
         if (attribute[0] === 'viewBox') {
-          try {
-            const attrs = attribute[1].split(' ');
-            x = parseFloat(attrs[0]);
-            y = parseFloat(attrs[1]);
-            width = parseFloat(attrs[2]);
-            height = parseFloat(attrs[3]);
-          } catch (e) {
-            console.warn('Unable to read viewbox: ' + attribute[1]);
-          }
+          viewBox = attribute[1];
+        }
+      }
+      if (viewBox !== undefined && width === undefined && height === undefined) {
+        try {
+          const attrs = viewBox.split(' ');
+          width = parseFloat(attrs[2]);
+          height = parseFloat(attrs[3]);
+        } catch (e) {
+          console.warn('Unable to read viewBox: ' + viewBox);
         }
       }
       if (width !== undefined && height != undefined) {
         tag.attributes = tag.attributes.filter((attribute) => {
-          return attribute[0] !== 'width' && attribute[0] != 'height' && attribute[0] != 'viewBox';
+          return attribute[0] !== 'width' && attribute[0] !== 'height' &&
+              attribute[0] !== 'x' && attribute[0] !== 'y';
         });
-        if (x) {
-          tag.attributes.push(['x', x, true]);
-        }
-        if (y) {
-          tag.attributes.push(['y', y, true]);
+        if (viewBox === undefined) {
+          tag.attributes.push(['viewBox', `0 0 ${width} ${height}`, true]);
         }
-        if (this.resourceQuery.search(/inline/) >= 0) {
+        const queryString = this.resourceQuery.startsWith('?') ? this.resourceQuery.substring(1) :
+            this.resourceQuery;
+        const query = querystring.decode(queryString);
+        if (query.width !== undefined) {
+          const parsed = query.width.match(/^([0-9]+)([a-z]*)$/);
+          tag.attributes.push(['width', query.width, true]);
+          tag.attributes.push(['height', `${height / width * parseFloat(parsed[1])}${parsed[2]}`, true]);
+        } else if (query.height !== undefined) {
+          const parsed = query.height.match(/^([0-9]+)([a-z]*)$/);
+          tag.attributes.push(['width', `${width / height * parseFloat(parsed[1])}${parsed[2]}`, true]);
+          tag.attributes.push(['height', query.height, true]);
+        } else {
           tag.attributes.push(['width', width, true]);
           tag.attributes.push(['height', height, true]);
-        } else {
-          tag.attributes.push(['viewBox', `0 0 ${width} ${height}`, true]);
-          tag.attributes.push(['height', '1em', true]);
-          tag.attributes.push(['width', `${width / height}em`, true]);
         }
       }
     }

diff --git a/buildtools/webpack.dev.js b/buildtools/webpack.dev.js
@@ -26,6 +26,7 @@ const svgRule = {
       'svgo-loader',
     ]
   }, {
+    resourceQuery: /viewbox/,
     use: [
       {
         loader: 'svg-inline-loader',
@@ -36,6 +37,16 @@ const svgRule = {
       './buildtools/svg-viewbox-loader',
       'svgo-loader',
     ]
+  }, {
+    use: [
+      {
+        loader: 'svg-inline-loader',
+        options: {
+          removeSVGTagAttrs: false,
+        },
+      },
+      'svgo-loader',
+    ]
   }]
 };
 

diff --git a/buildtools/webpack.prod.js b/buildtools/webpack.prod.js
@@ -26,14 +26,15 @@ const svgRule = {
       'svgo-loader',
     ]
   }, {
-    resourceQuery: /inline/,
+    resourceQuery: /viewbox/,
     use: [
       {
         loader: 'svg-inline-loader',
         options: {
           removeSVGTagAttrs: false,
         },
       },
+      './buildtools/svg-viewbox-loader',
       'svgo-loader',
     ]
   }, {
@@ -44,7 +45,6 @@ const svgRule = {
           removeSVGTagAttrs: false,
         },
       },
-      './buildtools/svg-viewbox-loader',
       'svgo-loader',
     ]
   }]

diff --git a/contribs/gmf/apps/appmodule.js b/contribs/gmf/apps/appmodule.js
@@ -20,22 +20,5 @@ module.config(['$compileProvider', function($compileProvider) {
   }
 }]);
 
-/**
- * @type {Array.<Object.<string, string>>}
- */
-const appFloors = [
-  {value: '10', label: '10'},
-  {value: '9', label: '9'},
-  {value: '8', label: '8'},
-  {value: '7', label: '7'},
-  {value: '6', label: '6'},
-  {value: '5', label: '5'},
-  {value: '4', label: '4'},
-  {value: '3', label: '3'},
-  {value: '2', label: '2'},
-  {value: 'NULL', label: 'N'},
-  {value: '*', label: '*'}
-];
-module.constant('appFloors', appFloors);
 
 export default module;
diff --git a/contribs/gmf/apps/desktop_alt/Controller.js b/contribs/gmf/apps/desktop_alt/Controller.js
@@ -43,10 +43,9 @@ class Controller extends AbstractDesktopController {
   /**
    * @param {angular.IScope} $scope Scope.
    * @param {angular.auto.IInjectorService} $injector Main injector.
-   * @param {Array<Object<string, string>>} appFloors Floor dimension values and labels.
    * @ngInject
    */
-  constructor($scope, $injector, appFloors) {
+  constructor($scope, $injector) {
     super({
       srid: 21781,
       mapViewConfig: {
@@ -56,16 +55,6 @@ class Controller extends AbstractDesktopController {
       }
     }, $scope, $injector);
 
-    /**
-     * @type {Array<Object<string, string>>}
-     */
-    this.floors = appFloors;
-
-    /**
-     * @type {Object<string, string>}
-     */
-    this.dimensions = {};
-
     if (this.dimensions.FLOOR == undefined) {
       this.dimensions.FLOOR = '*';
     }
@@ -198,9 +187,7 @@ module.value('gmfPermalinkOptions', /** @type {import('gmf/permalink/Permalink.j
   crosshairStyle: [
     new Style({
       image: new Icon({
-        src: 'data:image/svg+xml;base64,' + btoa(require('./image/crosshair.svg?inline')),
-        // Also working
-        // src: require('./image/crosshair.svg?url'),
+        src: 'data:image/svg+xml;base64,' + btoa(require('./image/crosshair.svg?viewbox')),
         imgSize: [22, 22],
       })
     })

diff --git a/contribs/gmf/apps/desktop_alt/index.html.ejs b/contribs/gmf/apps/desktop_alt/index.html.ejs
@@ -17,7 +17,7 @@
   </div>
   <header>
     <div class="logo">
-      <%=require("./image/logo.svg?inline")%>
+      <%=require("./image/logo.svg")%>
       <span>by Camptocamp</span>
     </div>
   </header>
@@ -306,8 +306,7 @@
         </gmf-map>
 
         <gmf-floorselector class="gmf-floorselector ol-unselectable ol-control"
-          value="mainCtrl.dimensions.FLOOR"
-          items="::mainCtrl.floors">
+          value="mainCtrl.dimensions.FLOOR">
         </gmf-floorselector>
 
         <!--infobar-->

diff --git a/contribs/gmf/src/drawing/drawFeatureComponent.html b/contribs/gmf/src/drawing/drawFeatureComponent.html
@@ -13,7 +13,7 @@
     class="btn btn-default ngeo-drawfeature-point"
     ng-class="{active: dfCtrl.drawPoint.active}"
     ng-model="dfCtrl.drawPoint.active">
-    <%=require('gmf/icons/point.svg')%>
+    <%=require('gmf/icons/point.svg?viewbox&height=1em')%>
   </a>
   <a
     data-toggle="tooltip"
@@ -24,7 +24,7 @@
     class="btn btn-default ngeo-drawfeature-linestring"
     ng-class="{active: dfCtrl.measureLength.active}"
     ng-model="dfCtrl.measureLength.active">
-    <%=require('gmf/icons/line.svg')%>
+    <%=require('gmf/icons/line.svg?viewbox&height=1em')%>
   </a>
   <a
     data-toggle="tooltip"
@@ -35,7 +35,7 @@
     class="btn btn-default ngeo-drawfeature-polygon"
     ng-class="{active: dfCtrl.measureArea.active}"
     ng-model="dfCtrl.measureArea.active">
-    <%=require('gmf/icons/polygon.svg')%>
+    <%=require('gmf/icons/polygon.svg?viewbox&height=1em')%>
   </a>
   <a
     data-toggle="tooltip"
@@ -46,7 +46,7 @@
     class="btn btn-default ngeo-drawfeature-circle"
     ng-class="{active: dfCtrl.measureAzimut.active}"
     ng-model="dfCtrl.measureAzimut.active">
-    <%=require('gmf/icons/circle.svg')%>
+    <%=require('gmf/icons/circle.svg?viewbox&height=1em')%>
   </a>
   <a
     data-toggle="tooltip"
@@ -57,7 +57,7 @@
     class="btn btn-default ngeo-drawfeature-rectangle"
     ng-class="{active: dfCtrl.drawRectangle.active}"
     ng-model="dfCtrl.drawRectangle.active">
-    <%=require('gmf/icons/rectangle.svg')%>
+    <%=require('gmf/icons/rectangle.svg?viewbox&height=1em')%>
   </a>
   <a
     data-toggle="tooltip"
@@ -68,7 +68,7 @@
     class="btn btn-default ngeo-drawfeature-text"
     ng-class="{active: dfCtrl.drawText.active}"
     ng-model="dfCtrl.drawText.active">
-    <%=require('gmf/icons/text.svg')%>
+    <%=require('gmf/icons/text.svg?viewbox&height=1em')%>
   </a>
 </ngeo-drawfeature>
 

diff --git a/contribs/gmf/src/editing/editFeatureComponent.html b/contribs/gmf/src/editing/editFeatureComponent.html
@@ -15,27 +15,27 @@
       ng-model="efCtrl.createActive">
       <span ng-switch="::efCtrl.geomType">
         <span ng-switch-when="Point">
-          <%=require('gmf/icons/point.svg')%>
+          <%=require('gmf/icons/point.svg?viewbox&height=1em')%>
           {{'Draw new point' | translate}}
         </span>
         <span ng-switch-when="MultiPoint">
-          <%=require('gmf/icons/point.svg')%>
+          <%=require('gmf/icons/point.svg?viewbox&height=1em')%>
           {{'Draw new point' | translate}}
         </span>
         <span ng-switch-when="LineString">
-          <%=require('gmf/icons/line.svg')%>
+          <%=require('gmf/icons/line.svg?viewbox&height=1em')%>
           {{'Draw new linestring' | translate}}
         </span>
         <span ng-switch-when="MultiLineString">
-          <%=require('gmf/icons/line.svg')%>
+          <%=require('gmf/icons/line.svg?viewbox&height=1em')%>
           {{'Draw new linestring' | translate}}
         </span>
         <span ng-switch-when="Polygon">
-          <%=require('gmf/icons/polygon.svg')%>
+          <%=require('gmf/icons/polygon.svg?viewbox&height=1em')%>
           {{'Draw new polygon' | translate}}
         </span>
         <span ng-switch-when="MultiPolygon">
-          <%=require('gmf/icons/polygon.svg')%>
+          <%=require('gmf/icons/polygon.svg?viewbox&height=1em')%>
           {{'Draw new polygon' | translate}}
         </span>
       </span>

diff --git a/contribs/gmf/src/floor/floorselectorComponent.js b/contribs/gmf/src/floor/floorselectorComponent.js
@@ -26,7 +26,7 @@ module.value('gmfFloorselectorTemplateUrl',
    * @return {string} The template url.
    */
   ($attrs) => {
-    const templateUrl = $attrs['gmfFloorselectorTemplateUrl'];
+    const templateUrl = $attrs.gmfFloorselectorTemplateUrl;
     return templateUrl !== undefined ? templateUrl :
       'gmf/floor/floorselectorcomponent';
   });
@@ -54,17 +54,18 @@ class Controller {
   /**
    * @param {angular.IScope} $scope Angular scope.
    * @param {JQuery} $element Element.
+   * @param {Array<Object<string, string>>} gmfFloors Floor dimension values and labels.
    * @private
    * @ngInject
    * @ngdoc controller
    * @ngname GmfFilterselectorController
    */
-  constructor($scope, $element) {
+  constructor($scope, $element, gmfFloors) {
 
     /**
      * @type {Array<Object<string, string>>}
      */
-    this.items;
+    this.items = gmfFloors;
 
     /**
      * @type {number}
@@ -188,29 +189,25 @@ class Controller {
  * Example:
  *
  *      <gmf-floorselector class="gmf-floorselector ol-unselectable ol-control"
- *        value="mainCtrl.dimensions.FLOOR"
- *        items="::mainCtrl.floors">
+ *        value="mainCtrl.dimensions.FLOOR">
  *      </gmf-floorselector>
  *
- * With:
+ * With the injected value `gmfFloors` with:
  *
- *      mainCtrl.floors = [
+ *      [
  *        {value: 'value1', label: 'label1'},
  *        {value: 'value2', label: 'label2'},
  *        ...
  *      ];
  *
  * @htmlAttribute {string} value Current floor value.
- * @htmlAttribute {Array<Object<string, string>>} items List of objects with "value" and
- * "label" properties.
  *
  * @ngdoc component
  * @ngname gmfFloorselector
  */
 const floorSelectorComponent = {
   bindings: {
     value: '=',
-    items: '<'
   },
   controller: Controller,
   templateUrl: gmfFloorselectorTemplateUrl