From: Joris van Zundert Date: Sun, 16 Jun 2013 18:55:33 +0000 (+0200) Subject: Added marquee X-Git-Url: http://git.shadowcat.co.uk/gitweb/gitweb.cgi?a=commitdiff_plain;h=c1add77704413310f34dcf5ce6f5cdf1011bae31;p=scpubgit%2Fstemmaweb.git Added marquee --- diff --git a/root/images/resources/logo.svg b/root/images/resources/logo.svg index 553ca66..62046ad 100644 --- a/root/images/resources/logo.svg +++ b/root/images/resources/logo.svg @@ -60,7 +60,10 @@ sodipodi:cx="424.45947" id="path3031" style="fill:#53a3f4;fill-opacity:1;stroke:#ece7dc;stroke-width:2.13178706000000018;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" - sodipodi:type="arc" /> + sodipodi:type="arc" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> + sodipodi:type="arc" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> + sodipodi:type="arc" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> + inkscape:connector-curvature="0" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> + style="fill:none;stroke:#ece7dc;stroke-width:5.0999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> + style="fill:none;stroke:#ece7dc;stroke-width:5.0999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> + style="fill:none;stroke:#ece7dc;stroke-width:5.0999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> + inkscape:connector-curvature="0" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> + style="fill:none;stroke:#ece7dc;stroke-width:5.0999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> + sodipodi:type="arc" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> + transform="matrix(0.1306349,0,0,0.1306349,314.14487,355.04367)" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> + transform="matrix(0.1306349,0,0,0.1306349,288.73998,419.88613)" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> + transform="matrix(0.1306349,0,0,0.1306349,436.9812,395.34965)" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> + sodipodi:type="arc" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> + transform="matrix(0.1306349,0,0,0.1306349,373.5953,458.73556)" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> + sodipodi:type="arc" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> + sodipodi:nodetypes="cc" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> + sodipodi:nodetypes="cc" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> + style="fill:none;stroke:#2c5782;stroke-width:5.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> + style="fill:none;stroke:#2c5782;stroke-width:6.0999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> + sodipodi:open="true" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> + sodipodi:open="true" + inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300" /> diff --git a/root/js/relationship.js b/root/js/relationship.js index 4cb62f1..0f18f86 100644 --- a/root/js/relationship.js +++ b/root/js/relationship.js @@ -201,6 +201,10 @@ function svgEnlargementLoaded() { //used to calculate min and max zoom level: start_element_height = $('#__START__').children('ellipse')[0].getBBox().height; add_relations( function() { $('#loading_overlay').hide(); }); + + //initialize marquee + marquee = new Marquee(); + } function add_relations( callback_fn ) { @@ -575,29 +579,99 @@ function draw_relation( source_id, target_id, relation_color ) { return relation_element; } +function Marquee() { + + var self = this; + + this.enlargementOffset = $('#svgenlargement').offset(); + this.svg_rect = $('#svgenlargement svg').svg('get'); + + this.show = function( event ) { + // TODO: uncolor possible selected + // TODO: unless SHIFT? + p = svg_root.createSVGPoint(); + p.x = event.clientX - self.enlargementOffset.left; + p.y = event.clientY - self.enlargementOffset.top; + // NB: I think next line is officially needed, it's only + // coincidentally that viewport and svg scale 1 to 1 initially + // and therefor we don't need a transform? + // p.matrixTransform( svg_root_element.getCTM().inverse() ); + self.svg_rect.rect( p.x, p.y, 0, 0, { fill: 'black', 'fill-opacity': '0.1', stroke: 'black', 'stroke-dasharray': '4,2', strokeWidth: '0.02em', id: 'marquee' } ); + }; + + this.expand = function( event ) { + var rect = $('#marquee'); + if( rect.length != 0 ) { + var pX = (event.clientX - self.enlargementOffset.left) - rect.attr("x");; + var pY = (event.clientY - self.enlargementOffset.top) - rect.attr("y");; + rect.attr("width", pX); + rect.attr("height", pY); + } + }; + + this.hide = function() { + var rect = $('#marquee'); + if( rect.length != 0 ) { + var left = $('#marquee').offset().left; + var top = $('#marquee').offset().top; + var right = left + parseInt( $('#marquee').attr( 'width' ) ); + var bottom = top + parseInt( $('#marquee').attr( 'height' ) ); + var tf = svg_root_element.getScreenCTM().inverse(); + var p = svg_root.createSVGPoint(); + p.x=left; + p.y=top; + var cx_min = p.matrixTransform(tf).x; + var cy_min = p.matrixTransform(tf).y; + p.x=right; + p.y=bottom; + var cx_max = p.matrixTransform(tf).x; + var cy_max = p.matrixTransform(tf).y; + $('#svgenlargement ellipse').each( function( index ) { + var cx = parseInt( $(this).attr('cx') ); + var cy = parseInt( $(this).attr('cy') ); + if( cx > cx_min && cx < cx_max) { + if( cy > cy_min && cy < cy_max) { + // we actually heve no real 'selected' state for nodes, except coloring + $(this).attr( 'fill', '#ffccff' ); + } + } + }); + // select here + self.svg_rect.remove( $('#marquee') ); + } + }; + +} + $(document).ready(function () { timer = null; relation_manager = new relation_factory(); - $('#update_workspace_button').data('locked', false); + $('#update_workspace_button').data('locked', false); + $('#enlargement').mousedown(function (event) { $(this) .data('down', true) .data('x', event.clientX) .data('y', event.clientY) .data('scrollLeft', this.scrollLeft) - stateTf = svg_root_element.getCTM().inverse(); - var p = svg_root.createSVGPoint(); - p.x = event.clientX; - p.y = event.clientY; - stateOrigin = p.matrixTransform(stateTf); - event.returnValue = false; - event.preventDefault(); - return false; + stateTf = svg_root_element.getCTM().inverse(); + var p = svg_root.createSVGPoint(); + p.x = event.clientX; + p.y = event.clientY; + stateOrigin = p.matrixTransform(stateTf); + + // Activate marquee if in interaction mode + if( $('#update_workspace_button').data('locked') == true ) { marquee.show( event ) }; + + event.returnValue = false; + event.preventDefault(); + return false; }).mouseup(function (event) { - $(this).data('down', false); + marquee.hide(); + $(this).data('down', false); }).mousemove(function (event) { if( timer != null ) { clearTimeout(timer); } if ( ($(this).data('down') == true) && ($('#update_workspace_button').data('locked') == false) ) { @@ -609,6 +683,7 @@ $(document).ready(function () { var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")"; svg_root_element.setAttribute("transform", s); } + marquee.expand( event ); event.returnValue = false; event.preventDefault(); }).mousewheel(function (event, delta) { @@ -639,6 +714,7 @@ $(document).ready(function () { 'cursor' : '-moz-grab' }); + if( editable ) { $( "#dialog-form" ).dialog({ autoOpen: false, @@ -928,6 +1004,7 @@ function loadSVG(svgData) { } + /* OS Gadget stuff function svg_select_callback(topic, data, subscriberData) {