', options);
+ };
+
+ // show shape info
+ var showInfoDiv = function(event, data, shape) {
+ var settings = data.settings;
+ var $info = settings.infoDiv;
+ $info.offset({
+ left : event.pageX,
+ top : event.pageY
+ });
+ var timer;
+ $info.html(getInfo(data, shape));
+ console.debug('Info', shape);
+ $info.on('mouseout', function() { timer = setTimeout(hideInfoDiv, 300) });
+ $info.on('mouseover', function() { clearTimeout(timer) });
+ $info.fadeIn();
+ return false;
+ };
+
+ // hide shape info
+ var hideInfoDiv = function() {
+ var $info = $('#'+CSS+'info');
+ $info.off('mouseout').off('mouseover');
+ $info.fadeOut();
+ };
+
// remove selected shapes - or the most recent one, if none was selected
var removeSelectedShapes = function(data) {
var layer = data.measureLayer;
@@ -1319,19 +1388,22 @@
},
'svg' : function (shape) {
var trafo = data.imgTrafo;
+ var styles = data.settings.styles;
+ var props = shape.properties;
+ props['stroke-width'] = styles.guide['stroke-width']; // draw a rectangle in guides style
var $s = factory['Rect'].svg(shape);
- var props = shape.properties;
var place = $s.place;
var guide = CSS+'guide';
+ var shapeClass = CSS+'shape';
var constr = CSS+'constr';
$s.attr({'class' : guide});
var $g = $(fn.svgElement('g', {'id': shape.id + '-oval'}));
var $c1 = $(fn.svgElement('circle', {'id': shape.id + '-circ1', 'class': guide }));
var $c2 = $(fn.svgElement('circle', {'id': shape.id + '-circ2', 'class': guide }));
var $p1 = $(fn.svgElement('path', {'id': shape.id + '-lines', 'class': guide }));
- var $p2 = $(fn.svgElement('path', {'id': shape.id + '-arc', stroke: props.stroke, fill: 'none' }));
- var $p3 = $(fn.svgElement('path', {'id': shape.id + '-constr', 'class': constr })); // debug construction
- $g.append($s).append($c1).append($c2).append($p1).append($p2).append($p3);
+ var $p2 = $(fn.svgElement('path', {'id': shape.id + '-constr', 'class': constr })); // debug construction
+ var $arc = $(fn.svgElement('path', {'id': shape.id + '-arc', 'class': shapeClass, stroke: props.stroke, 'stroke-width': styles.shape['stroke-width'], fill: 'none' }));
+ $g.append($s).append($c1).append($c2).append($p1).append($p2).append($arc);
$g.place = function () {
var p = props.screenpos;
place.call($s); // place the framing rectangle (polygon)
@@ -1344,24 +1416,24 @@
var mid1 = side1.mid();
var mid2 = side2.mid();
var mid3 = side3.mid();
- var axis0 = side0.parallel(mid3); // short axis
- var axis1 = side1.parallel(mid0); // long axis
- var maxDiam = axis0.length()-1; // maximal diameter for small circles
- var handle = axis1.perpendicularPoint(p[3]); // drag point projected on long axis
- if (handle.distance(mid0) > axis1.length()) { // constrain handle
+ var axis1 = side0.parallel(mid3); // short axis
+ var axis2 = side1.parallel(mid0); // long axis
+ var maxDiam = axis1.length()-1; // maximal diameter for small circles
+ var handle = axis2.perpendicularPoint(p[3]); // drag point projected on long axis
+ if (handle.distance(mid0) > axis2.length()) { // constrain handle
handle.moveTo(mid2);
} else if (handle.distance(mid2) > maxDiam) {
handle.moveTo(geom.line(mid2, handle).length(maxDiam).point());
}
var m1 = handle.mid(mid2); // midpoints of the small circles
- var m2 = axis0.mirror(m1);
+ var m2 = axis1.mirror(m1);
var rad1 = m1.distance(mid2); // radius of the small circles
- var rd = axis0.copy().length(rad1).point(); // radius distance from short axis
+ var rd = axis1.copy().length(rad1).point(); // radius distance from short axis
var ld = geom.line(rd, m1);
var md = rd.mid(m1);
var bi = ld.perpendicular(md); // perpendicular bisector
- var m3 = axis0.intersection(bi); // midpoints of the big circles
- var m4 = axis1.mirror(m3);
+ var m3 = axis1.intersection(bi); // midpoints of the big circles
+ var m4 = axis2.mirror(m3);
var fp1 = geom.line(m3, m1).addEnd(rad1); // the four fitting points
var fp2 = geom.line(m3, m2).addEnd(rad1);
var fp3 = geom.line(m4, m1).addEnd(rad1);
@@ -1370,19 +1442,20 @@
// place the SVG shapes
$c1.attr({cx: m1.x, cy: m1.y, r: rad1});
$c2.attr({cx: m2.x, cy: m2.y, r: rad1});
- $p1.attr({d: // the guides
+ $p1.attr({d: // the guidelines
'M'+fp1+' L'+m3+' '+fp2+
'M'+fp3+' L'+m4+' '+fp4+
'M'+mid0+' L'+mid2+
'M'+mid1+' L'+mid3});
- $p2.attr({d: 'M'+fp2+ // the arcs
+ $p2.attr({d: 'M'+rd+' L'+m1+' M'+md+' '+m3}); // debug construction
+ $arc.attr({d: 'M'+fp2+ // the arcs of the oval
' A'+rad2+','+rad2+' 0 0,1 '+fp1+
' A'+rad1+','+rad1+' 0 0,1 '+fp3+
' A'+rad2+','+rad2+' 0 0,1 '+fp4+
' A'+rad1+','+rad1+' 0 0,1 '+fp2});
- $p3.attr({d: 'M'+rd+' L'+m1+' M'+md+' '+m3}); // debug construction
p[3] = handle;
shape.geometry.coordinates[3] = trafo.invtransform(handle).toArray();
+ props.measures = { rad1: rad1, rad2: rad2, axis1: axis1.length(), axis2: axis2.length() }; // use for info
}
};
return $g;
@@ -1456,7 +1529,7 @@
'type',
'value1', 'unit1', 'eq',
'value2', 'unit2',
- 'shapecolor', 'guidecolor', 'constrcolor', 'selectedcolor',
+ 'shapecolor', 'guidecolor', 'constrcolor', 'selectedcolor', 'handlecolor',
'move'
],
info : $('
'),
@@ -1470,10 +1543,11 @@
unit1 : $('
'),
unit2 : $('
'),
angle : $('
'),
- shapecolor : $('
'),
- guidecolor : $('
'),
- constrcolor :$('
'),
- selectedcolor :$('
'),
+ shapecolor : $('
'),
+ guidecolor : $('
'),
+ constrcolor :$('
'),
+ selectedcolor :$('
'),
+ handlecolor :$('
'),
move : $('
')
};
var $measureBar = $('
');
@@ -1512,10 +1586,10 @@
$elem.digilib(action);
return false;
});
- widgets.shape.on('change.measure', function(evt) { changeShapeType(data) });
+ widgets.shape.on('change.measure', function(evt) { changeActiveShapeType(data) });
widgets.value1.on('change.measure', function(evt) { changeFactor(data) });
- widgets.unit1.on('change.measure', function(evt) { convertUnits(data) });
- widgets.unit2.on('change.measure', function(evt) { convertUnits(data) });
+ widgets.unit1.on('change.measure', function(evt) { updateUnits(data) });
+ widgets.unit2.on('change.measure', function(evt) { updateUnits(data) });
widgets.unit1.attr('tabindex', -1);
widgets.unit2.attr('tabindex', -1);
widgets.value1.attr('tabindex', -1);
@@ -1583,6 +1657,8 @@
$data.on('changeShape', onChangeShape);
$data.on('positionShape', onPositionShape);
$data.on('dragShape', onDragShape);
+ settings.infoDiv = createInfoDiv();
+ data.$elem.append(settings.infoDiv);
};
// plugin object with name and init