|
778
|
1 /* Copyright (c) 2011 Martin Raspe, Robert Casties
|
|
|
2
|
|
|
3 This program is free software: you can redistribute it and/or modify
|
|
|
4 it under the terms of the GNU Lesser General Public License as published by
|
|
|
5 the Free Software Foundation, either version 2 of the License, or
|
|
|
6 (at your option) any later version.
|
|
|
7
|
|
|
8 This program is distributed in the hope that it will be useful,
|
|
|
9 but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
|
10 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
|
11 GNU Lesser General Public License for more details.
|
|
|
12
|
|
|
13 You should have received a copy of the GNU Lesser General Public License
|
|
|
14 along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
|
15
|
|
|
16 Authors:
|
|
|
17 Martin Raspe, Robert Casties, 9.2.2011
|
|
|
18 */
|
|
|
19
|
|
|
20 /**
|
|
|
21 * digilib SVG plugin (measuring tool for use within the digilib jQuery plugin)
|
|
|
22 **/
|
|
|
23
|
|
|
24
|
|
|
25 /* jslint browser: true, debug: true, forin: true
|
|
|
26 */
|
|
|
27
|
|
|
28 // fallback for console.log calls
|
|
|
29 if (typeof(console) === 'undefined') {
|
|
|
30 var console = {
|
|
|
31 log : function(){},
|
|
|
32 debug : function(){},
|
|
|
33 error : function(){}
|
|
|
34 };
|
|
|
35 var customConsole = true;
|
|
|
36 }
|
|
|
37
|
|
|
38 (function($) {
|
|
|
39 console.debug('installing jquery.digilibSVG');
|
|
782
|
40
|
|
778
|
41 var pluginName = 'digilibSVG';
|
|
788
|
42 var geom;
|
|
782
|
43
|
|
778
|
44 var defaults = {
|
|
|
45 // choice of colors offered by toolbar
|
|
|
46 lineColors : ['white', 'red', 'yellow', 'green', 'blue', 'black'],
|
|
|
47 // default color
|
|
|
48 lineColor : 'white',
|
|
|
49 // color while the line is drawn
|
|
|
50 drawColor : 'green',
|
|
|
51 // color of selected objects
|
|
|
52 selectColor : 'red',
|
|
|
53 // drawing shapes
|
|
|
54 shapes : ['line', 'polyline', 'rectangle', 'square', 'circle', 'arch',
|
|
|
55 'ratio', 'intercolumn', 'line grid'],
|
|
|
56 // default shape
|
|
|
57 shape : 'line',
|
|
|
58 // measuring unit (index into list)
|
|
|
59 unit : 1,
|
|
|
60 // converted unit (index into list)
|
|
|
61 converted : 2,
|
|
|
62 // last measured distance
|
|
|
63 lastDistance : 0,
|
|
|
64 // last measured angle
|
|
|
65 lastAngle : 0,
|
|
|
66 // maximal denominator for mixed fractions
|
|
|
67 maxDenominator : 20,
|
|
|
68 // number of decimal places for convert results
|
|
|
69 maxDecimals : 3,
|
|
|
70 // show convert result as mixed fraction?
|
|
|
71 showMixedFraction : false,
|
|
|
72 // show angle relative to last line?
|
|
|
73 showRelativeAngle : false,
|
|
|
74 // show distance numbers?
|
|
|
75 showDistanceNumbers : true,
|
|
|
76 // show ratio of rectangle sides?
|
|
|
77 showRectangleRatios : false,
|
|
|
78 // draw line ends as small crosses
|
|
|
79 drawEndPoints : true,
|
|
|
80 // draw mid points of lines
|
|
|
81 drawMidPoints : false,
|
|
|
82 // draw circle centers
|
|
|
83 drawCenters : false,
|
|
|
84 // draw rectangles from the diagonal and one point
|
|
|
85 drawFromDiagonal : false,
|
|
|
86 // draw circles from center
|
|
|
87 drawFromCenter : false,
|
|
|
88 // snap to endpoints
|
|
|
89 snapEndPoints : false,
|
|
|
90 // snap to mid points of lines
|
|
|
91 snapMidPoints : false,
|
|
|
92 // snap to circle centers
|
|
|
93 snapCenters : false,
|
|
789
|
94 // snap distance (in screen pixels)
|
|
|
95 snapDistance : 5,
|
|
778
|
96 // keep original object when moving/scaling/rotating
|
|
|
97 keepOriginal : false,
|
|
|
98 // number of copies when drawing grids
|
|
|
99 gridCopies : 10
|
|
|
100 };
|
|
|
101
|
|
|
102 // setup a div for accessing the main SVG functionality
|
|
|
103 var setupToolBar = function(settings) {
|
|
782
|
104 var $toolBar = $('<div id="svg-toolbar"/>');
|
|
778
|
105 // shapes select
|
|
|
106 var $shape = $('<select id="svg-shapes"/>');
|
|
|
107 for (var i = 0; i < settings.shapes.length; i++) {
|
|
|
108 var name = settings.shapes[i];
|
|
|
109 var $opt = $('<option value="' + i + '">' + name + '</option>');
|
|
|
110 $shape.append($opt);
|
|
|
111 }
|
|
|
112 // console.debug($xml);
|
|
|
113 var $xml = $(settings.xml);
|
|
|
114 // unit selects
|
|
781
|
115 var $unit1 = $('<select id="svg-convert1"/>');
|
|
|
116 var $unit2 = $('<select id="svg-convert2"/>');
|
|
789
|
117
|
|
|
118 $xml.find("section").each(function() {
|
|
|
119 var $section = $(this);
|
|
|
120 var name = $section.attr("name");
|
|
|
121 // append section name as option
|
|
|
122 var $opt = $('<option class="section" disabled="disabled">' + name + '</option>');
|
|
781
|
123 $unit1.append($opt);
|
|
|
124 $unit2.append($opt.clone());
|
|
789
|
125 $section.find("unit").each(function() {
|
|
|
126 var $unit = $(this);
|
|
|
127 var name = $unit.attr("name");
|
|
|
128 var factor = $unit.attr("factor");
|
|
|
129 var $opt = $('<option class="unit" value="' + factor + '">' + name + '</option>');
|
|
|
130 $opt.data(pluginName, {
|
|
|
131 'name' : name,
|
|
|
132 'factor' : factor,
|
|
|
133 'add' : $unit.attr("add"),
|
|
|
134 'subunits' : $unit.attr("subunits")
|
|
|
135 });
|
|
|
136 $unit1.append($opt);
|
|
|
137 $unit2.append($opt.clone());
|
|
|
138 });
|
|
|
139 });
|
|
|
140 // settings.units = units;
|
|
778
|
141 // other elements
|
|
781
|
142 var $la1 = $('<span class="svg-label">pixel</span>');
|
|
|
143 var $la2 = $('<span class="svg-label">factor</span>');
|
|
|
144 var $la3 = $('<span class="svg-label">=</span>');
|
|
|
145 var $la4 = $('<span class="svg-label">=</span>');
|
|
|
146 var $px = $('<span id="svg-pixel" class="svg-number">0.0</span>');
|
|
|
147 var $factor = $('<span id="svg-factor" class="svg-number">0.0</span>');
|
|
|
148 var $result1 = $('<input id="svg-unit1" class="svg-input" value="0.0"/>');
|
|
|
149 var $result2 = $('<input id="svg-unit2" class="svg-input" value="0.0"/>');
|
|
|
150 var $angle = $('<span id="svg-angle" class="svg-number">0.0</span>');
|
|
782
|
151 $('body').append($toolBar);
|
|
|
152 $toolBar.append($shape);
|
|
|
153 $toolBar.append($la1);
|
|
|
154 $toolBar.append($px);
|
|
|
155 $toolBar.append($la2);
|
|
|
156 $toolBar.append($factor);
|
|
|
157 $toolBar.append($la3);
|
|
|
158 $toolBar.append($result1);
|
|
|
159 $toolBar.append($unit1);
|
|
|
160 $toolBar.append($la4);
|
|
|
161 $toolBar.append($result2);
|
|
|
162 $toolBar.append($unit2);
|
|
|
163 $toolBar.append($angle);
|
|
|
164 return $toolBar;
|
|
|
165 };
|
|
|
166
|
|
|
167 var drawInitial = function ($svg) {
|
|
|
168 console.debug('SVG is ready');
|
|
|
169 var $svgDiv = $(this);
|
|
|
170 var rect = geom.rectangle($svgDiv);
|
|
|
171 $svg.line(0, 0, rect.width, rect.height,
|
|
|
172 {stroke: 'white', strokeWidth: 2});
|
|
|
173 $svg.line(0, rect.height, rect.width, 0,
|
|
|
174 {stroke: 'red', strokeWidth: 2});
|
|
778
|
175 };
|
|
|
176
|
|
|
177 var actions = {
|
|
|
178 "init" : function(options) {
|
|
|
179 var $digilib = this;
|
|
782
|
180 var data = $digilib.data('digilib');
|
|
788
|
181 var plugins = data.plugins;
|
|
|
182 geom = plugins.geometry.init();
|
|
778
|
183 var settings = $.extend({}, defaults, options);
|
|
782
|
184 // prepare the AJAX callback
|
|
|
185 // TODO: return unless interactiveMode === 'fullscreen'?
|
|
778
|
186 var onLoadXML = function (xml) {
|
|
|
187 settings.xml = xml;
|
|
782
|
188 settings.$toolBar = setupToolBar(settings);
|
|
778
|
189 $digilib.each(function() {
|
|
|
190 var $elem = $(this);
|
|
|
191 $elem.data(pluginName, settings);
|
|
|
192 });
|
|
|
193 };
|
|
782
|
194 var onLoadScalerImg = function () {
|
|
|
195 var $svgDiv = $('<div id="svg" />');
|
|
|
196 $('body').append($svgDiv);
|
|
|
197 // size SVG div like scaler img
|
|
|
198 var $scalerImg = $digilib.find('img.pic');
|
|
|
199 var scalerImgRect = geom.rectangle($scalerImg);
|
|
|
200 scalerImgRect.adjustDiv($svgDiv);
|
|
|
201 console.debug('$svgDiv', scalerImgRect);
|
|
|
202 var $svg = $svgDiv.svg({
|
|
|
203 'onLoad' : drawInitial
|
|
|
204 });
|
|
|
205 settings.$elem = $digilib;
|
|
|
206 settings.$svgDiv = $svgDiv;
|
|
|
207 settings.$svg = $svg;
|
|
|
208 // set SVG data
|
|
|
209 $svg.data('digilib', data);
|
|
|
210 $svg.data(pluginName, settings);
|
|
|
211 };
|
|
778
|
212 // fetch the XML measuring unit list
|
|
|
213 $.ajax({
|
|
|
214 type : "GET",
|
|
|
215 url : "svg/archimedes.xml",
|
|
|
216 dataType : "xml",
|
|
|
217 success : onLoadXML
|
|
|
218 });
|
|
782
|
219 data.$img.load(onLoadScalerImg);
|
|
778
|
220 return this;
|
|
|
221 }
|
|
|
222 };
|
|
|
223
|
|
|
224 // hook plugin into jquery
|
|
|
225 $.fn[pluginName] = function(action) {
|
|
|
226 if (actions[action]) {
|
|
|
227 // call action on this with the remaining arguments (inserting data as first argument)
|
|
|
228 var $elem = $(this);
|
|
|
229 var data = $elem.data('digilib');
|
|
|
230 if (!data) {
|
|
|
231 return $.error(pluginName + ' action ' + action + ' needs a digilib element');
|
|
|
232 }
|
|
|
233 var args = Array.prototype.slice.call(arguments, 1);
|
|
|
234 args.unshift(data);
|
|
|
235 return actions[action].apply(this, args);
|
|
|
236 } else if (typeof(action) === 'object' || !action) {
|
|
|
237 // call init on this
|
|
|
238 return actions.init.apply(this, arguments);
|
|
|
239 } else {
|
|
|
240 $.error('action ' + action + ' does not exist on jQuery.' + pluginName);
|
|
|
241 }
|
|
|
242 };
|
|
|
243
|
|
|
244 })(jQuery);
|
|
|
245
|
