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,
|
|
94 // keep original object when moving/scaling/rotating
|
|
95 keepOriginal : false,
|
|
96 // number of copies when drawing grids
|
|
97 gridCopies : 10
|
|
98 };
|
|
99
|
|
100 // setup a div for accessing the main SVG functionality
|
|
101 var setupToolBar = function(settings) {
|
782
|
102 var $toolBar = $('<div id="svg-toolbar"/>');
|
778
|
103 // shapes select
|
|
104 var $shape = $('<select id="svg-shapes"/>');
|
|
105 for (var i = 0; i < settings.shapes.length; i++) {
|
|
106 var name = settings.shapes[i];
|
|
107 var $opt = $('<option value="' + i + '">' + name + '</option>');
|
|
108 $shape.append($opt);
|
|
109 }
|
|
110 // console.debug($xml);
|
|
111 var $xml = $(settings.xml);
|
|
112 var units = [];
|
|
113 $xml.find("unit").each(function() {
|
|
114 units.push({
|
|
115 'name' : $(this).attr("name"),
|
|
116 'factor' : $(this).attr("factor"),
|
|
117 'add' : $(this).attr("add"),
|
|
118 'subunits' : $(this).attr("subunits")
|
|
119 });
|
|
120 });
|
|
121 settings.units = units;
|
|
122 // unit selects
|
781
|
123 var $unit1 = $('<select id="svg-convert1"/>');
|
|
124 var $unit2 = $('<select id="svg-convert2"/>');
|
778
|
125 for (var i = 0; i < units.length; i++) {
|
|
126 var name = units[i].name;
|
|
127 var $opt = $('<option value="' + i + '">' + name + '</option>');
|
782
|
128 $opt.data(pluginName, units[i]);
|
781
|
129 $unit1.append($opt);
|
|
130 $unit2.append($opt.clone());
|
778
|
131 }
|
|
132 // other elements
|
781
|
133 var $la1 = $('<span class="svg-label">pixel</span>');
|
|
134 var $la2 = $('<span class="svg-label">factor</span>');
|
|
135 var $la3 = $('<span class="svg-label">=</span>');
|
|
136 var $la4 = $('<span class="svg-label">=</span>');
|
|
137 var $px = $('<span id="svg-pixel" class="svg-number">0.0</span>');
|
|
138 var $factor = $('<span id="svg-factor" class="svg-number">0.0</span>');
|
|
139 var $result1 = $('<input id="svg-unit1" class="svg-input" value="0.0"/>');
|
|
140 var $result2 = $('<input id="svg-unit2" class="svg-input" value="0.0"/>');
|
|
141 var $angle = $('<span id="svg-angle" class="svg-number">0.0</span>');
|
782
|
142 $('body').append($toolBar);
|
|
143 $toolBar.append($shape);
|
|
144 $toolBar.append($la1);
|
|
145 $toolBar.append($px);
|
|
146 $toolBar.append($la2);
|
|
147 $toolBar.append($factor);
|
|
148 $toolBar.append($la3);
|
|
149 $toolBar.append($result1);
|
|
150 $toolBar.append($unit1);
|
|
151 $toolBar.append($la4);
|
|
152 $toolBar.append($result2);
|
|
153 $toolBar.append($unit2);
|
|
154 $toolBar.append($angle);
|
|
155 return $toolBar;
|
|
156 };
|
|
157
|
|
158 var drawInitial = function ($svg) {
|
|
159 console.debug('SVG is ready');
|
|
160 var $svgDiv = $(this);
|
|
161 var rect = geom.rectangle($svgDiv);
|
|
162 $svg.line(0, 0, rect.width, rect.height,
|
|
163 {stroke: 'white', strokeWidth: 2});
|
|
164 $svg.line(0, rect.height, rect.width, 0,
|
|
165 {stroke: 'red', strokeWidth: 2});
|
778
|
166 };
|
|
167
|
|
168 var actions = {
|
|
169 "init" : function(options) {
|
|
170 var $digilib = this;
|
782
|
171 var data = $digilib.data('digilib');
|
788
|
172 var plugins = data.plugins;
|
|
173 geom = plugins.geometry.init();
|
778
|
174 var settings = $.extend({}, defaults, options);
|
782
|
175 // prepare the AJAX callback
|
|
176 // TODO: return unless interactiveMode === 'fullscreen'?
|
778
|
177 var onLoadXML = function (xml) {
|
|
178 settings.xml = xml;
|
782
|
179 settings.$toolBar = setupToolBar(settings);
|
778
|
180 $digilib.each(function() {
|
|
181 var $elem = $(this);
|
|
182 $elem.data(pluginName, settings);
|
|
183 });
|
|
184 };
|
782
|
185 var onLoadScalerImg = function () {
|
|
186 var $svgDiv = $('<div id="svg" />');
|
|
187 $('body').append($svgDiv);
|
|
188 // size SVG div like scaler img
|
|
189 var $scalerImg = $digilib.find('img.pic');
|
|
190 var scalerImgRect = geom.rectangle($scalerImg);
|
|
191 scalerImgRect.adjustDiv($svgDiv);
|
|
192 console.debug('$svgDiv', scalerImgRect);
|
|
193 var $svg = $svgDiv.svg({
|
|
194 'onLoad' : drawInitial
|
|
195 });
|
|
196 settings.$elem = $digilib;
|
|
197 settings.$svgDiv = $svgDiv;
|
|
198 settings.$svg = $svg;
|
|
199 // set SVG data
|
|
200 $svg.data('digilib', data);
|
|
201 $svg.data(pluginName, settings);
|
|
202 };
|
778
|
203 // fetch the XML measuring unit list
|
|
204 $.ajax({
|
|
205 type : "GET",
|
|
206 url : "svg/archimedes.xml",
|
|
207 dataType : "xml",
|
|
208 success : onLoadXML
|
|
209 });
|
782
|
210 data.$img.load(onLoadScalerImg);
|
778
|
211 return this;
|
|
212 }
|
|
213 };
|
|
214
|
|
215 // hook plugin into jquery
|
|
216 $.fn[pluginName] = function(action) {
|
|
217 if (actions[action]) {
|
|
218 // call action on this with the remaining arguments (inserting data as first argument)
|
|
219 var $elem = $(this);
|
|
220 var data = $elem.data('digilib');
|
|
221 if (!data) {
|
|
222 return $.error(pluginName + ' action ' + action + ' needs a digilib element');
|
|
223 }
|
|
224 var args = Array.prototype.slice.call(arguments, 1);
|
|
225 args.unshift(data);
|
|
226 return actions[action].apply(this, args);
|
|
227 } else if (typeof(action) === 'object' || !action) {
|
|
228 // call init on this
|
|
229 return actions.init.apply(this, arguments);
|
|
230 } else {
|
|
231 $.error('action ' + action + ' does not exist on jQuery.' + pluginName);
|
|
232 }
|
|
233 };
|
|
234
|
|
235 })(jQuery);
|
|
236
|