digilib: webapp/src/main/webapp/jquery/jquery.digilib.measure.js comparison

comparison webapp/src/main/webapp/jquery/jquery.digilib.measure.js @ 1331:f50d5517ea52

another try to restore

author	hertzhaft
date	Tue, 27 Jan 2015 10:22:06 +0100
parents	dc94ed3f60ff
children	1d6dfca1709f

comparison

equal deleted inserted replaced

-:08fffd540a75
+:f50d5517ea52
 lineColor : 'red',
 // color while the line is drawn
 drawColor : 'green',
 // color of selected objects
 selectColor : 'red',
-// drawing shape types
+// implemented measuring shape types, for select widget
-shapeTypes : [
+implementedShapes : ['Line', 'LineString', 'Rectangle', 'Polygon'],
-{ name : 'line', type : 'Line' },
+// all measuring shape types
-{ name : 'linestring', type : 'LineString' },
+shapeTypes : {
-{ name : 'rectangle', type : 'Rectangle' },
+Line :       { name : 'line' },
-{ name : 'square', type : 'Square' },
+LineString : { name : 'linestring' },
-{ name : 'polygon', type : 'Polygon' },
+Rectangle :  { name : 'rectangle' },
-{ name : 'circle', type : 'Circle' },
+Square :     { name : 'square' },
-{ name : 'arch', type : 'Arch' },
+Polygon :    { name : 'polygon' },
-{ name : 'ratio', type : 'Ratio' },
+Circle :     { name : 'circle' },
-{ name : 'intercolumnium', type : 'InterCol' },
+Arch :       { name : 'arch' },
-{ name : 'line grid', type : 'Grid' }
+Ratio :      { name : 'ratio' },
-],
+InterCol :   { name : 'intercolumnium' },
-// index of default shape
+Grid :       { name : 'linegrid' }
-selectedShape : 0,
+},
+// most recently selected shape
+activeShapeType : 'Line',
+// last measured distance
+lastMeasuredDistance : 0,
 // measuring unit (index into unit list)
 unitFrom : 17,
 // converted unit (index into unit list)
 unitTo : 0,
 // maximal denominator for mixed fractions
 };
 var actions = {
 measurebar : function(data) {
 var $measureBar = data.$measureBar;
-if (!$measureBar) {
+if ($measureBar == null) {
 $measureBar = setupMeasureBar(data);
 				};
 			$measureBar.toggle();
 setScreenPosition(data, $measureBar);
 			return;
 },
 drawshape : function(data) {
-var shape = getSelectedShape(data);
+var shape = newShape(data);
-data.measureWidgets.startb.addClass('dl-drawing');
+$(data).trigger('createShape', shape);
 digilib.actions.addShape(data, shape, shapeCompleted);
 console.debug('measure: action drawshape', shape);
 }
-};
-// round to 4 decimal places after point
-var mRound = function (num) {
-return Math.round(num * 10000 + 0.00001) / 10000
 };
 // callback for vector.drawshape
 var shapeCompleted = function(data, shape) {
 console.debug('measure: shapeCompleted', shape);
 };
 $(data).trigger('changeShape', shape); // update widgets
 return false;
 };
+// callback for vector.drawshape
+var onCreateShape = function(event, shape) {
+var data = this;
+data.measureWidgets.startb.addClass('dl-drawing');
+console.debug('measure: onCreateShape', shape);
+};
 // event handler for changeShape
 var onChangeShape = function(event, shape) {
 var data = this;
+updateInfo(data, shape);
 console.debug('measure: onChangeShape', data, shape);
-updateInfo(data, shape);
+};
-};
 // event handler for renderShape
 var onRenderShape = function(event, shape) {
 // event handler for updating shape info
 var shapeInfo = function(event) {
 };
 var data = this;
 var $elem = shape.$elem;
 $elem.on('click.measure', shapeInfo);
 console.debug('measure: onRenderShape', data, shape);
+};
+// round to 4 decimal places after point
+var mRound = function (num) {
+return Math.round(num * 10000 + 0.00001) / 10000
 };
 // calculate the distance of the first 2 points of a shape (rectified digilib coords)
 var rectifiedDist = function(data, shape) {
 var coords = shape.geometry.coordinates;
 var convertLength = function(data, val) {
 var widgets = data.measureWidgets;
 var u1 = parseFloat(widgets.unit1.val());
 var u2 = parseFloat(widgets.unit2.val());
 return val * u1 / u2;
-}
+};
 // convert area to second unit
 var convertArea = function(data, val) {
 var widgets = data.measureWidgets;
 var u1 = parseFloat(widgets.unit1.val());
 var u2 = parseFloat(widgets.unit2.val());
 return val * u1 * u1 / (u2 * u2);
-}
+};
 // recalculate factor after entering a new value in input element "value1"
