Merge pull request #5001 from camptocamp/merge24

Merge remote-tracking branch 'origin/2.4'

.gitignore

@@ -4,6 +4,7 @@
 /api/dist/api.*
 /.transifexrc
 /package-lock.json
+/npm-debug.log
 /.build/
 /node_modules/
 /.tx/config

buildtools/generate-xml-from-tokens.js

@@ -0,0 +1,98 @@
+// Initially get from https://github.com/tildeio/simple-html-tokenizer/blob/v0.1.1/lib/simple-html-tokenizer/generator.js
+
+const escape = (function() {
+  const test = /[&<>"'`]/;
+  const replace = /[&<>"'`]/g;
+  const map = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    '\'': '&#x27;',
+    '`': '&#x60;'
+  };
+  function escapeChar(char) {
+    return map[char];
+  }
+  return function escape(string) {
+    if (!test.test(string)) {
+      return string;
+    }
+    return string.replace(replace, escapeChar);
+  };
+}());
+
+function Generator() {
+  this.escape = escape;
+}
+
+Generator.prototype = {
+  generate: function(tokens) {
+    let buffer = '';
+    for (let i = 0; i < tokens.length; i++) {
+      const token = tokens[i];
+      buffer += this[token.type](token);
+    }
+    return buffer;
+  },
+
+  escape: function(text) {
+    const unsafeCharsMap = this.unsafeCharsMap;
+    return text.replace(this.unsafeChars, function(char) {
+      return unsafeCharsMap[char] || char;
+    });
+  },
+
+  StartTag: function(token) {
+    let out = '<';
+    out += token.tagName;
+
+    if (token.attributes.length) {
+      out += ' ' + this.Attributes(token.attributes);
+    }
+
+    out += token.selfClosing ? '/>' : '>';
+
+    return out;
+  },
+
+  EndTag: function(token) {
+    return '</' + token.tagName + '>';
+  },
+
+  Chars: function(token) {
+    return this.escape(token.chars);
+  },
+
+  Comment: function(token) {
+    return '<!--' + token.chars + '-->';
+  },
+
+  Attributes: function(attributes) {
+    const out = [];
+
+    for (let i = 0, l = attributes.length; i < l; i++) {
+      const attribute = attributes[i];
+
+      out.push(this.Attribute(attribute[0], attribute[1]));
+    }
+
+    return out.join(' ');
+  },
+
+  Attribute: function(name, value) {
+    let attrString = name;
+
+    if (value) {
+      value = this.escape(value);
+      attrString += '="' + value + '"';
+    }
+
+    return attrString;
+  }
+};
+
+module.exports = function(tokens) {
+  const generator = new Generator();
+  return generator.generate(tokens);
+};

buildtools/svg-viewbox-loader.js

@@ -1,32 +1,79 @@
 const simpleHTMLTokenizer = require('simple-html-tokenizer');
+const generate = require('./generate-xml-from-tokens.js');
 
 module.exports = function(source) {
   this.cacheable(true);
   let tokens = simpleHTMLTokenizer.tokenize(source);
 
   tokens = tokens.map((tag) => {
-    let width = undefined;
-    let height = undefined;
     if (tag.type === 'StartTag' && tag.tagName === 'svg') {
+      let width = undefined;
+      let height = undefined;
+      let x = 0;
+      let y = 0;
       for (const attribute of tag.attributes) {
         if (attribute[0] === 'width') {
-          width = parseFloat(attribute[1]);
+          try {
+            width = parseFloat(attribute[1]);
+          } catch (e) {
+            console.warn('Unable to read width: ' + attribute[1]);
+          }
         }
         if (attribute[0] === 'height') {
-          height = parseFloat(attribute[1]);
+          try {
+            height = parseFloat(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]);
+          }
         }
       }
       if (width !== undefined && height != undefined) {
         tag.attributes = tag.attributes.filter((attribute) => {
-          return attribute[0] !== 'width' && attribute[0] != 'height'
-        })
-        tag.attributes.push(['viewBox', `0 0 ${width} ${height}`, true]);
-        tag.attributes.push(['height', '1em', true]);
-        tag.attributes.push(['width', `${width / height}em`, true]);
+          return attribute[0] !== 'width' && attribute[0] != 'height' && attribute[0] != 'viewBox';
+        });
+        if (x) {
+          tag.attributes.push(['x', x, true]);
+        }
+        if (y) {
+          tag.attributes.push(['y', y, true]);
+        }
+        if (this.resourceQuery.search(/inline/) >= 0) {
+          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]);
+        }
       }
     }
     return tag;
