sketchily 1.3.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,453 @@
1
+ /*
2
+ * ext-imagelib.js
3
+ *
4
+ * Licensed under the MIT License
5
+ *
6
+ * Copyright(c) 2010 Alexis Deveria
7
+ *
8
+ */
9
+
10
+ svgEditor.addExtension("imagelib", function() {
11
+
12
+ var uiStrings = svgEditor.uiStrings;
13
+
14
+ $.extend(uiStrings, {
15
+ imagelib: {
16
+ select_lib: 'Select an image library',
17
+ show_list: 'Show library list',
18
+ import_single: 'Import single',
19
+ import_multi: 'Import multiple',
20
+ open: 'Open as new document'
21
+ }
22
+ });
23
+
24
+ var img_libs = [/*{
25
+ name: 'Demo library (local)',
26
+ url: '/assets/extensions/imagelib/index.html',
27
+ description: 'Demonstration library for SVG-edit on this server'
28
+ },*/
29
+ {
30
+ name: 'IAN Symbol Libraries',
31
+ url: 'http://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php',
32
+ description: 'Free library of illustrations'
33
+ }
34
+ ];
35
+
36
+ var xlinkns = "http://www.w3.org/1999/xlink";
37
+
38
+ function closeBrowser() {
39
+ $('#imgbrowse_holder').hide();
40
+ }
41
+
42
+ function importImage(url) {
43
+ var newImage = svgCanvas.addSvgElementFromJson({
44
+ "element": "image",
45
+ "attr": {
46
+ "x": 0,
47
+ "y": 0,
48
+ "width": 0,
49
+ "height": 0,
50
+ "id": svgCanvas.getNextId(),
51
+ "style": "pointer-events:inherit"
52
+ }
53
+ });
54
+ svgCanvas.clearSelection();
55
+ svgCanvas.addToSelection([newImage]);
56
+ svgCanvas.setImageURL(url);
57
+ }
58
+
59
+ var mode = 's';
60
+ var multi_arr = [];
61
+ var cur_meta;
62
+ var tranfer_stopped = false;
63
+ var pending = {};
64
+
65
+ window.addEventListener("message", function(evt) {
66
+ // Receive postMessage data
67
+ var response = evt.data;
68
+
69
+ if(!response) {
70
+ // Do nothing
71
+ return;
72
+ }
73
+
74
+ var char1 = response.charAt(0);
75
+
76
+ var svg_str;
77
+ var img_str;
78
+
79
+ if(char1 != "{" && tranfer_stopped) {
80
+ tranfer_stopped = false;
81
+ return;
82
+ }
83
+
84
+ if(char1 == '|') {
85
+ var secondpos = response.indexOf('|', 1);
86
+ var id = response.substr(1, secondpos-1);
87
+ response = response.substr(secondpos+1);
88
+ char1 = response.charAt(0);
89
+
90
+ }
91
+
92
+
93
+ // Hide possible transfer dialog box
94
+ $('#dialog_box').hide();
95
+
96
+ switch (char1) {
97
+ case '{':
98
+ // Metadata
99
+ tranfer_stopped = false;
100
+ var cur_meta = JSON.parse(response);
101
+
102
+ pending[cur_meta.id] = cur_meta;
103
+
104
+ var name = (cur_meta.name || 'file');
105
+
106
+ var message = uiStrings.notification.retrieving.replace('%s', name);
107
+
108
+ if(mode != 'm') {
109
+ $.process_cancel(message, function() {
110
+ tranfer_stopped = true;
111
+ // Should a message be sent back to the frame?
112
+
113
+ $('#dialog_box').hide();
114
+ });
115
+ } else {
116
+ var entry = $('<div>' + message + '</div>').data('id', cur_meta.id);
117
+ preview.append(entry);
118
+ cur_meta.entry = entry;
119
+ }
120
+
121
+ return;
122
+ case '<':
123
+ svg_str = true;
124
+ break;
125
+ case 'd':
126
+ if(response.indexOf('data:image/svg+xml') === 0) {
127
+ var pre = 'data:image/svg+xml;base64,';
128
+ var src = response.substring(pre.length);
129
+ response = svgCanvas.Utils.decode64(src);
130
+ svg_str = true;
131
+ break;
132
+ } else if(response.indexOf('data:image/') === 0) {
133
+ img_str = true;
134
+ break;
135
+ }
136
+ // Else fall through
137
+ default:
138
+ // TODO: See if there's a way to base64 encode the binary data stream
139
+ // var str = 'data:;base64,' + svgCanvas.Utils.encode64(response, true);
140
+
141
+ // Assume it's raw image data
142
+ // importImage(str);
143
+
144
+ // Don't give warning as postMessage may have been used by something else
145
+ if(mode !== 'm') {
146
+ closeBrowser();
147
+ } else {
148
+ pending[id].entry.remove();
149
+ }
150
+ // $.alert('Unexpected data was returned: ' + response, function() {
151
+ // if(mode !== 'm') {
152
+ // closeBrowser();
153
+ // } else {
154
+ // pending[id].entry.remove();
155
+ // }
156
+ // });
157
+ return;
158
+ }
159
+
160
+ switch (mode) {
161
+ case 's':
162
+ // Import one
163
+ if(svg_str) {
164
+ svgCanvas.importSvgString(response);
165
+ } else if(img_str) {
166
+ importImage(response);
167
+ }
168
+ closeBrowser();
169
+ break;
170
+ case 'm':
171
+ // Import multiple
172
+ multi_arr.push([(svg_str ? 'svg' : 'img'), response]);
173
+ var cur_meta = pending[id];
174
+ if(svg_str) {
175
+ if(cur_meta && cur_meta.name) {
176
+ var title = cur_meta.name;
177
+ } else {
178
+ // Try to find a title
179
+ var xml = new DOMParser().parseFromString(response, 'text/xml').documentElement;
180
+ var title = $(xml).children('title').first().text() || '(SVG #' + response.length + ')';
181
+ }
182
+ if(cur_meta) {
183
+ preview.children().each(function() {
184
+ if($(this).data('id') == id) {
185
+ if(cur_meta.preview_url) {
186
+ $(this).html('<img src="' + cur_meta.preview_url + '">' + title);
187
+ } else {
188
+ $(this).text(title);
189
+ }
190
+ submit.removeAttr('disabled');
191
+ }
192
+ });
193
+ } else {
194
+ preview.append('<div>'+title+'</div>');
195
+ submit.removeAttr('disabled');
196
+ }
197
+ } else {
198
+ if(cur_meta && cur_meta.preview_url) {
199
+ var title = cur_meta.name || '';
200
+ }
201
+ if(cur_meta && cur_meta.preview_url) {
202
+ var entry = '<img src="' + cur_meta.preview_url + '">' + title;
203
+ } else {
204
+ var entry = '<img src="' + response + '">';
205
+ }
206
+
207
+ if(cur_meta) {
208
+ preview.children().each(function() {
209
+ if($(this).data('id') == id) {
210
+ $(this).html(entry);
211
+ submit.removeAttr('disabled');
212
+ }
213
+ });
214
+ } else {
215
+ preview.append($('<div>').append(entry));
216
+ submit.removeAttr('disabled');
217
+ }
218
+
219
+ }
220
+ break;
221
+ case 'o':
222
+ // Open
223
+ if(!svg_str) break;
224
+ svgEditor.openPrep(function(ok) {
225
+ if(!ok) return;
226
+ svgCanvas.clear();
227
+ svgCanvas.setSvgString(response);
228
+ // updateCanvas();
229
+ });
230
+ closeBrowser();
231
+ break;
232
+ }
233
+ }, true);
234
+
235
+ var preview, submit;
236
+
237
+ function toggleMulti(show) {
238
+
239
+ $('#lib_framewrap, #imglib_opts').css({right: (show ? 200 : 10)});
240
+ if(!preview) {
241
+ preview = $('<div id=imglib_preview>').css({
242
+ position: 'absolute',
243
+ top: 45,
244
+ right: 10,
245
+ width: 180,
246
+ bottom: 45,
247
+ background: '#fff',
248
+ overflow: 'auto'
249
+ }).insertAfter('#lib_framewrap');
250
+
251
+ submit = $('<button disabled>Import selected</button>')
252
+ .appendTo('#imgbrowse')
253
+ .on("click touchend", function() {
254
+ $.each(multi_arr, function(i) {
255
+ var type = this[0];
256
+ var data = this[1];
257
+ if(type == 'svg') {
258
+ svgCanvas.importSvgString(data);
259
+ } else {
260
+ importImage(data);
261
+ }
262
+ svgCanvas.moveSelectedElements(i*20, i*20, false);
263
+ });
264
+ preview.empty();
265
+ multi_arr = [];
266
+ $('#imgbrowse_holder').hide();
267
+ }).css({
268
+ position: 'absolute',
269
+ bottom: 10,
270
+ right: -10
271
+ });
272
+
273
+ }
274
+
275
+ preview.toggle(show);
276
+ submit.toggle(show);
277
+ }
278
+
279
+ function showBrowser() {
280
+
281
+ var browser = $('#imgbrowse');
282
+ if(!browser.length) {
283
+ $('<div id=imgbrowse_holder><div id=imgbrowse class=toolbar_button>\
284
+ </div></div>').insertAfter('#svg_docprops');
285
+ browser = $('#imgbrowse');
286
+
287
+ var all_libs = uiStrings.imagelib.select_lib;
288
+
289
+ var lib_opts = $('<ul id=imglib_opts>').appendTo(browser);
290
+ var frame = $('<iframe/>').prependTo(browser).hide().wrap('<div id=lib_framewrap>');
291
+
292
+ var header = $('<h1>').prependTo(browser).text(all_libs).css({
293
+ position: 'absolute',
294
+ top: 0,
295
+ left: 0,
296
+ width: '100%'
297
+ });
298
+
299
+ var cancel = $('<button>' + uiStrings.common.cancel + '</button>')
300
+ .appendTo(browser)
301
+ .on("click touchend", function() {
302
+ $('#imgbrowse_holder').hide();
303
+ }).css({
304
+ position: 'absolute',
305
+ top: 5,
306
+ right: -10
307
+ });
308
+
309
+ var leftBlock = $('<span>').css({position:'absolute',top:5,left:10}).appendTo(browser);
310
+
311
+ var back = $('<button hidden>' + uiStrings.imagelib.show_list + '</button>')
312
+ .appendTo(leftBlock)
313
+ .on("click touchend", function() {
314
+ frame.attr('src', 'about:blank').hide();
315
+ lib_opts.show();
316
+ header.text(all_libs);
317
+ back.hide();
318
+ }).css({
319
+ 'margin-right': 5
320
+ }).hide();
321
+
322
+ var type = $('<select><option value=s>' +
323
+ uiStrings.imagelib.import_single + '</option><option value=m>' +
324
+ uiStrings.imagelib.import_multi + '</option><option value=o>' +
325
+ uiStrings.imagelib.open + '</option></select>').appendTo(leftBlock).change(function() {
326
+ mode = $(this).val();
327
+ switch (mode) {
328
+ case 's':
329
+ case 'o':
330
+ toggleMulti(false);
331
+ break;
332
+
333
+ case 'm':
334
+ // Import multiple
335
+ toggleMulti(true);
336
+ }
337
+ }).css({
338
+ 'margin-top': 10
339
+ });
340
+
341
+ cancel.prepend($.getSvgIcon('cancel', true));
342
+ back.prepend($.getSvgIcon('tool_imagelib', true));
343
+
344
+ $.each(img_libs, function(i, opts) {
345
+ $('<li>')
346
+ .appendTo(lib_opts)
347
+ .text(opts.name)
348
+ .on("click touchend", function() {
349
+ frame.attr('src', opts.url).show();
350
+ header.text(opts.name);
351
+ lib_opts.hide();
352
+ back.show();
353
+ }).append('<span>' + opts.description + '</span>');
354
+ });
355
+
356
+ } else {
357
+ $('#imgbrowse_holder').show();
358
+ }
359
+ }
360
+
361
+ return {
362
+ svgicons: "/assets/extensions/ext-imagelib.xml",
363
+ buttons: [{
364
+ id: "tool_imagelib",
365
+ type: "app_menu", // _flyout
366
+ position: 4,
367
+ title: "Image library",
368
+ events: {
369
+ "mouseup": showBrowser
370
+ }
371
+ }],
372
+ callback: function() {
373
+
374
+ $('<style>').text('\
375
+ #imgbrowse_holder {\
376
+ position: absolute;\
377
+ top: 0;\
378
+ left: 0;\
379
+ width: 100%;\
380
+ height: 100%;\
381
+ background-color: rgba(0, 0, 0, .5);\
382
+ z-index: 5;\
383
+ }\
384
+ \
385
+ #imgbrowse {\
386
+ position: absolute;\
387
+ top: 25px;\
388
+ left: 25px;\
389
+ right: 25px;\
390
+ bottom: 25px;\
391
+ min-width: 300px;\
392
+ min-height: 200px;\
393
+ background: #B0B0B0;\
394
+ border: 1px outset #777;\
395
+ }\
396
+ #imgbrowse h1 {\
397
+ font-size: 20px;\
398
+ margin: .4em;\
399
+ text-align: center;\
400
+ }\
401
+ #lib_framewrap,\
402
+ #imgbrowse > ul {\
403
+ position: absolute;\
404
+ top: 45px;\
405
+ left: 10px;\
406
+ right: 10px;\
407
+ bottom: 10px;\
408
+ background: white;\
409
+ margin: 0;\
410
+ padding: 0;\
411
+ }\
412
+ #imgbrowse > ul {\
413
+ overflow: auto;\
414
+ }\
415
+ #imgbrowse > div {\
416
+ border: 1px solid #666;\
417
+ }\
418
+ #imglib_preview > div {\
419
+ padding: 5px;\
420
+ font-size: 12px;\
421
+ }\
422
+ #imglib_preview img {\
423
+ display: block;\
424
+ margin: 0 auto;\
425
+ max-height: 100px;\
426
+ }\
427
+ #imgbrowse li {\
428
+ list-style: none;\
429
+ padding: .5em;\
430
+ background: #E8E8E8;\
431
+ border-bottom: 1px solid #B0B0B0;\
432
+ line-height: 1.2em;\
433
+ font-style: sans-serif;\
434
+ }\
435
+ #imgbrowse li > span {\
436
+ color: #666;\
437
+ font-size: 15px;\
438
+ display: block;\
439
+ }\
440
+ #imgbrowse li:hover {\
441
+ background: #FFC;\
442
+ cursor: pointer;\
443
+ }\
444
+ #imgbrowse iframe {\
445
+ width: 100%;\
446
+ height: 100%;\
447
+ border: 0;\
448
+ }\
449
+ ').appendTo('head');
450
+ }
451
+ }
452
+ });
453
+
@@ -57,7 +57,7 @@
57
57
  langPath: '/assets/locale/',
