Merge pull request #5002 from camptocamp/svg-more-flexible

Try to be more flexible and less magic by default
camptocamp · Jul 11, 2019 · 54c1112 · 54c1112
2 parents 8dc116a + f22239e
commit 54c1112
Show file tree

Hide file tree

Showing 18 changed files with 150 additions and 114 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/desktop_alt/Controller.js b/contribs/gmf/apps/desktop_alt/Controller.js
@@ -203,9 +203,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/image/crosshair.svg b/contribs/gmf/apps/desktop_alt/image/crosshair.svg
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>

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/import/wmsCapabilityLayertreeComponent.html b/contribs/gmf/src/import/wmsCapabilityLayertreeComponent.html
@@ -57,7 +57,7 @@
     <span
       ng-if="::(layer.Layer !== undefined && layer.Layer.length)"
       class="fa fa-fw gmf-wmscapabilitylayertreenode-group"
-    ><%=require('gmf/icons/layers.svg')%></span>
+    ><%=require('gmf/icons/layers.svg?viewbox&height=1em')%></span>
 
     <a
       class="fa fa-circle-thin gmf-wmscapabilitylayertreenode-no-icon fa-fw "

diff --git a/contribs/gmf/src/layertree/component.html b/contribs/gmf/src/layertree/component.html
@@ -45,7 +45,7 @@
     ng-click="::gmfLayertreeCtrl.toggleActive(layertreeCtrl)"
     ng-if="::!layertreeCtrl.node.children && !gmfLayertreeCtrl.getLegendIconURL(layertreeCtrl)"
     class="gmf-layertree-layer-icon gmf-layertree-no-layer-icon"
-  ><%=require('gmf/icons/dot.svg')%></a>
+  ><%=require('gmf/icons/dot.svg?viewbox&height=1em')%></a>
 
   <a
     href
@@ -58,13 +58,13 @@
     ng-click="::gmfLayertreeCtrl.toggleActive(layertreeCtrl)"
     ng-if="layertreeCtrl.node.children && !layertreeCtrl.layer.loading"
     class="gmf-layertree-state gmf-not-intermediate"
-  ><%=require('gmf/icons/layers.svg')%></a>
+  ><%=require('gmf/icons/layers.svg?viewbox&height=1em')%></a>
   <a
     href
     ng-click="::gmfLayertreeCtrl.toggleActive(layertreeCtrl)"
     ng-if="layertreeCtrl.node.children && !layertreeCtrl.layer.loading"
     class="gmf-layertree-state gmf-intermediate"
-  ><%=require('gmf/icons/stack-indeterminate.svg')%></a>
+  ><%=require('gmf/icons/stack-indeterminate.svg?viewbox&height=1em')%></a>
 
   <a
     href
@@ -83,7 +83,7 @@
       data-title="{{'Not visible at current scale. Click to zoom.'|translate}}"
       ng-click="::gmfLayertreeCtrl.zoomToResolution(layertreeCtrl); $event.preventDefault(); $event.stopPropagation();"
       ng-if="gmfLayertreeCtrl.getNodeState(layertreeCtrl) == 'on'"
-    ><%=require('gmf/icons/search-go.svg')%></i>
+    ><%=require('gmf/icons/search-go.svg?viewbox&height=1em')%></i>
 
     <span
       ngeo-popover

diff --git a/contribs/gmf/src/layertree/datasourceGroupTreeComponent.html b/contribs/gmf/src/layertree/datasourceGroupTreeComponent.html
@@ -12,7 +12,7 @@
     class="fa fa-fw gmf-layertree-state"
     href
     ng-click="$ctrl.toggle()"
-  ><%=require('gmf/icons/layers.svg')%></a>
+  ><%=require('gmf/icons/layers.svg?viewbox&height=1em')%></a>
 
   <a
     class="gmf-layertree-name"

diff --git a/contribs/gmf/src/permalink/Permalink.js b/contribs/gmf/src/permalink/Permalink.js
@@ -480,7 +480,7 @@ export function PermalinkService(
     this.crosshairStyle_ = [new olStyleStyle({
       image: new olStyleIcon({
         // @ts-ignore: webpack
-        src: require('!!file-loader!gmf/permalink/crosshair.svg')
+        src: 'data:image/svg+xml;base64,' + btoa(require('gmf/permalink/crosshair.svg'))
       })
     })];
   }