-var updateFactor = function(data) {
+var changeFactor = function(data) {
 var widgets = data.measureWidgets;
 var val = parseFloat(widgets.value1.val());
 var dist = data.lastMeasuredDistance;
 var fac = val / dist;
+data.measureFactor = fac;
 // widgets.fac.text(fn.cropFloatStr(fac));
 var conv = convertLength(data, val);
 widgets.value2.text(fn.cropFloatStr(mRound(conv)));
-data.lastMeasureFactor = fac;
-data.lastMeasuredValue = val;
 };
 // info window for line
 var infoLine = function(data, shape) {
 var dist = rectifiedDist(data, shape);
-var fac = data.lastMeasureFactor;
+var fac = data.measureFactor;
 var val = dist * fac;
 var conv = convertLength(data, val);
 var widgets = data.measureWidgets;
 widgets.value1.val(fn.cropFloatStr(mRound(val)));
 widgets.value2.text(fn.cropFloatStr(mRound(conv)));
 widgets.info.text('length');
-data.lastMeasuredValue = val;
 data.lastMeasuredDistance = dist;
 };
 // info window for polygon
 var infoPolygon = function(data, shape) {
 var area = rectifiedArea(data, shape);
-var fac = data.lastMeasureFactor;
+var fac = data.measureFactor;
 var val = area * fac * fac;
 var conv = convertArea(data, val);
 var widgets = data.measureWidgets;
 widgets.value1.val(fn.cropFloatStr(mRound(val)));
 widgets.value2.text(fn.cropFloatStr(mRound(conv)));
 widgets.value2.text('rect 2');
 };
 // recalculate after measuring
 var updateInfo = function(data, shape) {
-setSelectedShape(data, shape);
 var type = shape.geometry.type;
-console.debug('measure: updateInfo', type);
+data.measureWidgets.shape.val(type);
 if (type === 'Line') {
 return infoLine(data, shape);
 }
 if (type === 'LineString') {
 return infoLine(data, shape);
 }
 if (type === 'Polygon') {
 return infoPolygon(data, shape);
 }
 };
+// recalculate after unit change
+var updateConversion = function(data) {
+}
 // return a shape of the currently selected shape type
-var getSelectedShape = function(data) {
+var newShape = function(data) {
-var selection = getSelectedShapeType(data);
+return {
-var stroke = getSelectedStroke(data);
-var shape = {
 geometry : {
-type : selection.type
+type : getSelectedShapeType(data)
 },
 properties : {
-stroke : stroke,
+stroke : getSelectedStroke(data),
 editable : true,
 cssclass : 'dl-measure-item'
 }
 };
-return shape;
+};
-};
+// return the currently selected shape type
-// return a shape of the currently selected shape type
-var setSelectedShape = function(data, shape) {
-var type = shape.geometry.type;
-var types = data.settings.shapeTypes;
-for (var i = 0; i < types.length; i++) {
-if (types[i].type === type) break;
-}
-if (i === types.length) i = 0;
-data.settings.selectedShape = i;
-data.measureWidgets.shape.val(i);
-};
-// return shape type selected by user (on the toolbar)
 var getSelectedShapeType = function(data) {
-var val = data.measureWidgets.shape.val();
+return data.settings.activeShapeType;
-return data.settings.shapeTypes[val];
+};
-};
+// set the currently selected shape type
+var setActiveShapeType = function(data) {
+data.settings.activeShapeType = data.measureWidgets.shape.val();
+};
+// set the currently selected shape type
+var changeActiveShapeType = function(data, type) {
+data.settings.activeShapeType = type;
+data.measureWidgets.shape.val(type);
+};
 // return line color chosen by user
 var getSelectedStroke = function(data) {
 // TODO: colorpicker
 return data.settings.linecolor;
 };
 // load shapes into select element
 var loadShapeTypes = function(data) {
 var $shape = data.measureWidgets.shape;
-$.each(data.settings.shapeTypes, function(index, item) {
+var shapeTypes = data.settings.shapeTypes;
-var $opt = $('<option value="'+ index + '">' + item.name + '</option>');
+var addOption = function(index, type) {
-$shape.append($opt);
+$shape.append($('<option value="'+ type + '">' + shapeTypes[type].name + '</option>'));
-});
+};
-$shape.children(':not(:disabled)')[data.settings.selectedShape].selected = true;
+$.each(data.settings.implementedShapes, addOption);
+$shape.children()[0].selected = true;
 };
 // load units into select elements
 var loadSections = function(data) {
 var widgets = data.measureWidgets;
 // initial position of measure bar (bottom left of browser window)
 var setScreenPosition = function(data, $div) {
 if ($div == null) return;
 var h = geom.rectangle($div).height;
 var s = fn.getFullscreenRect(data);
-geom.position(0, s.height - h).adjustDiv($div);
+geom.position(10, s.height - h).adjustDiv($div);
 };
 // drag measureBar around
 var dragMeasureBar = function(event) {
 var $div = $(this).parent();
 			// eq1 : $('<span class="dl-measure-label">=</span>'),
 			eq2 : $('<span class="dl-measure-label">=</span>'),
 			// len : $('<span id="dl-measure-len" class="dl-measure-number">0.0</span>'),
 			info : $('<span id="dl-measure-shapeinfo" class="dl-measure-label">length</span>'),
 			fac : $('<span id="dl-measure-factor" class="dl-measure-number" />'),
-			value1 : $('<input id="dl-measure-value1" class="dl-measure-input" title="last measured distance - click to change the value" value="0.0" />'),
+			value1 : $('<input id="dl-measure-value1" class="dl-measure-input" title="last measured value - click to change the value" value="0.0" />'),
-			value2 : $('<span id="dl-measure-value2" class="dl-measure-label" title="last measured distance, converted to the secondary unit" value="0.0"/>'),
+			value2 : $('<span id="dl-measure-value2" class="dl-measure-label" title="last measured value, converted to the secondary unit" value="0.0"/>'),
 			unit1 : $('<select id="dl-measure-unit1" title="current measuring unit - click to change" />'),
 			unit2 : $('<select id="dl-measure-unit2" title="secondary measuring unit - click to change" />'),
 			angle : $('<span id="dl-measure-angle" class="dl-measure-number" title="last measured angle" />')
 		    };
 var $measureBar = $('<div id="dl-measure-toolbar" />');
 $.each(widgets.names, function(index, item) {
 $measureBar.append(widgets[item]);
 });
 data.$elem.append($measureBar);
 data.$measureBar = $measureBar;
-widgets.fac.text(fn.cropFloatStr(data.lastMeasureFactor));
+widgets.fac.text(fn.cropFloatStr(data.measureFactor));
 data.measureWidgets = widgets;
 loadShapeTypes(data);
 loadSections(data);
 setupMeasureWidgets(data);
 // prevent mousedown event ot bubble up to measureBar (no dragging!)
 console.debug('measure: startb mousedown=', action, ' evt=', evt);
 $elem.digilib(action);
 return false;
 });