58
58
  extPath: '/assets/extensions/',
59
59
  jGraduatePath: '/assets/jgraduate/images/',
60
- extensions: ['ext-markers.js','ext-connector.js', 'ext-eyedropper.js', 'ext-shapes.js', 'ext-imagelib.js','ext-grid.js'],
60
+ extensions: ['ext-markers.js','ext-connector.js', 'ext-eyedropper.js', 'ext-shapes.js', 'ext-imagelib.js', 'ext-grid.js'],
61
61
  initTool: 'select',
62
62
  wireframe: false,
63
63
  colorPickerCSS: null,
@@ -57,7 +57,7 @@
57
57
  langPath: '/assets/locale/',
58
58
  extPath: '/assets/extensions/',
59
59
  jGraduatePath: '/assets/jgraduate/images/',
60
- extensions: ['ext-markers.js','ext-connector.js', 'ext-eyedropper.js', 'ext-shapes.js', 'ext-imagelib.js','ext-grid.js'],
60
+ extensions: ['ext-markers.js','ext-connector.js', 'ext-eyedropper.js', 'ext-shapes.js', 'ext-grid.js'],
61
61
  initTool: 'select',
62
62
  wireframe: false,
63
63
  colorPickerCSS: null,
@@ -746,7 +746,6 @@
746
746
 
747
747
  // called when any element has changed
748
748
  var elementChanged = function(window,elems) {
749
- alert('a');
750
749
  var mode = svgCanvas.getMode();
751
750
  if(mode === "select") {
752
751
  setSelectMode();
@@ -5219,11 +5219,11 @@ this.svgToString = function(elem, indent) {
5219
5219
  }
5220
5220
 
5221
5221
  // Embed images when saving
5222
- if(save_options.apply
5223
- && elem.nodeName === 'image'
5222
+ if(/*save_options.apply
5223
+ && */elem.nodeName === 'image'
5224
5224
  && attr.localName === 'href'
5225
- && save_options.images
5226
- && save_options.images === 'embed')
5225
+ /*&& save_options.images
5226
+ && save_options.images === 'embed'*/)
5227
5227
  {
5228
5228
  var img = encodableImages[attrVal];
5229
5229
  if(img) attrVal = img;