-  })
+  });
 
-  return simpleHTMLTokenizer.generate(tokens)
+  return generate(tokens);
 };

buildtools/webpack.commons.js

@@ -146,7 +146,6 @@ module.exports = function(config) {
         cssRule,
         sassRule,
         htmlRule,
-        svgRule,
         ngeoRule,
         otherRule,
       ]

buildtools/webpack.dev.js

@@ -12,6 +12,33 @@ const resourcesRule = {
   }
 };
 
+const svgRule = {
+  test: /\.svg$/,
+  oneOf: [{
+    resourceQuery: /url/,
+    use: [
+      {
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]'
+        },
+      },
+      'svgo-loader',
+    ]
+  }, {
+    use: [
+      {
+        loader: 'svg-inline-loader',
+        options: {
+          removeSVGTagAttrs: false,
+        },
+      },
+      './buildtools/svg-viewbox-loader',
+      'svgo-loader',
+    ]
+  }]
+};
+
 new webpack.LoaderOptionsPlugin({
   debug: false
 });
@@ -20,12 +47,14 @@ new webpack.LoaderOptionsPlugin({
 module.exports = function() {
   return {
     mode: 'development',
+    // devtool: 'eval',
     output: {
       filename: '[name].js'
     },
     module: {
       rules: [
         resourcesRule,
+        svgRule,
       ]
     },
   };

buildtools/webpack.prod.js

@@ -12,6 +12,44 @@ const resourcesRule = {
   }
 };
 
+const svgRule = {
+  test: /\.svg$/,
+  oneOf: [{
+    resourceQuery: /url/,
+    use: [
+      {
+        loader: 'file-loader',
+        options: {
+          name: '[name].[hash:6].[ext]'
+        },
+      },
+      'svgo-loader',
+    ]
+  }, {
+    resourceQuery: /inline/,
+    use: [
+      {
+        loader: 'svg-inline-loader',
+        options: {
+          removeSVGTagAttrs: false,
+        },
+      },
+      'svgo-loader',
+    ]
+  }, {
+    use: [
+      {
+        loader: 'svg-inline-loader',
+        options: {
+          removeSVGTagAttrs: false,
+        },
+      },
+      './buildtools/svg-viewbox-loader',
+      'svgo-loader',
+    ]
+  }]
+};
+
 module.exports = function() {
   return {
     mode: 'production',
@@ -25,6 +63,7 @@ module.exports = function() {
     module: {
       rules: [
         resourcesRule,
+        svgRule,
       ]
     },
     optimization: {

contribs/gmf/apps/desktop_alt/Controller.js

@@ -20,7 +20,11 @@ import ngeoRoutingModule from 'ngeo/routing/module.js';
 import EPSG2056 from '@geoblocks/proj/src/EPSG_2056.js';
 import EPSG21781 from '@geoblocks/proj/src/EPSG_21781.js';
 import ngeoStatemanagerWfsPermalink from 'ngeo/statemanager/WfsPermalink.js';
-import {Circle, Fill, Stroke, Style} from 'ol/style.js';
+import Style from 'ol/style/Style.js';
+import Circle from 'ol/style/Circle.js';
+import Fill from 'ol/style/Fill.js';
+import Stroke from 'ol/style/Stroke.js';
+import Icon from 'ol/style/Icon.js';
 
 if (!window.requestAnimationFrame) {
   alert('Your browser is not supported, please update it or use another one. You will be redirected.\n\n'
@@ -189,4 +193,18 @@ const module = angular.module('Appdesktop_alt', [
 
 module.controller('AlternativeDesktopController', Controller);
 
+
+module.value('gmfPermalinkOptions', /** @type {import('gmf/permalink/Permalink.js').PermalinkOptions} */ ({
+  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'),
+        imgSize: [22, 22],
+      })
+    })
+  ]
+}));
+
 export default module;