-widgets.value1.on('change.measure', function(evt) { updateFactor(data) });
+widgets.shape.on('change.measure',  function(evt) { setActiveShapeType(data) });
-widgets.unit1.on('change.measure', function(evt) { updateInfo(data) }); // TODO: recalculate
+widgets.value1.on('change.measure', function(evt) { changeFactor(data) });
-widgets.unit2.on('change.measure', function(evt) { updateInfo(data) }); // TODO: recalculate
+widgets.unit1.on('change.measure',  function(evt) { updateInfo(data) });
+widgets.unit2.on('change.measure',  function(evt) { updateInfo(data) });
 };
 // event handler
 var handleSetup = function (evt) {
 console.debug("measure: handleSetup");
 var data = this;
 data.lastMeasuredDistance = 0;
-data.lastMeasuredValue = 0;
 data.lastMeasuredAngle = 0;
-data.lastMeasureFactor = 1.0,
+data.measureFactor = 1.0,
 setupMeasureBar(data);
 };
 // event handler
 var handleUpdate = function (evt) {
 FULL_AREA  = geom.rectangle(0, 0, 1, 1);
 // install event handlers
 var $data = $(data);
 $data.on('setup', handleSetup);
 $data.on('update', handleUpdate);
+$data.on('createShape', onCreateShape);
 $data.on('renderShape', onRenderShape);
 $data.on('changeShape', onChangeShape);
 };
 // plugin object with name and init
 // shared objects filled by digilib on registration
 var pluginProperties = {