Added marquee
Joris van Zundert [Sun, 16 Jun 2013 18:55:33 +0000 (20:55 +0200)]
root/images/resources/logo.svg
root/js/relationship.js

index 553ca66..62046ad 100644 (file)
        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" />
     <path
        transform="matrix(1.5762079,0,0,1.5762079,-324.84719,-218.60105)"
        d="m 533.51352,366.01083 a 109.05405,109.05405 0 1 1 -218.10809,0 109.05405,109.05405 0 1 1 218.10809,0 z"
        sodipodi:cx="424.45947"
        id="path3027"
        style="fill:#4991d7;fill-opacity:1;stroke:#ece7dc;stroke-width:3.25210905000000006;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" />
     <path
        transform="matrix(1.0228106,0,0,1.0228106,-89.952457,-16.051641)"
        d="m 533.51352,366.01083 a 109.05405,109.05405 0 1 1 -218.10809,0 109.05405,109.05405 0 1 1 218.10809,0 z"
        sodipodi:cx="424.45947"
        id="path3023"
        style="fill:#3d77b2;fill-opacity:1;stroke:#ece7dc;stroke-width:5.01168060000000004;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" />
     <path
        style="fill:none;stroke:#ece7dc;stroke-width:5.0999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
        d="m 82.186343,358.30814 524.005677,0"
        id="path2993"
-       inkscape:connector-curvature="0" />
+       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" />
     <path
        inkscape:connector-curvature="0"
        id="path2995"
        d="M 117.28807,489.30956 571.09029,227.30672"
-       style="fill:none;stroke:#ece7dc;stroke-width:5.0999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+       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" />
     <path
        inkscape:connector-curvature="0"
        id="path2997"
        d="M 213.18776,585.20925 475.1906,131.40702"
-       style="fill:none;stroke:#ece7dc;stroke-width:5.0999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+       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" />
     <path
        inkscape:connector-curvature="0"
        id="path2999"
        d="M 213.18776,131.40702 475.1906,585.20925"
-       style="fill:none;stroke:#ece7dc;stroke-width:5.0999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+       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" />
     <path
        style="fill:none;stroke:#ece7dc;stroke-width:5.0999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
        d="M 117.28807,227.30672 571.09029,489.30956"
        id="path3001"
-       inkscape:connector-curvature="0" />
+       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" />
     <path
        inkscape:connector-curvature="0"
        id="path3003"
        d="m 344.18918,620.31097 0,-524.005669"
-       style="fill:none;stroke:#ece7dc;stroke-width:5.0999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+       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" />
     <path
        transform="matrix(0.49393162,0,0,0.49393162,134.53524,177.5238)"
        d="m 533.51352,366.01083 a 109.05405,109.05405 0 1 1 -218.10809,0 109.05405,109.05405 0 1 1 218.10809,0 z"
        sodipodi:cx="424.45947"
        id="path3019"
        style="fill:#2c5782;fill-opacity:1;stroke:#ece7dc;stroke-width:10.37795447999999965;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" />
     <path
        sodipodi:type="arc"
        style="fill:#2c5782;fill-opacity:1;stroke:#ece7dc;stroke-width:39.23913193;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
        sodipodi:rx="109.05405"
        sodipodi:ry="109.05405"
        d="m 533.51352,366.01083 a 109.05405,109.05405 0 1 1 -218.10809,0 109.05405,109.05405 0 1 1 218.10809,0 z"
-       transform="matrix(0.1306349,0,0,0.1306349,314.14487,355.04367)" />
+       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" />
     <path
        sodipodi:type="arc"
        style="fill:#2c5782;fill-opacity:1;stroke:#ece7dc;stroke-width:39.23913193;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
        sodipodi:rx="109.05405"
        sodipodi:ry="109.05405"
        d="m 533.51352,366.01083 a 109.05405,109.05405 0 1 1 -218.10809,0 109.05405,109.05405 0 1 1 218.10809,0 z"
