Mercurial > hg > digilib-old

comparison client/digitallibrary/jquery/svg/jquery.digilibSVG.js @ 800:65e70c03870b stream

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
merge from juqery branch 12f790cb30de0ac42ff62fb9921d7a3215243b7b
author robcast
date Sat, 19 Feb 2011 09:56:18 +0100
parents 61e4e5d679ba
children
comparison
equal deleted inserted replaced
774:4568e539abd2 800:65e70c03870b
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');
40
41 var pluginName = 'digilibSVG';
42 var geom;
43
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 // snap distance (in screen pixels)
95 snapDistance : 5,
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) {
104 var $toolBar = $('<div id="svg-toolbar"/>');
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
115 var $unit1 = $('<select id="svg-convert1"/>');
116 var $unit2 = $('<select id="svg-convert2"/>');
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>');
123 $unit1.append($opt);
124 $unit2.append($opt.clone());
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;
141 // other elements
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>');
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});
175 };
176
177 var actions = {
178 "init" : function(options) {
179 var $digilib = this;
180 var data = $digilib.data('digilib');
181 var plugins = data.plugins;
182 geom = plugins.geometry.init();
183 var settings = $.extend({}, defaults, options);
184 // prepare the AJAX callback
185 // TODO: return unless interactiveMode === 'fullscreen'?
186 var onLoadXML = function (xml) {
187 settings.xml = xml;
188 settings.$toolBar = setupToolBar(settings);
189 $digilib.each(function() {
190 var $elem = $(this);
191 $elem.data(pluginName, settings);
192 });
193 };
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 };
212 // fetch the XML measuring unit list
213 $.ajax({
214 type : "GET",
215 url : "svg/archimedes.xml",
216 dataType : "xml",
217 success : onLoadXML
218 });
219 data.$img.load(onLoadScalerImg);
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