/* vim: set expandtab sw=4 ts=4 sts=4: */ /** * @fileoverview functions used for visualizing GIS data * * @requires jquery * @requires jquery/jquery.svg.js * @requires jquery/jquery.mousewheel.js * @requires jquery/jquery.event.drag-2.2.js */ // Constants var zoomFactor = 1.5; var defaultX = 0; var defaultY = 0; // Variables var x = 0; var y = 0; var scale = 1; var svg; /** * Zooms and pans the visualization. */ function zoomAndPan() { var g = svg.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.change(circle, { r : (3 / scale), "stroke-width" : (2 / scale) }); }); var line; $('polyline.vector').each(function () { id = $(this).attr('id'); line = svg.getElementById(id); svg.change(line, { "stroke-width" : (2 / scale) }); }); var polygon; $('path.vector').each(function () { id = $(this).attr('id'); polygon = svg.getElementById(id); svg.change(polygon, { "stroke-width" : (0.5 / scale) }); }); } /** * Initially loads either SVG or OSM visualization based on the choice. */ function selectVisualization() { if ($('#choice').prop('checked') !== true) { $('#openlayersmap').hide(); } else { $('#placeholder').hide(); } } /** * Adds necessary styles to the div that coontains the openStreetMap. */ function styleOSM() { var $placeholder = $('#placeholder'); var cssObj = { 'border' : '1px solid #aaa', 'width' : $placeholder.width(), 'height' : $placeholder.height(), 'float' : 'right' }; $('#openlayersmap').css(cssObj); } /** * Loads the SVG element and make a reference to it. */ function loadSVG() { var $placeholder = $('#placeholder'); $placeholder.svg({ onLoad: function (svg_ref) { svg = svg_ref; } }); // Removes the second SVG element unnecessarily added due to the above command $placeholder.find('svg:nth-child(2)').remove(); } /** * Adds controllers for zooming and panning. */ function addZoomPanControllers() { var $placeholder = $('#placeholder'); if ($("#placeholder").find("svg").length > 0) { var pmaThemeImage = $('#pmaThemeImage').val(); // add panning arrows $('<img class="button" id="left_arrow" src="' + pmaThemeImage + 'west-mini.png">').appendTo($placeholder); $('<img class="button" id="right_arrow" src="' + pmaThemeImage + 'east-mini.png">').appendTo($placeholder); $('<img class="button" id="up_arrow" src="' + pmaThemeImage + 'north-mini.png">').appendTo($placeholder); $('<img class="button" id="down_arrow" src="' + pmaThemeImage + 'south-mini.png">').appendTo($placeholder); // add zooming controls $('<img class="button" id="zoom_in" src="' + pmaThemeImage + 'zoom-plus-mini.png">').appendTo($placeholder); $('<img class="button" id="zoom_world" src="' + pmaThemeImage + 'zoom-world-mini.png">').appendTo($placeholder); $('<img class="button" id="zoom_out" src="' + pmaThemeImage + 'zoom-minus-mini.png">').appendTo($placeholder); } } /** * Resizes the GIS visualization to fit into the space available. */ function resizeGISVisualization() { var $placeholder = $('#placeholder'); var old_width = $placeholder.width(); var visWidth = $('#div_view_options').width() - 48; // Assign new value for width $placeholder.width(visWidth); $('svg').attr('width', visWidth); // Assign the offset created due to resizing to defaultX and center the svg. defaultX = (visWidth - old_width) / 2; x = defaultX; y = 0; scale = 1; } /** * Initialize the GIS visualization. */ function initGISVisualization() { // Loads either SVG or OSM visualization based on the choice selectVisualization(); // Resizes the GIS visualization to fit into the space available resizeGISVisualization(); if (typeof OpenLayers !== 'undefined') { // Configure OpenLayers OpenLayers._getScriptLocation = function() {return './js/openlayers/';}; // Adds necessary styles to the div that coontains the openStreetMap styleOSM(); // Draws openStreetMap with openLayers drawOpenLayers(); } // Loads the SVG element and make a reference to it loadSVG(); // Adds controllers for zooming and panning addZoomPanControllers(); zoomAndPan(); } function getRelativeCoords(e) { var position = $('#placeholder').offset(); return { x : e.pageX - position.left, y : e.pageY - position.top }; } /** * Ajax handlers for GIS visualization page * * Actions Ajaxified here: * * Zooming in and zooming out on mousewheel movement. * Panning the visualization on dragging. * Zooming in on double clicking. * Zooming out on clicking the zoom out button. * Panning on clicking the arrow buttons. * Displaying tooltips for GIS objects. */ /** * Unbind all event handlers before tearing down a page */ AJAX.registerTeardown('tbl_gis_visualization.js', function () { $(document).off('click', '#choice'); $(document).off('mousewheel', '#placeholder'); $(document).off('dragstart', 'svg'); $(document).off('mouseup', 'svg'); $(document).off('drag', 'svg'); $(document).off('dblclick', '#placeholder'); $(document).off('click', '#zoom_in'); $(document).off('click', '#zoom_world'); $(document).off('click', '#zoom_out'); $(document).off('click', '#left_arrow'); $(document).off('click', '#right_arrow'); $(document).off('click', '#up_arrow'); $(document).off('click', '#down_arrow'); $('.vector').unbind('mousemove').unbind('mouseout'); }); AJAX.registerOnload('tbl_gis_visualization.js', function () { // If we are in GIS visualization, initialize it if ($('#gis_div').length > 0) { initGISVisualization(); } if (typeof OpenLayers === 'undefined') { $('#choice, #labelChoice').hide(); } $(document).on('click', '#choice', function () { if ($(this).prop('checked') === false) { $('#placeholder').show(); $('#openlayersmap').hide(); } else { $('#placeholder').hide(); $('#openlayersmap').show(); } }); $(document).on('mousewheel', '#placeholder', function (event, delta) { event.preventDefault(); var relCoords = getRelativeCoords(event); if (delta > 0) { //zoom in scale *= zoomFactor; // zooming in keeping the position under mouse pointer unmoved. x = relCoords.x - (relCoords.x - x) * zoomFactor; y = relCoords.y - (relCoords.y - y) * zoomFactor; zoomAndPan(); } else { //zoom out scale /= zoomFactor; // zooming out keeping the position under mouse pointer unmoved. x = relCoords.x - (relCoords.x - x) / zoomFactor; y = relCoords.y - (relCoords.y - y) / zoomFactor; zoomAndPan(); } return true; }); var dragX = 0; var dragY = 0; $(document).on('dragstart', 'svg', function (event, dd) { $('#placeholder').addClass('placeholderDrag'); dragX = Math.round(dd.offsetX); dragY = Math.round(dd.offsetY); }); $(document).on('mouseup', 'svg', function (event) { $('#placeholder').removeClass('placeholderDrag'); }); $(document).on('drag', 'svg', function (event, dd) { var newX = Math.round(dd.offsetX); x += newX - dragX; dragX = newX; var newY = Math.round(dd.offsetY); y += newY - dragY; dragY = newY; zoomAndPan(); }); $(document).on('dblclick', '#placeholder', function (event) { scale *= zoomFactor; // zooming in keeping the position under mouse pointer unmoved. var relCoords = getRelativeCoords(event); x = relCoords.x - (relCoords.x - x) * zoomFactor; y = relCoords.y - (relCoords.y - y) * zoomFactor; zoomAndPan(); }); $(document).on('click', '#zoom_in', function (e) { e.preventDefault(); //zoom in scale *= zoomFactor; var $placeholder = $('#placeholder').find('svg'); width = $placeholder.attr('width'); height = $placeholder.attr('height'); // zooming in keeping the center unmoved. x = width / 2 - (width / 2 - x) * zoomFactor; y = height / 2 - (height / 2 - y) * zoomFactor; zoomAndPan(); }); $(document).on('click', '#zoom_world', function (e) { e.preventDefault(); scale = 1; x = defaultX; y = defaultY; zoomAndPan(); }); $(document).on('click', '#zoom_out', function (e) { e.preventDefault(); //zoom out scale /= zoomFactor; var $placeholder = $('#placeholder').find('svg'); width = $placeholder.attr('width'); height = $placeholder.attr('height'); // zooming out keeping the center unmoved. x = width / 2 - (width / 2 - x) / zoomFactor; y = height / 2 - (height / 2 - y) / zoomFactor; zoomAndPan(); }); $(document).on('click', '#left_arrow', function (e) { e.preventDefault(); x += 100; zoomAndPan(); }); $(document).on('click', '#right_arrow', function (e) { e.preventDefault(); x -= 100; zoomAndPan(); }); $(document).on('click', '#up_arrow', function (e) { e.preventDefault(); y += 100; zoomAndPan(); }); $(document).on('click', '#down_arrow', function (e) { e.preventDefault(); y -= 100; zoomAndPan(); }); /** * Detect the mousemove event and show tooltips. */ $('.vector').bind('mousemove', function (event) { var contents = $.trim(escapeHtml($(this).attr('name'))); $("#tooltip").remove(); if (contents !== '') { $('<div id="tooltip">' + contents + '</div>').css({ position : 'absolute', top : event.pageY + 10, left : event.pageX + 10, border : '1px solid #fdd', padding : '2px', 'background-color' : '#fee', opacity : 0.90 }).appendTo("body").fadeIn(200); } }); /** * Detect the mouseout event and hide tooltips. */ $('.vector').bind('mouseout', function (event) { $("#tooltip").remove(); }); });
Name | Type | Size | Permission | Actions |
---|---|---|---|---|
codemirror | Folder | 0755 |
|
|
jqplot | Folder | 0755 |
|
|
jquery | Folder | 0755 |
|
|
openlayers | Folder | 0755 |
|
|
pmd | Folder | 0755 |
|
|
tracekit | Folder | 0755 |
|
|
transformations | Folder | 0755 |
|
|
ajax.js | File | 28.9 KB | 0644 |
|
big_ints.js | File | 1.88 KB | 0644 |
|
chart.js | File | 17.84 KB | 0644 |
|
common.js | File | 18.36 KB | 0644 |
|
config.js | File | 25.86 KB | 0644 |
|
console.js | File | 57.53 KB | 0644 |
|
cross_framing_protection.js | File | 468 B | 0644 |
|
db_central_columns.js | File | 10.63 KB | 0644 |
|
db_operations.js | File | 5.76 KB | 0644 |
|
db_qbe.js | File | 2.04 KB | 0644 |
|
db_search.js | File | 8.42 KB | 0644 |
|
db_structure.js | File | 15.42 KB | 0644 |
|
db_tracking.js | File | 3.22 KB | 0644 |
|
doclinks.js | File | 20.16 KB | 0644 |
|
error_report.js | File | 9.87 KB | 0644 |
|
export.js | File | 28.66 KB | 0644 |
|
functions.js | File | 162.06 KB | 0644 |
|
get_image.js.php | File | 4.65 KB | 0644 |
|
get_scripts.js.php | File | 1.93 KB | 0644 |
|
gis_data_editor.js | File | 14.33 KB | 0644 |
|
import.js | File | 5.49 KB | 0644 |
|
indexes.js | File | 26.3 KB | 0644 |
|
keyhandler.js | File | 3.25 KB | 0644 |
|
line_counts.php | File | 36.92 KB | 0644 |
|
makegrid.js | File | 95.13 KB | 0644 |
|
menu-resizer.js | File | 6.48 KB | 0644 |
|
messages.php | File | 38.55 KB | 0644 |
|
microhistory.js | File | 11.22 KB | 0644 |
|
multi_column_sort.js | File | 2.83 KB | 0644 |
|
navigation.js | File | 53.8 KB | 0644 |
|
normalization.js | File | 26.39 KB | 0644 |
|
page_settings.js | File | 1.66 KB | 0644 |
|
replication.js | File | 3.03 KB | 0644 |
|
rte.js | File | 46.45 KB | 0644 |
|
server_databases.js | File | 4.96 KB | 0644 |
|
server_plugins.js | File | 525 B | 0644 |
|
server_privileges.js | File | 16.23 KB | 0644 |
|
server_status_advisor.js | File | 3.6 KB | 0644 |
|
server_status_monitor.js | File | 84.43 KB | 0644 |
|
server_status_processes.js | File | 5.97 KB | 0644 |
|
server_status_queries.js | File | 950 B | 0644 |
|
server_status_sorter.js | File | 2.51 KB | 0644 |
|
server_status_variables.js | File | 3.57 KB | 0644 |
|
server_user_groups.js | File | 1.34 KB | 0644 |
|
server_variables.js | File | 5.93 KB | 0644 |
|
sprintf.js | File | 7.21 KB | 0644 |
|
sql.js | File | 32.71 KB | 0644 |
|
tbl_change.js | File | 27.8 KB | 0644 |
|
tbl_chart.js | File | 13.61 KB | 0644 |
|
tbl_find_replace.js | File | 1.55 KB | 0644 |
|
tbl_gis_visualization.js | File | 10.64 KB | 0644 |
|
tbl_operations.js | File | 12.99 KB | 0644 |
|
tbl_relation.js | File | 8.35 KB | 0644 |
|
tbl_select.js | File | 15.07 KB | 0644 |
|
tbl_structure.js | File | 20.41 KB | 0644 |
|
tbl_tracking.js | File | 3.44 KB | 0644 |
|
tbl_zoom_plot_jqplot.js | File | 22.55 KB | 0644 |
|
whitelist.php | File | 1.1 KB | 0644 |
|