gian/phpmyadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge #17041 - Fix #17033 - scaling of line width and point size in GIS visualization

Browse Source 
Pull-request: #17041
Fixes: #17033

Signed-off-by: William Desportes <williamdes@wdes.fr>
This commit is contained in:
William Desportes 2021-07-29 02:58:48 +02:00
commit 850de8a401
No known key found for this signature in database
GPG Key ID: 90A0EF1B8251A889
2 changed files with 43 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
js/src/gis_data_editor.js
View File

@ -5,7 +5,7 @@
*
*/
/* global addZoomPanControllers, loadSVG, selectVisualization, styleOSM, zoomAndPan */ // js/table/gis_visualization.js
/* global addZoomPanControllers, storeGisSvgRef, selectVisualization, styleOSM, zoomAndPan */ // js/table/gis_visualization.js
/* global themeImagePath */ // templates/javascript/variables.twig
var gisEditorLoaded = false;
@ -71,12 +71,11 @@ function addDataPoint (pointNumber, prefix) {
* Initialize the visualization in the GIS data editor.
*/
function initGISEditorVisualization () {
storeGisSvgRef();
// Loads either SVG or OSM visualization based on the choice
selectVisualization();
// Adds necessary styles to the div that contains the openStreetMap
styleOSM();
// Loads the SVG element and make a reference to it
loadSVG();
// Adds controllers for zooming and panning
addZoomPanControllers();
zoomAndPan();

111
js/src/table/gis_visualization.js
View File

@ -12,52 +12,30 @@
var zoomFactor = 1.5;
var defaultX = 0;
var defaultY = 0;
var defaultScale = 1;
// Variables
var x = 0;
var y = 0;
var scale = 1;
var x = defaultX;
var y = defaultY;
var scale = defaultScale;
var svg;
/** @type {SVGElement|undefined} */
var gisSvg;
/**
* Zooms and pans the visualization.
*/
function zoomAndPan () {
var g = svg.getElementById('groupPanel');
var g = gisSvg.getElementById('groupPanel');
if (!g) {
return;
}
g.setAttribute('transform', 'translate(' + x + ', ' + y + ') scale(' + scale + ')');
var id;
var circle;
$('circle.vector').each(function () {
id = $(this).attr('id');
circle = svg.getElementById(id);
$(svg).on('change', circle, {
r : (3 / scale),
'stroke-width' : (2 / scale)
});
});
var line;
$('polyline.vector').each(function () {
id = $(this).attr('id');
line = svg.getElementById(id);
$(svg).on('change', line, {
'stroke-width' : (2 / scale)
});
});
var polygon;
$('path.vector').each(function () {
id = $(this).attr('id');
polygon = svg.getElementById(id);
$(svg).on('change', polygon, {
'stroke-width' : (0.5 / scale)
});
});
$('#groupPanel', gisSvg).attr('transform', 'translate(' + x + ', ' + y + ') scale(' + scale + ')');
$('circle.vector', gisSvg).attr('r', 3 / scale);
$('circle.vector', gisSvg).attr('stroke-width', 2 / scale);
$('polyline.vector', gisSvg).attr('stroke-width', 2 / scale);
$('path.vector', gisSvg).attr('stroke-width', 0.5 / scale);
}
/**
@ -86,38 +64,31 @@ function styleOSM () {
}
/**
* Loads the SVG element and make a reference to it.
* Store a reference to the gis svg element.
*/
function loadSVG () {
var $placeholder = $('#placeholder');
$placeholder.svg({
onLoad: function (svgRef) {
svg = svgRef;
}
});
// Removes the second SVG element unnecessarily added due to the above command
$placeholder.find('svg').eq(1).remove();
function storeGisSvgRef () {
gisSvg = $('#placeholder').find('svg').get(0);
}
/**
* Adds controllers for zooming and panning.
* Adds controls for zooming and panning.
*/
function addZoomPanControllers () {
var $placeholder = $('#placeholder');
if ($('#placeholder').find('svg').length > 0) {
var themeImagePath = $('#themeImagePath').val();
// add panning arrows
$('<img class="button" id="left_arrow" src="' + themeImagePath + 'west-mini.png">').appendTo($placeholder);
$('<img class="button" id="right_arrow" src="' + themeImagePath + 'east-mini.png">').appendTo($placeholder);
$('<img class="button" id="up_arrow" src="' + themeImagePath + 'north-mini.png">').appendTo($placeholder);
$('<img class="button" id="down_arrow" src="' + themeImagePath + 'south-mini.png">').appendTo($placeholder);
// add zooming controls
$('<img class="button" id="zoom_in" src="' + themeImagePath + 'zoom-plus-mini.png">').appendTo($placeholder);
$('<img class="button" id="zoom_world" src="' + themeImagePath + 'zoom-world-mini.png">').appendTo($placeholder);
$('<img class="button" id="zoom_out" src="' + themeImagePath + 'zoom-minus-mini.png">').appendTo($placeholder);
if (!gisSvg) {
return;
}
var themeImagePath = $('#themeImagePath').val();
$('#placeholder').append(
// pan arrows
'<img class="button" id="left_arrow" src="' + themeImagePath + 'west-mini.png">',
'<img class="button" id="right_arrow" src="' + themeImagePath + 'east-mini.png">',
'<img class="button" id="up_arrow" src="' + themeImagePath + 'north-mini.png">',
'<img class="button" id="down_arrow" src="' + themeImagePath + 'south-mini.png">',
// zoom controls
'<img class="button" id="zoom_in" src="' + themeImagePath + 'zoom-plus-mini.png">',
'<img class="button" id="zoom_world" src="' + themeImagePath + 'zoom-world-mini.png">',
'<img class="button" id="zoom_out" src="' + themeImagePath + 'zoom-minus-mini.png">'
);
}
/**
@ -130,19 +101,20 @@ function resizeGISVisualization () {
// Assign new value for width
$placeholder.width(visWidth);
$('svg').attr('width', visWidth);
$(gisSvg).attr('width', visWidth);
// Assign the offset created due to resizing to defaultX and center the svg.
defaultX = (visWidth - oldWidth) / 2;
x = defaultX;
y = 0;
scale = 1;
y = defaultY;
scale = defaultScale;
}
/**
* Initialize the GIS visualization.
*/
function initGISVisualization () {
storeGisSvgRef();
// Loads either SVG or OSM visualization based on the choice
selectVisualization();
// Resizes the GIS visualization to fit into the space available
@ -152,8 +124,6 @@ function initGISVisualization () {
// Adds necessary styles to the div that contains the openStreetMap
styleOSM();
}
// Loads the SVG element and make a reference to it
loadSVG();
// Adds controllers for zooming and panning
addZoomPanControllers();
zoomAndPan();
@ -285,6 +255,9 @@ AJAX.registerOnload('table/gis_visualization.js', function () {
});
$(document).on('dblclick', '#placeholder', function (event) {
if (event.target.classList.contains('button')) {
return;
}
scale *= zoomFactor;
// zooming in keeping the position under mouse pointer unmoved.
var relCoords = getRelativeCoords(event);
@ -298,9 +271,8 @@ AJAX.registerOnload('table/gis_visualization.js', function () {
// zoom in
scale *= zoomFactor;
var $placeholder = $('#placeholder').find('svg');
var width = $placeholder.attr('width');
var height = $placeholder.attr('height');
var width = $(gisSvg).attr('width');
var height = $(gisSvg).attr('height');
// zooming in keeping the center unmoved.
x = width / 2 - (width / 2 - x) * zoomFactor;
y = height / 2 - (height / 2 - y) * zoomFactor;
@ -320,9 +292,8 @@ AJAX.registerOnload('table/gis_visualization.js', function () {
// zoom out
scale /= zoomFactor;
var $placeholder = $('#placeholder').find('svg');
var width = $placeholder.attr('width');
var height = $placeholder.attr('height');
var width = $(gisSvg).attr('width');
var height = $(gisSvg).attr('height');
// zooming out keeping the center unmoved.
x = width / 2 - (width / 2 - x) / zoomFactor;
y = height / 2 - (height / 2 - y) / zoomFactor;