' + _tr('app_page.common.details') + ': ' + msg : '';\n swal({\n title: _tr('app_page.common.error') + '!',\n text: '' + _tr('app_page.common.error_message') + msg,\n customClass: 'swal2_custom',\n type: 'error',\n allowOutsideClick: false\n });\n}\n\n/**\n* Perform an asynchronous request\n*\n* @param {String} method - the method like \"GET\" or \"POST\"\n* @param {String} url - the targeted url\n* @param {FormData} data - Optionnal, the data to be send\n* @return {Promise} response\n*/\nfunction request_data(method, url, data) {\n return new Promise(function (resolve, reject) {\n var request = new XMLHttpRequest();\n request.open(method, url, true);\n request.onload = resolve;\n request.onerror = reject;\n request.send(data);\n });\n}\n\n/**\n* Perform an asynchronous request\n*\n* @param {String} method - the method like \"GET\" or \"POST\"\n* @param {String} url - the targeted url\n* @param {FormData} data - Optionnal, the data to be send\n* @param {Boolean} waitingMessage - Optionnal, whether to display or not\n* a waiting message while the request is proceeded\n* @return {Promise} response\n*/\nfunction xhrequest(method, url, data, waitingMessage) {\n if (waitingMessage) {\n global._app.waitingOverlay.display();\n }\n return new Promise(function (resolve, reject) {\n var request = new XMLHttpRequest();\n global._app.xhr_to_cancel = request;\n request.open(method, url, true);\n request.onload = function (resp) {\n resolve(resp.target.responseText);\n global._app.xhr_to_cancel = undefined;\n if (waitingMessage) {\n global._app.waitingOverlay.hide();\n }\n };\n request.onerror = function (err) {\n reject(err);\n global._app.xhr_to_cancel = undefined;\n if (waitingMessage) {\n global._app.waitingOverlay.hide();\n }\n };\n request.send(data);\n });\n}\n\nfunction getImgDataUrl(url) {\n return new Promise(function (resolve, reject) {\n var request = new XMLHttpRequest();\n request.onload = function () {\n var reader = new FileReader();\n reader.onloadend = function () {\n resolve(reader.result);\n };\n reader.readAsDataURL(request.response);\n };\n request.onerror = function (err) {\n reject(err);\n };\n request.open('GET', url, true);\n request.responseType = 'blob';\n request.send();\n });\n}\n\nfunction make_content_summary(serie) {\n var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 6;\n\n return [_tr('app_page.stat_summary.population'), ' : ', (0, _helpers_calc.round_value)(serie.pop(), precision), '
', _tr('app_page.stat_summary.min'), ' : ', (0, _helpers_calc.round_value)(serie.min(), precision), ' | ', _tr('app_page.stat_summary.max'), ' : ', (0, _helpers_calc.round_value)(serie.max(), precision), '
', _tr('app_page.stat_summary.mean'), ' : ', (0, _helpers_calc.round_value)(serie.mean(), precision), '
', _tr('app_page.stat_summary.median'), ' : ', (0, _helpers_calc.round_value)(serie.median(), precision), '
', _tr('app_page.stat_summary.variance'), ' : ', (0, _helpers_calc.round_value)(serie.variance(), precision), '
', _tr('app_page.stat_summary.stddev'), ' : ', (0, _helpers_calc.round_value)(serie.stddev(), precision), '
', _tr('app_page.stat_summary.cov'), ' : ', (0, _helpers_calc.round_value)(serie.cov(), precision)].join('');\n}\n\nfunction copy_layer(ref_layer, new_name, type_result, fields_to_copy) {\n var id_new_layer = encodeId(new_name);\n var id_ref_layer = global._app.layer_to_id.get(ref_layer);\n var node_ref_layer = svg_map.querySelector('#' + id_ref_layer);\n global._app.layer_to_id.set(new_name, id_new_layer);\n global._app.id_to_layer.set(id_new_layer, new_name);\n svg_map.appendChild(node_ref_layer.cloneNode(true));\n svg_map.lastChild.setAttribute('id', id_new_layer);\n var node_new_layer = document.getElementById(id_new_layer);\n svg_map.insertBefore(node_new_layer, svg_map.querySelector('.legend'));\n data_manager.result_data[new_name] = [];\n data_manager.current_layers[new_name] = {\n n_features: data_manager.current_layers[ref_layer].n_features,\n type: data_manager.current_layers[ref_layer].type,\n ref_layer_name: ref_layer\n };\n if (data_manager.current_layers[ref_layer].pointRadius) {\n data_manager.current_layers[new_name].pointRadius = data_manager.current_layers[ref_layer].pointRadius;\n }\n var selec_src = node_ref_layer.getElementsByTagName('path'),\n selec_dest = node_new_layer.getElementsByTagName('path');\n if (!fields_to_copy) {\n for (var i = 0; i < selec_src.length; i++) {\n selec_dest[i].__data__ = selec_src[i].__data__;\n data_manager.result_data[new_name].push(selec_dest[i].__data__.properties);\n }\n } else {\n for (var _i = 0; _i < selec_src.length; _i++) {\n selec_dest[_i].__data__ = { type: 'Feature', properties: {}, geometry: cloneObj(selec_src[_i].__data__.geometry) };\n var nb_field_to_copy = fields_to_copy.length;\n for (var j = 0; j < nb_field_to_copy; j++) {\n var f = fields_to_copy[j];\n selec_dest[_i].__data__.properties[f] = selec_src[_i].__data__.properties[f];\n }\n data_manager.result_data[new_name].push(selec_dest[_i].__data__.properties);\n }\n }\n // Set the desired class name :\n node_new_layer.className.baseVal = 'layer';\n // Reset visibility and filter attributes to default values:\n node_new_layer.style.visibility = '';\n node_new_layer.removeAttribute('filter');\n // Create an entry in the layer manager:\n create_li_layer_elem(new_name, data_manager.current_layers[new_name].n_features, [data_manager.current_layers[new_name].type, type_result], 'result');\n}\n\n/**\n* Send a geo result layer computed client-side (currently only discontinuities)\n* to the server in order to use it as other result layers computed server side\n* @param {string} layerName - The name of the layer to send\n* @param {string} url - The url to use\n* @return {undefined}\n*/\nfunction send_layer_server(layerName, url) {\n var JSON_layer = path_to_geojson(layerName);\n var formToSend = new FormData();\n formToSend.append('geojson', JSON_layer);\n formToSend.append('layer_name', layerName);\n xhrequest('POST', url, formToSend, false).then(function (e) {\n data_manager.current_layers[layerName].key_name = JSON.parse(e).key;\n }).catch(function (err) {\n display_error_during_computation();\n console.log(err);\n });\n}\n\n/**\n* Function returning the name of all current layers (excepted the sample layers used as layout)\n*\n* @return {Array} - The name of the other layers in an Array\n*/\nfunction get_other_layer_names() {\n var otherLayers = Object.getOwnPropertyNames(data_manager.current_layers);\n var tmpIdx = null;\n\n tmpIdx = otherLayers.indexOf('Graticule');\n if (tmpIdx > -1) otherLayers.splice(tmpIdx, 1);\n\n tmpIdx = otherLayers.indexOf('World');\n if (tmpIdx > -1) otherLayers.splice(tmpIdx, 1);\n\n tmpIdx = otherLayers.indexOf('Sphere');\n if (tmpIdx > -1) otherLayers.splice(tmpIdx, 1);\n\n return otherLayers;\n}\n\nfunction get_display_name_on_layer_list(layer_name_to_add) {\n return +layer_name_to_add.length > 40 ? [layer_name_to_add.substring(0, 37), '(...)'].join('') : layer_name_to_add;\n}\n\n/**\n* Function triggered in order to add a new layer\n* in the \"layer manager\" (with appropriates icons regarding to its type, etc.)\n* @param {string} layerName - The name of the new layer\n* @param {integer} nbFt - The number of feature in this layer\n* @param {string} typeGeom - The geometry type\n* @param {string} typeLayer - Whether it is a result layer or not\n* @return {undefined}\n*/\nfunction create_li_layer_elem(layerName, nbFt, typeGeom, typeLayer) {\n var listDisplayName = get_display_name_on_layer_list(layerName);\n var layerId = encodeId(layerName);\n var layersListed = document.querySelector('#sortable.layer_list');\n var li = document.createElement('li');\n li.setAttribute('layer_name', layerName);\n if (typeLayer === 'result') {\n li.setAttribute('class', ['sortable_result ', layerId].join(''));\n var promotable = ['flow', 'grid', 'discont', 'cartogram', 'smooth'];\n var replace_but = promotable.indexOf(typeGeom[1]) > -1 ? _buttons.button_replace : undefined;\n li.innerHTML = [listDisplayName, ' '].join('');\n } else if (typeLayer === 'target') {\n li.setAttribute('class', ['sortable_target ', layerId].join(''));\n li.innerHTML = [listDisplayName, ''].join('');\n } else {\n var _replace_but = !data_manager.current_layers[layerName].graticule && !data_manager.current_layers[layerName].sphere ? _buttons.button_replace : undefined;\n li.setAttribute('class', ['sortable ', layerId].join(''));\n li.innerHTML = [listDisplayName, ' '].join('');\n }\n layersListed.insertBefore(li, layersListed.childNodes[0]);\n (0, _interface.binds_layers_buttons)(layerName);\n}\n\n/**\n* Function returning an object describing the type of field\n* @param {string} layerName - The name of the new layer\n* @param {string} target - The geometry type\n* @return {object|array} - An object containing the type of each field if\n* target was nos specified, otherwise an array of field name corresponding\n* to the type defined in 'target'.\n*/\nvar type_col = exports.type_col = function type_col(layerName, target) {\n // Function returning an object like {\"field1\": \"field_type\", \"field2\": \"field_type\"},\n // for the fields of the selected layer.\n // If target is set to \"number\" it should return an array containing only the name of the numerical fields\n // ------------------- \"string\" ---------------------------------------------------------non-numerial ----\n var table = data_manager.user_data.hasOwnProperty(layerName) ? data_manager.user_data[layerName] : data_manager.result_data.hasOwnProperty(layerName) ? data_manager.result_data[layerName] : data_manager.joined_dataset[0];\n var fields = Object.getOwnPropertyNames(table[0]);\n var nbFeatures = table.length;\n var deepthTest = nbFeatures > 100 ? 100 : nbFeatures - 1;\n var result = {};\n var field = void 0;\n var tmpType = void 0;\n\n for (var j = 0, len = fields.length; j < len; ++j) {\n field = fields[j];\n result[field] = [];\n for (var i = 0; i < deepthTest; ++i) {\n tmpType = _typeof(table[i][field]);\n if (tmpType === 'string' && table[i][field].length === 0) {\n tmpType = 'empty';\n } else if (tmpType === 'string' && !isNaN(Number(table[i][field])) || tmpType === 'number') {\n tmpType = 'number';\n } else if (tmpType === 'object' && isFinite(table[i][field])) {\n tmpType = 'empty';\n }\n result[fields[j]].push(tmpType);\n }\n }\n\n for (var _j = 0, _len = fields.length; _j < _len; ++_j) {\n field = fields[_j];\n if (result[field].every(function (ft) {\n return ft === 'number' || ft === 'empty';\n }) && result[field].indexOf('number') > -1) {\n result[field] = 'number';\n } else {\n result[field] = 'string';\n }\n }\n if (target) {\n var res = [];\n Object.keys(result).forEach(function (k) {\n if (result[k] === target && k !== '_uid') {\n res.push(k);\n }\n });\n return res;\n }\n return result;\n};\n\nvar type_col2 = exports.type_col2 = function type_col2(table, _field) {\n var skip_if_empty_values = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;\n\n // Function returning an array of objects like\n // {name: \"field1\", type: \"field_type\"}, {name: \"field2\", type: \"field_type\"}, (...)]\n // for the fields of the selected layer.\n var result = [];\n var nbFeatures = table.length;\n var tmp = {};\n var dups = {};\n var field = _field;\n var tmpType = void 0;\n var fields = void 0;\n\n if (!field) {\n fields = Object.getOwnPropertyNames(table[0]).filter(function (v) {\n return v !== '_uid';\n });\n field = undefined;\n } else {\n fields = [field];\n field = undefined;\n }\n\n for (var j = 0, len = fields.length; j < len; ++j) {\n field = fields[j];\n tmp[field] = [];\n dups[field] = false;\n var h = {};\n for (var i = 0; i < nbFeatures; ++i) {\n var val = table[i][field];\n if (h[val]) dups[field] = true;else h[val] = true;\n tmpType = typeof val === 'undefined' ? 'undefined' : _typeof(val);\n if (tmpType === 'object' && isFinite(val)) {\n tmpType = 'empty';\n } else if (tmpType === 'string' && val.length === 0) {\n tmpType = 'empty';\n } else if (tmpType === 'string' && !isNaN(Number(val)) || tmpType === 'number') {\n var _val = Number(val);\n tmpType = (_val | 0) === val ? 'stock' : (_val | 0) === +val ? 'stock' : 'ratio';\n }\n tmp[fields[j]].push(tmpType);\n }\n }\n var nb_id_field = 0;\n for (var _j2 = 0, _len2 = fields.length; _j2 < _len2; ++_j2) {\n field = fields[_j2];\n var hasDup = dups[field];\n if ((field.toLowerCase() === 'id' || field.toLowerCase().indexOf('name') > -1 || field.toLowerCase().indexOf('nom') > -1) && !hasDup) {\n result.push({ name: field, type: 'id', has_duplicate: hasDup });\n nb_id_field += 1;\n } else if (field.toLowerCase().indexOf('id') > -1 && nb_id_field < 1 && !hasDup) {\n result.push({ name: field, type: 'id', has_duplicate: hasDup });\n nb_id_field += 1;\n } else if (!hasDup && nb_id_field < 1 && tmp[field].every(function (ft) {\n return ft === 'string' || ft === 'stock';\n })) {\n result.push({ name: field, type: 'id', has_duplicate: hasDup });\n nb_id_field += 1;\n } else if (tmp[field].every(function (ft) {\n return ft === 'string';\n }) && !hasDup) {\n result.push({ name: field, type: 'id', has_duplicate: hasDup });\n nb_id_field += 1;\n } else if (tmp[field].every(function (ft) {\n return ft === 'stock' || ft === 'empty';\n }) && tmp[field].indexOf('stock') > -1) {\n result.push({ name: field, type: 'stock', has_duplicate: hasDup });\n } else if (tmp[field].every(function (ft) {\n return ft === 'string' || ft === 'empty';\n }) && tmp[field].indexOf('string') > -1) {\n result.push({ name: field, type: 'category', has_duplicate: hasDup });\n } else if (tmp[field].every(function (ft) {\n return ft === 'ratio' || ft === 'stock' || ft === 'empty';\n }) && tmp[field].indexOf('ratio') > -1) {\n result.push({ name: field, type: 'ratio' });\n } else {\n result.push({ name: field, type: 'unknown', has_duplicate: hasDup });\n }\n }\n return result;\n};\n\nvar getFieldsType = exports.getFieldsType = function getFieldsType(type, layerName, ref) {\n if (!layerName && !ref) return null;\n var refField = ref || data_manager.current_layers[layerName].fields_type;\n if (!refField) return [];\n return refField.filter(function (d) {\n return d.type === type;\n }).map(function (d) {\n return d.name;\n });\n};\n\nfunction make_box_type_fields(layerName) {\n (0, _dialogs.make_dialog_container)('box_type_fields', _tr('app_page.box_type_fields.title'), 'dialog');\n d3.select('#box_type_fields').select('.modal-dialog').style('width', '500px');\n var newbox = d3.select('#box_type_fields').select('.modal-body');\n var tmp = type_col2(data_manager.user_data[layerName]);\n var fields_type = data_manager.current_layers[layerName].fields_type;\n var f = fields_type.map(function (v) {\n return v.name;\n });\n var refType = ['id', 'stock', 'ratio', 'category', 'unknown'];\n\n // const deferred = Promise.pending();\n var container = document.getElementById('box_type_fields');\n return new Promise(function (resolve, reject) {\n var clean_up_box = function clean_up_box() {\n container.remove();\n _dialogs.overlay_under_modal.hide();\n document.removeEventListener('keydown', helper_esc_key_twbs);\n if (window.fields_handler) {\n fields_handler.unfill();\n fields_handler.fill(layerName);\n }\n };\n\n if (f.length === 0) {\n // If the user dont have already selected the type :\n fields_type = tmp.slice();\n container.querySelector('.btn_cancel').remove(); // Disabled cancel button to force the user to choose\n var _onclose = function _onclose() {\n // Or use the default values if he use the X close button\n data_manager.current_layers[layerName].fields_type = tmp.slice();\n getAvailablesFunctionnalities(layerName);\n resolve(false);\n clean_up_box();\n };\n container.querySelector('#xclose').onclick = _onclose;\n } else if (tmp.length > fields_type.length) {\n // There is already types selected but new fields where added\n tmp.forEach(function (d) {\n if (f.indexOf(d.name) === -1) {\n fields_type.push(d);\n }\n });\n container.querySelector('.btn_cancel').remove(); // Disabled cancel button to force the user to choose\n var _onclose2 = function _onclose2() {\n // Or use the default values if he use the X close button\n data_manager.current_layers[layerName].fields_type = tmp.slice();\n getAvailablesFunctionnalities(layerName);\n resolve(false);\n clean_up_box();\n };\n container.querySelector('#xclose').onclick = _onclose2;\n } else {\n // There is already types selected and no new fields (so this is a modification) :\n // Use the previous values if the user close\n // the window without confirmation (cancel or X button)\n var _onclose3 = function _onclose3() {\n data_manager.current_layers[layerName].fields_type = fields_type;\n resolve(false);\n clean_up_box();\n };\n container.querySelector('.btn_cancel').onclick = _onclose3;\n container.querySelector('#xclose').onclick = _onclose3;\n }\n\n // Fetch and store the selected values when 'Ok' button is clicked :\n container.querySelector('.btn_ok').onclick = function () {\n var r = [];\n Array.prototype.forEach.call(document.querySelectorAll('#fields_select > li'), function (elem) {\n r.push({ name: elem.childNodes[0].innerHTML.trim(), type: elem.childNodes[1].value });\n });\n resolve(true);\n data_manager.current_layers[layerName].fields_type = r.slice();\n getAvailablesFunctionnalities(layerName);\n clean_up_box();\n };\n function helper_esc_key_twbs(_evt) {\n var evt = _evt || window.event;\n var isEscape = 'key' in evt ? evt.key === 'Escape' || evt.key === 'Esc' : evt.keyCode === 27;\n if (isEscape) {\n evt.stopPropagation();\n data_manager.current_layers[layerName].fields_type = tmp.slice();\n getAvailablesFunctionnalities(layerName);\n resolve(false);\n clean_up_box();\n }\n }\n document.addEventListener('keydown', helper_esc_key_twbs);\n document.getElementById('btn_type_fields').removeAttribute('disabled');\n\n newbox.append('h3').html(_tr('app_page.box_type_fields.message_invite'));\n\n var box_select = newbox.append('ul').attr('id', 'fields_select').styles({\n padding: '0',\n 'list-style': 'none'\n });\n\n box_select.selectAll('li').data(fields_type).enter().append('li');\n\n box_select.selectAll('li').insert('span').html(function (d) {\n return d.name;\n });\n\n box_select.selectAll('li').insert('select').style('float', 'right').selectAll('option').data(refType).enter().insert('option').attr('value', function (d) {\n return d;\n }).text(function (d) {\n return _tr('app_page.box_type_fields.' + d);\n }).exit();\n\n box_select.selectAll('select').each(function (d) {\n this.value = d.type;\n });\n\n for (var i = 0; i < fields_type.length; i++) {\n if (fields_type[i].type === 'category' || fields_type[i].not_number) {\n box_select.node().childNodes[i].childNodes[1].options.remove(2);\n box_select.node().childNodes[i].childNodes[1].options.remove(1);\n }\n if (fields_type[i].has_duplicate) {\n box_select.node().childNodes[i].childNodes[1].options.remove(0);\n }\n }\n _dialogs.overlay_under_modal.display();\n setTimeout(function () {\n container.querySelector('button.btn_ok').focus();\n }, 400);\n });\n}\n\nfunction getAvailablesFunctionnalities(layerName) {\n var section = document.getElementById('section2_pre');\n if (!layerName) {\n var elems = section.querySelectorAll('#button_grid, #button_discont, #button_smooth, #button_cartogram, #button_typosymbol, #button_flow, #button_prop, #button_choro, #button_choroprop, #button_typo, #button_proptypo, #button_two_stocks');\n for (var i = 0, len_i = elems.length; i < len_i; i++) {\n elems[i].style.filter = 'grayscale(100%)';\n }\n return;\n }\n\n var fields_stock = getFieldsType('stock', layerName),\n fields_ratio = getFieldsType('ratio', layerName),\n fields_categ = getFieldsType('category', layerName),\n fields_id = getFieldsType('id', layerName);\n var func_stock = void 0,\n func_ratio = void 0,\n func_categ = void 0,\n func_id = void 0;\n if (data_manager.current_layers[layerName].type === 'Line') {\n // Layer type is Line\n var _elems = section.querySelectorAll('#button_grid, #button_discont, #button_smooth, #button_cartogram, #button_typosymbol, #button_flow');\n for (var _i2 = 0, _len_i = _elems.length; _i2 < _len_i; _i2++) {\n _elems[_i2].style.filter = 'grayscale(100%)';\n }\n func_id = [];\n func_stock = section.querySelectorAll('#button_prop');\n func_ratio = section.querySelectorAll('#button_choro, #button_choroprop');\n func_categ = section.querySelectorAll('#button_typo, #button_proptypo');\n } else if (data_manager.current_layers[layerName].type === 'Point') {\n // layer type is Point\n var _elems2 = section.querySelectorAll('#button_discont, #button_cartogram');\n for (var _i3 = 0, _len_i2 = _elems2.length; _i3 < _len_i2; _i3++) {\n _elems2[_i3].style.filter = 'grayscale(100%)';\n }\n func_id = section.querySelectorAll('#button_flow');\n func_stock = section.querySelectorAll('#button_smooth, #button_prop, #button_grid');\n func_ratio = section.querySelectorAll('#button_choro, #button_choroprop');\n func_categ = section.querySelectorAll('#button_typo, #button_proptypo, #button_typosymbol');\n } else {\n // Layer type is Polygon\n func_id = section.querySelectorAll('#button_flow');\n func_stock = section.querySelectorAll('#button_smooth, #button_prop, #button_grid, #button_cartogram, #button_discont');\n func_ratio = section.querySelectorAll('#button_choro, #button_choroprop, #button_discont');\n func_categ = section.querySelectorAll('#button_typo, #button_proptypo, #button_typosymbol');\n }\n if (fields_stock.length === 0) {\n Array.prototype.forEach.call(func_stock, function (d) {\n return d.style.filter = 'grayscale(100%)';\n });\n } else {\n Array.prototype.forEach.call(func_stock, function (d) {\n return d.style.filter = 'invert(0%) saturate(100%)';\n });\n }\n if (fields_ratio.length === 0) {\n Array.prototype.forEach.call(func_ratio, function (d) {\n return d.style.filter = 'grayscale(100%)';\n });\n } else {\n Array.prototype.forEach.call(func_ratio, function (d) {\n return d.style.filter = 'invert(0%) saturate(100%)';\n });\n }\n if (fields_categ.length === 0) {\n Array.prototype.forEach.call(func_categ, function (d) {\n return d.style.filter = 'grayscale(100%)';\n });\n } else {\n Array.prototype.forEach.call(func_categ, function (d) {\n return d.style.filter = 'invert(0%) saturate(100%)';\n });\n }\n if (fields_id.length === 0) {\n Array.prototype.forEach.call(func_id, function (d) {\n return d.style.filter = 'grayscale(100%)';\n });\n } else {\n Array.prototype.forEach.call(func_id, function (d) {\n return d.style.filter = 'invert(0%) saturate(100%)';\n });\n }\n\n // That representation needs both Stock and Ratio variables:\n if (fields_stock.length === 0 || fields_ratio.length === 0) {\n document.getElementById('button_choroprop').style.filter = 'grayscale(100%)';\n } else {\n document.getElementById('button_choroprop').style.filter = 'invert(0%) saturate(100%)';\n }\n // That representation needs both Stock and Categorical variables:\n if (fields_stock.length === 0 || fields_categ.length === 0) {\n document.getElementById('button_proptypo').style.filter = 'grayscale(100%)';\n } else {\n document.getElementById('button_proptypo').style.filter = 'invert(0%) saturate(100%)';\n }\n // That representation needs either a Stock or a Ratio variable:\n if (data_manager.current_layers[layerName].type === 'Polygon' && (fields_stock.length > 0 || fields_ratio.length > 0)) {\n document.getElementById('button_discont').style.filter = 'invert(0%) saturate(100%)';\n } else {\n document.getElementById('button_discont').style.filter = 'grayscale(100%)';\n }\n // Special case for the \"waffle\" kind of map as it needs 2 or more stock variables:\n if (fields_stock.length < 2) {\n document.getElementById('button_two_stocks').style.filter = 'grayscale(100%)';\n } else {\n document.getElementById('button_two_stocks').style.filter = 'invert(0%) saturate(100%)';\n }\n}\n\nvar clickLinkFromDataUrl = exports.clickLinkFromDataUrl = function clickLinkFromDataUrl(url, filename) {\n return fetch(url).then(function (res) {\n return res.blob();\n }).then(function (blob) {\n var blobUrl = URL.createObjectURL(blob);\n var dlAnchorElem = document.createElement('a');\n dlAnchorElem.setAttribute('href', blobUrl);\n dlAnchorElem.setAttribute('download', filename);\n // if (window.isIE || window.isOldMS_Firefox) {\n if (window.isIE) {\n swal({\n title: '',\n html: '
' + _tr('app_page.common.download_link') + '
![\"Magrit\"](\"static/img/logo_magrit.png\"){kind=logo}
\\n\\n...\\n
\\n \\n \\n \\n \\n \\n
\\n\\n
' + _tr('app_page.common.details') + ': ' + msg : '';\n swal({\n title: _tr('app_page.common.error') + '!',\n text: '' + _tr('app_page.common.error_message') + msg,\n customClass: 'swal2_custom',\n type: 'error',\n allowOutsideClick: false\n });\n}\n\n/**\n* Perform an asynchronous request\n*\n* @param {String} method - the method like \"GET\" or \"POST\"\n* @param {String} url - the targeted url\n* @param {FormData} data - Optionnal, the data to be send\n* @return {Promise} response\n*/\nfunction request_data(method, url, data) {\n return new Promise(function (resolve, reject) {\n var request = new XMLHttpRequest();\n request.open(method, url, true);\n request.onload = resolve;\n request.onerror = reject;\n request.send(data);\n });\n}\n\n/**\n* Perform an asynchronous request\n*\n* @param {String} method - the method like \"GET\" or \"POST\"\n* @param {String} url - the targeted url\n* @param {FormData} data - Optionnal, the data to be send\n* @param {Boolean} waitingMessage - Optionnal, whether to display or not\n* a waiting message while the request is proceeded\n* @return {Promise} response\n*/\nfunction xhrequest(method, url, data, waitingMessage) {\n if (waitingMessage) {\n global._app.waitingOverlay.display();\n }\n return new Promise(function (resolve, reject) {\n var request = new XMLHttpRequest();\n global._app.xhr_to_cancel = request;\n request.open(method, url, true);\n request.onload = function (resp) {\n resolve(resp.target.responseText);\n global._app.xhr_to_cancel = undefined;\n if (waitingMessage) {\n global._app.waitingOverlay.hide();\n }\n };\n request.onerror = function (err) {\n reject(err);\n global._app.xhr_to_cancel = undefined;\n if (waitingMessage) {\n global._app.waitingOverlay.hide();\n }\n };\n request.send(data);\n });\n}\n\nfunction getImgDataUrl(url) {\n return new Promise(function (resolve, reject) {\n var request = new XMLHttpRequest();\n request.onload = function () {\n var reader = new FileReader();\n reader.onloadend = function () {\n resolve(reader.result);\n };\n reader.readAsDataURL(request.response);\n };\n request.onerror = function (err) {\n reject(err);\n };\n request.open('GET', url, true);\n request.responseType = 'blob';\n request.send();\n });\n}\n\nfunction make_content_summary(serie) {\n var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 6;\n\n return [_tr('app_page.stat_summary.population'), ' : ', (0, _helpers_calc.round_value)(serie.pop(), precision), '
', _tr('app_page.stat_summary.min'), ' : ', (0, _helpers_calc.round_value)(serie.min(), precision), ' | ', _tr('app_page.stat_summary.max'), ' : ', (0, _helpers_calc.round_value)(serie.max(), precision), '
', _tr('app_page.stat_summary.mean'), ' : ', (0, _helpers_calc.round_value)(serie.mean(), precision), '
', _tr('app_page.stat_summary.median'), ' : ', (0, _helpers_calc.round_value)(serie.median(), precision), '
', _tr('app_page.stat_summary.variance'), ' : ', (0, _helpers_calc.round_value)(serie.variance(), precision), '
', _tr('app_page.stat_summary.stddev'), ' : ', (0, _helpers_calc.round_value)(serie.stddev(), precision), '
', _tr('app_page.stat_summary.cov'), ' : ', (0, _helpers_calc.round_value)(serie.cov(), precision)].join('');\n}\n\nfunction copy_layer(ref_layer, new_name, type_result, fields_to_copy) {\n var id_new_layer = encodeId(new_name);\n var id_ref_layer = global._app.layer_to_id.get(ref_layer);\n var node_ref_layer = svg_map.querySelector('#' + id_ref_layer);\n global._app.layer_to_id.set(new_name, id_new_layer);\n global._app.id_to_layer.set(id_new_layer, new_name);\n svg_map.appendChild(node_ref_layer.cloneNode(true));\n svg_map.lastChild.setAttribute('id', id_new_layer);\n var node_new_layer = document.getElementById(id_new_layer);\n svg_map.insertBefore(node_new_layer, svg_map.querySelector('.legend'));\n data_manager.result_data[new_name] = [];\n data_manager.current_layers[new_name] = {\n n_features: data_manager.current_layers[ref_layer].n_features,\n type: data_manager.current_layers[ref_layer].type,\n ref_layer_name: ref_layer\n };\n if (data_manager.current_layers[ref_layer].pointRadius) {\n data_manager.current_layers[new_name].pointRadius = data_manager.current_layers[ref_layer].pointRadius;\n }\n var selec_src = node_ref_layer.getElementsByTagName('path'),\n selec_dest = node_new_layer.getElementsByTagName('path');\n if (!fields_to_copy) {\n for (var i = 0; i < selec_src.length; i++) {\n selec_dest[i].__data__ = selec_src[i].__data__;\n data_manager.result_data[new_name].push(selec_dest[i].__data__.properties);\n }\n } else {\n for (var _i = 0; _i < selec_src.length; _i++) {\n selec_dest[_i].__data__ = { type: 'Feature', properties: {}, geometry: cloneObj(selec_src[_i].__data__.geometry) };\n var nb_field_to_copy = fields_to_copy.length;\n for (var j = 0; j < nb_field_to_copy; j++) {\n var f = fields_to_copy[j];\n selec_dest[_i].__data__.properties[f] = selec_src[_i].__data__.properties[f];\n }\n data_manager.result_data[new_name].push(selec_dest[_i].__data__.properties);\n }\n }\n // Set the desired class name :\n node_new_layer.className.baseVal = 'layer';\n // Reset visibility and filter attributes to default values:\n node_new_layer.style.visibility = '';\n node_new_layer.removeAttribute('filter');\n // Create an entry in the layer manager:\n create_li_layer_elem(new_name, data_manager.current_layers[new_name].n_features, [data_manager.current_layers[new_name].type, type_result], 'result');\n}\n\n/**\n* Send a geo result layer computed client-side (currently only discontinuities)\n* to the server in order to use it as other result layers computed server side\n* @param {string} layerName - The name of the layer to send\n* @param {string} url - The url to use\n* @return {undefined}\n*/\nfunction send_layer_server(layerName, url) {\n var JSON_layer = path_to_geojson(layerName);\n var formToSend = new FormData();\n formToSend.append('geojson', JSON_layer);\n formToSend.append('layer_name', layerName);\n xhrequest('POST', url, formToSend, false).then(function (e) {\n data_manager.current_layers[layerName].key_name = JSON.parse(e).key;\n }).catch(function (err) {\n display_error_during_computation();\n console.log(err);\n });\n}\n\n/**\n* Function returning the name of all current layers (excepted the sample layers used as layout)\n*\n* @return {Array} - The name of the other layers in an Array\n*/\nfunction get_other_layer_names() {\n var otherLayers = Object.getOwnPropertyNames(data_manager.current_layers);\n var tmpIdx = null;\n\n tmpIdx = otherLayers.indexOf('Graticule');\n if (tmpIdx > -1) otherLayers.splice(tmpIdx, 1);\n\n tmpIdx = otherLayers.indexOf('World');\n if (tmpIdx > -1) otherLayers.splice(tmpIdx, 1);\n\n tmpIdx = otherLayers.indexOf('Sphere');\n if (tmpIdx > -1) otherLayers.splice(tmpIdx, 1);\n\n return otherLayers;\n}\n\nfunction get_display_name_on_layer_list(layer_name_to_add) {\n return +layer_name_to_add.length > 40 ? [layer_name_to_add.substring(0, 37), '(...)'].join('') : layer_name_to_add;\n}\n\n/**\n* Function triggered in order to add a new layer\n* in the \"layer manager\" (with appropriates icons regarding to its type, etc.)\n* @param {string} layerName - The name of the new layer\n* @param {integer} nbFt - The number of feature in this layer\n* @param {string} typeGeom - The geometry type\n* @param {string} typeLayer - Whether it is a result layer or not\n* @return {undefined}\n*/\nfunction create_li_layer_elem(layerName, nbFt, typeGeom, typeLayer) {\n var listDisplayName = get_display_name_on_layer_list(layerName);\n var layerId = encodeId(layerName);\n var layersListed = document.querySelector('#sortable.layer_list');\n var li = document.createElement('li');\n li.setAttribute('layer_name', layerName);\n if (typeLayer === 'result') {\n li.setAttribute('class', ['sortable_result ', layerId].join(''));\n var promotable = ['flow', 'grid', 'discont', 'cartogram', 'smooth'];\n var legend_but = typeGeom[1] !== 'cartogram' ? _buttons.button_legend : undefined;\n var replace_but = promotable.indexOf(typeGeom[1]) > -1 ? _buttons.button_replace : undefined;\n li.innerHTML = [listDisplayName, ' '].join('');\n } else if (typeLayer === 'target') {\n li.setAttribute('class', ['sortable_target ', layerId].join(''));\n li.innerHTML = [listDisplayName, ''].join('');\n } else {\n var _replace_but = !data_manager.current_layers[layerName].graticule && !data_manager.current_layers[layerName].sphere ? _buttons.button_replace : undefined;\n li.setAttribute('class', ['sortable ', layerId].join(''));\n li.innerHTML = [listDisplayName, ' '].join('');\n }\n layersListed.insertBefore(li, layersListed.childNodes[0]);\n (0, _interface.binds_layers_buttons)(layerName);\n}\n\n/**\n* Function returning an object describing the type of field\n* @param {string} layerName - The name of the new layer\n* @param {string} target - The geometry type\n* @return {object|array} - An object containing the type of each field if\n* target was nos specified, otherwise an array of field name corresponding\n* to the type defined in 'target'.\n*/\nvar type_col = exports.type_col = function type_col(layerName, target) {\n // Function returning an object like {\"field1\": \"field_type\", \"field2\": \"field_type\"},\n // for the fields of the selected layer.\n // If target is set to \"number\" it should return an array containing only the name of the numerical fields\n // ------------------- \"string\" ---------------------------------------------------------non-numerial ----\n var table = data_manager.user_data.hasOwnProperty(layerName) ? data_manager.user_data[layerName] : data_manager.result_data.hasOwnProperty(layerName) ? data_manager.result_data[layerName] : data_manager.joined_dataset[0];\n var fields = Object.getOwnPropertyNames(table[0]);\n var nbFeatures = table.length;\n var deepthTest = nbFeatures > 100 ? 100 : nbFeatures - 1;\n var result = {};\n var field = void 0;\n var tmpType = void 0;\n\n for (var j = 0, len = fields.length; j < len; ++j) {\n field = fields[j];\n result[field] = [];\n for (var i = 0; i < deepthTest; ++i) {\n tmpType = _typeof(table[i][field]);\n if (tmpType === 'string' && table[i][field].length === 0) {\n tmpType = 'empty';\n } else if (tmpType === 'string' && !isNaN(Number(table[i][field])) || tmpType === 'number') {\n tmpType = 'number';\n } else if (tmpType === 'object' && isFinite(table[i][field])) {\n tmpType = 'empty';\n }\n result[fields[j]].push(tmpType);\n }\n }\n\n for (var _j = 0, _len = fields.length; _j < _len; ++_j) {\n field = fields[_j];\n if (result[field].every(function (ft) {\n return ft === 'number' || ft === 'empty';\n }) && result[field].indexOf('number') > -1) {\n result[field] = 'number';\n } else {\n result[field] = 'string';\n }\n }\n if (target) {\n var res = [];\n Object.keys(result).forEach(function (k) {\n if (result[k] === target && k !== '_uid') {\n res.push(k);\n }\n });\n return res;\n }\n return result;\n};\n\nvar type_col2 = exports.type_col2 = function type_col2(table, _field) {\n var skip_if_empty_values = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;\n\n // Function returning an array of objects like\n // {name: \"field1\", type: \"field_type\"}, {name: \"field2\", type: \"field_type\"}, (...)]\n // for the fields of the selected layer.\n var result = [];\n var nbFeatures = table.length;\n var tmp = {};\n var dups = {};\n var field = _field;\n var tmpType = void 0;\n var fields = void 0;\n\n if (!field) {\n fields = Object.getOwnPropertyNames(table[0]).filter(function (v) {\n return v !== '_uid';\n });\n field = undefined;\n } else {\n fields = [field];\n field = undefined;\n }\n\n for (var j = 0, len = fields.length; j < len; ++j) {\n field = fields[j];\n tmp[field] = [];\n dups[field] = false;\n var h = {};\n for (var i = 0; i < nbFeatures; ++i) {\n var val = table[i][field];\n if (h[val]) dups[field] = true;else h[val] = true;\n tmpType = typeof val === 'undefined' ? 'undefined' : _typeof(val);\n if (tmpType === 'object' && isFinite(val)) {\n tmpType = 'empty';\n } else if (tmpType === 'string' && val.length === 0) {\n tmpType = 'empty';\n } else if (tmpType === 'string' && !isNaN(Number(val)) || tmpType === 'number') {\n var _val = Number(val);\n tmpType = (_val | 0) === val ? 'stock' : (_val | 0) === +val ? 'stock' : 'ratio';\n }\n tmp[fields[j]].push(tmpType);\n }\n }\n var nb_id_field = 0;\n for (var _j2 = 0, _len2 = fields.length; _j2 < _len2; ++_j2) {\n field = fields[_j2];\n var hasDup = dups[field];\n if ((field.toLowerCase() === 'id' || field.toLowerCase().indexOf('name') > -1 || field.toLowerCase().indexOf('nom') > -1) && !hasDup) {\n result.push({ name: field, type: 'id', has_duplicate: hasDup });\n nb_id_field += 1;\n } else if (field.toLowerCase().indexOf('id') > -1 && nb_id_field < 1 && !hasDup) {\n result.push({ name: field, type: 'id', has_duplicate: hasDup });\n nb_id_field += 1;\n } else if (!hasDup && nb_id_field < 1 && tmp[field].every(function (ft) {\n return ft === 'string' || ft === 'stock';\n })) {\n result.push({ name: field, type: 'id', has_duplicate: hasDup });\n nb_id_field += 1;\n } else if (tmp[field].every(function (ft) {\n return ft === 'string';\n }) && !hasDup) {\n result.push({ name: field, type: 'id', has_duplicate: hasDup });\n nb_id_field += 1;\n } else if (tmp[field].every(function (ft) {\n return ft === 'stock' || ft === 'empty';\n }) && tmp[field].indexOf('stock') > -1) {\n result.push({ name: field, type: 'stock', has_duplicate: hasDup });\n } else if (tmp[field].every(function (ft) {\n return ft === 'string' || ft === 'empty';\n }) && tmp[field].indexOf('string') > -1) {\n result.push({ name: field, type: 'category', has_duplicate: hasDup });\n } else if (tmp[field].every(function (ft) {\n return ft === 'ratio' || ft === 'stock' || ft === 'empty';\n }) && tmp[field].indexOf('ratio') > -1) {\n result.push({ name: field, type: 'ratio' });\n } else {\n result.push({ name: field, type: 'unknown', has_duplicate: hasDup });\n }\n }\n return result;\n};\n\nvar getFieldsType = exports.getFieldsType = function getFieldsType(type, layerName, ref) {\n if (!layerName && !ref) return null;\n var refField = ref || data_manager.current_layers[layerName].fields_type;\n if (!refField) return [];\n return refField.filter(function (d) {\n return d.type === type;\n }).map(function (d) {\n return d.name;\n });\n};\n\nfunction make_box_type_fields(layerName) {\n (0, _dialogs.make_dialog_container)('box_type_fields', _tr('app_page.box_type_fields.title'), 'dialog');\n d3.select('#box_type_fields').select('.modal-dialog').style('width', '500px');\n var newbox = d3.select('#box_type_fields').select('.modal-body');\n var tmp = type_col2(data_manager.user_data[layerName]);\n var fields_type = data_manager.current_layers[layerName].fields_type;\n var f = fields_type.map(function (v) {\n return v.name;\n });\n var refType = ['id', 'stock', 'ratio', 'category', 'unknown'];\n\n // const deferred = Promise.pending();\n var container = document.getElementById('box_type_fields');\n return new Promise(function (resolve, reject) {\n var clean_up_box = function clean_up_box() {\n container.remove();\n _dialogs.overlay_under_modal.hide();\n document.removeEventListener('keydown', helper_esc_key_twbs);\n if (window.fields_handler) {\n fields_handler.unfill();\n fields_handler.fill(layerName);\n }\n };\n\n if (f.length === 0) {\n // If the user dont have already selected the type :\n fields_type = tmp.slice();\n container.querySelector('.btn_cancel').remove(); // Disabled cancel button to force the user to choose\n var _onclose = function _onclose() {\n // Or use the default values if he use the X close button\n data_manager.current_layers[layerName].fields_type = tmp.slice();\n getAvailablesFunctionnalities(layerName);\n resolve(false);\n clean_up_box();\n };\n container.querySelector('#xclose').onclick = _onclose;\n } else if (tmp.length > fields_type.length) {\n // There is already types selected but new fields where added\n tmp.forEach(function (d) {\n if (f.indexOf(d.name) === -1) {\n fields_type.push(d);\n }\n });\n container.querySelector('.btn_cancel').remove(); // Disabled cancel button to force the user to choose\n var _onclose2 = function _onclose2() {\n // Or use the default values if he use the X close button\n data_manager.current_layers[layerName].fields_type = tmp.slice();\n getAvailablesFunctionnalities(layerName);\n resolve(false);\n clean_up_box();\n };\n container.querySelector('#xclose').onclick = _onclose2;\n } else {\n // There is already types selected and no new fields (so this is a modification) :\n // Use the previous values if the user close\n // the window without confirmation (cancel or X button)\n var _onclose3 = function _onclose3() {\n data_manager.current_layers[layerName].fields_type = fields_type;\n resolve(false);\n clean_up_box();\n };\n container.querySelector('.btn_cancel').onclick = _onclose3;\n container.querySelector('#xclose').onclick = _onclose3;\n }\n\n // Fetch and store the selected values when 'Ok' button is clicked :\n container.querySelector('.btn_ok').onclick = function () {\n var r = [];\n Array.prototype.forEach.call(document.querySelectorAll('#fields_select > li'), function (elem) {\n r.push({ name: elem.childNodes[0].innerHTML.trim(), type: elem.childNodes[1].value });\n });\n resolve(true);\n data_manager.current_layers[layerName].fields_type = r.slice();\n getAvailablesFunctionnalities(layerName);\n clean_up_box();\n };\n function helper_esc_key_twbs(_evt) {\n var evt = _evt || window.event;\n var isEscape = 'key' in evt ? evt.key === 'Escape' || evt.key === 'Esc' : evt.keyCode === 27;\n if (isEscape) {\n evt.stopPropagation();\n data_manager.current_layers[layerName].fields_type = tmp.slice();\n getAvailablesFunctionnalities(layerName);\n resolve(false);\n clean_up_box();\n }\n }\n document.addEventListener('keydown', helper_esc_key_twbs);\n document.getElementById('btn_type_fields').removeAttribute('disabled');\n\n newbox.append('h3').html(_tr('app_page.box_type_fields.message_invite'));\n\n var box_select = newbox.append('ul').attr('id', 'fields_select').styles({\n padding: '0',\n 'list-style': 'none'\n });\n\n box_select.selectAll('li').data(fields_type).enter().append('li');\n\n box_select.selectAll('li').insert('span').html(function (d) {\n return d.name;\n });\n\n box_select.selectAll('li').insert('select').style('float', 'right').selectAll('option').data(refType).enter().insert('option').attr('value', function (d) {\n return d;\n }).text(function (d) {\n return _tr('app_page.box_type_fields.' + d);\n }).exit();\n\n box_select.selectAll('select').each(function (d) {\n this.value = d.type;\n });\n\n for (var i = 0; i < fields_type.length; i++) {\n if (fields_type[i].type === 'category' || fields_type[i].not_number) {\n box_select.node().childNodes[i].childNodes[1].options.remove(2);\n box_select.node().childNodes[i].childNodes[1].options.remove(1);\n }\n if (fields_type[i].has_duplicate) {\n box_select.node().childNodes[i].childNodes[1].options.remove(0);\n }\n }\n _dialogs.overlay_under_modal.display();\n setTimeout(function () {\n container.querySelector('button.btn_ok').focus();\n }, 400);\n });\n}\n\nfunction getAvailablesFunctionnalities(layerName) {\n var section = document.getElementById('section2_pre');\n if (!layerName) {\n var elems = section.querySelectorAll('#button_grid, #button_discont, #button_smooth, #button_cartogram, #button_typosymbol, #button_flow, #button_prop, #button_choro, #button_choroprop, #button_typo, #button_proptypo, #button_two_stocks');\n for (var i = 0, len_i = elems.length; i < len_i; i++) {\n elems[i].style.filter = 'grayscale(100%)';\n }\n return;\n }\n\n var fields_stock = getFieldsType('stock', layerName),\n fields_ratio = getFieldsType('ratio', layerName),\n fields_categ = getFieldsType('category', layerName),\n fields_id = getFieldsType('id', layerName);\n var func_stock = void 0,\n func_ratio = void 0,\n func_categ = void 0,\n func_id = void 0;\n if (data_manager.current_layers[layerName].type === 'Line') {\n // Layer type is Line\n var _elems = section.querySelectorAll('#button_grid, #button_discont, #button_smooth, #button_cartogram, #button_typosymbol, #button_flow');\n for (var _i2 = 0, _len_i = _elems.length; _i2 < _len_i; _i2++) {\n _elems[_i2].style.filter = 'grayscale(100%)';\n }\n func_id = [];\n func_stock = section.querySelectorAll('#button_prop');\n func_ratio = section.querySelectorAll('#button_choro, #button_choroprop');\n func_categ = section.querySelectorAll('#button_typo, #button_proptypo');\n } else if (data_manager.current_layers[layerName].type === 'Point') {\n // layer type is Point\n var _elems2 = section.querySelectorAll('#button_discont, #button_cartogram');\n for (var _i3 = 0, _len_i2 = _elems2.length; _i3 < _len_i2; _i3++) {\n _elems2[_i3].style.filter = 'grayscale(100%)';\n }\n func_id = section.querySelectorAll('#button_flow');\n func_stock = section.querySelectorAll('#button_smooth, #button_prop, #button_grid');\n func_ratio = section.querySelectorAll('#button_choro, #button_choroprop');\n func_categ = section.querySelectorAll('#button_typo, #button_proptypo, #button_typosymbol');\n } else {\n // Layer type is Polygon\n func_id = section.querySelectorAll('#button_flow');\n func_stock = section.querySelectorAll('#button_smooth, #button_prop, #button_grid, #button_cartogram, #button_discont');\n func_ratio = section.querySelectorAll('#button_choro, #button_choroprop, #button_discont');\n func_categ = section.querySelectorAll('#button_typo, #button_proptypo, #button_typosymbol');\n }\n if (fields_stock.length === 0) {\n Array.prototype.forEach.call(func_stock, function (d) {\n return d.style.filter = 'grayscale(100%)';\n });\n } else {\n Array.prototype.forEach.call(func_stock, function (d) {\n return d.style.filter = 'invert(0%) saturate(100%)';\n });\n }\n if (fields_ratio.length === 0) {\n Array.prototype.forEach.call(func_ratio, function (d) {\n return d.style.filter = 'grayscale(100%)';\n });\n } else {\n Array.prototype.forEach.call(func_ratio, function (d) {\n return d.style.filter = 'invert(0%) saturate(100%)';\n });\n }\n if (fields_categ.length === 0) {\n Array.prototype.forEach.call(func_categ, function (d) {\n return d.style.filter = 'grayscale(100%)';\n });\n } else {\n Array.prototype.forEach.call(func_categ, function (d) {\n return d.style.filter = 'invert(0%) saturate(100%)';\n });\n }\n if (fields_id.length === 0) {\n Array.prototype.forEach.call(func_id, function (d) {\n return d.style.filter = 'grayscale(100%)';\n });\n } else {\n Array.prototype.forEach.call(func_id, function (d) {\n return d.style.filter = 'invert(0%) saturate(100%)';\n });\n }\n\n // That representation needs both Stock and Ratio variables:\n if (fields_stock.length === 0 || fields_ratio.length === 0) {\n document.getElementById('button_choroprop').style.filter = 'grayscale(100%)';\n } else {\n document.getElementById('button_choroprop').style.filter = 'invert(0%) saturate(100%)';\n }\n // That representation needs both Stock and Categorical variables:\n if (fields_stock.length === 0 || fields_categ.length === 0) {\n document.getElementById('button_proptypo').style.filter = 'grayscale(100%)';\n } else {\n document.getElementById('button_proptypo').style.filter = 'invert(0%) saturate(100%)';\n }\n // That representation needs either a Stock or a Ratio variable:\n if (data_manager.current_layers[layerName].type === 'Polygon' && (fields_stock.length > 0 || fields_ratio.length > 0)) {\n document.getElementById('button_discont').style.filter = 'invert(0%) saturate(100%)';\n } else {\n document.getElementById('button_discont').style.filter = 'grayscale(100%)';\n }\n // Special case for the \"waffle\" kind of map as it needs 2 or more stock variables:\n if (fields_stock.length < 2) {\n document.getElementById('button_two_stocks').style.filter = 'grayscale(100%)';\n } else {\n document.getElementById('button_two_stocks').style.filter = 'invert(0%) saturate(100%)';\n }\n}\n\nvar clickLinkFromDataUrl = exports.clickLinkFromDataUrl = function clickLinkFromDataUrl(url, filename) {\n return fetch(url).then(function (res) {\n return res.blob();\n }).then(function (blob) {\n var blobUrl = URL.createObjectURL(blob);\n var dlAnchorElem = document.createElement('a');\n dlAnchorElem.setAttribute('href', blobUrl);\n dlAnchorElem.setAttribute('download', filename);\n // if (window.isIE || window.isOldMS_Firefox) {\n if (window.isIE) {\n swal({\n title: '',\n html: '
' + _tr('app_page.common.download_link') + '
\\n
',\n type: 'question',\n customClass: 'swal2_custom',\n showCancelButton: true,\n showCloseButton: false,\n allowEscapeKey: false,\n allowOutsideClick: false,\n confirmButtonColor: '#DD6B55',\n confirmButtonText: _tr('app_page.common.confirm'),\n inputOptions: input_fields,\n onOpen: function onOpen() {\n var sel = d3.select('#label_box_field');\n _fields.forEach(function (f_name) {\n sel.append('option').property('value', f_name).text(f_name);\n });\n if (fields_num.length > 0) {\n var section_filter = d3.select('#label_box_filter_section');\n section_filter.append('input').attrs({ type: 'checkbox', id: 'label_box_filter_chk' }).on('change', function () {\n if (this.checked) {\n subsection_filter_label.style('display', null);\n } else {\n subsection_filter_label.style('display', 'none');\n }\n });\n section_filter.append('label').attr('for', 'label_box_filter_chk').html(_tr('app_page.layer_style_popup.filter_label'));\n var subsection_filter_label = section_filter.append('div').style('display', 'none');\n var sel2 = subsection_filter_label.append('select').attr('id', 'label_box_filter_field');\n fields_num.forEach(function (f_name) {\n sel2.append('option').property('value', f_name).text(f_name);\n });\n var sel3 = subsection_filter_label.append('select').attr('id', 'label_box_filter_type');\n sel3.append('option').property('value', 'sup').text('>');\n sel3.append('option').property('value', 'inf').text('<');\n subsection_filter_label.append('input').attrs({ type: 'number', id: 'label_box_filter_value' });\n }\n },\n preConfirm: function preConfirm() {\n return new Promise(function (resolve, reject) {\n setTimeout(function () {\n var selected_field = document.getElementById('label_box_field').value;\n var filter_options = undefined;\n if (fields_num.length > 0) {\n var to_filter = document.getElementById('label_box_filter_chk').checked;\n if (to_filter) {\n var filter_value = document.getElementById('label_box_filter_value').value;\n if (!filter_value || isNaN(filter_value)) {\n reject(_tr('app_page.common.incorrect_value'));\n return;\n }\n filter_options = {\n field: document.getElementById('label_box_filter_field').value,\n type_filter: document.getElementById('label_box_filter_type').value,\n filter_value: filter_value\n };\n }\n }\n if (_fields.indexOf(selected_field) < 0) {\n reject(_tr('app_page.common.no_value'));\n } else {\n resolve();\n (0, _function.render_label)(layer_name, {\n label_field: selected_field,\n filter_options: filter_options,\n color: '#000',\n font: 'verdana',\n ref_font_size: 12,\n uo_layer_name: ['Labels', selected_field, layer_name].join('_')\n });\n }\n }, 50);\n });\n }\n }).then(function () {\n //console.log(value);\n }, function () {\n //console.log(dismiss);\n });\n });\n }\n}\n\n/**\n* Return the name of the fields/columns\n* (ie. the members of the `properties` Object for each feature on a layer)\n*\n* @param {String} layer_name - The name of the layer.\n* @return {Array} - An array of Strings, one for each field name.\n*\n*/\nfunction get_fields_name(layer_name) {\n var elem = document.getElementById(_app.layer_to_id.get(layer_name)).childNodes[0];\n if (!elem.__data__ || !elem.__data__.properties) {\n return null;\n }\n return Object.getOwnPropertyNames(elem.__data__.properties);\n}\n\nfunction createStyleBoxWaffle(layer_name) {\n (0, _dialogs.check_remove_existing_box)('.styleBox');\n var round = Math.round;\n var floor = Math.floor;\n var layer_id = _app.layer_to_id.get(layer_name),\n g_lyr_name = '#' + layer_id,\n ref_layer_name = data_manager.current_layers[layer_name].ref_layer_name,\n symbol = data_manager.current_layers[layer_name].symbol,\n fields = data_manager.current_layers[layer_name].rendered_field,\n selection = map.select(g_lyr_name);\n\n var previous_params = {\n fill_opacity: selection.selectAll(symbol).style('fill-opacity'),\n ref_colors: [].concat(data_manager.current_layers[layer_name].fill_color),\n size: data_manager.current_layers[layer_name].size,\n nCol: data_manager.current_layers[layer_name].nCol\n };\n\n (0, _dialogs.make_confirm_dialog2)('styleBox', layer_name, { top: true, widthFitContent: true, draggable: true }).then(function (confirmed) {\n if (confirmed) {\n redraw_legend('waffle', layer_name, fields);\n // Change the layer name if requested :\n if (new_layer_name !== layer_name) {\n change_layer_name(layer_name, (0, _function.check_layer_name)(new_layer_name.trim()));\n }\n } else {\n data_manager.current_layers[layer_name].fill_color = previous_params.ref_colors;\n data_manager.current_layers[layer_name].size = previous_params.size;\n selection.selectAll(symbol).style('fill-opacity', previous_params.fill_opacity);\n }\n (0, _map_ctrl.zoom_without_redraw)();\n });\n\n var container = document.querySelector('.twbs > .styleBox');\n var popup = d3.select(container).select('.modal-content').style('width', '300px').select('.modal-body');\n\n popup.append('p').styles({ 'text-align': 'center', color: 'grey' }).html([_tr('app_page.layer_style_popup.rendered_field', { field: fields.join(' ,') }), _tr('app_page.layer_style_popup.reference_layer', { layer: ref_layer_name })].join(''));\n\n var fill_opacity_section = popup.append('p').attr('class', 'line_elem').attr('id', 'fill_color_section');\n\n fill_opacity_section.append('span').html(_tr('app_page.layer_style_popup.fill_opacity'));\n fill_opacity_section.insert('input').attrs({ type: 'range', min: 0, max: 1, step: 0.1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right' }).property('value', previous_params.fill_opacity).on('change', function () {\n selection.selectAll(symbol).style('fill-opacity', +this.value);\n fill_opacity_section.select('#fill_opacity_txt').html(+this.value * 100 + '%');\n });\n\n fill_opacity_section.append('span').attr('id', 'fill_opacity_txt').style('float', 'right').html(+previous_params.fill_opacity * 100 + '%');\n\n var ref_colors_section = popup.append('div').attr('id', 'ref_colors_section').style('clear', 'both');\n ref_colors_section.append('p').html(_tr('app_page.layer_style_popup.ref_colors'));\n\n var _loop = function _loop(i) {\n var p = ref_colors_section.append('p').style('margin', '15px 5px');\n p.append('span').html(data_manager.current_layers[layer_name].rendered_field[i]);\n p.insert('input').attrs({ id: i, type: 'color' }).style('float', 'right').property('value', data_manager.current_layers[layer_name].fill_color[i]).on('change', function () {\n // eslint-disable-line no-loop-func\n var col = (0, _colors_helpers.rgb2hex)(this.value);\n var to_replace = data_manager.current_layers[layer_name].fill_color[i];\n data_manager.current_layers[layer_name].fill_color[i] = col;\n selection.selectAll(symbol).each(function () {\n if ((0, _colors_helpers.rgb2hex)(this.getAttribute('fill')) === to_replace) {\n this.setAttribute('fill', col);\n }\n });\n });\n };\n\n for (var i = 0; i < data_manager.current_layers[layer_name].fill_color.length; i++) {\n _loop(i);\n }\n\n var size_section = popup.append('p').attr('class', 'line_elem').attr('id', 'size_section').style('clear', 'both');\n\n size_section.append('span').html(_tr('app_page.layer_style_popup.ref_size'));\n size_section.insert('input').attrs({ type: 'range', min: 1, max: 40, step: 1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right' }).property('value', previous_params.size).on('change', function () {\n var val = +this.value;\n var nCol = data_manager.current_layers[layer_name].nCol;\n data_manager.current_layers[layer_name].size = val;\n selection.selectAll('g').selectAll(symbol).each(function (_, i) {\n if (symbol === 'circle') {\n var t_x = round(i % nCol * 2 * val);\n var t_y = floor(floor(i / nCol) * 2 * val);\n this.setAttribute('r', val);\n this.setAttribute('transform', 'translate(-' + t_x + ', -' + t_y + ')');\n } else {\n var offset = val / 5;\n var _t_x = round(i % nCol * val) + offset * round(i % nCol);\n var _t_y = floor(floor(i / nCol) * val) + offset * floor(i / nCol);\n this.setAttribute('width', val);\n this.setAttribute('height', val);\n this.setAttribute('transform', 'translate(-' + _t_x + ', -' + _t_y + ')');\n }\n });\n size_section.select('#size_section_txt').html(this.value + ' px');\n });\n size_section.append('span').attr('id', 'size_section_txt').style('float', 'right').html(previous_params.size + ' px');\n\n var width_row_section = popup.append('p').attr('class', 'line_elem').attr('id', 'width_row_section');\n\n width_row_section.append('span').html(_tr('app_page.func_options.twostocks.waffle_width_rows'));\n width_row_section.insert('input').attrs({ type: 'range', min: 1, max: 10, step: 1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right' }).property('value', previous_params.nCol).on('change', function () {\n var val = +this.value;\n var size = data_manager.current_layers[layer_name].size;\n data_manager.current_layers[layer_name].nCol = val;\n selection.selectAll('g').selectAll(symbol).each(function (d, i) {\n if (symbol === 'circle') {\n var t_x = round(i % val * 2 * size);\n var t_y = floor(floor(i / val) * 2 * size);\n this.setAttribute('transform', 'translate(-' + t_x + ', -' + t_y + ')');\n } else {\n var offset = size / 5;\n var _t_x2 = round(i % val * size) + offset * round(i % val);\n var _t_y2 = floor(floor(i / val) * size) + offset * floor(i / val);\n this.setAttribute('transform', 'translate(-' + _t_x2 + ', -' + _t_y2 + ')');\n }\n });\n width_row_section.select('#width_row_text').html(this.value);\n });\n width_row_section.append('span').attr('id', 'width_row_text').style('float', 'right').html(previous_params.nCol);\n\n var allow_move_section = popup.append('p');\n var chkbx = allow_move_section.insert('input').style('margin', '0').property('checked', data_manager.current_layers[layer_name].draggable ? true : null).attrs({\n type: 'checkbox',\n id: 'checkbox_move_symbol' });\n allow_move_section.insert('label').attr('for', 'checkbox_move_symbol').html(_tr('app_page.layer_style_popup.let_draggable'));\n chkbx.on('change', function () {\n if (this.checked) {\n data_manager.current_layers[layer_name].draggable = true;\n } else {\n data_manager.current_layers[layer_name].draggable = false;\n }\n });\n\n var new_layer_name = layer_name;\n var new_name_section = make_change_layer_name_section(popup, layer_name);\n new_name_section.on('change', function () {\n new_layer_name = this.value;\n });\n}\n\nfunction createStyleBox_ProbSymbol(layer_name) {\n (0, _dialogs.check_remove_existing_box)('.styleBox');\n var layer_id = _app.layer_to_id.get(layer_name),\n g_lyr_name = '#' + layer_id,\n ref_layer_name = data_manager.current_layers[layer_name].ref_layer_name,\n type_method = data_manager.current_layers[layer_name].renderer,\n type_symbol = data_manager.current_layers[layer_name].symbol,\n field_used = data_manager.current_layers[layer_name].rendered_field,\n selection = map.select(g_lyr_name).selectAll(type_symbol),\n old_size = [data_manager.current_layers[layer_name].size[0], data_manager.current_layers[layer_name].size[1]];\n var rendering_params = void 0;\n var stroke_prev = selection.style('stroke');\n var stroke_width = selection.style('stroke-width');\n var prev_random_colors = void 0;\n\n var opacity = selection.style('fill-opacity'),\n border_opacity = selection.style('stroke-opacity');\n\n var fill_prev = (0, _helpers.cloneObj)(data_manager.current_layers[layer_name].fill_color);\n var d_values = data_manager.result_data[layer_name].map(function (v) {\n return +v[field_used];\n });\n var prev_col_breaks = void 0;\n var redraw_prop_val = function redraw_prop_val(prop_values) {\n var selec = selection._groups[0];\n\n if (type_symbol === 'circle') {\n for (var i = 0, len = prop_values.length; i < len; i++) {\n selec[i].setAttribute('r', prop_values[i]);\n }\n } else if (type_symbol === 'rect') {\n for (var _i = 0, _len = prop_values.length; _i < _len; _i++) {\n var old_rect_size = +selec[_i].getAttribute('height');\n var centr = [+selec[_i].getAttribute('x') + old_rect_size / 2 - prop_values[_i] / 2, +selec[_i].getAttribute('y') + old_rect_size / 2 - prop_values[_i] / 2];\n selec[_i].setAttribute('x', centr[0]);\n selec[_i].setAttribute('y', centr[1]);\n selec[_i].setAttribute('height', prop_values[_i]);\n selec[_i].setAttribute('width', prop_values[_i]);\n }\n }\n };\n\n if (data_manager.current_layers[layer_name].colors_breaks && data_manager.current_layers[layer_name].colors_breaks instanceof Array) {\n prev_col_breaks = [].concat(data_manager.current_layers[layer_name].colors_breaks);\n } else if (data_manager.current_layers[layer_name].break_val !== undefined) {\n prev_col_breaks = data_manager.current_layers[layer_name].break_val;\n } else if (fill_prev.random) {\n prev_random_colors = [];\n selection.each(function () {\n prev_random_colors.push(this.style.fill);\n });\n }\n if (stroke_prev.startsWith('rgb')) stroke_prev = (0, _colors_helpers.rgb2hex)(stroke_prev);\n if (stroke_width.endsWith('px')) stroke_width = stroke_width.substring(0, stroke_width.length - 2);\n\n (0, _dialogs.make_confirm_dialog2)('styleBox', layer_name, { top: true, widthFitContent: true, draggable: true }).then(function (confirmed) {\n if (confirmed) {\n // if(data_manager.current_layers[layer_name].size != old_size){\n var lgd_prop_symb = document.querySelector(['#legend_root_symbol.lgdf_', layer_id].join(''));\n if (lgd_prop_symb) {\n (0, _map_ctrl.redraw_legends_symbols)(lgd_prop_symb);\n }\n if (type_symbol === 'circle') {\n selection.each(function (d) {\n d.properties.prop_value = this.getAttribute('r'); // eslint-disable-line no-param-reassign\n d.properties.color = (0, _colors_helpers.rgb2hex)(this.style.fill); // eslint-disable-line no-param-reassign\n });\n } else {\n selection.each(function (d) {\n d.properties.prop_value = this.getAttribute('height'); // eslint-disable-line no-param-reassign\n d.properties.color = (0, _colors_helpers.rgb2hex)(this.style.fill); // eslint-disable-line no-param-reassign\n });\n }\n\n if ((type_method === 'PropSymbolsChoro' || type_method === 'PropSymbolsTypo') && rendering_params !== undefined) {\n if (type_method === 'PropSymbolsChoro') {\n data_manager.current_layers[layer_name].fill_color = {\n class: [].concat(rendering_params.colorsByFeature)\n };\n data_manager.current_layers[layer_name].colors_breaks = [];\n for (var i = rendering_params.breaks.length - 1; i > 0; --i) {\n data_manager.current_layers[layer_name].colors_breaks.push([[rendering_params.breaks[i - 1], ' - ', rendering_params.breaks[i]].join(''), rendering_params.colors[i - 1]]);\n }\n data_manager.current_layers[layer_name].options_disc = {\n schema: rendering_params.schema,\n colors: rendering_params.colors,\n no_data: rendering_params.no_data,\n type: rendering_params.type,\n breaks: rendering_params.breaks,\n extra_options: rendering_params.extra_options\n };\n } else if (type_method === 'PropSymbolsTypo') {\n data_manager.current_layers[layer_name].fill_color = {\n class: [].concat(rendering_params.colorsByFeature)\n };\n data_manager.current_layers[layer_name].color_map = rendering_params.color_map;\n }\n data_manager.current_layers[layer_name].rendered_field2 = rendering_params.field;\n // Also change the legend if there is one displayed :\n if (document.querySelector('.legend.legend_feature.lgdf_' + _app.layer_to_id.get(layer_name)).id === 'legend_root') {\n redraw_legend('choro', layer_name, data_manager.current_layers[layer_name].rendered_field);\n } else {\n redraw_legend('choro_horiz', layer_name, data_manager.current_layers[layer_name].rendered_field);\n }\n }\n // if(selection._groups[0][0].__data__.properties.color && rendering_params !== undefined){\n // selection.each((d,i) => {\n // d.properties.color = rendering_params.colorsByFeature[i];\n // });\n // }\n // Change the layer name if requested :\n if (new_layer_name !== layer_name) {\n change_layer_name(layer_name, (0, _function.check_layer_name)(new_layer_name.trim()));\n }\n } else {\n selection.style('fill-opacity', opacity);\n map.select(g_lyr_name).style('stroke-width', stroke_width);\n data_manager.current_layers[layer_name]['stroke-width-const'] = stroke_width;\n var fill_meth = Object.getOwnPropertyNames(fill_prev)[0];\n if (fill_meth === 'single') {\n selection.style('fill', fill_prev.single).style('stroke-opacity', border_opacity).style('stroke', stroke_prev);\n } else if (fill_meth === 'two') {\n data_manager.current_layers[layer_name].break_val = prev_col_breaks;\n data_manager.current_layers[layer_name].fill_color = { two: [fill_prev.two[0], fill_prev.two[1]] };\n selection.style('fill', function (d, i) {\n return d_values[i] > prev_col_breaks ? fill_prev.two[1] : fill_prev.two[0];\n }).style('stroke-opacity', border_opacity).style('stroke', stroke_prev);\n } else if (fill_meth === 'class') {\n selection.style('fill-opacity', opacity).style('fill', function (d, i) {\n return data_manager.current_layers[layer_name].fill_color.class[i];\n }).style('stroke-opacity', border_opacity).style('stroke', stroke_prev);\n data_manager.current_layers[layer_name].colors_breaks = prev_col_breaks;\n } else if (fill_meth === 'random') {\n selection.style('fill', function (_, i) {\n return prev_random_colors[i] || _colors_helpers.Colors.names[_colors_helpers.Colors.random()];\n }).style('stroke-opacity', border_opacity).style('stroke', stroke_prev);\n } else if (fill_meth === 'categorical') {\n fill_categorical(layer_name, fill_prev.categorical[0], type_symbol, fill_prev.categorical[1]);\n }\n data_manager.current_layers[layer_name].fill_color = fill_prev;\n if (data_manager.current_layers[layer_name].size[1] !== old_size[1]) {\n var prop_values = (0, _helpers_calc.prop_sizer3_e)(d_values, old_size[0], old_size[1], type_symbol);\n redraw_prop_val(prop_values);\n data_manager.current_layers[layer_name].size = [old_size[0], old_size[1]];\n }\n }\n (0, _map_ctrl.zoom_without_redraw)();\n });\n\n var container = document.querySelector('.twbs > .styleBox');\n var popup = d3.select(container).select('.modal-content').style('width', '300px').select('.modal-body');\n\n popup.append('p').styles({ 'text-align': 'center', color: 'grey' }).html([_tr('app_page.layer_style_popup.rendered_field', { field: data_manager.current_layers[layer_name].rendered_field }), _tr('app_page.layer_style_popup.reference_layer', { layer: ref_layer_name })].join(''));\n\n var new_layer_name = layer_name;\n var new_name_section = make_change_layer_name_section(popup, layer_name);\n new_name_section.on('change', function () {\n new_layer_name = this.value;\n });\n\n if (type_method === 'PropSymbolsChoro') {\n var field_color = data_manager.current_layers[layer_name].rendered_field2;\n popup.append('p').styles({ margin: 'auto', 'text-align': 'center' }).html(_tr('app_page.layer_style_popup.field_symbol_color', { field: field_color })).append('button').attr('class', 'button_disc').html(_tr('app_page.layer_style_popup.choose_discretization')).on('click', function () {\n container.modal.hide();\n var _opts = rendering_params ? { schema: rendering_params.schema, colors: rendering_params.colors, no_data: rendering_params.no_data, type: rendering_params.type, breaks: rendering_params.breaks, extra_options: rendering_params.extra_options } : data_manager.current_layers[layer_name].options_disc;\n (0, _discretization_panel.display_discretization)(layer_name, field_color, _opts.breaks.length - 1, _opts).then(function (confirmed) {\n container.modal.show();\n if (confirmed) {\n rendering_params = {\n nb_class: confirmed[0],\n type: confirmed[1],\n breaks: confirmed[2],\n colors: confirmed[3],\n colorsByFeature: confirmed[4],\n schema: confirmed[5],\n no_data: confirmed[6],\n renderer: 'PropSymbolsChoro',\n field: field_color,\n extra_options: confirmed[7]\n };\n selection.style('fill', function (d, i) {\n return rendering_params.colorsByFeature[i];\n });\n }\n });\n });\n } else if (data_manager.current_layers[layer_name].break_val !== undefined) {\n var fill_color_section = popup.append('div').attr('id', 'fill_color_section');\n fill_color_section.append('p').style('text-align', 'center').html(_tr('app_page.layer_style_popup.color_break'));\n var p2 = fill_color_section.append('p').style('display', 'inline');\n var col1 = p2.insert('input').attrs({ id: 'col1', type: 'color' }).property('value', data_manager.current_layers[layer_name].fill_color.two[0]).on('change', function () {\n var _this = this;\n\n var new_break_val = +b_val.node().value;\n data_manager.current_layers[layer_name].fill_color.two[0] = this.value;\n selection.transition().style('fill', function (d, i) {\n return d_values[i] > new_break_val ? col2.node().value : _this.value;\n });\n });\n var col2 = p2.insert('input').attrs({ id: 'col2', type: 'color' }).property('value', data_manager.current_layers[layer_name].fill_color.two[1]).on('change', function () {\n var _this2 = this;\n\n var new_break_val = +b_val.node().value;\n data_manager.current_layers[layer_name].fill_color.two[1] = this.value;\n selection.transition().style('fill', function (d, i) {\n return d_values[i] > new_break_val ? _this2.value : col1.node().value;\n });\n });\n fill_color_section.insert('span').html(_tr('app_page.layer_style_popup.break_value'));\n var b_val = fill_color_section.insert('input').attr('type', 'number').style('width', '75px').property('value', data_manager.current_layers[layer_name].break_val).on('change', function () {\n var new_break_val = +this.value;\n data_manager.current_layers[layer_name].break_val = new_break_val;\n selection.transition().style('fill', function (d, i) {\n return d_values[i] > new_break_val ? col2.node().value : col1.node().value;\n });\n });\n } else if (type_method === 'PropSymbolsTypo') {\n var _field_color = data_manager.current_layers[layer_name].rendered_field2;\n popup.append('p').style('margin', 'auto').html(_tr('app_page.layer_style_popup.field_symbol_color', { field: _field_color }));\n popup.append('p').style('text-align', 'center').insert('button').attr('class', 'button_disc').html(_tr('app_page.layer_style_popup.choose_colors')).on('click', function () {\n var _prepare_categories_a5 = (0, _function.prepare_categories_array)(layer_name, _field_color, data_manager.current_layers[layer_name].color_map),\n _prepare_categories_a6 = _slicedToArray(_prepare_categories_a5, 1),\n cats = _prepare_categories_a6[0];\n\n container.modal.hide();\n (0, _categorical_panel.display_categorical_box)(data_manager.result_data[layer_name], layer_name, _field_color, cats).then(function (confirmed) {\n container.modal.show();\n if (confirmed) {\n rendering_params = {\n nb_class: confirmed[0],\n color_map: confirmed[1],\n colorsByFeature: confirmed[2],\n renderer: 'Categorical',\n rendered_field: _field_color,\n field: _field_color\n };\n selection.style('fill', function (d, i) {\n return rendering_params.colorsByFeature[i];\n });\n }\n });\n });\n } else {\n // const fields_all = type_col2(data_manager.result_data[layer_name]),\n // fields = getFieldsType('category', null, fields_all);\n var fill_method = popup.append('p').html(_tr('app_page.layer_style_popup.fill_color')).insert('select');\n\n [[_tr('app_page.layer_style_popup.single_color'), 'single'], [_tr('app_page.layer_style_popup.random_color'), 'random']].forEach(function (d) {\n fill_method.append('option').text(d[0]).attr('value', d[1]);\n });\n popup.append('div').attr('id', 'fill_color_section');\n fill_method.on('change', function () {\n popup.select('#fill_color_section').html('').on('click', null);\n if (this.value === 'single') {\n make_single_color_menu(layer_name, fill_prev, type_symbol);\n map.select(g_lyr_name).selectAll(type_symbol).transition().style('fill', fill_prev.single);\n data_manager.current_layers[layer_name].fill_color = (0, _helpers.cloneObj)(fill_prev);\n } else if (this.value === 'random') {\n make_random_color(layer_name, type_symbol);\n document.getElementById('random_color_btn').click();\n }\n });\n (0, _helpers.setSelected)(fill_method.node(), Object.getOwnPropertyNames(fill_prev)[0]);\n }\n\n var fill_opct_section = popup.append('p').attr('class', 'line_elem');\n fill_opct_section.append('span').html(_tr('app_page.layer_style_popup.fill_opacity'));\n\n fill_opct_section.insert('input').attrs({ type: 'range', min: 0, max: 1, step: 0.1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right' }).property('value', opacity).on('change', function () {\n selection.style('fill-opacity', this.value);\n fill_opct_section.select('#fill_opacity_txt').html(+this.value * 100 + '%');\n });\n\n fill_opct_section.append('span').attr('id', 'fill_opacity_txt').style('float', 'right').html(+opacity * 100 + '%');\n\n var border_color_section = popup.append('p').attr('class', 'line_elem');\n border_color_section.append('span').html(_tr('app_page.layer_style_popup.border_color'));\n border_color_section.insert('input').attr('type', 'color').style('float', 'right').property('value', stroke_prev).on('change', function () {\n selection.transition().style('stroke', this.value);\n });\n\n var border_opacity_section = popup.append('p');\n border_opacity_section.append('span').html(_tr('app_page.layer_style_popup.border_opacity'));\n\n border_opacity_section.insert('input').attrs({ type: 'range', min: 0, max: 1, step: 0.1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right' }).property('value', border_opacity).on('change', function () {\n selection.style('stroke-opacity', this.value);\n border_opacity_section.select('#border_opacity_txt').html('' + this.value);\n });\n\n border_opacity_section.append('span').attr('id', 'border_opacity_txt').style('float', 'right').html(' ' + border_opacity);\n\n var border_width_section = popup.append('p').attr('class', 'line_elem');\n border_width_section.append('span').html(_tr('app_page.layer_style_popup.border_width'));\n border_width_section.insert('input').attrs({ type: 'number', min: 0, step: 0.1 }).styles({ width: '60px', float: 'right' }).property('value', stroke_width).on('change', function () {\n selection.style('stroke-width', this.value + 'px');\n data_manager.current_layers[layer_name]['stroke-width-const'] = +this.value;\n });\n\n var prop_val_content = popup.append('p');\n prop_val_content.append('span').html(_tr('app_page.layer_style_popup.field_symbol_size', { field: field_used }));\n prop_val_content.append('span').html(_tr('app_page.layer_style_popup.symbol_fixed_size'));\n prop_val_content.insert('input').styles({ width: '60px', float: 'right' }).attrs({ type: 'number', id: 'max_size_range', min: 0.1, step: 'any' }).property('value', data_manager.current_layers[layer_name].size[1]).on('change', function () {\n var f_size = +this.value;\n var prop_values = (0, _helpers_calc.prop_sizer3_e)(d_values, data_manager.current_layers[layer_name].size[0], f_size, type_symbol);\n data_manager.current_layers[layer_name].size[1] = f_size;\n redraw_prop_val(prop_values);\n });\n prop_val_content.append('span').style('float', 'right').html('(px)');\n\n var prop_val_content2 = popup.append('p').attr('class', 'line_elem');\n prop_val_content2.append('span').html(_tr('app_page.layer_style_popup.on_value'));\n prop_val_content2.insert('input').styles({ width: '100px', float: 'right' }).attrs({ type: 'number', min: 0.1, step: 0.1 }).property('value', +data_manager.current_layers[layer_name].size[0]).on('change', function () {\n var f_val = +this.value;\n var prop_values = (0, _helpers_calc.prop_sizer3_e)(d_values, f_val, data_manager.current_layers[layer_name].size[1], type_symbol);\n redraw_prop_val(prop_values);\n data_manager.current_layers[layer_name].size[0] = f_val;\n });\n\n var allow_move_section = popup.append('p');\n var chkbx = allow_move_section.insert('input').style('margin', '0').property('checked', data_manager.current_layers[layer_name].draggable ? true : null).attrs({\n type: 'checkbox',\n id: 'checkbox_move_symbol'\n });\n allow_move_section.insert('label').attr('for', 'checkbox_move_symbol').html(_tr('app_page.layer_style_popup.let_draggable'));\n chkbx.on('change', function () {\n if (this.checked) {\n data_manager.current_layers[layer_name].draggable = true;\n } else {\n data_manager.current_layers[layer_name].draggable = false;\n }\n });\n\n popup.append('p').style('text-align', 'center').insert('button').attrs({ id: 'reset_symb_loc', class: 'button_st4' }).text(_tr('app_page.layer_style_popup.reset_symbols_location')).on('click', function () {\n selection.transition().attrs(function (d) {\n var centroid = path.centroid(d.geometry);\n if (type_symbol === 'circle') {\n return {\n cx: centroid[0],\n cy: centroid[1]\n };\n } else {\n return {\n x: centroid[0] - +d.properties.prop_value / 2,\n y: centroid[1] - +d.properties.prop_value / 2\n };\n }\n });\n });\n make_generate_labels_section(popup, layer_name);\n}\n\n/**\n* Function triggered when the user want to edit a single label.\n*\n* @param {Node} label_node - The HTMLElement corresponding to this label.\n* @return {void}\n*\n*/\nfunction make_style_box_indiv_label(label_node) {\n var current_options = {\n size: label_node.style.fontSize,\n content: label_node.textContent,\n font: label_node.style.fontFamily,\n color: label_node.style.fill\n };\n // const new_params = {};\n if (current_options.color.startsWith('rgb')) {\n current_options.color = (0, _colors_helpers.rgb2hex)(current_options.color);\n }\n (0, _dialogs.check_remove_existing_box)('.styleTextAnnotation');\n (0, _dialogs.make_confirm_dialog2)('styleTextAnnotation', _tr('app_page.func_options.label.title_box_indiv'), { widthFitContent: true, draggable: true }).then(function (confirmed) {\n if (!confirmed) {\n label_node.style.fontsize = current_options.size; // eslint-disable-line no-param-reassign\n label_node.textContent = current_options.content; // eslint-disable-line no-param-reassign\n label_node.style.fill = current_options.color; // eslint-disable-line no-param-reassign\n label_node.style.fontFamily = current_options.font; // eslint-disable-line no-param-reassign\n }\n });\n var box_content = d3.select('.styleTextAnnotation').select('.modal-content').style('width', '300px').select('.modal-body').insert('div');\n var a = box_content.append('p').attr('class', 'line_elem');\n a.insert('span').html(_tr('app_page.func_options.label.font_size'));\n a.append('input').attrs({ type: 'number', id: 'font_size', min: 0, max: 34, step: 'any' }).styles({ width: '70px', float: 'right' }).property('value', +label_node.style.fontSize.slice(0, -2)).on('change', function () {\n label_node.style.fontSize = this.value + 'px'; // eslint-disable-line no-param-reassign\n });\n var b = box_content.append('p').attr('class', 'line_elem');\n b.insert('span').html(_tr('app_page.func_options.label.content'));\n b.append('input').attr('id', 'label_content').styles({ width: '70px', float: 'right' }).property('value', label_node.textContent).on('keyup', function () {\n label_node.textContent = this.value; // eslint-disable-line no-param-reassign\n });\n var c = box_content.append('p').attr('class', 'line_elem');\n c.insert('span').html(_tr('app_page.func_options.common.color'));\n c.append('input').attrs({ type: 'color', id: 'label_color' }).styles({ width: '70px', float: 'right' }).property('value', (0, _colors_helpers.rgb2hex)(label_node.style.fill)).on('change', function () {\n label_node.style.fill = this.value; // eslint-disable-line no-param-reassign\n });\n var d = box_content.append('p').attr('class', 'line_elem');\n d.insert('span').html(_tr('app_page.func_options.label.font_type'));\n var selec_fonts = d.append('select').style('float', 'right').on('change', function () {\n label_node.style.fontFamily = this.value; // eslint-disable-line no-param-reassign\n });\n\n _fonts.available_fonts.forEach(function (name) {\n selec_fonts.append('option').attr('value', name[1]).text(name[0]);\n });\n selec_fonts.node().value = label_node.style.fontFamily;\n}\n\n/**\n* Function creating a drop shadow on a layer.\n* Currently the properties (offset, gaussianBlur) of this shadow are hard-coded.\n*\n* @param {String} layerId - The id of the layer (ie. the \"id\" attribute, not the layer name)\n* @return {void}\n*\n*/\nvar createDropShadow = exports.createDropShadow = function createDropShadow(layerId) {\n var filt_to_use = document.createElementNS('http://www.w3.org/2000/svg', 'filter');\n filt_to_use.setAttribute('id', 'filt_' + layerId);\n // filt_to_use.setAttribute(\"x\", 0);\n // filt_to_use.setAttribute(\"y\", 0);\n filt_to_use.setAttribute('width', '200%');\n filt_to_use.setAttribute('height', '200%');\n var offset = document.createElementNS('http://www.w3.org/2000/svg', 'feOffset');\n offset.setAttributeNS(null, 'result', 'offOut');\n offset.setAttributeNS(null, 'in', 'SourceAlpha');\n offset.setAttributeNS(null, 'dx', '5');\n offset.setAttributeNS(null, 'dy', '5');\n var gaussian_blur = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');\n gaussian_blur.setAttributeNS(null, 'result', 'blurOut');\n gaussian_blur.setAttributeNS(null, 'in', 'offOut');\n gaussian_blur.setAttributeNS(null, 'stdDeviation', 10);\n var blend = document.createElementNS('http://www.w3.org/2000/svg', 'feBlend');\n blend.setAttributeNS(null, 'in', 'SourceGraphic');\n blend.setAttributeNS(null, 'in2', 'blurOut');\n blend.setAttributeNS(null, 'mode', 'normal');\n filt_to_use.appendChild(offset);\n filt_to_use.appendChild(gaussian_blur);\n filt_to_use.appendChild(blend);\n defs.node().appendChild(filt_to_use);\n svg_map.querySelector('#' + layerId).setAttribute('filter', 'url(#filt_' + layerId + ')');\n};\n\n/**\n* Return the id of a gaussian blur filter with the desired size (stdDeviation attribute)\n* if one with the same param already exists, its id is returned,\n* otherwise a new one is created, and its id is returned\n*/\n// var getBlurFilter = (function(size){\n// var count = 0;\n// return function(size) {\n// let blur_filts = defs.node().getElementsByClassName(\"blur\");\n// let blur_filt_to_use;\n// for(let i=0; i < blur_filts.length; i++){\n// if(blur_filts[i].querySelector(\"feGaussianBlur\")\n// .getAttributeNS(null, \"stdDeviation\") === size){\n// blur_filt_to_use = blur_filts[i];\n// }\n// }\n// if(!blur_filt_to_use){\n// count = count + 1;\n// blur_filt_to_use = document.createElementNS(\n// \"http://www.w3.org/2000/svg\", \"filter\");\n// blur_filt_to_use.setAttribute(\"id\",\"blurfilt\" + count);\n// blur_filt_to_use.setAttribute(\"class\", \"blur\");\n// var gaussianFilter = document.createElementNS(\n// \"http://www.w3.org/2000/svg\", \"feGaussianBlur\");\n// gaussianFilter.setAttributeNS(null, \"in\", \"SourceGraphic\");\n// gaussianFilter.setAttributeNS(null, \"stdDeviation\", size);\n// blur_filt_to_use.appendChild(gaussianFilter);\n// defs.node().appendChild(blur_filt_to_use);\n// }\n// return blur_filt_to_use.id;\n// };\n// })();\n\nfunction change_layer_name(old_name, new_name) {\n // Temporarily deactivate the tooltip displaying information under the cursor:\n var restart_info = false;\n if (document.getElementById('info_features').className === 'active') {\n (0, _interface.displayInfoOnMove)();\n restart_info = true;\n }\n var old_id = global._app.layer_to_id.get(old_name);\n var new_id = encodeId(new_name);\n data_manager.current_layers[new_name] = (0, _helpers.cloneObj)(data_manager.current_layers[old_name]);\n delete data_manager.current_layers[old_name];\n var list_elem = document.querySelector('li.' + old_id);\n list_elem.classList.remove(old_id);\n list_elem.classList.add(new_id);\n list_elem.setAttribute('layer_name', new_name);\n list_elem.innerHTML = list_elem.innerHTML.replace((0, _helpers.get_display_name_on_layer_list)(old_name), (0, _helpers.get_display_name_on_layer_list)(new_name));\n var b = svg_map.querySelector('#' + old_id);\n b.id = new_id;\n var lgd_elems = document.querySelectorAll('g[layer_name=\"' + old_name + '\"]');\n lgd_elems.forEach(function (lgd_elem) {\n lgd_elem.setAttribute('layer_name', new_name);\n lgd_elem.classList.remove('lgdf_' + old_id);\n lgd_elem.classList.add('lgdf_' + new_id);\n });\n if (Object.getOwnPropertyNames(data_manager.result_data).indexOf(old_name) > -1) {\n data_manager.result_data[new_name] = [].concat(data_manager.result_data[old_name]);\n delete data_manager.result_data[old_name];\n }\n if (Object.getOwnPropertyNames(data_manager.user_data).indexOf(old_name) > -1) {\n data_manager.user_data[new_name] = [].concat(data_manager.user_data[old_name]);\n delete data_manager.user_data[old_name];\n }\n if (data_manager.current_layers[new_name].targeted) {\n var name_section1 = document.getElementById('section1').querySelector('#input_geom');\n name_section1.innerHTML = name_section1.innerHTML.replace(old_name, new_name);\n if (window.fields_handler) {\n window.fields_handler.unfill();\n window.fields_handler.fill(new_name);\n }\n }\n if (_app.current_functionnality && _app.current_functionnality.name === 'smooth') {\n var mask_layers = document.querySelectorAll('select#stewart_mask > option');\n for (var i = 0; i < mask_layers.length; i++) {\n if (mask_layers[i].value === old_name) {\n mask_layers[i].value = new_name;\n mask_layers[i].innerHTML = new_name;\n }\n }\n }\n var other_layers = Object.getOwnPropertyNames(data_manager.current_layers);\n for (var _i2 = 0; _i2 < other_layers.length; _i2++) {\n if (data_manager.current_layers[other_layers[_i2]].ref_layer_name === old_name) {\n data_manager.current_layers[other_layers[_i2]].ref_layer_name = new_name;\n }\n }\n var select_export_lyr = document.getElementById('section5').querySelectorAll('#layer_to_export > option');\n for (var _i3 = 0; _i3 < select_export_lyr.length; _i3++) {\n if (select_export_lyr[_i3].value === old_name) {\n select_export_lyr[_i3].value = new_name;\n select_export_lyr[_i3].innerHTML = new_name;\n }\n }\n _app.layer_to_id.set(new_name, new_id);\n _app.id_to_layer.set(new_id, new_name);\n _app.layer_to_id.delete(old_name);\n _app.id_to_layer.delete(old_id);\n (0, _interface.binds_layers_buttons)(new_name);\n\n if (restart_info) {\n (0, _interface.displayInfoOnMove)();\n }\n}\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! bluebird */ \"./node_modules/bluebird/js/browser/bluebird.js\"), __webpack_require__(/*! ./../node_modules/webpack/buildin/global.js */ \"./node_modules/webpack/buildin/global.js\")))\n\n//# sourceURL=webpack:///./js/layers_style_popup.js?");
+eval("/* WEBPACK VAR INJECTION */(function(Promise, global) {\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.createDropShadow = undefined;\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nexports.handle_click_layer = handle_click_layer;\nexports.make_style_box_indiv_label = make_style_box_indiv_label;\n\nvar _colors_helpers = __webpack_require__(/*! ./colors_helpers */ \"./js/colors_helpers.js\");\n\nvar _dialogs = __webpack_require__(/*! ./dialogs */ \"./js/dialogs.js\");\n\nvar _discretization_panel = __webpack_require__(/*! ./classification/discretization_panel */ \"./js/classification/discretization_panel.js\");\n\nvar _categorical_panel = __webpack_require__(/*! ./classification/categorical_panel */ \"./js/classification/categorical_panel.js\");\n\nvar _discrtiz_links_discont = __webpack_require__(/*! ./classification/discrtiz_links_discont */ \"./js/classification/discrtiz_links_discont.js\");\n\nvar _fonts = __webpack_require__(/*! ./fonts */ \"./js/fonts.js\");\n\nvar _function = __webpack_require__(/*! ./function */ \"./js/function.js\");\n\nvar _helpers = __webpack_require__(/*! ./helpers */ \"./js/helpers.js\");\n\nvar _helpers_calc = __webpack_require__(/*! ./helpers_calc */ \"./js/helpers_calc.js\");\n\nvar _interface = __webpack_require__(/*! ./interface */ \"./js/interface.js\");\n\nvar _legend = __webpack_require__(/*! ./legend */ \"./js/legend.js\");\n\nvar _map_ctrl = __webpack_require__(/*! ./map_ctrl */ \"./js/map_ctrl.js\");\n\nvar _tables = __webpack_require__(/*! ./tables */ \"./js/tables.js\");\n\n/**\n* Function to dispatch the click on the \"open style box\" icon\n* to the actual appropriate function according to the type of the layer.\n*\n* @param {String} layer_name - The name of the layer.\n* @return {void} - Nothing is returned but the \"style box\" should open.\n*\n*/\nfunction handle_click_layer(layer_name) {\n if (data_manager.current_layers[layer_name].graticule) {\n createStyleBoxGraticule();\n } else if (data_manager.current_layers[layer_name].type === 'Line') {\n createStyleBox_Line(layer_name);\n } else if (data_manager.current_layers[layer_name].renderer && data_manager.current_layers[layer_name].renderer.indexOf('PropSymbol') > -1) {\n createStyleBox_ProbSymbol(layer_name);\n } else if (data_manager.current_layers[layer_name].renderer && data_manager.current_layers[layer_name].renderer === 'Label') {\n createStyleBoxLabel(layer_name);\n } else if (data_manager.current_layers[layer_name].renderer && data_manager.current_layers[layer_name].renderer === 'TypoSymbols') {\n createStyleBoxTypoSymbols(layer_name);\n } else if (data_manager.current_layers[layer_name].renderer && data_manager.current_layers[layer_name].renderer === 'TwoStocksWaffle') {\n createStyleBoxWaffle(layer_name);\n } else if (data_manager.current_layers[layer_name].renderer === 'Stewart') {\n createStyleBoxStewart(layer_name);\n } else {\n createStyleBox(layer_name);\n }\n}\n\nfunction make_single_color_menu(layer, fill_prev) {\n var symbol = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'path';\n\n var fill_color_section = d3.select('#fill_color_section'),\n g_lyr_name = '#' + _app.layer_to_id.get(layer),\n last_color = fill_prev && fill_prev.single ? fill_prev.single : '#FFF';\n var block = fill_color_section.insert('p');\n block.insert('span').html(_tr('app_page.layer_style_popup.fill_color'));\n block.insert('input').attr('type', 'color').style('float', 'right').property('value', last_color).on('change', function () {\n map.select(g_lyr_name).selectAll(symbol).transition().style('fill', this.value);\n data_manager.current_layers[layer].fill_color = { single: this.value };\n });\n map.select(g_lyr_name).selectAll(symbol).transition().style('fill', last_color);\n data_manager.current_layers[layer].fill_color = { single: last_color };\n}\n\nfunction make_random_color(layer) {\n var symbol = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'path';\n\n var block = d3.select('#fill_color_section');\n block.insert('span').attr('id', 'random_color_btn').styles({ cursor: 'pointer', 'text-align': 'center' }).html(_tr('app_page.layer_style_popup.toggle_colors')).on('click', function () {\n map.select('#' + _app.layer_to_id.get(layer)).selectAll(symbol).transition().style('fill', function () {\n return (0, _colors_helpers.randomColor)();\n }); // Colors.names[Colors.random()]);\n data_manager.current_layers[layer].fill_color = { random: true };\n });\n}\n\nfunction fill_categorical(layer, field_name, symbol, color_cat_map) {\n map.select('#' + _app.layer_to_id.get(layer)).selectAll(symbol).transition().style('fill', function (d) {\n return color_cat_map.get(d.properties[field_name]);\n });\n}\n\nfunction make_categorical_color_menu(fields, layer, fill_prev) {\n var symbol = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'path';\n\n var fill_color_section = d3.select('#fill_color_section').append('p');\n fill_color_section.insert('span').html(_tr('app_page.layer_style_popup.categorical_field'));\n var field_selec = fill_color_section.insert('select');\n fields.forEach(function (field) {\n if (field !== 'id') field_selec.append('option').text(field).attr('value', field);\n });\n if (fill_prev.categorical && fill_prev.categorical instanceof Array) {\n (0, _helpers.setSelected)(field_selec.node(), fill_prev.categorical[0]);\n }\n field_selec.on('change', function () {\n var field_name = this.value,\n data_layer = data_manager.current_layers[layer].is_result ? data_manager.result_data[layer] : data_manager.user_data[layer],\n values = data_layer.map(function (i) {\n return i[field_name];\n }),\n cats = new Set(values),\n txt = [cats.size, ' cat.'].join('');\n d3.select('#nb_cat_txt').html(txt);\n var color_cat_map = new Map();\n Array.from(cats.keys()).forEach(function (val) {\n color_cat_map.set(val, _colors_helpers.Colors.names[_colors_helpers.Colors.random()]);\n });\n data_manager.current_layers[layer].fill_color = { categorical: [field_name, color_cat_map] };\n fill_categorical(layer, field_name, symbol, color_cat_map);\n });\n\n if ((!fill_prev || !fill_prev.categorical) && field_selec.node().options.length > 0) {\n (0, _helpers.setSelected)(field_selec.node(), field_selec.node().options[0].value);\n }\n fill_color_section.append('span').attr('id', 'nb_cat_txt').html('');\n}\n\n/**\n* Function to create the input section allowing to change the name of a layer.\n* (Used by all the createStyleBox_xxx functions)\n*\n* @param {Object} parent - A d3 selection corresponding to the parent box.\n* @param {String} layer_name - The current name of layer edited in the style box.\n* @return {Object} - The d3 selection corresponding to the input element created.\n*/\nfunction make_change_layer_name_section(parent, layer_name) {\n var section = parent.insert('p').attr('class', 'inp_bottom');\n section.append('span').html(_tr('app_page.layer_style_popup.layer_name'));\n var inpt = section.append('input').attrs({ id: 'lyr_change_name', type: 'text' }).styles({ width: '200px', float: 'left' });\n inpt.node().value = layer_name;\n return inpt;\n}\n\nfunction createStyleBoxTypoSymbols(layer_name) {\n function get_prev_settings() {\n var features = selection._groups[0];\n for (var i = 0; i < features.length; i++) {\n prev_settings.push({\n display: features[i].style.display ? features[i].style.display : null,\n size: features[i].getAttribute('width'),\n position: [features[i].getAttribute('x'), features[i].getAttribute('y')]\n });\n }\n prev_settings_defaults.size = data_manager.current_layers[layer_name].default_size;\n }\n\n var restore_prev_settings = function restore_prev_settings() {\n var features = selection._groups[0];\n for (var i = 0; i < features.length; i++) {\n features[i].setAttribute('width', prev_settings[i].size);\n features[i].setAttribute('height', prev_settings[i].size);\n features[i].setAttribute('x', prev_settings[i].position[0]);\n features[i].setAttribute('y', prev_settings[i].position[1]);\n features[i].style.display = prev_settings[i].display;\n }\n data_manager.current_layers[layer_name].default_size = prev_settings_defaults.size;\n };\n\n (0, _dialogs.check_remove_existing_box)('.styleBox');\n\n var selection = map.select('#' + _app.layer_to_id.get(layer_name)).selectAll('image'),\n ref_layer_name = data_manager.current_layers[layer_name].ref_layer_name,\n symbols_map = data_manager.current_layers[layer_name].symbols_map,\n rendered_field = data_manager.current_layers[layer_name].rendered_field;\n\n var prev_settings = [],\n prev_settings_defaults = {};\n // const zs = d3.zoomTransform(svg_map).k;\n\n get_prev_settings();\n\n (0, _dialogs.make_confirm_dialog2)('styleBox', layer_name, { top: true, widthFitContent: true, draggable: true }).then(function (confirmed) {\n if (!confirmed) {\n restore_prev_settings();\n } else if (new_layer_name !== layer_name) {\n change_layer_name(layer_name, (0, _function.check_layer_name)(new_layer_name.trim()));\n }\n });\n\n var container = document.querySelector('.twbs > .styleBox');\n var popup = d3.select(container).select('.modal-content').style('width', '300px').select('.modal-body');\n\n popup.append('p').styles({ 'text-align': 'center', color: 'grey' }).html([_tr('app_page.layer_style_popup.rendered_field', { field: rendered_field }), _tr('app_page.layer_style_popup.reference_layer', { layer: ref_layer_name })].join(''));\n\n var new_layer_name = layer_name;\n var new_name_section = make_change_layer_name_section(popup, layer_name);\n new_name_section.on('change', function () {\n new_layer_name = this.value;\n });\n popup.append('p').style('text-align', 'center').insert('button').attrs({ id: 'reset_symb_loc', class: 'button_st4' }).text(_tr('app_page.layer_style_popup.reset_symbols_location')).on('click', function () {\n selection.transition().attrs(function (d) {\n var centroid = path.centroid(d.geometry),\n size_symbol = symbols_map.get(d.properties.symbol_field)[1] / 2;\n return { x: centroid[0] - size_symbol, y: centroid[1] - size_symbol };\n });\n });\n\n popup.append('p').style('text-align', 'center').insert('button').attrs({ id: 'reset_symb_display', class: 'button_st4' }).text(_tr('app_page.layer_style_popup.redraw_symbols')).on('click', function () {\n selection.style('display', undefined);\n });\n\n var size_section = popup.append('p');\n size_section.append('span').html(_tr('app_page.layer_style_popup.symbols_size'));\n size_section.append('input').attrs({ min: 0, max: 200, step: 'any', type: 'number' }).styles({ width: '60px', margin: 'auto' }).property('value', 32).on('change', function () {\n var value = this.value;\n selection.transition().attrs(function () {\n var current_size = this.height.baseVal.value;\n return {\n width: value + 'px',\n height: value + 'px',\n x: this.x.baseVal.value + current_size / 2 - value / 2,\n y: this.y.baseVal.value + current_size / 2 - value / 2\n };\n });\n });\n}\n// popup.append(\"p\").style(\"text-align\", \"center\")\n// .insert(\"button\")\n// .attr(\"id\",\"modif_symb\")\n// .attr(\"class\", \"button_st4\")\n// .text(_tr(\"app_page.layer_style_popup.modify_symbols\"))\n// .on(\"click\", function(){\n// display_box_symbol_typo(ref_layer_name, rendered_field)().then(function(confirmed){\n// if(confirmed){\n// rendering_params = {\n// nb_cat: confirmed[0],\n// symbols_map: confirmed[1],\n// field: rendered_field\n// };\n// map.select(\"#\" + layer_name)\n// .selectAll(\"image\")\n// .attr(\"x\",\n// d => d.coords[0] - rendering_params.symbols_map.get(d.Symbol_field)[1] / 2)\n// .attr(\"y\",\n// d => d.coords[1] - rendering_params.symbols_map.get(d.Symbol_field)[1] / 2)\n// .attr(\"width\",\n// d => rendering_params.symbols_map.get(d.Symbol_field)[1] + \"px\")\n// .attr(\"height\",\n// d => rendering_params.symbols_map.get(d.Symbol_field)[1] + \"px\")\n// .attr(\"xlink:href\",\n// (d, i) => rendering_params.symbols_map.get(d.Symbol_field)[0]);\n// }\n// });\n// });\n\nfunction createStyleBoxLabel(layer_name) {\n function get_prev_settings() {\n var features = selection._groups[0];\n prev_settings = [];\n for (var i = 0; i < features.length; i++) {\n prev_settings.push({\n color: features[i].style.fill,\n size: features[i].style.fontSize,\n display: features[i].style.display ? features[i].style.display : null,\n position: [features[i].getAttribute('x'), features[i].getAttribute('y')],\n font: features[i].style.fontFamily\n });\n }\n prev_settings_defaults = {\n color: data_manager.current_layers[layer_name].fill_color,\n size: data_manager.current_layers[layer_name].default_size,\n font: data_manager.current_layers[layer_name].default_font\n };\n }\n\n function restore_prev_settings() {\n var features = selection._groups[0];\n for (var i = 0; i < features.length; i++) {\n features[i].style.fill = prev_settings[i].color;\n features[i].style.fontSize = prev_settings[i].size;\n features[i].style.display = prev_settings[i].display;\n features[i].setAttribute('x', prev_settings[i].position[0]);\n features[i].setAttribute('y', prev_settings[i].position[1]);\n features[i].style.fontFamily = prev_settings[i].font;\n }\n\n data_manager.current_layers[layer_name].fill_color = prev_settings_defaults.color;\n data_manager.current_layers[layer_name].default_size = prev_settings_defaults.size;\n data_manager.current_layers[layer_name].default_font = prev_settings_defaults.font;\n }\n\n (0, _dialogs.check_remove_existing_box)('.styleBox');\n\n var selection = map.select('#' + _app.layer_to_id.get(layer_name)).selectAll('text'),\n ref_layer_name = data_manager.current_layers[layer_name].ref_layer_name;\n // const rendering_params = {};\n var prev_settings_defaults = {};\n var prev_settings = [];\n\n get_prev_settings();\n\n (0, _dialogs.make_confirm_dialog2)('styleBox', layer_name, { top: true, widthFitContent: true, draggable: true }).then(function (confirmed) {\n if (!confirmed) {\n restore_prev_settings();\n } else {\n // Change the layer name if requested :\n if (new_layer_name !== layer_name) {\n change_layer_name(layer_name, (0, _function.check_layer_name)(new_layer_name.trim()));\n }\n }\n });\n\n var container = document.querySelector('.twbs > .styleBox');\n var popup = d3.select(container).select('.modal-content').style('width', '300px').select('.modal-body');\n\n popup.append('p').styles({ 'text-align': 'center', color: 'grey' }).html([_tr('app_page.layer_style_popup.rendered_field', { field: data_manager.current_layers[layer_name].rendered_field }), _tr('app_page.layer_style_popup.reference_layer', { layer: ref_layer_name })].join(''));\n\n var new_layer_name = layer_name;\n var new_name_section = make_change_layer_name_section(popup, layer_name);\n new_name_section.on('change', function () {\n new_layer_name = this.value;\n });\n popup.append('p').style('text-align', 'center').insert('button').attrs({ id: 'reset_labels_loc', class: 'button_st4' }).text(_tr('app_page.layer_style_popup.reset_labels_location')).on('click', function () {\n selection.transition().attrs(function (d) {\n var coords = path.centroid(d.geometry);\n return { x: coords[0], y: coords[1] };\n });\n });\n\n popup.append('p').style('text-align', 'center').insert('button').attrs({ id: 'reset_labels_display', class: 'button_st4' }).text(_tr('app_page.layer_style_popup.redraw_labels')).on('click', function () {\n selection.style('display', undefined);\n });\n\n popup.insert('p').styles({ 'text-align': 'center', 'font-size': '9px' }).html(_tr('app_page.layer_style_popup.overrride_warning'));\n var label_sizes = popup.append('p').attr('class', 'line_elem');\n label_sizes.append('span').html(_tr('app_page.layer_style_popup.labels_default_size'));\n label_sizes.insert('span').style('float', 'right').html(' px');\n label_sizes.insert('input').attr('type', 'number').styles({ float: 'right', width: '70px' }).property('value', +data_manager.current_layers[layer_name].default_size.replace('px', '')).on('change', function () {\n var size = this.value + 'px';\n data_manager.current_layers[layer_name].default_size = size;\n selection.style('font-size', size);\n });\n\n var default_color = popup.insert('p').attr('class', 'line_elem');\n default_color.append('span').html(_tr('app_page.layer_style_popup.labels_default_color'));\n default_color.insert('input').attr('type', 'color').style('float', 'right').property('value', data_manager.current_layers[layer_name].fill_color).on('change', function () {\n data_manager.current_layers[layer_name].fill_color = this.value;\n selection.transition().style('fill', this.value);\n });\n\n var font_section = popup.insert('p').attr('class', 'line_elem');\n font_section.append('span').html(_tr('app_page.layer_style_popup.labels_default_font'));\n var choice_font = font_section.insert('select').style('float', 'right').on('change', function () {\n data_manager.current_layers[layer_name].default_font = this.value;\n selection.transition().style('font-family', this.value);\n });\n\n _fonts.available_fonts.forEach(function (name) {\n choice_font.append('option').attr('value', name[1]).text(name[0]);\n });\n choice_font.node().value = data_manager.current_layers[layer_name].default_font;\n}\n\nfunction createStyleBoxGraticule(layer_name) {\n (0, _dialogs.check_remove_existing_box)('.styleBox');\n var current_params = (0, _helpers.cloneObj)(data_manager.current_layers.Graticule);\n var selection = map.select('#L_Graticule > path');\n var selection_strokeW = map.select('#L_Graticule');\n\n (0, _dialogs.make_confirm_dialog2)('styleBox', layer_name, { top: true, widthFitContent: true, draggable: true }).then(function (confirmed) {\n if (confirmed) {\n return null;\n } else {\n return null;\n }\n });\n\n var container = document.querySelector('.twbs > .styleBox');\n var popup = d3.select(container).select('.modal-content').style('width', '300px').select('.modal-body');\n // let new_layer_name = layer_name;\n // const new_name_section = make_change_layer_name_section(popup, layer_name);\n // new_name_section.on('change', function() {\n // new_layer_name = this.value;\n // });\n\n var color_choice = popup.append('p').attr('class', 'line_elem');\n color_choice.append('span').html(_tr('app_page.layer_style_popup.color'));\n color_choice.append('input').attr('type', 'color').style('float', 'right').property('value', current_params.fill_color.single).on('change', function () {\n selection.style('stroke', this.value);\n data_manager.current_layers.Graticule.fill_color.single = this.value;\n });\n\n var opacity_choice = popup.append('p').attr('class', 'line_elem');\n opacity_choice.append('span').html(_tr('app_page.layer_style_popup.opacity'));\n opacity_choice.append('input').attrs({ type: 'range', min: 0, max: 1, step: 0.1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right' }).property('value', current_params.opacity).on('change', function () {\n selection.style('stroke-opacity', this.value);\n data_manager.current_layers.Graticule.opacity = +this.value;\n popup.select('#graticule_opacity_txt').html(+this.value * 100 + '%');\n });\n opacity_choice.append('span').attr('id', 'graticule_opacity_txt').style('float', 'right').html(current_params.opacity * 100 + '%');\n\n var stroke_width_choice = popup.append('p').attr('class', 'line_elem');\n stroke_width_choice.append('span').html(_tr('app_page.layer_style_popup.width'));\n stroke_width_choice.append('input').attr('type', 'number').styles({ width: '60px', float: 'right' }).property('value', current_params['stroke-width-const']).on('change', function () {\n selection_strokeW.style('stroke-width', this.value);\n data_manager.current_layers.Graticule['stroke-width-const'] = +this.value;\n });\n\n var steps_choice = popup.append('p').attr('class', 'line_elem');\n steps_choice.append('span').html(_tr('app_page.layer_style_popup.graticule_steps'));\n steps_choice.append('input').attrs({ id: 'graticule_range_steps', type: 'range', min: 0, max: 100, step: 1 }).styles({ 'vertical-align': 'middle', width: '58px', display: 'inline', float: 'right' }).property('value', current_params.step).on('change', function () {\n var next_layer = selection_strokeW.node().nextSibling;\n var step_val = +this.value;\n var dasharray_val = +document.getElementById('graticule_dasharray_txt').value;\n data_manager.current_layers.Graticule.step = step_val;\n var graticule = d3.geoGraticule().step([step_val, step_val]);\n if (data_manager.current_layers.Graticule.extent) {\n graticule = graticule.extent(data_manager.current_layers.Graticule.extent);\n }\n map.select('#L_Graticule').remove();\n map.append('g').attrs({ id: 'L_Graticule', class: 'layer' }).append('path').datum(graticule).attrs({ class: 'graticule', d: path, 'clip-path': 'url(#clip)' }).styles({ fill: 'none', stroke: data_manager.current_layers.Graticule.fill_color.single, 'stroke-dasharray': dasharray_val });\n (0, _map_ctrl.zoom_without_redraw)();\n selection = map.select('#L_Graticule').selectAll('path');\n selection_strokeW = map.select('#L_Graticule');\n svg_map.insertBefore(selection_strokeW.node(), next_layer);\n popup.select('#graticule_step_txt').property('value', step_val);\n });\n steps_choice.append('input').attrs({ type: 'number', min: 0, max: 100, step: 'any', class: 'without_spinner', id: 'graticule_step_txt' }).styles({ width: '30px', 'margin-left': '10px', float: 'right' }).property('value', current_params.step).on('change', function () {\n var grat_range = document.getElementById('graticule_range_steps');\n grat_range.value = +this.value;\n grat_range.dispatchEvent(new MouseEvent('change'));\n });\n\n var dasharray_choice = popup.append('p').attr('class', 'line_elem');\n dasharray_choice.append('span').html(_tr('app_page.layer_style_popup.graticule_dasharray'));\n dasharray_choice.append('input').attrs({ type: 'range', min: 0, max: 50, step: 0.1, id: 'graticule_range_dasharray' }).styles({ 'vertical-align': 'middle', width: '58px', display: 'inline', float: 'right' }).property('value', current_params.dasharray).on('change', function () {\n selection.style('stroke-dasharray', this.value);\n data_manager.current_layers.Graticule.dasharray = +this.value;\n popup.select('#graticule_dasharray_txt').property('value', this.value);\n });\n dasharray_choice.append('input').attrs({ type: 'number', min: 0, max: 100, step: 'any', class: 'without_spinner', id: 'graticule_dasharray_txt' }).styles({ width: '30px', 'margin-left': '10px', float: 'right' }).property('value', current_params.dasharray).on('change', function () {\n var grat_range = document.getElementById('graticule_range_dasharray');\n grat_range.value = +this.value;\n grat_range.dispatchEvent(new MouseEvent('change'));\n });\n\n // Only append this section if there is currently a target layer :\n if (Object.keys(data_manager.user_data).length) {\n var clip_extent_section = popup.append('p').attr('class', 'line_elem');\n clip_extent_section.append('input').attrs({ type: 'checkbox', id: 'clip_graticule' }).property('checked', current_params.extent ? true : null).on('change', function () {\n var next_layer = selection_strokeW.node().nextSibling,\n step_val = +document.getElementById('graticule_step_txt').value,\n dasharray_val = +document.getElementById('graticule_dasharray_txt').value;\n var graticule = d3.geoGraticule().step([step_val, step_val]);\n map.select('#L_Graticule').remove();\n if (this.checked) {\n var bbox_layer = _target_layer_file.bbox;\n var extent_grat = [[Math.round((bbox_layer[0] - 12) / 10) * 10, Math.round((bbox_layer[1] - 12) / 10) * 10], [Math.round((bbox_layer[2] + 12) / 10) * 10, Math.round((bbox_layer[3] + 12) / 10) * 10]];\n\n if (extent_grat[0] < -180) extent_grat[0] = -180;\n if (extent_grat[1] < -90) extent_grat[1] = -90;\n if (extent_grat[2] > 180) extent_grat[2] = 180;\n if (extent_grat[3] > 90) extent_grat[3] = 90;\n graticule = graticule.extent(extent_grat);\n data_manager.current_layers.Graticule.extent = extent_grat;\n } else {\n data_manager.current_layers.Graticule.extent = undefined;\n }\n map.append('g').attrs({ id: 'L_Graticule', class: 'layer' }).append('path').datum(graticule).attrs({ class: 'graticule', d: path, 'clip-path': 'url(#clip)' }).styles({ fill: 'none', stroke: data_manager.current_layers.Graticule.fill_color.single, 'stroke-dasharray': dasharray_val });\n (0, _map_ctrl.zoom_without_redraw)();\n selection = map.select('#L_Graticule').selectAll('path');\n selection_strokeW = map.select('#L_Graticule');\n svg_map.insertBefore(selection_strokeW.node(), next_layer);\n });\n clip_extent_section.append('label').attrs({ for: 'clip_graticule' }).html(_tr('app_page.layer_style_popup.graticule_clip'));\n }\n\n // Allow to create label for each line of the graticule\n make_generate_labels_graticule_section(popup);\n}\n\n/**\n* Function triggered to redraw the legend after changing some properties on a layer.\n*\n* @param {String} type_legend - The type of the legend to redraw.\n* @param {String} layer_name - The name of the layer concerned.\n* @param {String} field - The name of the rendered field.\n* @return {void}\n*\n*/\nfunction redraw_legend(type_legend, layer_name, field) {\n var _ref = type_legend === 'choro' ? [['#legend_root.lgdf_', _app.layer_to_id.get(layer_name)].join(''), _legend.createLegend_choro] : type_legend === 'choro_horiz' ? [['#legend_root_horiz.lgdf_', _app.layer_to_id.get(layer_name)].join(''), _legend.createLegend_choro_horizontal] : type_legend === 'line_class' ? [['#legend_root_lines_class.lgdf_', _app.layer_to_id.get(layer_name)].join(''), _legend.createLegend_discont_links] : type_legend === 'line_symbol' ? [['#legend_root_lines_symbol.lgdf_', _app.layer_to_id.get(layer_name)].join(''), _legend.createLegend_line_symbol] : type_legend === 'waffle' ? [['#legend_root_waffle.lgdf_', _app.layer_to_id.get(layer_name)].join(''), _legend.createLegend_waffle] : type_legend === 'layout' ? [['#legend_root_layout.lgdf_', _app.layer_to_id.get(layer_name)].join(''), _legend.createLegend_layout] : undefined,\n _ref2 = _slicedToArray(_ref, 2),\n selector = _ref2[0],\n legend_func = _ref2[1];\n\n var lgd = document.querySelector(selector);\n if (lgd) {\n var transform_param = lgd.getAttribute('transform'),\n lgd_title = lgd.querySelector('#legendtitle').innerHTML,\n lgd_subtitle = lgd.querySelector('#legendsubtitle').innerHTML,\n rounding_precision = lgd.getAttribute('rounding_precision'),\n note = lgd.querySelector('#legend_bottom_note').innerHTML,\n boxgap = lgd.getAttribute('boxgap');\n var rect_fill_value = lgd.getAttribute('visible_rect') === 'true' ? {\n color: lgd.querySelector('#under_rect').style.fill,\n opacity: lgd.querySelector('#under_rect').style.fillOpacity\n } : undefined;\n if (type_legend.indexOf('choro') > -1) {\n var no_data_txt = lgd.querySelector('#no_data_txt');\n no_data_txt = no_data_txt != null ? no_data_txt.textContent : null;\n\n lgd.remove();\n legend_func(layer_name, field, lgd_title, lgd_subtitle, boxgap, rect_fill_value, rounding_precision, no_data_txt, note);\n } else if (type_legend === 'waffle') {\n lgd.remove();\n legend_func(layer_name, field, lgd_title, lgd_subtitle, rect_fill_value, note);\n } else if (type_legend === 'layout') {\n lgd.remove();\n var text_value = lgd.querySelector('g.lg.legend_0 > text').innerHTML;\n legend_func(layer_name, data_manager.current_layers[layer_name].type, lgd_title, lgd_subtitle, rect_fill_value, text_value, note);\n } else {\n lgd.remove();\n legend_func(layer_name, data_manager.current_layers[layer_name].rendered_field, lgd_title, lgd_subtitle, rect_fill_value, rounding_precision, note);\n }\n lgd = document.querySelector(selector);\n if (transform_param) {\n lgd.setAttribute('transform', transform_param);\n }\n }\n}\n\nfunction createStyleBox_Line(layer_name) {\n (0, _dialogs.check_remove_existing_box)('.styleBox');\n var renderer = data_manager.current_layers[layer_name].renderer,\n g_lyr_name = '#' + _app.layer_to_id.get(layer_name),\n selection = map.select(g_lyr_name).selectAll('path'),\n opacity = selection.style('fill-opacity');\n\n var fill_prev = (0, _helpers.cloneObj)(data_manager.current_layers[layer_name].fill_color);\n var prev_random_colors = void 0;\n var prev_col_breaks = void 0;\n var rendering_params = void 0;\n\n if (data_manager.current_layers[layer_name].colors_breaks && data_manager.current_layers[layer_name].colors_breaks instanceof Array) {\n prev_col_breaks = data_manager.current_layers[layer_name].colors_breaks.concat([]);\n } else if (fill_prev.random) {\n prev_random_colors = [];\n selection.each(function () {\n prev_random_colors.push(this.style.stroke);\n });\n }\n\n var border_opacity = selection.style('stroke-opacity'),\n stroke_width = +data_manager.current_layers[layer_name]['stroke-width-const'];\n var stroke_prev = selection.style('stroke');\n var prev_min_display = void 0,\n prev_size = void 0,\n prev_breaks = void 0;\n\n if (stroke_prev.startsWith('rgb')) {\n stroke_prev = (0, _colors_helpers.rgb2hex)(stroke_prev);\n }\n\n var table = [];\n Array.prototype.forEach.call(svg_map.querySelector(g_lyr_name).querySelectorAll('path'), function (d) {\n table.push(d.__data__.properties);\n });\n\n var redraw_prop_val = function redraw_prop_val(prop_values) {\n var selec = selection._groups[0];\n for (var i = 0, len = prop_values.length; i < len; i++) {\n selec[i].style.strokeWidth = prop_values[i];\n }\n };\n\n (0, _dialogs.make_confirm_dialog2)('styleBox', layer_name, { top: true, widthFitContent: true, draggable: true }).then(function (confirmed) {\n if (confirmed) {\n if (renderer !== undefined && rendering_params !== undefined && renderer !== 'Categorical' && renderer !== 'PropSymbolsTypo' && renderer !== 'LinksProportional') {\n data_manager.current_layers[layer_name].fill_color = { class: rendering_params.colorsByFeature };\n var colors_breaks = [];\n for (var i = rendering_params.breaks.length - 1; i > 0; --i) {\n colors_breaks.push([[rendering_params.breaks[i - 1], ' - ', rendering_params.breaks[i]].join(''), rendering_params.breaks[i - 1]]);\n }\n data_manager.current_layers[layer_name].colors_breaks = colors_breaks;\n data_manager.current_layers[layer_name].rendered_field = rendering_params.field;\n data_manager.current_layers[layer_name].options_disc = {\n schema: rendering_params.schema,\n colors: rendering_params.colors,\n no_data: rendering_params.no_data,\n type: rendering_params.type,\n breaks: rendering_params.breaks,\n extra_options: rendering_params.extra_options\n };\n if (document.querySelector('.legend.legend_feature.lgdf_' + _app.layer_to_id.get(layer_name)).id === 'legend_root') {\n redraw_legend('choro', layer_name, rendering_params.field);\n } else {\n redraw_legend('choro_horiz', layer_name, rendering_params.field);\n }\n } else if ((renderer === 'Categorical' || renderer === 'PropSymbolsTypo') && rendering_params !== undefined) {\n data_manager.current_layers[layer_name].color_map = rendering_params.color_map;\n data_manager.current_layers[layer_name].fill_color = {\n class: [].concat(rendering_params.colorsByFeature)\n };\n redraw_legend('choro', layer_name, rendering_params.field);\n } else if (renderer === 'DiscLayer') {\n selection.each(function (d) {\n d.properties.prop_val = this.style.strokeWidth; // eslint-disable-line no-param-reassign\n });\n // Also change the legend if there is one displayed :\n redraw_legend('line_class', layer_name);\n } else if (renderer === 'LinksGraduated') {\n selection.each(function (d, i) {\n data_manager.current_layers[layer_name].linksbyId[i][2] = this.style.strokeWidth;\n });\n // Also change the legend if there is one displayed :\n redraw_legend('line_class', layer_name);\n } else if (data_manager.current_layers[layer_name].layout_legend_displayed) {\n redraw_legend('layout', layer_name);\n }\n\n if (renderer && (renderer.startsWith('PropSymbols') || renderer === 'LinksProportional')) {\n selection.each(function (d) {\n d.properties.color = this.style.stroke; // eslint-disable-line no-param-reassign\n });\n redraw_legend('line_symbol', layer_name);\n }\n\n // Change the layer name if requested :\n if (new_layer_name !== layer_name) {\n change_layer_name(layer_name, (0, _function.check_layer_name)(new_layer_name.trim()));\n }\n (0, _map_ctrl.zoom_without_redraw)();\n } else {\n // Reset to original values the rendering parameters if \"no\" is clicked\n selection.style('fill-opacity', opacity).style('stroke-opacity', border_opacity);\n var zoom_scale = +d3.zoomTransform(map.node()).k;\n map.select(g_lyr_name).style('stroke-width', stroke_width / zoom_scale + 'px');\n data_manager.current_layers[layer_name]['stroke-width-const'] = stroke_width;\n var fill_meth = Object.getOwnPropertyNames(fill_prev)[0];\n\n if (data_manager.current_layers[layer_name].renderer === 'LinksGraduated' && prev_min_display !== undefined) {\n data_manager.current_layers[layer_name].min_display = prev_min_display;\n data_manager.current_layers[layer_name].breaks = prev_breaks;\n selection.style('fill-opacity', 0).style('stroke', fill_prev.single).style('display', function (d) {\n return +d.properties[data_manager.current_layers[layer_name].rendered_field] > prev_min_display ? null : 'none';\n }).style('stroke-opacity', border_opacity).style('stroke-width', function (d, i) {\n return data_manager.current_layers[layer_name].linksbyId[i][2];\n });\n } else if (data_manager.current_layers[layer_name].renderer === 'DiscLayer' && prev_min_display !== undefined) {\n data_manager.current_layers[layer_name].min_display = prev_min_display;\n data_manager.current_layers[layer_name].size = prev_size;\n data_manager.current_layers[layer_name].breaks = prev_breaks;\n var lim = prev_min_display !== 0 ? prev_min_display * data_manager.current_layers[layer_name].n_features : -1;\n selection.style('fill-opacity', 0).style('stroke', fill_prev.single).style('stroke-opacity', border_opacity).style('display', function (d, i) {\n return +i <= lim ? null : 'none';\n }).style('stroke-width', function (d) {\n return d.properties.prop_val;\n });\n } else {\n if (fill_meth === 'single') {\n selection.style('stroke', fill_prev.single).style('stroke-opacity', border_opacity);\n } else if (fill_meth === 'random') {\n selection.style('stroke-opacity', border_opacity).style('stroke', function (d, i) {\n return prev_random_colors[i] || _colors_helpers.Colors.names[_colors_helpers.Colors.random()];\n });\n } else if (fill_meth === 'class' && renderer === 'LinksGraduated') {\n selection.style('stroke-opacity', function (d, i) {\n return data_manager.current_layers[layer_name].linksbyId[i][0];\n }).style('stroke', stroke_prev);\n }\n }\n if (data_manager.current_layers[layer_name].colors_breaks) {\n data_manager.current_layers[layer_name].colors_breaks = prev_col_breaks;\n }\n data_manager.current_layers[layer_name].fill_color = fill_prev;\n (0, _map_ctrl.zoom_without_redraw)();\n }\n });\n\n var container = document.querySelector('.twbs > .styleBox');\n var popup = d3.select(container).select('.modal-content').style('width', '300px').select('.modal-body');\n\n var new_layer_name = layer_name;\n var new_name_section = make_change_layer_name_section(popup, layer_name);\n new_name_section.on('change', function () {\n new_layer_name = this.value;\n });\n\n if (renderer === 'Categorical' || renderer === 'PropSymbolsTypo') {\n var color_field = renderer === 'Categorical' ? data_manager.current_layers[layer_name].rendered_field : data_manager.current_layers[layer_name].rendered_field2;\n\n popup.insert('p').styles({ margin: 'auto', 'text-align': 'center' }).append('button').attr('class', 'button_disc').styles({ 'font-size': '0.8em', 'text-align': 'center' }).html(_tr('app_page.layer_style_popup.choose_colors')).on('click', function () {\n var _prepare_categories_a = (0, _function.prepare_categories_array)(layer_name, color_field, data_manager.current_layers[layer_name].color_map),\n _prepare_categories_a2 = _slicedToArray(_prepare_categories_a, 2),\n cats = _prepare_categories_a2[0],\n _ = _prepare_categories_a2[1];\n\n container.modal.hide();\n (0, _categorical_panel.display_categorical_box)(data_manager.result_data[layer_name], layer_name, color_field, cats).then(function (confirmed) {\n container.modal.show();\n if (confirmed) {\n rendering_params = {\n nb_class: confirmed[0],\n color_map: confirmed[1],\n colorsByFeature: confirmed[2],\n renderer: 'Categorical',\n rendered_field: color_field,\n field: color_field\n };\n selection.transition().style('stroke', function (d, i) {\n return rendering_params.colorsByFeature[i];\n });\n }\n });\n });\n } else if (renderer === 'Choropleth' || renderer === 'PropSymbolsChoro') {\n popup.append('p').styles({ margin: 'auto', 'text-align': 'center' }).append('button').attr('class', 'button_disc').html(_tr('app_page.layer_style_popup.choose_discretization')).on('click', function () {\n container.modal.hide();\n var _opts = rendering_params ? { schema: rendering_params.schema, colors: rendering_params.colors, no_data: rendering_params.no_data, type: rendering_params.type, breaks: rendering_params.breaks, extra_options: rendering_params.extra_options } : data_manager.current_layers[layer_name].options_disc;\n (0, _discretization_panel.display_discretization)(layer_name, data_manager.current_layers[layer_name].rendered_field, _opts.breaks.length - 1, _opts).then(function (confirmed) {\n container.modal.show();\n if (confirmed) {\n rendering_params = {\n nb_class: confirmed[0],\n type: confirmed[1],\n breaks: confirmed[2],\n colors: confirmed[3],\n colorsByFeature: confirmed[4],\n schema: confirmed[5],\n no_data: confirmed[6],\n // renderer:\"Choropleth\",\n field: data_manager.current_layers[layer_name].rendered_field,\n extra_options: confirmed[7]\n };\n selection.transition().style('stroke', function (d, i) {\n return rendering_params.colorsByFeature[i];\n });\n }\n });\n });\n } else {\n var c_section = popup.append('p').attr('class', 'line_elem');\n c_section.insert('span').html(_tr('app_page.layer_style_popup.color'));\n c_section.insert('input').attr('type', 'color').style('float', 'right').property('value', stroke_prev).on('change', function () {\n selection.style('stroke', this.value);\n data_manager.current_layers[layer_name].fill_color = { single: this.value };\n // data_manager.current_layers[layer_name].fill_color.single = this.value;\n });\n }\n\n if (renderer === 'LinksGraduated') {\n prev_min_display = data_manager.current_layers[layer_name].min_display || 0;\n prev_breaks = data_manager.current_layers[layer_name].breaks.slice();\n var fij_field = data_manager.current_layers[layer_name].rendered_field;\n var max_val = 0;\n selection.each(function (d) {\n if (+d.properties[fij_field] > max_val) max_val = +d.properties[fij_field];\n });\n var threshold_section = popup.append('p').attr('class', 'line_elem');\n threshold_section.append('span').html(_tr('app_page.layer_style_popup.display_flow_larger'));\n // The legend will be updated in order to start on the minimum value displayed instead of\n // using the minimum value of the serie (skipping unused class if necessary)\n threshold_section.insert('input').attrs({ type: 'range', min: 0, max: max_val, step: 0.5 }).styles({\n width: '58px',\n 'vertical-align': 'middle',\n display: 'inline',\n float: 'right',\n 'margin-right': '0px'\n }).property('value', prev_min_display).on('change', function () {\n var val = +this.value;\n popup.select('#larger_than').html([' ', val, ' '].join(''));\n selection.style('display', function (d) {\n return +d.properties[fij_field] > val ? null : 'none';\n });\n data_manager.current_layers[layer_name].min_display = val;\n });\n threshold_section.insert('label').attr('id', 'larger_than').style('float', 'right').html(' ' + prev_min_display + ' ');\n popup.append('p').style('text-align', 'center').append('button').attr('class', 'button_disc').html(_tr('app_page.layer_style_popup.modify_size_class')).on('click', function () {\n container.modal.hide();\n (0, _discrtiz_links_discont.display_discretization_links_discont)(layer_name, data_manager.current_layers[layer_name].rendered_field, data_manager.current_layers[layer_name].breaks.length, 'user_defined').then(function (result) {\n container.modal.show();\n if (result) {\n var serie = result[0],\n sizes = result[1].map(function (ft) {\n return ft[1];\n }),\n links_byId = data_manager.current_layers[layer_name].linksbyId;\n serie.setClassManually(result[2]);\n data_manager.current_layers[layer_name].breaks = result[1];\n selection.style('fill-opacity', 0).style('stroke-width', function (d, i) {\n return sizes[serie.getClass(+links_byId[i][1])];\n });\n }\n });\n });\n } else if (renderer === 'DiscLayer') {\n prev_min_display = +data_manager.current_layers[layer_name].min_display || 0;\n prev_size = data_manager.current_layers[layer_name].size.slice();\n prev_breaks = data_manager.current_layers[layer_name].breaks.slice();\n // const max_val = Math.max.apply(null, data_manager.result_data[layer_name].map(i => i.disc_value));\n var disc_part = popup.append('p').attr('class', 'line_elem');\n disc_part.append('span').html(_tr('app_page.layer_style_popup.discont_threshold'));\n disc_part.insert('input').attrs({ type: 'range', min: 0, max: 1, step: 0.1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right', 'margin-right': '0px' }).property('value', prev_min_display).on('change', function () {\n var val = +this.value;\n var lim = val !== 0 ? val * data_manager.current_layers[layer_name].n_features : -1;\n popup.select('#larger_than').html([' ', val * 100, ' % '].join(''));\n selection.style('display', function (d, i) {\n return i <= lim ? null : 'none';\n });\n data_manager.current_layers[layer_name].min_display = val;\n });\n disc_part.insert('label').attr('id', 'larger_than').style('float', 'right').html([' ', prev_min_display * 100, ' % '].join(''));\n popup.append('p').style('text-align', 'center').append('button').attr('class', 'button_disc').html(_tr('app_page.layer_style_popup.choose_discretization')).on('click', function () {\n container.modal.hide();\n (0, _discrtiz_links_discont.display_discretization_links_discont)(layer_name, 'disc_value', data_manager.current_layers[layer_name].breaks.length, 'user_defined').then(function (result) {\n container.modal.show();\n if (result) {\n var serie = result[0],\n sizes = result[1].map(function (ft) {\n return ft[1];\n });\n\n serie.setClassManually(result[2]);\n data_manager.current_layers[layer_name].breaks = result[1];\n data_manager.current_layers[layer_name].size = [sizes[0], sizes[sizes.length - 1]];\n selection.style('fill-opacity', 0).style('stroke-width', function (d) {\n return sizes[serie.getClass(+d.properties.disc_value)];\n });\n }\n });\n });\n }\n\n var opacity_section = popup.append('p').attr('class', 'line_elem');\n opacity_section.insert('span').html(_tr('app_page.layer_style_popup.opacity'));\n opacity_section.insert('input').attrs({ type: 'range', min: 0, max: 1, step: 0.1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right' }).property('value', border_opacity).on('change', function () {\n opacity_section.select('#opacity_val_txt').html(' ' + this.value);\n selection.style('stroke-opacity', this.value);\n });\n\n opacity_section.append('span').attr('id', 'opacity_val_txt').styles({ display: 'inline', float: 'right' }).html(' ' + border_opacity);\n\n if (!renderer || !renderer.startsWith('PropSymbols') && !renderer.startsWith('Links') && renderer !== 'DiscLayer') {\n var width_section = popup.append('p').attr('class', 'line_elem');\n width_section.append('span').html(_tr('app_page.layer_style_popup.width'));\n width_section.insert('input').attrs({ type: 'number', min: 0, step: 0.1 }).styles({ width: '60px', float: 'right' }).property('value', stroke_width).on('change', function () {\n var val = +this.value;\n var zoom_scale = +d3.zoomTransform(map.node()).k;\n map.select(g_lyr_name).style('stroke-width', val / zoom_scale + 'px');\n data_manager.current_layers[layer_name]['stroke-width-const'] = val;\n });\n } else if (renderer.startsWith('PropSymbols') || renderer === 'LinksProportional') {\n var field_used = data_manager.current_layers[layer_name].rendered_field;\n var d_values = data_manager.result_data[layer_name].map(function (f) {\n return +f[field_used];\n });\n var prop_val_content = popup.append('p');\n prop_val_content.append('span').html(_tr('app_page.layer_style_popup.field_symbol_size', { field: data_manager.current_layers[layer_name].rendered_field }));\n prop_val_content.append('span').html(_tr('app_page.layer_style_popup.symbol_fixed_size'));\n prop_val_content.insert('input').styles({ width: '60px', float: 'right' }).attrs({ type: 'number', id: 'max_size_range', min: 0.1, step: 'any' }).property('value', data_manager.current_layers[layer_name].size[1]).on('change', function () {\n var f_size = +this.value;\n var prop_values = (0, _helpers_calc.prop_sizer3_e)(d_values, data_manager.current_layers[layer_name].size[0], f_size, 'line');\n data_manager.current_layers[layer_name].size[1] = f_size;\n redraw_prop_val(prop_values);\n });\n prop_val_content.append('span').style('float', 'right').html('(px)');\n\n var prop_val_content2 = popup.append('p').attr('class', 'line_elem');\n prop_val_content2.append('span').html(_tr('app_page.layer_style_popup.on_value'));\n prop_val_content2.insert('input').styles({ width: '100px', float: 'right' }).attrs({ type: 'number', min: 0.1, step: 0.1 }).property('value', +data_manager.current_layers[layer_name].size[0]).on('change', function () {\n var f_val = +this.value;\n var prop_values = (0, _helpers_calc.prop_sizer3_e)(d_values, f_val, data_manager.current_layers[layer_name].size[1], 'line');\n redraw_prop_val(prop_values);\n data_manager.current_layers[layer_name].size[0] = f_val;\n });\n }\n\n if (data_manager.current_layers[layer_name].renderer === undefined) {\n var generate_legend_section = popup.append('p');\n var generate_lgd_chkbox = generate_legend_section.insert('input').style('margin', 0).property('checked', data_manager.current_layers[layer_name].layout_legend_displayed === true).attrs({\n type: 'checkbox',\n id: 'checkbox_layout_legend'\n });\n generate_legend_section.insert('label').attr('for', 'checkbox_layout_legend').html(_tr('app_page.layer_style_popup.layout_legend'));\n generate_lgd_chkbox.on('change', function () {\n if (this.checked) {\n (0, _legend.createLegend_layout)(layer_name, data_manager.current_layers[layer_name].type, layer_name, '', undefined, layer_name);\n data_manager.current_layers[layer_name].layout_legend_displayed = true;\n } else {\n document.querySelector(['#legend_root_layout.lgdf_', _app.layer_to_id.get(layer_name)].join('')).remove();\n data_manager.current_layers[layer_name].layout_legend_displayed = false;\n }\n });\n }\n\n make_generate_labels_section(popup, layer_name);\n}\n\nfunction createStyleBox(layer_name) {\n (0, _dialogs.check_remove_existing_box)('.styleBox');\n var type = data_manager.current_layers[layer_name].type,\n isSphere = data_manager.current_layers[layer_name].sphere === true,\n renderer = data_manager.current_layers[layer_name].renderer,\n g_lyr_name = '#' + _app.layer_to_id.get(layer_name),\n selection = map.select(g_lyr_name).selectAll('path'),\n opacity = selection.style('fill-opacity');\n var fill_prev = (0, _helpers.cloneObj)(data_manager.current_layers[layer_name].fill_color);\n var prev_col_breaks = void 0;\n var rendering_params = void 0;\n var prev_random_colors = void 0;\n if (data_manager.current_layers[layer_name].colors_breaks && data_manager.current_layers[layer_name].colors_breaks instanceof Array) {\n prev_col_breaks = data_manager.current_layers[layer_name].colors_breaks.concat([]);\n } else if (fill_prev.random) {\n prev_random_colors = [];\n selection.each(function () {\n prev_random_colors.push(this.style.fill);\n });\n }\n var border_opacity = selection.style('stroke-opacity'),\n stroke_width = +data_manager.current_layers[layer_name]['stroke-width-const'];\n var table = [];\n var stroke_prev = selection.style('stroke');\n var previous_point_radius = data_manager.current_layers[layer_name].pointRadius;\n\n if (stroke_prev.startsWith('rgb')) {\n stroke_prev = (0, _colors_helpers.rgb2hex)(stroke_prev);\n }\n\n Array.prototype.forEach.call(svg_map.querySelector(g_lyr_name).querySelectorAll('path'), function (d) {\n table.push(d.__data__.properties);\n });\n var fields_layer = !isSphere ? data_manager.current_layers[layer_name].fields_type || (0, _helpers.type_col2)(table) : [];\n\n (0, _dialogs.make_confirm_dialog2)('styleBox', layer_name, { top: true, widthFitContent: true, draggable: true }).then(function (confirmed) {\n if (confirmed) {\n // Update the object holding the properties of the layer if Yes is clicked\n if (renderer !== undefined && rendering_params !== undefined && renderer !== 'Categorical') {\n data_manager.current_layers[layer_name].fill_color = { class: rendering_params.colorsByFeature };\n var colors_breaks = [];\n for (var i = rendering_params.breaks.length - 1; i > 0; --i) {\n colors_breaks.push([[rendering_params.breaks[i - 1], ' - ', rendering_params.breaks[i]].join(''), rendering_params.colors[i - 1]]);\n }\n data_manager.current_layers[layer_name].colors_breaks = colors_breaks;\n data_manager.current_layers[layer_name].rendered_field = rendering_params.field;\n data_manager.current_layers[layer_name].options_disc = {\n schema: rendering_params.schema,\n colors: rendering_params.colors,\n no_data: rendering_params.no_data,\n type: rendering_params.type,\n breaks: rendering_params.breaks,\n extra_options: rendering_params.extra_options\n };\n } else if (renderer === 'Categorical' && rendering_params !== undefined) {\n data_manager.current_layers[layer_name].color_map = rendering_params.color_map;\n data_manager.current_layers[layer_name].fill_color = {\n class: [].concat(rendering_params.colorsByFeature)\n };\n }\n\n if (rendering_params !== undefined && rendering_params.field !== undefined) {\n if (document.querySelector('.legend.legend_feature.lgdf_' + _app.layer_to_id.get(layer_name)).id === 'legend_root') {\n redraw_legend('choro', layer_name, data_manager.current_layers[layer_name].rendered_field);\n } else {\n redraw_legend('choro_horiz', layer_name, data_manager.current_layers[layer_name].rendered_field);\n }\n } else if (data_manager.current_layers[layer_name].layout_legend_displayed) {\n redraw_legend('layout', layer_name);\n }\n // Change the layer name if requested :\n if (new_layer_name !== layer_name) {\n change_layer_name(layer_name, (0, _function.check_layer_name)(new_layer_name.trim()));\n }\n (0, _map_ctrl.zoom_without_redraw)();\n } else {\n // Reset to original values the rendering parameters if \"no\" is clicked\n selection.style('fill-opacity', opacity).style('stroke-opacity', border_opacity);\n var zoom_scale = +d3.zoomTransform(map.node()).k;\n map.select(g_lyr_name).style('stroke-width', stroke_width / zoom_scale + 'px');\n data_manager.current_layers[layer_name]['stroke-width-const'] = stroke_width;\n var fill_meth = Object.getOwnPropertyNames(fill_prev)[0];\n if (type === 'Point' && data_manager.current_layers[layer_name].pointRadius) {\n data_manager.current_layers[layer_name].pointRadius = previous_point_radius;\n selection.attr('d', path.pointRadius(+data_manager.current_layers[layer_name].pointRadius));\n } else {\n if (fill_meth === 'single') {\n selection.style('fill', fill_prev.single).style('stroke', stroke_prev);\n } else if (fill_meth === 'class') {\n selection.style('fill-opacity', opacity).style('fill', function (d, i) {\n return fill_prev.class[i];\n }).style('stroke-opacity', border_opacity).style('stroke', stroke_prev);\n } else if (fill_meth === 'random') {\n selection.style('fill', function (d, i) {\n return prev_random_colors[i] || _colors_helpers.Colors.names[_colors_helpers.Colors.random()];\n }).style('stroke', stroke_prev);\n } else if (fill_meth === 'categorical') {\n fill_categorical(layer_name, fill_prev.categorical[0], 'path', fill_prev.categorical[1]);\n }\n }\n if (data_manager.current_layers[layer_name].colors_breaks) {\n data_manager.current_layers[layer_name].colors_breaks = prev_col_breaks;\n }\n data_manager.current_layers[layer_name].fill_color = fill_prev;\n (0, _map_ctrl.zoom_without_redraw)();\n }\n });\n\n var container = document.querySelector('.twbs > .styleBox');\n var popup = d3.select(container).select('.modal-content').style('width', '300px').select('.modal-body');\n\n var new_layer_name = layer_name;\n if (layer_name !== 'World') {\n var new_name_section = make_change_layer_name_section(popup, layer_name);\n new_name_section.on('change', function () {\n new_layer_name = this.value;\n });\n }\n\n if (type === 'Point') {\n var pt_size = popup.append('p').attr('class', 'line_elem');\n pt_size.append('span').html(_tr('app_page.layer_style_popup.point_radius'));\n pt_size.append('input').attrs({ type: 'range', min: 0, max: 80, id: 'point_radius_size' }).styles({\n width: '58px',\n 'vertical-align': 'middle',\n display: 'inline',\n float: 'right',\n 'margin-right': '0px'\n }).property('value', previous_point_radius).on('change', function () {\n var current_pt_size = +this.value;\n data_manager.current_layers[layer_name].pointRadius = current_pt_size;\n document.getElementById('point_radius_size_txt').value = current_pt_size;\n selection.attr('d', path.pointRadius(current_pt_size));\n });\n pt_size.append('input').attrs({\n type: 'number',\n min: 0,\n max: 80,\n step: 'any',\n class: 'without_spinner',\n id: 'point_radius_size_txt'\n }).styles({ width: '30px', 'margin-left': '10px', float: 'right' }).property('value', +previous_point_radius).on('change', function () {\n var pt_size_range = document.getElementById('point_radius_size');\n var old_value = pt_size_range.value;\n if (this.value === '' || isNaN(+this.value)) {\n this.value = old_value;\n } else {\n this.value = (0, _helpers_calc.round_value)(+this.value, 2);\n var current_pt_size = this.value;\n pt_size_range.value = current_pt_size;\n data_manager.current_layers[layer_name].pointRadius = current_pt_size;\n selection.attr('d', path.pointRadius(current_pt_size));\n }\n });\n }\n\n if (data_manager.current_layers[layer_name].colors_breaks === undefined && renderer !== 'Categorical') {\n if (data_manager.current_layers[layer_name].targeted || data_manager.current_layers[layer_name].is_result) {\n var fields = (0, _helpers.getFieldsType)('category', null, fields_layer);\n var fill_method = popup.append('p').html(_tr('app_page.layer_style_popup.fill_color')).insert('select');\n [[_tr('app_page.layer_style_popup.single_color'), 'single'], [_tr('app_page.layer_style_popup.categorical_color'), 'categorical'], [_tr('app_page.layer_style_popup.random_color'), 'random']].forEach(function (d) {\n fill_method.append('option').text(d[0]).attr('value', d[1]);\n });\n popup.append('div').attrs({ id: 'fill_color_section' });\n fill_method.on('change', function () {\n d3.select('#fill_color_section').html('').on('click', null);\n if (this.value === 'single') {\n make_single_color_menu(layer_name, fill_prev);\n } else if (this.value === 'categorical') {\n make_categorical_color_menu(fields, layer_name, fill_prev);\n } else if (this.value === 'random') {\n make_random_color(layer_name);\n document.getElementById('random_color_btn').click();\n }\n });\n (0, _helpers.setSelected)(fill_method.node(), Object.getOwnPropertyNames(fill_prev)[0]);\n } else {\n popup.append('div').attrs({ id: 'fill_color_section' });\n make_single_color_menu(layer_name, fill_prev);\n }\n } else if (renderer === 'Categorical') {\n var rendered_field = data_manager.current_layers[layer_name].rendered_field;\n\n popup.insert('p').styles({ margin: 'auto', 'text-align': 'center' }).append('button').attr('class', 'button_disc').html(_tr('app_page.layer_style_popup.choose_colors')).on('click', function () {\n container.modal.hide();\n\n var _prepare_categories_a3 = (0, _function.prepare_categories_array)(layer_name, rendered_field, data_manager.current_layers[layer_name].color_map),\n _prepare_categories_a4 = _slicedToArray(_prepare_categories_a3, 1),\n cats = _prepare_categories_a4[0];\n\n (0, _categorical_panel.display_categorical_box)(data_manager.result_data[layer_name], layer_name, rendered_field, cats).then(function (confirmed) {\n container.modal.show();\n if (confirmed) {\n rendering_params = {\n nb_class: confirmed[0],\n color_map: confirmed[1],\n colorsByFeature: confirmed[2],\n renderer: 'Categorical',\n rendered_field: rendered_field,\n field: rendered_field\n };\n selection.transition().style('fill', function (d, i) {\n return rendering_params.colorsByFeature[i];\n });\n }\n });\n });\n } else if (renderer === 'Choropleth') {\n popup.append('p').styles({ margin: 'auto', 'text-align': 'center' }).append('button').attr('class', 'button_disc').html(_tr('app_page.layer_style_popup.choose_discretization')).on('click', function () {\n container.modal.hide();\n var _opts = rendering_params ? { schema: rendering_params.schema, colors: rendering_params.colors, no_data: rendering_params.no_data, type: rendering_params.type, breaks: rendering_params.breaks, extra_options: rendering_params.extra_options } : data_manager.current_layers[layer_name].options_disc;\n (0, _discretization_panel.display_discretization)(layer_name, data_manager.current_layers[layer_name].rendered_field, _opts.breaks.length - 1, _opts).then(function (confirmed) {\n container.modal.show();\n if (confirmed) {\n rendering_params = {\n nb_class: confirmed[0],\n type: confirmed[1],\n breaks: confirmed[2],\n colors: confirmed[3],\n colorsByFeature: confirmed[4],\n schema: confirmed[5],\n no_data: confirmed[6],\n // renderer:\"Choropleth\",\n field: data_manager.current_layers[layer_name].rendered_field,\n extra_options: confirmed[7]\n };\n // let opacity_val = fill_opacity_section ? +fill_opacity_section.node().value : 0.9\n selection.transition().style('fill', function (d, i) {\n return rendering_params.colorsByFeature[i];\n });\n }\n });\n });\n } else if (renderer === 'Gridded') {\n var field_to_discretize = data_manager.current_layers[layer_name].rendered_field;\n popup.append('p').style('margin', 'auto').style('text-align', 'center').append('button').attr('class', 'button_disc').html(_tr('app_page.layer_style_popup.choose_discretization')).on('click', function () {\n container.modal.hide();\n var _opts = rendering_params ? { schema: rendering_params.schema, colors: rendering_params.colors, no_data: rendering_params.no_data, type: rendering_params.type, breaks: rendering_params.breaks, extra_options: rendering_params.extra_options } : data_manager.current_layers[layer_name].options_disc;\n (0, _discretization_panel.display_discretization)(layer_name, field_to_discretize, _opts.breaks.length - 1, _opts).then(function (confirmed) {\n container.modal.show();\n if (confirmed) {\n rendering_params = {\n nb_class: confirmed[0],\n type: confirmed[1],\n breaks: confirmed[2],\n colors: confirmed[3],\n colorsByFeature: confirmed[4],\n schema: confirmed[5],\n no_data: confirmed[6],\n renderer: 'Choropleth',\n field: field_to_discretize,\n extra_options: confirmed[7]\n };\n // let opacity_val = fill_opacity_section ? +fill_opacity_section.node().value : 0.9\n selection.transition().style('fill', function (d, i) {\n return rendering_params.colorsByFeature[i];\n });\n }\n });\n });\n }\n\n var fill_opacity_section = popup.append('p').attr('class', 'line_elem');\n fill_opacity_section.append('span').html(_tr('app_page.layer_style_popup.fill_opacity'));\n fill_opacity_section.insert('input').attrs({ type: 'range', min: 0, max: 1, step: 0.1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right', 'margin-right': '0px' }).property('value', opacity).on('change', function () {\n selection.style('fill-opacity', this.value);\n fill_opacity_section.select('#fill_opacity_txt').html(this.value * 100 + '%');\n });\n fill_opacity_section.append('span').style('float', 'right').attr('id', 'fill_opacity_txt').html(+opacity * 100 + '%');\n\n var c_section = popup.append('p').attr('class', 'line_elem');\n c_section.insert('span').html(_tr('app_page.layer_style_popup.border_color'));\n c_section.insert('input').attr('type', 'color').style('float', 'right').property('value', stroke_prev).on('change', function () {\n selection.style('stroke', this.value);\n });\n\n var opacity_section = popup.append('p').attr('class', 'line_elem');\n opacity_section.insert('span').html(_tr('app_page.layer_style_popup.border_opacity'));\n opacity_section.insert('input').attrs({ type: 'range', min: 0, max: 1, step: 0.1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right' }).property('value', border_opacity).on('change', function () {\n opacity_section.select('#opacity_val_txt').html(' ' + this.value);\n selection.style('stroke-opacity', this.value);\n });\n\n opacity_section.append('span').attr('id', 'opacity_val_txt').styles({ display: 'inline', float: 'right' }).html(' ' + border_opacity);\n\n var width_section = popup.append('p').attr('class', 'line_elem');\n width_section.append('span').html(_tr('app_page.layer_style_popup.border_width'));\n width_section.insert('input').attrs({ type: 'number', min: 0, step: 0.1 }).styles({ width: '60px', float: 'right' }).property('value', stroke_width).on('change', function () {\n var val = +this.value;\n var zoom_scale = +d3.zoomTransform(map.node()).k;\n map.select(g_lyr_name).style('stroke-width', val / zoom_scale + 'px');\n data_manager.current_layers[layer_name]['stroke-width-const'] = val;\n });\n\n var shadow_section = popup.append('p');\n var chkbx = shadow_section.insert('input').style('margin', '0').property('checked', map.select(g_lyr_name).attr('filter') ? true : null).attrs({\n type: 'checkbox',\n id: 'checkbox_shadow_layer'\n });\n shadow_section.insert('label').attr('for', 'checkbox_shadow_layer').html(_tr('app_page.layer_style_popup.layer_shadow'));\n chkbx.on('change', function () {\n if (this.checked) {\n createDropShadow(_app.layer_to_id.get(layer_name));\n } else {\n var filter_id = map.select(g_lyr_name).attr('filter');\n svg_map.querySelector(filter_id.substring(4).replace(')', '')).remove();\n map.select(g_lyr_name).attr('filter', null);\n }\n });\n\n if (data_manager.current_layers[layer_name].renderer === undefined || data_manager.current_layers[layer_name].renderer === 'Carto_doug' || data_manager.current_layers[layer_name].renderer === 'OlsonCarto') {\n var generate_legend_section = popup.append('p');\n var generate_lgd_chkbox = generate_legend_section.insert('input').style('margin', 0).property('checked', data_manager.current_layers[layer_name].layout_legend_displayed === true).attrs({\n type: 'checkbox',\n id: 'checkbox_layout_legend'\n });\n generate_legend_section.insert('label').attr('for', 'checkbox_layout_legend').html(_tr('app_page.layer_style_popup.layout_legend'));\n generate_lgd_chkbox.on('change', function () {\n if (this.checked) {\n (0, _legend.createLegend_layout)(layer_name, data_manager.current_layers[layer_name].type, layer_name, '', undefined, layer_name);\n data_manager.current_layers[layer_name].layout_legend_displayed = true;\n } else {\n document.querySelector(['#legend_root_layout.lgdf_', _app.layer_to_id.get(layer_name)].join('')).remove();\n data_manager.current_layers[layer_name].layout_legend_displayed = false;\n }\n });\n }\n\n make_generate_labels_section(popup, layer_name);\n}\n\nfunction createStyleBoxStewart(layer_name) {\n (0, _dialogs.check_remove_existing_box)('.styleBox');\n var g_lyr_name = '#' + _app.layer_to_id.get(layer_name),\n selection = map.select(g_lyr_name).selectAll('path'),\n opacity = selection.style('fill-opacity');\n\n var nb_ft = data_manager.current_layers[layer_name].n_features;\n var prev_palette = (0, _helpers.cloneObj)(data_manager.current_layers[layer_name].color_palette);\n\n var recolor_stewart = function recolor_stewart(coloramp_name, reversed) {\n var new_coloramp = (0, _colors_helpers.getColorBrewerArray)(nb_ft, coloramp_name);\n if (reversed === false) {\n new_coloramp.reverse();\n }\n for (var i = 0; i < nb_ft; ++i) {\n rendering_params.breaks[i][1] = new_coloramp[i];\n }\n selection.transition().style('fill', function (d, i) {\n return new_coloramp[i];\n });\n data_manager.current_layers[layer_name].color_palette = { name: coloramp_name, reversed: reversed };\n };\n var fill_prev = (0, _helpers.cloneObj)(data_manager.current_layers[layer_name].fill_color);\n var rendering_params = { breaks: [].concat(data_manager.current_layers[layer_name].colors_breaks) };\n var prev_col_breaks = void 0;\n if (data_manager.current_layers[layer_name].colors_breaks && data_manager.current_layers[layer_name].colors_breaks instanceof Array) {\n prev_col_breaks = data_manager.current_layers[layer_name].colors_breaks.concat([]);\n }\n var border_opacity = selection.style('stroke-opacity'),\n stroke_width = +data_manager.current_layers[layer_name]['stroke-width-const'];\n var stroke_prev = selection.style('stroke');\n\n if (stroke_prev.startsWith('rgb')) {\n stroke_prev = (0, _colors_helpers.rgb2hex)(stroke_prev);\n }\n\n (0, _dialogs.make_confirm_dialog2)('styleBox', layer_name, { top: true, widthFitContent: true, draggable: true }).then(function (confirmed) {\n if (confirmed) {\n data_manager.current_layers[layer_name].colors_breaks = rendering_params.breaks;\n data_manager.current_layers[layer_name].fill_color.class = rendering_params.breaks.map(function (obj) {\n return obj[1];\n });\n // Redraw the legend if necessary:\n if (document.querySelector('.legend.legend_feature.lgdf_' + _app.layer_to_id.get(layer_name)).id === 'legend_root') {\n redraw_legend('choro', layer_name, data_manager.current_layers[layer_name].rendered_field);\n } else {\n redraw_legend('choro_horiz', layer_name, data_manager.current_layers[layer_name].rendered_field);\n }\n // Change the layer name if requested :\n if (new_layer_name !== layer_name) {\n change_layer_name(layer_name, (0, _function.check_layer_name)(new_layer_name.trim()));\n }\n (0, _map_ctrl.zoom_without_redraw)();\n } else {\n // Reset to original values the rendering parameters if \"no\" is clicked\n selection.style('fill-opacity', opacity).style('stroke-opacity', border_opacity);\n var zoom_scale = +d3.zoomTransform(map.node()).k;\n map.select(g_lyr_name).style('stroke-width', stroke_width / zoom_scale + 'px');\n data_manager.current_layers[layer_name]['stroke-width-const'] = stroke_width;\n // const fill_meth = Object.getOwnPropertyNames(fill_prev)[0];\n recolor_stewart(prev_palette.name, prev_palette.reversed);\n if (document.querySelector('.legend.legend_feature.lgdf_' + _app.layer_to_id.get(layer_name)).id === 'legend_root') {\n redraw_legend('choro', layer_name, data_manager.current_layers[layer_name].rendered_field);\n } else {\n redraw_legend('choro_horiz', layer_name, data_manager.current_layers[layer_name].rendered_field);\n }\n data_manager.current_layers[layer_name].colors_breaks = prev_col_breaks;\n data_manager.current_layers[layer_name].fill_color = fill_prev;\n (0, _map_ctrl.zoom_without_redraw)();\n }\n });\n\n var container = document.querySelector('.twbs > .styleBox');\n var popup = d3.select(container).select('.modal-content').style('width', '300px').select('.modal-body');\n\n var new_layer_name = layer_name;\n var new_name_section = make_change_layer_name_section(popup, layer_name);\n new_name_section.on('change', function () {\n new_layer_name = this.value;\n });\n\n var color_palette_section = popup.insert('p').attr('class', 'line_elem');\n color_palette_section.append('span').html(_tr('app_page.layer_style_popup.color_palette'));\n var seq_color_select = color_palette_section.insert('select').attr('id', 'coloramp_params').style('float', 'right').on('change', function () {\n recolor_stewart(this.value, false);\n });\n\n ['Blues', 'BuGn', 'BuPu', 'GnBu', 'OrRd', 'PuBu', 'PuBuGn', 'PuRd', 'RdPu', 'YlGn', 'Greens', 'Greys', 'Oranges', 'Purples', 'Reds'].forEach(function (name) {\n seq_color_select.append('option').text(name).attr('value', name);\n });\n seq_color_select.node().value = prev_palette.name;\n popup.insert('p').attr('class', 'line_elem').styles({ 'text-align': 'center', margin: '0 !important' }).insert('button').attrs({ class: 'button_st3', id: 'reverse_colramp' }).html(_tr('app_page.layer_style_popup.reverse_palette')).on('click', function () {\n var pal_name = document.getElementById('coloramp_params').value;\n recolor_stewart(pal_name, true);\n });\n\n var fill_opacity_section = popup.append('p').attr('class', 'line_elem');\n fill_opacity_section.append('span').html(_tr('app_page.layer_style_popup.fill_opacity'));\n fill_opacity_section.insert('input').attrs({ type: 'range', min: 0, max: 1, step: 0.1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right', 'margin-right': '0px' }).property('value', opacity).on('change', function () {\n selection.style('fill-opacity', this.value);\n fill_opacity_section.select('#fill_opacity_txt').html(this.value * 100 + '%');\n });\n fill_opacity_section.append('span').style('float', 'right').attr('id', 'fill_opacity_txt').html(+opacity * 100 + '%');\n\n var c_section = popup.append('p').attr('class', 'line_elem');\n c_section.insert('span').html(_tr('app_page.layer_style_popup.border_color'));\n c_section.insert('input').attr('type', 'color').style('float', 'right').property('value', stroke_prev).on('change', function () {\n selection.style('stroke', this.value);\n });\n\n var opacity_section = popup.append('p').attr('class', 'line_elem');\n opacity_section.insert('span').html(_tr('app_page.layer_style_popup.border_opacity'));\n opacity_section.insert('input').attrs({ type: 'range', min: 0, max: 1, step: 0.1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right' }).property('value', 'border_opacity').on('change', function () {\n opacity_section.select('#opacity_val_txt').html(' ' + this.value);\n selection.style('stroke-opacity', this.value);\n });\n\n opacity_section.append('span').attr('id', 'opacity_val_txt').styles({ display: 'inline', float: 'right' }).html(' ' + border_opacity);\n\n var width_section = popup.append('p').attr('class', 'line_elem');\n width_section.append('span').html(_tr('app_page.layer_style_popup.border_width'));\n width_section.insert('input').attrs({ type: 'number', min: 0, step: 0.1 }).styles({ width: '60px', float: 'right' }).property('value', stroke_width).on('change', function () {\n var val = +this.value;\n var zoom_scale = +d3.zoomTransform(map.node()).k;\n map.select(g_lyr_name).style('stroke-width', val / zoom_scale + 'px');\n data_manager.current_layers[layer_name]['stroke-width-const'] = val;\n });\n\n var shadow_section = popup.append('p');\n var chkbx = shadow_section.insert('input').style('margin', '0').property('checked', map.select(g_lyr_name).attr('filter') ? true : null).attrs({\n type: 'checkbox',\n id: 'checkbox_shadow_layer'\n });\n shadow_section.insert('label').attr('for', 'checkbox_shadow_layer').html(_tr('app_page.layer_style_popup.layer_shadow'));\n chkbx.on('change', function () {\n if (this.checked) {\n createDropShadow(_app.layer_to_id.get(layer_name));\n } else {\n var filter_id = map.select(g_lyr_name).attr('filter');\n svg_map.querySelector(filter_id.substring(4).replace(')', '')).remove();\n map.select(g_lyr_name).attr('filter', null);\n }\n });\n make_generate_labels_section(popup, layer_name);\n}\n\nfunction make_generate_labels_graticule_section(parent_node) {\n var labels_section = parent_node.append('p');\n labels_section.append('span').attr('id', 'generate_labels').styles({ cursor: 'pointer', 'margin-top': '15px' }).html(_tr('app_page.layer_style_popup.generate_labels')).on('mouseover', function () {\n this.style.fontWeight = 'bold';\n }).on('mouseout', function () {\n this.style.fontWeight = '';\n }).on('click', function () {\n (0, _function.render_label_graticule)('Graticule', {\n color: '#000',\n font: 'verdana',\n ref_font_size: 12,\n uo_layer_name: ['Labels', 'Graticule'].join('_')\n });\n });\n}\n\n/**\n* Create the section allowing to generate labels on a parent style box.\n* (Used by all the createStyleBox_xxx functions)\n*\n* @param {Object} parent_node - The d3 selection corresponding the parent style box.\n* @param {String} layer_name - The name of the layer currently edited in the style box.\n* @return {void}\n*\n*/\nfunction make_generate_labels_section(parent_node, layer_name) {\n var _fields = get_fields_name(layer_name) || [];\n // const table = make_table(layer_name);\n var fields_num = (0, _helpers.type_col2)((0, _tables.make_table)(layer_name)).filter(function (a) {\n return a.type === 'ratio' || a.type === 'stock';\n }).map(function (a) {\n return a.name;\n });\n if (_fields && _fields.length > 0) {\n var labels_section = parent_node.append('p');\n var input_fields = {};\n for (var i = 0; i < _fields.length; i++) {\n input_fields[_fields[i]] = _fields[i];\n }\n labels_section.append('span').attr('id', 'generate_labels').styles({ cursor: 'pointer', 'margin-top': '15px' }).html(_tr('app_page.layer_style_popup.generate_labels')).on('mouseover', function () {\n this.style.fontWeight = 'bold';\n }).on('mouseout', function () {\n this.style.fontWeight = '';\n }).on('click', function () {\n swal({\n title: '',\n html: '' + _tr('app_page.layer_style_popup.field_label') + '
\\n\\n\\n\\n
',\n type: 'question',\n customClass: 'swal2_custom',\n showCancelButton: true,\n showCloseButton: false,\n allowEscapeKey: false,\n allowOutsideClick: false,\n confirmButtonColor: '#DD6B55',\n confirmButtonText: _tr('app_page.common.confirm'),\n inputOptions: input_fields,\n onOpen: function onOpen() {\n var sel = d3.select('#label_box_field');\n _fields.forEach(function (f_name) {\n sel.append('option').property('value', f_name).text(f_name);\n });\n if (fields_num.length > 0) {\n var section_filter = d3.select('#label_box_filter_section');\n section_filter.append('input').attrs({ type: 'checkbox', id: 'label_box_filter_chk' }).on('change', function () {\n if (this.checked) {\n subsection_filter_label.style('display', null);\n } else {\n subsection_filter_label.style('display', 'none');\n }\n });\n section_filter.append('label').attr('for', 'label_box_filter_chk').html(_tr('app_page.layer_style_popup.filter_label'));\n var subsection_filter_label = section_filter.append('div').style('display', 'none');\n var sel2 = subsection_filter_label.append('select').attr('id', 'label_box_filter_field');\n fields_num.forEach(function (f_name) {\n sel2.append('option').property('value', f_name).text(f_name);\n });\n var sel3 = subsection_filter_label.append('select').attr('id', 'label_box_filter_type');\n sel3.append('option').property('value', 'sup').text('>');\n sel3.append('option').property('value', 'inf').text('<');\n subsection_filter_label.append('input').attrs({ type: 'number', id: 'label_box_filter_value' });\n }\n },\n preConfirm: function preConfirm() {\n return new Promise(function (resolve, reject) {\n setTimeout(function () {\n var selected_field = document.getElementById('label_box_field').value;\n var filter_options = undefined;\n if (fields_num.length > 0) {\n var to_filter = document.getElementById('label_box_filter_chk').checked;\n if (to_filter) {\n var filter_value = document.getElementById('label_box_filter_value').value;\n if (!filter_value || isNaN(filter_value)) {\n reject(_tr('app_page.common.incorrect_value'));\n return;\n }\n filter_options = {\n field: document.getElementById('label_box_filter_field').value,\n type_filter: document.getElementById('label_box_filter_type').value,\n filter_value: filter_value\n };\n }\n }\n if (_fields.indexOf(selected_field) < 0) {\n reject(_tr('app_page.common.no_value'));\n } else {\n resolve();\n (0, _function.render_label)(layer_name, {\n label_field: selected_field,\n filter_options: filter_options,\n color: '#000',\n font: 'verdana',\n ref_font_size: 12,\n uo_layer_name: ['Labels', selected_field, layer_name].join('_')\n });\n }\n }, 50);\n });\n }\n }).then(function () {\n //console.log(value);\n }, function () {\n //console.log(dismiss);\n });\n });\n }\n}\n\n/**\n* Return the name of the fields/columns\n* (ie. the members of the `properties` Object for each feature on a layer)\n*\n* @param {String} layer_name - The name of the layer.\n* @return {Array} - An array of Strings, one for each field name.\n*\n*/\nfunction get_fields_name(layer_name) {\n var elem = document.getElementById(_app.layer_to_id.get(layer_name)).childNodes[0];\n if (!elem.__data__ || !elem.__data__.properties) {\n return null;\n }\n return Object.getOwnPropertyNames(elem.__data__.properties);\n}\n\nfunction createStyleBoxWaffle(layer_name) {\n (0, _dialogs.check_remove_existing_box)('.styleBox');\n var round = Math.round;\n var floor = Math.floor;\n var layer_id = _app.layer_to_id.get(layer_name),\n g_lyr_name = '#' + layer_id,\n ref_layer_name = data_manager.current_layers[layer_name].ref_layer_name,\n symbol = data_manager.current_layers[layer_name].symbol,\n fields = data_manager.current_layers[layer_name].rendered_field,\n selection = map.select(g_lyr_name);\n\n var previous_params = {\n fill_opacity: selection.selectAll(symbol).style('fill-opacity'),\n ref_colors: [].concat(data_manager.current_layers[layer_name].fill_color),\n size: data_manager.current_layers[layer_name].size,\n nCol: data_manager.current_layers[layer_name].nCol\n };\n\n (0, _dialogs.make_confirm_dialog2)('styleBox', layer_name, { top: true, widthFitContent: true, draggable: true }).then(function (confirmed) {\n if (confirmed) {\n redraw_legend('waffle', layer_name, fields);\n // Change the layer name if requested :\n if (new_layer_name !== layer_name) {\n change_layer_name(layer_name, (0, _function.check_layer_name)(new_layer_name.trim()));\n }\n } else {\n data_manager.current_layers[layer_name].fill_color = previous_params.ref_colors;\n data_manager.current_layers[layer_name].size = previous_params.size;\n selection.selectAll(symbol).style('fill-opacity', previous_params.fill_opacity);\n }\n (0, _map_ctrl.zoom_without_redraw)();\n });\n\n var container = document.querySelector('.twbs > .styleBox');\n var popup = d3.select(container).select('.modal-content').style('width', '300px').select('.modal-body');\n\n popup.append('p').styles({ 'text-align': 'center', color: 'grey' }).html([_tr('app_page.layer_style_popup.rendered_field', { field: fields.join(' ,') }), _tr('app_page.layer_style_popup.reference_layer', { layer: ref_layer_name })].join(''));\n\n var fill_opacity_section = popup.append('p').attr('class', 'line_elem').attr('id', 'fill_color_section');\n\n fill_opacity_section.append('span').html(_tr('app_page.layer_style_popup.fill_opacity'));\n fill_opacity_section.insert('input').attrs({ type: 'range', min: 0, max: 1, step: 0.1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right' }).property('value', previous_params.fill_opacity).on('change', function () {\n selection.selectAll(symbol).style('fill-opacity', +this.value);\n fill_opacity_section.select('#fill_opacity_txt').html(+this.value * 100 + '%');\n });\n\n fill_opacity_section.append('span').attr('id', 'fill_opacity_txt').style('float', 'right').html(+previous_params.fill_opacity * 100 + '%');\n\n var ref_colors_section = popup.append('div').attr('id', 'ref_colors_section').style('clear', 'both');\n ref_colors_section.append('p').html(_tr('app_page.layer_style_popup.ref_colors'));\n\n var _loop = function _loop(i) {\n var p = ref_colors_section.append('p').style('margin', '15px 5px');\n p.append('span').html(data_manager.current_layers[layer_name].rendered_field[i]);\n p.insert('input').attrs({ id: i, type: 'color' }).style('float', 'right').property('value', data_manager.current_layers[layer_name].fill_color[i]).on('change', function () {\n // eslint-disable-line no-loop-func\n var col = (0, _colors_helpers.rgb2hex)(this.value);\n var to_replace = data_manager.current_layers[layer_name].fill_color[i];\n data_manager.current_layers[layer_name].fill_color[i] = col;\n selection.selectAll(symbol).each(function () {\n if ((0, _colors_helpers.rgb2hex)(this.getAttribute('fill')) === to_replace) {\n this.setAttribute('fill', col);\n }\n });\n });\n };\n\n for (var i = 0; i < data_manager.current_layers[layer_name].fill_color.length; i++) {\n _loop(i);\n }\n\n var size_section = popup.append('p').attr('class', 'line_elem').attr('id', 'size_section').style('clear', 'both');\n\n size_section.append('span').html(_tr('app_page.layer_style_popup.ref_size'));\n size_section.insert('input').attrs({ type: 'range', min: 1, max: 40, step: 1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right' }).property('value', previous_params.size).on('change', function () {\n var val = +this.value;\n var nCol = data_manager.current_layers[layer_name].nCol;\n data_manager.current_layers[layer_name].size = val;\n selection.selectAll('g').selectAll(symbol).each(function (_, i) {\n if (symbol === 'circle') {\n var t_x = round(i % nCol * 2 * val);\n var t_y = floor(floor(i / nCol) * 2 * val);\n this.setAttribute('r', val);\n this.setAttribute('transform', 'translate(-' + t_x + ', -' + t_y + ')');\n } else {\n var offset = val / 5;\n var _t_x = round(i % nCol * val) + offset * round(i % nCol);\n var _t_y = floor(floor(i / nCol) * val) + offset * floor(i / nCol);\n this.setAttribute('width', val);\n this.setAttribute('height', val);\n this.setAttribute('transform', 'translate(-' + _t_x + ', -' + _t_y + ')');\n }\n });\n size_section.select('#size_section_txt').html(this.value + ' px');\n });\n size_section.append('span').attr('id', 'size_section_txt').style('float', 'right').html(previous_params.size + ' px');\n\n var width_row_section = popup.append('p').attr('class', 'line_elem').attr('id', 'width_row_section');\n\n width_row_section.append('span').html(_tr('app_page.func_options.twostocks.waffle_width_rows'));\n width_row_section.insert('input').attrs({ type: 'range', min: 1, max: 10, step: 1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right' }).property('value', previous_params.nCol).on('change', function () {\n var val = +this.value;\n var size = data_manager.current_layers[layer_name].size;\n data_manager.current_layers[layer_name].nCol = val;\n selection.selectAll('g').selectAll(symbol).each(function (d, i) {\n if (symbol === 'circle') {\n var t_x = round(i % val * 2 * size);\n var t_y = floor(floor(i / val) * 2 * size);\n this.setAttribute('transform', 'translate(-' + t_x + ', -' + t_y + ')');\n } else {\n var offset = size / 5;\n var _t_x2 = round(i % val * size) + offset * round(i % val);\n var _t_y2 = floor(floor(i / val) * size) + offset * floor(i / val);\n this.setAttribute('transform', 'translate(-' + _t_x2 + ', -' + _t_y2 + ')');\n }\n });\n width_row_section.select('#width_row_text').html(this.value);\n });\n width_row_section.append('span').attr('id', 'width_row_text').style('float', 'right').html(previous_params.nCol);\n\n var allow_move_section = popup.append('p');\n var chkbx = allow_move_section.insert('input').style('margin', '0').property('checked', data_manager.current_layers[layer_name].draggable ? true : null).attrs({\n type: 'checkbox',\n id: 'checkbox_move_symbol' });\n allow_move_section.insert('label').attr('for', 'checkbox_move_symbol').html(_tr('app_page.layer_style_popup.let_draggable'));\n chkbx.on('change', function () {\n if (this.checked) {\n data_manager.current_layers[layer_name].draggable = true;\n } else {\n data_manager.current_layers[layer_name].draggable = false;\n }\n });\n\n var new_layer_name = layer_name;\n var new_name_section = make_change_layer_name_section(popup, layer_name);\n new_name_section.on('change', function () {\n new_layer_name = this.value;\n });\n}\n\nfunction createStyleBox_ProbSymbol(layer_name) {\n (0, _dialogs.check_remove_existing_box)('.styleBox');\n var layer_id = _app.layer_to_id.get(layer_name),\n g_lyr_name = '#' + layer_id,\n ref_layer_name = data_manager.current_layers[layer_name].ref_layer_name,\n type_method = data_manager.current_layers[layer_name].renderer,\n type_symbol = data_manager.current_layers[layer_name].symbol,\n field_used = data_manager.current_layers[layer_name].rendered_field,\n selection = map.select(g_lyr_name).selectAll(type_symbol),\n old_size = [data_manager.current_layers[layer_name].size[0], data_manager.current_layers[layer_name].size[1]];\n var rendering_params = void 0;\n var stroke_prev = selection.style('stroke');\n var stroke_width = selection.style('stroke-width');\n var prev_random_colors = void 0;\n\n var opacity = selection.style('fill-opacity'),\n border_opacity = selection.style('stroke-opacity');\n\n var fill_prev = (0, _helpers.cloneObj)(data_manager.current_layers[layer_name].fill_color);\n var d_values = data_manager.result_data[layer_name].map(function (v) {\n return +v[field_used];\n });\n var prev_col_breaks = void 0;\n var redraw_prop_val = function redraw_prop_val(prop_values) {\n var selec = selection._groups[0];\n\n if (type_symbol === 'circle') {\n for (var i = 0, len = prop_values.length; i < len; i++) {\n selec[i].setAttribute('r', prop_values[i]);\n }\n } else if (type_symbol === 'rect') {\n for (var _i = 0, _len = prop_values.length; _i < _len; _i++) {\n var old_rect_size = +selec[_i].getAttribute('height');\n var centr = [+selec[_i].getAttribute('x') + old_rect_size / 2 - prop_values[_i] / 2, +selec[_i].getAttribute('y') + old_rect_size / 2 - prop_values[_i] / 2];\n selec[_i].setAttribute('x', centr[0]);\n selec[_i].setAttribute('y', centr[1]);\n selec[_i].setAttribute('height', prop_values[_i]);\n selec[_i].setAttribute('width', prop_values[_i]);\n }\n }\n };\n\n if (data_manager.current_layers[layer_name].colors_breaks && data_manager.current_layers[layer_name].colors_breaks instanceof Array) {\n prev_col_breaks = [].concat(data_manager.current_layers[layer_name].colors_breaks);\n } else if (data_manager.current_layers[layer_name].break_val !== undefined) {\n prev_col_breaks = data_manager.current_layers[layer_name].break_val;\n } else if (fill_prev.random) {\n prev_random_colors = [];\n selection.each(function () {\n prev_random_colors.push(this.style.fill);\n });\n }\n if (stroke_prev.startsWith('rgb')) stroke_prev = (0, _colors_helpers.rgb2hex)(stroke_prev);\n if (stroke_width.endsWith('px')) stroke_width = stroke_width.substring(0, stroke_width.length - 2);\n\n (0, _dialogs.make_confirm_dialog2)('styleBox', layer_name, { top: true, widthFitContent: true, draggable: true }).then(function (confirmed) {\n if (confirmed) {\n // if(data_manager.current_layers[layer_name].size != old_size){\n var lgd_prop_symb = document.querySelector(['#legend_root_symbol.lgdf_', layer_id].join(''));\n if (lgd_prop_symb) {\n (0, _map_ctrl.redraw_legends_symbols)(lgd_prop_symb);\n }\n if (type_symbol === 'circle') {\n selection.each(function (d) {\n d.properties.prop_value = this.getAttribute('r'); // eslint-disable-line no-param-reassign\n d.properties.color = (0, _colors_helpers.rgb2hex)(this.style.fill); // eslint-disable-line no-param-reassign\n });\n } else {\n selection.each(function (d) {\n d.properties.prop_value = this.getAttribute('height'); // eslint-disable-line no-param-reassign\n d.properties.color = (0, _colors_helpers.rgb2hex)(this.style.fill); // eslint-disable-line no-param-reassign\n });\n }\n\n if ((type_method === 'PropSymbolsChoro' || type_method === 'PropSymbolsTypo') && rendering_params !== undefined) {\n if (type_method === 'PropSymbolsChoro') {\n data_manager.current_layers[layer_name].fill_color = {\n class: [].concat(rendering_params.colorsByFeature)\n };\n data_manager.current_layers[layer_name].colors_breaks = [];\n for (var i = rendering_params.breaks.length - 1; i > 0; --i) {\n data_manager.current_layers[layer_name].colors_breaks.push([[rendering_params.breaks[i - 1], ' - ', rendering_params.breaks[i]].join(''), rendering_params.colors[i - 1]]);\n }\n data_manager.current_layers[layer_name].options_disc = {\n schema: rendering_params.schema,\n colors: rendering_params.colors,\n no_data: rendering_params.no_data,\n type: rendering_params.type,\n breaks: rendering_params.breaks,\n extra_options: rendering_params.extra_options\n };\n } else if (type_method === 'PropSymbolsTypo') {\n data_manager.current_layers[layer_name].fill_color = {\n class: [].concat(rendering_params.colorsByFeature)\n };\n data_manager.current_layers[layer_name].color_map = rendering_params.color_map;\n }\n data_manager.current_layers[layer_name].rendered_field2 = rendering_params.field;\n // Also change the legend if there is one displayed :\n if (document.querySelector('.legend.legend_feature.lgdf_' + _app.layer_to_id.get(layer_name)).id === 'legend_root') {\n redraw_legend('choro', layer_name, data_manager.current_layers[layer_name].rendered_field);\n } else {\n redraw_legend('choro_horiz', layer_name, data_manager.current_layers[layer_name].rendered_field);\n }\n }\n // if(selection._groups[0][0].__data__.properties.color && rendering_params !== undefined){\n // selection.each((d,i) => {\n // d.properties.color = rendering_params.colorsByFeature[i];\n // });\n // }\n // Change the layer name if requested :\n if (new_layer_name !== layer_name) {\n change_layer_name(layer_name, (0, _function.check_layer_name)(new_layer_name.trim()));\n }\n } else {\n selection.style('fill-opacity', opacity);\n map.select(g_lyr_name).style('stroke-width', stroke_width);\n data_manager.current_layers[layer_name]['stroke-width-const'] = stroke_width;\n var fill_meth = Object.getOwnPropertyNames(fill_prev)[0];\n if (fill_meth === 'single') {\n selection.style('fill', fill_prev.single).style('stroke-opacity', border_opacity).style('stroke', stroke_prev);\n } else if (fill_meth === 'two') {\n data_manager.current_layers[layer_name].break_val = prev_col_breaks;\n data_manager.current_layers[layer_name].fill_color = { two: [fill_prev.two[0], fill_prev.two[1]] };\n selection.style('fill', function (d, i) {\n return d_values[i] > prev_col_breaks ? fill_prev.two[1] : fill_prev.two[0];\n }).style('stroke-opacity', border_opacity).style('stroke', stroke_prev);\n } else if (fill_meth === 'class') {\n selection.style('fill-opacity', opacity).style('fill', function (d, i) {\n return data_manager.current_layers[layer_name].fill_color.class[i];\n }).style('stroke-opacity', border_opacity).style('stroke', stroke_prev);\n data_manager.current_layers[layer_name].colors_breaks = prev_col_breaks;\n } else if (fill_meth === 'random') {\n selection.style('fill', function (_, i) {\n return prev_random_colors[i] || _colors_helpers.Colors.names[_colors_helpers.Colors.random()];\n }).style('stroke-opacity', border_opacity).style('stroke', stroke_prev);\n } else if (fill_meth === 'categorical') {\n fill_categorical(layer_name, fill_prev.categorical[0], type_symbol, fill_prev.categorical[1]);\n }\n data_manager.current_layers[layer_name].fill_color = fill_prev;\n if (data_manager.current_layers[layer_name].size[1] !== old_size[1]) {\n var prop_values = (0, _helpers_calc.prop_sizer3_e)(d_values, old_size[0], old_size[1], type_symbol);\n redraw_prop_val(prop_values);\n data_manager.current_layers[layer_name].size = [old_size[0], old_size[1]];\n }\n }\n (0, _map_ctrl.zoom_without_redraw)();\n });\n\n var container = document.querySelector('.twbs > .styleBox');\n var popup = d3.select(container).select('.modal-content').style('width', '300px').select('.modal-body');\n\n popup.append('p').styles({ 'text-align': 'center', color: 'grey' }).html([_tr('app_page.layer_style_popup.rendered_field', { field: data_manager.current_layers[layer_name].rendered_field }), _tr('app_page.layer_style_popup.reference_layer', { layer: ref_layer_name })].join(''));\n\n var new_layer_name = layer_name;\n var new_name_section = make_change_layer_name_section(popup, layer_name);\n new_name_section.on('change', function () {\n new_layer_name = this.value;\n });\n\n if (type_method === 'PropSymbolsChoro') {\n var field_color = data_manager.current_layers[layer_name].rendered_field2;\n popup.append('p').styles({ margin: 'auto', 'text-align': 'center' }).html(_tr('app_page.layer_style_popup.field_symbol_color', { field: field_color })).append('button').attr('class', 'button_disc').html(_tr('app_page.layer_style_popup.choose_discretization')).on('click', function () {\n container.modal.hide();\n var _opts = rendering_params ? { schema: rendering_params.schema, colors: rendering_params.colors, no_data: rendering_params.no_data, type: rendering_params.type, breaks: rendering_params.breaks, extra_options: rendering_params.extra_options } : data_manager.current_layers[layer_name].options_disc;\n (0, _discretization_panel.display_discretization)(layer_name, field_color, _opts.breaks.length - 1, _opts).then(function (confirmed) {\n container.modal.show();\n if (confirmed) {\n rendering_params = {\n nb_class: confirmed[0],\n type: confirmed[1],\n breaks: confirmed[2],\n colors: confirmed[3],\n colorsByFeature: confirmed[4],\n schema: confirmed[5],\n no_data: confirmed[6],\n renderer: 'PropSymbolsChoro',\n field: field_color,\n extra_options: confirmed[7]\n };\n selection.style('fill', function (d, i) {\n return rendering_params.colorsByFeature[i];\n });\n }\n });\n });\n } else if (data_manager.current_layers[layer_name].break_val !== undefined) {\n var fill_color_section = popup.append('div').attr('id', 'fill_color_section');\n fill_color_section.append('p').style('text-align', 'center').html(_tr('app_page.layer_style_popup.color_break'));\n var p2 = fill_color_section.append('p').style('display', 'inline');\n var col1 = p2.insert('input').attrs({ id: 'col1', type: 'color' }).property('value', data_manager.current_layers[layer_name].fill_color.two[0]).on('change', function () {\n var _this = this;\n\n var new_break_val = +b_val.node().value;\n data_manager.current_layers[layer_name].fill_color.two[0] = this.value;\n selection.transition().style('fill', function (d, i) {\n return d_values[i] > new_break_val ? col2.node().value : _this.value;\n });\n });\n var col2 = p2.insert('input').attrs({ id: 'col2', type: 'color' }).property('value', data_manager.current_layers[layer_name].fill_color.two[1]).on('change', function () {\n var _this2 = this;\n\n var new_break_val = +b_val.node().value;\n data_manager.current_layers[layer_name].fill_color.two[1] = this.value;\n selection.transition().style('fill', function (d, i) {\n return d_values[i] > new_break_val ? _this2.value : col1.node().value;\n });\n });\n fill_color_section.insert('span').html(_tr('app_page.layer_style_popup.break_value'));\n var b_val = fill_color_section.insert('input').attr('type', 'number').style('width', '75px').property('value', data_manager.current_layers[layer_name].break_val).on('change', function () {\n var new_break_val = +this.value;\n data_manager.current_layers[layer_name].break_val = new_break_val;\n selection.transition().style('fill', function (d, i) {\n return d_values[i] > new_break_val ? col2.node().value : col1.node().value;\n });\n });\n } else if (type_method === 'PropSymbolsTypo') {\n var _field_color = data_manager.current_layers[layer_name].rendered_field2;\n popup.append('p').style('margin', 'auto').html(_tr('app_page.layer_style_popup.field_symbol_color', { field: _field_color }));\n popup.append('p').style('text-align', 'center').insert('button').attr('class', 'button_disc').html(_tr('app_page.layer_style_popup.choose_colors')).on('click', function () {\n var _prepare_categories_a5 = (0, _function.prepare_categories_array)(layer_name, _field_color, data_manager.current_layers[layer_name].color_map),\n _prepare_categories_a6 = _slicedToArray(_prepare_categories_a5, 1),\n cats = _prepare_categories_a6[0];\n\n container.modal.hide();\n (0, _categorical_panel.display_categorical_box)(data_manager.result_data[layer_name], layer_name, _field_color, cats).then(function (confirmed) {\n container.modal.show();\n if (confirmed) {\n rendering_params = {\n nb_class: confirmed[0],\n color_map: confirmed[1],\n colorsByFeature: confirmed[2],\n renderer: 'Categorical',\n rendered_field: _field_color,\n field: _field_color\n };\n selection.style('fill', function (d, i) {\n return rendering_params.colorsByFeature[i];\n });\n }\n });\n });\n } else {\n // const fields_all = type_col2(data_manager.result_data[layer_name]),\n // fields = getFieldsType('category', null, fields_all);\n var fill_method = popup.append('p').html(_tr('app_page.layer_style_popup.fill_color')).insert('select');\n\n [[_tr('app_page.layer_style_popup.single_color'), 'single'], [_tr('app_page.layer_style_popup.random_color'), 'random']].forEach(function (d) {\n fill_method.append('option').text(d[0]).attr('value', d[1]);\n });\n popup.append('div').attr('id', 'fill_color_section');\n fill_method.on('change', function () {\n popup.select('#fill_color_section').html('').on('click', null);\n if (this.value === 'single') {\n make_single_color_menu(layer_name, fill_prev, type_symbol);\n map.select(g_lyr_name).selectAll(type_symbol).transition().style('fill', fill_prev.single);\n data_manager.current_layers[layer_name].fill_color = (0, _helpers.cloneObj)(fill_prev);\n } else if (this.value === 'random') {\n make_random_color(layer_name, type_symbol);\n document.getElementById('random_color_btn').click();\n }\n });\n (0, _helpers.setSelected)(fill_method.node(), Object.getOwnPropertyNames(fill_prev)[0]);\n }\n\n var fill_opct_section = popup.append('p').attr('class', 'line_elem');\n fill_opct_section.append('span').html(_tr('app_page.layer_style_popup.fill_opacity'));\n\n fill_opct_section.insert('input').attrs({ type: 'range', min: 0, max: 1, step: 0.1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right' }).property('value', opacity).on('change', function () {\n selection.style('fill-opacity', this.value);\n fill_opct_section.select('#fill_opacity_txt').html(+this.value * 100 + '%');\n });\n\n fill_opct_section.append('span').attr('id', 'fill_opacity_txt').style('float', 'right').html(+opacity * 100 + '%');\n\n var border_color_section = popup.append('p').attr('class', 'line_elem');\n border_color_section.append('span').html(_tr('app_page.layer_style_popup.border_color'));\n border_color_section.insert('input').attr('type', 'color').style('float', 'right').property('value', stroke_prev).on('change', function () {\n selection.transition().style('stroke', this.value);\n });\n\n var border_opacity_section = popup.append('p');\n border_opacity_section.append('span').html(_tr('app_page.layer_style_popup.border_opacity'));\n\n border_opacity_section.insert('input').attrs({ type: 'range', min: 0, max: 1, step: 0.1 }).styles({ width: '58px', 'vertical-align': 'middle', display: 'inline', float: 'right' }).property('value', border_opacity).on('change', function () {\n selection.style('stroke-opacity', this.value);\n border_opacity_section.select('#border_opacity_txt').html('' + this.value);\n });\n\n border_opacity_section.append('span').attr('id', 'border_opacity_txt').style('float', 'right').html(' ' + border_opacity);\n\n var border_width_section = popup.append('p').attr('class', 'line_elem');\n border_width_section.append('span').html(_tr('app_page.layer_style_popup.border_width'));\n border_width_section.insert('input').attrs({ type: 'number', min: 0, step: 0.1 }).styles({ width: '60px', float: 'right' }).property('value', stroke_width).on('change', function () {\n selection.style('stroke-width', this.value + 'px');\n data_manager.current_layers[layer_name]['stroke-width-const'] = +this.value;\n });\n\n var prop_val_content = popup.append('p');\n prop_val_content.append('span').html(_tr('app_page.layer_style_popup.field_symbol_size', { field: field_used }));\n prop_val_content.append('span').html(_tr('app_page.layer_style_popup.symbol_fixed_size'));\n prop_val_content.insert('input').styles({ width: '60px', float: 'right' }).attrs({ type: 'number', id: 'max_size_range', min: 0.1, step: 'any' }).property('value', data_manager.current_layers[layer_name].size[1]).on('change', function () {\n var f_size = +this.value;\n var prop_values = (0, _helpers_calc.prop_sizer3_e)(d_values, data_manager.current_layers[layer_name].size[0], f_size, type_symbol);\n data_manager.current_layers[layer_name].size[1] = f_size;\n redraw_prop_val(prop_values);\n });\n prop_val_content.append('span').style('float', 'right').html('(px)');\n\n var prop_val_content2 = popup.append('p').attr('class', 'line_elem');\n prop_val_content2.append('span').html(_tr('app_page.layer_style_popup.on_value'));\n prop_val_content2.insert('input').styles({ width: '100px', float: 'right' }).attrs({ type: 'number', min: 0.1, step: 0.1 }).property('value', +data_manager.current_layers[layer_name].size[0]).on('change', function () {\n var f_val = +this.value;\n var prop_values = (0, _helpers_calc.prop_sizer3_e)(d_values, f_val, data_manager.current_layers[layer_name].size[1], type_symbol);\n redraw_prop_val(prop_values);\n data_manager.current_layers[layer_name].size[0] = f_val;\n });\n\n var allow_move_section = popup.append('p');\n var chkbx = allow_move_section.insert('input').style('margin', '0').property('checked', data_manager.current_layers[layer_name].draggable ? true : null).attrs({\n type: 'checkbox',\n id: 'checkbox_move_symbol'\n });\n allow_move_section.insert('label').attr('for', 'checkbox_move_symbol').html(_tr('app_page.layer_style_popup.let_draggable'));\n chkbx.on('change', function () {\n if (this.checked) {\n data_manager.current_layers[layer_name].draggable = true;\n } else {\n data_manager.current_layers[layer_name].draggable = false;\n }\n });\n\n popup.append('p').style('text-align', 'center').insert('button').attrs({ id: 'reset_symb_loc', class: 'button_st4' }).text(_tr('app_page.layer_style_popup.reset_symbols_location')).on('click', function () {\n selection.transition().attrs(function (d) {\n var centroid = path.centroid(d.geometry);\n if (type_symbol === 'circle') {\n return {\n cx: centroid[0],\n cy: centroid[1]\n };\n } else {\n return {\n x: centroid[0] - +d.properties.prop_value / 2,\n y: centroid[1] - +d.properties.prop_value / 2\n };\n }\n });\n });\n make_generate_labels_section(popup, layer_name);\n}\n\n/**\n* Function triggered when the user want to edit a single label.\n*\n* @param {Node} label_node - The HTMLElement corresponding to this label.\n* @return {void}\n*\n*/\nfunction make_style_box_indiv_label(label_node) {\n var current_options = {\n size: label_node.style.fontSize,\n content: label_node.textContent,\n font: label_node.style.fontFamily,\n color: label_node.style.fill\n };\n // const new_params = {};\n if (current_options.color.startsWith('rgb')) {\n current_options.color = (0, _colors_helpers.rgb2hex)(current_options.color);\n }\n (0, _dialogs.check_remove_existing_box)('.styleTextAnnotation');\n (0, _dialogs.make_confirm_dialog2)('styleTextAnnotation', _tr('app_page.func_options.label.title_box_indiv'), { widthFitContent: true, draggable: true }).then(function (confirmed) {\n if (!confirmed) {\n label_node.style.fontsize = current_options.size; // eslint-disable-line no-param-reassign\n label_node.textContent = current_options.content; // eslint-disable-line no-param-reassign\n label_node.style.fill = current_options.color; // eslint-disable-line no-param-reassign\n label_node.style.fontFamily = current_options.font; // eslint-disable-line no-param-reassign\n }\n });\n var box_content = d3.select('.styleTextAnnotation').select('.modal-content').style('width', '300px').select('.modal-body').insert('div');\n var a = box_content.append('p').attr('class', 'line_elem');\n a.insert('span').html(_tr('app_page.func_options.label.font_size'));\n a.append('input').attrs({ type: 'number', id: 'font_size', min: 0, max: 34, step: 'any' }).styles({ width: '70px', float: 'right' }).property('value', +label_node.style.fontSize.slice(0, -2)).on('change', function () {\n label_node.style.fontSize = this.value + 'px'; // eslint-disable-line no-param-reassign\n });\n var b = box_content.append('p').attr('class', 'line_elem');\n b.insert('span').html(_tr('app_page.func_options.label.content'));\n b.append('input').attr('id', 'label_content').styles({ width: '70px', float: 'right' }).property('value', label_node.textContent).on('keyup', function () {\n label_node.textContent = this.value; // eslint-disable-line no-param-reassign\n });\n var c = box_content.append('p').attr('class', 'line_elem');\n c.insert('span').html(_tr('app_page.func_options.common.color'));\n c.append('input').attrs({ type: 'color', id: 'label_color' }).styles({ width: '70px', float: 'right' }).property('value', (0, _colors_helpers.rgb2hex)(label_node.style.fill)).on('change', function () {\n label_node.style.fill = this.value; // eslint-disable-line no-param-reassign\n });\n var d = box_content.append('p').attr('class', 'line_elem');\n d.insert('span').html(_tr('app_page.func_options.label.font_type'));\n var selec_fonts = d.append('select').style('float', 'right').on('change', function () {\n label_node.style.fontFamily = this.value; // eslint-disable-line no-param-reassign\n });\n\n _fonts.available_fonts.forEach(function (name) {\n selec_fonts.append('option').attr('value', name[1]).text(name[0]);\n });\n selec_fonts.node().value = label_node.style.fontFamily;\n}\n\n/**\n* Function creating a drop shadow on a layer.\n* Currently the properties (offset, gaussianBlur) of this shadow are hard-coded.\n*\n* @param {String} layerId - The id of the layer (ie. the \"id\" attribute, not the layer name)\n* @return {void}\n*\n*/\nvar createDropShadow = exports.createDropShadow = function createDropShadow(layerId) {\n var filt_to_use = document.createElementNS('http://www.w3.org/2000/svg', 'filter');\n filt_to_use.setAttribute('id', 'filt_' + layerId);\n // filt_to_use.setAttribute(\"x\", 0);\n // filt_to_use.setAttribute(\"y\", 0);\n filt_to_use.setAttribute('width', '200%');\n filt_to_use.setAttribute('height', '200%');\n var offset = document.createElementNS('http://www.w3.org/2000/svg', 'feOffset');\n offset.setAttributeNS(null, 'result', 'offOut');\n offset.setAttributeNS(null, 'in', 'SourceAlpha');\n offset.setAttributeNS(null, 'dx', '5');\n offset.setAttributeNS(null, 'dy', '5');\n var gaussian_blur = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');\n gaussian_blur.setAttributeNS(null, 'result', 'blurOut');\n gaussian_blur.setAttributeNS(null, 'in', 'offOut');\n gaussian_blur.setAttributeNS(null, 'stdDeviation', 10);\n var blend = document.createElementNS('http://www.w3.org/2000/svg', 'feBlend');\n blend.setAttributeNS(null, 'in', 'SourceGraphic');\n blend.setAttributeNS(null, 'in2', 'blurOut');\n blend.setAttributeNS(null, 'mode', 'normal');\n filt_to_use.appendChild(offset);\n filt_to_use.appendChild(gaussian_blur);\n filt_to_use.appendChild(blend);\n defs.node().appendChild(filt_to_use);\n svg_map.querySelector('#' + layerId).setAttribute('filter', 'url(#filt_' + layerId + ')');\n};\n\n/**\n* Return the id of a gaussian blur filter with the desired size (stdDeviation attribute)\n* if one with the same param already exists, its id is returned,\n* otherwise a new one is created, and its id is returned\n*/\n// var getBlurFilter = (function(size){\n// var count = 0;\n// return function(size) {\n// let blur_filts = defs.node().getElementsByClassName(\"blur\");\n// let blur_filt_to_use;\n// for(let i=0; i < blur_filts.length; i++){\n// if(blur_filts[i].querySelector(\"feGaussianBlur\")\n// .getAttributeNS(null, \"stdDeviation\") === size){\n// blur_filt_to_use = blur_filts[i];\n// }\n// }\n// if(!blur_filt_to_use){\n// count = count + 1;\n// blur_filt_to_use = document.createElementNS(\n// \"http://www.w3.org/2000/svg\", \"filter\");\n// blur_filt_to_use.setAttribute(\"id\",\"blurfilt\" + count);\n// blur_filt_to_use.setAttribute(\"class\", \"blur\");\n// var gaussianFilter = document.createElementNS(\n// \"http://www.w3.org/2000/svg\", \"feGaussianBlur\");\n// gaussianFilter.setAttributeNS(null, \"in\", \"SourceGraphic\");\n// gaussianFilter.setAttributeNS(null, \"stdDeviation\", size);\n// blur_filt_to_use.appendChild(gaussianFilter);\n// defs.node().appendChild(blur_filt_to_use);\n// }\n// return blur_filt_to_use.id;\n// };\n// })();\n\nfunction change_layer_name(old_name, new_name) {\n // Temporarily deactivate the tooltip displaying information under the cursor:\n var restart_info = false;\n if (document.getElementById('info_features').className === 'active') {\n (0, _interface.displayInfoOnMove)();\n restart_info = true;\n }\n var old_id = global._app.layer_to_id.get(old_name);\n var new_id = encodeId(new_name);\n data_manager.current_layers[new_name] = (0, _helpers.cloneObj)(data_manager.current_layers[old_name]);\n delete data_manager.current_layers[old_name];\n var list_elem = document.querySelector('li.' + old_id);\n list_elem.classList.remove(old_id);\n list_elem.classList.add(new_id);\n list_elem.setAttribute('layer_name', new_name);\n list_elem.innerHTML = list_elem.innerHTML.replace((0, _helpers.get_display_name_on_layer_list)(old_name), (0, _helpers.get_display_name_on_layer_list)(new_name));\n var b = svg_map.querySelector('#' + old_id);\n b.id = new_id;\n var lgd_elems = document.querySelectorAll('g[layer_name=\"' + old_name + '\"]');\n lgd_elems.forEach(function (lgd_elem) {\n lgd_elem.setAttribute('layer_name', new_name);\n lgd_elem.classList.remove('lgdf_' + old_id);\n lgd_elem.classList.add('lgdf_' + new_id);\n });\n if (Object.getOwnPropertyNames(data_manager.result_data).indexOf(old_name) > -1) {\n data_manager.result_data[new_name] = [].concat(data_manager.result_data[old_name]);\n delete data_manager.result_data[old_name];\n }\n if (Object.getOwnPropertyNames(data_manager.user_data).indexOf(old_name) > -1) {\n data_manager.user_data[new_name] = [].concat(data_manager.user_data[old_name]);\n delete data_manager.user_data[old_name];\n }\n if (data_manager.current_layers[new_name].targeted) {\n var name_section1 = document.getElementById('section1').querySelector('#input_geom');\n name_section1.innerHTML = name_section1.innerHTML.replace(old_name, new_name);\n if (window.fields_handler) {\n window.fields_handler.unfill();\n window.fields_handler.fill(new_name);\n }\n }\n if (_app.current_functionnality && _app.current_functionnality.name === 'smooth') {\n var mask_layers = document.querySelectorAll('select#stewart_mask > option');\n for (var i = 0; i < mask_layers.length; i++) {\n if (mask_layers[i].value === old_name) {\n mask_layers[i].value = new_name;\n mask_layers[i].innerHTML = new_name;\n }\n }\n }\n var other_layers = Object.getOwnPropertyNames(data_manager.current_layers);\n for (var _i2 = 0; _i2 < other_layers.length; _i2++) {\n if (data_manager.current_layers[other_layers[_i2]].ref_layer_name === old_name) {\n data_manager.current_layers[other_layers[_i2]].ref_layer_name = new_name;\n }\n }\n var select_export_lyr = document.getElementById('section5').querySelectorAll('#layer_to_export > option');\n for (var _i3 = 0; _i3 < select_export_lyr.length; _i3++) {\n if (select_export_lyr[_i3].value === old_name) {\n select_export_lyr[_i3].value = new_name;\n select_export_lyr[_i3].innerHTML = new_name;\n }\n }\n _app.layer_to_id.set(new_name, new_id);\n _app.id_to_layer.set(new_id, new_name);\n _app.layer_to_id.delete(old_name);\n _app.id_to_layer.delete(old_id);\n (0, _interface.binds_layers_buttons)(new_name);\n\n if (restart_info) {\n (0, _interface.displayInfoOnMove)();\n }\n}\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! bluebird */ \"./node_modules/bluebird/js/browser/bluebird.js\"), __webpack_require__(/*! ./../node_modules/webpack/buildin/global.js */ \"./node_modules/webpack/buildin/global.js\")))\n\n//# sourceURL=webpack:///./js/layers_style_popup.js?");
/***/ }),
@@ -478,7 +478,7 @@ eval("/* WEBPACK VAR INJECTION */(function(Promise) {\n\nObject.defineProperty(e
/***/ (function(module, exports, __webpack_require__) {
"use strict";
-eval("/* WEBPACK VAR INJECTION */(function(Promise, global) {\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nvar _i18next = __webpack_require__(/*! i18next */ \"./node_modules/i18next/dist/es/index.js\");\n\nvar _i18next2 = _interopRequireDefault(_i18next);\n\nvar _i18nextXhrBackend = __webpack_require__(/*! i18next-xhr-backend */ \"./node_modules/i18next-xhr-backend/index.js\");\n\nvar _i18nextXhrBackend2 = _interopRequireDefault(_i18nextXhrBackend);\n\nvar _locI18next = __webpack_require__(/*! loc-i18next */ \"./node_modules/loc-i18next/index.js\");\n\nvar _locI18next2 = _interopRequireDefault(_locI18next);\n\n__webpack_require__(/*! ./../css/style.css */ \"./css/style.css\");\n\n__webpack_require__(/*! ./../css/discretization.css */ \"./css/discretization.css\");\n\n__webpack_require__(/*! ./../node_modules/alertifyjs/build/css/alertify.min.css */ \"./node_modules/alertifyjs/build/css/alertify.min.css\");\n\n__webpack_require__(/*! ./../node_modules/alertifyjs/build/css/themes/semantic.min.css */ \"./node_modules/alertifyjs/build/css/themes/semantic.min.css\");\n\nvar _interface = __webpack_require__(/*! ./interface */ \"./js/interface.js\");\n\nvar _helpers = __webpack_require__(/*! ./helpers */ \"./js/helpers.js\");\n\nvar _helpers_math = __webpack_require__(/*! ./helpers_math */ \"./js/helpers_math.js\");\n\nvar _map_ctrl = __webpack_require__(/*! ./map_ctrl */ \"./js/map_ctrl.js\");\n\nvar _tooltips = __webpack_require__(/*! ./tooltips */ \"./js/tooltips.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nPromise.config({\n warnings: true,\n longStackTraces: true\n});\n\n// /*\n// * Memoization functions (naive LRU implementation)\n// *\n// */\n// global.Function.prototype.memoized = function (max_size = 25) {\n// this._memo = this._memo || { values: new Map(), stack: [], max_size: max_size };\n// const key = JSON.stringify(Array.prototype.slice.call(arguments));\n// let cache_value = this._memo.values.get(key);\n// if (cache_value !== undefined) {\n// return JSON.parse(cache_value);\n// }\n// cache_value = this.apply(this, arguments);\n// this._memo.values.set(key, JSON.stringify(cache_value));\n// this._memo.stack.push(key);\n// if (this._memo.stack.length >= this._memo.max_size) {\n// const old_key = this._memo.stack.shift();\n// this._memo.values.delete(old_key);\n// }\n// return cache_value;\n// };\n//\n// global.Function.prototype.memoize = function () {\n// const fn = this;\n// return function () {\n// return fn.memoized.apply(fn, arguments);\n// };\n// };\nglobal.i18next = _i18next2.default;\nglobal._tr = function () {\n return _i18next2.default.t.apply(_i18next2.default, arguments);\n};\nglobal.encodeId = function (layer_name) {\n return layer_name !== '' ? 'L_' + layer_name.replace(/[^a-zA-Z0-9_-]/g, function (match) {\n return '_' + match[0].charCodeAt(0).toString(16) + '_';\n }) : 'L_';\n};\n// global.encodeId = function(s) {\n// if (s === '') return 'L_';\n// return `L_${s.replace(/[^a-zA-Z0-9_-]/g, match => `_${match[0].charCodeAt(0).toString(16)}_`)}`;\n// }\n\nglobal._app = {\n current_functionnality: undefined,\n current_proj_name: 'NaturalEarth2',\n custom_palettes: new Map(),\n default_symbols: [],\n existing_lang: ['en', 'es', 'fr'],\n layer_to_id: new Map([['World', encodeId('World')], ['Graticule', encodeId('Graticule')]]),\n legendRedrawTimeout: null,\n id_to_layer: new Map([[encodeId('World'), 'World'], [encodeId('Graticule'), 'Graticule']]),\n targeted_layer_added: false,\n to_cancel: undefined,\n version: \"0.8.4\"\n};\n\nglobal.proj = d3.geoNaturalEarth2().scale(1).translate([0, 0]);\nglobal.path = d3.geoPath().projection(proj).pointRadius(4);\nglobal.t = proj.translate();\nglobal.s = proj.scale();\nglobal.w = (0, _helpers_math.Mround)(window.innerWidth - 361);\nglobal.h = window.innerHeight - 55;\n\n/*\nA bunch of global variable, storing oftently reused informations :\n - data_manager.user_data[layer_name] : will be an Array of Objects containing data for each features of the targeted layer\n (+ the joined features if a join is done)\n - data_manager.result_data[layer_name] : the same but for any eventual result layers (like Stewart, gridded, etc.)\n - data_manager.joined_dataset : the joined dataset (read with d3.csv then pushed in the first slot of this array)\n - data_manager.field_join_map : an array containg mapping between index of geom layer and index of ext. dataset\n - data_manager.current_layers : the main object describing **all** the layers on the map (incunding detailed (ie. by features) styling properties if needed)\n*/\nglobal.data_manager = {\n current_layers: {},\n dataset_name: null,\n joined_dataset: [],\n field_join_map: [],\n result_data: {},\n user_data: {}\n};\n\nfunction parseQuery(search) {\n var args = search.substring(1).split('&');\n var argsParsed = {};\n var arg = void 0,\n kvp = void 0,\n key = void 0,\n value = void 0;\n for (var i = 0; i < args.length; i++) {\n arg = args[i];\n if (arg.indexOf('=') === -1) {\n argsParsed[decodeURIComponent(arg).trim()] = true;\n } else {\n kvp = arg.split('=');\n key = decodeURIComponent(kvp[0]).trim();\n value = decodeURIComponent(kvp[1]).trim();\n argsParsed[key] = decodeURIComponent(kvp[1]).trim();\n }\n }\n return argsParsed;\n}\n\nfunction loadI18next(lang) {\n return new Promise(function (resolve, reject) {\n _i18next2.default.use(_i18nextXhrBackend2.default).init({\n debug: true,\n lng: lang,\n fallbackLng: _app.existing_lang[0],\n backend: {\n loadPath: 'static/locales/{{lng}}/translation.json'\n }\n }, function (err, tr) {\n if (err) reject(err);\n resolve(tr);\n });\n });\n}\n\nfunction getEpsgProjection() {\n return (0, _helpers.xhrequest)('GET', 'static/json/epsg.json', undefined, false);\n}\n\n(function () {\n Object.assign(global, (0, _map_ctrl.makeSvgMap)());\n // const { map_div, map, svg_map, defs } = makeSvgMap();\n // global.map_div = map_div;\n // global.map = map;\n // global.svg_map = svg_map;\n // global.defs = defs;\n var lang = docCookies.getItem('user_lang') || window.navigator.language.split('-')[0];\n var params = {};\n document.querySelector('noscript').remove();\n window.isIE = function () {\n return (/MSIE/i.test(navigator.userAgent) || /Trident\\/\\d./i.test(navigator.userAgent) || /Edge\\/\\d./i.test(navigator.userAgent)\n );\n }();\n // window.isOldMS_Firefox = (() => (/Firefox/i.test(navigator.userAgent)\n // && (/Windows NT 6.0/i.test(navigator.userAgent)\n // || /Windows NT 6.1/i.test(navigator.userAgent))) ? true : false\n // )();\n if (window.location.search) {\n var parsed_querystring = parseQuery(window.location.search);\n params.reload = parsed_querystring.reload;\n if (typeof history.replaceState !== 'undefined') {\n // replaceState should avoid creating a new entry on the history\n var obj = { Page: window.location.search, Url: window.location.pathname };\n history.replaceState(obj, obj.Page, obj.Url);\n }\n }\n\n lang = _app.existing_lang.indexOf(lang) > -1 ? lang : 'en';\n Promise.all([loadI18next(lang), getEpsgProjection()]).then(function (results) {\n var _results = _slicedToArray(results, 2),\n tr = _results[0],\n epsg_proj = _results[1];\n\n window.localize = _locI18next2.default.init(_i18next2.default);\n _app.epsg_projections = JSON.parse(epsg_proj);\n (0, _interface.setUpInterface)(params.reload);\n localize('.i18n');\n (0, _tooltips.bindTooltips)();\n });\n})();\n\n/**\n* Return the x and y position where the svg element is located\n* in the browser window.\n*\n* @return {Object} - An object with x and y properties.\n*/\nglobal.get_map_xy0 = function () {\n var bbox = svg_map.getBoundingClientRect();\n return { x: bbox.left, y: bbox.top };\n};\n\nglobal.get_bounding_rect = function (elem) {\n var _get_map_xy = get_map_xy0(),\n x = _get_map_xy.x,\n y = _get_map_xy.y;\n\n var bbox = elem.getBoundingClientRect();\n var a = {\n x: bbox.left - x,\n y: bbox.top - y,\n width: bbox.width ? bbox.width : bbox.right - bbox.left,\n height: bbox.height ? bbox.height : bbox.bottom - bbox.top\n };\n a.left = a.x;\n a.top = a.y;\n return a;\n};\n\nglobal.helper_esc_key_twbs_cb = function helper_esc_key_twbs_cb(_event, callback) {\n var evt = _event || window.event;\n var isEscape = 'key' in evt ? evt.key === 'Escape' || evt.key === 'Esc' : evt.keyCode === 27;\n if (isEscape) {\n evt.stopPropagation();\n if (callback) {\n callback();\n }\n }\n};\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! bluebird */ \"./node_modules/bluebird/js/browser/bluebird.js\"), __webpack_require__(/*! ./../node_modules/webpack/buildin/global.js */ \"./node_modules/webpack/buildin/global.js\")))\n\n//# sourceURL=webpack:///./js/main.js?");
+eval("/* WEBPACK VAR INJECTION */(function(Promise, global) {\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nvar _i18next = __webpack_require__(/*! i18next */ \"./node_modules/i18next/dist/es/index.js\");\n\nvar _i18next2 = _interopRequireDefault(_i18next);\n\nvar _i18nextXhrBackend = __webpack_require__(/*! i18next-xhr-backend */ \"./node_modules/i18next-xhr-backend/index.js\");\n\nvar _i18nextXhrBackend2 = _interopRequireDefault(_i18nextXhrBackend);\n\nvar _locI18next = __webpack_require__(/*! loc-i18next */ \"./node_modules/loc-i18next/index.js\");\n\nvar _locI18next2 = _interopRequireDefault(_locI18next);\n\n__webpack_require__(/*! ./../css/style.css */ \"./css/style.css\");\n\n__webpack_require__(/*! ./../css/discretization.css */ \"./css/discretization.css\");\n\n__webpack_require__(/*! ./../node_modules/alertifyjs/build/css/alertify.min.css */ \"./node_modules/alertifyjs/build/css/alertify.min.css\");\n\n__webpack_require__(/*! ./../node_modules/alertifyjs/build/css/themes/semantic.min.css */ \"./node_modules/alertifyjs/build/css/themes/semantic.min.css\");\n\nvar _interface = __webpack_require__(/*! ./interface */ \"./js/interface.js\");\n\nvar _helpers = __webpack_require__(/*! ./helpers */ \"./js/helpers.js\");\n\nvar _helpers_math = __webpack_require__(/*! ./helpers_math */ \"./js/helpers_math.js\");\n\nvar _map_ctrl = __webpack_require__(/*! ./map_ctrl */ \"./js/map_ctrl.js\");\n\nvar _tooltips = __webpack_require__(/*! ./tooltips */ \"./js/tooltips.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nPromise.config({\n warnings: true,\n longStackTraces: true\n});\n\n// /*\n// * Memoization functions (naive LRU implementation)\n// *\n// */\n// global.Function.prototype.memoized = function (max_size = 25) {\n// this._memo = this._memo || { values: new Map(), stack: [], max_size: max_size };\n// const key = JSON.stringify(Array.prototype.slice.call(arguments));\n// let cache_value = this._memo.values.get(key);\n// if (cache_value !== undefined) {\n// return JSON.parse(cache_value);\n// }\n// cache_value = this.apply(this, arguments);\n// this._memo.values.set(key, JSON.stringify(cache_value));\n// this._memo.stack.push(key);\n// if (this._memo.stack.length >= this._memo.max_size) {\n// const old_key = this._memo.stack.shift();\n// this._memo.values.delete(old_key);\n// }\n// return cache_value;\n// };\n//\n// global.Function.prototype.memoize = function () {\n// const fn = this;\n// return function () {\n// return fn.memoized.apply(fn, arguments);\n// };\n// };\nglobal.i18next = _i18next2.default;\nglobal._tr = function () {\n return _i18next2.default.t.apply(_i18next2.default, arguments);\n};\nglobal.encodeId = function (layer_name) {\n return layer_name !== '' ? 'L_' + layer_name.replace(/[^a-zA-Z0-9_-]/g, function (match) {\n return '_' + match[0].charCodeAt(0).toString(16) + '_';\n }) : 'L_';\n};\n// global.encodeId = function(s) {\n// if (s === '') return 'L_';\n// return `L_${s.replace(/[^a-zA-Z0-9_-]/g, match => `_${match[0].charCodeAt(0).toString(16)}_`)}`;\n// }\n\nglobal._app = {\n current_functionnality: undefined,\n current_proj_name: 'NaturalEarth2',\n custom_palettes: new Map(),\n default_symbols: [],\n existing_lang: ['en', 'es', 'fr'],\n layer_to_id: new Map([['World', encodeId('World')], ['Graticule', encodeId('Graticule')]]),\n legendRedrawTimeout: null,\n id_to_layer: new Map([[encodeId('World'), 'World'], [encodeId('Graticule'), 'Graticule']]),\n targeted_layer_added: false,\n to_cancel: undefined,\n version: \"0.8.5\"\n};\n\nglobal.proj = d3.geoNaturalEarth2().scale(1).translate([0, 0]);\nglobal.path = d3.geoPath().projection(proj).pointRadius(4);\nglobal.t = proj.translate();\nglobal.s = proj.scale();\nglobal.w = (0, _helpers_math.Mround)(window.innerWidth - 361);\nglobal.h = window.innerHeight - 55;\n\n/*\nA bunch of global variable, storing oftently reused informations :\n - data_manager.user_data[layer_name] : will be an Array of Objects containing data for each features of the targeted layer\n (+ the joined features if a join is done)\n - data_manager.result_data[layer_name] : the same but for any eventual result layers (like Stewart, gridded, etc.)\n - data_manager.joined_dataset : the joined dataset (read with d3.csv then pushed in the first slot of this array)\n - data_manager.field_join_map : an array containg mapping between index of geom layer and index of ext. dataset\n - data_manager.current_layers : the main object describing **all** the layers on the map (incunding detailed (ie. by features) styling properties if needed)\n*/\nglobal.data_manager = {\n current_layers: {},\n dataset_name: null,\n joined_dataset: [],\n field_join_map: [],\n result_data: {},\n user_data: {}\n};\n\nfunction parseQuery(search) {\n var args = search.substring(1).split('&');\n var argsParsed = {};\n var arg = void 0,\n kvp = void 0,\n key = void 0,\n value = void 0;\n for (var i = 0; i < args.length; i++) {\n arg = args[i];\n if (arg.indexOf('=') === -1) {\n argsParsed[decodeURIComponent(arg).trim()] = true;\n } else {\n kvp = arg.split('=');\n key = decodeURIComponent(kvp[0]).trim();\n value = decodeURIComponent(kvp[1]).trim();\n argsParsed[key] = decodeURIComponent(kvp[1]).trim();\n }\n }\n return argsParsed;\n}\n\nfunction loadI18next(lang) {\n return new Promise(function (resolve, reject) {\n _i18next2.default.use(_i18nextXhrBackend2.default).init({\n debug: true,\n lng: lang,\n fallbackLng: _app.existing_lang[0],\n backend: {\n loadPath: 'static/locales/{{lng}}/translation.json'\n }\n }, function (err, tr) {\n if (err) reject(err);\n resolve(tr);\n });\n });\n}\n\nfunction getEpsgProjection() {\n return (0, _helpers.xhrequest)('GET', 'static/json/epsg.json', undefined, false);\n}\n\n(function () {\n Object.assign(global, (0, _map_ctrl.makeSvgMap)());\n // const { map_div, map, svg_map, defs } = makeSvgMap();\n // global.map_div = map_div;\n // global.map = map;\n // global.svg_map = svg_map;\n // global.defs = defs;\n var lang = docCookies.getItem('user_lang') || window.navigator.language.split('-')[0];\n var params = {};\n document.querySelector('noscript').remove();\n window.isIE = function () {\n return (/MSIE/i.test(navigator.userAgent) || /Trident\\/\\d./i.test(navigator.userAgent) || /Edge\\/\\d./i.test(navigator.userAgent)\n );\n }();\n // window.isOldMS_Firefox = (() => (/Firefox/i.test(navigator.userAgent)\n // && (/Windows NT 6.0/i.test(navigator.userAgent)\n // || /Windows NT 6.1/i.test(navigator.userAgent))) ? true : false\n // )();\n if (window.location.search) {\n var parsed_querystring = parseQuery(window.location.search);\n params.reload = parsed_querystring.reload;\n if (typeof history.replaceState !== 'undefined') {\n // replaceState should avoid creating a new entry on the history\n var obj = { Page: window.location.search, Url: window.location.pathname };\n history.replaceState(obj, obj.Page, obj.Url);\n }\n }\n\n lang = _app.existing_lang.indexOf(lang) > -1 ? lang : 'en';\n Promise.all([loadI18next(lang), getEpsgProjection()]).then(function (results) {\n var _results = _slicedToArray(results, 2),\n tr = _results[0],\n epsg_proj = _results[1];\n\n window.localize = _locI18next2.default.init(_i18next2.default);\n _app.epsg_projections = JSON.parse(epsg_proj);\n (0, _interface.setUpInterface)(params.reload);\n localize('.i18n');\n (0, _tooltips.bindTooltips)();\n });\n})();\n\n/**\n* Return the x and y position where the svg element is located\n* in the browser window.\n*\n* @return {Object} - An object with x and y properties.\n*/\nglobal.get_map_xy0 = function () {\n var bbox = svg_map.getBoundingClientRect();\n return { x: bbox.left, y: bbox.top };\n};\n\nglobal.get_bounding_rect = function (elem) {\n var _get_map_xy = get_map_xy0(),\n x = _get_map_xy.x,\n y = _get_map_xy.y;\n\n var bbox = elem.getBoundingClientRect();\n var a = {\n x: bbox.left - x,\n y: bbox.top - y,\n width: bbox.width ? bbox.width : bbox.right - bbox.left,\n height: bbox.height ? bbox.height : bbox.bottom - bbox.top\n };\n a.left = a.x;\n a.top = a.y;\n return a;\n};\n\nglobal.helper_esc_key_twbs_cb = function helper_esc_key_twbs_cb(_event, callback) {\n var evt = _event || window.event;\n var isEscape = 'key' in evt ? evt.key === 'Escape' || evt.key === 'Esc' : evt.keyCode === 27;\n if (isEscape) {\n evt.stopPropagation();\n if (callback) {\n callback();\n }\n }\n};\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! bluebird */ \"./node_modules/bluebird/js/browser/bluebird.js\"), __webpack_require__(/*! ./../node_modules/webpack/buildin/global.js */ \"./node_modules/webpack/buildin/global.js\")))\n\n//# sourceURL=webpack:///./js/main.js?");
/***/ }),
@@ -490,7 +490,7 @@ eval("/* WEBPACK VAR INJECTION */(function(Promise, global) {\n\nvar _slicedToAr
/***/ (function(module, exports, __webpack_require__) {
"use strict";
-eval("/* WEBPACK VAR INJECTION */(function(global) {\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.canvas_rotation_value = exports.zoom = undefined;\nexports.makeSvgMap = makeSvgMap;\nexports.zoom_without_redraw = zoom_without_redraw;\nexports.reproj_symbol_layer = reproj_symbol_layer;\nexports.rotate_global = rotate_global;\nexports.redraw_legends_symbols = redraw_legends_symbols;\nexports.zoomClick = zoomClick;\nexports.handle_bg_color = handle_bg_color;\nexports.canvas_mod_size = canvas_mod_size;\n\nvar _alertifyjs = __webpack_require__(/*! alertifyjs */ \"./node_modules/alertifyjs/build/alertify.js\");\n\nvar _alertifyjs2 = _interopRequireDefault(_alertifyjs);\n\nvar _helpers_calc = __webpack_require__(/*! ./helpers_calc */ \"./js/helpers_calc.js\");\n\nvar _helpers_math = __webpack_require__(/*! ./helpers_math */ \"./js/helpers_math.js\");\n\nvar _legend = __webpack_require__(/*! ./legend */ \"./js/legend.js\");\n\nvar _scalebar = __webpack_require__(/*! ./layout_features/scalebar */ \"./js/layout_features/scalebar.js\");\n\nvar _north_arrow = __webpack_require__(/*! ./layout_features/north_arrow */ \"./js/layout_features/north_arrow.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar zoom = exports.zoom = d3.zoom().on('zoom', zoom_without_redraw);\nvar canvas_rotation_value = exports.canvas_rotation_value = null;\n\nfunction makeSvgMap() {\n // The div containing the svg map:\n var map_div = d3.select('#map');\n map_div.selectAll('*').remove();\n\n // The 'map':\n // (so actually the `map` variable is a reference to the d3 selection\n // of the main `svg` element on which we are drawing)\n var map = map_div.styles({ width: w + 'px', height: h + 'px' }).append('svg').attrs({ id: 'svg_map', width: w, height: h }).styles({ position: 'absolute', 'background-color': 'rgba(255, 255, 255, 0)' }).on('contextmenu', function () {\n d3.event.preventDefault();\n }).call(zoom);\n\n var svg_map = map.node();\n var defs = map.append('defs');\n return {\n map_div: map_div, map: map, svg_map: svg_map, defs: defs\n };\n}\n\nfunction zoom_without_redraw() {\n var rot_val = canvas_rotation_value || '';\n var transform = void 0;\n var t_val = void 0;\n if (!d3.event || !d3.event.transform || !d3.event.sourceEvent) {\n transform = d3.zoomTransform(svg_map);\n t_val = transform.toString() + rot_val;\n map.selectAll('.layer').transition().duration(50).style('stroke-width', function () {\n var lyr_name = global._app.id_to_layer.get(this.id);\n return data_manager.current_layers[lyr_name].fixed_stroke ? this.style.strokeWidth : data_manager.current_layers[lyr_name]['stroke-width-const'] / transform.k + 'px';\n }).attr('transform', t_val);\n map.selectAll('.scalable-legend').transition().duration(50).attr('transform', t_val);\n } else {\n t_val = d3.event.transform.toString() + rot_val;\n map.selectAll('.layer').transition().duration(50).style('stroke-width', function () {\n var lyr_name = global._app.id_to_layer.get(this.id);\n return data_manager.current_layers[lyr_name].fixed_stroke ? this.style.strokeWidth : data_manager.current_layers[lyr_name]['stroke-width-const'] / d3.event.transform.k + 'px';\n }).attr('transform', t_val);\n map.selectAll('.scalable-legend').transition().duration(50).attr('transform', t_val);\n }\n\n if (_scalebar.scaleBar.displayed) {\n _scalebar.scaleBar.update();\n }\n\n if (_app.legendRedrawTimeout) {\n clearTimeout(_app.legendRedrawTimeout);\n }\n _app.legendRedrawTimeout = setTimeout(redraw_legends_symbols, 650);\n var zoom_params = svg_map.__zoom;\n var _k = proj.scale() * zoom_params.k;\n // let zoom_k_scale = proj.scale() * zoom_params.k;\n document.getElementById('input-center-x').value = (0, _helpers_calc.round_value)(zoom_params.x, 2);\n document.getElementById('input-center-y').value = (0, _helpers_calc.round_value)(zoom_params.y, 2);\n document.getElementById('input-scale-k').value = _k > 2 || _k < -2 ? (0, _helpers_calc.round_value)(_k, 2) : (0, _helpers_calc.round_value)(_k, Math.round((0, _helpers_calc.get_nb_decimals)(_k) / 2));\n // let a = document.getElementById('form_projection'),\n // disabled_val = (zoom_k_scale > 200) && (window._target_layer_file != undefined || data_manager.result_data.length > 1)? '' : 'disabled';\n // a.querySelector('option[value=\"ConicConformalSec\"]').disabled = disabled_val;\n // a.querySelector('option[value=\"ConicConformalTangent\"]').disabled = disabled_val;\n}\n\n/**\n* Function redrawing the prop symbol / img / labels / waffles when the projection\n* changes (also taking care of redrawing point layer with appropriate 'pointRadius')\n*\n* @return {void}\n*\n*/\nfunction reproj_symbol_layer() {\n /* eslint-disable no-loop-func */\n var layers = Object.keys(data_manager.current_layers);\n var n_layers = layers.length;\n var lyr_name = void 0;\n for (var ix = 0; ix < n_layers; ix++) {\n lyr_name = layers[ix];\n if (data_manager.current_layers[lyr_name].renderer && (data_manager.current_layers[lyr_name].renderer.indexOf('PropSymbol') > -1 || data_manager.current_layers[lyr_name].renderer.indexOf('TypoSymbols') > -1 || data_manager.current_layers[lyr_name].renderer.indexOf('Label') > -1)) {\n var symbol = data_manager.current_layers[lyr_name].symbol;\n\n if (symbol === 'text') {\n // Reproject the labels :\n map.select('#' + global._app.layer_to_id.get(lyr_name)).selectAll(symbol).attrs(function (d) {\n var pt = path.centroid(d.geometry);\n return { x: pt[0], y: pt[1] };\n });\n } else if (symbol === 'image') {\n // Reproject pictograms :\n map.select('#' + global._app.layer_to_id.get(lyr_name)).selectAll(symbol).attrs(function (d) {\n var coords = path.centroid(d.geometry),\n size = +this.getAttribute('width').replace('px', '') / 2;\n return { x: coords[0] - size, y: coords[1] - size };\n });\n } else if (symbol === 'circle') {\n // Reproject Prop Symbol :\n map.select('#' + global._app.layer_to_id.get(lyr_name)).selectAll(symbol).style('display', function (d) {\n return isNaN(+path.centroid(d)[0]) ? 'none' : undefined;\n }).attrs(function (d) {\n var centroid = path.centroid(d);\n return {\n r: d.properties.prop_value,\n cx: centroid[0],\n cy: centroid[1]\n };\n });\n } else if (symbol === 'rect') {\n // Reproject Prop Symbol :\n map.select('#' + global._app.layer_to_id.get(lyr_name)).selectAll(symbol).style('display', function (d) {\n return isNaN(+path.centroid(d)[0]) ? 'none' : undefined;\n }).attrs(function (d) {\n var centroid = path.centroid(d),\n size = d.properties.prop_value;\n return {\n height: size,\n width: size,\n x: centroid[0] - size / 2,\n y: centroid[1] - size / 2\n };\n });\n }\n } else if (data_manager.current_layers[lyr_name].pointRadius !== undefined) {\n map.select('#' + global._app.layer_to_id.get(lyr_name)).selectAll('path').attr('d', path.pointRadius(data_manager.current_layers[lyr_name].pointRadius));\n } else if (data_manager.current_layers[lyr_name].renderer === 'TwoStocksWaffle') {\n var selection = svg_map.querySelector('#' + global._app.layer_to_id.get(lyr_name)).querySelectorAll('g');\n var nbFt = selection.length;\n if (data_manager.current_layers[lyr_name].symbol === 'circle') {\n for (var i = 0; i < nbFt; i++) {\n var centroid = path.centroid({\n type: 'Point',\n coordinates: selection[i].__data__.properties.centroid\n });\n var symbols = selection[i].querySelectorAll('circle');\n for (var j = 0, nb_symbol = symbols.length; j < nb_symbol; j++) {\n symbols[j].setAttribute('cx', centroid[0]);\n symbols[j].setAttribute('cy', centroid[1]);\n }\n }\n } else {\n for (var _i = 0; _i < nbFt; _i++) {\n var _centroid = path.centroid({\n type: 'Point',\n coordinates: selection[_i].__data__.properties.centroid\n });\n var _symbols = selection[_i].querySelectorAll('rect');\n for (var _j = 0, _nb_symbol = _symbols.length; _j < _nb_symbol; _j++) {\n _symbols[_j].setAttribute('x', _centroid[0]);\n _symbols[_j].setAttribute('y', _centroid[1]);\n }\n }\n }\n }\n }\n /* eslint-enable no-loop-func */\n}\n\nfunction rotate_global(angle) {\n exports.canvas_rotation_value = canvas_rotation_value = ['rotate(', angle, ')'].join('');\n var zoom_transform = d3.zoomTransform(svg_map);\n\n map.selectAll('g.layer').transition().duration(10).attr('transform', canvas_rotation_value + ',translate(' + [zoom_transform.x, zoom_transform.y] + '),scale(' + zoom_transform.k + ')');\n\n if (_north_arrow.northArrow.displayed) {\n var current_rotate = !isNaN(+_north_arrow.northArrow.svg_node.attr('rotate')) ? +_north_arrow.northArrow.svg_node.attr('rotate') : 0;\n _north_arrow.northArrow.svg_node.attr('transform', 'rotate(' + (+angle + current_rotate) + ',' + _north_arrow.northArrow.x_center + ', ' + _north_arrow.northArrow.y_center + ')');\n }\n zoom_without_redraw();\n}\n\nfunction redraw_legends_symbols(targeted_node) {\n var legend_nodes = targeted_node ? [targeted_node] : document.querySelectorAll('#legend_root_symbol,#legend_root_layout');\n var hide = svg_map.__zoom.k > 5 || svg_map.__zoom.k < 0.15;\n var hidden_message = false;\n\n for (var i = 0; i < legend_nodes.length; ++i) {\n var layer_id = legend_nodes[i].classList[2].split('lgdf_')[1],\n layer_name = global._app.id_to_layer.get(layer_id),\n rendered_field = data_manager.current_layers[layer_name].rendered_field;\n var transform_param = legend_nodes[i].getAttribute('transform'),\n rounding_precision = legend_nodes[i].getAttribute('rounding_precision'),\n lgd_title = legend_nodes[i].querySelector('#legendtitle').innerHTML,\n lgd_subtitle = legend_nodes[i].querySelector('#legendsubtitle').innerHTML,\n notes = legend_nodes[i].querySelector('#legend_bottom_note').innerHTML;\n\n var rect_fill_value = legend_nodes[i].getAttribute('visible_rect') === 'true' ? {\n color: legend_nodes[i].querySelector('#under_rect').style.fill,\n opacity: legend_nodes[i].querySelector('#under_rect').style.fillOpacity\n } : undefined;\n\n var display_value = legend_nodes[i].getAttribute('display'),\n visible = legend_nodes[i].style.visibility;\n var type_lgd_layout = data_manager.current_layers[layer_name].type;\n var new_lgd = void 0;\n\n if (!rendered_field && type_lgd_layout === 'Point') {\n var text_value = legend_nodes[i].querySelector('g.lg.legend_0 > text').innerHTML;\n legend_nodes[i].remove();\n (0, _legend.createLegend_layout)(layer_name, type_lgd_layout, lgd_title, lgd_subtitle, rect_fill_value, text_value, notes);\n\n new_lgd = document.querySelector(['#legend_root_layout.lgdf_', layer_id].join(''));\n } else if (rendered_field) {\n var nested = legend_nodes[i].getAttribute('nested'),\n join_line = legend_nodes[i].getAttribute('join_line');\n\n legend_nodes[i].remove();\n (0, _legend.createLegend_symbol)(layer_name, rendered_field, lgd_title, lgd_subtitle, nested, join_line, rect_fill_value, rounding_precision, notes);\n new_lgd = document.querySelector(['#legend_root_symbol.lgdf_', layer_id].join(''));\n } else {\n continue;\n }\n new_lgd.style.visibility = visible;\n if (transform_param) {\n new_lgd.setAttribute('transform', transform_param);\n }\n if (display_value) {\n new_lgd.setAttribute('display', display_value);\n } else if (hide && rendered_field) {\n new_lgd.setAttribute('display', 'none');\n hidden_message = true;\n }\n }\n if (hidden_message) {\n _alertifyjs2.default.notify(_tr('app_page.notification.warning_deactivation_prop_symbol_legend'), 'warning', 5);\n }\n\n // if (!targeted_node) {\n var legend_nodes_links_discont = document.querySelectorAll('#legend_root_lines_class');\n for (var _i2 = 0; _i2 < legend_nodes_links_discont.length; ++_i2) {\n var _layer_id = legend_nodes_links_discont[_i2].classList[2].split('lgdf_')[1],\n _layer_name = global._app.id_to_layer.get(_layer_id),\n _rendered_field = data_manager.current_layers[_layer_name].rendered_field,\n _display_value = legend_nodes_links_discont[_i2].getAttribute('display'),\n _visible = legend_nodes_links_discont[_i2].style.visibility;\n\n var _transform_param = legend_nodes_links_discont[_i2].getAttribute('transform'),\n _rounding_precision = legend_nodes_links_discont[_i2].getAttribute('rounding_precision'),\n _lgd_title = legend_nodes_links_discont[_i2].querySelector('#legendtitle').innerHTML,\n _lgd_subtitle = legend_nodes_links_discont[_i2].querySelector('#legendsubtitle').innerHTML,\n _notes = legend_nodes_links_discont[_i2].querySelector('#legend_bottom_note').innerHTML;\n\n var _rect_fill_value = legend_nodes_links_discont[_i2].getAttribute('visible_rect') === 'true' ? {\n color: legend_nodes_links_discont[_i2].querySelector('#under_rect').style.fill,\n opacity: legend_nodes_links_discont[_i2].querySelector('#under_rect').style.fillOpacity\n } : undefined;\n\n legend_nodes_links_discont[_i2].remove();\n (0, _legend.createLegend_discont_links)(_layer_name, _rendered_field, _lgd_title, _lgd_subtitle, _rect_fill_value, _rounding_precision, _notes);\n var _new_lgd = document.querySelector(['#legend_root_lines_class.lgdf_', _layer_id].join(''));\n _new_lgd.style.visibility = _visible;\n if (_transform_param) {\n _new_lgd.setAttribute('transform', _transform_param);\n }\n if (_display_value) {\n _new_lgd.setAttribute('display', _display_value);\n }\n }\n}\n\nfunction interpolateZoom(translate, scale) {\n var transform = d3.zoomTransform(svg_map);\n return d3.transition().duration(225).tween('zoom', function () {\n var iTranslate = d3.interpolate([transform.x, transform.y], translate);\n var iScale = d3.interpolate(transform.k, scale);\n return function (t_value) {\n svg_map.__zoom.k = iScale(t_value);\n var _t = iTranslate(t_value);\n svg_map.__zoom.x = _t[0];\n svg_map.__zoom.y = _t[1];\n zoom_without_redraw();\n };\n });\n}\n\nfunction zoomClick() {\n if (map_div.select('#hand_button').classed('locked')) return;\n var direction = this.id === 'zoom_in' ? 1 : -1,\n factor = 0.1,\n center = [w / 2, h / 2],\n transform = d3.zoomTransform(svg_map),\n translate = [transform.x, transform.y],\n view = { x: translate[0], y: translate[1], k: transform.k };\n var target_zoom = 1,\n translate0 = [],\n l = [];\n d3.event.preventDefault();\n target_zoom = transform.k * (1 + factor * direction);\n translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k];\n view.k = target_zoom;\n l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y];\n view.x += center[0] - l[0];\n view.y += center[1] - l[1];\n interpolateZoom([view.x, view.y], view.k);\n}\n\n// Change color of the background\n// (ie the parent \"svg\" element on the top of which group of elements have been added)\nfunction handle_bg_color(color) {\n map.style('background-color', color);\n}\n\n/** Function triggered by the change of map/canvas size\n* @param {Array} shape - An Array of two elements : [width, height] to use;\n* generally only used once at the time so `shape` values\n* are like [null, 750] or [800, null]\n* but also works with the 2 params together like [800, 750])\n*/\nfunction canvas_mod_size(shape) {\n if (shape[0]) {\n w = +shape[0];\n map.attr('width', w).call(zoom_without_redraw);\n map_div.style('width', w + 'px');\n if (w + 360 + 33 < window.innerWidth) {\n document.querySelector('.light-menu').style.right = '-33px';\n } else {\n document.querySelector('.light-menu').style.right = '0px';\n }\n }\n if (shape[1]) {\n h = +shape[1];\n map.attr('height', h).call(zoom_without_redraw);\n map_div.style('height', h + 'px');\n }\n (0, _legend.move_legends)();\n\n // Lets update the corresponding fields in the export section :\n var ratio = void 0;\n var format = document.getElementById('select_png_format').value;\n if (format === 'web') {\n ratio = 1;\n } else if (format === 'user_defined') {\n ratio = 118.11;\n } else {\n return;\n }\n // const zoom_params = svg_map.__zoom;\n document.getElementById('export_png_width').value = (0, _helpers_math.Mround)(w * ratio * 10) / 10;\n document.getElementById('export_png_height').value = (0, _helpers_math.Mround)(h * ratio * 10) / 10;\n document.getElementById('input-width').value = w;\n document.getElementById('input-height').value = h;\n}\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../node_modules/webpack/buildin/global.js */ \"./node_modules/webpack/buildin/global.js\")))\n\n//# sourceURL=webpack:///./js/map_ctrl.js?");
+eval("/* WEBPACK VAR INJECTION */(function(global) {\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.canvas_rotation_value = exports.zoom = undefined;\nexports.makeSvgMap = makeSvgMap;\nexports.zoom_without_redraw = zoom_without_redraw;\nexports.reproj_symbol_layer = reproj_symbol_layer;\nexports.rotate_global = rotate_global;\nexports.redraw_legends_symbols = redraw_legends_symbols;\nexports.zoomClick = zoomClick;\nexports.handle_bg_color = handle_bg_color;\nexports.canvas_mod_size = canvas_mod_size;\n\nvar _alertifyjs = __webpack_require__(/*! alertifyjs */ \"./node_modules/alertifyjs/build/alertify.js\");\n\nvar _alertifyjs2 = _interopRequireDefault(_alertifyjs);\n\nvar _helpers_calc = __webpack_require__(/*! ./helpers_calc */ \"./js/helpers_calc.js\");\n\nvar _helpers_math = __webpack_require__(/*! ./helpers_math */ \"./js/helpers_math.js\");\n\nvar _legend = __webpack_require__(/*! ./legend */ \"./js/legend.js\");\n\nvar _scalebar = __webpack_require__(/*! ./layout_features/scalebar */ \"./js/layout_features/scalebar.js\");\n\nvar _north_arrow = __webpack_require__(/*! ./layout_features/north_arrow */ \"./js/layout_features/north_arrow.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar zoom = exports.zoom = d3.zoom().on('zoom', zoom_without_redraw);\nvar canvas_rotation_value = exports.canvas_rotation_value = null;\n\nfunction makeSvgMap() {\n // The div containing the svg map:\n var map_div = d3.select('#map');\n map_div.selectAll('*').remove();\n\n // The 'map':\n // (so actually the `map` variable is a reference to the d3 selection\n // of the main `svg` element on which we are drawing)\n var map = map_div.styles({ width: w + 'px', height: h + 'px' }).append('svg').attrs({ id: 'svg_map', width: w, height: h }).styles({ position: 'absolute', 'background-color': 'rgba(255, 255, 255, 0)' }).on('contextmenu', function () {\n d3.event.preventDefault();\n }).call(zoom);\n\n var svg_map = map.node();\n var defs = map.append('defs');\n return {\n map_div: map_div, map: map, svg_map: svg_map, defs: defs\n };\n}\n\nfunction zoom_without_redraw() {\n var rot_val = canvas_rotation_value || '';\n var transform = void 0;\n var t_val = void 0;\n if (!d3.event || !d3.event.transform || !d3.event.sourceEvent) {\n transform = d3.zoomTransform(svg_map);\n t_val = transform.toString() + rot_val;\n map.selectAll('.layer').transition().duration(50).style('stroke-width', function () {\n var lyr_name = global._app.id_to_layer.get(this.id);\n return data_manager.current_layers[lyr_name].fixed_stroke ? this.style.strokeWidth : data_manager.current_layers[lyr_name]['stroke-width-const'] / transform.k + 'px';\n }).attr('transform', t_val);\n map.selectAll('.scalable-legend').transition().duration(50).attr('transform', t_val);\n } else {\n t_val = d3.event.transform.toString() + rot_val;\n map.selectAll('.layer').transition().duration(50).style('stroke-width', function () {\n var lyr_name = global._app.id_to_layer.get(this.id);\n return data_manager.current_layers[lyr_name].fixed_stroke ? this.style.strokeWidth : data_manager.current_layers[lyr_name]['stroke-width-const'] / d3.event.transform.k + 'px';\n }).attr('transform', t_val);\n map.selectAll('.scalable-legend').transition().duration(50).attr('transform', t_val);\n }\n\n if (_scalebar.scaleBar.displayed) {\n _scalebar.scaleBar.update();\n }\n\n if (_app.legendRedrawTimeout) {\n clearTimeout(_app.legendRedrawTimeout);\n }\n _app.legendRedrawTimeout = setTimeout(redraw_legends_symbols, 650);\n var zoom_params = svg_map.__zoom;\n var _k = proj.scale() * zoom_params.k;\n // let zoom_k_scale = proj.scale() * zoom_params.k;\n document.getElementById('input-center-x').value = (0, _helpers_calc.round_value)(zoom_params.x, 2);\n document.getElementById('input-center-y').value = (0, _helpers_calc.round_value)(zoom_params.y, 2);\n document.getElementById('input-scale-k').value = _k > 2 || _k < -2 ? (0, _helpers_calc.round_value)(_k, 2) : (0, _helpers_calc.round_value)(_k, Math.round((0, _helpers_calc.get_nb_decimals)(_k) / 2));\n // let a = document.getElementById('form_projection'),\n // disabled_val = (zoom_k_scale > 200) && (window._target_layer_file != undefined || data_manager.result_data.length > 1)? '' : 'disabled';\n // a.querySelector('option[value=\"ConicConformalSec\"]').disabled = disabled_val;\n // a.querySelector('option[value=\"ConicConformalTangent\"]').disabled = disabled_val;\n}\n\n/**\n* Function redrawing the prop symbol / img / labels / waffles when the projection\n* changes (also taking care of redrawing point layer with appropriate 'pointRadius')\n*\n* @return {void}\n*\n*/\nfunction reproj_symbol_layer() {\n /* eslint-disable no-loop-func */\n var layers = Object.keys(data_manager.current_layers);\n var n_layers = layers.length;\n var lyr_name = void 0;\n for (var ix = 0; ix < n_layers; ix++) {\n lyr_name = layers[ix];\n if (data_manager.current_layers[lyr_name].renderer && (data_manager.current_layers[lyr_name].renderer.indexOf('PropSymbol') > -1 || data_manager.current_layers[lyr_name].renderer.indexOf('TypoSymbols') > -1 || data_manager.current_layers[lyr_name].renderer.indexOf('Label') > -1)) {\n var symbol = data_manager.current_layers[lyr_name].symbol;\n\n if (symbol === 'text') {\n // Reproject the labels :\n map.select('#' + global._app.layer_to_id.get(lyr_name)).selectAll(symbol).attrs(function (d) {\n var pt = path.centroid(d.geometry);\n return { x: pt[0], y: pt[1] };\n });\n } else if (symbol === 'image') {\n // Reproject pictograms :\n map.select('#' + global._app.layer_to_id.get(lyr_name)).selectAll(symbol).attrs(function (d) {\n var coords = path.centroid(d.geometry),\n size = +this.getAttribute('width').replace('px', '') / 2;\n return { x: coords[0] - size, y: coords[1] - size };\n });\n } else if (symbol === 'circle') {\n // Reproject Prop Symbol :\n map.select('#' + global._app.layer_to_id.get(lyr_name)).selectAll(symbol).style('display', function (d) {\n return isNaN(+path.centroid(d)[0]) ? 'none' : undefined;\n }).attrs(function (d) {\n var centroid = path.centroid(d);\n return {\n r: d.properties.prop_value,\n cx: centroid[0],\n cy: centroid[1]\n };\n });\n } else if (symbol === 'rect') {\n // Reproject Prop Symbol :\n map.select('#' + global._app.layer_to_id.get(lyr_name)).selectAll(symbol).style('display', function (d) {\n return isNaN(+path.centroid(d)[0]) ? 'none' : undefined;\n }).attrs(function (d) {\n var centroid = path.centroid(d),\n size = d.properties.prop_value;\n return {\n height: size,\n width: size,\n x: centroid[0] - size / 2,\n y: centroid[1] - size / 2\n };\n });\n }\n } else if (data_manager.current_layers[lyr_name].pointRadius !== undefined) {\n map.select('#' + global._app.layer_to_id.get(lyr_name)).selectAll('path').attr('d', path.pointRadius(data_manager.current_layers[lyr_name].pointRadius));\n } else if (data_manager.current_layers[lyr_name].renderer === 'TwoStocksWaffle') {\n var selection = svg_map.querySelector('#' + global._app.layer_to_id.get(lyr_name)).querySelectorAll('g');\n var nbFt = selection.length;\n if (data_manager.current_layers[lyr_name].symbol === 'circle') {\n for (var i = 0; i < nbFt; i++) {\n var centroid = path.centroid({\n type: 'Point',\n coordinates: selection[i].__data__.properties.centroid\n });\n var symbols = selection[i].querySelectorAll('circle');\n for (var j = 0, nb_symbol = symbols.length; j < nb_symbol; j++) {\n symbols[j].setAttribute('cx', centroid[0]);\n symbols[j].setAttribute('cy', centroid[1]);\n }\n }\n } else {\n for (var _i = 0; _i < nbFt; _i++) {\n var _centroid = path.centroid({\n type: 'Point',\n coordinates: selection[_i].__data__.properties.centroid\n });\n var _symbols = selection[_i].querySelectorAll('rect');\n for (var _j = 0, _nb_symbol = _symbols.length; _j < _nb_symbol; _j++) {\n _symbols[_j].setAttribute('x', _centroid[0]);\n _symbols[_j].setAttribute('y', _centroid[1]);\n }\n }\n }\n }\n }\n /* eslint-enable no-loop-func */\n}\n\nfunction rotate_global(angle) {\n exports.canvas_rotation_value = canvas_rotation_value = ['rotate(', angle, ')'].join('');\n var zoom_transform = d3.zoomTransform(svg_map);\n\n map.selectAll('g.layer').transition().duration(10).attr('transform', canvas_rotation_value + ',translate(' + [zoom_transform.x, zoom_transform.y] + '),scale(' + zoom_transform.k + ')');\n\n if (_north_arrow.northArrow.displayed) {\n var current_rotate = !isNaN(+_north_arrow.northArrow.svg_node.attr('rotate')) ? +_north_arrow.northArrow.svg_node.attr('rotate') : 0;\n _north_arrow.northArrow.svg_node.attr('transform', 'rotate(' + (+angle + current_rotate) + ',' + _north_arrow.northArrow.x_center + ', ' + _north_arrow.northArrow.y_center + ')');\n }\n zoom_without_redraw();\n}\n\nfunction redraw_legends_symbols(targeted_node) {\n var legend_nodes = targeted_node ? [targeted_node] : document.querySelectorAll('#legend_root_symbol,#legend_root_layout');\n var hide = svg_map.__zoom.k > 5 || svg_map.__zoom.k < 0.15;\n var hidden_message = false;\n\n for (var i = 0; i < legend_nodes.length; ++i) {\n var layer_id = legend_nodes[i].classList[2].split('lgdf_')[1],\n layer_name = global._app.id_to_layer.get(layer_id),\n rendered_field = data_manager.current_layers[layer_name].rendered_field;\n var transform_param = legend_nodes[i].getAttribute('transform'),\n rounding_precision = legend_nodes[i].getAttribute('rounding_precision'),\n lgd_title = legend_nodes[i].querySelector('#legendtitle').innerHTML,\n lgd_subtitle = legend_nodes[i].querySelector('#legendsubtitle').innerHTML,\n notes = legend_nodes[i].querySelector('#legend_bottom_note').innerHTML;\n\n var rect_fill_value = legend_nodes[i].getAttribute('visible_rect') === 'true' ? {\n color: legend_nodes[i].querySelector('#under_rect').style.fill,\n opacity: legend_nodes[i].querySelector('#under_rect').style.fillOpacity\n } : undefined;\n\n var display_value = legend_nodes[i].getAttribute('display'),\n visible = legend_nodes[i].style.visibility;\n var type_lgd_layout = data_manager.current_layers[layer_name].type;\n var new_lgd = void 0;\n\n if (!rendered_field && type_lgd_layout === 'Point') {\n var text_value = legend_nodes[i].querySelector('g.lg.legend_0 > text').innerHTML;\n legend_nodes[i].remove();\n (0, _legend.createLegend_layout)(layer_name, type_lgd_layout, lgd_title, lgd_subtitle, rect_fill_value, text_value, notes);\n\n new_lgd = document.querySelector(['#legend_root_layout.lgdf_', layer_id].join(''));\n } else if (rendered_field && ['Carto_doug', 'OlsonCarto'].indexOf(data_manager.current_layers[layer_name].renderer) < 0) {\n var nested = legend_nodes[i].getAttribute('nested'),\n join_line = legend_nodes[i].getAttribute('join_line');\n\n legend_nodes[i].remove();\n (0, _legend.createLegend_symbol)(layer_name, rendered_field, lgd_title, lgd_subtitle, nested, join_line, rect_fill_value, rounding_precision, notes);\n new_lgd = document.querySelector(['#legend_root_symbol.lgdf_', layer_id].join(''));\n } else {\n continue;\n }\n new_lgd.style.visibility = visible;\n if (transform_param) {\n new_lgd.setAttribute('transform', transform_param);\n }\n if (display_value) {\n new_lgd.setAttribute('display', display_value);\n } else if (hide && rendered_field) {\n new_lgd.setAttribute('display', 'none');\n hidden_message = true;\n }\n }\n if (hidden_message) {\n _alertifyjs2.default.notify(_tr('app_page.notification.warning_deactivation_prop_symbol_legend'), 'warning', 5);\n }\n\n // if (!targeted_node) {\n var legend_nodes_links_discont = document.querySelectorAll('#legend_root_lines_class');\n for (var _i2 = 0; _i2 < legend_nodes_links_discont.length; ++_i2) {\n var _layer_id = legend_nodes_links_discont[_i2].classList[2].split('lgdf_')[1],\n _layer_name = global._app.id_to_layer.get(_layer_id),\n _rendered_field = data_manager.current_layers[_layer_name].rendered_field,\n _display_value = legend_nodes_links_discont[_i2].getAttribute('display'),\n _visible = legend_nodes_links_discont[_i2].style.visibility;\n\n var _transform_param = legend_nodes_links_discont[_i2].getAttribute('transform'),\n _rounding_precision = legend_nodes_links_discont[_i2].getAttribute('rounding_precision'),\n _lgd_title = legend_nodes_links_discont[_i2].querySelector('#legendtitle').innerHTML,\n _lgd_subtitle = legend_nodes_links_discont[_i2].querySelector('#legendsubtitle').innerHTML,\n _notes = legend_nodes_links_discont[_i2].querySelector('#legend_bottom_note').innerHTML;\n\n var _rect_fill_value = legend_nodes_links_discont[_i2].getAttribute('visible_rect') === 'true' ? {\n color: legend_nodes_links_discont[_i2].querySelector('#under_rect').style.fill,\n opacity: legend_nodes_links_discont[_i2].querySelector('#under_rect').style.fillOpacity\n } : undefined;\n\n legend_nodes_links_discont[_i2].remove();\n (0, _legend.createLegend_discont_links)(_layer_name, _rendered_field, _lgd_title, _lgd_subtitle, _rect_fill_value, _rounding_precision, _notes);\n var _new_lgd = document.querySelector(['#legend_root_lines_class.lgdf_', _layer_id].join(''));\n _new_lgd.style.visibility = _visible;\n if (_transform_param) {\n _new_lgd.setAttribute('transform', _transform_param);\n }\n if (_display_value) {\n _new_lgd.setAttribute('display', _display_value);\n }\n }\n}\n\nfunction interpolateZoom(translate, scale) {\n var transform = d3.zoomTransform(svg_map);\n return d3.transition().duration(225).tween('zoom', function () {\n var iTranslate = d3.interpolate([transform.x, transform.y], translate);\n var iScale = d3.interpolate(transform.k, scale);\n return function (t_value) {\n svg_map.__zoom.k = iScale(t_value);\n var _t = iTranslate(t_value);\n svg_map.__zoom.x = _t[0];\n svg_map.__zoom.y = _t[1];\n zoom_without_redraw();\n };\n });\n}\n\nfunction zoomClick() {\n if (map_div.select('#hand_button').classed('locked')) return;\n var direction = this.id === 'zoom_in' ? 1 : -1,\n factor = 0.1,\n center = [w / 2, h / 2],\n transform = d3.zoomTransform(svg_map),\n translate = [transform.x, transform.y],\n view = { x: translate[0], y: translate[1], k: transform.k };\n var target_zoom = 1,\n translate0 = [],\n l = [];\n d3.event.preventDefault();\n target_zoom = transform.k * (1 + factor * direction);\n translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k];\n view.k = target_zoom;\n l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y];\n view.x += center[0] - l[0];\n view.y += center[1] - l[1];\n interpolateZoom([view.x, view.y], view.k);\n}\n\n// Change color of the background\n// (ie the parent \"svg\" element on the top of which group of elements have been added)\nfunction handle_bg_color(color) {\n map.style('background-color', color);\n}\n\n/** Function triggered by the change of map/canvas size\n* @param {Array} shape - An Array of two elements : [width, height] to use;\n* generally only used once at the time so `shape` values\n* are like [null, 750] or [800, null]\n* but also works with the 2 params together like [800, 750])\n*/\nfunction canvas_mod_size(shape) {\n if (shape[0]) {\n w = +shape[0];\n map.attr('width', w).call(zoom_without_redraw);\n map_div.style('width', w + 'px');\n if (w + 360 + 33 < window.innerWidth) {\n document.querySelector('.light-menu').style.right = '-33px';\n } else {\n document.querySelector('.light-menu').style.right = '0px';\n }\n }\n if (shape[1]) {\n h = +shape[1];\n map.attr('height', h).call(zoom_without_redraw);\n map_div.style('height', h + 'px');\n }\n (0, _legend.move_legends)();\n\n // Lets update the corresponding fields in the export section :\n var ratio = void 0;\n var format = document.getElementById('select_png_format').value;\n if (format === 'web') {\n ratio = 1;\n } else if (format === 'user_defined') {\n ratio = 118.11;\n } else {\n return;\n }\n // const zoom_params = svg_map.__zoom;\n document.getElementById('export_png_width').value = (0, _helpers_math.Mround)(w * ratio * 10) / 10;\n document.getElementById('export_png_height').value = (0, _helpers_math.Mround)(h * ratio * 10) / 10;\n document.getElementById('input-width').value = w;\n document.getElementById('input-height').value = h;\n}\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../node_modules/webpack/buildin/global.js */ \"./node_modules/webpack/buildin/global.js\")))\n\n//# sourceURL=webpack:///./js/map_ctrl.js?");
/***/ }),
diff --git a/client/dist/d3-custom.min.js b/client/dist/d3-custom.min.js
new file mode 100644
index 000000000..7d674b5b2
--- /dev/null
+++ b/client/dist/d3-custom.min.js
@@ -0,0 +1 @@
+var d3=function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId]){return installedModules[moduleId].exports}var module=installedModules[moduleId]={i:moduleId,l:false,exports:{}};modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);module.l=true;return module.exports}__webpack_require__.m=modules;__webpack_require__.c=installedModules;__webpack_require__.d=function(exports,name,getter){if(!__webpack_require__.o(exports,name)){Object.defineProperty(exports,name,{configurable:false,enumerable:true,get:getter})}};__webpack_require__.r=function(exports){Object.defineProperty(exports,"__esModule",{value:true})};__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module["default"]}:function getModuleExports(){return module};__webpack_require__.d(getter,"a",getter);return getter};__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)};__webpack_require__.p="";return __webpack_require__(__webpack_require__.s=25)}([function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var adder=function(){return new Adder};function Adder(){this.reset()}Adder.prototype={constructor:Adder,reset:function(){this.s=this.t=0},add:function(y){add(temp,y,this.t);add(this,temp.s,this.s);if(this.s)this.t+=temp.t;else this.s=temp.t},valueOf:function(){return this.s}};var temp=new Adder;function add(adder,a,b){var x=adder.s=a+b,bv=x-a,av=x-bv;adder.t=a-av+(b-bv)}var epsilon=1e-6;var epsilon2=1e-12;var pi=Math.PI;var halfPi=pi/2;var quarterPi=pi/4;var tau=pi*2;var degrees=180/pi;var radians=pi/180;var abs=Math.abs;var atan=Math.atan;var atan2=Math.atan2;var cos=Math.cos;var ceil=Math.ceil;var exp=Math.exp;var floor=Math.floor;var log=Math.log;var pow=Math.pow;var sin=Math.sin;var math_sign=Math.sign||function(x){return x>0?1:x<0?-1:0};var sqrt=Math.sqrt;var tan=Math.tan;function acos(x){return x>1?0:x<-1?pi:Math.acos(x)}function asin(x){return x>1?halfPi:x<-1?-halfPi:Math.asin(x)}function haversin(x){return(x=sin(x/2))*x}function noop(){}function streamGeometry(geometry,stream){if(geometry&&streamGeometryType.hasOwnProperty(geometry.type)){streamGeometryType[geometry.type](geometry,stream)}}var streamObjectType={Feature:function(object,stream){streamGeometry(object.geometry,stream)},FeatureCollection:function(object,stream){var features=object.features,i=-1,n=features.length;while(++i' + _tr('app_page.layer_style_popup.field_label') + '
\\n\\n\\n