changeset 1251:0bcc1cd62fc6

start editable shapes.
author robcast
date Fri, 17 Jan 2014 10:33:51 +0100
parents f9b3620a203e
children d059d9a8a401
files webapp/src/main/webapp/jquery/digilib-vector.html webapp/src/main/webapp/jquery/jquery.digilib.css webapp/src/main/webapp/jquery/jquery.digilib.vector.js
diffstat 3 files changed, 22 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/digilib-vector.html	Thu Jan 16 19:38:36 2014 +0100
+++ b/webapp/src/main/webapp/jquery/digilib-vector.html	Fri Jan 17 10:33:51 2014 +0100
@@ -57,8 +57,8 @@
         </script>
     </head>
 
-    <body onload="$('#digilib').digilib('addShape', {'geometry':{'type':'Rectangle','coordinates':null}})"> 
-    <!-- <body> -->
+    <!-- <body onload="$('#digilib').digilib('addShape', {'geometry':{'type':'Rectangle','coordinates':null}})">  --> 
+    <body>
         <div id="digilib">
             <p>digilib doesn't work! Please switch on Javascript or notify the server administrator!</p>
             <img src="http://digilib.berlios.de/images/digilib-logo-big.png" />
--- a/webapp/src/main/webapp/jquery/jquery.digilib.css	Thu Jan 16 19:38:36 2014 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.css	Fri Jan 17 10:33:51 2014 +0100
@@ -393,6 +393,11 @@
     border:none;
 }
 
+/* SVG */
+div.dl-digilib .dl-svg-handle:hover {
+	fill: red;
+}
+
 /* special definitions for embedded */
 div.dl-digilib.dl-embedded {
 	position: relative;
--- a/webapp/src/main/webapp/jquery/jquery.digilib.vector.js	Thu Jan 16 19:38:36 2014 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.vector.js	Fri Jan 17 10:33:51 2014 +0100
@@ -166,6 +166,9 @@
         //renderShapes(data);
     };
 
+    /**
+     * render list of shapes on screen.
+     */
     var renderShapes = function (data) {
     	console.debug("renderShapes shapes:", data.shapes);
     	if (data.shapes == null || data.imgTrafo == null || !data.settings.isVectorActive) 
@@ -174,11 +177,12 @@
         	data.$svg.remove();
         }
         var settings = data.settings;
+        var css = settings.cssPrefix;
         var trafo = data.imgTrafo;
     	var svg = '<svg xmlns="http://www.w3.org/2000/svg"\
     	    viewBox="'+data.imgRect.getAsSvg()+'"\
     	    class="'+settings.cssPrefix+'overlay"\
-    		style="position:absolute; z-index:10; pointer-events:none">';
+    		style="position:absolute; z-index:10; pointer-events:visiblePainted;">';
     	for (var i in data.shapes) {
     		var vec = data.shapes[i];
     		// use given id
@@ -201,6 +205,16 @@
     					x2="'+p2.x+'" y2="'+p2.y+'"\
     					stroke="'+stroke+'" stroke-width="'+strokeWidth+'"\
     					/>';
+    			if (props.editable != null) {
+    			    svg += '<rect \
+    			        x="'+(p1.x-5)+'" y="'+(p1.y-5)+'" width="10" height="10"\
+    			        stroke="darkgrey" stroke-width="1" fill="none"\
+    			        class="'+css+'svg-handle"/>';
+                    /* svg += '<circle \
+                        cx="'+p1.x+'" cy="'+p1.y+'" r="5"\
+                        stroke="blue" stroke-width="1" fill="none"\
+                        class="'+css+'svg-handle"/>'; */
+    			}
     		} else if (gt === 'Rectangle') {
     			/*
     			 * Rectangle