-       transform="matrix(0.1306349,0,0,0.1306349,288.73998,419.88613)" />
+       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" />
     <path
        sodipodi:type="arc"
        style="fill:#2c5782;fill-opacity:1;stroke:#ece7dc;stroke-width:39.23913193;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
        sodipodi:rx="109.05405"
        sodipodi:ry="109.05405"
        d="m 533.51352,366.01083 a 109.05405,109.05405 0 1 1 -218.10809,0 109.05405,109.05405 0 1 1 218.10809,0 z"
-       transform="matrix(0.1306349,0,0,0.1306349,436.9812,395.34965)" />
+       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" />
     <path
        transform="matrix(0.1306349,0,0,0.1306349,516.72476,441.35555)"
        d="m 533.51352,366.01083 a 109.05405,109.05405 0 1 1 -218.10809,0 109.05405,109.05405 0 1 1 218.10809,0 z"
        sodipodi:cx="424.45947"
        id="path3811"
        style="fill:#2c5782;fill-opacity:1;stroke:#ece7dc;stroke-width:39.23913193;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" />
     <path
        sodipodi:type="arc"
        style="fill:#2c5782;fill-opacity:1;stroke:#ece7dc;stroke-width:39.23913193;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
        sodipodi:rx="109.05405"
        sodipodi:ry="109.05405"
        d="m 533.51352,366.01083 a 109.05405,109.05405 0 1 1 -218.10809,0 109.05405,109.05405 0 1 1 218.10809,0 z"
-       transform="matrix(0.1306349,0,0,0.1306349,373.5953,458.73556)" />
+       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" />
     <path
        transform="matrix(0.1306349,0,0,0.1306349,420.62356,538.47911)"
        d="m 533.51352,366.01083 a 109.05405,109.05405 0 1 1 -218.10809,0 109.05405,109.05405 0 1 1 218.10809,0 z"
        sodipodi:cx="424.45947"
        id="path3815"
        style="fill:#2c5782;fill-opacity:1;stroke:#ece7dc;stroke-width:39.23913193;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" />
     <path
        style="fill:none;stroke:#2c5782;stroke-width:5.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
        d="m 378.06805,416.93262 43.14401,75.01911"
        id="path3827"
        inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cc" />
+       sodipodi:nodetypes="cc"
+       inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png"
+       inkscape:export-xdpi="300"
+       inkscape:export-ydpi="300" />
     <path
        style="fill:none;stroke:#2c5782;stroke-width:5.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
        d="m 437.87394,520.55763 28.92465,50.56962"
        id="path3831"
        inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cc" />
+       sodipodi:nodetypes="cc"
+       inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png"
+       inkscape:export-xdpi="300"
+       inkscape:export-ydpi="300" />
     <path
        sodipodi:nodetypes="cc"
        inkscape:connector-curvature="0"
        id="path3833"
        d="m 506.29319,451.82931 51.14023,29.58475"
-       style="fill:none;stroke:#2c5782;stroke-width:5.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+       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" />
     <path
        sodipodi:nodetypes="cc"
        inkscape:connector-curvature="0"
        id="path3837"
        d="m 356.53662,379.92647 4.99105,8.36824"
-       style="fill:none;stroke:#2c5782;stroke-width:6.0999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+       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" />
     <path
        sodipodi:type="arc"
        style="fill:none;stroke:#2c5782;stroke-width:5.40275981;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
        transform="matrix(1.0228106,0,0,1.0228106,-89.952457,-16.051641)"
        sodipodi:start="1.057734"
        sodipodi:end="1.4185712"
-       sodipodi:open="true" />
+       sodipodi:open="true"
+       inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png"
+       inkscape:export-xdpi="300"
+       inkscape:export-ydpi="300" />
     <path
        sodipodi:type="arc"
        style="fill:none;stroke:#2c5782;stroke-width:3.25210905;stroke-linecap:butt;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
        transform="matrix(1.5762079,0,0,1.5762079,-324.84719,-218.60105)"
        sodipodi:start="0.61721302"
        sodipodi:end="0.95231683"
-       sodipodi:open="true" />
+       sodipodi:open="true"
+       inkscape:export-filename="/Users/joris/Documents/workspace/stemmaweb/root/images/resources/logo.png"
+       inkscape:export-xdpi="300"
+       inkscape:export-ydpi="300" />
   </g>
 </svg>
index 4cb62f1..0f18f86 100644 (file)
@@ -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) {