From 5b77ed02274126f9489405f032c032e3b3ae8d16 Mon Sep 17 00:00:00 2001 From: adityab Date: Sat, 7 Apr 2012 01:44:29 +0530 Subject: [PATCH] First import of SVG-edit code from trunk --- AUTHORS | 28 + LICENSE | 19 + README | 0 README.md | 12 + editor/browser-not-supported.html | 27 + editor/browser.js | 178 + editor/canvg/canvg.js | 2620 +++++ editor/canvg/rgbcolor.js | 287 + editor/contextmenu.js | 67 + editor/contextmenu/jquery.contextMenu.js | 203 + editor/draw.js | 528 + editor/embedapi.html | 56 + editor/embedapi.js | 173 + editor/extensions/closepath_icons.svg | 41 + editor/extensions/ext-arrows.js | 298 + editor/extensions/ext-closepath.js | 92 + editor/extensions/ext-connector.js | 587 ++ editor/extensions/ext-eyedropper.js | 109 + editor/extensions/ext-foreignobject.js | 277 + editor/extensions/ext-grid.js | 184 + editor/extensions/ext-helloworld.js | 78 + editor/extensions/ext-imagelib.js | 444 + editor/extensions/ext-imagelib.xml | 14 + editor/extensions/ext-markers.js | 572 ++ editor/extensions/ext-server_moinsave.js | 56 + editor/extensions/ext-server_opensave.js | 180 + editor/extensions/ext-shapes.js | 387 + editor/extensions/ext-shapes.xml | 10 + editor/extensions/eyedropper-icon.xml | 34 + editor/extensions/eyedropper.png | Bin 0 -> 718 bytes editor/extensions/fileopen.php | 31 + editor/extensions/filesave.php | 44 + editor/extensions/foreignobject-icons.xml | 96 + editor/extensions/grid-icon.xml | 30 + editor/extensions/helloworld-icon.xml | 21 + editor/extensions/imagelib/index.html | 64 + editor/extensions/imagelib/smiley.svg | 12 + editor/extensions/markers-icons.xml | 115 + editor/extensions/shapelib/animal.json | 21 + editor/extensions/shapelib/arrow.json | 28 + .../extensions/shapelib/dialog_balloon.json | 9 + editor/extensions/shapelib/electronics.json | 20 + editor/extensions/shapelib/flowchart.json | 25 + editor/extensions/shapelib/game.json | 13 + editor/extensions/shapelib/math.json | 9 + editor/extensions/shapelib/misc.json | 37 + editor/extensions/shapelib/music.json | 21 + editor/extensions/shapelib/object.json | 19 + editor/extensions/shapelib/raphael.txt | 12 + editor/extensions/shapelib/raphael_1.json | 67 + editor/extensions/shapelib/raphael_2.json | 64 + editor/extensions/shapelib/symbol.json | 28 + editor/history.js | 601 ++ editor/images/README.txt | 61 + editor/images/align-bottom.png | Bin 0 -> 291 bytes editor/images/align-bottom.svg | 277 + editor/images/align-center.png | Bin 0 -> 449 bytes editor/images/align-center.svg | 252 + editor/images/align-left.png | Bin 0 -> 305 bytes editor/images/align-left.svg | 235 + editor/images/align-middle.png | Bin 0 -> 459 bytes editor/images/align-middle.svg | 250 + editor/images/align-right.png | Bin 0 -> 339 bytes editor/images/align-right.svg | 233 + editor/images/align-top.png | Bin 0 -> 287 bytes editor/images/align-top.svg | 233 + editor/images/bold.png | Bin 0 -> 2976 bytes editor/images/cancel.png | Bin 0 -> 1389 bytes editor/images/circle.png | Bin 0 -> 1040 bytes editor/images/clear.png | Bin 0 -> 812 bytes editor/images/clone.png | Bin 0 -> 715 bytes editor/images/conn.svg | 29 + editor/images/copy.png | Bin 0 -> 852 bytes editor/images/cut.png | Bin 0 -> 1294 bytes editor/images/delete.png | Bin 0 -> 663 bytes editor/images/document-properties.png | Bin 0 -> 688 bytes editor/images/dropdown.gif | Bin 0 -> 49 bytes editor/images/ellipse.png | Bin 0 -> 811 bytes editor/images/eye.png | Bin 0 -> 750 bytes editor/images/fhpath.png | Bin 0 -> 1218 bytes editor/images/flyouth.png | Bin 0 -> 109 bytes editor/images/flyup.gif | Bin 0 -> 48 bytes editor/images/freehand-circle.png | Bin 0 -> 1257 bytes editor/images/freehand-square.png | Bin 0 -> 903 bytes editor/images/go-down.png | Bin 0 -> 683 bytes editor/images/go-up.png | Bin 0 -> 652 bytes editor/images/image.png | Bin 0 -> 900 bytes editor/images/italic.png | Bin 0 -> 2972 bytes editor/images/line.png | Bin 0 -> 1026 bytes editor/images/link_controls.png | Bin 0 -> 919 bytes editor/images/logo.png | Bin 0 -> 3983 bytes editor/images/logo.svg | 32 + editor/images/move_bottom.png | Bin 0 -> 737 bytes editor/images/move_top.png | Bin 0 -> 663 bytes editor/images/node_clone.png | Bin 0 -> 571 bytes editor/images/node_delete.png | Bin 0 -> 589 bytes editor/images/none.png | Bin 0 -> 136 bytes editor/images/open.png | Bin 0 -> 919 bytes editor/images/paste.png | Bin 0 -> 906 bytes editor/images/path.png | Bin 0 -> 854 bytes editor/images/polygon.png | Bin 0 -> 881 bytes editor/images/polygon.svg | 219 + editor/images/rect.png | Bin 0 -> 404 bytes editor/images/redo.png | Bin 0 -> 921 bytes editor/images/reorient.png | Bin 0 -> 980 bytes editor/images/rotate.png | Bin 0 -> 1500 bytes editor/images/save.png | Bin 0 -> 1272 bytes editor/images/select.png | Bin 0 -> 712 bytes editor/images/select_node.png | Bin 0 -> 828 bytes editor/images/sep.png | Bin 0 -> 93 bytes editor/images/shape_group.png | Bin 0 -> 553 bytes editor/images/shape_ungroup.png | Bin 0 -> 666 bytes editor/images/source.png | Bin 0 -> 1110 bytes editor/images/spinbtn_updn_big.png | Bin 0 -> 2049 bytes editor/images/square.png | Bin 0 -> 422 bytes editor/images/svg_edit_icons.svg | 1034 ++ editor/images/svg_edit_icons.svgz | Bin 0 -> 5493 bytes editor/images/text.png | Bin 0 -> 1032 bytes editor/images/text.svg | 157 + editor/images/to_path.png | Bin 0 -> 1153 bytes editor/images/undo.png | Bin 0 -> 1122 bytes editor/images/view-refresh.png | Bin 0 -> 912 bytes editor/images/wave.png | Bin 0 -> 2005 bytes editor/images/wireframe.png | Bin 0 -> 466 bytes editor/images/zoom.png | Bin 0 -> 1197 bytes editor/jgraduate/LICENSE | 202 + editor/jgraduate/README | 3 + editor/jgraduate/css/jPicker.css | 1 + editor/jgraduate/css/jgraduate.css | 351 + editor/jgraduate/images/AlphaBar.png | Bin 0 -> 2195 bytes editor/jgraduate/images/Bars.png | Bin 0 -> 382 bytes editor/jgraduate/images/Maps.png | Bin 0 -> 78245 bytes editor/jgraduate/images/NoColor.png | Bin 0 -> 552 bytes editor/jgraduate/images/bar-opacity.png | Bin 0 -> 134 bytes editor/jgraduate/images/map-opacity.png | Bin 0 -> 139 bytes editor/jgraduate/images/mappoint.gif | Bin 0 -> 93 bytes editor/jgraduate/images/mappoint_c.png | Bin 0 -> 252 bytes editor/jgraduate/images/mappoint_f.png | Bin 0 -> 255 bytes editor/jgraduate/images/picker.gif | Bin 0 -> 146 bytes editor/jgraduate/images/preview-opacity.png | Bin 0 -> 135 bytes editor/jgraduate/images/rangearrows.gif | Bin 0 -> 76 bytes editor/jgraduate/images/rangearrows2.gif | Bin 0 -> 93 bytes editor/jgraduate/jpicker.min.js | 1 + editor/jgraduate/jquery.jgraduate.js | 1175 +++ editor/jgraduate/jquery.jgraduate.min.js | 37 + .../jquery-ui/jquery-ui-1.8.17.custom.min.js | 54 + editor/jquery-ui/jquery-ui-1.8.custom.min.js | 84 + editor/jquery.js | 4 + editor/jquerybbq/jquery.bbq.min.js | 18 + editor/js-hotkeys/README.md | 45 + editor/js-hotkeys/jquery.hotkeys.min.js | 15 + editor/locale/README.txt | 17 + editor/locale/lang.af.js | 234 + editor/locale/lang.ar.js | 234 + editor/locale/lang.az.js | 234 + editor/locale/lang.be.js | 234 + editor/locale/lang.bg.js | 234 + editor/locale/lang.ca.js | 234 + editor/locale/lang.cs.js | 234 + editor/locale/lang.cy.js | 234 + editor/locale/lang.da.js | 234 + editor/locale/lang.de.js | 234 + editor/locale/lang.el.js | 234 + editor/locale/lang.en.js | 234 + editor/locale/lang.es.js | 234 + editor/locale/lang.et.js | 234 + editor/locale/lang.fa.js | 234 + editor/locale/lang.fi.js | 234 + editor/locale/lang.fr.js | 234 + editor/locale/lang.fy.js | 234 + editor/locale/lang.ga.js | 234 + editor/locale/lang.gl.js | 234 + editor/locale/lang.he.js | 234 + editor/locale/lang.hi.js | 234 + editor/locale/lang.hr.js | 234 + editor/locale/lang.hu.js | 234 + editor/locale/lang.hy.js | 234 + editor/locale/lang.id.js | 234 + editor/locale/lang.is.js | 234 + editor/locale/lang.it.js | 234 + editor/locale/lang.ja.js | 234 + editor/locale/lang.ko.js | 234 + editor/locale/lang.lt.js | 234 + editor/locale/lang.lv.js | 234 + editor/locale/lang.mk.js | 234 + editor/locale/lang.ms.js | 234 + editor/locale/lang.mt.js | 234 + editor/locale/lang.nl.js | 234 + editor/locale/lang.no.js | 234 + editor/locale/lang.pl.js | 234 + editor/locale/lang.pt-BR.js | 234 + editor/locale/lang.pt-PT.js | 234 + editor/locale/lang.ro.js | 234 + editor/locale/lang.ru.js | 234 + editor/locale/lang.sk.js | 234 + editor/locale/lang.sl.js | 234 + editor/locale/lang.sq.js | 234 + editor/locale/lang.sr.js | 234 + editor/locale/lang.sv.js | 234 + editor/locale/lang.sw.js | 234 + editor/locale/lang.test.js | 234 + editor/locale/lang.th.js | 234 + editor/locale/lang.tl.js | 234 + editor/locale/lang.tr.js | 234 + editor/locale/lang.uk.js | 234 + editor/locale/lang.vi.js | 234 + editor/locale/lang.yi.js | 234 + editor/locale/lang.zh-CN.js | 234 + editor/locale/lang.zh-HK.js | 234 + editor/locale/lang.zh-TW.js | 234 + editor/locale/locale.js | 320 + editor/math.js | 246 + editor/path.js | 980 ++ editor/sanitize.js | 273 + editor/select.js | 529 + editor/spinbtn/JQuerySpinBtn.css | 41 + editor/spinbtn/JQuerySpinBtn.js | 266 + editor/spinbtn/JQuerySpinBtn.min.js | 7 + editor/spinbtn/spinbtn_updn.png | Bin 0 -> 666 bytes editor/svg-editor.css | 1419 +++ editor/svg-editor.html | 790 ++ editor/svg-editor.js | 4881 +++++++++ editor/svg-editor.manifest | 121 + editor/svgcanvas.js | 8771 +++++++++++++++++ editor/svgicons/jquery.svgicons.js | 486 + editor/svgtransformlist.js | 291 + editor/svgutils.js | 648 ++ editor/units.js | 281 + 228 files changed, 47889 insertions(+) create mode 100644 AUTHORS create mode 100644 LICENSE delete mode 100644 README create mode 100644 README.md create mode 100644 editor/browser-not-supported.html create mode 100644 editor/browser.js create mode 100644 editor/canvg/canvg.js create mode 100644 editor/canvg/rgbcolor.js create mode 100644 editor/contextmenu.js create mode 100755 editor/contextmenu/jquery.contextMenu.js create mode 100644 editor/draw.js create mode 100644 editor/embedapi.html create mode 100644 editor/embedapi.js create mode 100644 editor/extensions/closepath_icons.svg create mode 100644 editor/extensions/ext-arrows.js create mode 100644 editor/extensions/ext-closepath.js create mode 100644 editor/extensions/ext-connector.js create mode 100644 editor/extensions/ext-eyedropper.js create mode 100644 editor/extensions/ext-foreignobject.js create mode 100644 editor/extensions/ext-grid.js create mode 100644 editor/extensions/ext-helloworld.js create mode 100644 editor/extensions/ext-imagelib.js create mode 100644 editor/extensions/ext-imagelib.xml create mode 100644 editor/extensions/ext-markers.js create mode 100644 editor/extensions/ext-server_moinsave.js create mode 100644 editor/extensions/ext-server_opensave.js create mode 100644 editor/extensions/ext-shapes.js create mode 100644 editor/extensions/ext-shapes.xml create mode 100644 editor/extensions/eyedropper-icon.xml create mode 100644 editor/extensions/eyedropper.png create mode 100644 editor/extensions/fileopen.php create mode 100644 editor/extensions/filesave.php create mode 100644 editor/extensions/foreignobject-icons.xml create mode 100644 editor/extensions/grid-icon.xml create mode 100644 editor/extensions/helloworld-icon.xml create mode 100644 editor/extensions/imagelib/index.html create mode 100644 editor/extensions/imagelib/smiley.svg create mode 100644 editor/extensions/markers-icons.xml create mode 100644 editor/extensions/shapelib/animal.json create mode 100644 editor/extensions/shapelib/arrow.json create mode 100644 editor/extensions/shapelib/dialog_balloon.json create mode 100644 editor/extensions/shapelib/electronics.json create mode 100644 editor/extensions/shapelib/flowchart.json create mode 100644 editor/extensions/shapelib/game.json create mode 100644 editor/extensions/shapelib/math.json create mode 100644 editor/extensions/shapelib/misc.json create mode 100644 editor/extensions/shapelib/music.json create mode 100644 editor/extensions/shapelib/object.json create mode 100644 editor/extensions/shapelib/raphael.txt create mode 100644 editor/extensions/shapelib/raphael_1.json create mode 100644 editor/extensions/shapelib/raphael_2.json create mode 100644 editor/extensions/shapelib/symbol.json create mode 100644 editor/history.js create mode 100644 editor/images/README.txt create mode 100644 editor/images/align-bottom.png create mode 100644 editor/images/align-bottom.svg create mode 100644 editor/images/align-center.png create mode 100644 editor/images/align-center.svg create mode 100644 editor/images/align-left.png create mode 100644 editor/images/align-left.svg create mode 100644 editor/images/align-middle.png create mode 100644 editor/images/align-middle.svg create mode 100644 editor/images/align-right.png create mode 100644 editor/images/align-right.svg create mode 100644 editor/images/align-top.png create mode 100644 editor/images/align-top.svg create mode 100644 editor/images/bold.png create mode 100644 editor/images/cancel.png create mode 100644 editor/images/circle.png create mode 100644 editor/images/clear.png create mode 100644 editor/images/clone.png create mode 100644 editor/images/conn.svg create mode 100644 editor/images/copy.png create mode 100644 editor/images/cut.png create mode 100644 editor/images/delete.png create mode 100644 editor/images/document-properties.png create mode 100644 editor/images/dropdown.gif create mode 100644 editor/images/ellipse.png create mode 100644 editor/images/eye.png create mode 100644 editor/images/fhpath.png create mode 100644 editor/images/flyouth.png create mode 100644 editor/images/flyup.gif create mode 100644 editor/images/freehand-circle.png create mode 100644 editor/images/freehand-square.png create mode 100644 editor/images/go-down.png create mode 100644 editor/images/go-up.png create mode 100644 editor/images/image.png create mode 100644 editor/images/italic.png create mode 100644 editor/images/line.png create mode 100644 editor/images/link_controls.png create mode 100644 editor/images/logo.png create mode 100644 editor/images/logo.svg create mode 100644 editor/images/move_bottom.png create mode 100644 editor/images/move_top.png create mode 100755 editor/images/node_clone.png create mode 100755 editor/images/node_delete.png create mode 100644 editor/images/none.png create mode 100644 editor/images/open.png create mode 100644 editor/images/paste.png create mode 100644 editor/images/path.png create mode 100644 editor/images/polygon.png create mode 100644 editor/images/polygon.svg create mode 100644 editor/images/rect.png create mode 100644 editor/images/redo.png create mode 100644 editor/images/reorient.png create mode 100644 editor/images/rotate.png create mode 100644 editor/images/save.png create mode 100644 editor/images/select.png create mode 100644 editor/images/select_node.png create mode 100644 editor/images/sep.png create mode 100644 editor/images/shape_group.png create mode 100644 editor/images/shape_ungroup.png create mode 100644 editor/images/source.png create mode 100644 editor/images/spinbtn_updn_big.png create mode 100644 editor/images/square.png create mode 100644 editor/images/svg_edit_icons.svg create mode 100644 editor/images/svg_edit_icons.svgz create mode 100644 editor/images/text.png create mode 100644 editor/images/text.svg create mode 100644 editor/images/to_path.png create mode 100644 editor/images/undo.png create mode 100644 editor/images/view-refresh.png create mode 100644 editor/images/wave.png create mode 100644 editor/images/wireframe.png create mode 100644 editor/images/zoom.png create mode 100644 editor/jgraduate/LICENSE create mode 100644 editor/jgraduate/README create mode 100644 editor/jgraduate/css/jPicker.css create mode 100644 editor/jgraduate/css/jgraduate.css create mode 100644 editor/jgraduate/images/AlphaBar.png create mode 100644 editor/jgraduate/images/Bars.png create mode 100644 editor/jgraduate/images/Maps.png create mode 100644 editor/jgraduate/images/NoColor.png create mode 100644 editor/jgraduate/images/bar-opacity.png create mode 100644 editor/jgraduate/images/map-opacity.png create mode 100644 editor/jgraduate/images/mappoint.gif create mode 100644 editor/jgraduate/images/mappoint_c.png create mode 100644 editor/jgraduate/images/mappoint_f.png create mode 100644 editor/jgraduate/images/picker.gif create mode 100644 editor/jgraduate/images/preview-opacity.png create mode 100644 editor/jgraduate/images/rangearrows.gif create mode 100644 editor/jgraduate/images/rangearrows2.gif create mode 100644 editor/jgraduate/jpicker.min.js create mode 100644 editor/jgraduate/jquery.jgraduate.js create mode 100644 editor/jgraduate/jquery.jgraduate.min.js create mode 100644 editor/jquery-ui/jquery-ui-1.8.17.custom.min.js create mode 100755 editor/jquery-ui/jquery-ui-1.8.custom.min.js create mode 100644 editor/jquery.js create mode 100644 editor/jquerybbq/jquery.bbq.min.js create mode 100644 editor/js-hotkeys/README.md create mode 100644 editor/js-hotkeys/jquery.hotkeys.min.js create mode 100644 editor/locale/README.txt create mode 100644 editor/locale/lang.af.js create mode 100644 editor/locale/lang.ar.js create mode 100644 editor/locale/lang.az.js create mode 100644 editor/locale/lang.be.js create mode 100644 editor/locale/lang.bg.js create mode 100644 editor/locale/lang.ca.js create mode 100644 editor/locale/lang.cs.js create mode 100644 editor/locale/lang.cy.js create mode 100644 editor/locale/lang.da.js create mode 100644 editor/locale/lang.de.js create mode 100644 editor/locale/lang.el.js create mode 100644 editor/locale/lang.en.js create mode 100644 editor/locale/lang.es.js create mode 100644 editor/locale/lang.et.js create mode 100644 editor/locale/lang.fa.js create mode 100644 editor/locale/lang.fi.js create mode 100644 editor/locale/lang.fr.js create mode 100644 editor/locale/lang.fy.js create mode 100644 editor/locale/lang.ga.js create mode 100644 editor/locale/lang.gl.js create mode 100755 editor/locale/lang.he.js create mode 100644 editor/locale/lang.hi.js create mode 100644 editor/locale/lang.hr.js create mode 100644 editor/locale/lang.hu.js create mode 100644 editor/locale/lang.hy.js create mode 100644 editor/locale/lang.id.js create mode 100644 editor/locale/lang.is.js create mode 100644 editor/locale/lang.it.js create mode 100644 editor/locale/lang.ja.js create mode 100644 editor/locale/lang.ko.js create mode 100644 editor/locale/lang.lt.js create mode 100644 editor/locale/lang.lv.js create mode 100644 editor/locale/lang.mk.js create mode 100644 editor/locale/lang.ms.js create mode 100644 editor/locale/lang.mt.js create mode 100644 editor/locale/lang.nl.js create mode 100644 editor/locale/lang.no.js create mode 100644 editor/locale/lang.pl.js create mode 100644 editor/locale/lang.pt-BR.js create mode 100644 editor/locale/lang.pt-PT.js create mode 100644 editor/locale/lang.ro.js create mode 100644 editor/locale/lang.ru.js create mode 100644 editor/locale/lang.sk.js create mode 100644 editor/locale/lang.sl.js create mode 100644 editor/locale/lang.sq.js create mode 100644 editor/locale/lang.sr.js create mode 100644 editor/locale/lang.sv.js create mode 100644 editor/locale/lang.sw.js create mode 100644 editor/locale/lang.test.js create mode 100644 editor/locale/lang.th.js create mode 100644 editor/locale/lang.tl.js create mode 100644 editor/locale/lang.tr.js create mode 100644 editor/locale/lang.uk.js create mode 100644 editor/locale/lang.vi.js create mode 100644 editor/locale/lang.yi.js create mode 100644 editor/locale/lang.zh-CN.js create mode 100644 editor/locale/lang.zh-HK.js create mode 100644 editor/locale/lang.zh-TW.js create mode 100644 editor/locale/locale.js create mode 100644 editor/math.js create mode 100644 editor/path.js create mode 100644 editor/sanitize.js create mode 100644 editor/select.js create mode 100644 editor/spinbtn/JQuerySpinBtn.css create mode 100644 editor/spinbtn/JQuerySpinBtn.js create mode 100644 editor/spinbtn/JQuerySpinBtn.min.js create mode 100644 editor/spinbtn/spinbtn_updn.png create mode 100644 editor/svg-editor.css create mode 100644 editor/svg-editor.html create mode 100644 editor/svg-editor.js create mode 100644 editor/svg-editor.manifest create mode 100644 editor/svgcanvas.js create mode 100644 editor/svgicons/jquery.svgicons.js create mode 100644 editor/svgtransformlist.js create mode 100644 editor/svgutils.js create mode 100644 editor/units.js diff --git a/AUTHORS b/AUTHORS new file mode 100644 index 0000000..9dbb3a4 --- /dev/null +++ b/AUTHORS @@ -0,0 +1,28 @@ +Awwation: + +Aditya Bhatt + +SVG-edit: + +Narendra Sisodiya +Pavol Rusnak +Jeff Schiller +Vidar Hokstad +Alexis Deveria + +Translation credits: + +ar: Tarik Belaam (العربية) +cs: Jan Ptacek (Čeština) +de: Reimar Bauer (Deutsch) +es: Alicia Puerto (Español) +fa: Payman Delshad (فارسی) +fr: wormsxulla (Français) +fy: Wander Nauta (Frysk) +hi: Tavish Naruka (हिन्दी) +ja: Dong (日本語) +nl: Jaap Blom (Nederlands) +ro: Christian Tzurcanu (Româneşte) +ru: Laurent Dufloux (Русский) +sk: Pavol Rusnak (Slovenčina) +zh-TW: 黃瀚生 (Han Sheng Huang) (台灣正體) diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..b98ac70 --- /dev/null +++ b/LICENSE @@ -0,0 +1,19 @@ +Copyright (c) 2009-2011 by SVG-edit authors (see AUTHORS file) + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/README b/README deleted file mode 100644 index e69de29..0000000 diff --git a/README.md b/README.md new file mode 100644 index 0000000..46a8699 --- /dev/null +++ b/README.md @@ -0,0 +1,12 @@ +# Awwation + +This is an HTML5 Prezi clone app using SVG and Javascript. +It is made using **SVG-edit**, an awesome client-side SVG editor. +It uses **Sozi** for animating the presentation. + + +This is a **Hack** right now, and was written mostly as an experiment to determine how easy it would be to build something like Prezi using modern browser tech. The code is buggy and will hopefully become better over time. I welcome people to contribute changes once I set the code in order. + +The 'results' of the experiment are detailed in my blog post here: http://adityabhatt.wordpress.com/2012/04/06/writing-a-prezi-clone-with-html5-svg-and-javascript/ + +**This is the Master branch of Awwwation. I am rewriting the code from scratch, nicely in this branch, till it gets to the state of progress in the online gh-pages branch. Then this one will be put online.** diff --git a/editor/browser-not-supported.html b/editor/browser-not-supported.html new file mode 100644 index 0000000..3010fcf --- /dev/null +++ b/editor/browser-not-supported.html @@ -0,0 +1,27 @@ + + + + + + + + +Browser does not support SVG | SVG-edit + + + +
+SVG-edit logo
+

Sorry, but your browser does not support SVG. Below is a list of alternate browsers and versions that support SVG and SVG-edit (from caniuse.com).

+

Try the latest version of Firefox, Google Chrome, Safari, Opera or Internet Explorer.

+

If you are unable to install one of these and must use an old version of Internet Explorer, you can install the Google Chrome Frame plugin.

+ + + +
+ + + diff --git a/editor/browser.js b/editor/browser.js new file mode 100644 index 0000000..ff9441a --- /dev/null +++ b/editor/browser.js @@ -0,0 +1,178 @@ +/** + * Package: svgedit.browser + * + * Licensed under the Apache License, Version 2 + * + * Copyright(c) 2010 Jeff Schiller + * Copyright(c) 2010 Alexis Deveria + */ + +// Dependencies: +// 1) jQuery (for $.alert()) + +var svgedit = svgedit || {}; + +(function() { + +if (!svgedit.browser) { + svgedit.browser = {}; +} +var supportsSvg_ = (function() { + return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect; +})(); +svgedit.browser.supportsSvg = function() { return supportsSvg_; } +if(!svgedit.browser.supportsSvg()) { + window.location = "browser-not-supported.html"; +} +else{ + +var svgns = 'http://www.w3.org/2000/svg'; +var userAgent = navigator.userAgent; +var svg = document.createElementNS(svgns, 'svg'); + +// Note: Browser sniffing should only be used if no other detection method is possible +var isOpera_ = !!window.opera; +var isWebkit_ = userAgent.indexOf("AppleWebKit") >= 0; +var isGecko_ = userAgent.indexOf('Gecko/') >= 0; +var isIE_ = userAgent.indexOf('MSIE') >= 0; +var isChrome_ = userAgent.indexOf('Chrome/') >= 0; +var isWindows_ = userAgent.indexOf('Windows') >= 0; +var isMac_ = userAgent.indexOf('Macintosh') >= 0; + +var supportsSelectors_ = (function() { + return !!svg.querySelector; +})(); + +var supportsXpath_ = (function() { + return !!document.evaluate; +})(); + +// segList functions (for FF1.5 and 2.0) +var supportsPathReplaceItem_ = (function() { + var path = document.createElementNS(svgns, 'path'); + path.setAttribute('d','M0,0 10,10'); + var seglist = path.pathSegList; + var seg = path.createSVGPathSegLinetoAbs(5,5); + try { + seglist.replaceItem(seg, 0); + return true; + } catch(err) {} + return false; +})(); + +var supportsPathInsertItemBefore_ = (function() { + var path = document.createElementNS(svgns,'path'); + path.setAttribute('d','M0,0 10,10'); + var seglist = path.pathSegList; + var seg = path.createSVGPathSegLinetoAbs(5,5); + try { + seglist.insertItemBefore(seg, 0); + return true; + } catch(err) {} + return false; +})(); + +// text character positioning (for IE9) +var supportsGoodTextCharPos_ = (function() { + var retValue = false; + var svgroot = document.createElementNS(svgns, 'svg'); + var svgcontent = document.createElementNS(svgns, 'svg'); + document.documentElement.appendChild(svgroot); + svgcontent.setAttribute('x', 5); + svgroot.appendChild(svgcontent); + var text = document.createElementNS(svgns,'text'); + text.textContent = 'a'; + svgcontent.appendChild(text); + var pos = text.getStartPositionOfChar(0).x; + document.documentElement.removeChild(svgroot); + return (pos === 0); +})(); + +var supportsPathBBox_ = (function() { + var svgcontent = document.createElementNS(svgns, 'svg'); + document.documentElement.appendChild(svgcontent); + var path = document.createElementNS(svgns, 'path'); + path.setAttribute('d','M0,0 C0,0 10,10 10,0'); + svgcontent.appendChild(path); + var bbox = path.getBBox(); + document.documentElement.removeChild(svgcontent); + return (bbox.height > 4 && bbox.height < 5); +})(); + +// Support for correct bbox sizing on groups with horizontal/vertical lines +var supportsHVLineContainerBBox_ = (function() { + var svgcontent = document.createElementNS(svgns, 'svg'); + document.documentElement.appendChild(svgcontent); + var path = document.createElementNS(svgns, 'path'); + path.setAttribute('d','M0,0 10,0'); + var path2 = document.createElementNS(svgns, 'path'); + path2.setAttribute('d','M5,0 15,0'); + var g = document.createElementNS(svgns, 'g'); + g.appendChild(path); + g.appendChild(path2); + svgcontent.appendChild(g); + var bbox = g.getBBox(); + document.documentElement.removeChild(svgcontent); + // Webkit gives 0, FF gives 10, Opera (correctly) gives 15 + return (bbox.width == 15); +})(); + +var supportsEditableText_ = (function() { + // TODO: Find better way to check support for this + return isOpera_; +})(); + +var supportsGoodDecimals_ = (function() { + // Correct decimals on clone attributes (Opera < 10.5/win/non-en) + var rect = document.createElementNS(svgns, 'rect'); + rect.setAttribute('x',.1); + var crect = rect.cloneNode(false); + var retValue = (crect.getAttribute('x').indexOf(',') == -1); + if(!retValue) { + $.alert("NOTE: This version of Opera is known to contain bugs in SVG-edit.\n\ + Please upgrade to the latest version in which the problems have been fixed."); + } + return retValue; +})(); + +var supportsNonScalingStroke_ = (function() { + var rect = document.createElementNS(svgns, 'rect'); + rect.setAttribute('style','vector-effect:non-scaling-stroke'); + return rect.style.vectorEffect === 'non-scaling-stroke'; +})(); + +var supportsNativeSVGTransformLists_ = (function() { + var rect = document.createElementNS(svgns, 'rect'); + var rxform = rect.transform.baseVal; + + var t1 = svg.createSVGTransform(); + rxform.appendItem(t1); + return rxform.getItem(0) == t1; +})(); + +// Public API + +svgedit.browser.isOpera = function() { return isOpera_; } +svgedit.browser.isWebkit = function() { return isWebkit_; } +svgedit.browser.isGecko = function() { return isGecko_; } +svgedit.browser.isIE = function() { return isIE_; } +svgedit.browser.isChrome = function() { return isChrome_; } +svgedit.browser.isWindows = function() { return isWindows_; } +svgedit.browser.isMac = function() { return isMac_; } + +svgedit.browser.supportsSelectors = function() { return supportsSelectors_; } +svgedit.browser.supportsXpath = function() { return supportsXpath_; } + +svgedit.browser.supportsPathReplaceItem = function() { return supportsPathReplaceItem_; } +svgedit.browser.supportsPathInsertItemBefore = function() { return supportsPathInsertItemBefore_; } +svgedit.browser.supportsPathBBox = function() { return supportsPathBBox_; } +svgedit.browser.supportsHVLineContainerBBox = function() { return supportsHVLineContainerBBox_; } +svgedit.browser.supportsGoodTextCharPos = function() { return supportsGoodTextCharPos_; } +svgedit.browser.supportsEditableText = function() { return supportsEditableText_; } +svgedit.browser.supportsGoodDecimals = function() { return supportsGoodDecimals_; } +svgedit.browser.supportsNonScalingStroke = function() { return supportsNonScalingStroke_; } +svgedit.browser.supportsNativeTransformLists = function() { return supportsNativeSVGTransformLists_; } + +} + +})(); diff --git a/editor/canvg/canvg.js b/editor/canvg/canvg.js new file mode 100644 index 0000000..7b24a38 --- /dev/null +++ b/editor/canvg/canvg.js @@ -0,0 +1,2620 @@ +/* + * canvg.js - Javascript SVG parser and renderer on Canvas + * MIT Licensed + * Gabe Lerner (gabelerner@gmail.com) + * http://code.google.com/p/canvg/ + * + * Requires: rgbcolor.js - http://www.phpied.com/rgb-color-parser-in-javascript/ + */ +if(!window.console) { + window.console = {}; + window.console.log = function(str) {}; + window.console.dir = function(str) {}; +} + +if(!Array.prototype.indexOf){ + Array.prototype.indexOf = function(obj){ + for(var i=0; i ignore mouse events + // ignoreAnimation: true => ignore animations + // ignoreDimensions: true => does not try to resize canvas + // ignoreClear: true => does not clear canvas + // offsetX: int => draws at a x offset + // offsetY: int => draws at a y offset + // scaleWidth: int => scales horizontally to width + // scaleHeight: int => scales vertically to height + // renderCallback: function => will call the function after the first render is completed + // forceRedraw: function => will call the function on every frame, if it returns true, will redraw + this.canvg = function (target, s, opts) { + // no parameters + if (target == null && s == null && opts == null) { + var svgTags = document.getElementsByTagName('svg'); + for (var i=0; i]*>/, ''); + var xmlDoc = new ActiveXObject('Microsoft.XMLDOM'); + xmlDoc.async = 'false'; + xmlDoc.loadXML(xml); + return xmlDoc; + } + } + + svg.Property = function(name, value) { + this.name = name; + this.value = value; + + this.hasValue = function() { + return (this.value != null && this.value !== ''); + } + + // return the numerical value of the property + this.numValue = function() { + if (!this.hasValue()) return 0; + + var n = parseFloat(this.value); + if ((this.value + '').match(/%$/)) { + n = n / 100.0; + } + return n; + } + + this.valueOrDefault = function(def) { + if (this.hasValue()) return this.value; + return def; + } + + this.numValueOrDefault = function(def) { + if (this.hasValue()) return this.numValue(); + return def; + } + + /* EXTENSIONS */ + var that = this; + + // color extensions + this.Color = { + // augment the current color value with the opacity + addOpacity: function(opacity) { + var newValue = that.value; + if (opacity != null && opacity != '') { + var color = new RGBColor(that.value); + if (color.ok) { + newValue = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + opacity + ')'; + } + } + return new svg.Property(that.name, newValue); + } + } + + // definition extensions + this.Definition = { + // get the definition from the definitions table + getDefinition: function() { + var name = that.value.replace(/^(url\()?#([^\)]+)\)?$/, '$2'); + return svg.Definitions[name]; + }, + + isUrl: function() { + return that.value.indexOf('url(') == 0 + }, + + getFillStyle: function(e) { + var def = this.getDefinition(); + + // gradient + if (def != null && def.createGradient) { + return def.createGradient(svg.ctx, e); + } + + // pattern + if (def != null && def.createPattern) { + return def.createPattern(svg.ctx, e); + } + + return null; + } + } + + // length extensions + this.Length = { + DPI: function(viewPort) { + return 96.0; // TODO: compute? + }, + + EM: function(viewPort) { + var em = 12; + + var fontSize = new svg.Property('fontSize', svg.Font.Parse(svg.ctx.font).fontSize); + if (fontSize.hasValue()) em = fontSize.Length.toPixels(viewPort); + + return em; + }, + + // get the length as pixels + toPixels: function(viewPort) { + if (!that.hasValue()) return 0; + var s = that.value+''; + if (s.match(/em$/)) return that.numValue() * this.EM(viewPort); + if (s.match(/ex$/)) return that.numValue() * this.EM(viewPort) / 2.0; + if (s.match(/px$/)) return that.numValue(); + if (s.match(/pt$/)) return that.numValue() * 1.25; + if (s.match(/pc$/)) return that.numValue() * 15; + if (s.match(/cm$/)) return that.numValue() * this.DPI(viewPort) / 2.54; + if (s.match(/mm$/)) return that.numValue() * this.DPI(viewPort) / 25.4; + if (s.match(/in$/)) return that.numValue() * this.DPI(viewPort); + if (s.match(/%$/)) return that.numValue() * svg.ViewPort.ComputeSize(viewPort); + return that.numValue(); + } + } + + // time extensions + this.Time = { + // get the time as milliseconds + toMilliseconds: function() { + if (!that.hasValue()) return 0; + var s = that.value+''; + if (s.match(/s$/)) return that.numValue() * 1000; + if (s.match(/ms$/)) return that.numValue(); + return that.numValue(); + } + } + + // angle extensions + this.Angle = { + // get the angle as radians + toRadians: function() { + if (!that.hasValue()) return 0; + var s = that.value+''; + if (s.match(/deg$/)) return that.numValue() * (Math.PI / 180.0); + if (s.match(/grad$/)) return that.numValue() * (Math.PI / 200.0); + if (s.match(/rad$/)) return that.numValue(); + return that.numValue() * (Math.PI / 180.0); + } + } + } + + // fonts + svg.Font = new (function() { + this.Styles = ['normal','italic','oblique','inherit']; + this.Variants = ['normal','small-caps','inherit']; + this.Weights = ['normal','bold','bolder','lighter','100','200','300','400','500','600','700','800','900','inherit']; + + this.CreateFont = function(fontStyle, fontVariant, fontWeight, fontSize, fontFamily, inherit) { + var f = inherit != null ? this.Parse(inherit) : this.CreateFont('', '', '', '', '', svg.ctx.font); + return { + fontFamily: fontFamily || f.fontFamily, + fontSize: fontSize || f.fontSize, + fontStyle: fontStyle || f.fontStyle, + fontWeight: fontWeight || f.fontWeight, + fontVariant: fontVariant || f.fontVariant, + toString: function () { return [this.fontStyle, this.fontVariant, this.fontWeight, this.fontSize, this.fontFamily].join(' ') } + } + } + + var that = this; + this.Parse = function(s) { + var f = {}; + var d = svg.trim(svg.compressSpaces(s || '')).split(' '); + var set = { fontSize: false, fontStyle: false, fontWeight: false, fontVariant: false } + var ff = ''; + for (var i=0; i this.x2) this.x2 = x; + } + + if (y != null) { + if (isNaN(this.y1) || isNaN(this.y2)) { + this.y1 = y; + this.y2 = y; + } + if (y < this.y1) this.y1 = y; + if (y > this.y2) this.y2 = y; + } + } + this.addX = function(x) { this.addPoint(x, null); } + this.addY = function(y) { this.addPoint(null, y); } + + this.addBoundingBox = function(bb) { + this.addPoint(bb.x1, bb.y1); + this.addPoint(bb.x2, bb.y2); + } + + this.addQuadraticCurve = function(p0x, p0y, p1x, p1y, p2x, p2y) { + var cp1x = p0x + 2/3 * (p1x - p0x); // CP1 = QP0 + 2/3 *(QP1-QP0) + var cp1y = p0y + 2/3 * (p1y - p0y); // CP1 = QP0 + 2/3 *(QP1-QP0) + var cp2x = cp1x + 1/3 * (p2x - p0x); // CP2 = CP1 + 1/3 *(QP2-QP0) + var cp2y = cp1y + 1/3 * (p2y - p0y); // CP2 = CP1 + 1/3 *(QP2-QP0) + this.addBezierCurve(p0x, p0y, cp1x, cp2x, cp1y, cp2y, p2x, p2y); + } + + this.addBezierCurve = function(p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) { + // from http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html + var p0 = [p0x, p0y], p1 = [p1x, p1y], p2 = [p2x, p2y], p3 = [p3x, p3y]; + this.addPoint(p0[0], p0[1]); + this.addPoint(p3[0], p3[1]); + + for (i=0; i<=1; i++) { + var f = function(t) { + return Math.pow(1-t, 3) * p0[i] + + 3 * Math.pow(1-t, 2) * t * p1[i] + + 3 * (1-t) * Math.pow(t, 2) * p2[i] + + Math.pow(t, 3) * p3[i]; + } + + var b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i]; + var a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i]; + var c = 3 * p1[i] - 3 * p0[i]; + + if (a == 0) { + if (b == 0) continue; + var t = -c / b; + if (0 < t && t < 1) { + if (i == 0) this.addX(f(t)); + if (i == 1) this.addY(f(t)); + } + continue; + } + + var b2ac = Math.pow(b, 2) - 4 * c * a; + if (b2ac < 0) continue; + var t1 = (-b + Math.sqrt(b2ac)) / (2 * a); + if (0 < t1 && t1 < 1) { + if (i == 0) this.addX(f(t1)); + if (i == 1) this.addY(f(t1)); + } + var t2 = (-b - Math.sqrt(b2ac)) / (2 * a); + if (0 < t2 && t2 < 1) { + if (i == 0) this.addX(f(t2)); + if (i == 1) this.addY(f(t2)); + } + } + } + + this.isPointInBox = function(x, y) { + return (this.x1 <= x && x <= this.x2 && this.y1 <= y && y <= this.y2); + } + + this.addPoint(x1, y1); + this.addPoint(x2, y2); + } + + // transforms + svg.Transform = function(v) { + var that = this; + this.Type = {} + + // translate + this.Type.translate = function(s) { + this.p = svg.CreatePoint(s); + this.apply = function(ctx) { + ctx.translate(this.p.x || 0.0, this.p.y || 0.0); + } + this.applyToPoint = function(p) { + p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]); + } + } + + // rotate + this.Type.rotate = function(s) { + var a = svg.ToNumberArray(s); + this.angle = new svg.Property('angle', a[0]); + this.cx = a[1] || 0; + this.cy = a[2] || 0; + this.apply = function(ctx) { + ctx.translate(this.cx, this.cy); + ctx.rotate(this.angle.Angle.toRadians()); + ctx.translate(-this.cx, -this.cy); + } + this.applyToPoint = function(p) { + var a = this.angle.Angle.toRadians(); + p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]); + p.applyTransform([Math.cos(a), Math.sin(a), -Math.sin(a), Math.cos(a), 0, 0]); + p.applyTransform([1, 0, 0, 1, -this.p.x || 0.0, -this.p.y || 0.0]); + } + } + + this.Type.scale = function(s) { + this.p = svg.CreatePoint(s); + this.apply = function(ctx) { + ctx.scale(this.p.x || 1.0, this.p.y || this.p.x || 1.0); + } + this.applyToPoint = function(p) { + p.applyTransform([this.p.x || 0.0, 0, 0, this.p.y || 0.0, 0, 0]); + } + } + + this.Type.matrix = function(s) { + this.m = svg.ToNumberArray(s); + this.apply = function(ctx) { + ctx.transform(this.m[0], this.m[1], this.m[2], this.m[3], this.m[4], this.m[5]); + } + this.applyToPoint = function(p) { + p.applyTransform(this.m); + } + } + + this.Type.SkewBase = function(s) { + this.base = that.Type.matrix; + this.base(s); + this.angle = new svg.Property('angle', s); + } + this.Type.SkewBase.prototype = new this.Type.matrix; + + this.Type.skewX = function(s) { + this.base = that.Type.SkewBase; + this.base(s); + this.m = [1, 0, Math.tan(this.angle.Angle.toRadians()), 1, 0, 0]; + } + this.Type.skewX.prototype = new this.Type.SkewBase; + + this.Type.skewY = function(s) { + this.base = that.Type.SkewBase; + this.base(s); + this.m = [1, Math.tan(this.angle.Angle.toRadians()), 0, 1, 0, 0]; + } + this.Type.skewY.prototype = new this.Type.SkewBase; + + this.transforms = []; + + this.apply = function(ctx) { + for (var i=0; i= this.tokens.length - 1; + } + + this.isCommandOrEnd = function() { + if (this.isEnd()) return true; + return this.tokens[this.i + 1].match(/^[A-Za-z]$/) != null; + } + + this.isRelativeCommand = function() { + return this.command == this.command.toLowerCase(); + } + + this.getToken = function() { + this.i = this.i + 1; + return this.tokens[this.i]; + } + + this.getScalar = function() { + return parseFloat(this.getToken()); + } + + this.nextCommand = function() { + this.previousCommand = this.command; + this.command = this.getToken(); + } + + this.getPoint = function() { + var p = new svg.Point(this.getScalar(), this.getScalar()); + return this.makeAbsolute(p); + } + + this.getAsControlPoint = function() { + var p = this.getPoint(); + this.control = p; + return p; + } + + this.getAsCurrentPoint = function() { + var p = this.getPoint(); + this.current = p; + return p; + } + + this.getReflectedControlPoint = function() { + if (this.previousCommand.toLowerCase() != 'c' && this.previousCommand.toLowerCase() != 's') { + return this.current; + } + + // reflect point + var p = new svg.Point(2 * this.current.x - this.control.x, 2 * this.current.y - this.control.y); + return p; + } + + this.makeAbsolute = function(p) { + if (this.isRelativeCommand()) { + p.x = this.current.x + p.x; + p.y = this.current.y + p.y; + } + return p; + } + + this.addMarker = function(p, from, priorTo) { + // if the last angle isn't filled in because we didn't have this point yet ... + if (priorTo != null && this.angles.length > 0 && this.angles[this.angles.length-1] == null) { + this.angles[this.angles.length-1] = this.points[this.points.length-1].angleTo(priorTo); + } + this.addMarkerAngle(p, from == null ? null : from.angleTo(p)); + } + + this.addMarkerAngle = function(p, a) { + this.points.push(p); + this.angles.push(a); + } + + this.getMarkerPoints = function() { return this.points; } + this.getMarkerAngles = function() { + for (var i=0; i 1) { + rx *= Math.sqrt(l); + ry *= Math.sqrt(l); + } + // cx', cy' + var s = (largeArcFlag == sweepFlag ? -1 : 1) * Math.sqrt( + ((Math.pow(rx,2)*Math.pow(ry,2))-(Math.pow(rx,2)*Math.pow(currp.y,2))-(Math.pow(ry,2)*Math.pow(currp.x,2))) / + (Math.pow(rx,2)*Math.pow(currp.y,2)+Math.pow(ry,2)*Math.pow(currp.x,2)) + ); + if (isNaN(s)) s = 0; + var cpp = new svg.Point(s * rx * currp.y / ry, s * -ry * currp.x / rx); + // cx, cy + var centp = new svg.Point( + (curr.x + cp.x) / 2.0 + Math.cos(xAxisRotation) * cpp.x - Math.sin(xAxisRotation) * cpp.y, + (curr.y + cp.y) / 2.0 + Math.sin(xAxisRotation) * cpp.x + Math.cos(xAxisRotation) * cpp.y + ); + // vector magnitude + var m = function(v) { return Math.sqrt(Math.pow(v[0],2) + Math.pow(v[1],2)); } + // ratio between two vectors + var r = function(u, v) { return (u[0]*v[0]+u[1]*v[1]) / (m(u)*m(v)) } + // angle between two vectors + var a = function(u, v) { return (u[0]*v[1] < u[1]*v[0] ? -1 : 1) * Math.acos(r(u,v)); } + // initial angle + var a1 = a([1,0], [(currp.x-cpp.x)/rx,(currp.y-cpp.y)/ry]); + // angle delta + var u = [(currp.x-cpp.x)/rx,(currp.y-cpp.y)/ry]; + var v = [(-currp.x-cpp.x)/rx,(-currp.y-cpp.y)/ry]; + var ad = a(u, v); + if (r(u,v) <= -1) ad = Math.PI; + if (r(u,v) >= 1) ad = 0; + + if (sweepFlag == 0 && ad > 0) ad = ad - 2 * Math.PI; + if (sweepFlag == 1 && ad < 0) ad = ad + 2 * Math.PI; + + // for markers + var halfWay = new svg.Point( + centp.x - rx * Math.cos((a1 + ad) / 2), + centp.y - ry * Math.sin((a1 + ad) / 2) + ); + pp.addMarkerAngle(halfWay, (a1 + ad) / 2 + (sweepFlag == 0 ? 1 : -1) * Math.PI / 2); + pp.addMarkerAngle(cp, ad + (sweepFlag == 0 ? 1 : -1) * Math.PI / 2); + + bb.addPoint(cp.x, cp.y); // TODO: this is too naive, make it better + if (ctx != null) { + var r = rx > ry ? rx : ry; + var sx = rx > ry ? 1 : rx / ry; + var sy = rx > ry ? ry / rx : 1; + + ctx.translate(centp.x, centp.y); + ctx.rotate(xAxisRotation); + ctx.scale(sx, sy); + ctx.arc(0, 0, r, a1, a1 + ad, 1 - sweepFlag); + ctx.scale(1/sx, 1/sy); + ctx.rotate(-xAxisRotation); + ctx.translate(-centp.x, -centp.y); + } + } + break; + case 'Z': + if (ctx != null) ctx.closePath(); + pp.current = pp.start; + } + } + + return bb; + } + + this.getMarkers = function() { + var points = this.PathParser.getMarkerPoints(); + var angles = this.PathParser.getMarkerAngles(); + + var markers = []; + for (var i=0; i this.maxDuration) { + // loop for indefinitely repeating animations + if (this.attribute('repeatCount').value == 'indefinite') { + this.duration = 0.0 + } + else if (this.attribute('fill').valueOrDefault('remove') == 'remove' && !this.removed) { + this.removed = true; + this.getProperty().value = this.initialValue; + return true; + } + else { + return false; // no updates made + } + } + this.duration = this.duration + delta; + + // if we're past the begin time + var updated = false; + if (this.begin < this.duration) { + var newValue = this.calcValue(); // tween + + if (this.attribute('type').hasValue()) { + // for transform, etc. + var type = this.attribute('type').value; + newValue = type + '(' + newValue + ')'; + } + + this.getProperty().value = newValue; + updated = true; + } + + return updated; + } + + // fraction of duration we've covered + this.progress = function() { + return ((this.duration - this.begin) / (this.maxDuration - this.begin)); + } + } + svg.Element.AnimateBase.prototype = new svg.Element.ElementBase; + + // animate element + svg.Element.animate = function(node) { + this.base = svg.Element.AnimateBase; + this.base(node); + + this.calcValue = function() { + var from = this.attribute('from').numValue(); + var to = this.attribute('to').numValue(); + + // tween value linearly + return from + (to - from) * this.progress(); + }; + } + svg.Element.animate.prototype = new svg.Element.AnimateBase; + + // animate color element + svg.Element.animateColor = function(node) { + this.base = svg.Element.AnimateBase; + this.base(node); + + this.calcValue = function() { + var from = new RGBColor(this.attribute('from').value); + var to = new RGBColor(this.attribute('to').value); + + if (from.ok && to.ok) { + // tween color linearly + var r = from.r + (to.r - from.r) * this.progress(); + var g = from.g + (to.g - from.g) * this.progress(); + var b = from.b + (to.b - from.b) * this.progress(); + return 'rgb('+parseInt(r,10)+','+parseInt(g,10)+','+parseInt(b,10)+')'; + } + return this.attribute('from').value; + }; + } + svg.Element.animateColor.prototype = new svg.Element.AnimateBase; + + // animate transform element + svg.Element.animateTransform = function(node) { + this.base = svg.Element.animate; + this.base(node); + } + svg.Element.animateTransform.prototype = new svg.Element.animate; + + // font element + svg.Element.font = function(node) { + this.base = svg.Element.ElementBase; + this.base(node); + + this.horizAdvX = this.attribute('horiz-adv-x').numValue(); + + this.isRTL = false; + this.isArabic = false; + this.fontFace = null; + this.missingGlyph = null; + this.glyphs = []; + for (var i=0; i0 && text[i-1]!=' ' && i0 && text[i-1]!=' ' && (i == text.length-1 || text[i+1]==' ')) arabicForm = 'initial'; + if (typeof(font.glyphs[c]) != 'undefined') { + glyph = font.glyphs[c][arabicForm]; + if (glyph == null && font.glyphs[c].type == 'glyph') glyph = font.glyphs[c]; + } + } + else { + glyph = font.glyphs[c]; + } + if (glyph == null) glyph = font.missingGlyph; + return glyph; + } + + this.renderChildren = function(ctx) { + var customFont = this.parent.style('font-family').Definition.getDefinition(); + if (customFont != null) { + var fontSize = this.parent.style('font-size').numValueOrDefault(svg.Font.Parse(svg.ctx.font).fontSize); + var fontStyle = this.parent.style('font-style').valueOrDefault(svg.Font.Parse(svg.ctx.font).fontStyle); + var text = this.getText(); + if (customFont.isRTL) text = text.split("").reverse().join(""); + + var dx = svg.ToNumberArray(this.parent.attribute('dx').value); + for (var i=0; i 0 ? node.childNodes[0].nodeValue : // element + node.text; + this.getText = function() { + return this.text; + } + } + svg.Element.tspan.prototype = new svg.Element.TextElementBase; + + // tref + svg.Element.tref = function(node) { + this.base = svg.Element.TextElementBase; + this.base(node); + + this.getText = function() { + var element = this.attribute('xlink:href').Definition.getDefinition(); + if (element != null) return element.children[0].getText(); + } + } + svg.Element.tref.prototype = new svg.Element.TextElementBase; + + // a element + svg.Element.a = function(node) { + this.base = svg.Element.TextElementBase; + this.base(node); + + this.hasText = true; + for (var i=0; i 1 ? node.childNodes[1].nodeValue : ''); + css = css.replace(/(\/\*([^*]|[\r\n]|(\*+([^*\/]|[\r\n])))*\*+\/)|(^[\s]*\/\/.*)/gm, ''); // remove comments + css = svg.compressSpaces(css); // replace whitespace + var cssDefs = css.split('}'); + for (var i=0; i 0) { + var urlStart = srcs[s].indexOf('url'); + var urlEnd = srcs[s].indexOf(')', urlStart); + var url = srcs[s].substr(urlStart + 5, urlEnd - urlStart - 6); + var doc = svg.parseXml(svg.ajax(url)); + var fonts = doc.getElementsByTagName('font'); + for (var f=0; f + * @link http://www.phpied.com/rgb-color-parser-in-javascript/ + * @license Use it if you like it + */ +function RGBColor(color_string) +{ + this.ok = false; + + // strip any leading # + if (color_string.charAt(0) == '#') { // remove # if any + color_string = color_string.substr(1,6); + } + + color_string = color_string.replace(/ /g,''); + color_string = color_string.toLowerCase(); + + // before getting into regexps, try simple matches + // and overwrite the input + var simple_colors = { + aliceblue: 'f0f8ff', + antiquewhite: 'faebd7', + aqua: '00ffff', + aquamarine: '7fffd4', + azure: 'f0ffff', + beige: 'f5f5dc', + bisque: 'ffe4c4', + black: '000000', + blanchedalmond: 'ffebcd', + blue: '0000ff', + blueviolet: '8a2be2', + brown: 'a52a2a', + burlywood: 'deb887', + cadetblue: '5f9ea0', + chartreuse: '7fff00', + chocolate: 'd2691e', + coral: 'ff7f50', + cornflowerblue: '6495ed', + cornsilk: 'fff8dc', + crimson: 'dc143c', + cyan: '00ffff', + darkblue: '00008b', + darkcyan: '008b8b', + darkgoldenrod: 'b8860b', + darkgray: 'a9a9a9', + darkgreen: '006400', + darkkhaki: 'bdb76b', + darkmagenta: '8b008b', + darkolivegreen: '556b2f', + darkorange: 'ff8c00', + darkorchid: '9932cc', + darkred: '8b0000', + darksalmon: 'e9967a', + darkseagreen: '8fbc8f', + darkslateblue: '483d8b', + darkslategray: '2f4f4f', + darkturquoise: '00ced1', + darkviolet: '9400d3', + deeppink: 'ff1493', + deepskyblue: '00bfff', + dimgray: '696969', + dodgerblue: '1e90ff', + feldspar: 'd19275', + firebrick: 'b22222', + floralwhite: 'fffaf0', + forestgreen: '228b22', + fuchsia: 'ff00ff', + gainsboro: 'dcdcdc', + ghostwhite: 'f8f8ff', + gold: 'ffd700', + goldenrod: 'daa520', + gray: '808080', + green: '008000', + greenyellow: 'adff2f', + honeydew: 'f0fff0', + hotpink: 'ff69b4', + indianred : 'cd5c5c', + indigo : '4b0082', + ivory: 'fffff0', + khaki: 'f0e68c', + lavender: 'e6e6fa', + lavenderblush: 'fff0f5', + lawngreen: '7cfc00', + lemonchiffon: 'fffacd', + lightblue: 'add8e6', + lightcoral: 'f08080', + lightcyan: 'e0ffff', + lightgoldenrodyellow: 'fafad2', + lightgrey: 'd3d3d3', + lightgreen: '90ee90', + lightpink: 'ffb6c1', + lightsalmon: 'ffa07a', + lightseagreen: '20b2aa', + lightskyblue: '87cefa', + lightslateblue: '8470ff', + lightslategray: '778899', + lightsteelblue: 'b0c4de', + lightyellow: 'ffffe0', + lime: '00ff00', + limegreen: '32cd32', + linen: 'faf0e6', + magenta: 'ff00ff', + maroon: '800000', + mediumaquamarine: '66cdaa', + mediumblue: '0000cd', + mediumorchid: 'ba55d3', + mediumpurple: '9370d8', + mediumseagreen: '3cb371', + mediumslateblue: '7b68ee', + mediumspringgreen: '00fa9a', + mediumturquoise: '48d1cc', + mediumvioletred: 'c71585', + midnightblue: '191970', + mintcream: 'f5fffa', + mistyrose: 'ffe4e1', + moccasin: 'ffe4b5', + navajowhite: 'ffdead', + navy: '000080', + oldlace: 'fdf5e6', + olive: '808000', + olivedrab: '6b8e23', + orange: 'ffa500', + orangered: 'ff4500', + orchid: 'da70d6', + palegoldenrod: 'eee8aa', + palegreen: '98fb98', + paleturquoise: 'afeeee', + palevioletred: 'd87093', + papayawhip: 'ffefd5', + peachpuff: 'ffdab9', + peru: 'cd853f', + pink: 'ffc0cb', + plum: 'dda0dd', + powderblue: 'b0e0e6', + purple: '800080', + red: 'ff0000', + rosybrown: 'bc8f8f', + royalblue: '4169e1', + saddlebrown: '8b4513', + salmon: 'fa8072', + sandybrown: 'f4a460', + seagreen: '2e8b57', + seashell: 'fff5ee', + sienna: 'a0522d', + silver: 'c0c0c0', + skyblue: '87ceeb', + slateblue: '6a5acd', + slategray: '708090', + snow: 'fffafa', + springgreen: '00ff7f', + steelblue: '4682b4', + tan: 'd2b48c', + teal: '008080', + thistle: 'd8bfd8', + tomato: 'ff6347', + turquoise: '40e0d0', + violet: 'ee82ee', + violetred: 'd02090', + wheat: 'f5deb3', + white: 'ffffff', + whitesmoke: 'f5f5f5', + yellow: 'ffff00', + yellowgreen: '9acd32' + }; + for (var key in simple_colors) { + if (color_string == key) { + color_string = simple_colors[key]; + } + } + // emd of simple type-in colors + + // array of color definition objects + var color_defs = [ + { + re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/, + example: ['rgb(123, 234, 45)', 'rgb(255,234,245)'], + process: function (bits){ + return [ + parseInt(bits[1]), + parseInt(bits[2]), + parseInt(bits[3]) + ]; + } + }, + { + re: /^(\w{2})(\w{2})(\w{2})$/, + example: ['#00ff00', '336699'], + process: function (bits){ + return [ + parseInt(bits[1], 16), + parseInt(bits[2], 16), + parseInt(bits[3], 16) + ]; + } + }, + { + re: /^(\w{1})(\w{1})(\w{1})$/, + example: ['#fb0', 'f0f'], + process: function (bits){ + return [ + parseInt(bits[1] + bits[1], 16), + parseInt(bits[2] + bits[2], 16), + parseInt(bits[3] + bits[3], 16) + ]; + } + } + ]; + + // search through the definitions to find a match + for (var i = 0; i < color_defs.length; i++) { + var re = color_defs[i].re; + var processor = color_defs[i].process; + var bits = re.exec(color_string); + if (bits) { + channels = processor(bits); + this.r = channels[0]; + this.g = channels[1]; + this.b = channels[2]; + this.ok = true; + } + + } + + // validate/cleanup values + this.r = (this.r < 0 || isNaN(this.r)) ? 0 : ((this.r > 255) ? 255 : this.r); + this.g = (this.g < 0 || isNaN(this.g)) ? 0 : ((this.g > 255) ? 255 : this.g); + this.b = (this.b < 0 || isNaN(this.b)) ? 0 : ((this.b > 255) ? 255 : this.b); + + // some getters + this.toRGB = function () { + return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')'; + } + this.toHex = function () { + var r = this.r.toString(16); + var g = this.g.toString(16); + var b = this.b.toString(16); + if (r.length == 1) r = '0' + r; + if (g.length == 1) g = '0' + g; + if (b.length == 1) b = '0' + b; + return '#' + r + g + b; + } + + // help + this.getHelpXML = function () { + + var examples = new Array(); + // add regexps + for (var i = 0; i < color_defs.length; i++) { + var example = color_defs[i].example; + for (var j = 0; j < example.length; j++) { + examples[examples.length] = example[j]; + } + } + // add type-in colors + for (var sc in simple_colors) { + examples[examples.length] = sc; + } + + var xml = document.createElement('ul'); + xml.setAttribute('id', 'rgbcolor-examples'); + for (var i = 0; i < examples.length; i++) { + try { + var list_item = document.createElement('li'); + var list_color = new RGBColor(examples[i]); + var example_div = document.createElement('div'); + example_div.style.cssText = + 'margin: 3px; ' + + 'border: 1px solid black; ' + + 'background:' + list_color.toHex() + '; ' + + 'color:' + list_color.toHex() + ; + example_div.appendChild(document.createTextNode('test')); + var list_item_value = document.createTextNode( + ' ' + examples[i] + ' -> ' + list_color.toRGB() + ' -> ' + list_color.toHex() + ); + list_item.appendChild(example_div); + list_item.appendChild(list_item_value); + xml.appendChild(list_item); + + } catch(e){} + } + return xml; + + } + +} diff --git a/editor/contextmenu.js b/editor/contextmenu.js new file mode 100644 index 0000000..0d5dd34 --- /dev/null +++ b/editor/contextmenu.js @@ -0,0 +1,67 @@ +/** + * Package: svgedit.contextmenu + * + * Licensed under the Apache License, Version 2 + * + * Author: Adam Bender + */ +// Dependencies: +// 1) jQuery (for dom injection of context menus) +var svgedit = svgedit || {}; +(function() { + var self = this; + if (!svgedit.contextmenu) { + svgedit.contextmenu = {}; + } + self.contextMenuExtensions = {} + var addContextMenuItem = function(menuItem) { + // menuItem: {id, label, shortcut, action} + if (!menuItemIsValid(menuItem)) { + console + .error("Menu items must be defined and have at least properties: id, label, action, where action must be a function"); + return; + } + if (menuItem.id in self.contextMenuExtensions) { + console.error('Cannot add extension "' + menuItem.id + + '", an extension by that name already exists"'); + return; + } + // Register menuItem action, see below for deferred menu dom injection + console.log("Registed contextmenu item: {id:"+ menuItem.id+", label:"+menuItem.label+"}"); + self.contextMenuExtensions[menuItem.id] = menuItem; + //TODO: Need to consider how to handle custom enable/disable behavior + } + var hasCustomHandler = function(handlerKey) { + return self.contextMenuExtensions[handlerKey] && true; + } + var getCustomHandler = function(handlerKey) { + return self.contextMenuExtensions[handlerKey].action; + } + var injectExtendedContextMenuItemIntoDom = function(menuItem) { + if (Object.keys(self.contextMenuExtensions).length == 0) { + // all menuItems appear at the bottom of the menu in their own container. + // if this is the first extension menu we need to add the separator. + $("#cmenu_canvas").append("
  • "); + } + var shortcut = menuItem.shortcut || ""; + $("#cmenu_canvas").append("
  • " + + menuItem.label + "" + + shortcut + "
    • "); + } + + var menuItemIsValid = function(menuItem) { + return menuItem && menuItem.id && menuItem.label && menuItem.action && typeof menuItem.action == 'function'; + } + + // Defer injection to wait out initial menu processing. This probably goes away once all context + // menu behavior is brought here. + svgEditor.ready(function() { + for (menuItem in contextMenuExtensions) { + injectExtendedContextMenuItemIntoDom(contextMenuExtensions[menuItem]); + } + }); + svgedit.contextmenu.resetCustomMenus = function(){self.contextMenuExtensions = {}} + svgedit.contextmenu.add = addContextMenuItem; + svgedit.contextmenu.hasCustomHandler = hasCustomHandler; + svgedit.contextmenu.getCustomHandler = getCustomHandler; +})(); diff --git a/editor/contextmenu/jquery.contextMenu.js b/editor/contextmenu/jquery.contextMenu.js new file mode 100755 index 0000000..7612601 --- /dev/null +++ b/editor/contextmenu/jquery.contextMenu.js @@ -0,0 +1,203 @@ +// jQuery Context Menu Plugin +// +// Version 1.01 +// +// Cory S.N. LaViska +// A Beautiful Site (http://abeautifulsite.net/) +// Modified by Alexis Deveria +// +// More info: http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/ +// +// Terms of Use +// +// This plugin is dual-licensed under the GNU General Public License +// and the MIT License and is copyright A Beautiful Site, LLC. +// +if(jQuery)( function() { + var win = $(window); + var doc = $(document); + + $.extend($.fn, { + + contextMenu: function(o, callback) { + // Defaults + if( o.menu == undefined ) return false; + if( o.inSpeed == undefined ) o.inSpeed = 150; + if( o.outSpeed == undefined ) o.outSpeed = 75; + // 0 needs to be -1 for expected results (no fade) + if( o.inSpeed == 0 ) o.inSpeed = -1; + if( o.outSpeed == 0 ) o.outSpeed = -1; + // Loop each context menu + $(this).each( function() { + var el = $(this); + var offset = $(el).offset(); + + var menu = $('#' + o.menu); + + // Add contextMenu class + menu.addClass('contextMenu'); + // Simulate a true right click + $(this).bind( "mousedown", function(e) { + var evt = e; + $(this).mouseup( function(e) { + var srcElement = $(this); + srcElement.unbind('mouseup'); + if( evt.button === 2 || o.allowLeft || (evt.ctrlKey && svgedit.browser.isMac()) ) { + e.stopPropagation(); + // Hide context menus that may be showing + $(".contextMenu").hide(); + // Get this context menu + + if( el.hasClass('disabled') ) return false; + + // Detect mouse position + var d = {}, x = e.pageX, y = e.pageY; + + var x_off = win.width() - menu.width(), + y_off = win.height() - menu.height(); + + if(x > x_off - 15) x = x_off-15; + if(y > y_off - 30) y = y_off-30; // 30 is needed to prevent scrollbars in FF + + // Show the menu + doc.unbind('click'); + menu.css({ top: y, left: x }).fadeIn(o.inSpeed); + // Hover events + menu.find('A').mouseover( function() { + menu.find('LI.hover').removeClass('hover'); + $(this).parent().addClass('hover'); + }).mouseout( function() { + menu.find('LI.hover').removeClass('hover'); + }); + + // Keyboard + doc.keypress( function(e) { + switch( e.keyCode ) { + case 38: // up + if( !menu.find('LI.hover').length ) { + menu.find('LI:last').addClass('hover'); + } else { + menu.find('LI.hover').removeClass('hover').prevAll('LI:not(.disabled)').eq(0).addClass('hover'); + if( !menu.find('LI.hover').length ) menu.find('LI:last').addClass('hover'); + } + break; + case 40: // down + if( menu.find('LI.hover').length == 0 ) { + menu.find('LI:first').addClass('hover'); + } else { + menu.find('LI.hover').removeClass('hover').nextAll('LI:not(.disabled)').eq(0).addClass('hover'); + if( !menu.find('LI.hover').length ) menu.find('LI:first').addClass('hover'); + } + break; + case 13: // enter + menu.find('LI.hover A').trigger('click'); + break; + case 27: // esc + doc.trigger('click'); + break + } + }); + + // When items are selected + menu.find('A').unbind('mouseup'); + menu.find('LI:not(.disabled) A').mouseup( function() { + doc.unbind('click').unbind('keypress'); + $(".contextMenu").hide(); + // Callback + if( callback ) callback( $(this).attr('href').substr(1), $(srcElement), {x: x - offset.left, y: y - offset.top, docX: x, docY: y} ); + return false; + }); + + // Hide bindings + setTimeout( function() { // Delay for Mozilla + doc.click( function() { + doc.unbind('click').unbind('keypress'); + menu.fadeOut(o.outSpeed); + return false; + }); + }, 0); + } + }); + }); + + // Disable text selection + if( $.browser.mozilla ) { + $('#' + o.menu).each( function() { $(this).css({ 'MozUserSelect' : 'none' }); }); + } else if( $.browser.msie ) { + $('#' + o.menu).each( function() { $(this).bind('selectstart.disableTextSelect', function() { return false; }); }); + } else { + $('#' + o.menu).each(function() { $(this).bind('mousedown.disableTextSelect', function() { return false; }); }); + } + // Disable browser context menu (requires both selectors to work in IE/Safari + FF/Chrome) + $(el).add($('UL.contextMenu')).bind('contextmenu', function() { return false; }); + + }); + return $(this); + }, + + // Disable context menu items on the fly + disableContextMenuItems: function(o) { + if( o == undefined ) { + // Disable all + $(this).find('LI').addClass('disabled'); + return( $(this) ); + } + $(this).each( function() { + if( o != undefined ) { + var d = o.split(','); + for( var i = 0; i < d.length; i++ ) { + $(this).find('A[href="' + d[i] + '"]').parent().addClass('disabled'); + + } + } + }); + return( $(this) ); + }, + + // Enable context menu items on the fly + enableContextMenuItems: function(o) { + if( o == undefined ) { + // Enable all + $(this).find('LI.disabled').removeClass('disabled'); + return( $(this) ); + } + $(this).each( function() { + if( o != undefined ) { + var d = o.split(','); + for( var i = 0; i < d.length; i++ ) { + $(this).find('A[href="' + d[i] + '"]').parent().removeClass('disabled'); + + } + } + }); + return( $(this) ); + }, + + // Disable context menu(s) + disableContextMenu: function() { + $(this).each( function() { + $(this).addClass('disabled'); + }); + return( $(this) ); + }, + + // Enable context menu(s) + enableContextMenu: function() { + $(this).each( function() { + $(this).removeClass('disabled'); + }); + return( $(this) ); + }, + + // Destroy context menu(s) + destroyContextMenu: function() { + // Destroy specified context menus + $(this).each( function() { + // Disable action + $(this).unbind('mousedown').unbind('mouseup'); + }); + return( $(this) ); + } + + }); +})(jQuery); \ No newline at end of file diff --git a/editor/draw.js b/editor/draw.js new file mode 100644 index 0000000..8db3138 --- /dev/null +++ b/editor/draw.js @@ -0,0 +1,528 @@ +/** + * Package: svgedit.draw + * + * Licensed under the Apache License, Version 2 + * + * Copyright(c) 2011 Jeff Schiller + */ + +// Dependencies: +// 1) jQuery +// 2) browser.js +// 3) svgutils.js + +var svgedit = svgedit || {}; + +(function() { + +if (!svgedit.draw) { + svgedit.draw = {}; +} + +var svg_ns = "http://www.w3.org/2000/svg"; +var se_ns = "http://svg-edit.googlecode.com"; +var xmlns_ns = "http://www.w3.org/2000/xmlns/"; + +var visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use'; +var visElems_arr = visElems.split(','); + +var RandomizeModes = { + LET_DOCUMENT_DECIDE: 0, + ALWAYS_RANDOMIZE: 1, + NEVER_RANDOMIZE: 2 +}; +var randomize_ids = RandomizeModes.LET_DOCUMENT_DECIDE; + +/** + * This class encapsulates the concept of a layer in the drawing + * @param name {String} Layer name + * @param child {SVGGElement} Layer SVG group. + */ +svgedit.draw.Layer = function(name, group) { + this.name_ = name; + this.group_ = group; +}; + +svgedit.draw.Layer.prototype.getName = function() { + return this.name_; +}; + +svgedit.draw.Layer.prototype.getGroup = function() { + return this.group_; +}; + + +// Called to ensure that drawings will or will not have randomized ids. +// The current_drawing will have its nonce set if it doesn't already. +// +// Params: +// enableRandomization - flag indicating if documents should have randomized ids +svgedit.draw.randomizeIds = function(enableRandomization, current_drawing) { + randomize_ids = enableRandomization == false ? + RandomizeModes.NEVER_RANDOMIZE : + RandomizeModes.ALWAYS_RANDOMIZE; + + if (randomize_ids == RandomizeModes.ALWAYS_RANDOMIZE && !current_drawing.getNonce()) { + current_drawing.setNonce(Math.floor(Math.random() * 100001)); + } else if (randomize_ids == RandomizeModes.NEVER_RANDOMIZE && current_drawing.getNonce()) { + current_drawing.clearNonce(); + } +}; + +/** + * This class encapsulates the concept of a SVG-edit drawing + * + * @param svgElem {SVGSVGElement} The SVG DOM Element that this JS object + * encapsulates. If the svgElem has a se:nonce attribute on it, then + * IDs will use the nonce as they are generated. + * @param opt_idPrefix {String} The ID prefix to use. Defaults to "svg_" + * if not specified. + */ +svgedit.draw.Drawing = function(svgElem, opt_idPrefix) { + if (!svgElem || !svgElem.tagName || !svgElem.namespaceURI || + svgElem.tagName != 'svg' || svgElem.namespaceURI != svg_ns) { + throw "Error: svgedit.draw.Drawing instance initialized without a element"; + } + + /** + * The SVG DOM Element that represents this drawing. + * @type {SVGSVGElement} + */ + this.svgElem_ = svgElem; + + /** + * The latest object number used in this drawing. + * @type {number} + */ + this.obj_num = 0; + + /** + * The prefix to prepend to each element id in the drawing. + * @type {String} + */ + this.idPrefix = opt_idPrefix || "svg_"; + + /** + * An array of released element ids to immediately reuse. + * @type {Array.} + */ + this.releasedNums = []; + + /** + * The z-ordered array of tuples containing layer names and elements. + * The first layer is the one at the bottom of the rendering. + * TODO: Turn this into an Array. + * @type {Array.>} + */ + this.all_layers = []; + + /** + * The current layer being used. + * TODO: Make this a {Layer}. + * @type {SVGGElement} + */ + this.current_layer = null; + + /** + * The nonce to use to uniquely identify elements across drawings. + * @type {!String} + */ + this.nonce_ = ""; + var n = this.svgElem_.getAttributeNS(se_ns, 'nonce'); + // If already set in the DOM, use the nonce throughout the document + // else, if randomizeIds(true) has been called, create and set the nonce. + if (!!n && randomize_ids != RandomizeModes.NEVER_RANDOMIZE) { + this.nonce_ = n; + } else if (randomize_ids == RandomizeModes.ALWAYS_RANDOMIZE) { + this.setNonce(Math.floor(Math.random() * 100001)); + } +}; + +svgedit.draw.Drawing.prototype.getElem_ = function(id) { + if(this.svgElem_.querySelector) { + // querySelector lookup + return this.svgElem_.querySelector('#'+id); + } else { + // jQuery lookup: twice as slow as xpath in FF + return $(this.svgElem_).find('[id=' + id + ']')[0]; + } +}; + +svgedit.draw.Drawing.prototype.getSvgElem = function() { + return this.svgElem_; +}; + +svgedit.draw.Drawing.prototype.getNonce = function() { + return this.nonce_; +}; + +svgedit.draw.Drawing.prototype.setNonce = function(n) { + this.svgElem_.setAttributeNS(xmlns_ns, 'xmlns:se', se_ns); + this.svgElem_.setAttributeNS(se_ns, 'se:nonce', n); + this.nonce_ = n; +}; + +svgedit.draw.Drawing.prototype.clearNonce = function() { + // We deliberately leave any se:nonce attributes alone, + // we just don't use it to randomize ids. + this.nonce_ = ""; +}; + +/** + * Returns the latest object id as a string. + * @return {String} The latest object Id. + */ +svgedit.draw.Drawing.prototype.getId = function() { + return this.nonce_ ? + this.idPrefix + this.nonce_ +'_' + this.obj_num : + this.idPrefix + this.obj_num; +}; + +/** + * Returns the next object Id as a string. + * @return {String} The next object Id to use. + */ +svgedit.draw.Drawing.prototype.getNextId = function() { + var oldObjNum = this.obj_num; + var restoreOldObjNum = false; + + // If there are any released numbers in the release stack, + // use the last one instead of the next obj_num. + // We need to temporarily use obj_num as that is what getId() depends on. + if (this.releasedNums.length > 0) { + this.obj_num = this.releasedNums.pop(); + restoreOldObjNum = true; + } else { + // If we are not using a released id, then increment the obj_num. + this.obj_num++; + } + + // Ensure the ID does not exist. + var id = this.getId(); + while (this.getElem_(id)) { + if (restoreOldObjNum) { + this.obj_num = oldObjNum; + restoreOldObjNum = false; + } + this.obj_num++; + id = this.getId(); + } + // Restore the old object number if required. + if (restoreOldObjNum) { + this.obj_num = oldObjNum; + } + return id; +}; + +// Function: svgedit.draw.Drawing.releaseId +// Releases the object Id, letting it be used as the next id in getNextId(). +// This method DOES NOT remove any elements from the DOM, it is expected +// that client code will do this. +// +// Parameters: +// id - The id to release. +// +// Returns: +// True if the id was valid to be released, false otherwise. +svgedit.draw.Drawing.prototype.releaseId = function(id) { + // confirm if this is a valid id for this Document, else return false + var front = this.idPrefix + (this.nonce_ ? this.nonce_ +'_' : ''); + if (typeof id != typeof '' || id.indexOf(front) != 0) { + return false; + } + // extract the obj_num of this id + var num = parseInt(id.substr(front.length)); + + // if we didn't get a positive number or we already released this number + // then return false. + if (typeof num != typeof 1 || num <= 0 || this.releasedNums.indexOf(num) != -1) { + return false; + } + + // push the released number into the released queue + this.releasedNums.push(num); + + return true; +}; + +// Function: svgedit.draw.Drawing.getNumLayers +// Returns the number of layers in the current drawing. +// +// Returns: +// The number of layers in the current drawing. +svgedit.draw.Drawing.prototype.getNumLayers = function() { + return this.all_layers.length; +}; + +// Function: svgedit.draw.Drawing.hasLayer +// Check if layer with given name already exists +svgedit.draw.Drawing.prototype.hasLayer = function(name) { + for(var i = 0; i < this.getNumLayers(); i++) { + if(this.all_layers[i][0] == name) return true; + } + return false; +}; + + +// Function: svgedit.draw.Drawing.getLayerName +// Returns the name of the ith layer. If the index is out of range, an empty string is returned. +// +// Parameters: +// i - the zero-based index of the layer you are querying. +// +// Returns: +// The name of the ith layer +svgedit.draw.Drawing.prototype.getLayerName = function(i) { + if (i >= 0 && i < this.getNumLayers()) { + return this.all_layers[i][0]; + } + return ""; +}; + +// Function: svgedit.draw.Drawing.getCurrentLayer +// Returns: +// The SVGGElement representing the current layer. +svgedit.draw.Drawing.prototype.getCurrentLayer = function() { + return this.current_layer; +}; + +// Function: getCurrentLayerName +// Returns the name of the currently selected layer. If an error occurs, an empty string +// is returned. +// +// Returns: +// The name of the currently active layer. +svgedit.draw.Drawing.prototype.getCurrentLayerName = function() { + for (var i = 0; i < this.getNumLayers(); ++i) { + if (this.all_layers[i][1] == this.current_layer) { + return this.getLayerName(i); + } + } + return ""; +}; + +// Function: setCurrentLayer +// Sets the current layer. If the name is not a valid layer name, then this function returns +// false. Otherwise it returns true. This is not an undo-able action. +// +// Parameters: +// name - the name of the layer you want to switch to. +// +// Returns: +// true if the current layer was switched, otherwise false +svgedit.draw.Drawing.prototype.setCurrentLayer = function(name) { + for (var i = 0; i < this.getNumLayers(); ++i) { + if (name == this.getLayerName(i)) { + if (this.current_layer != this.all_layers[i][1]) { + this.current_layer.setAttribute("style", "pointer-events:none"); + this.current_layer = this.all_layers[i][1]; + this.current_layer.setAttribute("style", "pointer-events:all"); + } + return true; + } + } + return false; +}; + + +// Function: svgedit.draw.Drawing.deleteCurrentLayer +// Deletes the current layer from the drawing and then clears the selection. This function +// then calls the 'changed' handler. This is an undoable action. +// Returns: +// The SVGGElement of the layer removed or null. +svgedit.draw.Drawing.prototype.deleteCurrentLayer = function() { + if (this.current_layer && this.getNumLayers() > 1) { + // actually delete from the DOM and return it + var parent = this.current_layer.parentNode; + var nextSibling = this.current_layer.nextSibling; + var oldLayerGroup = parent.removeChild(this.current_layer); + this.identifyLayers(); + return oldLayerGroup; + } + return null; +}; + +// Function: svgedit.draw.Drawing.identifyLayers +// Updates layer system and sets the current layer to the +// top-most layer (last child of this drawing). +svgedit.draw.Drawing.prototype.identifyLayers = function() { + this.all_layers = []; + var numchildren = this.svgElem_.childNodes.length; + // loop through all children of SVG element + var orphans = [], layernames = []; + var a_layer = null; + var childgroups = false; + for (var i = 0; i < numchildren; ++i) { + var child = this.svgElem_.childNodes.item(i); + // for each g, find its layer name + if (child && child.nodeType == 1) { + if (child.tagName == "g") { + childgroups = true; + var name = $("title",child).text(); + + // Hack for Opera 10.60 + if(!name && svgedit.browser.isOpera() && child.querySelectorAll) { + name = $(child.querySelectorAll('title')).text(); + } + + // store layer and name in global variable + if (name) { + layernames.push(name); + this.all_layers.push( [name,child] ); + a_layer = child; + svgedit.utilities.walkTree(child, function(e){e.setAttribute("style", "pointer-events:inherit");}); + a_layer.setAttribute("style", "pointer-events:none"); + } + // if group did not have a name, it is an orphan + else { + orphans.push(child); + } + } + // if child has is "visible" (i.e. not a or element), then it is an orphan + else if(~visElems_arr.indexOf(child.nodeName)) { + var bb = svgedit.utilities.getBBox(child); + orphans.push(child); + } + } + } + + // create a new layer and add all the orphans to it + var svgdoc = this.svgElem_.ownerDocument; + if (orphans.length > 0 || !childgroups) { + var i = 1; + // TODO(codedread): What about internationalization of "Layer"? + while (layernames.indexOf(("Layer " + i)) >= 0) { i++; } + var newname = "Layer " + i; + a_layer = svgdoc.createElementNS(svg_ns, "g"); + var layer_title = svgdoc.createElementNS(svg_ns, "title"); + layer_title.textContent = newname; + a_layer.appendChild(layer_title); + for (var j = 0; j < orphans.length; ++j) { + a_layer.appendChild(orphans[j]); + } + this.svgElem_.appendChild(a_layer); + this.all_layers.push( [newname, a_layer] ); + } + svgedit.utilities.walkTree(a_layer, function(e){e.setAttribute("style","pointer-events:inherit");}); + this.current_layer = a_layer; + this.current_layer.setAttribute("style","pointer-events:all"); +}; + +// Function: svgedit.draw.Drawing.createLayer +// Creates a new top-level layer in the drawing with the given name and +// sets the current layer to it. +// +// Parameters: +// name - The given name +// +// Returns: +// The SVGGElement of the new layer, which is also the current layer +// of this drawing. +svgedit.draw.Drawing.prototype.createLayer = function(name) { + var svgdoc = this.svgElem_.ownerDocument; + var new_layer = svgdoc.createElementNS(svg_ns, "g"); + var layer_title = svgdoc.createElementNS(svg_ns, "title"); + layer_title.textContent = name; + new_layer.appendChild(layer_title); + this.svgElem_.appendChild(new_layer); + this.identifyLayers(); + return new_layer; +}; + +// Function: svgedit.draw.Drawing.getLayerVisibility +// Returns whether the layer is visible. If the layer name is not valid, then this function +// returns false. +// +// Parameters: +// layername - the name of the layer which you want to query. +// +// Returns: +// The visibility state of the layer, or false if the layer name was invalid. +svgedit.draw.Drawing.prototype.getLayerVisibility = function(layername) { + // find the layer + var layer = null; + for (var i = 0; i < this.getNumLayers(); ++i) { + if (this.getLayerName(i) == layername) { + layer = this.all_layers[i][1]; + break; + } + } + if (!layer) return false; + return (layer.getAttribute('display') != 'none'); +}; + +// Function: svgedit.draw.Drawing.setLayerVisibility +// Sets the visibility of the layer. If the layer name is not valid, this function return +// false, otherwise it returns true. This is an undo-able action. +// +// Parameters: +// layername - the name of the layer to change the visibility +// bVisible - true/false, whether the layer should be visible +// +// Returns: +// The SVGGElement representing the layer if the layername was valid, otherwise null. +svgedit.draw.Drawing.prototype.setLayerVisibility = function(layername, bVisible) { + if (typeof bVisible != typeof true) { + return null; + } + // find the layer + var layer = null; + for (var i = 0; i < this.getNumLayers(); ++i) { + if (this.getLayerName(i) == layername) { + layer = this.all_layers[i][1]; + break; + } + } + if (!layer) return null; + + var oldDisplay = layer.getAttribute("display"); + if (!oldDisplay) oldDisplay = "inline"; + layer.setAttribute("display", bVisible ? "inline" : "none"); + return layer; +}; + + +// Function: svgedit.draw.Drawing.getLayerOpacity +// Returns the opacity of the given layer. If the input name is not a layer, null is returned. +// +// Parameters: +// layername - name of the layer on which to get the opacity +// +// Returns: +// The opacity value of the given layer. This will be a value between 0.0 and 1.0, or null +// if layername is not a valid layer +svgedit.draw.Drawing.prototype.getLayerOpacity = function(layername) { + for (var i = 0; i < this.getNumLayers(); ++i) { + if (this.getLayerName(i) == layername) { + var g = this.all_layers[i][1]; + var opacity = g.getAttribute('opacity'); + if (!opacity) { + opacity = '1.0'; + } + return parseFloat(opacity); + } + } + return null; +}; + +// Function: svgedit.draw.Drawing.setLayerOpacity +// Sets the opacity of the given layer. If the input name is not a layer, nothing happens. +// If opacity is not a value between 0.0 and 1.0, then nothing happens. +// +// Parameters: +// layername - name of the layer on which to set the opacity +// opacity - a float value in the range 0.0-1.0 +svgedit.draw.Drawing.prototype.setLayerOpacity = function(layername, opacity) { + if (typeof opacity != typeof 1.0 || opacity < 0.0 || opacity > 1.0) { + return; + } + for (var i = 0; i < this.getNumLayers(); ++i) { + if (this.getLayerName(i) == layername) { + var g = this.all_layers[i][1]; + g.setAttribute("opacity", opacity); + break; + } + } +}; + +})(); diff --git a/editor/embedapi.html b/editor/embedapi.html new file mode 100644 index 0000000..3db0364 --- /dev/null +++ b/editor/embedapi.html @@ -0,0 +1,56 @@ + + + + + + + + + + + + + +
    + + + + diff --git a/editor/embedapi.js b/editor/embedapi.js new file mode 100644 index 0000000..8debfd6 --- /dev/null +++ b/editor/embedapi.js @@ -0,0 +1,173 @@ +/* +function embedded_svg_edit(frame){ + //initialize communication + this.frame = frame; + this.stack = []; //callback stack + + var editapi = this; + + window.addEventListener("message", function(e){ + if(e.data.substr(0,5) == "ERROR"){ + editapi.stack.splice(0,1)[0](e.data,"error") + }else{ + editapi.stack.splice(0,1)[0](e.data) + } + }, false) +} + +embedded_svg_edit.prototype.call = function(code, callback){ + this.stack.push(callback); + this.frame.contentWindow.postMessage(code,"*"); +} + +embedded_svg_edit.prototype.getSvgString = function(callback){ + this.call("svgCanvas.getSvgString()",callback) +} + +embedded_svg_edit.prototype.setSvgString = function(svg){ + this.call("svgCanvas.setSvgString('"+svg.replace(/'/g, "\\'")+"')"); +} +*/ + + +/* +Embedded SVG-edit API + +General usage: +- Have an iframe somewhere pointing to a version of svg-edit > r1000 +- Initialize the magic with: +var svgCanvas = new embedded_svg_edit(window.frames['svgedit']); +- Pass functions in this format: +svgCanvas.setSvgString("string") +- Or if a callback is needed: +svgCanvas.setSvgString("string")(function(data, error){ + if(error){ + //there was an error + }else{ + //handle data + } +}) + +Everything is done with the same API as the real svg-edit, +and all documentation is unchanged. The only difference is +when handling returns, the callback notation is used instead. + +var blah = new embedded_svg_edit(window.frames['svgedit']); +blah.clearSelection("woot","blah",1337,[1,2,3,4,5,"moo"],-42,{a: "tree",b:6, c: 9})(function(){console.log("GET DATA",arguments)}) +*/ + +function embedded_svg_edit(frame){ + //initialize communication + this.frame = frame; + //this.stack = [] //callback stack + this.callbacks = {}; //successor to stack + this.encode = embedded_svg_edit.encode; + //List of functions extracted with this: + //Run in firebug on http://svg-edit.googlecode.com/svn/trunk/docs/files/svgcanvas-js.html + + //for(var i=0,q=[],f = document.querySelectorAll("div.CFunction h3.CTitle a");i + + + + Layer 1 + + + + + + + + + + + + + + + + + Layer 1 + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/editor/extensions/ext-arrows.js b/editor/extensions/ext-arrows.js new file mode 100644 index 0000000..4bb5cd2 --- /dev/null +++ b/editor/extensions/ext-arrows.js @@ -0,0 +1,298 @@ +/* + * ext-arrows.js + * + * Licensed under the Apache License, Version 2 + * + * Copyright(c) 2010 Alexis Deveria + * + */ + + +svgEditor.addExtension("Arrows", function(S) { + var svgcontent = S.svgcontent, + addElem = S.addSvgElementFromJson, + nonce = S.nonce, + randomize_ids = S.randomize_ids, + selElems; + + svgCanvas.bind('setnonce', setArrowNonce); + svgCanvas.bind('unsetnonce', unsetArrowNonce); + + var lang_list = { + "en":[ + {"id": "arrow_none", "textContent": "No arrow" } + ], + "fr":[ + {"id": "arrow_none", "textContent": "Sans flèche" } + ] + }; + + var prefix = 'se_arrow_'; + if (randomize_ids) { + var arrowprefix = prefix + nonce + '_'; + } else { + var arrowprefix = prefix; + } + + var pathdata = { + fw: {d:"m0,0l10,5l-10,5l5,-5l-5,-5z", refx:8, id: arrowprefix + 'fw'}, + bk: {d:"m10,0l-10,5l10,5l-5,-5l5,-5z", refx:2, id: arrowprefix + 'bk'} + } + + function setArrowNonce(window, n) { + randomize_ids = true; + arrowprefix = prefix + n + '_'; + pathdata.fw.id = arrowprefix + 'fw'; + pathdata.bk.id = arrowprefix + 'bk'; + } + + function unsetArrowNonce(window) { + randomize_ids = false; + arrowprefix = prefix; + pathdata.fw.id = arrowprefix + 'fw'; + pathdata.bk.id = arrowprefix + 'bk'; + } + + function getLinked(elem, attr) { + var str = elem.getAttribute(attr); + if(!str) return null; + var m = str.match(/\(\#(.*)\)/); + if(!m || m.length !== 2) { + return null; + } + return S.getElem(m[1]); + } + + function showPanel(on) { + $('#arrow_panel').toggle(on); + + if(on) { + var el = selElems[0]; + var end = el.getAttribute("marker-end"); + var start = el.getAttribute("marker-start"); + var mid = el.getAttribute("marker-mid"); + var val; + + if(end && start) { + val = "both"; + } else if(end) { + val = "end"; + } else if(start) { + val = "start"; + } else if(mid) { + val = "mid"; + if(mid.indexOf("bk") != -1) { + val = "mid_bk"; + } + } + + if(!start && !mid && !end) { + val = "none"; + } + + $("#arrow_list").val(val); + } + } + + function resetMarker() { + var el = selElems[0]; + el.removeAttribute("marker-start"); + el.removeAttribute("marker-mid"); + el.removeAttribute("marker-end"); + } + + function addMarker(dir, type, id) { + // TODO: Make marker (or use?) per arrow type, since refX can be different + id = id || arrowprefix + dir; + + var marker = S.getElem(id); + + var data = pathdata[dir]; + + if(type == "mid") { + data.refx = 5; + } + + if(!marker) { + marker = addElem({ + "element": "marker", + "attr": { + "viewBox": "0 0 10 10", + "id": id, + "refY": 5, + "markerUnits": "strokeWidth", + "markerWidth": 5, + "markerHeight": 5, + "orient": "auto", + "style": "pointer-events:none" // Currently needed for Opera + } + }); + var arrow = addElem({ + "element": "path", + "attr": { + "d": data.d, + "fill": "#000000" + } + }); + marker.appendChild(arrow); + S.findDefs().appendChild(marker); + } + + marker.setAttribute('refX', data.refx); + + return marker; + } + + function setArrow() { + var type = this.value; + resetMarker(); + + if(type == "none") { + return; + } + + // Set marker on element + var dir = "fw"; + if(type == "mid_bk") { + type = "mid"; + dir = "bk"; + } else if(type == "both") { + addMarker("bk", type); + svgCanvas.changeSelectedAttribute("marker-start", "url(#" + pathdata.bk.id + ")"); + type = "end"; + dir = "fw"; + } else if (type == "start") { + dir = "bk"; + } + + addMarker(dir, type); + svgCanvas.changeSelectedAttribute("marker-"+type, "url(#" + pathdata[dir].id + ")"); + S.call("changed", selElems); + } + + function colorChanged(elem) { + var color = elem.getAttribute('stroke'); + + var mtypes = ['start','mid','end']; + var defs = S.findDefs(); + + $.each(mtypes, function(i, type) { + var marker = getLinked(elem, 'marker-'+type); + if(!marker) return; + + var cur_color = $(marker).children().attr('fill'); + var cur_d = $(marker).children().attr('d'); + var new_marker = null; + if(cur_color === color) return; + + var all_markers = $(defs).find('marker'); + // Different color, check if already made + all_markers.each(function() { + var attrs = $(this).children().attr(['fill', 'd']); + if(attrs.fill === color && attrs.d === cur_d) { + // Found another marker with this color and this path + new_marker = this; + } + }); + + if(!new_marker) { + // Create a new marker with this color + var last_id = marker.id; + var dir = last_id.indexOf('_fw') !== -1?'fw':'bk'; + + new_marker = addMarker(dir, type, arrowprefix + dir + all_markers.length); + + $(new_marker).children().attr('fill', color); + } + + $(elem).attr('marker-'+type, "url(#" + new_marker.id + ")"); + + // Check if last marker can be removed + var remove = true; + $(S.svgcontent).find('line, polyline, path, polygon').each(function() { + var elem = this; + $.each(mtypes, function(j, mtype) { + if($(elem).attr('marker-' + mtype) === "url(#" + marker.id + ")") { + return remove = false; + } + }); + if(!remove) return false; + }); + + // Not found, so can safely remove + if(remove) { + $(marker).remove(); + } + + }); + + } + + return { + name: "Arrows", + context_tools: [{ + type: "select", + panel: "arrow_panel", + title: "Select arrow type", + id: "arrow_list", + options: { + none: "No arrow", + end: "---->", + start: "<----", + both: "<--->", + mid: "-->--", + mid_bk: "--<--" + }, + defval: "none", + events: { + change: setArrow + } + }], + callback: function() { + $('#arrow_panel').hide(); + // Set ID so it can be translated in locale file + $('#arrow_list option')[0].id = 'connector_no_arrow'; + }, + addLangData: function(lang) { + return { + data: lang_list[lang] + }; + }, + selectedChanged: function(opts) { + + // Use this to update the current selected elements + selElems = opts.elems; + + var i = selElems.length; + var marker_elems = ['line','path','polyline','polygon']; + + while(i--) { + var elem = selElems[i]; + if(elem && $.inArray(elem.tagName, marker_elems) != -1) { + if(opts.selectedElement && !opts.multiselected) { + showPanel(true); + } else { + showPanel(false); + } + } else { + showPanel(false); + } + } + }, + elementChanged: function(opts) { + var elem = opts.elems[0]; + if(elem && ( + elem.getAttribute("marker-start") || + elem.getAttribute("marker-mid") || + elem.getAttribute("marker-end") + )) { + // var start = elem.getAttribute("marker-start"); + // var mid = elem.getAttribute("marker-mid"); + // var end = elem.getAttribute("marker-end"); + // Has marker, so see if it should match color + colorChanged(elem); + } + + } + }; +}); diff --git a/editor/extensions/ext-closepath.js b/editor/extensions/ext-closepath.js new file mode 100644 index 0000000..bf8e72c --- /dev/null +++ b/editor/extensions/ext-closepath.js @@ -0,0 +1,92 @@ +/* + * ext-closepath.js + * + * Licensed under the Apache License, Version 2 + * + * Copyright(c) 2010 Jeff Schiller + * + */ + +// This extension adds a simple button to the contextual panel for paths +// The button toggles whether the path is open or closed +svgEditor.addExtension("ClosePath", function(S) { + var selElems, + updateButton = function(path) { + var seglist = path.pathSegList, + closed = seglist.getItem(seglist.numberOfItems - 1).pathSegType==1, + showbutton = closed ? '#tool_openpath' : '#tool_closepath', + hidebutton = closed ? '#tool_closepath' : '#tool_openpath'; + $(hidebutton).hide(); + $(showbutton).show(); + }, + showPanel = function(on) { + $('#closepath_panel').toggle(on); + if (on) { + var path = selElems[0]; + if (path) updateButton(path); + } + }, + + toggleClosed = function() { + var path = selElems[0]; + if (path) { + var seglist = path.pathSegList, + last = seglist.numberOfItems - 1; + // is closed + if(seglist.getItem(last).pathSegType == 1) { + seglist.removeItem(last); + } + else { + seglist.appendItem(path.createSVGPathSegClosePath()); + } + updateButton(path); + } + }; + + return { + name: "ClosePath", + svgicons: "extensions/closepath_icons.svg", + buttons: [{ + id: "tool_openpath", + type: "context", + panel: "closepath_panel", + title: "Open path", + events: { + 'click': function() { + toggleClosed(); + } + } + }, + { + id: "tool_closepath", + type: "context", + panel: "closepath_panel", + title: "Close path", + events: { + 'click': function() { + toggleClosed(); + } + } + }], + callback: function() { + $('#closepath_panel').hide(); + }, + selectedChanged: function(opts) { + selElems = opts.elems; + var i = selElems.length; + + while(i--) { + var elem = selElems[i]; + if(elem && elem.tagName == 'path') { + if(opts.selectedElement && !opts.multiselected) { + showPanel(true); + } else { + showPanel(false); + } + } else { + showPanel(false); + } + } + } + }; +}); diff --git a/editor/extensions/ext-connector.js b/editor/extensions/ext-connector.js new file mode 100644 index 0000000..3498c7f --- /dev/null +++ b/editor/extensions/ext-connector.js @@ -0,0 +1,587 @@ +/* + * ext-connector.js + * + * Licensed under the Apache License, Version 2 + * + * Copyright(c) 2010 Alexis Deveria + * + */ + +svgEditor.addExtension("Connector", function(S) { + var svgcontent = S.svgcontent, + svgroot = S.svgroot, + getNextId = S.getNextId, + getElem = S.getElem, + addElem = S.addSvgElementFromJson, + selManager = S.selectorManager, + curConfig = svgEditor.curConfig, + started = false, + start_x, + start_y, + cur_line, + start_elem, + end_elem, + connections = [], + conn_sel = ".se_connector", + se_ns, +// connect_str = "-SE_CONNECT-", + selElems = []; + + elData = $.data; + + var lang_list = { + "en":[ + {"id": "mode_connect", "title": "Connect two objects" } + ], + "fr":[ + {"id": "mode_connect", "title": "Connecter deux objets"} + ] + }; + + function getOffset(side, line) { + var give_offset = !!line.getAttribute('marker-' + side); +// var give_offset = $(line).data(side+'_off'); + + // TODO: Make this number (5) be based on marker width/height + var size = line.getAttribute('stroke-width') * 5; + return give_offset ? size : 0; + } + + function showPanel(on) { + var conn_rules = $('#connector_rules'); + if(!conn_rules.length) { + conn_rules = $(' +
    + +
    + + +
    +
    +

    Layers

    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + + +
    Layer 1
    + Move elements to: + +
    +
    L a y e r s
    +
    + +
    +
    + + +
    +
    + + +
    + + + +
    + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    + + + +
    + + +
    + + + +
    + + +
    +
    + + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +
    + +
    + +
    +
    + + +
    + +
    + +
    +
    + + +
    +
    + + +
    +
    + +
    +
    + + +
    +
    + +
    +
    + +
    +
    + + +
    +
    + + +
    +
    + +
    +
    + + +
    +
    + + +
    +
    + +
    +
    +
    B
    +
    i
    +
    + +
    + + +
    + + + + + +
    + + +
    +
    + + + + +
    + +
    + +
    + +
    +
    +
    + + +
    + +
    + +
    +
    + +
    + + + + +
    +
    +
    +
    +
    +
    +
    + +
    + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    + + +
    + + +
    +
    + +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    + + + + + + + + + +
    + >> +
    + +
    +
    + +
    + + +
    + +
    + +
    +
    +
    + +
    + + + + + +
    + + + +
    +
    +
    +
    + + +
    +
    +

    Copy the contents of this box into a text editor, then save the file with a .svg extension.

    + +
    +
    + +
    +
    +
    + + +
    +
    +
    +
    + + +
    + + +
    + Image Properties + + +
    + Canvas Dimensions + + + + + + +
    + +
    + Included Images + + +
    +
    + +
    +
    + +
    +
    +
    +
    + + +
    + +
    + Editor Preferences + + + + + +
    + Editor Background +
    + +

    Note: Background will not be saved with image.

    +
    + +
    + Grid + + +
    + +
    + Units & Rulers + + + + +
    + +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    + + + + + + + + diff --git a/editor/svg-editor.js b/editor/svg-editor.js new file mode 100644 index 0000000..a2666f1 --- /dev/null +++ b/editor/svg-editor.js @@ -0,0 +1,4881 @@ +/* + * svg-editor.js + * + * Licensed under the Apache License, Version 2 + * + * Copyright(c) 2010 Alexis Deveria + * Copyright(c) 2010 Pavol Rusnak + * Copyright(c) 2010 Jeff Schiller + * Copyright(c) 2010 Narendra Sisodiya + * + */ + +// Dependencies: +// 1) units.js +// 2) browser.js +// 3) svgcanvas.js + +(function() { + + if(!window.svgEditor) window.svgEditor = function($) { + var svgCanvas; + var Editor = {}; + var is_ready = false; + + var defaultPrefs = { + lang:'en', + iconsize:'m', + bkgd_color:'#FFF', + bkgd_url:'', + img_save:'embed' + }, + curPrefs = {}, + + // Note: Difference between Prefs and Config is that Prefs can be + // changed in the UI and are stored in the browser, config can not + + curConfig = { + canvas_expansion: 3, + dimensions: [640,480], + initFill: { + color: 'FF0000', // solid red + opacity: 1 + }, + initStroke: { + width: 5, + color: '000000', // solid black + opacity: 1 + }, + initOpacity: 1, + imgPath: 'images/', + langPath: 'locale/', + extPath: 'extensions/', + jGraduatePath: 'jgraduate/images/', + extensions: ['ext-markers.js','ext-connector.js', 'ext-eyedropper.js', 'ext-shapes.js', 'ext-imagelib.js','ext-grid.js'], + initTool: 'select', + wireframe: false, + colorPickerCSS: null, + gridSnapping: false, + gridColor: "#000", + baseUnit: 'px', + snappingStep: 10, + showRulers: true + }, + uiStrings = Editor.uiStrings = { + common: { + "ok":"OK", + "cancel":"Cancel", + "key_up":"Up", + "key_down":"Down", + "key_backspace":"Backspace", + "key_del":"Del" + + }, + // This is needed if the locale is English, since the locale strings are not read in that instance. + layers: { + "layer":"Layer" + }, + notification: { + "invalidAttrValGiven":"Invalid value given", + "noContentToFitTo":"No content to fit to", + "dupeLayerName":"There is already a layer named that!", + "enterUniqueLayerName":"Please enter a unique layer name", + "enterNewLayerName":"Please enter the new layer name", + "layerHasThatName":"Layer already has that name", + "QmoveElemsToLayer":"Move selected elements to layer \"%s\"?", + "QwantToClear":"Do you want to clear the drawing?\nThis will also erase your undo history!", + "QwantToOpen":"Do you want to open a new file?\nThis will also erase your undo history!", + "QerrorsRevertToSource":"There were parsing errors in your SVG source.\nRevert back to original SVG source?", + "QignoreSourceChanges":"Ignore changes made to SVG source?", + "featNotSupported":"Feature not supported", + "enterNewImgURL":"Enter the new image URL", + "defsFailOnSave": "NOTE: Due to a bug in your browser, this image may appear wrong (missing gradients or elements). It will however appear correct once actually saved.", + "loadingImage":"Loading image, please wait...", + "saveFromBrowser": "Select \"Save As...\" in your browser to save this image as a %s file.", + "noteTheseIssues": "Also note the following issues: ", + "unsavedChanges": "There are unsaved changes.", + "enterNewLinkURL": "Enter the new hyperlink URL", + "errorLoadingSVG": "Error: Unable to load SVG data", + "URLloadFail": "Unable to load from URL", + "retrieving": 'Retrieving "%s" ...' + } + }; + + var curPrefs = {}; //$.extend({}, defaultPrefs); + + var customHandlers = {}; + + Editor.curConfig = curConfig; + + Editor.tool_scale = 1; + + // Store and retrieve preferences + $.pref = function(key, val) { + if(val) curPrefs[key] = val; + key = 'svg-edit-'+key; + var host = location.hostname, + onweb = host && host.indexOf('.') >= 0, + store = (val != undefined), + storage = false; + // Some FF versions throw security errors here + try { + if(window.localStorage) { // && onweb removed so Webkit works locally + storage = localStorage; + } + } catch(e) {} + try { + if(window.globalStorage && onweb) { + storage = globalStorage[host]; + } + } catch(e) {} + + if(storage) { + if(store) storage.setItem(key, val); + else if (storage.getItem(key)) return storage.getItem(key) + ''; // Convert to string for FF (.value fails in Webkit) + } else if(window.widget) { + if(store) widget.setPreferenceForKey(val, key); + else return widget.preferenceForKey(key); + } else { + if(store) { + var d = new Date(); + d.setTime(d.getTime() + 31536000000); + val = encodeURIComponent(val); + document.cookie = key+'='+val+'; expires='+d.toUTCString(); + } else { + var result = document.cookie.match(new RegExp(key + "=([^;]+)")); + return result?decodeURIComponent(result[1]):''; + } + } + } + + Editor.setConfig = function(opts) { + $.each(opts, function(key, val) { + // Only allow prefs defined in defaultPrefs + if(key in defaultPrefs) { + $.pref(key, val); + } + }); + $.extend(true, curConfig, opts); + if(opts.extensions) { + curConfig.extensions = opts.extensions; + } + + } + + // Extension mechanisms must call setCustomHandlers with two functions: opts.open and opts.save + // opts.open's responsibilities are: + // - invoke a file chooser dialog in 'open' mode + // - let user pick a SVG file + // - calls setCanvas.setSvgString() with the string contents of that file + // opts.save's responsibilities are: + // - accept the string contents of the current document + // - invoke a file chooser dialog in 'save' mode + // - save the file to location chosen by the user + Editor.setCustomHandlers = function(opts) { + Editor.ready(function() { + if(opts.open) { + $('#tool_open > input[type="file"]').remove(); + $('#tool_open').show(); + svgCanvas.open = opts.open; + } + if(opts.save) { + Editor.show_save_warning = false; + svgCanvas.bind("saved", opts.save); + } + if(opts.pngsave) { + svgCanvas.bind("exported", opts.pngsave); + } + customHandlers = opts; + }); + } + + Editor.randomizeIds = function() { + svgCanvas.randomizeIds(arguments) + } + + Editor.init = function() { + // For external openers + (function() { + // let the opener know SVG Edit is ready + var w = window.opener; + if (w) { + try { + var svgEditorReadyEvent = w.document.createEvent("Event"); + svgEditorReadyEvent.initEvent("svgEditorReady", true, true); + w.document.documentElement.dispatchEvent(svgEditorReadyEvent); + } + catch(e) {} + } + })(); + + (function() { + // Load config/data from URL if given + var urldata = $.deparam.querystring(true); + if(!$.isEmptyObject(urldata)) { + if(urldata.dimensions) { + urldata.dimensions = urldata.dimensions.split(','); + } + + if(urldata.extensions) { + urldata.extensions = urldata.extensions.split(','); + } + + if(urldata.bkgd_color) { + urldata.bkgd_color = '#' + urldata.bkgd_color; + } + + svgEditor.setConfig(urldata); + + var src = urldata.source; + var qstr = $.param.querystring(); + + if(!src) { // urldata.source may have been null if it ended with '=' + if(qstr.indexOf('source=data:') >= 0) { + src = qstr.match(/source=(data:[^&]*)/)[1]; + } + } + + if(src) { + if(src.indexOf("data:") === 0) { + // plusses get replaced by spaces, so re-insert + src = src.replace(/ /g, "+"); + Editor.loadFromDataURI(src); + } else { + Editor.loadFromString(src); + } + } else if(qstr.indexOf('paramurl=') !== -1) { + // Get paramater URL (use full length of remaining location.href) + svgEditor.loadFromURL(qstr.substr(9)); + } else if(urldata.url) { + svgEditor.loadFromURL(urldata.url); + } + } + })(); + + var extFunc = function() { + $.each(curConfig.extensions, function() { + var extname = this; + $.getScript(curConfig.extPath + extname, function(d) { + // Fails locally in Chrome 5 + if(!d) { + var s = document.createElement('script'); + s.src = curConfig.extPath + extname; + document.querySelector('head').appendChild(s); + } + }); + }); + + var good_langs = []; + + $('#lang_select option').each(function() { + good_langs.push(this.value); + }); + + // var lang = ('lang' in curPrefs) ? curPrefs.lang : null; + Editor.putLocale(null, good_langs); + } + + // Load extensions + // Bit of a hack to run extensions in local Opera/IE9 + if(document.location.protocol === 'file:') { + setTimeout(extFunc, 100); + } else { + extFunc(); + } + $.svgIcons(curConfig.imgPath + 'svg_edit_icons.svg', { + w:24, h:24, + id_match: false, + no_img: !svgedit.browser.isWebkit(), // Opera & Firefox 4 gives odd behavior w/images + fallback_path: curConfig.imgPath, + fallback:{ + 'new_image':'clear.png', + 'save':'save.png', + 'open':'open.png', + 'source':'source.png', + 'docprops':'document-properties.png', + 'wireframe':'wireframe.png', + + 'undo':'undo.png', + 'redo':'redo.png', + + 'select':'select.png', + 'select_node':'select_node.png', + 'pencil':'fhpath.png', + 'pen':'line.png', + 'square':'square.png', + 'rect':'rect.png', + 'fh_rect':'freehand-square.png', + 'circle':'circle.png', + 'ellipse':'ellipse.png', + 'fh_ellipse':'freehand-circle.png', + 'path':'path.png', + 'text':'text.png', + 'image':'image.png', + 'zoom':'zoom.png', + + 'clone':'clone.png', + 'node_clone':'node_clone.png', + 'delete':'delete.png', + 'node_delete':'node_delete.png', + 'group':'shape_group.png', + 'ungroup':'shape_ungroup.png', + 'move_top':'move_top.png', + 'move_bottom':'move_bottom.png', + 'to_path':'to_path.png', + 'link_controls':'link_controls.png', + 'reorient':'reorient.png', + + 'align_left':'align-left.png', + 'align_center':'align-center', + 'align_right':'align-right', + 'align_top':'align-top', + 'align_middle':'align-middle', + 'align_bottom':'align-bottom', + + 'go_up':'go-up.png', + 'go_down':'go-down.png', + + 'ok':'save.png', + 'cancel':'cancel.png', + + 'arrow_right':'flyouth.png', + 'arrow_down':'dropdown.gif' + }, + placement: { + '#logo':'logo', + + '#tool_clear div,#layer_new':'new_image', + '#tool_save div':'save', + '#tool_export div':'export', + '#tool_open div div':'open', + '#tool_import div div':'import', + '#tool_source':'source', + '#tool_docprops > div':'docprops', + '#tool_wireframe':'wireframe', + + '#tool_undo':'undo', + '#tool_redo':'redo', + + '#tool_select':'select', + '#tool_fhpath':'pencil', + '#tool_line':'pen', + '#tool_rect,#tools_rect_show':'rect', + '#tool_square':'square', + '#tool_fhrect':'fh_rect', + '#tool_ellipse,#tools_ellipse_show':'ellipse', + '#tool_circle':'circle', + '#tool_fhellipse':'fh_ellipse', + '#tool_path':'path', + '#tool_text,#layer_rename':'text', + '#tool_image':'image', + '#tool_zoom':'zoom', + + '#tool_clone,#tool_clone_multi':'clone', + '#tool_node_clone':'node_clone', + '#layer_delete,#tool_delete,#tool_delete_multi':'delete', + '#tool_node_delete':'node_delete', + '#tool_add_subpath':'add_subpath', + '#tool_openclose_path':'open_path', + '#tool_move_top':'move_top', + '#tool_move_bottom':'move_bottom', + '#tool_topath':'to_path', + '#tool_node_link':'link_controls', + '#tool_reorient':'reorient', + '#tool_group':'group', + '#tool_ungroup':'ungroup', + '#tool_unlink_use':'unlink_use', + + '#tool_alignleft, #tool_posleft':'align_left', + '#tool_aligncenter, #tool_poscenter':'align_center', + '#tool_alignright, #tool_posright':'align_right', + '#tool_aligntop, #tool_postop':'align_top', + '#tool_alignmiddle, #tool_posmiddle':'align_middle', + '#tool_alignbottom, #tool_posbottom':'align_bottom', + '#cur_position':'align', + + '#linecap_butt,#cur_linecap':'linecap_butt', + '#linecap_round':'linecap_round', + '#linecap_square':'linecap_square', + + '#linejoin_miter,#cur_linejoin':'linejoin_miter', + '#linejoin_round':'linejoin_round', + '#linejoin_bevel':'linejoin_bevel', + + '#url_notice':'warning', + + '#layer_up':'go_up', + '#layer_down':'go_down', + '#layer_moreopts':'context_menu', + '#layerlist td.layervis':'eye', + + '#tool_source_save,#tool_docprops_save,#tool_prefs_save':'ok', + '#tool_source_cancel,#tool_docprops_cancel,#tool_prefs_cancel':'cancel', + + '#rwidthLabel, #iwidthLabel':'width', + '#rheightLabel, #iheightLabel':'height', + '#cornerRadiusLabel span':'c_radius', + '#angleLabel':'angle', + '#linkLabel,#tool_make_link,#tool_make_link_multi':'globe_link', + '#zoomLabel':'zoom', + '#tool_fill label': 'fill', + '#tool_stroke .icon_label': 'stroke', + '#group_opacityLabel': 'opacity', + '#blurLabel': 'blur', + '#font_sizeLabel': 'fontsize', + + '.flyout_arrow_horiz':'arrow_right', + '.dropdown button, #main_button .dropdown':'arrow_down', + '#palette .palette_item:first, #fill_bg, #stroke_bg':'no_color' + }, + resize: { + '#logo .svg_icon': 32, + '.flyout_arrow_horiz .svg_icon': 5, + '.layer_button .svg_icon, #layerlist td.layervis .svg_icon': 14, + '.dropdown button .svg_icon': 7, + '#main_button .dropdown .svg_icon': 9, + '.palette_item:first .svg_icon, #fill_bg .svg_icon, #stroke_bg .svg_icon': 16, + '.toolbar_button button .svg_icon':16, + '.stroke_tool div div .svg_icon': 20, + '#tools_bottom label .svg_icon': 18 + }, + callback: function(icons) { + $('.toolbar_button button > svg, .toolbar_button button > img').each(function() { + $(this).parent().prepend(this); + }); + + var tleft = $('#tools_left'); + if (tleft.length != 0) { + var min_height = tleft.offset().top + tleft.outerHeight(); + } +// var size = $.pref('iconsize'); +// if(size && size != 'm') { +// svgEditor.setIconSize(size); +// } else if($(window).height() < min_height) { +// // Make smaller +// svgEditor.setIconSize('s'); +// } + + // Look for any missing flyout icons from plugins + $('.tools_flyout').each(function() { + var shower = $('#' + this.id + '_show'); + var sel = shower.attr('data-curopt'); + // Check if there's an icon here + if(!shower.children('svg, img').length) { + var clone = $(sel).children().clone(); + if(clone.length) { + clone[0].removeAttribute('style'); //Needed for Opera + shower.append(clone); + } + } + }); + + svgEditor.runCallbacks(); + + setTimeout(function() { + $('.flyout_arrow_horiz:empty').each(function() { + $(this).append($.getSvgIcon('arrow_right').width(5).height(5)); + }); + }, 1); + } + }); + + Editor.canvas = svgCanvas = new $.SvgCanvas(document.getElementById("svgcanvas"), curConfig); + Editor.show_save_warning = false; + var palette = ["#000000", "#3f3f3f", "#7f7f7f", "#bfbfbf", "#ffffff", + "#ff0000", "#ff7f00", "#ffff00", "#7fff00", + "#00ff00", "#00ff7f", "#00ffff", "#007fff", + "#0000ff", "#7f00ff", "#ff00ff", "#ff007f", + "#7f0000", "#7f3f00", "#7f7f00", "#3f7f00", + "#007f00", "#007f3f", "#007f7f", "#003f7f", + "#00007f", "#3f007f", "#7f007f", "#7f003f", + "#ffaaaa", "#ffd4aa", "#ffffaa", "#d4ffaa", + "#aaffaa", "#aaffd4", "#aaffff", "#aad4ff", + "#aaaaff", "#d4aaff", "#ffaaff", "#ffaad4" + ], + isMac = (navigator.platform.indexOf("Mac") >= 0), + isWebkit = (navigator.userAgent.indexOf("AppleWebKit") >= 0), + modKey = (isMac ? "meta+" : "ctrl+"), // ⌘ + path = svgCanvas.pathActions, + undoMgr = svgCanvas.undoMgr, + Utils = svgedit.utilities, + default_img_url = curConfig.imgPath + "logo.png", + workarea = $("#workarea"), + canv_menu = $("#cmenu_canvas"), + layer_menu = $("#cmenu_layers"), + exportWindow = null, + tool_scale = 1, + zoomInIcon = 'crosshair', + zoomOutIcon = 'crosshair', + ui_context = 'toolbars', + orig_source = '', + paintBox = {fill: null, stroke:null}; + + // This sets up alternative dialog boxes. They mostly work the same way as + // their UI counterparts, expect instead of returning the result, a callback + // needs to be included that returns the result as its first parameter. + // In the future we may want to add additional types of dialog boxes, since + // they should be easy to handle this way. + (function() { + $('#dialog_container').draggable({cancel:'#dialog_content, #dialog_buttons *', containment: 'window'}); + var box = $('#dialog_box'), btn_holder = $('#dialog_buttons'); + + var dbox = function(type, msg, callback, defText) { + $('#dialog_content').html('

    '+msg.replace(/\n/g,'

    ')+'

    ') + .toggleClass('prompt',(type=='prompt')); + btn_holder.empty(); + + var ok = $('').appendTo(btn_holder); + + if(type != 'alert') { + $('') + .appendTo(btn_holder) + .click(function() { box.hide();callback(false)}); + } + + if(type == 'prompt') { + var input = $('').prependTo(btn_holder); + input.val(defText || ''); + input.bind('keydown', 'return', function() {ok.click();}); + } + + if(type == 'process') { + ok.hide(); + } + + box.show(); + + ok.click(function() { + box.hide(); + var resp = (type == 'prompt')?input.val():true; + if(callback) callback(resp); + }).focus(); + + if(type == 'prompt') input.focus(); + } + + $.alert = function(msg, cb) { dbox('alert', msg, cb);}; + $.confirm = function(msg, cb) { dbox('confirm', msg, cb);}; + $.process_cancel = function(msg, cb) { dbox('process', msg, cb);}; + $.prompt = function(msg, txt, cb) { dbox('prompt', msg, cb, txt);}; + }()); + + var setSelectMode = function() { + var curr = $('.tool_button_current'); + if(curr.length && curr[0].id !== 'tool_select') { + curr.removeClass('tool_button_current').addClass('tool_button'); + $('#tool_select').addClass('tool_button_current').removeClass('tool_button'); + $('#styleoverrides').text('#svgcanvas svg *{cursor:move;pointer-events:all} #svgcanvas svg{cursor:default}'); + } + svgCanvas.setMode('select'); + workarea.css('cursor','auto'); + }; + + var togglePathEditMode = function(editmode, elems) { + $('#path_node_panel').toggle(editmode); + $('#tools_bottom_2,#tools_bottom_3').toggle(!editmode); + if(editmode) { + // Change select icon + $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); + $('#tool_select').addClass('tool_button_current').removeClass('tool_button'); + setIcon('#tool_select', 'select_node'); + multiselected = false; + if(elems.length) { + selectedElement = elems[0]; + } + } else { + setIcon('#tool_select', 'select'); + } + } + + // used to make the flyouts stay on the screen longer the very first time + var flyoutspeed = 1250; + var textBeingEntered = false; + var selectedElement = null; + var multiselected = false; + var editingsource = false; + var docprops = false; + var preferences = false; + var cur_context = ''; + var orig_title = $('title:first').text(); + + var saveHandler = function(window,svg) { + Editor.show_save_warning = false; + + // by default, we add the XML prolog back, systems integrating SVG-edit (wikis, CMSs) + // can just provide their own custom save handler and might not want the XML prolog + svg = '\n' + svg; + + // Opens the SVG in new window, with warning about Mozilla bug #308590 when applicable + + var ua = navigator.userAgent; + + // Chrome 5 (and 6?) don't allow saving, show source instead ( http://code.google.com/p/chromium/issues/detail?id=46735 ) + // IE9 doesn't allow standalone Data URLs ( https://connect.microsoft.com/IE/feedback/details/542600/data-uri-images-fail-when-loaded-by-themselves ) + if((~ua.indexOf('Chrome') && $.browser.version >= 533) || ~ua.indexOf('MSIE')) { + showSourceEditor(0,true); + return; + } + var win = window.open("data:image/svg+xml;base64," + Utils.encode64(svg)); + + // Alert will only appear the first time saved OR the first time the bug is encountered + var done = $.pref('save_notice_done'); + if(done !== "all") { + + var note = uiStrings.notification.saveFromBrowser.replace('%s', 'SVG'); + + // Check if FF and has + if(ua.indexOf('Gecko/') !== -1) { + if(svg.indexOf('', {id: 'export_canvas'}).hide().appendTo('body'); + } + var c = $('#export_canvas')[0]; + + c.width = svgCanvas.contentW; + c.height = svgCanvas.contentH; + canvg(c, data.svg, {renderCallback: function() { + var datauri = c.toDataURL('image/png'); + exportWindow.location.href = datauri; + var done = $.pref('export_notice_done'); + if(done !== "all") { + var note = uiStrings.notification.saveFromBrowser.replace('%s', 'PNG'); + + // Check if there's issues + if(issues.length) { + var pre = "\n \u2022 "; + note += ("\n\n" + uiStrings.notification.noteTheseIssues + pre + issues.join(pre)); + } + + // Note that this will also prevent the notice even though new issues may appear later. + // May want to find a way to deal with that without annoying the user + $.pref('export_notice_done', 'all'); + exportWindow.alert(note); + } + }}); + }; + + // called when we've selected a different element + var selectedChanged = function(window,elems) { + var mode = svgCanvas.getMode(); + if(mode === "select") setSelectMode(); + var is_node = (mode == "pathedit"); + // if elems[1] is present, then we have more than one element + selectedElement = (elems.length == 1 || elems[1] == null ? elems[0] : null); + multiselected = (elems.length >= 2 && elems[1] != null); + if (selectedElement != null) { + // unless we're already in always set the mode of the editor to select because + // upon creation of a text element the editor is switched into + // select mode and this event fires - we need our UI to be in sync + + if (!is_node) { + updateToolbar(); + } + + } // if (elem != null) + + // Deal with pathedit mode + togglePathEditMode(is_node, elems); + updateContextPanel(); + svgCanvas.runExtensions("selectedChanged", { + elems: elems, + selectedElement: selectedElement, + multiselected: multiselected + }); + }; + + // Call when part of element is in process of changing, generally + // on mousemove actions like rotate, move, etc. + var elementTransition = function(window,elems) { + var mode = svgCanvas.getMode(); + var elem = elems[0]; + + if(!elem) return; + + multiselected = (elems.length >= 2 && elems[1] != null); + // Only updating fields for single elements for now + if(!multiselected) { + switch ( mode ) { + case "rotate": + var ang = svgCanvas.getRotationAngle(elem); + $('#angle').val(ang); + $('#tool_reorient').toggleClass('disabled', ang == 0); + break; + + // TODO: Update values that change on move/resize, etc +// case "select": +// case "resize": +// break; + } + } + svgCanvas.runExtensions("elementTransition", { + elems: elems + }); + }; + + // called when any element has changed + var elementChanged = function(window,elems) { + var mode = svgCanvas.getMode(); + if(mode === "select") { + setSelectMode(); + } + + for (var i = 0; i < elems.length; ++i) { + var elem = elems[i]; + + // if the element changed was the svg, then it could be a resolution change + if (elem && elem.tagName === "svg") { + populateLayers(); + updateCanvas(); + } + // Update selectedElement if element is no longer part of the image. + // This occurs for the text elements in Firefox + else if(elem && selectedElement && selectedElement.parentNode == null) { +// || elem && elem.tagName == "path" && !multiselected) { // This was added in r1430, but not sure why + selectedElement = elem; + } + } + + Editor.show_save_warning = true; + + // we update the contextual panel with potentially new + // positional/sizing information (we DON'T want to update the + // toolbar here as that creates an infinite loop) + // also this updates the history buttons + + // we tell it to skip focusing the text control if the + // text element was previously in focus + updateContextPanel(); + + // In the event a gradient was flipped: + if(selectedElement && mode === "select") { + paintBox.fill.update(); + paintBox.stroke.update(); + } + + svgCanvas.runExtensions("elementChanged", { + elems: elems + }); + }; + + var zoomChanged = function(window, bbox, autoCenter) { + var scrbar = 15, + res = svgCanvas.getResolution(), + w_area = workarea, + canvas_pos = $('#svgcanvas').position(); + var z_info = svgCanvas.setBBoxZoom(bbox, w_area.width()-scrbar, w_area.height()-scrbar); + if(!z_info) return; + var zoomlevel = z_info.zoom, + bb = z_info.bbox; + + if(zoomlevel < .001) { + changeZoom({value: .1}); + return; + } + +// $('#zoom').val(Math.round(zoomlevel*100)); + $('#zoom').val(zoomlevel*100); + + if(autoCenter) { + updateCanvas(); + } else { + updateCanvas(false, {x: bb.x * zoomlevel + (bb.width * zoomlevel)/2, y: bb.y * zoomlevel + (bb.height * zoomlevel)/2}); + } + + if(svgCanvas.getMode() == 'zoom' && bb.width) { + // Go to select if a zoom box was drawn + setSelectMode(); + } + + zoomDone(); + } + + $('#cur_context_panel').delegate('a', 'click', function() { + var link = $(this); + if(link.attr('data-root')) { + svgCanvas.leaveContext(); + } else { + svgCanvas.setContext(link.text()); + } + return false; + }); + + var contextChanged = function(win, context) { + $('#workarea,#sidepanels').css('top', context?100:75); + $('#rulers').toggleClass('moved', context); + if(cur_context && !context) { + // Back to normal + workarea[0].scrollTop -= 25; + } else if(!cur_context && context) { + workarea[0].scrollTop += 25; + } + + var link_str = ''; + if(context) { + var str = ''; + link_str = '' + svgCanvas.getCurrentDrawing().getCurrentLayerName() + ''; + + $(context).parentsUntil('#svgcontent > g').andSelf().each(function() { + if(this.id) { + str += ' > ' + this.id; + if(this !== context) { + link_str += ' > ' + this.id + ''; + } else { + link_str += ' > ' + this.id; + } + } + }); + + cur_context = str; + } else { + cur_context = null; + } + $('#cur_context_panel').toggle(!!context).html(link_str); + + + updateTitle(); + } + + // Makes sure the current selected paint is available to work with + var prepPaints = function() { + paintBox.fill.prep(); + paintBox.stroke.prep(); + } + + var flyout_funcs = {}; + + var setupFlyouts = function(holders) { + $.each(holders, function(hold_sel, btn_opts) { + var buttons = $(hold_sel).children(); + var show_sel = hold_sel + '_show'; + var shower = $(show_sel); + var def = false; + buttons.addClass('tool_button') + .unbind('click mousedown mouseup') // may not be necessary + .each(function(i) { + // Get this buttons options + var opts = btn_opts[i]; + + // Remember the function that goes with this ID + flyout_funcs[opts.sel] = opts.fn; + + if(opts.isDefault) def = i; + + // Clicking the icon in flyout should set this set's icon + var func = function(event) { + var options = opts; + //find the currently selected tool if comes from keystroke + if (event.type === "keydown") { + var flyoutIsSelected = $(options.parent + "_show").hasClass('tool_button_current'); + var currentOperation = $(options.parent + "_show").attr("data-curopt"); + $.each(holders[opts.parent], function(i, tool){ + if (tool.sel == currentOperation) { + if(!event.shiftKey || !flyoutIsSelected) { + options = tool; + } + else { + options = holders[opts.parent][i+1] || holders[opts.parent][0]; + } + } + }); + } + if($(this).hasClass('disabled')) return false; + if (toolButtonClick(show_sel)) { + options.fn(); + } + if(options.icon) { + var icon = $.getSvgIcon(options.icon, true); + } else { + var icon = $(options.sel).children().eq(0).clone(); + } + + icon[0].setAttribute('width',shower.width()); + icon[0].setAttribute('height',shower.height()); + shower.children(':not(.flyout_arrow_horiz)').remove(); + shower.append(icon).attr('data-curopt', options.sel); // This sets the current mode + } + + $(this).mouseup(func); + + if(opts.key) { + $(document).bind('keydown', opts.key[0] + " shift+" + opts.key[0], func); + } + }); + + if(def) { + shower.attr('data-curopt', btn_opts[def].sel); + } else if(!shower.attr('data-curopt')) { + // Set first as default + shower.attr('data-curopt', btn_opts[0].sel); + } + + var timer; + + var pos = $(show_sel).position(); + $(hold_sel).css({'left': pos.left+34, 'top': pos.top+77}); + + // Clicking the "show" icon should set the current mode + shower.mousedown(function(evt) { + if(shower.hasClass('disabled')) return false; + var holder = $(hold_sel); + var l = pos.left+34; + var w = holder.width()*-1; + var time = holder.data('shown_popop')?200:0; + timer = setTimeout(function() { + // Show corresponding menu + if(!shower.data('isLibrary')) { + holder.css('left', w).show().animate({ + left: l + },150); + } else { + holder.css('left', l).show(); + } + holder.data('shown_popop',true); + },time); + evt.preventDefault(); + }).mouseup(function(evt) { + clearTimeout(timer); + var opt = $(this).attr('data-curopt'); + // Is library and popped up, so do nothing + if(shower.data('isLibrary') && $(show_sel.replace('_show','')).is(':visible')) { + toolButtonClick(show_sel, true); + return; + } + if (toolButtonClick(show_sel) && (opt in flyout_funcs)) { + flyout_funcs[opt](); + } + }); + + // $('#tools_rect').mouseleave(function(){$('#tools_rect').fadeOut();}); + }); + + setFlyoutTitles(); + } + + var makeFlyoutHolder = function(id, child) { + var div = $('
    ',{ + 'class': 'tools_flyout', + id: id + }).appendTo('#svg_editor').append(child); + + return div; + } + + var setFlyoutPositions = function() { + $('.tools_flyout').each(function() { + var shower = $('#' + this.id + '_show'); + var pos = shower.offset(); + var w = shower.outerWidth(); + $(this).css({left: (pos.left + w)*tool_scale, top: pos.top}); + }); + } + + var setFlyoutTitles = function() { + $('.tools_flyout').each(function() { + var shower = $('#' + this.id + '_show'); + if(shower.data('isLibrary')) return; + + var tooltips = []; + $(this).children().each(function() { + tooltips.push(this.title); + }); + shower[0].title = tooltips.join(' / '); + }); + } + + var resize_timer; + + var extAdded = function(window, ext) { + + var cb_called = false; + var resize_done = false; + var cb_ready = true; // Set to false to delay callback (e.g. wait for $.svgIcons) + + function prepResize() { + if(resize_timer) { + clearTimeout(resize_timer); + resize_timer = null; + } + if(!resize_done) { + resize_timer = setTimeout(function() { + resize_done = true; + setIconSize(curPrefs.iconsize); + }, 50); + } + } + + + var runCallback = function() { + if(ext.callback && !cb_called && cb_ready) { + cb_called = true; + ext.callback(); + } + } + + var btn_selects = []; + + if(ext.context_tools) { + $.each(ext.context_tools, function(i, tool) { + // Add select tool + var cont_id = tool.container_id?(' id="' + tool.container_id + '"'):""; + + var panel = $('#' + tool.panel); + + // create the panel if it doesn't exist + if(!panel.length) + panel = $('
    ', {id: tool.panel}).appendTo("#tools_top"); + + // TODO: Allow support for other types, or adding to existing tool + switch (tool.type) { + case 'tool_button': + var html = '
    ' + tool.id + '
    '; + var div = $(html).appendTo(panel); + if (tool.events) { + $.each(tool.events, function(evt, func) { + $(div).bind(evt, func); + }); + } + break; + case 'select': + var html = '' + + '"; + // Creates the tool, hides & adds it, returns the select element + var sel = $(html).appendTo(panel).find('select'); + + $.each(tool.events, function(evt, func) { + $(sel).bind(evt, func); + }); + break; + case 'button-select': + var html = ''; + + var list = $('
      ').appendTo('#option_lists'); + + if(tool.colnum) { + list.addClass('optcols' + tool.colnum); + } + + // Creates the tool, hides & adds it, returns the select element + var dropdown = $(html).appendTo(panel).children(); + + btn_selects.push({ + elem: ('#' + tool.id), + list: ('#' + tool.id + '_opts'), + title: tool.title, + callback: tool.events.change, + cur: ('#cur_' + tool.id) + }); + + break; + case 'input': + var html = '' + + '' + + tool.label + ':' + + '' + + // Creates the tool, hides & adds it, returns the select element + + // Add to given tool.panel + var inp = $(html).appendTo(panel).find('input'); + + if(tool.spindata) { + inp.SpinButton(tool.spindata); + } + + if(tool.events) { + $.each(tool.events, function(evt, func) { + inp.bind(evt, func); + }); + } + break; + + default: + break; + } + }); + } + + if(ext.buttons) { + var fallback_obj = {}, + placement_obj = {}, + svgicons = ext.svgicons; + var holders = {}; + + + // Add buttons given by extension + $.each(ext.buttons, function(i, btn) { + var icon; + var id = btn.id; + var num = i; + + // Give button a unique ID + while($('#'+id).length) { + id = btn.id + '_' + (++num); + } + + if(!svgicons) { + icon = $(''); + } else { + fallback_obj[id] = btn.icon; + var svgicon = btn.svgicon?btn.svgicon:btn.id; + if(btn.type == 'app_menu') { + placement_obj['#' + id + ' > div'] = svgicon; + } else { + placement_obj['#' + id] = svgicon; + } + } + + var cls, parent; + + // Set button up according to its type + switch ( btn.type ) { + case 'mode_flyout': + case 'mode': + cls = 'tool_button'; + parent = "#tools_left"; + break; + case 'context': + cls = 'tool_button'; + parent = "#" + btn.panel; + // create the panel if it doesn't exist + if(!$(parent).length) + $('
      ', {id: btn.panel}).appendTo("#tools_top"); + break; + case 'app_menu': + cls = ''; + parent = '#main_menu ul'; + break; + } + + var button = $((btn.list || btn.type == 'app_menu')?'
    • ':'
      ') + .attr("id", id) + .attr("title", btn.title) + .addClass(cls); + if(!btn.includeWith && !btn.list) { + if("position" in btn) { + $(parent).children().eq(btn.position).before(button); + } else { + button.appendTo(parent); + } + + if(btn.type =='mode_flyout') { + // Add to flyout menu / make flyout menu + // var opts = btn.includeWith; + // // opts.button, default, position + var ref_btn = $(button); + + var flyout_holder = ref_btn.parent(); + // Create a flyout menu if there isn't one already + if(!ref_btn.parent().hasClass('tools_flyout')) { + // Create flyout placeholder + var tls_id = ref_btn[0].id.replace('tool_','tools_') + var show_btn = ref_btn.clone() + .attr('id',tls_id + '_show') + .append($('
      ',{'class':'flyout_arrow_horiz'})); + + ref_btn.before(show_btn); + + // Create a flyout div + flyout_holder = makeFlyoutHolder(tls_id, ref_btn); + flyout_holder.data('isLibrary', true); + show_btn.data('isLibrary', true); + } + + + + // var ref_data = Actions.getButtonData(opts.button); + + placement_obj['#' + tls_id + '_show'] = btn.id; + // TODO: Find way to set the current icon using the iconloader if this is not default + + // Include data for extension button as well as ref button + var cur_h = holders['#'+flyout_holder[0].id] = [{ + sel: '#'+id, + fn: btn.events.click, + icon: btn.id, +// key: btn.key, + isDefault: true + }, ref_data]; + // + // // {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'} + // + // var pos = ("position" in opts)?opts.position:'last'; + // var len = flyout_holder.children().length; + // + // // Add at given position or end + // if(!isNaN(pos) && pos >= 0 && pos < len) { + // flyout_holder.children().eq(pos).before(button); + // } else { + // flyout_holder.append(button); + // cur_h.reverse(); + // } + } else if(btn.type == 'app_menu') { + button.append('
      ').append(btn.title); + } + + } else if(btn.list) { + // Add button to list + button.addClass('push_button'); + $('#' + btn.list + '_opts').append(button); + if(btn.isDefault) { + $('#cur_' + btn.list).append(button.children().clone()); + var svgicon = btn.svgicon?btn.svgicon:btn.id; + placement_obj['#cur_' + btn.list] = svgicon; + } + } else if(btn.includeWith) { + // Add to flyout menu / make flyout menu + var opts = btn.includeWith; + // opts.button, default, position + var ref_btn = $(opts.button); + + var flyout_holder = ref_btn.parent(); + // Create a flyout menu if there isn't one already + if(!ref_btn.parent().hasClass('tools_flyout')) { + // Create flyout placeholder + var tls_id = ref_btn[0].id.replace('tool_','tools_') + var show_btn = ref_btn.clone() + .attr('id',tls_id + '_show') + .append($('
      ',{'class':'flyout_arrow_horiz'})); + + ref_btn.before(show_btn); + + // Create a flyout div + flyout_holder = makeFlyoutHolder(tls_id, ref_btn); + } + + var ref_data = Actions.getButtonData(opts.button); + + if(opts.isDefault) { + placement_obj['#' + tls_id + '_show'] = btn.id; + } + // TODO: Find way to set the current icon using the iconloader if this is not default + + // Include data for extension button as well as ref button + var cur_h = holders['#'+flyout_holder[0].id] = [{ + sel: '#'+id, + fn: btn.events.click, + icon: btn.id, + key: btn.key, + isDefault: btn.includeWith?btn.includeWith.isDefault:0 + }, ref_data]; + + // {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'} + + var pos = ("position" in opts)?opts.position:'last'; + var len = flyout_holder.children().length; + + // Add at given position or end + if(!isNaN(pos) && pos >= 0 && pos < len) { + flyout_holder.children().eq(pos).before(button); + } else { + flyout_holder.append(button); + cur_h.reverse(); + } + } + + if(!svgicons) { + button.append(icon); + } + + if(!btn.list) { + // Add given events to button + $.each(btn.events, function(name, func) { + if(name == "click") { + if(btn.type == 'mode') { + if(btn.includeWith) { + button.bind(name, func); + } else { + button.bind(name, function() { + if(toolButtonClick(button)) { + func(); + } + }); + } + if(btn.key) { + $(document).bind('keydown', btn.key, func); + if(btn.title) button.attr("title", btn.title + ' ['+btn.key+']'); + } + } else { + button.bind(name, func); + } + } else { + button.bind(name, func); + } + }); + } + + setupFlyouts(holders); + }); + + $.each(btn_selects, function() { + addAltDropDown(this.elem, this.list, this.callback, {seticon: true}); + }); + + if (svgicons) + cb_ready = false; // Delay callback + + $.svgIcons(svgicons, { + w:24, h:24, + id_match: false, + no_img: (!isWebkit), + fallback: fallback_obj, + placement: placement_obj, + callback: function(icons) { + // Non-ideal hack to make the icon match the current size + if(curPrefs.iconsize && curPrefs.iconsize != 'm') { + prepResize(); + } + cb_ready = true; // Ready for callback + runCallback(); + } + + }); + } + + runCallback(); + }; + + var getPaint = function(color, opac, type) { + // update the editor's fill paint + var opts = null; + if (color.indexOf("url(#") === 0) { + var refElem = svgCanvas.getRefElem(color); + if(refElem) { + refElem = refElem.cloneNode(true); + } else { + refElem = $("#" + type + "_color defs *")[0]; + } + + opts = { alpha: opac }; + opts[refElem.tagName] = refElem; + } + else if (color.indexOf("#") === 0) { + opts = { + alpha: opac, + solidColor: color.substr(1) + }; + } + else { + opts = { + alpha: opac, + solidColor: 'none' + }; + } + return new $.jGraduate.Paint(opts); + }; + + + // updates the toolbar (colors, opacity, etc) based on the selected element + // This function also updates the opacity and id elements that are in the context panel + var updateToolbar = function() { + if (selectedElement != null) { + + switch ( selectedElement.tagName ) { + case 'use': + case 'image': + case 'foreignObject': + break; + case 'g': + case 'a': + // Look for common styles + + var gWidth = null; + + var childs = selectedElement.getElementsByTagName('*'); + for(var i = 0, len = childs.length; i < len; i++) { + var swidth = childs[i].getAttribute("stroke-width"); + + if(i === 0) { + gWidth = swidth; + } else if(gWidth !== swidth) { + gWidth = null; + } + } + + $('#stroke_width').val(gWidth === null ? "" : gWidth); + + paintBox.fill.update(true); + paintBox.stroke.update(true); + + + break; + default: + paintBox.fill.update(true); + paintBox.stroke.update(true); + + $('#stroke_width').val(selectedElement.getAttribute("stroke-width") || 1); + $('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none"); + + var attr = selectedElement.getAttribute("stroke-linejoin") || 'miter'; + + if ($('#linejoin_' + attr).length != 0) + setStrokeOpt($('#linejoin_' + attr)[0]); + + attr = selectedElement.getAttribute("stroke-linecap") || 'butt'; + + if ($('#linecap_' + attr).length != 0) + setStrokeOpt($('#linecap_' + attr)[0]); + } + + } + + // All elements including image and group have opacity + if(selectedElement != null) { + var opac_perc = ((selectedElement.getAttribute("opacity")||1.0)*100); + $('#group_opacity').val(opac_perc); + $('#opac_slider').slider('option', 'value', opac_perc); + $('#elem_id').val(selectedElement.id); + } + + updateToolButtonState(); + }; + + var setImageURL = Editor.setImageURL = function(url) { + if(!url) url = default_img_url; + + svgCanvas.setImageURL(url); + $('#image_url').val(url); + + if(url.indexOf('data:') === 0) { + // data URI found + $('#image_url').hide(); + $('#change_image_url').show(); + } else { + // regular URL + + svgCanvas.embedImage(url, function(datauri) { + if(!datauri) { + // Couldn't embed, so show warning + $('#url_notice').show(); + } else { + $('#url_notice').hide(); + } + default_img_url = url; + }); + $('#image_url').show(); + $('#change_image_url').hide(); + } + } + + var setInputWidth = function(elem) { + var w = Math.min(Math.max(12 + elem.value.length * 6, 50), 300); + $(elem).width(w); + } + + // updates the context panel tools based on the selected element + var updateContextPanel = function() { + var elem = selectedElement; + // If element has just been deleted, consider it null + if(elem != null && !elem.parentNode) elem = null; + var currentLayerName = svgCanvas.getCurrentDrawing().getCurrentLayerName(); + var currentMode = svgCanvas.getMode(); + var unit = curConfig.baseUnit !== 'px' ? curConfig.baseUnit : null; + + var is_node = currentMode == 'pathedit'; //elem ? (elem.id && elem.id.indexOf('pathpointgrip') == 0) : false; + var menu_items = $('#cmenu_canvas li'); + $('#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel,\ + #ellipse_panel, #line_panel, #text_panel, #image_panel, #container_panel, #use_panel, #a_panel').hide(); + if (elem != null) { + var elname = elem.nodeName; + + // If this is a link with no transform and one child, pretend + // its child is selected +// console.log('go', elem) +// if(elname === 'a') { // && !$(elem).attr('transform')) { +// elem = elem.firstChild; +// } + + var angle = svgCanvas.getRotationAngle(elem); + $('#angle').val(angle); + + var blurval = svgCanvas.getBlur(elem); + $('#blur').val(blurval); + $('#blur_slider').slider('option', 'value', blurval); + + if(svgCanvas.addedNew) { + if(elname === 'image') { + // Prompt for URL if not a data URL + if(svgCanvas.getHref(elem).indexOf('data:') !== 0) { + promptImgURL(); + } + } /*else if(elname == 'text') { + // TODO: Do something here for new text + }*/ + } + + if(!is_node && currentMode != 'pathedit') { + $('#selected_panel').show(); + // Elements in this array already have coord fields + if(['line', 'circle', 'ellipse'].indexOf(elname) >= 0) { + $('#xy_panel').hide(); + } else { + var x,y; + + // Get BBox vals for g, polyline and path + if(['g', 'polyline', 'path'].indexOf(elname) >= 0) { + var bb = svgCanvas.getStrokedBBox([elem]); + if(bb) { + x = bb.x; + y = bb.y; + } + } else { + x = elem.getAttribute('x'); + y = elem.getAttribute('y'); + } + + if(unit) { + x = svgedit.units.convertUnit(x); + y = svgedit.units.convertUnit(y); + } + + $('#selected_x').val(x || 0); + $('#selected_y').val(y || 0); + $('#xy_panel').show(); + } + + // Elements in this array cannot be converted to a path + var no_path = ['image', 'text', 'path', 'g', 'use'].indexOf(elname) == -1; + $('#tool_topath').toggle(no_path); + $('#tool_reorient').toggle(elname == 'path'); + $('#tool_reorient').toggleClass('disabled', angle == 0); + } else { + var point = path.getNodePoint(); + $('#tool_add_subpath').removeClass('push_button_pressed').addClass('tool_button'); + $('#tool_node_delete').toggleClass('disabled', !path.canDeleteNodes); + + // Show open/close button based on selected point + setIcon('#tool_openclose_path', path.closed_subpath ? 'open_path' : 'close_path'); + + if(point) { + var seg_type = $('#seg_type'); + if(unit) { + point.x = svgedit.units.convertUnit(point.x); + point.y = svgedit.units.convertUnit(point.y); + } + $('#path_node_x').val(point.x); + $('#path_node_y').val(point.y); + if(point.type) { + seg_type.val(point.type).removeAttr('disabled'); + } else { + seg_type.val(4).attr('disabled','disabled'); + } + } + return; + } + + // update contextual tools here + var panels = { + g: [], + a: [], + rect: ['rx','width','height'], + image: ['width','height'], + circle: ['cx','cy','r'], + ellipse: ['cx','cy','rx','ry'], + line: ['x1','y1','x2','y2'], + text: [], + 'use': [] + }; + + var el_name = elem.tagName; + +// if($(elem).data('gsvg')) { +// $('#g_panel').show(); +// } + + var link_href = null; + if (el_name === 'a') { + link_href = svgCanvas.getHref(elem); + $('#g_panel').show(); + } + + if(elem.parentNode.tagName === 'a') { + if(!$(elem).siblings().length) { + $('#a_panel').show(); + link_href = svgCanvas.getHref(elem.parentNode); + } + } + + // Hide/show the make_link buttons + $('#tool_make_link, #tool_make_link').toggle(!link_href); + + if(link_href) { + $('#link_url').val(link_href); + } + + if(panels[el_name]) { + var cur_panel = panels[el_name]; + + $('#' + el_name + '_panel').show(); + + $.each(cur_panel, function(i, item) { + var attrVal = elem.getAttribute(item); + if(curConfig.baseUnit !== 'px' && elem[item]) { + var bv = elem[item].baseVal.value; + attrVal = svgedit.units.convertUnit(bv); + } + + $('#' + el_name + '_' + item).val(attrVal || 0); + }); + + if(el_name == 'text') { + $('#text_panel').css("display", "inline"); + if (svgCanvas.getItalic()) { + $('#tool_italic').addClass('push_button_pressed').removeClass('tool_button'); + } + else { + $('#tool_italic').removeClass('push_button_pressed').addClass('tool_button'); + } + if (svgCanvas.getBold()) { + $('#tool_bold').addClass('push_button_pressed').removeClass('tool_button'); + } + else { + $('#tool_bold').removeClass('push_button_pressed').addClass('tool_button'); + } + $('#font_family').val(elem.getAttribute("font-family")); + $('#font_size').val(elem.getAttribute("font-size")); + $('#text').val(elem.textContent); + if (svgCanvas.addedNew) { + // Timeout needed for IE9 + setTimeout(function() { + $('#text').focus().select(); + },100); + } + } // text + else if(el_name == 'image') { + setImageURL(svgCanvas.getHref(elem)); + } // image + else if(el_name === 'g' || el_name === 'use') { + $('#container_panel').show(); + var title = svgCanvas.getTitle(); + var label = $('#g_title')[0]; + label.value = title; + setInputWidth(label); + var d = 'disabled'; + if(el_name == 'use') { + label.setAttribute(d, d); + } else { + label.removeAttribute(d); + } + } + } + menu_items[(el_name === 'g' ? 'en':'dis') + 'ableContextMenuItems']('#ungroup'); + menu_items[((el_name === 'g' || !multiselected) ? 'dis':'en') + 'ableContextMenuItems']('#group'); + } // if (elem != null) + else if (multiselected) { + $('#multiselected_panel').show(); + menu_items + .enableContextMenuItems('#group') + .disableContextMenuItems('#ungroup'); + } else { + menu_items.disableContextMenuItems('#delete,#cut,#copy,#group,#ungroup,#move_front,#move_up,#move_down,#move_back'); + } + + // update history buttons + if (undoMgr.getUndoStackSize() > 0) { + $('#tool_undo').removeClass( 'disabled'); + } + else { + $('#tool_undo').addClass( 'disabled'); + } + if (undoMgr.getRedoStackSize() > 0) { + $('#tool_redo').removeClass( 'disabled'); + } + else { + $('#tool_redo').addClass( 'disabled'); + } + + svgCanvas.addedNew = false; + + if ( (elem && !is_node) || multiselected) { + // update the selected elements' layer + $('#selLayerNames').removeAttr('disabled').val(currentLayerName); + + // Enable regular menu options + canv_menu.enableContextMenuItems('#delete,#cut,#copy,#move_front,#move_up,#move_down,#move_back'); + } + else { + $('#selLayerNames').attr('disabled', 'disabled'); + } + }; + + $('#text').focus( function(){ textBeingEntered = true; } ); + $('#text').blur( function(){ textBeingEntered = false; } ); + + // bind the selected event to our function that handles updates to the UI + svgCanvas.bind("selected", selectedChanged); + svgCanvas.bind("transition", elementTransition); + svgCanvas.bind("changed", elementChanged); + svgCanvas.bind("saved", saveHandler); + svgCanvas.bind("exported", exportHandler); + svgCanvas.bind("zoomed", zoomChanged); + svgCanvas.bind("contextset", contextChanged); + svgCanvas.bind("extension_added", extAdded); + svgCanvas.textActions.setInputElem($("#text")[0]); + + var str = '
      ' + $.each(palette, function(i,item){ + str += '
      '; + }); + $('#palette').append(str); + + // Set up editor background functionality + // TODO add checkerboard as "pattern" + var color_blocks = ['#FFF','#888','#000']; // ,'url(data:image/gif;base64,R0lGODlhEAAQAIAAAP%2F%2F%2F9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjG%2Bgq4jM3IFLJgpswNly%2FXkcBpIiVaInlLJr9FZWAQA7)']; + var str = ''; + $.each(color_blocks, function() { + str += '
      '; + }); + $('#bg_blocks').append(str); + var blocks = $('#bg_blocks div'); + var cur_bg = 'cur_background'; + blocks.each(function() { + var blk = $(this); + blk.click(function() { + blocks.removeClass(cur_bg); + $(this).addClass(cur_bg); + }); + }); + + if($.pref('bkgd_color')) { + setBackground($.pref('bkgd_color'), $.pref('bkgd_url')); + } else if($.pref('bkgd_url')) { + // No color set, only URL + setBackground(defaultPrefs.bkgd_color, $.pref('bkgd_url')); + } + + if($.pref('img_save')) { + curPrefs.img_save = $.pref('img_save'); + $('#image_save_opts input').val([curPrefs.img_save]); + } + + var changeRectRadius = function(ctl) { + svgCanvas.setRectRadius(ctl.value); + } + + var changeFontSize = function(ctl) { + svgCanvas.setFontSize(ctl.value); + } + + var changeStrokeWidth = function(ctl) { + var val = ctl.value; + if(val == 0 && selectedElement && ['line', 'polyline'].indexOf(selectedElement.nodeName) >= 0) { + val = ctl.value = 1; + } + svgCanvas.setStrokeWidth(val); + } + + var changeRotationAngle = function(ctl) { + svgCanvas.setRotationAngle(ctl.value); + $('#tool_reorient').toggleClass('disabled', ctl.value == 0); + } + var changeZoom = function(ctl) { + var zoomlevel = ctl.value / 100; + if(zoomlevel < .001) { + ctl.value = .1; + return; + } + var zoom = svgCanvas.getZoom(); + var w_area = workarea; + + zoomChanged(window, { + width: 0, + height: 0, + // center pt of scroll position + x: (w_area[0].scrollLeft + w_area.width()/2)/zoom, + y: (w_area[0].scrollTop + w_area.height()/2)/zoom, + zoom: zoomlevel + }, true); + } + + var changeOpacity = function(ctl, val) { + if(val == null) val = ctl.value; + $('#group_opacity').val(val); + if(!ctl || !ctl.handle) { + $('#opac_slider').slider('option', 'value', val); + } + svgCanvas.setOpacity(val/100); + } + + var changeBlur = function(ctl, val, noUndo) { + if(val == null) val = ctl.value; + $('#blur').val(val); + var complete = false; + if(!ctl || !ctl.handle) { + $('#blur_slider').slider('option', 'value', val); + complete = true; + } + if(noUndo) { + svgCanvas.setBlurNoUndo(val); + } else { + svgCanvas.setBlur(val, complete); + } + } + + var operaRepaint = function() { + // Repaints canvas in Opera. Needed for stroke-dasharray change as well as fill change + if(!window.opera) return; + $('

      ').hide().appendTo('body').remove(); + } + + $('#stroke_style').change(function(){ + svgCanvas.setStrokeAttr('stroke-dasharray', $(this).val()); + operaRepaint(); + }); + + $('#stroke_linejoin').change(function(){ + svgCanvas.setStrokeAttr('stroke-linejoin', $(this).val()); + operaRepaint(); + }); + + + // Lose focus for select elements when changed (Allows keyboard shortcuts to work better) + $('select').change(function(){$(this).blur();}); + + // fired when user wants to move elements to another layer + var promptMoveLayerOnce = false; + $('#selLayerNames').change(function(){ + var destLayer = this.options[this.selectedIndex].value; + var confirm_str = uiStrings.notification.QmoveElemsToLayer.replace('%s',destLayer); + var moveToLayer = function(ok) { + if(!ok) return; + promptMoveLayerOnce = true; + svgCanvas.moveSelectedToLayer(destLayer); + svgCanvas.clearSelection(); + populateLayers(); + } + if (destLayer) { + if(promptMoveLayerOnce) { + moveToLayer(true); + } else { + $.confirm(confirm_str, moveToLayer); + } + } + }); + + $('#font_family').change(function() { + svgCanvas.setFontFamily(this.value); + }); + + $('#seg_type').change(function() { + svgCanvas.setSegType($(this).val()); + }); + + $('#text').keyup(function(){ + svgCanvas.setTextContent(this.value); + }); + + $('#image_url').change(function(){ + setImageURL(this.value); + }); + + $('#link_url').change(function() { + if(this.value.length) { + svgCanvas.setLinkURL(this.value); + } else { + svgCanvas.removeHyperlink(); + } + }); + + $('#g_title').change(function() { + svgCanvas.setGroupTitle(this.value); + }); + + $('.attr_changer').change(function() { + var attr = this.getAttribute("data-attr"); + var val = this.value; + var valid = svgedit.units.isValidUnit(attr, val); + + if(!valid) { + $.alert(uiStrings.notification.invalidAttrValGiven); + this.value = selectedElement.getAttribute(attr); + return false; + } + + if (attr !== "id") { + if (isNaN(val)) { + val = svgCanvas.convertToNum(attr, val); + } else if(curConfig.baseUnit !== 'px') { + // Convert unitless value to one with given unit + + var unitData = svgedit.units.getTypeMap(); + + if(selectedElement[attr] || svgCanvas.getMode() === "pathedit" || attr === "x" || attr === "y") { + val *= unitData[curConfig.baseUnit]; + } + } + } + + // if the user is changing the id, then de-select the element first + // change the ID, then re-select it with the new ID + if (attr === "id") { + var elem = selectedElement; + svgCanvas.clearSelection(); + elem.id = val; + svgCanvas.addToSelection([elem],true); + } + else { + svgCanvas.changeSelectedAttribute(attr, val); + } + }); + + // Prevent selection of elements when shift-clicking + $('#palette').mouseover(function() { + var inp = $(''); + $(this).append(inp); + inp.focus().remove(); + }) + + $('.palette_item').mousedown(function(evt){ + var right_click = evt.button === 2; + var isStroke = evt.shiftKey || right_click; + var picker = isStroke ? "stroke" : "fill"; + var color = $(this).attr('data-rgb'); + var paint = null; + + // Webkit-based browsers returned 'initial' here for no stroke + if (color === 'transparent' || color === 'initial') { + color = 'none'; + paint = new $.jGraduate.Paint(); + } + else { + paint = new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)}); + } + + paintBox[picker].setPaint(paint); + + if (isStroke) { + svgCanvas.setColor('stroke', color); + if (color != 'none' && svgCanvas.getStrokeOpacity() != 1) { + svgCanvas.setPaintOpacity('stroke', 1.0); + } + } else { + svgCanvas.setColor('fill', color); + if (color != 'none' && svgCanvas.getFillOpacity() != 1) { + svgCanvas.setPaintOpacity('fill', 1.0); + } + } + updateToolButtonState(); + }).bind('contextmenu', function(e) {e.preventDefault()}); + + $("#toggle_stroke_tools").toggle(function() { + $(".stroke_tool").css('display','table-cell'); + $(this).text('<<'); + resetScrollPos(); + }, function() { + $(".stroke_tool").css('display','none'); + $(this).text('>>'); + resetScrollPos(); + }); + + // This is a common function used when a tool has been clicked (chosen) + // It does several common things: + // - removes the tool_button_current class from whatever tool currently has it + // - hides any flyouts + // - adds the tool_button_current class to the button passed in + var toolButtonClick = function(button, noHiding) { + if ($(button).hasClass('disabled')) return false; + if($(button).parent().hasClass('tools_flyout')) return true; + var fadeFlyouts = fadeFlyouts || 'normal'; + if(!noHiding) { + $('.tools_flyout').fadeOut(fadeFlyouts); + } + $('#styleoverrides').text(''); + workarea.css('cursor','auto'); + $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); + $(button).addClass('tool_button_current').removeClass('tool_button'); + return true; + }; + + (function() { + var last_x = null, last_y = null, w_area = workarea[0], + panning = false, keypan = false; + + $('#svgcanvas').bind('mousemove mouseup', function(evt) { + if(panning === false) return; + + w_area.scrollLeft -= (evt.clientX - last_x); + w_area.scrollTop -= (evt.clientY - last_y); + + last_x = evt.clientX; + last_y = evt.clientY; + + if(evt.type === 'mouseup') panning = false; + return false; + }).mousedown(function(evt) { + if(evt.button === 1 || keypan === true) { + panning = true; + last_x = evt.clientX; + last_y = evt.clientY; + return false; + } + }); + + $(window).mouseup(function() { + panning = false; + }); + + $(document).bind('keydown', 'space', function(evt) { + svgCanvas.spaceKey = keypan = true; + evt.preventDefault(); + }).bind('keyup', 'space', function(evt) { + evt.preventDefault(); + svgCanvas.spaceKey = keypan = false; + }).bind('keydown', 'shift', function(evt) { + if(svgCanvas.getMode() === 'zoom') { + workarea.css('cursor', zoomOutIcon); + } + }).bind('keyup', 'shift', function(evt) { + if(svgCanvas.getMode() === 'zoom') { + workarea.css('cursor', zoomInIcon); + } + }) + }()); + + + function setStrokeOpt(opt, changeElem) { + var id = opt.id; + var bits = id.split('_'); + var pre = bits[0]; + var val = bits[1]; + + if(changeElem) { + svgCanvas.setStrokeAttr('stroke-' + pre, val); + } + operaRepaint(); + setIcon('#cur_' + pre , id, 20); + $(opt).addClass('current').siblings().removeClass('current'); + } + + (function() { + var button = $('#main_icon'); + var overlay = $('#main_icon span'); + var list = $('#main_menu'); + var on_button = false; + var height = 0; + var js_hover = true; + var set_click = false; + + var hideMenu = function() { + list.fadeOut(200); + }; + + $(window).mouseup(function(evt) { + if(!on_button) { + button.removeClass('buttondown'); + // do not hide if it was the file input as that input needs to be visible + // for its change event to fire + if (evt.target.tagName != "INPUT") { + list.fadeOut(200); + } else if(!set_click) { + set_click = true; + $(evt.target).click(function() { + list.css('margin-left','-9999px').show(); + }); + } + } + on_button = false; + }).mousedown(function(evt) { +// $(".contextMenu").hide(); +// console.log('cm', $(evt.target).closest('.contextMenu')); + + var islib = $(evt.target).closest('div.tools_flyout, .contextMenu').length; + if(!islib) $('.tools_flyout:visible,.contextMenu').fadeOut(250); + }); + + overlay.bind('mousedown',function() { + if (!button.hasClass('buttondown')) { + button.addClass('buttondown').removeClass('buttonup') + // Margin must be reset in case it was changed before; + list.css('margin-left',0).show(); + if(!height) { + height = list.height(); + } + // Using custom animation as slideDown has annoying "bounce effect" + list.css('height',0).animate({ + 'height': height + },200); + on_button = true; + return false; + } else { + button.removeClass('buttondown').addClass('buttonup'); + list.fadeOut(200); + } + }).hover(function() { + on_button = true; + }).mouseout(function() { + on_button = false; + }); + + var list_items = $('#main_menu li'); + + // Check if JS method of hovering needs to be used (Webkit bug) + list_items.mouseover(function() { + js_hover = ($(this).css('background-color') == 'rgba(0, 0, 0, 0)'); + + list_items.unbind('mouseover'); + if(js_hover) { + list_items.mouseover(function() { + this.style.backgroundColor = '#FFC'; + }).mouseout(function() { + this.style.backgroundColor = 'transparent'; + return true; + }); + } + }); + }()); + // Made public for UI customization. + // TODO: Group UI functions into a public svgEditor.ui interface. + Editor.addDropDown = function(elem, callback, dropUp) { + if ($(elem).length == 0) return; // Quit if called on non-existant element + var button = $(elem).find('button'); + + var list = $(elem).find('ul').attr('id', $(elem)[0].id + '-list'); + + if(!dropUp) { + // Move list to place where it can overflow container + $('#option_lists').append(list); + } + + var on_button = false; + if(dropUp) { + $(elem).addClass('dropup'); + } + + list.find('li').bind('mouseup', callback); + + $(window).mouseup(function(evt) { + if(!on_button) { + button.removeClass('down'); + list.hide(); + } + on_button = false; + }); + + button.bind('mousedown',function() { + if (!button.hasClass('down')) { + button.addClass('down'); + + if(!dropUp) { + var pos = $(elem).position(); + list.css({ + top: pos.top + 24, + left: pos.left - 10 + }); + } + list.show(); + + on_button = true; + } else { + button.removeClass('down'); + list.hide(); + } + }).hover(function() { + on_button = true; + }).mouseout(function() { + on_button = false; + }); + } + + // TODO: Combine this with addDropDown or find other way to optimize + var addAltDropDown = function(elem, list, callback, opts) { + var button = $(elem); + var list = $(list); + var on_button = false; + var dropUp = opts.dropUp; + if(dropUp) { + $(elem).addClass('dropup'); + } + list.find('li').bind('mouseup', function() { + if(opts.seticon) { + setIcon('#cur_' + button[0].id , $(this).children()); + $(this).addClass('current').siblings().removeClass('current'); + } + callback.apply(this, arguments); + + }); + + $(window).mouseup(function(evt) { + if(!on_button) { + button.removeClass('down'); + list.hide(); + list.css({top:0, left:0}); + } + on_button = false; + }); + + var height = list.height(); + $(elem).bind('mousedown',function() { + var off = $(elem).offset(); + if(dropUp) { + off.top -= list.height(); + off.left += 8; + } else { + off.top += $(elem).height(); + } + $(list).offset(off); + + if (!button.hasClass('down')) { + button.addClass('down'); + list.show(); + on_button = true; + return false; + } else { + button.removeClass('down'); + // CSS position must be reset for Webkit + list.hide(); + list.css({top:0, left:0}); + } + }).hover(function() { + on_button = true; + }).mouseout(function() { + on_button = false; + }); + + if(opts.multiclick) { + list.mousedown(function() { + on_button = true; + }); + } + } + + Editor.addDropDown('#font_family_dropdown', function() { + var fam = $(this).text(); + $('#font_family').val($(this).text()).change(); + }); + + Editor.addDropDown('#opacity_dropdown', function() { + if($(this).find('div').length) return; + var perc = parseInt($(this).text().split('%')[0]); + changeOpacity(false, perc); + }, true); + + // For slider usage, see: http://jqueryui.com/demos/slider/ + $("#opac_slider").slider({ + start: function() { + $('#opacity_dropdown li:not(.special)').hide(); + }, + stop: function() { + $('#opacity_dropdown li').show(); + $(window).mouseup(); + }, + slide: function(evt, ui){ + changeOpacity(ui); + } + }); + + Editor.addDropDown('#blur_dropdown', $.noop); + + var slideStart = false; + + $("#blur_slider").slider({ + max: 10, + step: .1, + stop: function(evt, ui) { + slideStart = false; + changeBlur(ui); + $('#blur_dropdown li').show(); + $(window).mouseup(); + }, + start: function() { + slideStart = true; + }, + slide: function(evt, ui){ + changeBlur(ui, null, slideStart); + } + }); + + + Editor.addDropDown('#zoom_dropdown', function() { + var item = $(this); + var val = item.attr('data-val'); + if(val) { + zoomChanged(window, val); + } else { + changeZoom({value:parseInt(item.text())}); + } + }, true); + + addAltDropDown('#stroke_linecap', '#linecap_opts', function() { + setStrokeOpt(this, true); + }, {dropUp: true}); + + addAltDropDown('#stroke_linejoin', '#linejoin_opts', function() { + setStrokeOpt(this, true); + }, {dropUp: true}); + + addAltDropDown('#tool_position', '#position_opts', function() { + var letter = this.id.replace('tool_pos','').charAt(0); + svgCanvas.alignSelectedElements(letter, 'page'); + }, {multiclick: true}); + + /* + + When a flyout icon is selected + (if flyout) { + - Change the icon + - Make pressing the button run its stuff + } + - Run its stuff + + When its shortcut key is pressed + - If not current in list, do as above + , else: + - Just run its stuff + + */ + + // Unfocus text input when workarea is mousedowned. + (function() { + var inp; + + var unfocus = function() { + $(inp).blur(); + } + + $('#svg_editor').find('button, select, input:not(#text)').focus(function() { + inp = this; + ui_context = 'toolbars'; + workarea.mousedown(unfocus); + }).blur(function() { + ui_context = 'canvas'; + workarea.unbind('mousedown', unfocus); + // Go back to selecting text if in textedit mode + if(svgCanvas.getMode() == 'textedit') { + $('#text').focus(); + } + }); + + }()); + + var clickSelect = function() { + if (toolButtonClick('#tool_select')) { + svgCanvas.setMode('select'); + $('#styleoverrides').text('#svgcanvas svg *{cursor:move;pointer-events:all}, #svgcanvas svg{cursor:default}'); + } + }; + + var clickFHPath = function() { + if (toolButtonClick('#tool_fhpath')) { + svgCanvas.setMode('fhpath'); + } + }; + + var clickLine = function() { + if (toolButtonClick('#tool_line')) { + svgCanvas.setMode('line'); + } + }; + + var clickSquare = function(){ + if (toolButtonClick('#tool_square')) { + svgCanvas.setMode('square'); + } + }; + + var clickRect = function(){ + if (toolButtonClick('#tool_rect')) { + svgCanvas.setMode('rect'); + } + }; + + var clickFHRect = function(){ + if (toolButtonClick('#tool_fhrect')) { + svgCanvas.setMode('fhrect'); + } + }; + + var clickCircle = function(){ + if (toolButtonClick('#tool_circle')) { + svgCanvas.setMode('circle'); + } + }; + + var clickEllipse = function(){ + if (toolButtonClick('#tool_ellipse')) { + svgCanvas.setMode('ellipse'); + } + }; + + var clickFHEllipse = function(){ + if (toolButtonClick('#tool_fhellipse')) { + svgCanvas.setMode('fhellipse'); + } + }; + + var clickImage = function(){ + if (toolButtonClick('#tool_image')) { + svgCanvas.setMode('image'); + } + }; + + var clickZoom = function(){ + if (toolButtonClick('#tool_zoom')) { + svgCanvas.setMode('zoom'); + workarea.css('cursor', zoomInIcon); + } + }; + + var dblclickZoom = function(){ + if (toolButtonClick('#tool_zoom')) { + zoomImage(); + setSelectMode(); + } + }; + + var clickText = function(){ + if (toolButtonClick('#tool_text')) { + svgCanvas.setMode('text'); + } + }; + + var clickPath = function(){ + if (toolButtonClick('#tool_path')) { + svgCanvas.setMode('path'); + } + }; + + // Delete is a contextual tool that only appears in the ribbon if + // an element has been selected + var deleteSelected = function() { + if (selectedElement != null || multiselected) { + svgCanvas.deleteSelectedElements(); + } + }; + + var cutSelected = function() { + if (selectedElement != null || multiselected) { + svgCanvas.cutSelectedElements(); + } + }; + + var copySelected = function() { + if (selectedElement != null || multiselected) { + svgCanvas.copySelectedElements(); + } + }; + + var pasteInCenter = function() { + var zoom = svgCanvas.getZoom(); + + var x = (workarea[0].scrollLeft + workarea.width()/2)/zoom - svgCanvas.contentW; + var y = (workarea[0].scrollTop + workarea.height()/2)/zoom - svgCanvas.contentH; + svgCanvas.pasteElements('point', x, y); + } + + var moveToTopSelected = function() { + if (selectedElement != null) { + svgCanvas.moveToTopSelectedElement(); + } + }; + + var moveToBottomSelected = function() { + if (selectedElement != null) { + svgCanvas.moveToBottomSelectedElement(); + } + }; + + var moveUpDownSelected = function(dir) { + if (selectedElement != null) { + svgCanvas.moveUpDownSelected(dir); + } + }; + + var convertToPath = function() { + if (selectedElement != null) { + svgCanvas.convertToPath(); + } + } + + var reorientPath = function() { + if (selectedElement != null) { + path.reorient(); + } + } + + var makeHyperlink = function() { + if (selectedElement != null || multiselected) { + $.prompt(uiStrings.notification.enterNewLinkURL, "http://", function(url) { + if(url) svgCanvas.makeHyperlink(url); + }); + } + } + + var moveSelected = function(dx,dy) { + if (selectedElement != null || multiselected) { + if(curConfig.gridSnapping) { + // Use grid snap value regardless of zoom level + var multi = svgCanvas.getZoom() * curConfig.snappingStep; + dx *= multi; + dy *= multi; + } + svgCanvas.moveSelectedElements(dx,dy); + } + }; + + var linkControlPoints = function() { + var linked = !$('#tool_node_link').hasClass('push_button_pressed'); + if (linked) + $('#tool_node_link').addClass('push_button_pressed').removeClass('tool_button'); + else + $('#tool_node_link').removeClass('push_button_pressed').addClass('tool_button'); + + path.linkControlPoints(linked); + } + + var clonePathNode = function() { + if (path.getNodePoint()) { + path.clonePathNode(); + } + }; + + var deletePathNode = function() { + if (path.getNodePoint()) { + path.deletePathNode(); + } + }; + + var addSubPath = function() { + var button = $('#tool_add_subpath'); + var sp = !button.hasClass('push_button_pressed'); + if (sp) { + button.addClass('push_button_pressed').removeClass('tool_button'); + } else { + button.removeClass('push_button_pressed').addClass('tool_button'); + } + + path.addSubPath(sp); + + }; + + var opencloseSubPath = function() { + path.opencloseSubPath(); + } + + var selectNext = function() { + svgCanvas.cycleElement(1); + }; + + var selectPrev = function() { + svgCanvas.cycleElement(0); + }; + + var rotateSelected = function(cw,step) { + if (selectedElement == null || multiselected) return; + if(!cw) step *= -1; + var new_angle = $('#angle').val()*1 + step; + svgCanvas.setRotationAngle(new_angle); + updateContextPanel(); + }; + + var clickClear = function(){ + var dims = curConfig.dimensions; + $.confirm(uiStrings.notification.QwantToClear, function(ok) { + if(!ok) return; + setSelectMode(); + svgCanvas.clear(); + svgCanvas.setResolution(dims[0], dims[1]); + updateCanvas(true); + zoomImage(); + populateLayers(); + updateContextPanel(); + prepPaints(); + svgCanvas.runExtensions('onNewDocument'); + }); + }; + + var clickBold = function(){ + svgCanvas.setBold( !svgCanvas.getBold() ); + updateContextPanel(); + return false; + }; + + var clickItalic = function(){ + svgCanvas.setItalic( !svgCanvas.getItalic() ); + updateContextPanel(); + return false; + }; + + var clickSave = function(){ + // In the future, more options can be provided here + var saveOpts = { + 'images': curPrefs.img_save, + 'round_digits': 6 + } + svgCanvas.save(saveOpts); + }; + + var clickExport = function() { + // Open placeholder window (prevents popup) + if(!customHandlers.pngsave) { + var str = uiStrings.notification.loadingImage; + exportWindow = window.open("data:text/html;charset=utf-8," + str + "<\/title><h1>" + str + "<\/h1>"); + } + + if(window.canvg) { + svgCanvas.rasterExport(); + } else { + $.getScript('canvg/rgbcolor.js', function() { + $.getScript('canvg/canvg.js', function() { + svgCanvas.rasterExport(); + }); + }); + } + } + + // by default, svgCanvas.open() is a no-op. + // it is up to an extension mechanism (opera widget, etc) + // to call setCustomHandlers() which will make it do something + var clickOpen = function(){ + svgCanvas.open(); + }; + var clickImport = function(){ + }; + + var clickUndo = function(){ + if (undoMgr.getUndoStackSize() > 0) { + undoMgr.undo(); + populateLayers(); + } + }; + + var clickRedo = function(){ + if (undoMgr.getRedoStackSize() > 0) { + undoMgr.redo(); + populateLayers(); + } + }; + + var clickGroup = function(){ + // group + if (multiselected) { + svgCanvas.groupSelectedElements(); + } + // ungroup + else if(selectedElement){ + svgCanvas.ungroupSelectedElement(); + } + }; + + var clickClone = function(){ + svgCanvas.cloneSelectedElements(20,20); + }; + + var clickAlign = function() { + var letter = this.id.replace('tool_align','').charAt(0); + svgCanvas.alignSelectedElements(letter, $('#align_relative_to').val()); + }; + + var zoomImage = function(multiplier) { + var res = svgCanvas.getResolution(); + multiplier = multiplier?res.zoom * multiplier:1; + // setResolution(res.w * multiplier, res.h * multiplier, true); + $('#zoom').val(multiplier * 100); + svgCanvas.setZoom(multiplier); + zoomDone(); + updateCanvas(true); + }; + + var zoomDone = function() { + // updateBgImage(); + updateWireFrame(); + //updateCanvas(); // necessary? + } + + var clickWireframe = function() { + var wf = !$('#tool_wireframe').hasClass('push_button_pressed'); + if (wf) + $('#tool_wireframe').addClass('push_button_pressed').removeClass('tool_button'); + else + $('#tool_wireframe').removeClass('push_button_pressed').addClass('tool_button'); + workarea.toggleClass('wireframe'); + + if(supportsNonSS) return; + var wf_rules = $('#wireframe_rules'); + if(!wf_rules.length) { + wf_rules = $('<style id="wireframe_rules"><\/style>').appendTo('head'); + } else { + wf_rules.empty(); + } + + updateWireFrame(); + } + + var updateWireFrame = function() { + // Test support + if(supportsNonSS) return; + + var rule = "#workarea.wireframe #svgcontent * { stroke-width: " + 1/svgCanvas.getZoom() + "px; }"; + $('#wireframe_rules').text(workarea.hasClass('wireframe') ? rule : ""); + } + + var showSourceEditor = function(e, forSaving){ + if (editingsource) return; + editingsource = true; + + $('#save_output_btns').toggle(!!forSaving); + $('#tool_source_back').toggle(!forSaving); + + var str = orig_source = svgCanvas.getSvgString(); + $('#svg_source_textarea').val(str); + $('#svg_source_editor').fadeIn(); + properlySourceSizeTextArea(); + $('#svg_source_textarea').focus(); + }; + + $('#svg_docprops_container, #svg_prefs_container').draggable({cancel:'button,fieldset', containment: 'window'}); + + var showDocProperties = function(){ + if (docprops) return; + docprops = true; + + // This selects the correct radio button by using the array notation + $('#image_save_opts input').val([curPrefs.img_save]); + + // update resolution option with actual resolution + var res = svgCanvas.getResolution(); + if(curConfig.baseUnit !== "px") { + res.w = svgedit.units.convertUnit(res.w) + curConfig.baseUnit; + res.h = svgedit.units.convertUnit(res.h) + curConfig.baseUnit; + } + + $('#canvas_width').val(res.w); + $('#canvas_height').val(res.h); + $('#canvas_title').val(svgCanvas.getDocumentTitle()); + + $('#svg_docprops').show(); + }; + + + var showPreferences = function(){ + if (preferences) return; + preferences = true; + $('#main_menu').hide(); + + // Update background color with current one + var blocks = $('#bg_blocks div'); + var cur_bg = 'cur_background'; + var canvas_bg = $.pref('bkgd_color'); + var url = $.pref('bkgd_url'); + // if(url) url = url[1]; + blocks.each(function() { + var blk = $(this); + var is_bg = blk.css('background-color') == canvas_bg; + blk.toggleClass(cur_bg, is_bg); + if(is_bg) $('#canvas_bg_url').removeClass(cur_bg); + }); + if(!canvas_bg) blocks.eq(0).addClass(cur_bg); + if(url) { + $('#canvas_bg_url').val(url); + } + $('grid_snapping_step').attr('value', curConfig.snappingStep); + if (curConfig.gridSnapping == true) { + $('#grid_snapping_on').attr('checked', 'checked'); + } else { + $('#grid_snapping_on').removeAttr('checked'); + } + + $('#svg_prefs').show(); + }; + + var properlySourceSizeTextArea = function(){ + // TODO: remove magic numbers here and get values from CSS + var height = $('#svg_source_container').height() - 80; + $('#svg_source_textarea').css('height', height); + }; + + var saveSourceEditor = function(){ + if (!editingsource) return; + + var saveChanges = function() { + svgCanvas.clearSelection(); + hideSourceEditor(); + zoomImage(); + populateLayers(); + updateTitle(); + prepPaints(); + } + + if (!svgCanvas.setSvgString($('#svg_source_textarea').val())) { + $.confirm(uiStrings.notification.QerrorsRevertToSource, function(ok) { + if(!ok) return false; + saveChanges(); + }); + } else { + saveChanges(); + } + setSelectMode(); + }; + + var updateTitle = function(title) { + title = title || svgCanvas.getDocumentTitle(); + var new_title = orig_title + (title?': ' + title:''); + + // Remove title update with current context info, isn't really necessary +// if(cur_context) { +// new_title = new_title + cur_context; +// } + $('title:first').text(new_title); + } + + var saveDocProperties = function(){ + // set title + var new_title = $('#canvas_title').val(); + updateTitle(new_title); + svgCanvas.setDocumentTitle(new_title); + + // update resolution + var width = $('#canvas_width'), w = width.val(); + var height = $('#canvas_height'), h = height.val(); + + if(w != "fit" && !svgedit.units.isValidUnit('width', w)) { + $.alert(uiStrings.notification.invalidAttrValGiven); + width.parent().addClass('error'); + return false; + } + + width.parent().removeClass('error'); + + if(h != "fit" && !svgedit.units.isValidUnit('height', h)) { + $.alert(uiStrings.notification.invalidAttrValGiven); + height.parent().addClass('error'); + return false; + } + + height.parent().removeClass('error'); + + if(!svgCanvas.setResolution(w, h)) { + $.alert(uiStrings.notification.noContentToFitTo); + return false; + } + + // set image save option + curPrefs.img_save = $('#image_save_opts :checked').val(); + $.pref('img_save',curPrefs.img_save); + updateCanvas(); + hideDocProperties(); + }; + + var savePreferences = function() { + // set background + var color = $('#bg_blocks div.cur_background').css('background-color') || '#FFF'; + setBackground(color, $('#canvas_bg_url').val()); + + // set language + var lang = $('#lang_select').val(); + if(lang != curPrefs.lang) { + Editor.putLocale(lang); + } + + // set icon size + setIconSize($('#iconsize').val()); + + // set grid setting + curConfig.gridSnapping = $('#grid_snapping_on')[0].checked; + curConfig.snappingStep = $('#grid_snapping_step').val(); + curConfig.showRulers = $('#show_rulers')[0].checked; + + $('#rulers').toggle(curConfig.showRulers); + if(curConfig.showRulers) updateRulers(); + curConfig.baseUnit = $('#base_unit').val(); + + svgCanvas.setConfig(curConfig); + + updateCanvas(); + hidePreferences(); + } + + function setBackground(color, url) { +// if(color == curPrefs.bkgd_color && url == curPrefs.bkgd_url) return; + $.pref('bkgd_color', color); + $.pref('bkgd_url', url); + + // This should be done in svgcanvas.js for the borderRect fill + svgCanvas.setBackground(color, url); + } + + var setIcon = Editor.setIcon = function(elem, icon_id, forcedSize) { + var icon = (typeof icon_id === 'string') ? $.getSvgIcon(icon_id, true) : icon_id.clone(); + if(!icon) { + console.log('NOTE: Icon image missing: ' + icon_id); + return; + } + + $(elem).empty().append(icon); + } + + var ua_prefix; + (ua_prefix = function() { + var regex = /^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/; + var someScript = document.getElementsByTagName('script')[0]; + for(var prop in someScript.style) { + if(regex.test(prop)) { + // test is faster than match, so it's better to perform + // that on the lot and match only when necessary + return prop.match(regex)[0]; + } + } + + // Nothing found so far? + if('WebkitOpacity' in someScript.style) return 'Webkit'; + if('KhtmlOpacity' in someScript.style) return 'Khtml'; + + return ''; + }()); + + var scaleElements = function(elems, scale) { + var prefix = '-' + ua_prefix.toLowerCase() + '-'; + + var sides = ['top', 'left', 'bottom', 'right']; + + elems.each(function() { +// console.log('go', scale); + + // Handled in CSS + // this.style[ua_prefix + 'Transform'] = 'scale(' + scale + ')'; + + var el = $(this); + + var w = el.outerWidth() * (scale - 1); + var h = el.outerHeight() * (scale - 1); + var margins = {}; + + for(var i = 0; i < 4; i++) { + var s = sides[i]; + + var cur = el.data('orig_margin-' + s); + if(cur == null) { + cur = parseInt(el.css('margin-' + s)); + // Cache the original margin + el.data('orig_margin-' + s, cur); + } + var val = cur * scale; + if(s === 'right') { + val += w; + } else if(s === 'bottom') { + val += h; + } + + el.css('margin-' + s, val); +// el.css('outline', '1px solid red'); + } + }); + } + + var setIconSize = Editor.setIconSize = function(size, force) { + if(size == curPrefs.size && !force) return; +// return; +// var elems = $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open'); + console.log('size', size); + + var sel_toscale = '#tools_top .toolset, #editor_panel > *, #history_panel > *,\ + #main_button, #tools_left > *, #path_node_panel > *, #multiselected_panel > *,\ + #g_panel > *, #tool_font_size > *, .tools_flyout'; + + var elems = $(sel_toscale); + + var scale = 1; + + if(typeof size == 'number') { + scale = size; + } else { + var icon_sizes = { s:.75, m:1, l:1.25, xl:1.5 }; + scale = icon_sizes[size]; + } + + Editor.tool_scale = tool_scale = scale; + + setFlyoutPositions(); + // $('.tools_flyout').each(function() { +// var pos = $(this).position(); +// console.log($(this), pos.left+(34 * scale)); +// $(this).css({'left': pos.left+(34 * scale), 'top': pos.top+(77 * scale)}); +// console.log('l', $(this).css('left')); +// }); + +// var scale = .75;//0.75; + + var hidden_ps = elems.parents(':hidden'); + hidden_ps.css('visibility', 'hidden').show(); + scaleElements(elems, scale); + hidden_ps.css('visibility', 'visible').hide(); +// console.timeEnd('elems'); +// return; + + $.pref('iconsize', size); + $('#iconsize').val(size); + + + // Change icon size +// $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open') +// .find('> svg, > img').each(function() { +// this.setAttribute('width',size_num); +// this.setAttribute('height',size_num); +// }); +// +// $.resizeSvgIcons({ +// '.flyout_arrow_horiz > svg, .flyout_arrow_horiz > img': size_num / 5, +// '#logo > svg, #logo > img': size_num * 1.3, +// '#tools_bottom .icon_label > *': (size_num === 16 ? 18 : size_num * .75) +// }); +// if(size != 's') { +// $.resizeSvgIcons({'#layerbuttons svg, #layerbuttons img': size_num * .6}); +// } + + // Note that all rules will be prefixed with '#svg_editor' when parsed + var cssResizeRules = { +// ".tool_button,\ +// .push_button,\ +// .tool_button_current,\ +// .push_button_pressed,\ +// .disabled,\ +// .icon_label,\ +// .tools_flyout .tool_button": { +// 'width': {s: '16px', l: '32px', xl: '48px'}, +// 'height': {s: '16px', l: '32px', xl: '48px'}, +// 'padding': {s: '1px', l: '2px', xl: '3px'} +// }, +// ".tool_sep": { +// 'height': {s: '16px', l: '32px', xl: '48px'}, +// 'margin': {s: '2px 2px', l: '2px 5px', xl: '2px 8px'} +// }, +// "#main_icon": { +// 'width': {s: '31px', l: '53px', xl: '75px'}, +// 'height': {s: '22px', l: '42px', xl: '64px'} +// }, + "#tools_top": { + 'left': 50, + 'height': 72 + }, + "#tools_left": { + 'width': 31, + 'top': 74 + }, + "div#workarea": { + 'left': 38, + 'top': 74 + } +// "#tools_bottom": { +// 'left': {s: '27px', l: '46px', xl: '65px'}, +// 'height': {s: '58px', l: '98px', xl: '145px'} +// }, +// "#color_tools": { +// 'border-spacing': {s: '0 1px'}, +// 'margin-top': {s: '-1px'} +// }, +// "#color_tools .icon_label": { +// 'width': {l:'43px', xl: '60px'} +// }, +// ".color_tool": { +// 'height': {s: '20px'} +// }, +// "#tool_opacity": { +// 'top': {s: '1px'}, +// 'height': {s: 'auto', l:'auto', xl:'auto'} +// }, +// "#tools_top input, #tools_bottom input": { +// 'margin-top': {s: '2px', l: '4px', xl: '5px'}, +// 'height': {s: 'auto', l: 'auto', xl: 'auto'}, +// 'border': {s: '1px solid #555', l: 'auto', xl: 'auto'}, +// 'font-size': {s: '.9em', l: '1.2em', xl: '1.4em'} +// }, +// "#zoom_panel": { +// 'margin-top': {s: '3px', l: '4px', xl: '5px'} +// }, +// "#copyright, #tools_bottom .label": { +// 'font-size': {l: '1.5em', xl: '2em'}, +// 'line-height': {s: '15px'} +// }, +// "#tools_bottom_2": { +// 'width': {l: '295px', xl: '355px'}, +// 'top': {s: '4px'} +// }, +// "#tools_top > div, #tools_top": { +// 'line-height': {s: '17px', l: '34px', xl: '50px'} +// }, +// ".dropdown button": { +// 'height': {s: '18px', l: '34px', xl: '40px'}, +// 'line-height': {s: '18px', l: '34px', xl: '40px'}, +// 'margin-top': {s: '3px'} +// }, +// "#tools_top label, #tools_bottom label": { +// 'font-size': {s: '1em', l: '1.5em', xl: '2em'}, +// 'height': {s: '25px', l: '42px', xl: '64px'} +// }, +// "div.toolset": { +// 'height': {s: '25px', l: '42px', xl: '64px'} +// }, +// "#tool_bold, #tool_italic": { +// 'font-size': {s: '1.5em', l: '3em', xl: '4.5em'} +// }, +// "#sidepanels": { +// 'top': {s: '50px', l: '88px', xl: '125px'}, +// 'bottom': {s: '51px', l: '68px', xl: '65px'} +// }, +// '#layerbuttons': { +// 'width': {l: '130px', xl: '175px'}, +// 'height': {l: '24px', xl: '30px'} +// }, +// '#layerlist': { +// 'width': {l: '128px', xl: '150px'} +// }, +// '.layer_button': { +// 'width': {l: '19px', xl: '28px'}, +// 'height': {l: '19px', xl: '28px'} +// }, +// "input.spin-button": { +// 'background-image': {l: "url('images/spinbtn_updn_big.png')", xl: "url('images/spinbtn_updn_big.png')"}, +// 'background-position': {l: '100% -5px', xl: '100% -2px'}, +// 'padding-right': {l: '24px', xl: '24px' } +// }, +// "input.spin-button.up": { +// 'background-position': {l: '100% -45px', xl: '100% -42px'} +// }, +// "input.spin-button.down": { +// 'background-position': {l: '100% -85px', xl: '100% -82px'} +// }, +// "#position_opts": { +// 'width': {all: (size_num*4) +'px'} +// } + }; + + var rule_elem = $('#tool_size_rules'); + if(!rule_elem.length) { + rule_elem = $('<style id="tool_size_rules"><\/style>').appendTo('head'); + } else { + rule_elem.empty(); + } + + if(size != 'm') { + var style_str = ''; + $.each(cssResizeRules, function(selector, rules) { + selector = '#svg_editor ' + selector.replace(/,/g,', #svg_editor'); + style_str += selector + '{'; + $.each(rules, function(prop, values) { + if(typeof values === 'number') { + var val = (values * scale) + 'px'; + } else if(values[size] || values.all) { + var val = (values[size] || values.all); + } + style_str += (prop + ':' + val + ';'); + }); + style_str += '}'; + }); + //this.style[ua_prefix + 'Transform'] = 'scale(' + scale + ')'; + var prefix = '-' + ua_prefix.toLowerCase() + '-'; + style_str += (sel_toscale + '{' + prefix + 'transform: scale(' + scale + ');}' + + ' #svg_editor div.toolset .toolset {' + prefix + 'transform: scale(1); margin: 1px !important;}' // Hack for markers + + ' #svg_editor .ui-slider {' + prefix + 'transform: scale(' + (1/scale) + ');}' // Hack for sliders + ); + rule_elem.text(style_str); + } + + setFlyoutPositions(); + } + + var cancelOverlays = function() { + $('#dialog_box').hide(); + if (!editingsource && !docprops && !preferences) { + if(cur_context) { + svgCanvas.leaveContext(); + } + return; + }; + + if (editingsource) { + if (orig_source !== $('#svg_source_textarea').val()) { + $.confirm(uiStrings.notification.QignoreSourceChanges, function(ok) { + if(ok) hideSourceEditor(); + }); + } else { + hideSourceEditor(); + } + } + else if (docprops) { + hideDocProperties(); + } else if (preferences) { + hidePreferences(); + } + resetScrollPos(); + }; + + var hideSourceEditor = function(){ + $('#svg_source_editor').hide(); + editingsource = false; + $('#svg_source_textarea').blur(); + }; + + var hideDocProperties = function(){ + $('#svg_docprops').hide(); + $('#canvas_width,#canvas_height').removeAttr('disabled'); + $('#resolution')[0].selectedIndex = 0; + $('#image_save_opts input').val([curPrefs.img_save]); + docprops = false; + }; + + var hidePreferences = function(){ + $('#svg_prefs').hide(); + preferences = false; + }; + + var win_wh = {width:$(window).width(), height:$(window).height()}; + + var resetScrollPos = $.noop, curScrollPos; + + // Fix for Issue 781: Drawing area jumps to top-left corner on window resize (IE9) + if(svgedit.browser.isIE()) { + (function() { + resetScrollPos = function() { + if(workarea[0].scrollLeft === 0 + && workarea[0].scrollTop === 0) { + workarea[0].scrollLeft = curScrollPos.left; + workarea[0].scrollTop = curScrollPos.top; + } + } + + curScrollPos = { + left: workarea[0].scrollLeft, + top: workarea[0].scrollTop + }; + + $(window).resize(resetScrollPos); + svgEditor.ready(function() { + // TODO: Find better way to detect when to do this to minimize + // flickering effect + setTimeout(function() { + resetScrollPos(); + }, 500); + }); + + workarea.scroll(function() { + curScrollPos = { + left: workarea[0].scrollLeft, + top: workarea[0].scrollTop + }; + }); + }()); + } + + $(window).resize(function(evt) { + if (editingsource) { + properlySourceSizeTextArea(); + } + + $.each(win_wh, function(type, val) { + var curval = $(window)[type](); + workarea[0]['scroll' + (type==='width'?'Left':'Top')] -= (curval - val)/2; + win_wh[type] = curval; + }); + }); + + (function() { + workarea.scroll(function() { + // TODO: jQuery's scrollLeft/Top() wouldn't require a null check + if ($('#ruler_x').length != 0) { + $('#ruler_x')[0].scrollLeft = workarea[0].scrollLeft; + } + if ($('#ruler_y').length != 0) { + $('#ruler_y')[0].scrollTop = workarea[0].scrollTop; + } + }); + + }()); + + $('#url_notice').click(function() { + $.alert(this.title); + }); + + $('#change_image_url').click(promptImgURL); + + function promptImgURL() { + var curhref = svgCanvas.getHref(selectedElement); + curhref = curhref.indexOf("data:") === 0?"":curhref; + $.prompt(uiStrings.notification.enterNewImgURL, curhref, function(url) { + if(url) setImageURL(url); + }); + } + + // added these event handlers for all the push buttons so they + // behave more like buttons being pressed-in and not images + (function() { + var toolnames = ['clear','open','save','source','delete','delete_multi','paste','clone','clone_multi','move_top','move_bottom']; + var all_tools = ''; + var cur_class = 'tool_button_current'; + + $.each(toolnames, function(i,item) { + all_tools += '#tool_' + item + (i==toolnames.length-1?',':''); + }); + + $(all_tools).mousedown(function() { + $(this).addClass(cur_class); + }).bind('mousedown mouseout', function() { + $(this).removeClass(cur_class); + }); + + $('#tool_undo, #tool_redo').mousedown(function(){ + if (!$(this).hasClass('disabled')) $(this).addClass(cur_class); + }).bind('mousedown mouseout',function(){ + $(this).removeClass(cur_class);} + ); + }()); + + // switch modifier key in tooltips if mac + // NOTE: This code is not used yet until I can figure out how to successfully bind ctrl/meta + // in Opera and Chrome + if (isMac && !window.opera) { + var shortcutButtons = ["tool_clear", "tool_save", "tool_source", "tool_undo", "tool_redo", "tool_clone"]; + var i = shortcutButtons.length; + while (i--) { + var button = document.getElementById(shortcutButtons[i]); + if (button != null) { + var title = button.title; + var index = title.indexOf("Ctrl+"); + button.title = [title.substr(0, index), "Cmd+", title.substr(index + 5)].join(''); + } + } + } + + // TODO: go back to the color boxes having white background-color and then setting + // background-image to none.png (otherwise partially transparent gradients look weird) + var colorPicker = function(elem) { + var picker = elem.attr('id') == 'stroke_color' ? 'stroke' : 'fill'; +// var opacity = (picker == 'stroke' ? $('#stroke_opacity') : $('#fill_opacity')); + var paint = paintBox[picker].paint; + var title = (picker == 'stroke' ? 'Pick a Stroke Paint and Opacity' : 'Pick a Fill Paint and Opacity'); + var was_none = false; + var pos = elem.position(); + $("#color_picker") + .draggable({cancel:'.jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick, .jPicker', containment: 'window'}) + .css(curConfig.colorPickerCSS || {'left': pos.left, 'bottom': 50 - pos.top}) + .jGraduate( + { + paint: paint, + window: { pickerTitle: title }, + images: { clientPath: curConfig.jGraduatePath }, + newstop: 'inverse' + }, + function(p) { + paint = new $.jGraduate.Paint(p); + + paintBox[picker].setPaint(paint); + svgCanvas.setPaint(picker, paint); + + $('#color_picker').hide(); + }, + function(p) { + $('#color_picker').hide(); + }); + }; + + var updateToolButtonState = function() { + var bNoFill = (svgCanvas.getColor('fill') == 'none'); + var bNoStroke = (svgCanvas.getColor('stroke') == 'none'); + var buttonsNeedingStroke = [ '#tool_fhpath', '#tool_line' ]; + var buttonsNeedingFillAndStroke = [ '#tools_rect .tool_button', '#tools_ellipse .tool_button', '#tool_text', '#tool_path']; + if (bNoStroke) { + for (var index in buttonsNeedingStroke) { + var button = buttonsNeedingStroke[index]; + if ($(button).hasClass('tool_button_current')) { + clickSelect(); + } + $(button).addClass('disabled'); + } + } + else { + for (var index in buttonsNeedingStroke) { + var button = buttonsNeedingStroke[index]; + $(button).removeClass('disabled'); + } + } + + if (bNoStroke && bNoFill) { + for (var index in buttonsNeedingFillAndStroke) { + var button = buttonsNeedingFillAndStroke[index]; + if ($(button).hasClass('tool_button_current')) { + clickSelect(); + } + $(button).addClass('disabled'); + } + } + else { + for (var index in buttonsNeedingFillAndStroke) { + var button = buttonsNeedingFillAndStroke[index]; + $(button).removeClass('disabled'); + } + } + + svgCanvas.runExtensions("toolButtonStateUpdate", { + nofill: bNoFill, + nostroke: bNoStroke + }); + + // Disable flyouts if all inside are disabled + $('.tools_flyout').each(function() { + var shower = $('#' + this.id + '_show'); + var has_enabled = false; + $(this).children().each(function() { + if(!$(this).hasClass('disabled')) { + has_enabled = true; + } + }); + shower.toggleClass('disabled', !has_enabled); + }); + + operaRepaint(); + }; + + + + var PaintBox = function(container, type) { + var cur = curConfig[type === 'fill' ? 'initFill' : 'initStroke']; + + // set up gradients to be used for the buttons + var svgdocbox = new DOMParser().parseFromString( + '<svg xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%"\ + fill="#' + cur.color + '" opacity="' + cur.opacity + '"/>\ + <defs><linearGradient id="gradbox_"/></defs></svg>', 'text/xml'); + var docElem = svgdocbox.documentElement; + + docElem = $(container)[0].appendChild(document.importNode(docElem, true)); + + docElem.setAttribute('width',16.5); + + this.rect = docElem.firstChild; + this.defs = docElem.getElementsByTagName('defs')[0]; + this.grad = this.defs.firstChild; + this.paint = new $.jGraduate.Paint({solidColor: cur.color}); + this.type = type; + + this.setPaint = function(paint, apply) { + this.paint = paint; + + var fillAttr = "none"; + var ptype = paint.type; + var opac = paint.alpha / 100; + + switch ( ptype ) { + case 'solidColor': + fillAttr = "#" + paint[ptype]; + break; + case 'linearGradient': + case 'radialGradient': + this.defs.removeChild(this.grad); + this.grad = this.defs.appendChild(paint[ptype]); + var id = this.grad.id = 'gradbox_' + this.type; + fillAttr = "url(#" + id + ')'; + } + + this.rect.setAttribute('fill', fillAttr); + this.rect.setAttribute('opacity', opac); + + if(apply) { + svgCanvas.setColor(this.type, paintColor, true); + svgCanvas.setPaintOpacity(this.type, paintOpacity, true); + } + } + + this.update = function(apply) { + if(!selectedElement) return; + var type = this.type; + + switch ( selectedElement.tagName ) { + case 'use': + case 'image': + case 'foreignObject': + // These elements don't have fill or stroke, so don't change + // the current value + return; + case 'g': + case 'a': + var gPaint = null; + + var childs = selectedElement.getElementsByTagName('*'); + for(var i = 0, len = childs.length; i < len; i++) { + var elem = childs[i]; + var p = elem.getAttribute(type); + if(i === 0) { + gPaint = p; + } else if(gPaint !== p) { + gPaint = null; + break; + } + } + if(gPaint === null) { + // No common color, don't update anything + var paintColor = null; + return; + } + var paintColor = gPaint; + + var paintOpacity = 1; + break; + default: + var paintOpacity = parseFloat(selectedElement.getAttribute(type + "-opacity")); + if (isNaN(paintOpacity)) { + paintOpacity = 1.0; + } + + var defColor = type === "fill" ? "black" : "none"; + var paintColor = selectedElement.getAttribute(type) || defColor; + } + + if(apply) { + svgCanvas.setColor(type, paintColor, true); + svgCanvas.setPaintOpacity(type, paintOpacity, true); + } + + paintOpacity *= 100; + + var paint = getPaint(paintColor, paintOpacity, type); + // update the rect inside #fill_color/#stroke_color + this.setPaint(paint); + } + + this.prep = function() { + var ptype = this.paint.type; + + switch ( ptype ) { + case 'linearGradient': + case 'radialGradient': + var paint = new $.jGraduate.Paint({copy: this.paint}); + svgCanvas.setPaint(type, paint); + } + } + }; + + paintBox.fill = new PaintBox('#fill_color', 'fill'); + paintBox.stroke = new PaintBox('#stroke_color', 'stroke'); + + $('#stroke_width').val(curConfig.initStroke.width); + $('#group_opacity').val(curConfig.initOpacity * 100); + + // Use this SVG elem to test vectorEffect support + var test_el = paintBox.fill.rect.cloneNode(false); + test_el.setAttribute('style','vector-effect:non-scaling-stroke'); + var supportsNonSS = (test_el.style.vectorEffect === 'non-scaling-stroke'); + test_el.removeAttribute('style'); + var svgdocbox = paintBox.fill.rect.ownerDocument; + // Use this to test support for blur element. Seems to work to test support in Webkit + var blur_test = svgdocbox.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur'); + if(typeof blur_test.stdDeviationX === "undefined") { + $('#tool_blur').hide(); + } + $(blur_test).remove(); + + // Test for zoom icon support + (function() { + var pre = '-' + ua_prefix.toLowerCase() + '-zoom-'; + var zoom = pre + 'in'; + workarea.css('cursor', zoom); + if(workarea.css('cursor') === zoom) { + zoomInIcon = zoom; + zoomOutIcon = pre + 'out'; + } + workarea.css('cursor', 'auto'); + }()); + + + + // Test for embedImage support (use timeout to not interfere with page load) + setTimeout(function() { + svgCanvas.embedImage('images/logo.png', function(datauri) { + if(!datauri) { + // Disable option + $('#image_save_opts [value=embed]').attr('disabled','disabled'); + $('#image_save_opts input').val(['ref']); + curPrefs.img_save = 'ref'; + $('#image_opt_embed').css('color','#666').attr('title',uiStrings.notification.featNotSupported); + } + }); + },1000); + + $('#fill_color, #tool_fill .icon_label').click(function(){ + colorPicker($('#fill_color')); + updateToolButtonState(); + }); + + $('#stroke_color, #tool_stroke .icon_label').click(function(){ + colorPicker($('#stroke_color')); + updateToolButtonState(); + }); + + $('#group_opacityLabel').click(function() { + $('#opacity_dropdown button').mousedown(); + $(window).mouseup(); + }); + + $('#zoomLabel').click(function() { + $('#zoom_dropdown button').mousedown(); + $(window).mouseup(); + }); + + $('#tool_move_top').mousedown(function(evt){ + $('#tools_stacking').show(); + evt.preventDefault(); + }); + + $('.layer_button').mousedown(function() { + $(this).addClass('layer_buttonpressed'); + }).mouseout(function() { + $(this).removeClass('layer_buttonpressed'); + }).mouseup(function() { + $(this).removeClass('layer_buttonpressed'); + }); + + $('.push_button').mousedown(function() { + if (!$(this).hasClass('disabled')) { + $(this).addClass('push_button_pressed').removeClass('push_button'); + } + }).mouseout(function() { + $(this).removeClass('push_button_pressed').addClass('push_button'); + }).mouseup(function() { + $(this).removeClass('push_button_pressed').addClass('push_button'); + }); + + $('#layer_new').click(function() { + var i = svgCanvas.getCurrentDrawing().getNumLayers(); + do { + var uniqName = uiStrings.layers.layer + " " + ++i; + } while(svgCanvas.getCurrentDrawing().hasLayer(uniqName)); + + $.prompt(uiStrings.notification.enterUniqueLayerName,uniqName, function(newName) { + if (!newName) return; + if (svgCanvas.getCurrentDrawing().hasLayer(newName)) { + $.alert(uiStrings.notification.dupeLayerName); + return; + } + svgCanvas.createLayer(newName); + updateContextPanel(); + populateLayers(); + }); + }); + + function deleteLayer() { + if (svgCanvas.deleteCurrentLayer()) { + updateContextPanel(); + populateLayers(); + // This matches what SvgCanvas does + // TODO: make this behavior less brittle (svg-editor should get which + // layer is selected from the canvas and then select that one in the UI) + $('#layerlist tr.layer').removeClass("layersel"); + $('#layerlist tr.layer:first').addClass("layersel"); + } + } + + function cloneLayer() { + var name = svgCanvas.getCurrentDrawing().getCurrentLayerName() + ' copy'; + + $.prompt(uiStrings.notification.enterUniqueLayerName, name, function(newName) { + if (!newName) return; + if (svgCanvas.getCurrentDrawing().hasLayer(newName)) { + $.alert(uiStrings.notification.dupeLayerName); + return; + } + svgCanvas.cloneLayer(newName); + updateContextPanel(); + populateLayers(); + }); + } + + function mergeLayer() { + if($('#layerlist tr.layersel').index() == svgCanvas.getCurrentDrawing().getNumLayers()-1) return; + svgCanvas.mergeLayer(); + updateContextPanel(); + populateLayers(); + } + + function moveLayer(pos) { + var curIndex = $('#layerlist tr.layersel').index(); + var total = svgCanvas.getCurrentDrawing().getNumLayers(); + if(curIndex > 0 || curIndex < total-1) { + curIndex += pos; + svgCanvas.setCurrentLayerPosition(total-curIndex-1); + populateLayers(); + } + } + + $('#layer_delete').click(deleteLayer); + + $('#layer_up').click(function() { + moveLayer(-1); + }); + + $('#layer_down').click(function() { + moveLayer(1); + }); + + $('#layer_rename').click(function() { + var curIndex = $('#layerlist tr.layersel').prevAll().length; + var oldName = $('#layerlist tr.layersel td.layername').text(); + $.prompt(uiStrings.notification.enterNewLayerName,"", function(newName) { + if (!newName) return; + if (oldName == newName || svgCanvas.getCurrentDrawing().hasLayer(newName)) { + $.alert(uiStrings.notification.layerHasThatName); + return; + } + + svgCanvas.renameCurrentLayer(newName); + populateLayers(); + }); + }); + + var SIDEPANEL_MAXWIDTH = 300; + var SIDEPANEL_OPENWIDTH = 150; + var sidedrag = -1, sidedragging = false, allowmove = false; + + var resizePanel = function(evt) { + if (!allowmove) return; + if (sidedrag == -1) return; + sidedragging = true; + var deltax = sidedrag - evt.pageX; + + var sidepanels = $('#sidepanels'); + var sidewidth = parseInt(sidepanels.css('width')); + if (sidewidth+deltax > SIDEPANEL_MAXWIDTH) { + deltax = SIDEPANEL_MAXWIDTH - sidewidth; + sidewidth = SIDEPANEL_MAXWIDTH; + } + else if (sidewidth+deltax < 2) { + deltax = 2 - sidewidth; + sidewidth = 2; + } + + if (deltax == 0) return; + sidedrag -= deltax; + + var layerpanel = $('#layerpanel'); + workarea.css('right', parseInt(workarea.css('right'))+deltax); + sidepanels.css('width', parseInt(sidepanels.css('width'))+deltax); + layerpanel.css('width', parseInt(layerpanel.css('width'))+deltax); + var ruler_x = $('#ruler_x'); + ruler_x.css('right', parseInt(ruler_x.css('right')) + deltax); + } + + $('#sidepanel_handle') + .mousedown(function(evt) { + sidedrag = evt.pageX; + $(window).mousemove(resizePanel); + allowmove = false; + // Silly hack for Chrome, which always runs mousemove right after mousedown + setTimeout(function() { + allowmove = true; + }, 20); + }) + .mouseup(function(evt) { + if (!sidedragging) toggleSidePanel(); + sidedrag = -1; + sidedragging = false; + }); + + $(window).mouseup(function() { + sidedrag = -1; + sidedragging = false; + $('#svg_editor').unbind('mousemove', resizePanel); + }); + + // if width is non-zero, then fully close it, otherwise fully open it + // the optional close argument forces the side panel closed + var toggleSidePanel = function(close){ + var w = parseInt($('#sidepanels').css('width')); + var deltax = (w > 2 || close ? 2 : SIDEPANEL_OPENWIDTH) - w; + var sidepanels = $('#sidepanels'); + var layerpanel = $('#layerpanel'); + var ruler_x = $('#ruler_x'); + workarea.css('right', parseInt(workarea.css('right')) + deltax); + sidepanels.css('width', parseInt(sidepanels.css('width')) + deltax); + layerpanel.css('width', parseInt(layerpanel.css('width')) + deltax); + ruler_x.css('right', parseInt(ruler_x.css('right')) + deltax); + }; + + // this function highlights the layer passed in (by fading out the other layers) + // if no layer is passed in, this function restores the other layers + var toggleHighlightLayer = function(layerNameToHighlight) { + var curNames = new Array(svgCanvas.getCurrentDrawing().getNumLayers()); + for (var i = 0; i < curNames.length; ++i) { curNames[i] = svgCanvas.getCurrentDrawing().getLayerName(i); } + + if (layerNameToHighlight) { + for (var i = 0; i < curNames.length; ++i) { + if (curNames[i] != layerNameToHighlight) { + svgCanvas.getCurrentDrawing().setLayerOpacity(curNames[i], 0.5); + } + } + } + else { + for (var i = 0; i < curNames.length; ++i) { + svgCanvas.getCurrentDrawing().setLayerOpacity(curNames[i], 1.0); + } + } + }; + + var populateLayers = function(){ + var layerlist = $('#layerlist tbody'); + var selLayerNames = $('#selLayerNames'); + layerlist.empty(); + selLayerNames.empty(); + var currentLayerName = svgCanvas.getCurrentDrawing().getCurrentLayerName(); + var layer = svgCanvas.getCurrentDrawing().getNumLayers(); + var icon = $.getSvgIcon('eye'); + // we get the layers in the reverse z-order (the layer rendered on top is listed first) + while (layer--) { + var name = svgCanvas.getCurrentDrawing().getLayerName(layer); + // contenteditable=\"true\" + var appendstr = "<tr class=\"layer"; + if (name == currentLayerName) { + appendstr += " layersel" + } + appendstr += "\">"; + + if (svgCanvas.getCurrentDrawing().getLayerVisibility(name)) { + appendstr += "<td class=\"layervis\"/><td class=\"layername\" >" + name + "</td></tr>"; + } + else { + appendstr += "<td class=\"layervis layerinvis\"/><td class=\"layername\" >" + name + "</td></tr>"; + } + layerlist.append(appendstr); + selLayerNames.append("<option value=\"" + name + "\">" + name + "</option>"); + } + if(icon !== undefined) { + var copy = icon.clone(); + $('td.layervis',layerlist).append(icon.clone()); + $.resizeSvgIcons({'td.layervis .svg_icon':14}); + } + // handle selection of layer + $('#layerlist td.layername') + .mouseup(function(evt){ + $('#layerlist tr.layer').removeClass("layersel"); + var row = $(this.parentNode); + row.addClass("layersel"); + svgCanvas.setCurrentLayer(this.textContent); + evt.preventDefault(); + }) + .mouseover(function(evt){ + $(this).css({"font-style": "italic", "color":"blue"}); + toggleHighlightLayer(this.textContent); + }) + .mouseout(function(evt){ + $(this).css({"font-style": "normal", "color":"black"}); + toggleHighlightLayer(); + }); + $('#layerlist td.layervis').click(function(evt){ + var row = $(this.parentNode).prevAll().length; + var name = $('#layerlist tr.layer:eq(' + row + ') td.layername').text(); + var vis = $(this).hasClass('layerinvis'); + svgCanvas.setLayerVisibility(name, vis); + if (vis) { + $(this).removeClass('layerinvis'); + } + else { + $(this).addClass('layerinvis'); + } + }); + + // if there were too few rows, let's add a few to make it not so lonely + var num = 5 - $('#layerlist tr.layer').size(); + while (num-- > 0) { + // FIXME: there must a better way to do this + layerlist.append("<tr><td style=\"color:white\">_</td><td/></tr>"); + } + }; + populateLayers(); + + // function changeResolution(x,y) { + // var zoom = svgCanvas.getResolution().zoom; + // setResolution(x * zoom, y * zoom); + // } + + var centerCanvas = function() { + // this centers the canvas vertically in the workarea (horizontal handled in CSS) + workarea.css('line-height', workarea.height() + 'px'); + }; + + $(window).bind('load resize', centerCanvas); + + function stepFontSize(elem, step) { + var orig_val = elem.value-0; + var sug_val = orig_val + step; + var increasing = sug_val >= orig_val; + if(step === 0) return orig_val; + + if(orig_val >= 24) { + if(increasing) { + return Math.round(orig_val * 1.1); + } else { + return Math.round(orig_val / 1.1); + } + } else if(orig_val <= 1) { + if(increasing) { + return orig_val * 2; + } else { + return orig_val / 2; + } + } else { + return sug_val; + } + } + + function stepZoom(elem, step) { + var orig_val = elem.value-0; + if(orig_val === 0) return 100; + var sug_val = orig_val + step; + if(step === 0) return orig_val; + + if(orig_val >= 100) { + return sug_val; + } else { + if(sug_val >= orig_val) { + return orig_val * 2; + } else { + return orig_val / 2; + } + } + } + + // function setResolution(w, h, center) { + // updateCanvas(); + // // w-=0; h-=0; + // // $('#svgcanvas').css( { 'width': w, 'height': h } ); + // // $('#canvas_width').val(w); + // // $('#canvas_height').val(h); + // // + // // if(center) { + // // var w_area = workarea; + // // var scroll_y = h/2 - w_area.height()/2; + // // var scroll_x = w/2 - w_area.width()/2; + // // w_area[0].scrollTop = scroll_y; + // // w_area[0].scrollLeft = scroll_x; + // // } + // } + + $('#resolution').change(function(){ + var wh = $('#canvas_width,#canvas_height'); + if(!this.selectedIndex) { + if($('#canvas_width').val() == 'fit') { + wh.removeAttr("disabled").val(100); + } + } else if(this.value == 'content') { + wh.val('fit').attr("disabled","disabled"); + } else { + var dims = this.value.split('x'); + $('#canvas_width').val(dims[0]); + $('#canvas_height').val(dims[1]); + wh.removeAttr("disabled"); + } + }); + + //Prevent browser from erroneously repopulating fields + $('input,select').attr("autocomplete","off"); + + // Associate all button actions as well as non-button keyboard shortcuts + var Actions = function() { + // sel:'selector', fn:function, evt:'event', key:[key, preventDefault, NoDisableInInput] + var tool_buttons = [ + {sel:'#tool_select', fn: clickSelect, evt: 'click', key: ['V', true]}, + {sel:'#tool_fhpath', fn: clickFHPath, evt: 'click', key: ['Q', true]}, + {sel:'#tool_line', fn: clickLine, evt: 'click', key: ['L', true]}, + {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: ['R', true], parent: '#tools_rect', icon: 'rect'}, + {sel:'#tool_square', fn: clickSquare, evt: 'mouseup', parent: '#tools_rect', icon: 'square'}, + {sel:'#tool_fhrect', fn: clickFHRect, evt: 'mouseup', parent: '#tools_rect', icon: 'fh_rect'}, + {sel:'#tool_ellipse', fn: clickEllipse, evt: 'mouseup', key: ['E', true], parent: '#tools_ellipse', icon: 'ellipse'}, + {sel:'#tool_circle', fn: clickCircle, evt: 'mouseup', parent: '#tools_ellipse', icon: 'circle'}, + {sel:'#tool_fhellipse', fn: clickFHEllipse, evt: 'mouseup', parent: '#tools_ellipse', icon: 'fh_ellipse'}, + {sel:'#tool_path', fn: clickPath, evt: 'click', key: ['P', true]}, + {sel:'#tool_text', fn: clickText, evt: 'click', key: ['T', true]}, + {sel:'#tool_image', fn: clickImage, evt: 'mouseup'}, + {sel:'#tool_zoom', fn: clickZoom, evt: 'mouseup', key: ['Z', true]}, + {sel:'#tool_clear', fn: clickClear, evt: 'mouseup', key: ['N', true]}, + {sel:'#tool_save', fn: function() { editingsource?saveSourceEditor():clickSave()}, evt: 'mouseup', key: ['S', true]}, + {sel:'#tool_export', fn: clickExport, evt: 'mouseup'}, + {sel:'#tool_open', fn: clickOpen, evt: 'mouseup', key: ['O', true]}, + {sel:'#tool_import', fn: clickImport, evt: 'mouseup'}, + {sel:'#tool_source', fn: showSourceEditor, evt: 'click', key: ['U', true]}, + {sel:'#tool_wireframe', fn: clickWireframe, evt: 'click', key: ['F', true]}, + {sel:'#tool_source_cancel,#svg_source_overlay,#tool_docprops_cancel,#tool_prefs_cancel', fn: cancelOverlays, evt: 'click', key: ['esc', false, false], hidekey: true}, + {sel:'#tool_source_save', fn: saveSourceEditor, evt: 'click'}, + {sel:'#tool_docprops_save', fn: saveDocProperties, evt: 'click'}, + {sel:'#tool_docprops', fn: showDocProperties, evt: 'mouseup'}, + {sel:'#tool_prefs_save', fn: savePreferences, evt: 'click'}, + {sel:'#tool_prefs_option', fn: function() {showPreferences();return false}, evt: 'mouseup'}, + {sel:'#tool_delete,#tool_delete_multi', fn: deleteSelected, evt: 'click', key: ['del/backspace', true]}, + {sel:'#tool_reorient', fn: reorientPath, evt: 'click'}, + {sel:'#tool_node_link', fn: linkControlPoints, evt: 'click'}, + {sel:'#tool_node_clone', fn: clonePathNode, evt: 'click'}, + {sel:'#tool_node_delete', fn: deletePathNode, evt: 'click'}, + {sel:'#tool_openclose_path', fn: opencloseSubPath, evt: 'click'}, + {sel:'#tool_add_subpath', fn: addSubPath, evt: 'click'}, + {sel:'#tool_move_top', fn: moveToTopSelected, evt: 'click', key: 'ctrl+shift+]'}, + {sel:'#tool_move_bottom', fn: moveToBottomSelected, evt: 'click', key: 'ctrl+shift+['}, + {sel:'#tool_topath', fn: convertToPath, evt: 'click'}, + {sel:'#tool_make_link,#tool_make_link_multi', fn: makeHyperlink, evt: 'click'}, + {sel:'#tool_undo', fn: clickUndo, evt: 'click', key: ['Z', true]}, + {sel:'#tool_redo', fn: clickRedo, evt: 'click', key: ['Y', true]}, + {sel:'#tool_clone,#tool_clone_multi', fn: clickClone, evt: 'click', key: ['D', true]}, + {sel:'#tool_group', fn: clickGroup, evt: 'click', key: ['G', true]}, + {sel:'#tool_ungroup', fn: clickGroup, evt: 'click'}, + {sel:'#tool_unlink_use', fn: clickGroup, evt: 'click'}, + {sel:'[id^=tool_align]', fn: clickAlign, evt: 'click'}, + // these two lines are required to make Opera work properly with the flyout mechanism + // {sel:'#tools_rect_show', fn: clickRect, evt: 'click'}, + // {sel:'#tools_ellipse_show', fn: clickEllipse, evt: 'click'}, + {sel:'#tool_bold', fn: clickBold, evt: 'mousedown'}, + {sel:'#tool_italic', fn: clickItalic, evt: 'mousedown'}, + {sel:'#sidepanel_handle', fn: toggleSidePanel, key: ['X']}, + {sel:'#copy_save_done', fn: cancelOverlays, evt: 'click'}, + + // Shortcuts not associated with buttons + + {key: 'ctrl+left', fn: function(){rotateSelected(0,1)}}, + {key: 'ctrl+right', fn: function(){rotateSelected(1,1)}}, + {key: 'ctrl+shift+left', fn: function(){rotateSelected(0,5)}}, + {key: 'ctrl+shift+right', fn: function(){rotateSelected(1,5)}}, + {key: 'shift+O', fn: selectPrev}, + {key: 'shift+P', fn: selectNext}, + {key: [modKey+'up', true], fn: function(){zoomImage(2);}}, + {key: [modKey+'down', true], fn: function(){zoomImage(.5);}}, + {key: [modKey+']', true], fn: function(){moveUpDownSelected('Up');}}, + {key: [modKey+'[', true], fn: function(){moveUpDownSelected('Down');}}, + {key: ['up', true], fn: function(){moveSelected(0,-1);}}, + {key: ['down', true], fn: function(){moveSelected(0,1);}}, + {key: ['left', true], fn: function(){moveSelected(-1,0);}}, + {key: ['right', true], fn: function(){moveSelected(1,0);}}, + {key: 'shift+up', fn: function(){moveSelected(0,-10)}}, + {key: 'shift+down', fn: function(){moveSelected(0,10)}}, + {key: 'shift+left', fn: function(){moveSelected(-10,0)}}, + {key: 'shift+right', fn: function(){moveSelected(10,0)}}, + {key: ['alt+up', true], fn: function(){svgCanvas.cloneSelectedElements(0,-1)}}, + {key: ['alt+down', true], fn: function(){svgCanvas.cloneSelectedElements(0,1)}}, + {key: ['alt+left', true], fn: function(){svgCanvas.cloneSelectedElements(-1,0)}}, + {key: ['alt+right', true], fn: function(){svgCanvas.cloneSelectedElements(1,0)}}, + {key: ['alt+shift+up', true], fn: function(){svgCanvas.cloneSelectedElements(0,-10)}}, + {key: ['alt+shift+down', true], fn: function(){svgCanvas.cloneSelectedElements(0,10)}}, + {key: ['alt+shift+left', true], fn: function(){svgCanvas.cloneSelectedElements(-10,0)}}, + {key: ['alt+shift+right', true], fn: function(){svgCanvas.cloneSelectedElements(10,0)}}, + {key: 'A', fn: function(){svgCanvas.selectAllInCurrentLayer();}}, + + // Standard shortcuts + {key: modKey+'z', fn: clickUndo}, + {key: modKey + 'shift+z', fn: clickRedo}, + {key: modKey + 'y', fn: clickRedo}, + + {key: modKey+'x', fn: cutSelected}, + {key: modKey+'c', fn: copySelected}, + {key: modKey+'v', fn: pasteInCenter} + + + ]; + + // Tooltips not directly associated with a single function + var key_assocs = { + '4/Shift+4': '#tools_rect_show', + '5/Shift+5': '#tools_ellipse_show' + }; + + return { + setAll: function() { + var flyouts = {}; + + $.each(tool_buttons, function(i, opts) { + // Bind function to button + if(opts.sel) { + var btn = $(opts.sel); + if (btn.length == 0) return true; // Skip if markup does not exist + if(opts.evt) { + btn[opts.evt](opts.fn); + } + + // Add to parent flyout menu, if able to be displayed + if(opts.parent && $(opts.parent + '_show').length != 0) { + var f_h = $(opts.parent); + if(!f_h.length) { + f_h = makeFlyoutHolder(opts.parent.substr(1)); + } + + f_h.append(btn); + + if(!$.isArray(flyouts[opts.parent])) { + flyouts[opts.parent] = []; + } + flyouts[opts.parent].push(opts); + } + } + + + // Bind function to shortcut key + if(opts.key) { + // Set shortcut based on options + var keyval, shortcut = '', disInInp = true, fn = opts.fn, pd = false; + if($.isArray(opts.key)) { + keyval = opts.key[0]; + if(opts.key.length > 1) pd = opts.key[1]; + if(opts.key.length > 2) disInInp = opts.key[2]; + } else { + keyval = opts.key; + } + keyval += ''; + + $.each(keyval.split('/'), function(i, key) { + $(document).bind('keydown', key, function(e) { + fn(); + if(pd) { + e.preventDefault(); + } + // Prevent default on ALL keys? + return false; + }); + }); + + // Put shortcut in title + if(opts.sel && !opts.hidekey && btn.attr('title')) { + var new_title = btn.attr('title').split('[')[0] + ' (' + keyval + ')'; + key_assocs[keyval] = opts.sel; + // Disregard for menu items + if(!btn.parents('#main_menu').length) { + btn.attr('title', new_title); + } + } + } + }); + + // Setup flyouts + setupFlyouts(flyouts); + + + // Misc additional actions + + // Make "return" keypress trigger the change event + $('.attr_changer, #image_url').bind('keydown', 'return', + function(evt) {$(this).change();evt.preventDefault();} + ); + + $(window).bind('keydown', 'tab', function(e) { + if(ui_context === 'canvas') { + e.preventDefault(); + selectNext(); + } + }).bind('keydown', 'shift+tab', function(e) { + if(ui_context === 'canvas') { + e.preventDefault(); + selectPrev(); + } + }); + + $('#tool_zoom').dblclick(dblclickZoom); + }, + setTitles: function() { + $.each(key_assocs, function(keyval, sel) { + var menu = ($(sel).parents('#main_menu').length); + + $(sel).each(function() { + if(menu) { + var t = $(this).text().split(' [')[0]; + } else { + var t = this.title.split(' [')[0]; + } + var key_str = ''; + // Shift+Up + $.each(keyval.split('/'), function(i, key) { + var mod_bits = key.split('+'), mod = ''; + if(mod_bits.length > 1) { + mod = mod_bits[0] + '+'; + key = mod_bits[1]; + } + key_str += (i?'/':'') + mod + (uiStrings['key_'+key] || key); + }); + if(menu) { + this.lastChild.textContent = t +' ['+key_str+']'; + } else { + this.title = t +' ['+key_str+']'; + } + }); + }); + }, + getButtonData: function(sel) { + var b; + $.each(tool_buttons, function(i, btn) { + if(btn.sel === sel) b = btn; + }); + return b; + } + }; + }(); + + Actions.setAll(); + + // Select given tool + Editor.ready(function() { + var tool, + itool = curConfig.initTool, + container = $("#tools_left, #svg_editor .tools_flyout"), + pre_tool = container.find("#tool_" + itool), + reg_tool = container.find("#" + itool); + if(pre_tool.length) { + tool = pre_tool; + } else if(reg_tool.length){ + tool = reg_tool; + } else { + tool = $("#tool_select"); + } + tool.click().mouseup(); + + if(curConfig.wireframe) { + $('#tool_wireframe').click(); + } + + if(curConfig.showlayers) { + toggleSidePanel(); + } + + $('#rulers').toggle(!!curConfig.showRulers); + + if (curConfig.showRulers) { + $('#show_rulers')[0].checked = true; + } + + if(curConfig.gridSnapping) { + $('#grid_snapping_on')[0].checked = true; + } + + if(curConfig.baseUnit) { + $('#base_unit').val(curConfig.baseUnit); + } + + if(curConfig.snappingStep) { + $('#grid_snapping_step').val(curConfig.snappingStep); + } + }); + + $('#rect_rx').SpinButton({ min: 0, max: 1000, step: 1, callback: changeRectRadius }); + $('#stroke_width').SpinButton({ min: 0, max: 99, step: 1, smallStep: 0.1, callback: changeStrokeWidth }); + $('#angle').SpinButton({ min: -180, max: 180, step: 5, callback: changeRotationAngle }); + $('#font_size').SpinButton({ step: 1, min: 0.001, stepfunc: stepFontSize, callback: changeFontSize }); + $('#group_opacity').SpinButton({ step: 5, min: 0, max: 100, callback: changeOpacity }); + $('#blur').SpinButton({ step: .1, min: 0, max: 10, callback: changeBlur }); + $('#zoom').SpinButton({ min: 0.001, max: 10000, step: 50, stepfunc: stepZoom, callback: changeZoom }) + // Set default zoom + .val(svgCanvas.getZoom() * 100); + + $("#workarea").contextMenu({ + menu: 'cmenu_canvas', + inSpeed: 0 + }, + function(action, el, pos) { + switch ( action ) { + case 'delete': + deleteSelected(); + break; + case 'cut': + cutSelected(); + break; + case 'copy': + copySelected(); + break; + case 'paste': + svgCanvas.pasteElements(); + break; + case 'paste_in_place': + svgCanvas.pasteElements('in_place'); + break; + case 'group': + svgCanvas.groupSelectedElements(); + break; + case 'ungroup': + svgCanvas.ungroupSelectedElement(); + break; + case 'move_front': + moveToTopSelected(); + break; + case 'move_up': + moveUpDownSelected('Up'); + break; + case 'move_down': + moveUpDownSelected('Down'); + break; + case 'move_back': + moveToBottomSelected(); + break; + default: + if(svgedit.contextmenu && svgedit.contextmenu.hasCustomHandler(action)){ + svgedit.contextmenu.getCustomHandler(action).call(); + } + break; + } + + if(svgCanvas.clipBoard.length) { + canv_menu.enableContextMenuItems('#paste,#paste_in_place'); + } + }); + + var lmenu_func = function(action, el, pos) { + switch ( action ) { + case 'dupe': + cloneLayer(); + break; + case 'delete': + deleteLayer(); + break; + case 'merge_down': + mergeLayer(); + break; + case 'merge_all': + svgCanvas.mergeAllLayers(); + updateContextPanel(); + populateLayers(); + break; + } + } + + $("#layerlist").contextMenu({ + menu: 'cmenu_layers', + inSpeed: 0 + }, + lmenu_func + ); + + $("#layer_moreopts").contextMenu({ + menu: 'cmenu_layers', + inSpeed: 0, + allowLeft: true + }, + lmenu_func + ); + + $('.contextMenu li').mousedown(function(ev) { + ev.preventDefault(); + }) + + $('#cmenu_canvas li').disableContextMenu(); + canv_menu.enableContextMenuItems('#delete,#cut,#copy'); + + window.onbeforeunload = function() { + // Suppress warning if page is empty + if(undoMgr.getUndoStackSize() === 0) { + Editor.show_save_warning = false; + } + + // show_save_warning is set to "false" when the page is saved. + if(!curConfig.no_save_warning && Editor.show_save_warning) { + // Browser already asks question about closing the page + return uiStrings.notification.unsavedChanges; + } + }; + + Editor.openPrep = function(func) { + $('#main_menu').hide(); + if(undoMgr.getUndoStackSize() === 0) { + func(true); + } else { + $.confirm(uiStrings.notification.QwantToOpen, func); + } + } + + // use HTML5 File API: http://www.w3.org/TR/FileAPI/ + // if browser has HTML5 File API support, then we will show the open menu item + // and provide a file input to click. When that change event fires, it will + // get the text contents of the file and send it to the canvas + if (window.FileReader) { + var inp = $('<input type="file">').change(function() { + var f = this; + Editor.openPrep(function(ok) { + if(!ok) return; + svgCanvas.clear(); + if(f.files.length==1) { + var reader = new FileReader(); + reader.onloadend = function(e) { + loadSvgString(e.target.result); + updateCanvas(); + }; + reader.readAsText(f.files[0]); + } + }); + }); + $("#tool_open").show().prepend(inp); + var inp2 = $('<input type="file">').change(function() { + $('#main_menu').hide(); + if(this.files.length==1) { + var reader = new FileReader(); + reader.onloadend = function(e) { + svgCanvas.importSvgString(e.target.result, true); + updateCanvas(); + }; + reader.readAsText(this.files[0]); + } + }); + $("#tool_import").show().prepend(inp2); + } + + var updateCanvas = Editor.updateCanvas = function(center, new_ctr) { + + var w = workarea.width(), h = workarea.height(); + var w_orig = w, h_orig = h; + var zoom = svgCanvas.getZoom(); + var w_area = workarea; + var cnvs = $("#svgcanvas"); + + var old_ctr = { + x: w_area[0].scrollLeft + w_orig/2, + y: w_area[0].scrollTop + h_orig/2 + }; + + var multi = curConfig.canvas_expansion; + w = Math.max(w_orig, svgCanvas.contentW * zoom * multi); + h = Math.max(h_orig, svgCanvas.contentH * zoom * multi); + + if(w == w_orig && h == h_orig) { + workarea.css('overflow','hidden'); + } else { + workarea.css('overflow','scroll'); + } + + var old_can_y = cnvs.height()/2; + var old_can_x = cnvs.width()/2; + cnvs.width(w).height(h); + var new_can_y = h/2; + var new_can_x = w/2; + var offset = svgCanvas.updateCanvas(w, h); + + var ratio = new_can_x / old_can_x; + + var scroll_x = w/2 - w_orig/2; + var scroll_y = h/2 - h_orig/2; + + if(!new_ctr) { + + var old_dist_x = old_ctr.x - old_can_x; + var new_x = new_can_x + old_dist_x * ratio; + + var old_dist_y = old_ctr.y - old_can_y; + var new_y = new_can_y + old_dist_y * ratio; + + new_ctr = { + x: new_x, + y: new_y + }; + + } else { + new_ctr.x += offset.x, + new_ctr.y += offset.y; + } + + if(center) { + // Go to top-left for larger documents + if(svgCanvas.contentW > w_area.width()) { + // Top-left + workarea[0].scrollLeft = offset.x - 10; + workarea[0].scrollTop = offset.y - 10; + } else { + // Center + w_area[0].scrollLeft = scroll_x; + w_area[0].scrollTop = scroll_y; + } + } else { + w_area[0].scrollLeft = new_ctr.x - w_orig/2; + w_area[0].scrollTop = new_ctr.y - h_orig/2; + } + if(curConfig.showRulers) { + updateRulers(cnvs, zoom); + workarea.scroll(); + } + } + + // Make [1,2,5] array + var r_intervals = []; + for(var i = .1; i < 1E5; i *= 10) { + r_intervals.push(1 * i); + r_intervals.push(2 * i); + r_intervals.push(5 * i); + } + + function updateRulers(scanvas, zoom) { + if(!zoom) zoom = svgCanvas.getZoom(); + if(!scanvas) scanvas = $("#svgcanvas"); + + var limit = 30000; + + var c_elem = svgCanvas.getContentElem(); + + var units = svgedit.units.getTypeMap(); + var unit = units[curConfig.baseUnit]; // 1 = 1px + + for(var d = 0; d < 2; d++) { + var is_x = (d === 0); + var dim = is_x ? 'x' : 'y'; + var lentype = is_x?'width':'height'; + var content_d = c_elem.getAttribute(dim)-0; + + var $hcanv_orig = $('#ruler_' + dim + ' canvas:first'); + + // Bit of a hack to fully clear the canvas in Safari & IE9 + $hcanv = $hcanv_orig.clone(); + $hcanv_orig.replaceWith($hcanv); + + var hcanv = $hcanv[0]; + + // Set the canvas size to the width of the container + var ruler_len = scanvas[lentype](); + var total_len = ruler_len; + hcanv.parentNode.style[lentype] = total_len + 'px'; + + + var canv_count = 1; + var ctx_num = 0; + var ctx_arr; + var ctx = hcanv.getContext("2d"); + + ctx.fillStyle = "rgb(200,0,0)"; + ctx.fillRect(0,0,hcanv.width,hcanv.height); + + // Remove any existing canvasses + $hcanv.siblings().remove(); + + // Create multiple canvases when necessary (due to browser limits) + if(ruler_len >= limit) { + var num = parseInt(ruler_len / limit) + 1; + ctx_arr = Array(num); + ctx_arr[0] = ctx; + for(var i = 1; i < num; i++) { + hcanv[lentype] = limit; + var copy = hcanv.cloneNode(true); + hcanv.parentNode.appendChild(copy); + ctx_arr[i] = copy.getContext('2d'); + } + + copy[lentype] = ruler_len % limit; + + // set copy width to last + ruler_len = limit; + } + + hcanv[lentype] = ruler_len; + + var u_multi = unit * zoom; + + // Calculate the main number interval + var raw_m = 50 / u_multi; + var multi = 1; + for(var i = 0; i < r_intervals.length; i++) { + var num = r_intervals[i]; + multi = num; + if(raw_m <= num) { + break; + } + } + + var big_int = multi * u_multi; + + ctx.font = "9px sans-serif"; + + var ruler_d = ((content_d / u_multi) % multi) * u_multi; + var label_pos = ruler_d - big_int; + for (; ruler_d < total_len; ruler_d += big_int) { + label_pos += big_int; + var real_d = ruler_d - content_d; + + var cur_d = Math.round(ruler_d) + .5; + if(is_x) { + ctx.moveTo(cur_d, 15); + ctx.lineTo(cur_d, 0); + } else { + ctx.moveTo(15, cur_d); + ctx.lineTo(0, cur_d); + } + + var num = (label_pos - content_d) / u_multi; + var label; + if(multi >= 1) { + label = Math.round(num); + } else { + var decs = (multi+'').split('.')[1].length; + label = num.toFixed(decs)-0; + } + + // Do anything special for negative numbers? +// var is_neg = label < 0; +// real_d2 = Math.abs(real_d2); + + // Change 1000s to Ks + if(label !== 0 && label !== 1000 && label % 1000 === 0) { + label = (label / 1000) + 'K'; + } + + if(is_x) { + ctx.fillText(label, ruler_d+2, 8); + } else { + var str = (label+'').split(''); + for(var i = 0; i < str.length; i++) { + ctx.fillText(str[i], 1, (ruler_d+9) + i*9); + } + } + + var part = big_int / 10; + for(var i = 1; i < 10; i++) { + var sub_d = Math.round(ruler_d + part * i) + .5; + if(ctx_arr && sub_d > ruler_len) { + ctx_num++; + ctx.stroke(); + if(ctx_num >= ctx_arr.length) { + i = 10; + ruler_d = total_len; + continue; + } + ctx = ctx_arr[ctx_num]; + ruler_d -= limit; + sub_d = Math.round(ruler_d + part * i) + .5; + } + + var line_num = (i % 2)?12:10; + if(is_x) { + ctx.moveTo(sub_d, 15); + ctx.lineTo(sub_d, line_num); + } else { + ctx.moveTo(15, sub_d); + ctx.lineTo(line_num ,sub_d); + } + } + } + + // console.log('ctx', ctx); + ctx.strokeStyle = "#000"; + ctx.stroke(); + } + } + +// $(function() { + updateCanvas(true); +// }); + + // var revnums = "svg-editor.js ($Rev: 2076 $) "; + // revnums += svgCanvas.getVersion(); + // $('#copyright')[0].setAttribute("title", revnums); + + // Callback handler for embedapi.js + try{ + var json_encode = function(obj){ + //simple partial JSON encoder implementation + if(window.JSON && JSON.stringify) return JSON.stringify(obj); + var enc = arguments.callee; //for purposes of recursion + if(typeof obj == "boolean" || typeof obj == "number"){ + return obj+'' //should work... + }else if(typeof obj == "string"){ + //a large portion of this is stolen from Douglas Crockford's json2.js + return '"'+ + obj.replace( + /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g + , function (a) { + return '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4); + }) + +'"'; //note that this isn't quite as purtyful as the usualness + }else if(obj.length){ //simple hackish test for arrayish-ness + for(var i = 0; i < obj.length; i++){ + obj[i] = enc(obj[i]); //encode every sub-thingy on top + } + return "["+obj.join(",")+"]"; + }else{ + var pairs = []; //pairs will be stored here + for(var k in obj){ //loop through thingys + pairs.push(enc(k)+":"+enc(obj[k])); //key: value + } + return "{"+pairs.join(",")+"}" //wrap in the braces + } + } + window.addEventListener("message", function(e){ + var cbid = parseInt(e.data.substr(0, e.data.indexOf(";"))); + try{ + e.source.postMessage("SVGe"+cbid+";"+json_encode(eval(e.data)), "*"); + }catch(err){ + e.source.postMessage("SVGe"+cbid+";error:"+err.message, "*"); + } + }, false) + }catch(err){ + window.embed_error = err; + } + + + + // For Compatibility with older extensions + $(function() { + window.svgCanvas = svgCanvas; + svgCanvas.ready = svgEditor.ready; + }); + + + Editor.setLang = function(lang, allStrings) { + $.pref('lang', lang); + $('#lang_select').val(lang); + if(allStrings) { + + var notif = allStrings.notification; + + + + // $.extend will only replace the given strings + var oldLayerName = $('#layerlist tr.layersel td.layername').text(); + var rename_layer = (oldLayerName == uiStrings.common.layer + ' 1'); + + $.extend(uiStrings, allStrings); + svgCanvas.setUiStrings(allStrings); + Actions.setTitles(); + + if(rename_layer) { + svgCanvas.renameCurrentLayer(uiStrings.common.layer + ' 1'); + populateLayers(); + } + + svgCanvas.runExtensions("langChanged", lang); + + // Update flyout tooltips + setFlyoutTitles(); + + // Copy title for certain tool elements + var elems = { + '#stroke_color': '#tool_stroke .icon_label, #tool_stroke .color_block', + '#fill_color': '#tool_fill label, #tool_fill .color_block', + '#linejoin_miter': '#cur_linejoin', + '#linecap_butt': '#cur_linecap' + } + + $.each(elems, function(source, dest) { + $(dest).attr('title', $(source)[0].title); + }); + + // Copy alignment titles + $('#multiselected_panel div[id^=tool_align]').each(function() { + $('#tool_pos' + this.id.substr(10))[0].title = this.title; + }); + + } + }; + }; + + var callbacks = []; + + function loadSvgString(str, callback) { + var success = svgCanvas.setSvgString(str) !== false; + callback = callback || $.noop; + if(success) { + callback(true); + } else { + $.alert(uiStrings.notification.errorLoadingSVG, function() { + callback(false); + }); + } + } + + Editor.ready = function(cb) { + if(!is_ready) { + callbacks.push(cb); + } else { + cb(); + } + }; + + Editor.runCallbacks = function() { + $.each(callbacks, function() { + this(); + }); + is_ready = true; + }; + + Editor.loadFromString = function(str) { + Editor.ready(function() { + loadSvgString(str); + }); + }; + + Editor.disableUI = function(featList) { +// $(function() { +// $('#tool_wireframe, #tool_image, #main_button, #tool_source, #sidepanels').remove(); +// $('#tools_top').css('left', 5); +// }); + }; + + Editor.loadFromURL = function(url, opts) { + if(!opts) opts = {}; + + var cache = opts.cache; + var cb = opts.callback; + + Editor.ready(function() { + $.ajax({ + 'url': url, + 'dataType': 'text', + cache: !!cache, + success: function(str) { + loadSvgString(str, cb); + }, + error: function(xhr, stat, err) { + if(xhr.status != 404 && xhr.responseText) { + loadSvgString(xhr.responseText, cb); + } else { + $.alert(uiStrings.notification.URLloadFail + ": \n"+err+'', cb); + } + } + }); + }); + }; + + Editor.loadFromDataURI = function(str) { + Editor.ready(function() { + var pre = 'data:image/svg+xml;base64,'; + var src = str.substring(pre.length); + loadSvgString(svgedit.utilities.decode64(src)); + }); + }; + + Editor.addExtension = function() { + var args = arguments; + + // Note that we don't want this on Editor.ready since some extensions + // may want to run before then (like server_opensave). + $(function() { + if(svgCanvas) svgCanvas.addExtension.apply(this, args); + }); + }; + + return Editor; + }(jQuery); + + // Run init once DOM is loaded + $(svgEditor.init); + +})(); + +// ?iconsize=s&bkgd_color=555 + +// svgEditor.setConfig({ +// // imgPath: 'foo', +// dimensions: [800, 600], +// canvas_expansion: 5, +// initStroke: { +// color: '0000FF', +// width: 3.5, +// opacity: .5 +// }, +// initFill: { +// color: '550000', +// opacity: .75 +// }, +// extensions: ['ext-helloworld.js'] +// }) diff --git a/editor/svg-editor.manifest b/editor/svg-editor.manifest new file mode 100644 index 0000000..b156374 --- /dev/null +++ b/editor/svg-editor.manifest @@ -0,0 +1,121 @@ +CACHE MANIFEST +svg-editor.html +images/logo.png +jgraduate/css/jPicker-1.0.9.css +jgraduate/css/jGraduate-0.2.0.css +svg-editor.css +spinbtn/JQuerySpinBtn.css +jquery.js +js-hotkeys/jquery.hotkeys.min.js +jquery-ui/jquery-ui-1.7.2.custom.min.js +jgraduate/jpicker-1.0.9.min.js +jgraduate/jquery.jgraduate.js +spinbtn/JQuerySpinBtn.js +svgcanvas.js +svg-editor.js +images/align-bottom.png +images/align-center.png +images/align-left.png +images/align-middle.png +images/align-right.png +images/align-top.png +images/bold.png +images/cancel.png +images/circle.png +images/clear.png +images/clone.png +images/copy.png +images/cut.png +images/delete.png +images/document-properties.png +images/dropdown.gif +images/ellipse.png +images/eye.png +images/flyouth.png +images/flyup.gif +images/freehand-circle.png +images/freehand-square.png +images/go-down.png +images/go-up.png +images/image.png +images/italic.png +images/line.png +images/logo.png +images/logo.svg +images/move_bottom.png +images/move_top.png +images/none.png +images/open.png +images/paste.png +images/path.png +images/polygon.png +images/rect.png +images/redo.png +images/save.png +images/select.png +images/sep.png +images/shape_group.png +images/shape_ungroup.png +images/source.png +images/square.png +images/text.png +images/undo.png +images/view-refresh.png +images/wave.png +images/zoom.png +locale/locale.js +locale/lang.af.js +locale/lang.ar.js +locale/lang.az.js +locale/lang.be.js +locale/lang.bg.js +locale/lang.ca.js +locale/lang.cs.js +locale/lang.cy.js +locale/lang.da.js +locale/lang.de.js +locale/lang.el.js +locale/lang.en.js +locale/lang.es.js +locale/lang.et.js +locale/lang.fa.js +locale/lang.fi.js +locale/lang.fr.js +locale/lang.ga.js +locale/lang.gl.js +locale/lang.hi.js +locale/lang.hr.js +locale/lang.hu.js +locale/lang.hy.js +locale/lang.id.js +locale/lang.is.js +locale/lang.it.js +locale/lang.iw.js +locale/lang.ja.js +locale/lang.ko.js +locale/lang.lt.js +locale/lang.lv.js +locale/lang.mk.js +locale/lang.ms.js +locale/lang.mt.js +locale/lang.nl.js +locale/lang.no.js +locale/lang.pl.js +locale/lang.pt-PT.js +locale/lang.ro.js +locale/lang.ru.js +locale/lang.sk.js +locale/lang.sl.js +locale/lang.sq.js +locale/lang.sr.js +locale/lang.sv.js +locale/lang.sw.js +locale/lang.th.js +locale/lang.tl.js +locale/lang.tr.js +locale/lang.uk.js +locale/lang.vi.js +locale/lang.yi.js +locale/lang.zh-CN.js +locale/lang.zh-TW.js +locale/lang.zh.js diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js new file mode 100644 index 0000000..fef5e7d --- /dev/null +++ b/editor/svgcanvas.js @@ -0,0 +1,8771 @@ +/* + * svgcanvas.js + * + * Licensed under the Apache License, Version 2 + * + * Copyright(c) 2010 Alexis Deveria + * Copyright(c) 2010 Pavol Rusnak + * Copyright(c) 2010 Jeff Schiller + * + */ + +// Dependencies: +// 1) jQuery +// 2) browser.js +// 3) svgtransformlist.js +// 4) math.js +// 5) units.js +// 6) svgutils.js +// 7) sanitize.js +// 8) history.js +// 9) select.js +// 10) draw.js +// 11) path.js + +if(!window.console) { + window.console = {}; + window.console.log = function(str) {}; + window.console.dir = function(str) {}; +} + +if(window.opera) { + window.console.log = function(str) { opera.postError(str); }; + window.console.dir = function(str) {}; +} + +(function() { + + // This fixes $(...).attr() to work as expected with SVG elements. + // Does not currently use *AttributeNS() since we rarely need that. + + // See http://api.jquery.com/attr/ for basic documentation of .attr() + + // Additional functionality: + // - When getting attributes, a string that's a number is return as type number. + // - If an array is supplied as first parameter, multiple values are returned + // as an object with values for each given attributes + + var proxied = jQuery.fn.attr, svgns = "http://www.w3.org/2000/svg"; + jQuery.fn.attr = function(key, value) { + var len = this.length; + if(!len) return proxied.apply(this, arguments); + for(var i=0; i<len; i++) { + var elem = this[i]; + // set/get SVG attribute + if(elem.namespaceURI === svgns) { + // Setting attribute + if(value !== undefined) { + elem.setAttribute(key, value); + } else if($.isArray(key)) { + // Getting attributes from array + var j = key.length, obj = {}; + + while(j--) { + var aname = key[j]; + var attr = elem.getAttribute(aname); + // This returns a number when appropriate + if(attr || attr === "0") { + attr = isNaN(attr)?attr:attr-0; + } + obj[aname] = attr; + } + return obj; + + } else if(typeof key === "object") { + // Setting attributes form object + for(var v in key) { + elem.setAttribute(v, key[v]); + } + // Getting attribute + } else { + var attr = elem.getAttribute(key); + if(attr || attr === "0") { + attr = isNaN(attr)?attr:attr-0; + } + + return attr; + } + } else { + return proxied.apply(this, arguments); + } + } + return this; + }; + +}()); + +// Class: SvgCanvas +// The main SvgCanvas class that manages all SVG-related functions +// +// Parameters: +// container - The container HTML element that should hold the SVG root element +// config - An object that contains configuration data +$.SvgCanvas = function(container, config) +{ +// Namespace constants +var svgns = "http://www.w3.org/2000/svg", + xlinkns = "http://www.w3.org/1999/xlink", + xmlns = "http://www.w3.org/XML/1998/namespace", + xmlnsns = "http://www.w3.org/2000/xmlns/", // see http://www.w3.org/TR/REC-xml-names/#xmlReserved + se_ns = "http://svg-edit.googlecode.com", + htmlns = "http://www.w3.org/1999/xhtml", + mathns = "http://www.w3.org/1998/Math/MathML"; + +// Default configuration options +var curConfig = { + show_outside_canvas: true, + selectNew: true, + dimensions: [640, 480] +}; + +// Update config with new one if given +if(config) { + $.extend(curConfig, config); +} + +// Array with width/height of canvas +var dimensions = curConfig.dimensions; + +var canvas = this; + +// "document" element associated with the container (same as window.document using default svg-editor.js) +// NOTE: This is not actually a SVG document, but a HTML document. +var svgdoc = container.ownerDocument; + +// This is a container for the document being edited, not the document itself. +var svgroot = svgdoc.importNode(svgedit.utilities.text2xml( + '<svg id="svgroot" xmlns="' + svgns + '" xlinkns="' + xlinkns + '" ' + + 'width="' + dimensions[0] + '" height="' + dimensions[1] + '" x="' + dimensions[0] + '" y="' + dimensions[1] + '" overflow="visible">' + + '<defs>' + + '<filter id="canvashadow" filterUnits="objectBoundingBox">' + + '<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>'+ + '<feOffset in="blur" dx="5" dy="5" result="offsetBlur"/>'+ + '<feMerge>'+ + '<feMergeNode in="offsetBlur"/>'+ + '<feMergeNode in="SourceGraphic"/>'+ + '</feMerge>'+ + '</filter>'+ + '</defs>'+ + '</svg>').documentElement, true); +container.appendChild(svgroot); + +// The actual element that represents the final output SVG element +var svgcontent = svgdoc.createElementNS(svgns, "svg"); + +// This function resets the svgcontent element while keeping it in the DOM. +var clearSvgContentElement = canvas.clearSvgContentElement = function() { + while (svgcontent.firstChild) { svgcontent.removeChild(svgcontent.firstChild); } + + // TODO: Clear out all other attributes first? + $(svgcontent).attr({ + id: 'svgcontent', + width: dimensions[0], + height: dimensions[1], + x: dimensions[0], + y: dimensions[1], + overflow: curConfig.show_outside_canvas ? 'visible' : 'hidden', + xmlns: svgns, + "xmlns:se": se_ns, + "xmlns:xlink": xlinkns + }).appendTo(svgroot); + + // TODO: make this string optional and set by the client + var comment = svgdoc.createComment(" Created with SVG-edit - http://svg-edit.googlecode.com/ "); + svgcontent.appendChild(comment); +}; +clearSvgContentElement(); + +// Prefix string for element IDs +var idprefix = "svg_"; + +// Function: setIdPrefix +// Changes the ID prefix to the given value +// +// Parameters: +// p - String with the new prefix +canvas.setIdPrefix = function(p) { + idprefix = p; +}; + +// Current svgedit.draw.Drawing object +// @type {svgedit.draw.Drawing} +canvas.current_drawing_ = new svgedit.draw.Drawing(svgcontent, idprefix); + +// Function: getCurrentDrawing +// Returns the current Drawing. +// @return {svgedit.draw.Drawing} +var getCurrentDrawing = canvas.getCurrentDrawing = function() { + return canvas.current_drawing_; +}; + +// Float displaying the current zoom level (1 = 100%, .5 = 50%, etc) +var current_zoom = 1; + +// pointer to current group (for in-group editing) +var current_group = null; + +// Object containing data for the currently selected styles +var all_properties = { + shape: { + fill: (curConfig.initFill.color == 'none' ? '' : '#') + curConfig.initFill.color, + fill_paint: null, + fill_opacity: curConfig.initFill.opacity, + stroke: "#" + curConfig.initStroke.color, + stroke_paint: null, + stroke_opacity: curConfig.initStroke.opacity, + stroke_width: curConfig.initStroke.width, + stroke_dasharray: 'none', + stroke_linejoin: 'miter', + stroke_linecap: 'butt', + opacity: curConfig.initOpacity + } +}; + +all_properties.text = $.extend(true, {}, all_properties.shape); +$.extend(all_properties.text, { + fill: "#000000", + stroke_width: 0, + font_size: 24, + font_family: 'serif' +}); + +// Current shape style properties +var cur_shape = all_properties.shape; + +// Array with all the currently selected elements +// default size of 1 until it needs to grow bigger +var selectedElements = new Array(1); + +// Function: addSvgElementFromJson +// Create a new SVG element based on the given object keys/values and add it to the current layer +// The element will be ran through cleanupElement before being returned +// +// Parameters: +// data - Object with the following keys/values: +// * element - tag name of the SVG element to create +// * attr - Object with attributes key-values to assign to the new element +// * curStyles - Boolean indicating that current style attributes should be applied first +// +// Returns: The new element +var addSvgElementFromJson = this.addSvgElementFromJson = function(data) { + var shape = svgedit.utilities.getElem(data.attr.id); + // if shape is a path but we need to create a rect/ellipse, then remove the path + var current_layer = getCurrentDrawing().getCurrentLayer(); + if (shape && data.element != shape.tagName) { + current_layer.removeChild(shape); + shape = null; + } + if (!shape) { + shape = svgdoc.createElementNS(svgns, data.element); + if (current_layer) { + (current_group || current_layer).appendChild(shape); + } + } + if(data.curStyles) { + svgedit.utilities.assignAttributes(shape, { + "fill": cur_shape.fill, + "stroke": cur_shape.stroke, + "stroke-width": cur_shape.stroke_width, + "stroke-dasharray": cur_shape.stroke_dasharray, + "stroke-linejoin": cur_shape.stroke_linejoin, + "stroke-linecap": cur_shape.stroke_linecap, + "stroke-opacity": cur_shape.stroke_opacity, + "fill-opacity": cur_shape.fill_opacity, + "opacity": cur_shape.opacity / 2, + "style": "pointer-events:inherit" + }, 100); + } + svgedit.utilities.assignAttributes(shape, data.attr, 100); + svgedit.utilities.cleanupElement(shape); + return shape; +}; + + +// import svgtransformlist.js +var getTransformList = canvas.getTransformList = svgedit.transformlist.getTransformList; + +// import from math.js. +var transformPoint = svgedit.math.transformPoint; +var matrixMultiply = canvas.matrixMultiply = svgedit.math.matrixMultiply; +var hasMatrixTransform = canvas.hasMatrixTransform = svgedit.math.hasMatrixTransform; +var transformListToTransform = canvas.transformListToTransform = svgedit.math.transformListToTransform; +var snapToAngle = svgedit.math.snapToAngle; +var getMatrix = svgedit.math.getMatrix; + +// initialize from units.js +// send in an object implementing the ElementContainer interface (see units.js) +svgedit.units.init({ + getBaseUnit: function() { return curConfig.baseUnit; }, + getElement: svgedit.utilities.getElem, + getHeight: function() { return svgcontent.getAttribute("height")/current_zoom; }, + getWidth: function() { return svgcontent.getAttribute("width")/current_zoom; }, + getRoundDigits: function() { return save_options.round_digits; } +}); +// import from units.js +var convertToNum = canvas.convertToNum = svgedit.units.convertToNum; + +// import from svgutils.js +svgedit.utilities.init({ + getDOMDocument: function() { return svgdoc; }, + getDOMContainer: function() { return container; }, + getSVGRoot: function() { return svgroot; }, + // TODO: replace this mostly with a way to get the current drawing. + getSelectedElements: function() { return selectedElements; }, + getSVGContent: function() { return svgcontent; } +}); +var getUrlFromAttr = canvas.getUrlFromAttr = svgedit.utilities.getUrlFromAttr; +var getHref = canvas.getHref = svgedit.utilities.getHref; +var setHref = canvas.setHref = svgedit.utilities.setHref; +var getPathBBox = svgedit.utilities.getPathBBox; +var getBBox = canvas.getBBox = svgedit.utilities.getBBox; +var getRotationAngle = canvas.getRotationAngle = svgedit.utilities.getRotationAngle; +var getElem = canvas.getElem = svgedit.utilities.getElem; +var assignAttributes = canvas.assignAttributes = svgedit.utilities.assignAttributes; +var cleanupElement = this.cleanupElement = svgedit.utilities.cleanupElement; + +// import from sanitize.js +var nsMap = svgedit.sanitize.getNSMap(); +var sanitizeSvg = canvas.sanitizeSvg = svgedit.sanitize.sanitizeSvg; + +// import from history.js +var MoveElementCommand = svgedit.history.MoveElementCommand; +var InsertElementCommand = svgedit.history.InsertElementCommand; +var RemoveElementCommand = svgedit.history.RemoveElementCommand; +var ChangeElementCommand = svgedit.history.ChangeElementCommand; +var BatchCommand = svgedit.history.BatchCommand; +// Implement the svgedit.history.HistoryEventHandler interface. +canvas.undoMgr = new svgedit.history.UndoManager({ + handleHistoryEvent: function(eventType, cmd) { + var EventTypes = svgedit.history.HistoryEventTypes; + // TODO: handle setBlurOffsets. + if (eventType == EventTypes.BEFORE_UNAPPLY || eventType == EventTypes.BEFORE_APPLY) { + canvas.clearSelection(); + } else if (eventType == EventTypes.AFTER_APPLY || eventType == EventTypes.AFTER_UNAPPLY) { + var elems = cmd.elements(); + canvas.pathActions.clear(); + call("changed", elems); + + var cmdType = cmd.type(); + var isApply = (eventType == EventTypes.AFTER_APPLY); + if (cmdType == MoveElementCommand.type()) { + var parent = isApply ? cmd.newParent : cmd.oldParent; + if (parent == svgcontent) { + canvas.identifyLayers(); + } + } else if (cmdType == InsertElementCommand.type() || + cmdType == RemoveElementCommand.type()) { + if (cmd.parent == svgcontent) { + canvas.identifyLayers(); + } + if (cmdType == InsertElementCommand.type()) { + if (isApply) restoreRefElems(cmd.elem); + } else { + if (!isApply) restoreRefElems(cmd.elem); + } + + if(cmd.elem.tagName === 'use') { + setUseData(cmd.elem); + } + } else if (cmdType == ChangeElementCommand.type()) { + // if we are changing layer names, re-identify all layers + if (cmd.elem.tagName == "title" && cmd.elem.parentNode.parentNode == svgcontent) { + canvas.identifyLayers(); + } + var values = isApply ? cmd.newValues : cmd.oldValues; + // If stdDeviation was changed, update the blur. + if (values["stdDeviation"]) { + canvas.setBlurOffsets(cmd.elem.parentNode, values["stdDeviation"]); + } + + // Remove & Re-add hack for Webkit (issue 775) + if(cmd.elem.tagName === 'use' && svgedit.browser.isWebkit()) { + var elem = cmd.elem; + if(!elem.getAttribute('x') && !elem.getAttribute('y')) { + var parent = elem.parentNode; + var sib = elem.nextSibling; + parent.removeChild(elem); + parent.insertBefore(elem, sib); + } + } + } + } + } +}); +var addCommandToHistory = function(cmd) { + canvas.undoMgr.addCommandToHistory(cmd); +}; + +// import from select.js +svgedit.select.init(curConfig, { + createSVGElement: function(jsonMap) { return canvas.addSvgElementFromJson(jsonMap); }, + svgRoot: function() { return svgroot; }, + svgContent: function() { return svgcontent; }, + currentZoom: function() { return current_zoom; }, + // TODO(codedread): Remove when getStrokedBBox() has been put into svgutils.js. + getStrokedBBox: function(elems) { return canvas.getStrokedBBox([elems]); } +}); +// this object manages selectors for us +var selectorManager = this.selectorManager = svgedit.select.getSelectorManager(); + +// Import from path.js +svgedit.path.init({ + getCurrentZoom: function() { return current_zoom; }, + getSVGRoot: function() { return svgroot; } +}); + +// Function: snapToGrid +// round value to for snapping +// NOTE: This function did not move to svgutils.js since it depends on curConfig. +svgedit.utilities.snapToGrid = function(value){ + var stepSize = curConfig.snappingStep; + var unit = curConfig.baseUnit; + if(unit !== "px") { + stepSize *= svgedit.units.getTypeMap()[unit]; + } + value = Math.round(value/stepSize)*stepSize; + return value; +}; +var snapToGrid = svgedit.utilities.snapToGrid; + +// Interface strings, usually for title elements +var uiStrings = { + "exportNoBlur": "Blurred elements will appear as un-blurred", + "exportNoforeignObject": "foreignObject elements will not appear", + "exportNoDashArray": "Strokes will appear filled", + "exportNoText": "Text may not appear as expected" +}; + +var visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use'; +var ref_attrs = ["clip-path", "fill", "filter", "marker-end", "marker-mid", "marker-start", "mask", "stroke"]; + +var elData = $.data; + +// Animation element to change the opacity of any newly created element +var opac_ani = document.createElementNS(svgns, 'animate'); +$(opac_ani).attr({ + attributeName: 'opacity', + begin: 'indefinite', + dur: 1, + fill: 'freeze' +}).appendTo(svgroot); + +var restoreRefElems = function(elem) { + // Look for missing reference elements, restore any found + var attrs = $(elem).attr(ref_attrs); + for(var o in attrs) { + var val = attrs[o]; + if (val && val.indexOf('url(') === 0) { + var id = getUrlFromAttr(val).substr(1); + var ref = getElem(id); + if(!ref) { + findDefs().appendChild(removedElements[id]); + delete removedElements[id]; + } + } + } + + var childs = elem.getElementsByTagName('*'); + + if(childs.length) { + for(var i = 0, l = childs.length; i < l; i++) { + restoreRefElems(childs[i]); + } + } +}; + +(function() { + // TODO For Issue 208: this is a start on a thumbnail + // var svgthumb = svgdoc.createElementNS(svgns, "use"); + // svgthumb.setAttribute('width', '100'); + // svgthumb.setAttribute('height', '100'); + // svgedit.utilities.setHref(svgthumb, '#svgcontent'); + // svgroot.appendChild(svgthumb); + +})(); + +// Object to contain image data for raster images that were found encodable +var encodableImages = {}, + + // String with image URL of last loadable image + last_good_img_url = curConfig.imgPath + 'logo.png', + + // Array with current disabled elements (for in-group editing) + disabled_elems = [], + + // Object with save options + save_options = {round_digits: 5}, + + // Boolean indicating whether or not a draw action has been started + started = false, + + // String with an element's initial transform attribute value + start_transform = null, + + // String indicating the current editor mode + current_mode = "select", + + // String with the current direction in which an element is being resized + current_resize_mode = "none", + + // Object with IDs for imported files, to see if one was already added + import_ids = {}; + +// Current text style properties +var cur_text = all_properties.text, + + // Current general properties + cur_properties = cur_shape, + + // Array with selected elements' Bounding box object +// selectedBBoxes = new Array(1), + + // The DOM element that was just selected + justSelected = null, + + // DOM element for selection rectangle drawn by the user + rubberBox = null, + + // Array of current BBoxes (still needed?) + curBBoxes = [], + + // Object to contain all included extensions + extensions = {}, + + // Canvas point for the most recent right click + lastClickPoint = null, + + // Map of deleted reference elements + removedElements = {} + +// Clipboard for cut, copy&pasted elements +canvas.clipBoard = []; + +// Should this return an array by default, so extension results aren't overwritten? +var runExtensions = this.runExtensions = function(action, vars, returnArray) { + var result = false; + if(returnArray) result = []; + $.each(extensions, function(name, opts) { + if(action in opts) { + if(returnArray) { + result.push(opts[action](vars)) + } else { + result = opts[action](vars); + } + } + }); + return result; +} + +// Function: addExtension +// Add an extension to the editor +// +// Parameters: +// name - String with the ID of the extension +// ext_func - Function supplied by the extension with its data +this.addExtension = function(name, ext_func) { + if(!(name in extensions)) { + // Provide private vars/funcs here. Is there a better way to do this? + + if($.isFunction(ext_func)) { + var ext = ext_func($.extend(canvas.getPrivateMethods(), { + svgroot: svgroot, + svgcontent: svgcontent, + nonce: getCurrentDrawing().getNonce(), + selectorManager: selectorManager + })); + } else { + var ext = ext_func; + } + extensions[name] = ext; + call("extension_added", ext); + } else { + console.log('Cannot add extension "' + name + '", an extension by that name already exists"'); + } +}; + +// This method rounds the incoming value to the nearest value based on the current_zoom +var round = this.round = function(val) { + return parseInt(val*current_zoom)/current_zoom; +}; + +// This method sends back an array or a NodeList full of elements that +// intersect the multi-select rubber-band-box on the current_layer only. +// +// Since the only browser that supports the SVG DOM getIntersectionList is Opera, +// we need to provide an implementation here. We brute-force it for now. +// +// Reference: +// Firefox does not implement getIntersectionList(), see https://bugzilla.mozilla.org/show_bug.cgi?id=501421 +// Webkit does not implement getIntersectionList(), see https://bugs.webkit.org/show_bug.cgi?id=11274 +var getIntersectionList = this.getIntersectionList = function(rect) { + if (rubberBox == null) { return null; } + + var parent = current_group || getCurrentDrawing().getCurrentLayer(); + + if(!curBBoxes.length) { + // Cache all bboxes + curBBoxes = getVisibleElementsAndBBoxes(parent); + } + + var resultList = null; + try { + resultList = parent.getIntersectionList(rect, null); + } catch(e) { } + + if (resultList == null || typeof(resultList.item) != "function") { + resultList = []; + + if(!rect) { + var rubberBBox = rubberBox.getBBox(); + var bb = {}; + + for(var o in rubberBBox) { + bb[o] = rubberBBox[o] / current_zoom; + } + rubberBBox = bb; + + } else { + var rubberBBox = rect; + } + var i = curBBoxes.length; + while (i--) { + if(!rubberBBox.width || !rubberBBox.width) continue; + if (svgedit.math.rectsIntersect(rubberBBox, curBBoxes[i].bbox)) { + resultList.push(curBBoxes[i].elem); + } + } + } + // addToSelection expects an array, but it's ok to pass a NodeList + // because using square-bracket notation is allowed: + // http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html + return resultList; +}; + +// TODO(codedread): Migrate this into svgutils.js +// Function: getStrokedBBox +// Get the bounding box for one or more stroked and/or transformed elements +// +// Parameters: +// elems - Array with DOM elements to check +// +// Returns: +// A single bounding box object +getStrokedBBox = this.getStrokedBBox = function(elems) { + if(!elems) elems = getVisibleElements(); + if(!elems.length) return false; + // Make sure the expected BBox is returned if the element is a group + var getCheckedBBox = function(elem) { + + try { + // TODO: Fix issue with rotated groups. Currently they work + // fine in FF, but not in other browsers (same problem mentioned + // in Issue 339 comment #2). + + var bb = svgedit.utilities.getBBox(elem); + + var angle = svgedit.utilities.getRotationAngle(elem); + if ((angle && angle % 90) || + svgedit.math.hasMatrixTransform(svgedit.transformlist.getTransformList(elem))) { + // Accurate way to get BBox of rotated element in Firefox: + // Put element in group and get its BBox + + var good_bb = false; + + // Get the BBox from the raw path for these elements + var elemNames = ['ellipse','path','line','polyline','polygon']; + if(elemNames.indexOf(elem.tagName) >= 0) { + bb = good_bb = canvas.convertToPath(elem, true); + } else if(elem.tagName == 'rect') { + // Look for radius + var rx = elem.getAttribute('rx'); + var ry = elem.getAttribute('ry'); + if(rx || ry) { + bb = good_bb = canvas.convertToPath(elem, true); + } + } + + if(!good_bb) { + // Must use clone else FF freaks out + var clone = elem.cloneNode(true); + var g = document.createElementNS(svgns, "g"); + var parent = elem.parentNode; + parent.appendChild(g); + g.appendChild(clone); + bb = svgedit.utilities.bboxToObj(g.getBBox()); + parent.removeChild(g); + } + + + // Old method: Works by giving the rotated BBox, + // this is (unfortunately) what Opera and Safari do + // natively when getting the BBox of the parent group +// var angle = angle * Math.PI / 180.0; +// var rminx = Number.MAX_VALUE, rminy = Number.MAX_VALUE, +// rmaxx = Number.MIN_VALUE, rmaxy = Number.MIN_VALUE; +// var cx = round(bb.x + bb.width/2), +// cy = round(bb.y + bb.height/2); +// var pts = [ [bb.x - cx, bb.y - cy], +// [bb.x + bb.width - cx, bb.y - cy], +// [bb.x + bb.width - cx, bb.y + bb.height - cy], +// [bb.x - cx, bb.y + bb.height - cy] ]; +// var j = 4; +// while (j--) { +// var x = pts[j][0], +// y = pts[j][1], +// r = Math.sqrt( x*x + y*y ); +// var theta = Math.atan2(y,x) + angle; +// x = round(r * Math.cos(theta) + cx); +// y = round(r * Math.sin(theta) + cy); +// +// // now set the bbox for the shape after it's been rotated +// if (x < rminx) rminx = x; +// if (y < rminy) rminy = y; +// if (x > rmaxx) rmaxx = x; +// if (y > rmaxy) rmaxy = y; +// } +// +// bb.x = rminx; +// bb.y = rminy; +// bb.width = rmaxx - rminx; +// bb.height = rmaxy - rminy; + } + return bb; + } catch(e) { + console.log(elem, e); + return null; + } + }; + + var full_bb; + $.each(elems, function() { + if(full_bb) return; + if(!this.parentNode) return; + full_bb = getCheckedBBox(this); + }); + + // This shouldn't ever happen... + if(full_bb == null) return null; + + // full_bb doesn't include the stoke, so this does no good! +// if(elems.length == 1) return full_bb; + + var max_x = full_bb.x + full_bb.width; + var max_y = full_bb.y + full_bb.height; + var min_x = full_bb.x; + var min_y = full_bb.y; + + // FIXME: same re-creation problem with this function as getCheckedBBox() above + var getOffset = function(elem) { + var sw = elem.getAttribute("stroke-width"); + var offset = 0; + if (elem.getAttribute("stroke") != "none" && !isNaN(sw)) { + offset += sw/2; + } + return offset; + } + var bboxes = []; + $.each(elems, function(i, elem) { + var cur_bb = getCheckedBBox(elem); + if(cur_bb) { + var offset = getOffset(elem); + min_x = Math.min(min_x, cur_bb.x - offset); + min_y = Math.min(min_y, cur_bb.y - offset); + bboxes.push(cur_bb); + } + }); + + full_bb.x = min_x; + full_bb.y = min_y; + + $.each(elems, function(i, elem) { + var cur_bb = bboxes[i]; + // ensure that elem is really an element node + if (cur_bb && elem.nodeType == 1) { + var offset = getOffset(elem); + max_x = Math.max(max_x, cur_bb.x + cur_bb.width + offset); + max_y = Math.max(max_y, cur_bb.y + cur_bb.height + offset); + } + }); + + full_bb.width = max_x - min_x; + full_bb.height = max_y - min_y; + return full_bb; +} + +// Function: getVisibleElements +// Get all elements that have a BBox (excludes <defs>, <title>, etc). +// Note that 0-opacity, off-screen etc elements are still considered "visible" +// for this function +// +// Parameters: +// parent - The parent DOM element to search within +// +// Returns: +// An array with all "visible" elements. +var getVisibleElements = this.getVisibleElements = function(parent) { + if(!parent) parent = $(svgcontent).children(); // Prevent layers from being included + + var contentElems = []; + $(parent).children().each(function(i, elem) { + try { + if (elem.getBBox()) { + contentElems.push(elem); + } + } catch(e) {} + }); + return contentElems.reverse(); +}; + +// Function: getVisibleElementsAndBBoxes +// Get all elements that have a BBox (excludes <defs>, <title>, etc). +// Note that 0-opacity, off-screen etc elements are still considered "visible" +// for this function +// +// Parameters: +// parent - The parent DOM element to search within +// +// Returns: +// An array with objects that include: +// * elem - The element +// * bbox - The element's BBox as retrieved from getStrokedBBox +var getVisibleElementsAndBBoxes = this.getVisibleElementsAndBBoxes = function(parent) { + if(!parent) parent = $(svgcontent).children(); // Prevent layers from being included + + var contentElems = []; + $(parent).children().each(function(i, elem) { + try { + if (elem.getBBox()) { + contentElems.push({'elem':elem, 'bbox':getStrokedBBox([elem])}); + } + } catch(e) {} + }); + return contentElems.reverse(); +}; + +// Function: groupSvgElem +// Wrap an SVG element into a group element, mark the group as 'gsvg' +// +// Parameters: +// elem - SVG element to wrap +var groupSvgElem = this.groupSvgElem = function(elem) { + var g = document.createElementNS(svgns, "g"); + elem.parentNode.replaceChild(g, elem); + $(g).append(elem).data('gsvg', elem)[0].id = getNextId(); +} + +// Function: copyElem +// Create a clone of an element, updating its ID and its children's IDs when needed +// +// Parameters: +// el - DOM element to clone +// +// Returns: The cloned element +var copyElem = function(el) { + // manually create a copy of the element + var new_el = document.createElementNS(el.namespaceURI, el.nodeName); + $.each(el.attributes, function(i, attr) { + if (attr.localName != '-moz-math-font-style') { + new_el.setAttributeNS(attr.namespaceURI, attr.nodeName, attr.nodeValue); + } + }); + // set the copied element's new id + new_el.removeAttribute("id"); + new_el.id = getNextId(); + + // Opera's "d" value needs to be reset for Opera/Win/non-EN + // Also needed for webkit (else does not keep curved segments on clone) + if(svgedit.browser.isWebkit() && el.nodeName == 'path') { + var fixed_d = pathActions.convertPath(el); + new_el.setAttribute('d', fixed_d); + } + + // now create copies of all children + $.each(el.childNodes, function(i, child) { + switch(child.nodeType) { + case 1: // element node + new_el.appendChild(copyElem(child)); + break; + case 3: // text node + new_el.textContent = child.nodeValue; + break; + default: + break; + } + }); + + if($(el).data('gsvg')) { + $(new_el).data('gsvg', new_el.firstChild); + } else if($(el).data('symbol')) { + var ref = $(el).data('symbol'); + $(new_el).data('ref', ref).data('symbol', ref); + } + + else if(new_el.tagName == 'image') { + preventClickDefault(new_el); + } + return new_el; +}; + +// Set scope for these functions +var getId, getNextId, call; + +(function(c) { + + // Object to contain editor event names and callback functions + var events = {}; + + getId = c.getId = function() { return getCurrentDrawing().getId(); }; + getNextId = c.getNextId = function() { return getCurrentDrawing().getNextId(); }; + + // Function: call + // Run the callback function associated with the given event + // + // Parameters: + // event - String with the event name + // arg - Argument to pass through to the callback function + call = c.call = function(event, arg) { + if (events[event]) { + return events[event](this, arg); + } + }; + + // Function: bind + // Attaches a callback function to an event + // + // Parameters: + // event - String indicating the name of the event + // f - The callback function to bind to the event + // + // Return: + // The previous event + c.bind = function(event, f) { + var old = events[event]; + events[event] = f; + return old; + }; + +}(canvas)); + +// Function: canvas.prepareSvg +// Runs the SVG Document through the sanitizer and then updates its paths. +// +// Parameters: +// newDoc - The SVG DOM document +this.prepareSvg = function(newDoc) { + this.sanitizeSvg(newDoc.documentElement); + + // convert paths into absolute commands + var paths = newDoc.getElementsByTagNameNS(svgns, "path"); + for (var i = 0, len = paths.length; i < len; ++i) { + var path = paths[i]; + path.setAttribute('d', pathActions.convertPath(path)); + pathActions.fixEnd(path); + } +}; + +// Function getRefElem +// Get the reference element associated with the given attribute value +// +// Parameters: +// attrVal - The attribute value as a string +var getRefElem = this.getRefElem = function(attrVal) { + return getElem(getUrlFromAttr(attrVal).substr(1)); +} + +// Function: ffClone +// Hack for Firefox bugs where text element features aren't updated or get +// messed up. See issue 136 and issue 137. +// This function clones the element and re-selects it +// TODO: Test for this bug on load and add it to "support" object instead of +// browser sniffing +// +// Parameters: +// elem - The (text) DOM element to clone +var ffClone = function(elem) { + if(!svgedit.browser.isGecko()) return elem; + var clone = elem.cloneNode(true) + elem.parentNode.insertBefore(clone, elem); + elem.parentNode.removeChild(elem); + selectorManager.releaseSelector(elem); + selectedElements[0] = clone; + selectorManager.requestSelector(clone).showGrips(true); + return clone; +} + + +// this.each is deprecated, if any extension used this it can be recreated by doing this: +// $(canvas.getRootElem()).children().each(...) + +// this.each = function(cb) { +// $(svgroot).children().each(cb); +// }; + + +// Function: setRotationAngle +// Removes any old rotations if present, prepends a new rotation at the +// transformed center +// +// Parameters: +// val - The new rotation angle in degrees +// preventUndo - Boolean indicating whether the action should be undoable or not +this.setRotationAngle = function(val, preventUndo) { + // ensure val is the proper type + val = parseFloat(val); + var elem = selectedElements[0]; + var oldTransform = elem.getAttribute("transform"); + var bbox = svgedit.utilities.getBBox(elem); + var cx = bbox.x+bbox.width/2, cy = bbox.y+bbox.height/2; + var tlist = getTransformList(elem); + + // only remove the real rotational transform if present (i.e. at index=0) + if (tlist.numberOfItems > 0) { + var xform = tlist.getItem(0); + if (xform.type == 4) { + tlist.removeItem(0); + } + } + // find R_nc and insert it + if (val != 0) { + var center = transformPoint(cx,cy,transformListToTransform(tlist).matrix); + var R_nc = svgroot.createSVGTransform(); + R_nc.setRotate(val, center.x, center.y); + if(tlist.numberOfItems) { + tlist.insertItemBefore(R_nc, 0); + } else { + tlist.appendItem(R_nc); + } + } + else if (tlist.numberOfItems == 0) { + elem.removeAttribute("transform"); + } + + if (!preventUndo) { + // we need to undo it, then redo it so it can be undo-able! :) + // TODO: figure out how to make changes to transform list undo-able cross-browser? + var newTransform = elem.getAttribute("transform"); + elem.setAttribute("transform", oldTransform); + changeSelectedAttribute("transform",newTransform,selectedElements); + call("changed", selectedElements); + } + var pointGripContainer = getElem("pathpointgrip_container"); +// if(elem.nodeName == "path" && pointGripContainer) { +// pathActions.setPointContainerTransform(elem.getAttribute("transform")); +// } + var selector = selectorManager.requestSelector(selectedElements[0]); + selector.resize(); + selector.updateGripCursors(val); +}; + +// Function: recalculateAllSelectedDimensions +// Runs recalculateDimensions on the selected elements, +// adding the changes to a single batch command +var recalculateAllSelectedDimensions = this.recalculateAllSelectedDimensions = function() { + var text = (current_resize_mode == "none" ? "position" : "size"); + var batchCmd = new BatchCommand(text); + + var i = selectedElements.length; + while(i--) { + var elem = selectedElements[i]; +// if(getRotationAngle(elem) && !hasMatrixTransform(getTransformList(elem))) continue; + var cmd = recalculateDimensions(elem); + if (cmd) { + batchCmd.addSubCommand(cmd); + } + } + + if (!batchCmd.isEmpty()) { + addCommandToHistory(batchCmd); + call("changed", selectedElements); + } +}; + +// this is how we map paths to our preferred relative segment types +var pathMap = [0, 'z', 'M', 'm', 'L', 'l', 'C', 'c', 'Q', 'q', 'A', 'a', + 'H', 'h', 'V', 'v', 'S', 's', 'T', 't']; + +// Debug tool to easily see the current matrix in the browser's console +var logMatrix = function(m) { + console.log([m.a,m.b,m.c,m.d,m.e,m.f]); +}; + +// Function: remapElement +// Applies coordinate changes to an element based on the given matrix +// +// Parameters: +// selected - DOM element to be changed +// changes - Object with changes to be remapped +// m - Matrix object to use for remapping coordinates +var remapElement = this.remapElement = function(selected,changes,m) { + + var remap = function(x,y) { return transformPoint(x,y,m); }, + scalew = function(w) { return m.a*w; }, + scaleh = function(h) { return m.d*h; }, + doSnapping = curConfig.gridSnapping && selected.parentNode.parentNode.localName === "svg", + finishUp = function() { + if(doSnapping) for(var o in changes) changes[o] = snapToGrid(changes[o]); + assignAttributes(selected, changes, 1000, true); + } + box = svgedit.utilities.getBBox(selected); + + for(var i = 0; i < 2; i++) { + var type = i === 0 ? 'fill' : 'stroke'; + var attrVal = selected.getAttribute(type); + if(attrVal && attrVal.indexOf('url(') === 0) { + if(m.a < 0 || m.d < 0) { + var grad = getRefElem(attrVal); + var newgrad = grad.cloneNode(true); + + if(m.a < 0) { + //flip x + var x1 = newgrad.getAttribute('x1'); + var x2 = newgrad.getAttribute('x2'); + newgrad.setAttribute('x1', -(x1 - 1)); + newgrad.setAttribute('x2', -(x2 - 1)); + } + + if(m.d < 0) { + //flip y + var y1 = newgrad.getAttribute('y1'); + var y2 = newgrad.getAttribute('y2'); + newgrad.setAttribute('y1', -(y1 - 1)); + newgrad.setAttribute('y2', -(y2 - 1)); + } + newgrad.id = getNextId(); + findDefs().appendChild(newgrad); + selected.setAttribute(type, 'url(#' + newgrad.id + ')'); + } + + // Not really working :( +// if(selected.tagName === 'path') { +// reorientGrads(selected, m); +// } + } + } + + + var elName = selected.tagName; + if(elName === "g" || elName === "text" || elName === "use") { + // if it was a translate, then just update x,y + if (m.a == 1 && m.b == 0 && m.c == 0 && m.d == 1 && + (m.e != 0 || m.f != 0) ) + { + // [T][M] = [M][T'] + // therefore [T'] = [M_inv][T][M] + var existing = transformListToTransform(selected).matrix, + t_new = matrixMultiply(existing.inverse(), m, existing); + changes.x = parseFloat(changes.x) + t_new.e; + changes.y = parseFloat(changes.y) + t_new.f; + } + else { + // we just absorb all matrices into the element and don't do any remapping + var chlist = getTransformList(selected); + var mt = svgroot.createSVGTransform(); + mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix,m)); + chlist.clear(); + chlist.appendItem(mt); + } + } + + // now we have a set of changes and an applied reduced transform list + // we apply the changes directly to the DOM + switch (elName) + { + case "foreignObject": + case "rect": + case "image": + + // Allow images to be inverted (give them matrix when flipped) + if(elName === 'image' && (m.a < 0 || m.d < 0)) { + // Convert to matrix + var chlist = getTransformList(selected); + var mt = svgroot.createSVGTransform(); + mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix,m)); + chlist.clear(); + chlist.appendItem(mt); + } else { + var pt1 = remap(changes.x,changes.y); + + changes.width = scalew(changes.width); + changes.height = scaleh(changes.height); + + changes.x = pt1.x + Math.min(0,changes.width); + changes.y = pt1.y + Math.min(0,changes.height); + changes.width = Math.abs(changes.width); + changes.height = Math.abs(changes.height); + } + finishUp(); + break; + case "ellipse": + var c = remap(changes.cx,changes.cy); + changes.cx = c.x; + changes.cy = c.y; + changes.rx = scalew(changes.rx); + changes.ry = scaleh(changes.ry); + + changes.rx = Math.abs(changes.rx); + changes.ry = Math.abs(changes.ry); + finishUp(); + break; + case "circle": + var c = remap(changes.cx,changes.cy); + changes.cx = c.x; + changes.cy = c.y; + // take the minimum of the new selected box's dimensions for the new circle radius + var tbox = svgedit.math.transformBox(box.x, box.y, box.width, box.height, m); + var w = tbox.tr.x - tbox.tl.x, h = tbox.bl.y - tbox.tl.y; + changes.r = Math.min(w/2, h/2); + + if(changes.r) changes.r = Math.abs(changes.r); + finishUp(); + break; + case "line": + var pt1 = remap(changes.x1,changes.y1), + pt2 = remap(changes.x2,changes.y2); + changes.x1 = pt1.x; + changes.y1 = pt1.y; + changes.x2 = pt2.x; + changes.y2 = pt2.y; + + case "text": + case "use": + finishUp(); + break; + case "g": + var gsvg = $(selected).data('gsvg'); + if(gsvg) { + assignAttributes(gsvg, changes, 1000, true); + } + break; + case "polyline": + case "polygon": + var len = changes.points.length; + for (var i = 0; i < len; ++i) { + var pt = changes.points[i]; + pt = remap(pt.x,pt.y); + changes.points[i].x = pt.x; + changes.points[i].y = pt.y; + } + + var len = changes.points.length; + var pstr = ""; + for (var i = 0; i < len; ++i) { + var pt = changes.points[i]; + pstr += pt.x + "," + pt.y + " "; + } + selected.setAttribute("points", pstr); + break; + case "path": + + var segList = selected.pathSegList; + var len = segList.numberOfItems; + changes.d = new Array(len); + for (var i = 0; i < len; ++i) { + var seg = segList.getItem(i); + changes.d[i] = { + type: seg.pathSegType, + x: seg.x, + y: seg.y, + x1: seg.x1, + y1: seg.y1, + x2: seg.x2, + y2: seg.y2, + r1: seg.r1, + r2: seg.r2, + angle: seg.angle, + largeArcFlag: seg.largeArcFlag, + sweepFlag: seg.sweepFlag + }; + } + + var len = changes.d.length, + firstseg = changes.d[0], + currentpt = remap(firstseg.x,firstseg.y); + changes.d[0].x = currentpt.x; + changes.d[0].y = currentpt.y; + for (var i = 1; i < len; ++i) { + var seg = changes.d[i]; + var type = seg.type; + // if absolute or first segment, we want to remap x, y, x1, y1, x2, y2 + // if relative, we want to scalew, scaleh + if (type % 2 == 0) { // absolute + var thisx = (seg.x != undefined) ? seg.x : currentpt.x, // for V commands + thisy = (seg.y != undefined) ? seg.y : currentpt.y, // for H commands + pt = remap(thisx,thisy), + pt1 = remap(seg.x1,seg.y1), + pt2 = remap(seg.x2,seg.y2); + seg.x = pt.x; + seg.y = pt.y; + seg.x1 = pt1.x; + seg.y1 = pt1.y; + seg.x2 = pt2.x; + seg.y2 = pt2.y; + seg.r1 = scalew(seg.r1), + seg.r2 = scaleh(seg.r2); + } + else { // relative + seg.x = scalew(seg.x); + seg.y = scaleh(seg.y); + seg.x1 = scalew(seg.x1); + seg.y1 = scaleh(seg.y1); + seg.x2 = scalew(seg.x2); + seg.y2 = scaleh(seg.y2); + seg.r1 = scalew(seg.r1), + seg.r2 = scaleh(seg.r2); + } + } // for each segment + + var dstr = ""; + var len = changes.d.length; + for (var i = 0; i < len; ++i) { + var seg = changes.d[i]; + var type = seg.type; + dstr += pathMap[type]; + switch(type) { + case 13: // relative horizontal line (h) + case 12: // absolute horizontal line (H) + dstr += seg.x + " "; + break; + case 15: // relative vertical line (v) + case 14: // absolute vertical line (V) + dstr += seg.y + " "; + break; + case 3: // relative move (m) + case 5: // relative line (l) + case 19: // relative smooth quad (t) + case 2: // absolute move (M) + case 4: // absolute line (L) + case 18: // absolute smooth quad (T) + dstr += seg.x + "," + seg.y + " "; + break; + case 7: // relative cubic (c) + case 6: // absolute cubic (C) + dstr += seg.x1 + "," + seg.y1 + " " + seg.x2 + "," + seg.y2 + " " + + seg.x + "," + seg.y + " "; + break; + case 9: // relative quad (q) + case 8: // absolute quad (Q) + dstr += seg.x1 + "," + seg.y1 + " " + seg.x + "," + seg.y + " "; + break; + case 11: // relative elliptical arc (a) + case 10: // absolute elliptical arc (A) + dstr += seg.r1 + "," + seg.r2 + " " + seg.angle + " " + (+seg.largeArcFlag) + + " " + (+seg.sweepFlag) + " " + seg.x + "," + seg.y + " "; + break; + case 17: // relative smooth cubic (s) + case 16: // absolute smooth cubic (S) + dstr += seg.x2 + "," + seg.y2 + " " + seg.x + "," + seg.y + " "; + break; + } + } + + selected.setAttribute("d", dstr); + break; + } +}; + +// Function: updateClipPath +// Updates a <clipPath>s values based on the given translation of an element +// +// Parameters: +// attr - The clip-path attribute value with the clipPath's ID +// tx - The translation's x value +// ty - The translation's y value +var updateClipPath = function(attr, tx, ty) { + var path = getRefElem(attr).firstChild; + + var cp_xform = getTransformList(path); + + var newxlate = svgroot.createSVGTransform(); + newxlate.setTranslate(tx, ty); + + cp_xform.appendItem(newxlate); + + // Update clipPath's dimensions + recalculateDimensions(path); +} + +// Function: recalculateDimensions +// Decides the course of action based on the element's transform list +// +// Parameters: +// selected - The DOM element to recalculate +// +// Returns: +// Undo command object with the resulting change +var recalculateDimensions = this.recalculateDimensions = function(selected) { + if (selected == null) return null; + + var tlist = getTransformList(selected); + + // remove any unnecessary transforms + if (tlist && tlist.numberOfItems > 0) { + var k = tlist.numberOfItems; + while (k--) { + var xform = tlist.getItem(k); + if (xform.type === 0) { + tlist.removeItem(k); + } + // remove identity matrices + else if (xform.type === 1) { + if (svgedit.math.isIdentity(xform.matrix)) { + tlist.removeItem(k); + } + } + // remove zero-degree rotations + else if (xform.type === 4) { + if (xform.angle === 0) { + tlist.removeItem(k); + } + } + } + // End here if all it has is a rotation + if(tlist.numberOfItems === 1 && getRotationAngle(selected)) return null; + } + + // if this element had no transforms, we are done + if (!tlist || tlist.numberOfItems == 0) { + selected.removeAttribute("transform"); + return null; + } + + // TODO: Make this work for more than 2 + if (tlist) { + var k = tlist.numberOfItems; + var mxs = []; + while (k--) { + var xform = tlist.getItem(k); + if (xform.type === 1) { + mxs.push([xform.matrix, k]); + } else if(mxs.length) { + mxs = []; + } + } + if(mxs.length === 2) { + var m_new = svgroot.createSVGTransformFromMatrix(matrixMultiply(mxs[1][0], mxs[0][0])); + tlist.removeItem(mxs[0][1]); + tlist.removeItem(mxs[1][1]); + tlist.insertItemBefore(m_new, mxs[1][1]); + } + + // combine matrix + translate + k = tlist.numberOfItems; + if(k >= 2 && tlist.getItem(k-2).type === 1 && tlist.getItem(k-1).type === 2) { + var mt = svgroot.createSVGTransform(); + + var m = matrixMultiply( + tlist.getItem(k-2).matrix, + tlist.getItem(k-1).matrix + ); + mt.setMatrix(m); + tlist.removeItem(k-2); + tlist.removeItem(k-2); + tlist.appendItem(mt); + } + } + + // If it still has a single [M] or [R][M], return null too (prevents BatchCommand from being returned). + switch ( selected.tagName ) { + // Ignore these elements, as they can absorb the [M] + case 'line': + case 'polyline': + case 'polygon': + case 'path': + break; + default: + if( + (tlist.numberOfItems === 1 && tlist.getItem(0).type === 1) + || (tlist.numberOfItems === 2 && tlist.getItem(0).type === 1 && tlist.getItem(0).type === 4) + ) { + return null; + } + } + + // Grouped SVG element + var gsvg = $(selected).data('gsvg'); + + // we know we have some transforms, so set up return variable + var batchCmd = new BatchCommand("Transform"); + + // store initial values that will be affected by reducing the transform list + var changes = {}, initial = null, attrs = []; + switch (selected.tagName) + { + case "line": + attrs = ["x1", "y1", "x2", "y2"]; + break; + case "circle": + attrs = ["cx", "cy", "r"]; + break; + case "ellipse": + attrs = ["cx", "cy", "rx", "ry"]; + break; + case "foreignObject": + case "rect": + case "image": + attrs = ["width", "height", "x", "y"]; + break; + case "use": + case "text": + attrs = ["x", "y"]; + break; + case "polygon": + case "polyline": + initial = {}; + initial["points"] = selected.getAttribute("points"); + var list = selected.points; + var len = list.numberOfItems; + changes["points"] = new Array(len); + for (var i = 0; i < len; ++i) { + var pt = list.getItem(i); + changes["points"][i] = {x:pt.x,y:pt.y}; + } + break; + case "path": + initial = {}; + initial["d"] = selected.getAttribute("d"); + changes["d"] = selected.getAttribute("d"); + break; + } // switch on element type to get initial values + + if(attrs.length) { + changes = $(selected).attr(attrs); + $.each(changes, function(attr, val) { + changes[attr] = convertToNum(attr, val); + }); + } else if(gsvg) { + // GSVG exception + changes = { + x: $(gsvg).attr('x') || 0, + y: $(gsvg).attr('y') || 0 + }; + } + + // if we haven't created an initial array in polygon/polyline/path, then + // make a copy of initial values and include the transform + if (initial == null) { + initial = $.extend(true, {}, changes); + $.each(initial, function(attr, val) { + initial[attr] = convertToNum(attr, val); + }); + } + // save the start transform value too + initial["transform"] = start_transform ? start_transform : ""; + + // if it's a regular group, we have special processing to flatten transforms + if ((selected.tagName == "g" && !gsvg) || selected.tagName == "a") { + var box = svgedit.utilities.getBBox(selected), + oldcenter = {x: box.x+box.width/2, y: box.y+box.height/2}, + newcenter = transformPoint(box.x+box.width/2, box.y+box.height/2, + transformListToTransform(tlist).matrix), + m = svgroot.createSVGMatrix(); + + + // temporarily strip off the rotate and save the old center + var gangle = getRotationAngle(selected); + if (gangle) { + var a = gangle * Math.PI / 180; + if ( Math.abs(a) > (1.0e-10) ) { + var s = Math.sin(a)/(1 - Math.cos(a)); + } else { + // FIXME: This blows up if the angle is exactly 0! + var s = 2/a; + } + for (var i = 0; i < tlist.numberOfItems; ++i) { + var xform = tlist.getItem(i); + if (xform.type == 4) { + // extract old center through mystical arts + var rm = xform.matrix; + oldcenter.y = (s*rm.e + rm.f)/2; + oldcenter.x = (rm.e - s*rm.f)/2; + tlist.removeItem(i); + break; + } + } + } + var tx = 0, ty = 0, + operation = 0, + N = tlist.numberOfItems; + + if(N) { + var first_m = tlist.getItem(0).matrix; + } + + // first, if it was a scale then the second-last transform will be it + if (N >= 3 && tlist.getItem(N-2).type == 3 && + tlist.getItem(N-3).type == 2 && tlist.getItem(N-1).type == 2) + { + operation = 3; // scale + + // if the children are unrotated, pass the scale down directly + // otherwise pass the equivalent matrix() down directly + var tm = tlist.getItem(N-3).matrix, + sm = tlist.getItem(N-2).matrix, + tmn = tlist.getItem(N-1).matrix; + + var children = selected.childNodes; + var c = children.length; + while (c--) { + var child = children.item(c); + tx = 0; + ty = 0; + if (child.nodeType == 1) { + var childTlist = getTransformList(child); + + // some children might not have a transform (<metadata>, <defs>, etc) + if (!childTlist) continue; + + var m = transformListToTransform(childTlist).matrix; + + // Convert a matrix to a scale if applicable +// if(hasMatrixTransform(childTlist) && childTlist.numberOfItems == 1) { +// if(m.b==0 && m.c==0 && m.e==0 && m.f==0) { +// childTlist.removeItem(0); +// var translateOrigin = svgroot.createSVGTransform(), +// scale = svgroot.createSVGTransform(), +// translateBack = svgroot.createSVGTransform(); +// translateOrigin.setTranslate(0, 0); +// scale.setScale(m.a, m.d); +// translateBack.setTranslate(0, 0); +// childTlist.appendItem(translateBack); +// childTlist.appendItem(scale); +// childTlist.appendItem(translateOrigin); +// } +// } + + var angle = getRotationAngle(child); + var old_start_transform = start_transform; + var childxforms = []; + start_transform = child.getAttribute("transform"); + if(angle || hasMatrixTransform(childTlist)) { + var e2t = svgroot.createSVGTransform(); + e2t.setMatrix(matrixMultiply(tm, sm, tmn, m)); + childTlist.clear(); + childTlist.appendItem(e2t); + childxforms.push(e2t); + } + // if not rotated or skewed, push the [T][S][-T] down to the child + else { + // update the transform list with translate,scale,translate + + // slide the [T][S][-T] from the front to the back + // [T][S][-T][M] = [M][T2][S2][-T2] + + // (only bringing [-T] to the right of [M]) + // [T][S][-T][M] = [T][S][M][-T2] + // [-T2] = [M_inv][-T][M] + var t2n = matrixMultiply(m.inverse(), tmn, m); + // [T2] is always negative translation of [-T2] + var t2 = svgroot.createSVGMatrix(); + t2.e = -t2n.e; + t2.f = -t2n.f; + + // [T][S][-T][M] = [M][T2][S2][-T2] + // [S2] = [T2_inv][M_inv][T][S][-T][M][-T2_inv] + var s2 = matrixMultiply(t2.inverse(), m.inverse(), tm, sm, tmn, m, t2n.inverse()); + + var translateOrigin = svgroot.createSVGTransform(), + scale = svgroot.createSVGTransform(), + translateBack = svgroot.createSVGTransform(); + translateOrigin.setTranslate(t2n.e, t2n.f); + scale.setScale(s2.a, s2.d); + translateBack.setTranslate(t2.e, t2.f); + childTlist.appendItem(translateBack); + childTlist.appendItem(scale); + childTlist.appendItem(translateOrigin); + childxforms.push(translateBack); + childxforms.push(scale); + childxforms.push(translateOrigin); +// logMatrix(translateBack.matrix); +// logMatrix(scale.matrix); + } // not rotated + batchCmd.addSubCommand( recalculateDimensions(child) ); + // TODO: If any <use> have this group as a parent and are + // referencing this child, then we need to impose a reverse + // scale on it so that when it won't get double-translated +// var uses = selected.getElementsByTagNameNS(svgns, "use"); +// var href = "#"+child.id; +// var u = uses.length; +// while (u--) { +// var useElem = uses.item(u); +// if(href == getHref(useElem)) { +// var usexlate = svgroot.createSVGTransform(); +// usexlate.setTranslate(-tx,-ty); +// getTransformList(useElem).insertItemBefore(usexlate,0); +// batchCmd.addSubCommand( recalculateDimensions(useElem) ); +// } +// } + start_transform = old_start_transform; + } // element + } // for each child + // Remove these transforms from group + tlist.removeItem(N-1); + tlist.removeItem(N-2); + tlist.removeItem(N-3); + } + else if (N >= 3 && tlist.getItem(N-1).type == 1) + { + operation = 3; // scale + m = transformListToTransform(tlist).matrix; + var e2t = svgroot.createSVGTransform(); + e2t.setMatrix(m); + tlist.clear(); + tlist.appendItem(e2t); + } + // next, check if the first transform was a translate + // if we had [ T1 ] [ M ] we want to transform this into [ M ] [ T2 ] + // therefore [ T2 ] = [ M_inv ] [ T1 ] [ M ] + else if ( (N == 1 || (N > 1 && tlist.getItem(1).type != 3)) && + tlist.getItem(0).type == 2) + { + operation = 2; // translate + var T_M = transformListToTransform(tlist).matrix; + tlist.removeItem(0); + var M_inv = transformListToTransform(tlist).matrix.inverse(); + var M2 = matrixMultiply( M_inv, T_M ); + + tx = M2.e; + ty = M2.f; + + if (tx != 0 || ty != 0) { + // we pass the translates down to the individual children + var children = selected.childNodes; + var c = children.length; + + var clipPaths_done = []; + + while (c--) { + var child = children.item(c); + if (child.nodeType == 1) { + + // Check if child has clip-path + if(child.getAttribute('clip-path')) { + // tx, ty + var attr = child.getAttribute('clip-path'); + if(clipPaths_done.indexOf(attr) === -1) { + updateClipPath(attr, tx, ty); + clipPaths_done.push(attr); + } + } + + var old_start_transform = start_transform; + start_transform = child.getAttribute("transform"); + + var childTlist = getTransformList(child); + // some children might not have a transform (<metadata>, <defs>, etc) + if (childTlist) { + var newxlate = svgroot.createSVGTransform(); + newxlate.setTranslate(tx,ty); + if(childTlist.numberOfItems) { + childTlist.insertItemBefore(newxlate, 0); + } else { + childTlist.appendItem(newxlate); + } + batchCmd.addSubCommand( recalculateDimensions(child) ); + // If any <use> have this group as a parent and are + // referencing this child, then impose a reverse translate on it + // so that when it won't get double-translated + var uses = selected.getElementsByTagNameNS(svgns, "use"); + var href = "#"+child.id; + var u = uses.length; + while (u--) { + var useElem = uses.item(u); + if(href == getHref(useElem)) { + var usexlate = svgroot.createSVGTransform(); + usexlate.setTranslate(-tx,-ty); + getTransformList(useElem).insertItemBefore(usexlate,0); + batchCmd.addSubCommand( recalculateDimensions(useElem) ); + } + } + start_transform = old_start_transform; + } + } + } + + clipPaths_done = []; + + start_transform = old_start_transform; + } + } + // else, a matrix imposition from a parent group + // keep pushing it down to the children + else if (N == 1 && tlist.getItem(0).type == 1 && !gangle) { + operation = 1; + var m = tlist.getItem(0).matrix, + children = selected.childNodes, + c = children.length; + while (c--) { + var child = children.item(c); + if (child.nodeType == 1) { + var old_start_transform = start_transform; + start_transform = child.getAttribute("transform"); + var childTlist = getTransformList(child); + + if (!childTlist) continue; + + var em = matrixMultiply(m, transformListToTransform(childTlist).matrix); + var e2m = svgroot.createSVGTransform(); + e2m.setMatrix(em); + childTlist.clear(); + childTlist.appendItem(e2m,0); + + batchCmd.addSubCommand( recalculateDimensions(child) ); + start_transform = old_start_transform; + + // Convert stroke + // TODO: Find out if this should actually happen somewhere else + var sw = child.getAttribute("stroke-width"); + if (child.getAttribute("stroke") !== "none" && !isNaN(sw)) { + var avg = (Math.abs(em.a) + Math.abs(em.d)) / 2; + child.setAttribute('stroke-width', sw * avg); + } + + } + } + tlist.clear(); + } + // else it was just a rotate + else { + if (gangle) { + var newRot = svgroot.createSVGTransform(); + newRot.setRotate(gangle,newcenter.x,newcenter.y); + if(tlist.numberOfItems) { + tlist.insertItemBefore(newRot, 0); + } else { + tlist.appendItem(newRot); + } + } + if (tlist.numberOfItems == 0) { + selected.removeAttribute("transform"); + } + return null; + } + + // if it was a translate, put back the rotate at the new center + if (operation == 2) { + if (gangle) { + newcenter = { + x: oldcenter.x + first_m.e, + y: oldcenter.y + first_m.f + }; + + var newRot = svgroot.createSVGTransform(); + newRot.setRotate(gangle,newcenter.x,newcenter.y); + if(tlist.numberOfItems) { + tlist.insertItemBefore(newRot, 0); + } else { + tlist.appendItem(newRot); + } + } + } + // if it was a resize + else if (operation == 3) { + var m = transformListToTransform(tlist).matrix; + var roldt = svgroot.createSVGTransform(); + roldt.setRotate(gangle, oldcenter.x, oldcenter.y); + var rold = roldt.matrix; + var rnew = svgroot.createSVGTransform(); + rnew.setRotate(gangle, newcenter.x, newcenter.y); + var rnew_inv = rnew.matrix.inverse(), + m_inv = m.inverse(), + extrat = matrixMultiply(m_inv, rnew_inv, rold, m); + + tx = extrat.e; + ty = extrat.f; + + if (tx != 0 || ty != 0) { + // now push this transform down to the children + // we pass the translates down to the individual children + var children = selected.childNodes; + var c = children.length; + while (c--) { + var child = children.item(c); + if (child.nodeType == 1) { + var old_start_transform = start_transform; + start_transform = child.getAttribute("transform"); + var childTlist = getTransformList(child); + var newxlate = svgroot.createSVGTransform(); + newxlate.setTranslate(tx,ty); + if(childTlist.numberOfItems) { + childTlist.insertItemBefore(newxlate, 0); + } else { + childTlist.appendItem(newxlate); + } + + batchCmd.addSubCommand( recalculateDimensions(child) ); + start_transform = old_start_transform; + } + } + } + + if (gangle) { + if(tlist.numberOfItems) { + tlist.insertItemBefore(rnew, 0); + } else { + tlist.appendItem(rnew); + } + } + } + } + // else, it's a non-group + else { + + // FIXME: box might be null for some elements (<metadata> etc), need to handle this + var box = svgedit.utilities.getBBox(selected); + + // Paths (and possbly other shapes) will have no BBox while still in <defs>, + // but we still may need to recalculate them (see issue 595). + // TODO: Figure out how to get BBox from these elements in case they + // have a rotation transform + + if(!box && selected.tagName != 'path') return null; + + + var m = svgroot.createSVGMatrix(), + // temporarily strip off the rotate and save the old center + angle = getRotationAngle(selected); + if (angle) { + var oldcenter = {x: box.x+box.width/2, y: box.y+box.height/2}, + newcenter = transformPoint(box.x+box.width/2, box.y+box.height/2, + transformListToTransform(tlist).matrix); + + var a = angle * Math.PI / 180; + if ( Math.abs(a) > (1.0e-10) ) { + var s = Math.sin(a)/(1 - Math.cos(a)); + } else { + // FIXME: This blows up if the angle is exactly 0! + var s = 2/a; + } + for (var i = 0; i < tlist.numberOfItems; ++i) { + var xform = tlist.getItem(i); + if (xform.type == 4) { + // extract old center through mystical arts + var rm = xform.matrix; + oldcenter.y = (s*rm.e + rm.f)/2; + oldcenter.x = (rm.e - s*rm.f)/2; + tlist.removeItem(i); + break; + } + } + } + + // 2 = translate, 3 = scale, 4 = rotate, 1 = matrix imposition + var operation = 0; + var N = tlist.numberOfItems; + + // Check if it has a gradient with userSpaceOnUse, in which case + // adjust it by recalculating the matrix transform. + // TODO: Make this work in Webkit using svgedit.transformlist.SVGTransformList + if(!svgedit.browser.isWebkit()) { + var fill = selected.getAttribute('fill'); + if(fill && fill.indexOf('url(') === 0) { + var paint = getRefElem(fill); + var type = 'pattern'; + if(paint.tagName !== type) type = 'gradient'; + var attrVal = paint.getAttribute(type + 'Units'); + if(attrVal === 'userSpaceOnUse') { + //Update the userSpaceOnUse element + m = transformListToTransform(tlist).matrix; + var gtlist = getTransformList(paint); + var gmatrix = transformListToTransform(gtlist).matrix; + m = matrixMultiply(m, gmatrix); + var m_str = "matrix(" + [m.a,m.b,m.c,m.d,m.e,m.f].join(",") + ")"; + paint.setAttribute(type + 'Transform', m_str); + } + } + } + + // first, if it was a scale of a non-skewed element, then the second-last + // transform will be the [S] + // if we had [M][T][S][T] we want to extract the matrix equivalent of + // [T][S][T] and push it down to the element + if (N >= 3 && tlist.getItem(N-2).type == 3 && + tlist.getItem(N-3).type == 2 && tlist.getItem(N-1).type == 2) + + // Removed this so a <use> with a given [T][S][T] would convert to a matrix. + // Is that bad? + // && selected.nodeName != "use" + { + operation = 3; // scale + m = transformListToTransform(tlist,N-3,N-1).matrix; + tlist.removeItem(N-1); + tlist.removeItem(N-2); + tlist.removeItem(N-3); + } // if we had [T][S][-T][M], then this was a skewed element being resized + // Thus, we simply combine it all into one matrix + else if(N == 4 && tlist.getItem(N-1).type == 1) { + operation = 3; // scale + m = transformListToTransform(tlist).matrix; + var e2t = svgroot.createSVGTransform(); + e2t.setMatrix(m); + tlist.clear(); + tlist.appendItem(e2t); + // reset the matrix so that the element is not re-mapped + m = svgroot.createSVGMatrix(); + } // if we had [R][T][S][-T][M], then this was a rotated matrix-element + // if we had [T1][M] we want to transform this into [M][T2] + // therefore [ T2 ] = [ M_inv ] [ T1 ] [ M ] and we can push [T2] + // down to the element + else if ( (N == 1 || (N > 1 && tlist.getItem(1).type != 3)) && + tlist.getItem(0).type == 2) + { + operation = 2; // translate + var oldxlate = tlist.getItem(0).matrix, + meq = transformListToTransform(tlist,1).matrix, + meq_inv = meq.inverse(); + m = matrixMultiply( meq_inv, oldxlate, meq ); + tlist.removeItem(0); + } + // else if this child now has a matrix imposition (from a parent group) + // we might be able to simplify + else if (N == 1 && tlist.getItem(0).type == 1 && !angle) { + // Remap all point-based elements + m = transformListToTransform(tlist).matrix; + switch (selected.tagName) { + case 'line': + changes = $(selected).attr(["x1","y1","x2","y2"]); + case 'polyline': + case 'polygon': + changes.points = selected.getAttribute("points"); + if(changes.points) { + var list = selected.points; + var len = list.numberOfItems; + changes.points = new Array(len); + for (var i = 0; i < len; ++i) { + var pt = list.getItem(i); + changes.points[i] = {x:pt.x,y:pt.y}; + } + } + case 'path': + changes.d = selected.getAttribute("d"); + operation = 1; + tlist.clear(); + break; + default: + break; + } + } + // if it was a rotation, put the rotate back and return without a command + // (this function has zero work to do for a rotate()) + else { + operation = 4; // rotation + if (angle) { + var newRot = svgroot.createSVGTransform(); + newRot.setRotate(angle,newcenter.x,newcenter.y); + + if(tlist.numberOfItems) { + tlist.insertItemBefore(newRot, 0); + } else { + tlist.appendItem(newRot); + } + } + if (tlist.numberOfItems == 0) { + selected.removeAttribute("transform"); + } + return null; + } + + // if it was a translate or resize, we need to remap the element and absorb the xform + if (operation == 1 || operation == 2 || operation == 3) { + remapElement(selected,changes,m); + } // if we are remapping + + // if it was a translate, put back the rotate at the new center + if (operation == 2) { + if (angle) { + if(!hasMatrixTransform(tlist)) { + newcenter = { + x: oldcenter.x + m.e, + y: oldcenter.y + m.f + }; + } + var newRot = svgroot.createSVGTransform(); + newRot.setRotate(angle, newcenter.x, newcenter.y); + if(tlist.numberOfItems) { + tlist.insertItemBefore(newRot, 0); + } else { + tlist.appendItem(newRot); + } + } + } + // [Rold][M][T][S][-T] became [Rold][M] + // we want it to be [Rnew][M][Tr] where Tr is the + // translation required to re-center it + // Therefore, [Tr] = [M_inv][Rnew_inv][Rold][M] + else if (operation == 3 && angle) { + var m = transformListToTransform(tlist).matrix; + var roldt = svgroot.createSVGTransform(); + roldt.setRotate(angle, oldcenter.x, oldcenter.y); + var rold = roldt.matrix; + var rnew = svgroot.createSVGTransform(); + rnew.setRotate(angle, newcenter.x, newcenter.y); + var rnew_inv = rnew.matrix.inverse(); + var m_inv = m.inverse(); + var extrat = matrixMultiply(m_inv, rnew_inv, rold, m); + + remapElement(selected,changes,extrat); + if (angle) { + if(tlist.numberOfItems) { + tlist.insertItemBefore(rnew, 0); + } else { + tlist.appendItem(rnew); + } + } + } + } // a non-group + + // if the transform list has been emptied, remove it + if (tlist.numberOfItems == 0) { + selected.removeAttribute("transform"); + } + + batchCmd.addSubCommand(new ChangeElementCommand(selected, initial)); + + return batchCmd; +}; + +// Root Current Transformation Matrix in user units +var root_sctm = null; + +// Group: Selection + +// Function: clearSelection +// Clears the selection. The 'selected' handler is then called. +// Parameters: +// noCall - Optional boolean that when true does not call the "selected" handler +var clearSelection = this.clearSelection = function(noCall) { + if (selectedElements[0] != null) { + var len = selectedElements.length; + for (var i = 0; i < len; ++i) { + var elem = selectedElements[i]; + if (elem == null) break; + selectorManager.releaseSelector(elem); + selectedElements[i] = null; + } +// selectedBBoxes[0] = null; + } + if(!noCall) call("selected", selectedElements); +}; + +// TODO: do we need to worry about selectedBBoxes here? + + +// Function: addToSelection +// Adds a list of elements to the selection. The 'selected' handler is then called. +// +// Parameters: +// elemsToAdd - an array of DOM elements to add to the selection +// showGrips - a boolean flag indicating whether the resize grips should be shown +var addToSelection = this.addToSelection = function(elemsToAdd, showGrips) { + if (elemsToAdd.length == 0) { return; } + // find the first null in our selectedElements array + var j = 0; + + while (j < selectedElements.length) { + if (selectedElements[j] == null) { + break; + } + ++j; + } + + // now add each element consecutively + var i = elemsToAdd.length; + while (i--) { + var elem = elemsToAdd[i]; + if (!elem || !svgedit.utilities.getBBox(elem)) continue; + + if(elem.tagName === 'a' && elem.childNodes.length === 1) { + // Make "a" element's child be the selected element + elem = elem.firstChild; + } + + // if it's not already there, add it + if (selectedElements.indexOf(elem) == -1) { + + selectedElements[j] = elem; + + // only the first selectedBBoxes element is ever used in the codebase these days +// if (j == 0) selectedBBoxes[0] = svgedit.utilities.getBBox(elem); + j++; + var sel = selectorManager.requestSelector(elem); + + if (selectedElements.length > 1) { + sel.showGrips(false); + } + } + } + call("selected", selectedElements); + + if (showGrips || selectedElements.length == 1) { + selectorManager.requestSelector(selectedElements[0]).showGrips(true); + } + else { + selectorManager.requestSelector(selectedElements[0]).showGrips(false); + } + + // make sure the elements are in the correct order + // See: http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-compareDocumentPosition + + selectedElements.sort(function(a,b) { + if(a && b && a.compareDocumentPosition) { + return 3 - (b.compareDocumentPosition(a) & 6); + } else if(a == null) { + return 1; + } + }); + + // Make sure first elements are not null + while(selectedElements[0] == null) selectedElements.shift(0); +}; + +// Function: selectOnly() +// Selects only the given elements, shortcut for clearSelection(); addToSelection() +// +// Parameters: +// elems - an array of DOM elements to be selected +var selectOnly = this.selectOnly = function(elems, showGrips) { + clearSelection(true); + addToSelection(elems, showGrips); +} + +// TODO: could use slice here to make this faster? +// TODO: should the 'selected' handler + +// Function: removeFromSelection +// Removes elements from the selection. +// +// Parameters: +// elemsToRemove - an array of elements to remove from selection +var removeFromSelection = this.removeFromSelection = function(elemsToRemove) { + if (selectedElements[0] == null) { return; } + if (elemsToRemove.length == 0) { return; } + + // find every element and remove it from our array copy + var newSelectedItems = new Array(selectedElements.length); + j = 0, + len = selectedElements.length; + for (var i = 0; i < len; ++i) { + var elem = selectedElements[i]; + if (elem) { + // keep the item + if (elemsToRemove.indexOf(elem) == -1) { + newSelectedItems[j] = elem; + j++; + } + else { // remove the item and its selector + selectorManager.releaseSelector(elem); + } + } + } + // the copy becomes the master now + selectedElements = newSelectedItems; +}; + +// Function: selectAllInCurrentLayer +// Clears the selection, then adds all elements in the current layer to the selection. +this.selectAllInCurrentLayer = function() { + var current_layer = getCurrentDrawing().getCurrentLayer(); + if (current_layer) { + current_mode = "select"; + selectOnly($(current_group || current_layer).children()); + } +}; + +// Function: getMouseTarget +// Gets the desired element from a mouse event +// +// Parameters: +// evt - Event object from the mouse event +// +// Returns: +// DOM element we want +var getMouseTarget = this.getMouseTarget = function(evt) { + if (evt == null) { + return null; + } + var mouse_target = evt.target; + + // if it was a <use>, Opera and WebKit return the SVGElementInstance + if (mouse_target.correspondingUseElement) mouse_target = mouse_target.correspondingUseElement; + + // for foreign content, go up until we find the foreignObject + // WebKit browsers set the mouse target to the svgcanvas div + if ([mathns, htmlns].indexOf(mouse_target.namespaceURI) >= 0 && + mouse_target.id != "svgcanvas") + { + while (mouse_target.nodeName != "foreignObject") { + mouse_target = mouse_target.parentNode; + if(!mouse_target) return svgroot; + } + } + + // Get the desired mouse_target with jQuery selector-fu + // If it's root-like, select the root + var current_layer = getCurrentDrawing().getCurrentLayer(); + if([svgroot, container, svgcontent, current_layer].indexOf(mouse_target) >= 0) { + return svgroot; + } + + var $target = $(mouse_target); + + // If it's a selection grip, return the grip parent + if($target.closest('#selectorParentGroup').length) { + // While we could instead have just returned mouse_target, + // this makes it easier to indentify as being a selector grip + return selectorManager.selectorParentGroup; + } + + while (mouse_target.parentNode !== (current_group || current_layer)) { + mouse_target = mouse_target.parentNode; + } + +// +// // go up until we hit a child of a layer +// while (mouse_target.parentNode.parentNode.tagName == 'g') { +// mouse_target = mouse_target.parentNode; +// } + // Webkit bubbles the mouse event all the way up to the div, so we + // set the mouse_target to the svgroot like the other browsers +// if (mouse_target.nodeName.toLowerCase() == "div") { +// mouse_target = svgroot; +// } + + return mouse_target; +}; + +// Mouse events +(function() { + var d_attr = null, + start_x = null, + start_y = null, + r_start_x = null, + r_start_y = null, + init_bbox = {}, + freehand = { + minx: null, + miny: null, + maxx: null, + maxy: null + }; + + // - when we are in a create mode, the element is added to the canvas + // but the action is not recorded until mousing up + // - when we are in select mode, select the element, remember the position + // and do nothing else + var mouseDown = function(evt) + { + if(canvas.spaceKey || evt.button === 1) return; + + var right_click = evt.button === 2; + + if(evt.altKey) { // duplicate when dragging + svgCanvas.cloneSelectedElements(0,0); + } + + root_sctm = svgcontent.getScreenCTM().inverse(); + + var pt = transformPoint( evt.pageX, evt.pageY, root_sctm ), + mouse_x = pt.x * current_zoom, + mouse_y = pt.y * current_zoom; + + evt.preventDefault(); + + if(right_click) { + current_mode = "select"; + lastClickPoint = pt; + } + + // This would seem to be unnecessary... +// if(['select', 'resize'].indexOf(current_mode) == -1) { +// setGradient(); +// } + + var x = mouse_x / current_zoom, + y = mouse_y / current_zoom, + mouse_target = getMouseTarget(evt); + + if(mouse_target.tagName === 'a' && mouse_target.childNodes.length === 1) { + mouse_target = mouse_target.firstChild; + } + + // real_x/y ignores grid-snap value + var real_x = r_start_x = start_x = x; + var real_y = r_start_y = start_y = y; + + if(curConfig.gridSnapping){ + x = snapToGrid(x); + y = snapToGrid(y); + start_x = snapToGrid(start_x); + start_y = snapToGrid(start_y); + } + + // if it is a selector grip, then it must be a single element selected, + // set the mouse_target to that and update the mode to rotate/resize + + if (mouse_target == selectorManager.selectorParentGroup && selectedElements[0] != null) { + var grip = evt.target; + var griptype = elData(grip, "type"); + // rotating + if (griptype == "rotate") { + current_mode = "rotate"; + } + // resizing + else if(griptype == "resize") { + current_mode = "resize"; + current_resize_mode = elData(grip, "dir"); + } + mouse_target = selectedElements[0]; + } + + start_transform = mouse_target.getAttribute("transform"); + var tlist = getTransformList(mouse_target); + switch (current_mode) { + case "select": + started = true; + current_resize_mode = "none"; + if(right_click) started = false; + + if (mouse_target != svgroot) { + // if this element is not yet selected, clear selection and select it + if (selectedElements.indexOf(mouse_target) == -1) { + // only clear selection if shift is not pressed (otherwise, add + // element to selection) + if (!evt.shiftKey) { + // No need to do the call here as it will be done on addToSelection + clearSelection(true); + } + addToSelection([mouse_target]); + justSelected = mouse_target; + pathActions.clear(); + } + // else if it's a path, go into pathedit mode in mouseup + + if(!right_click) { + // insert a dummy transform so if the element(s) are moved it will have + // a transform to use for its translate + for (var i = 0; i < selectedElements.length; ++i) { + if(selectedElements[i] == null) continue; + var slist = getTransformList(selectedElements[i]); + if(slist.numberOfItems) { + slist.insertItemBefore(svgroot.createSVGTransform(), 0); + } else { + slist.appendItem(svgroot.createSVGTransform()); + } + } + } + } + else if(!right_click){ + clearSelection(); + current_mode = "multiselect"; + if (rubberBox == null) { + rubberBox = selectorManager.getRubberBandBox(); + } + r_start_x *= current_zoom; + r_start_y *= current_zoom; +// console.log('p',[evt.pageX, evt.pageY]); +// console.log('c',[evt.clientX, evt.clientY]); +// console.log('o',[evt.offsetX, evt.offsetY]); +// console.log('s',[start_x, start_y]); + + assignAttributes(rubberBox, { + 'x': r_start_x, + 'y': r_start_y, + 'width': 0, + 'height': 0, + 'display': 'inline' + }, 100); + } + break; + case "zoom": + started = true; + if (rubberBox == null) { + rubberBox = selectorManager.getRubberBandBox(); + } + assignAttributes(rubberBox, { + 'x': real_x * current_zoom, + 'y': real_x * current_zoom, + 'width': 0, + 'height': 0, + 'display': 'inline' + }, 100); + break; + case "resize": + started = true; + start_x = x; + start_y = y; + + // Getting the BBox from the selection box, since we know we + // want to orient around it + init_bbox = svgedit.utilities.getBBox($('#selectedBox0')[0]); + var bb = {}; + $.each(init_bbox, function(key, val) { + bb[key] = val/current_zoom; + }); + init_bbox = bb; + + // append three dummy transforms to the tlist so that + // we can translate,scale,translate in mousemove + var pos = getRotationAngle(mouse_target)?1:0; + + if(hasMatrixTransform(tlist)) { + tlist.insertItemBefore(svgroot.createSVGTransform(), pos); + tlist.insertItemBefore(svgroot.createSVGTransform(), pos); + tlist.insertItemBefore(svgroot.createSVGTransform(), pos); + } else { + tlist.appendItem(svgroot.createSVGTransform()); + tlist.appendItem(svgroot.createSVGTransform()); + tlist.appendItem(svgroot.createSVGTransform()); + + if(svgedit.browser.supportsNonScalingStroke()) { + //Handle crash for newer Chrome: https://code.google.com/p/svg-edit/issues/detail?id=904 + //Chromium issue: https://code.google.com/p/chromium/issues/detail?id=114625 + // TODO: Remove this workaround (all isChrome blocks) once vendor fixes the issue + var isChrome = svgedit.browser.isChrome(); + if(isChrome) { + var delayedStroke = function(ele) { + var _stroke = ele.getAttributeNS(null, 'stroke'); + ele.removeAttributeNS(null, 'stroke'); + //Re-apply stroke after delay. Anything higher than 1 seems to cause flicker + setTimeout(function() { ele.setAttributeNS(null, 'stroke', _stroke) }, 1); + } + } + mouse_target.style.vectorEffect = 'non-scaling-stroke'; + if(isChrome) delayedStroke(mouse_target); + + var all = mouse_target.getElementsByTagName('*'), + len = all.length; + for(var i = 0; i < len; i++) { + all[i].style.vectorEffect = 'non-scaling-stroke'; + if(isChrome) delayedStroke(all[i]); + } + } + } + break; + case "fhellipse": + case "fhrect": + case "fhpath": + started = true; + d_attr = real_x + "," + real_y + " "; + var stroke_w = cur_shape.stroke_width == 0?1:cur_shape.stroke_width; + addSvgElementFromJson({ + "element": "polyline", + "curStyles": true, + "attr": { + "points": d_attr, + "id": getNextId(), + "fill": "none", + "opacity": cur_shape.opacity / 2, + "stroke-linecap": "round", + "style": "pointer-events:none" + } + }); + freehand.minx = real_x; + freehand.maxx = real_x; + freehand.miny = real_y; + freehand.maxy = real_y; + break; + case "image": + started = true; + var newImage = addSvgElementFromJson({ + "element": "image", + "attr": { + "x": x, + "y": y, + "width": 0, + "height": 0, + "id": getNextId(), + "opacity": cur_shape.opacity / 2, + "style": "pointer-events:inherit" + } + }); + setHref(newImage, last_good_img_url); + preventClickDefault(newImage); + break; + case "square": + // FIXME: once we create the rect, we lose information that this was a square + // (for resizing purposes this could be important) + case "rect": + started = true; + start_x = x; + start_y = y; + addSvgElementFromJson({ + "element": "rect", + "curStyles": true, + "attr": { + "x": x, + "y": y, + "width": 0, + "height": 0, + "id": getNextId(), + "opacity": cur_shape.opacity / 2 + } + }); + break; + case "line": + started = true; + var stroke_w = cur_shape.stroke_width == 0?1:cur_shape.stroke_width; + addSvgElementFromJson({ + "element": "line", + "curStyles": true, + "attr": { + "x1": x, + "y1": y, + "x2": x, + "y2": y, + "id": getNextId(), + "stroke": cur_shape.stroke, + "stroke-width": stroke_w, + "stroke-dasharray": cur_shape.stroke_dasharray, + "stroke-linejoin": cur_shape.stroke_linejoin, + "stroke-linecap": cur_shape.stroke_linecap, + "stroke-opacity": cur_shape.stroke_opacity, + "fill": "none", + "opacity": cur_shape.opacity / 2, + "style": "pointer-events:none" + } + }); + break; + case "circle": + started = true; + addSvgElementFromJson({ + "element": "circle", + "curStyles": true, + "attr": { + "cx": x, + "cy": y, + "r": 0, + "id": getNextId(), + "opacity": cur_shape.opacity / 2 + } + }); + break; + case "ellipse": + started = true; + addSvgElementFromJson({ + "element": "ellipse", + "curStyles": true, + "attr": { + "cx": x, + "cy": y, + "rx": 0, + "ry": 0, + "id": getNextId(), + "opacity": cur_shape.opacity / 2 + } + }); + break; + case "text": + started = true; + var newText = addSvgElementFromJson({ + "element": "text", + "curStyles": true, + "attr": { + "x": x, + "y": y, + "id": getNextId(), + "fill": cur_text.fill, + "stroke-width": cur_text.stroke_width, + "font-size": cur_text.font_size, + "font-family": cur_text.font_family, + "text-anchor": "middle", + "xml:space": "preserve", + "opacity": cur_shape.opacity + } + }); +// newText.textContent = "text"; + break; + case "path": + // Fall through + case "pathedit": + start_x *= current_zoom; + start_y *= current_zoom; + pathActions.mouseDown(evt, mouse_target, start_x, start_y); + started = true; + break; + case "textedit": + start_x *= current_zoom; + start_y *= current_zoom; + textActions.mouseDown(evt, mouse_target, start_x, start_y); + started = true; + break; + case "rotate": + started = true; + // we are starting an undoable change (a drag-rotation) + canvas.undoMgr.beginUndoableChange("transform", selectedElements); + break; + default: + // This could occur in an extension + break; + } + + var ext_result = runExtensions("mouseDown", { + event: evt, + start_x: start_x, + start_y: start_y, + selectedElements: selectedElements + }, true); + + $.each(ext_result, function(i, r) { + if(r && r.started) { + started = true; + } + }); + }; + + // in this function we do not record any state changes yet (but we do update + // any elements that are still being created, moved or resized on the canvas) + var mouseMove = function(evt) + { + if (!started) return; + if(evt.button === 1 || canvas.spaceKey) return; + + var selected = selectedElements[0], + pt = transformPoint( evt.pageX, evt.pageY, root_sctm ), + mouse_x = pt.x * current_zoom, + mouse_y = pt.y * current_zoom, + shape = getElem(getId()); + + var real_x = x = mouse_x / current_zoom; + var real_y = y = mouse_y / current_zoom; + + if(curConfig.gridSnapping){ + x = snapToGrid(x); + y = snapToGrid(y); + } + + evt.preventDefault(); + + switch (current_mode) + { + case "select": + // we temporarily use a translate on the element(s) being dragged + // this transform is removed upon mousing up and the element is + // relocated to the new location + if (selectedElements[0] !== null) { + var dx = x - start_x; + var dy = y - start_y; + + if(curConfig.gridSnapping){ + dx = snapToGrid(dx); + dy = snapToGrid(dy); + } + + if(evt.shiftKey) { var xya = snapToAngle(start_x,start_y,x,y); x=xya.x; y=xya.y; } + + if (dx != 0 || dy != 0) { + var len = selectedElements.length; + for (var i = 0; i < len; ++i) { + var selected = selectedElements[i]; + if (selected == null) break; +// if (i==0) { +// var box = svgedit.utilities.getBBox(selected); +// selectedBBoxes[i].x = box.x + dx; +// selectedBBoxes[i].y = box.y + dy; +// } + + // update the dummy transform in our transform list + // to be a translate + var xform = svgroot.createSVGTransform(); + var tlist = getTransformList(selected); + // Note that if Webkit and there's no ID for this + // element, the dummy transform may have gotten lost. + // This results in unexpected behaviour + + xform.setTranslate(dx,dy); + if(tlist.numberOfItems) { + tlist.replaceItem(xform, 0); + } else { + tlist.appendItem(xform); + } + + // update our internal bbox that we're tracking while dragging + selectorManager.requestSelector(selected).resize(); + } + + call("transition", selectedElements); + } + } + break; + case "multiselect": + real_x *= current_zoom; + real_y *= current_zoom; + assignAttributes(rubberBox, { + 'x': Math.min(r_start_x, real_x), + 'y': Math.min(r_start_y, real_y), + 'width': Math.abs(real_x - r_start_x), + 'height': Math.abs(real_y - r_start_y) + },100); + + // for each selected: + // - if newList contains selected, do nothing + // - if newList doesn't contain selected, remove it from selected + // - for any newList that was not in selectedElements, add it to selected + var elemsToRemove = [], elemsToAdd = [], + newList = getIntersectionList(), + len = selectedElements.length; + + for (var i = 0; i < len; ++i) { + var ind = newList.indexOf(selectedElements[i]); + if (ind == -1) { + elemsToRemove.push(selectedElements[i]); + } + else { + newList[ind] = null; + } + } + + len = newList.length; + for (i = 0; i < len; ++i) { if (newList[i]) elemsToAdd.push(newList[i]); } + + if (elemsToRemove.length > 0) + canvas.removeFromSelection(elemsToRemove); + + if (elemsToAdd.length > 0) + addToSelection(elemsToAdd); + + break; + case "resize": + // we track the resize bounding box and translate/scale the selected element + // while the mouse is down, when mouse goes up, we use this to recalculate + // the shape's coordinates + var tlist = getTransformList(selected), + hasMatrix = hasMatrixTransform(tlist), + box = hasMatrix ? init_bbox : svgedit.utilities.getBBox(selected), + left=box.x, top=box.y, width=box.width, + height=box.height, dx=(x-start_x), dy=(y-start_y); + + if(curConfig.gridSnapping){ + dx = snapToGrid(dx); + dy = snapToGrid(dy); + height = snapToGrid(height); + width = snapToGrid(width); + } + + // if rotated, adjust the dx,dy values + var angle = getRotationAngle(selected); + if (angle) { + var r = Math.sqrt( dx*dx + dy*dy ), + theta = Math.atan2(dy,dx) - angle * Math.PI / 180.0; + dx = r * Math.cos(theta); + dy = r * Math.sin(theta); + } + + // if not stretching in y direction, set dy to 0 + // if not stretching in x direction, set dx to 0 + if(current_resize_mode.indexOf("n")==-1 && current_resize_mode.indexOf("s")==-1) { + dy = 0; + } + if(current_resize_mode.indexOf("e")==-1 && current_resize_mode.indexOf("w")==-1) { + dx = 0; + } + + var ts = null, + tx = 0, ty = 0, + sy = height ? (height+dy)/height : 1, + sx = width ? (width+dx)/width : 1; + // if we are dragging on the north side, then adjust the scale factor and ty + if(current_resize_mode.indexOf("n") >= 0) { + sy = height ? (height-dy)/height : 1; + ty = height; + } + + // if we dragging on the east side, then adjust the scale factor and tx + if(current_resize_mode.indexOf("w") >= 0) { + sx = width ? (width-dx)/width : 1; + tx = width; + } + + // update the transform list with translate,scale,translate + var translateOrigin = svgroot.createSVGTransform(), + scale = svgroot.createSVGTransform(), + translateBack = svgroot.createSVGTransform(); + + if(curConfig.gridSnapping){ + left = snapToGrid(left); + tx = snapToGrid(tx); + top = snapToGrid(top); + ty = snapToGrid(ty); + } + + translateOrigin.setTranslate(-(left+tx),-(top+ty)); + if(evt.shiftKey) { + if(sx == 1) sx = sy + else sy = sx; + } + scale.setScale(sx,sy); + + translateBack.setTranslate(left+tx,top+ty); + if(hasMatrix) { + var diff = angle?1:0; + tlist.replaceItem(translateOrigin, 2+diff); + tlist.replaceItem(scale, 1+diff); + tlist.replaceItem(translateBack, 0+diff); + } else { + var N = tlist.numberOfItems; + tlist.replaceItem(translateBack, N-3); + tlist.replaceItem(scale, N-2); + tlist.replaceItem(translateOrigin, N-1); + } + + selectorManager.requestSelector(selected).resize(); + + call("transition", selectedElements); + + break; + case "zoom": + real_x *= current_zoom; + real_y *= current_zoom; + assignAttributes(rubberBox, { + 'x': Math.min(r_start_x*current_zoom, real_x), + 'y': Math.min(r_start_y*current_zoom, real_y), + 'width': Math.abs(real_x - r_start_x*current_zoom), + 'height': Math.abs(real_y - r_start_y*current_zoom) + },100); + break; + case "text": + assignAttributes(shape,{ + 'x': x, + 'y': y + },1000); + break; + case "line": + // Opera has a problem with suspendRedraw() apparently + var handle = null; + if (!window.opera) svgroot.suspendRedraw(1000); + + if(curConfig.gridSnapping){ + x = snapToGrid(x); + y = snapToGrid(y); + } + + var x2 = x; + var y2 = y; + + if(evt.shiftKey) { var xya = snapToAngle(start_x,start_y,x2,y2); x2=xya.x; y2=xya.y; } + + shape.setAttributeNS(null, "x2", x2); + shape.setAttributeNS(null, "y2", y2); + if (!window.opera) svgroot.unsuspendRedraw(handle); + break; + case "foreignObject": + // fall through + case "square": + // fall through + case "rect": + // fall through + case "image": + var square = (current_mode == 'square') || evt.shiftKey, + w = Math.abs(x - start_x), + h = Math.abs(y - start_y), + new_x, new_y; + if(square) { + w = h = Math.max(w, h); + new_x = start_x < x ? start_x : start_x - w; + new_y = start_y < y ? start_y : start_y - h; + } else { + new_x = Math.min(start_x,x); + new_y = Math.min(start_y,y); + } + + if(curConfig.gridSnapping){ + w = snapToGrid(w); + h = snapToGrid(h); + new_x = snapToGrid(new_x); + new_y = snapToGrid(new_y); + } + + assignAttributes(shape,{ + 'width': w, + 'height': h, + 'x': new_x, + 'y': new_y + },1000); + + break; + case "circle": + var c = $(shape).attr(["cx", "cy"]); + var cx = c.cx, cy = c.cy, + rad = Math.sqrt( (x-cx)*(x-cx) + (y-cy)*(y-cy) ); + if(curConfig.gridSnapping){ + rad = snapToGrid(rad); + } + shape.setAttributeNS(null, "r", rad); + break; + case "ellipse": + var c = $(shape).attr(["cx", "cy"]); + var cx = c.cx, cy = c.cy; + // Opera has a problem with suspendRedraw() apparently + handle = null; + if (!window.opera) svgroot.suspendRedraw(1000); + if(curConfig.gridSnapping){ + x = snapToGrid(x); + cx = snapToGrid(cx); + y = snapToGrid(y); + cy = snapToGrid(cy); + } + shape.setAttributeNS(null, "rx", Math.abs(x - cx) ); + var ry = Math.abs(evt.shiftKey?(x - cx):(y - cy)); + shape.setAttributeNS(null, "ry", ry ); + if (!window.opera) svgroot.unsuspendRedraw(handle); + break; + case "fhellipse": + case "fhrect": + freehand.minx = Math.min(real_x, freehand.minx); + freehand.maxx = Math.max(real_x, freehand.maxx); + freehand.miny = Math.min(real_y, freehand.miny); + freehand.maxy = Math.max(real_y, freehand.maxy); + // break; missing on purpose + case "fhpath": + d_attr += + real_x + "," + real_y + " "; + shape.setAttributeNS(null, "points", d_attr); + break; + // update path stretch line coordinates + case "path": + // fall through + case "pathedit": + x *= current_zoom; + y *= current_zoom; + + if(curConfig.gridSnapping){ + x = snapToGrid(x); + y = snapToGrid(y); + start_x = snapToGrid(start_x); + start_y = snapToGrid(start_y); + } + if(evt.shiftKey) { + var path = svgedit.path.path; + if(path) { + var x1 = path.dragging?path.dragging[0]:start_x; + var y1 = path.dragging?path.dragging[1]:start_y; + } else { + var x1 = start_x; + var y1 = start_y; + } + var xya = snapToAngle(x1,y1,x,y); + x=xya.x; y=xya.y; + } + + if(rubberBox && rubberBox.getAttribute('display') !== 'none') { + real_x *= current_zoom; + real_y *= current_zoom; + assignAttributes(rubberBox, { + 'x': Math.min(r_start_x*current_zoom, real_x), + 'y': Math.min(r_start_y*current_zoom, real_y), + 'width': Math.abs(real_x - r_start_x*current_zoom), + 'height': Math.abs(real_y - r_start_y*current_zoom) + },100); + } + pathActions.mouseMove(x, y); + + break; + case "textedit": + x *= current_zoom; + y *= current_zoom; +// if(rubberBox && rubberBox.getAttribute('display') != 'none') { +// assignAttributes(rubberBox, { +// 'x': Math.min(start_x,x), +// 'y': Math.min(start_y,y), +// 'width': Math.abs(x-start_x), +// 'height': Math.abs(y-start_y) +// },100); +// } + + textActions.mouseMove(mouse_x, mouse_y); + + break; + case "rotate": + var box = svgedit.utilities.getBBox(selected), + cx = box.x + box.width/2, + cy = box.y + box.height/2, + m = getMatrix(selected), + center = transformPoint(cx,cy,m); + cx = center.x; + cy = center.y; + var angle = ((Math.atan2(cy-y,cx-x) * (180/Math.PI))-90) % 360; + if(curConfig.gridSnapping){ + angle = snapToGrid(angle); + } + if(evt.shiftKey) { // restrict rotations to nice angles (WRS) + var snap = 45; + angle= Math.round(angle/snap)*snap; + } + + canvas.setRotationAngle(angle<-180?(360+angle):angle, true); + call("transition", selectedElements); + break; + default: + break; + } + + runExtensions("mouseMove", { + event: evt, + mouse_x: mouse_x, + mouse_y: mouse_y, + selected: selected + }); + + }; // mouseMove() + + // - in create mode, the element's opacity is set properly, we create an InsertElementCommand + // and store it on the Undo stack + // - in move/resize mode, the element's attributes which were affected by the move/resize are + // identified, a ChangeElementCommand is created and stored on the stack for those attrs + // this is done in when we recalculate the selected dimensions() + var mouseUp = function(evt) + { + if(evt.button === 2) return; + var tempJustSelected = justSelected; + justSelected = null; + if (!started) return; + var pt = transformPoint( evt.pageX, evt.pageY, root_sctm ), + mouse_x = pt.x * current_zoom, + mouse_y = pt.y * current_zoom, + x = mouse_x / current_zoom, + y = mouse_y / current_zoom, + element = getElem(getId()), + keep = false; + + var real_x = x; + var real_y = y; + + // TODO: Make true when in multi-unit mode + var useUnit = false; // (curConfig.baseUnit !== 'px'); + started = false; + switch (current_mode) + { + // intentionally fall-through to select here + case "resize": + case "multiselect": + if (rubberBox != null) { + rubberBox.setAttribute("display", "none"); + curBBoxes = []; + } + current_mode = "select"; + case "select": + if (selectedElements[0] != null) { + // if we only have one selected element + if (selectedElements[1] == null) { + // set our current stroke/fill properties to the element's + var selected = selectedElements[0]; + switch ( selected.tagName ) { + case "g": + case "use": + case "image": + case "foreignObject": + break; + default: + cur_properties.fill = selected.getAttribute("fill"); + cur_properties.fill_opacity = selected.getAttribute("fill-opacity"); + cur_properties.stroke = selected.getAttribute("stroke"); + cur_properties.stroke_opacity = selected.getAttribute("stroke-opacity"); + cur_properties.stroke_width = selected.getAttribute("stroke-width"); + cur_properties.stroke_dasharray = selected.getAttribute("stroke-dasharray"); + cur_properties.stroke_linejoin = selected.getAttribute("stroke-linejoin"); + cur_properties.stroke_linecap = selected.getAttribute("stroke-linecap"); + } + + if (selected.tagName == "text") { + cur_text.font_size = selected.getAttribute("font-size"); + cur_text.font_family = selected.getAttribute("font-family"); + } + selectorManager.requestSelector(selected).showGrips(true); + + // This shouldn't be necessary as it was done on mouseDown... +// call("selected", [selected]); + } + // always recalculate dimensions to strip off stray identity transforms + recalculateAllSelectedDimensions(); + // if it was being dragged/resized + if (real_x != r_start_x || real_y != r_start_y) { + var len = selectedElements.length; + for (var i = 0; i < len; ++i) { + if (selectedElements[i] == null) break; + if(!selectedElements[i].firstChild) { + // Not needed for groups (incorrectly resizes elems), possibly not needed at all? + selectorManager.requestSelector(selectedElements[i]).resize(); + } + } + } + // no change in position/size, so maybe we should move to pathedit + else { + var t = evt.target; + if (selectedElements[0].nodeName === "path" && selectedElements[1] == null) { + pathActions.select(selectedElements[0]); + } // if it was a path + // else, if it was selected and this is a shift-click, remove it from selection + else if (evt.shiftKey) { + if(tempJustSelected != t) { + canvas.removeFromSelection([t]); + } + } + } // no change in mouse position + + // Remove non-scaling stroke + if(svgedit.browser.supportsNonScalingStroke()) { + var elem = selectedElements[0]; + if (elem) { + elem.removeAttribute('style'); + svgedit.utilities.walkTree(elem, function(elem) { + elem.removeAttribute('style'); + }); + } + } + + } + return; + break; + case "zoom": + if (rubberBox != null) { + rubberBox.setAttribute("display", "none"); + } + var factor = evt.shiftKey?.5:2; + call("zoomed", { + 'x': Math.min(r_start_x, real_x), + 'y': Math.min(r_start_y, real_y), + 'width': Math.abs(real_x - r_start_x), + 'height': Math.abs(real_y - r_start_y), + 'factor': factor + }); + return; + case "fhpath": + // Check that the path contains at least 2 points; a degenerate one-point path + // causes problems. + // Webkit ignores how we set the points attribute with commas and uses space + // to separate all coordinates, see https://bugs.webkit.org/show_bug.cgi?id=29870 + var coords = element.getAttribute('points'); + var commaIndex = coords.indexOf(','); + if (commaIndex >= 0) { + keep = coords.indexOf(',', commaIndex+1) >= 0; + } else { + keep = coords.indexOf(' ', coords.indexOf(' ')+1) >= 0; + } + if (keep) { + element = pathActions.smoothPolylineIntoPath(element); + } + break; + case "line": + var attrs = $(element).attr(["x1", "x2", "y1", "y2"]); + keep = (attrs.x1 != attrs.x2 || attrs.y1 != attrs.y2); + break; + case "foreignObject": + case "square": + case "rect": + case "image": + var attrs = $(element).attr(["width", "height"]); + // Image should be kept regardless of size (use inherit dimensions later) + keep = (attrs.width != 0 || attrs.height != 0) || current_mode === "image"; + break; + case "circle": + keep = (element.getAttribute('r') != 0); + break; + case "ellipse": + var attrs = $(element).attr(["rx", "ry"]); + keep = (attrs.rx != null || attrs.ry != null); + break; + case "fhellipse": + if ((freehand.maxx - freehand.minx) > 0 && + (freehand.maxy - freehand.miny) > 0) { + element = addSvgElementFromJson({ + "element": "ellipse", + "curStyles": true, + "attr": { + "cx": (freehand.minx + freehand.maxx) / 2, + "cy": (freehand.miny + freehand.maxy) / 2, + "rx": (freehand.maxx - freehand.minx) / 2, + "ry": (freehand.maxy - freehand.miny) / 2, + "id": getId() + } + }); + call("changed",[element]); + keep = true; + } + break; + case "fhrect": + if ((freehand.maxx - freehand.minx) > 0 && + (freehand.maxy - freehand.miny) > 0) { + element = addSvgElementFromJson({ + "element": "rect", + "curStyles": true, + "attr": { + "x": freehand.minx, + "y": freehand.miny, + "width": (freehand.maxx - freehand.minx), + "height": (freehand.maxy - freehand.miny), + "id": getId() + } + }); + call("changed",[element]); + keep = true; + } + break; + case "text": + keep = true; + selectOnly([element]); + textActions.start(element); + break; + case "path": + // set element to null here so that it is not removed nor finalized + element = null; + // continue to be set to true so that mouseMove happens + started = true; + + var res = pathActions.mouseUp(evt, element, mouse_x, mouse_y); + element = res.element + keep = res.keep; + break; + case "pathedit": + keep = true; + element = null; + pathActions.mouseUp(evt); + break; + case "textedit": + keep = false; + element = null; + textActions.mouseUp(evt, mouse_x, mouse_y); + break; + case "rotate": + keep = true; + element = null; + current_mode = "select"; + var batchCmd = canvas.undoMgr.finishUndoableChange(); + if (!batchCmd.isEmpty()) { + addCommandToHistory(batchCmd); + } + // perform recalculation to weed out any stray identity transforms that might get stuck + recalculateAllSelectedDimensions(); + call("changed", selectedElements); + break; + default: + // This could occur in an extension + break; + } + + var ext_result = runExtensions("mouseUp", { + event: evt, + mouse_x: mouse_x, + mouse_y: mouse_y + }, true); + + $.each(ext_result, function(i, r) { + if(r) { + keep = r.keep || keep; + element = r.element; + started = r.started || started; + } + }); + + if (!keep && element != null) { + getCurrentDrawing().releaseId(getId()); + element.parentNode.removeChild(element); + element = null; + + var t = evt.target; + + // if this element is in a group, go up until we reach the top-level group + // just below the layer groups + // TODO: once we implement links, we also would have to check for <a> elements + while (t.parentNode.parentNode.tagName == "g") { + t = t.parentNode; + } + // if we are not in the middle of creating a path, and we've clicked on some shape, + // then go to Select mode. + // WebKit returns <div> when the canvas is clicked, Firefox/Opera return <svg> + if ( (current_mode != "path" || !drawn_path) && + t.parentNode.id != "selectorParentGroup" && + t.id != "svgcanvas" && t.id != "svgroot") + { + // switch into "select" mode if we've clicked on an element + canvas.setMode("select"); + selectOnly([t], true); + } + + } else if (element != null) { + canvas.addedNew = true; + + if(useUnit) svgedit.units.convertAttrs(element); + + var ani_dur = .2, c_ani; + if(opac_ani.beginElement && element.getAttribute('opacity') != cur_shape.opacity) { + c_ani = $(opac_ani).clone().attr({ + to: cur_shape.opacity, + dur: ani_dur + }).appendTo(element); + try { + // Fails in FF4 on foreignObject + c_ani[0].beginElement(); + } catch(e){} + } else { + ani_dur = 0; + } + + // Ideally this would be done on the endEvent of the animation, + // but that doesn't seem to be supported in Webkit + setTimeout(function() { + if(c_ani) c_ani.remove(); + element.setAttribute("opacity", cur_shape.opacity); + element.setAttribute("style", "pointer-events:inherit"); + cleanupElement(element); + if(current_mode === "path") { + pathActions.toEditMode(element); + } else { + if(curConfig.selectNew) { + selectOnly([element], true); + } + } + // we create the insert command that is stored on the stack + // undo means to call cmd.unapply(), redo means to call cmd.apply() + addCommandToHistory(new InsertElementCommand(element)); + + call("changed",[element]); + }, ani_dur * 1000); + } + + start_transform = null; + }; + + var dblClick = function(evt) { + var evt_target = evt.target; + var parent = evt_target.parentNode; + + // Do nothing if already in current group + if(parent === current_group) return; + + var mouse_target = getMouseTarget(evt); + var tagName = mouse_target.tagName; + + if(tagName === 'text' && current_mode !== 'textedit') { + var pt = transformPoint( evt.pageX, evt.pageY, root_sctm ); + textActions.select(mouse_target, pt.x, pt.y); + } + + if((tagName === "g" || tagName === "a") && getRotationAngle(mouse_target)) { + // TODO: Allow method of in-group editing without having to do + // this (similar to editing rotated paths) + + // Ungroup and regroup + pushGroupProperties(mouse_target); + mouse_target = selectedElements[0]; + clearSelection(true); + } + // Reset context + if(current_group) { + leaveContext(); + } + + if((parent.tagName !== 'g' && parent.tagName !== 'a') || + parent === getCurrentDrawing().getCurrentLayer() || + mouse_target === selectorManager.selectorParentGroup) + { + // Escape from in-group edit + return; + } + setContext(mouse_target); + } + + // prevent links from being followed in the canvas + var handleLinkInCanvas = function(e) { + e.preventDefault(); + return false; + }; + + // Added mouseup to the container here. + // TODO(codedread): Figure out why after the Closure compiler, the window mouseup is ignored. + $(container).mousedown(mouseDown).mousemove(mouseMove).click(handleLinkInCanvas).dblclick(dblClick).mouseup(mouseUp); +// $(window).mouseup(mouseUp); + + $(container).bind("mousewheel DOMMouseScroll", function(e){ + if(!e.shiftKey) return; + e.preventDefault(); + + root_sctm = svgcontent.getScreenCTM().inverse(); + var pt = transformPoint( e.pageX, e.pageY, root_sctm ); + var bbox = { + 'x': pt.x, + 'y': pt.y, + 'width': 0, + 'height': 0 + }; + + // Respond to mouse wheel in IE/Webkit/Opera. + // (It returns up/dn motion in multiples of 120) + if(e.wheelDelta) { + if (e.wheelDelta >= 120) { + bbox.factor = 2; + } else if (e.wheelDelta <= -120) { + bbox.factor = .5; + } + } else if(e.detail) { + if (e.detail > 0) { + bbox.factor = .5; + } else if (e.detail < 0) { + bbox.factor = 2; + } + } + + if(!bbox.factor) return; + call("zoomed", bbox); + }); + +}()); + +// Function: preventClickDefault +// Prevents default browser click behaviour on the given element +// +// Parameters: +// img - The DOM element to prevent the cilck on +var preventClickDefault = function(img) { + $(img).click(function(e){e.preventDefault()}); +} + +// Group: Text edit functions +// Functions relating to editing text elements +var textActions = canvas.textActions = function() { + var curtext; + var textinput; + var cursor; + var selblock; + var blinker; + var chardata = []; + var textbb, transbb; + var matrix; + var last_x, last_y; + var allow_dbl; + + function setCursor(index) { + var empty = (textinput.value === ""); + $(textinput).focus(); + + if(!arguments.length) { + if(empty) { + index = 0; + } else { + if(textinput.selectionEnd !== textinput.selectionStart) return; + index = textinput.selectionEnd; + } + } + + var charbb; + charbb = chardata[index]; + if(!empty) { + textinput.setSelectionRange(index, index); + } + cursor = getElem("text_cursor"); + if (!cursor) { + cursor = document.createElementNS(svgns, "line"); + assignAttributes(cursor, { + 'id': "text_cursor", + 'stroke': "#333", + 'stroke-width': 1 + }); + cursor = getElem("selectorParentGroup").appendChild(cursor); + } + + if(!blinker) { + blinker = setInterval(function() { + var show = (cursor.getAttribute('display') === 'none'); + cursor.setAttribute('display', show?'inline':'none'); + }, 600); + + } + + + var start_pt = ptToScreen(charbb.x, textbb.y); + var end_pt = ptToScreen(charbb.x, (textbb.y + textbb.height)); + + assignAttributes(cursor, { + x1: start_pt.x, + y1: start_pt.y, + x2: end_pt.x, + y2: end_pt.y, + visibility: 'visible', + display: 'inline' + }); + + if(selblock) selblock.setAttribute('d', ''); + } + + function setSelection(start, end, skipInput) { + if(start === end) { + setCursor(end); + return; + } + + if(!skipInput) { + textinput.setSelectionRange(start, end); + } + + selblock = getElem("text_selectblock"); + if (!selblock) { + + selblock = document.createElementNS(svgns, "path"); + assignAttributes(selblock, { + 'id': "text_selectblock", + 'fill': "green", + 'opacity': .5, + 'style': "pointer-events:none" + }); + getElem("selectorParentGroup").appendChild(selblock); + } + + + var startbb = chardata[start]; + + var endbb = chardata[end]; + + cursor.setAttribute('visibility', 'hidden'); + + var tl = ptToScreen(startbb.x, textbb.y), + tr = ptToScreen(startbb.x + (endbb.x - startbb.x), textbb.y), + bl = ptToScreen(startbb.x, textbb.y + textbb.height), + br = ptToScreen(startbb.x + (endbb.x - startbb.x), textbb.y + textbb.height); + + + var dstr = "M" + tl.x + "," + tl.y + + " L" + tr.x + "," + tr.y + + " " + br.x + "," + br.y + + " " + bl.x + "," + bl.y + "z"; + + assignAttributes(selblock, { + d: dstr, + 'display': 'inline' + }); + } + + function getIndexFromPoint(mouse_x, mouse_y) { + // Position cursor here + var pt = svgroot.createSVGPoint(); + pt.x = mouse_x; + pt.y = mouse_y; + + // No content, so return 0 + if(chardata.length == 1) return 0; + // Determine if cursor should be on left or right of character + var charpos = curtext.getCharNumAtPosition(pt); + if(charpos < 0) { + // Out of text range, look at mouse coords + charpos = chardata.length - 2; + if(mouse_x <= chardata[0].x) { + charpos = 0; + } + } else if(charpos >= chardata.length - 2) { + charpos = chardata.length - 2; + } + var charbb = chardata[charpos]; + var mid = charbb.x + (charbb.width/2); + if(mouse_x > mid) { + charpos++; + } + return charpos; + } + + function setCursorFromPoint(mouse_x, mouse_y) { + setCursor(getIndexFromPoint(mouse_x, mouse_y)); + } + + function setEndSelectionFromPoint(x, y, apply) { + var i1 = textinput.selectionStart; + var i2 = getIndexFromPoint(x, y); + + var start = Math.min(i1, i2); + var end = Math.max(i1, i2); + setSelection(start, end, !apply); + } + + function screenToPt(x_in, y_in) { + var out = { + x: x_in, + y: y_in + } + + out.x /= current_zoom; + out.y /= current_zoom; + + if(matrix) { + var pt = transformPoint(out.x, out.y, matrix.inverse()); + out.x = pt.x; + out.y = pt.y; + } + + return out; + } + + function ptToScreen(x_in, y_in) { + var out = { + x: x_in, + y: y_in + } + + if(matrix) { + var pt = transformPoint(out.x, out.y, matrix); + out.x = pt.x; + out.y = pt.y; + } + + out.x *= current_zoom; + out.y *= current_zoom; + + return out; + } + + function hideCursor() { + if(cursor) { + cursor.setAttribute('visibility', 'hidden'); + } + } + + function selectAll(evt) { + setSelection(0, curtext.textContent.length); + $(this).unbind(evt); + } + + function selectWord(evt) { + if(!allow_dbl || !curtext) return; + + var ept = transformPoint( evt.pageX, evt.pageY, root_sctm ), + mouse_x = ept.x * current_zoom, + mouse_y = ept.y * current_zoom; + var pt = screenToPt(mouse_x, mouse_y); + + var index = getIndexFromPoint(pt.x, pt.y); + var str = curtext.textContent; + var first = str.substr(0, index).replace(/[a-z0-9]+$/i, '').length; + var m = str.substr(index).match(/^[a-z0-9]+/i); + var last = (m?m[0].length:0) + index; + setSelection(first, last); + + // Set tripleclick + $(evt.target).click(selectAll); + setTimeout(function() { + $(evt.target).unbind('click', selectAll); + }, 300); + + } + + return { + select: function(target, x, y) { + curtext = target; + textActions.toEditMode(x, y); + }, + start: function(elem) { + curtext = elem; + textActions.toEditMode(); + }, + mouseDown: function(evt, mouse_target, start_x, start_y) { + var pt = screenToPt(start_x, start_y); + + textinput.focus(); + setCursorFromPoint(pt.x, pt.y); + last_x = start_x; + last_y = start_y; + + // TODO: Find way to block native selection + }, + mouseMove: function(mouse_x, mouse_y) { + var pt = screenToPt(mouse_x, mouse_y); + setEndSelectionFromPoint(pt.x, pt.y); + }, + mouseUp: function(evt, mouse_x, mouse_y) { + var pt = screenToPt(mouse_x, mouse_y); + + setEndSelectionFromPoint(pt.x, pt.y, true); + + // TODO: Find a way to make this work: Use transformed BBox instead of evt.target +// if(last_x === mouse_x && last_y === mouse_y +// && !svgedit.math.rectsIntersect(transbb, {x: pt.x, y: pt.y, width:0, height:0})) { +// textActions.toSelectMode(true); +// } + + if( + evt.target !== curtext + && mouse_x < last_x + 2 + && mouse_x > last_x - 2 + && mouse_y < last_y + 2 + && mouse_y > last_y - 2) { + + textActions.toSelectMode(true); + } + + }, + setCursor: setCursor, + toEditMode: function(x, y) { + allow_dbl = false; + current_mode = "textedit"; + selectorManager.requestSelector(curtext).showGrips(false); + // Make selector group accept clicks + var sel = selectorManager.requestSelector(curtext).selectorRect; + + textActions.init(); + + $(curtext).css('cursor', 'text'); + +// if(svgedit.browser.supportsEditableText()) { +// curtext.setAttribute('editable', 'simple'); +// return; +// } + + if(!arguments.length) { + setCursor(); + } else { + var pt = screenToPt(x, y); + setCursorFromPoint(pt.x, pt.y); + } + + setTimeout(function() { + allow_dbl = true; + }, 300); + }, + toSelectMode: function(selectElem) { + current_mode = "select"; + clearInterval(blinker); + blinker = null; + if(selblock) $(selblock).attr('display','none'); + if(cursor) $(cursor).attr('visibility','hidden'); + $(curtext).css('cursor', 'move'); + + if(selectElem) { + clearSelection(); + $(curtext).css('cursor', 'move'); + + call("selected", [curtext]); + addToSelection([curtext], true); + } + if(curtext && !curtext.textContent.length) { + // No content, so delete + canvas.deleteSelectedElements(); + } + + $(textinput).blur(); + + curtext = false; + +// if(svgedit.browser.supportsEditableText()) { +// curtext.removeAttribute('editable'); +// } + }, + setInputElem: function(elem) { + textinput = elem; +// $(textinput).blur(hideCursor); + }, + clear: function() { + if(current_mode == "textedit") { + textActions.toSelectMode(); + } + }, + init: function(inputElem) { + if(!curtext) return; + +// if(svgedit.browser.supportsEditableText()) { +// curtext.select(); +// return; +// } + + if(!curtext.parentNode) { + // Result of the ffClone, need to get correct element + curtext = selectedElements[0]; + selectorManager.requestSelector(curtext).showGrips(false); + } + + var str = curtext.textContent; + var len = str.length; + + var xform = curtext.getAttribute('transform'); + + textbb = svgedit.utilities.getBBox(curtext); + + matrix = xform?getMatrix(curtext):null; + + chardata = Array(len); + textinput.focus(); + + $(curtext).unbind('dblclick', selectWord).dblclick(selectWord); + + if(!len) { + var end = {x: textbb.x + (textbb.width/2), width: 0}; + } + + for(var i=0; i<len; i++) { + var start = curtext.getStartPositionOfChar(i); + var end = curtext.getEndPositionOfChar(i); + + if(!svgedit.browser.supportsGoodTextCharPos()) { + var offset = canvas.contentW * current_zoom; + start.x -= offset; + end.x -= offset; + + start.x /= current_zoom; + end.x /= current_zoom; + } + + // Get a "bbox" equivalent for each character. Uses the + // bbox data of the actual text for y, height purposes + + // TODO: Decide if y, width and height are actually necessary + chardata[i] = { + x: start.x, + y: textbb.y, // start.y? + width: end.x - start.x, + height: textbb.height + }; + } + + // Add a last bbox for cursor at end of text + chardata.push({ + x: end.x, + width: 0 + }); + setSelection(textinput.selectionStart, textinput.selectionEnd, true); + } + } +}(); + +// TODO: Migrate all of this code into path.js +// Group: Path edit functions +// Functions relating to editing path elements +var pathActions = canvas.pathActions = function() { + + var subpath = false; + var current_path; + var newPoint, firstCtrl; + + function resetD(p) { + p.setAttribute("d", pathActions.convertPath(p)); + } + + // TODO: Move into path.js + svgedit.path.Path.prototype.endChanges = function(text) { + if(svgedit.browser.isWebkit()) resetD(this.elem); + var cmd = new ChangeElementCommand(this.elem, {d: this.last_d}, text); + addCommandToHistory(cmd); + call("changed", [this.elem]); + } + + svgedit.path.Path.prototype.addPtsToSelection = function(indexes) { + if(!$.isArray(indexes)) indexes = [indexes]; + for(var i=0; i< indexes.length; i++) { + var index = indexes[i]; + var seg = this.segs[index]; + if(seg.ptgrip) { + if(this.selected_pts.indexOf(index) == -1 && index >= 0) { + this.selected_pts.push(index); + } + } + }; + this.selected_pts.sort(); + var i = this.selected_pts.length, + grips = new Array(i); + // Loop through points to be selected and highlight each + while(i--) { + var pt = this.selected_pts[i]; + var seg = this.segs[pt]; + seg.select(true); + grips[i] = seg.ptgrip; + } + // TODO: Correct this: + pathActions.canDeleteNodes = true; + + pathActions.closed_subpath = this.subpathIsClosed(this.selected_pts[0]); + + call("selected", grips); + } + + var current_path = null, + drawn_path = null, + hasMoved = false; + + // This function converts a polyline (created by the fh_path tool) into + // a path element and coverts every three line segments into a single bezier + // curve in an attempt to smooth out the free-hand + var smoothPolylineIntoPath = function(element) { + var points = element.points; + var N = points.numberOfItems; + if (N >= 4) { + // loop through every 3 points and convert to a cubic bezier curve segment + // + // NOTE: this is cheating, it means that every 3 points has the potential to + // be a corner instead of treating each point in an equal manner. In general, + // this technique does not look that good. + // + // I am open to better ideas! + // + // Reading: + // - http://www.efg2.com/Lab/Graphics/Jean-YvesQueinecBezierCurves.htm + // - http://www.codeproject.com/KB/graphics/BezierSpline.aspx?msg=2956963 + // - http://www.ian-ko.com/ET_GeoWizards/UserGuide/smooth.htm + // - http://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/Bezier/bezier-der.html + var curpos = points.getItem(0), prevCtlPt = null; + var d = []; + d.push(["M",curpos.x,",",curpos.y," C"].join("")); + for (var i = 1; i <= (N-4); i += 3) { + var ct1 = points.getItem(i); + var ct2 = points.getItem(i+1); + var end = points.getItem(i+2); + + // if the previous segment had a control point, we want to smooth out + // the control points on both sides + if (prevCtlPt) { + var newpts = svgedit.path.smoothControlPoints( prevCtlPt, ct1, curpos ); + if (newpts && newpts.length == 2) { + var prevArr = d[d.length-1].split(','); + prevArr[2] = newpts[0].x; + prevArr[3] = newpts[0].y; + d[d.length-1] = prevArr.join(','); + ct1 = newpts[1]; + } + } + + d.push([ct1.x,ct1.y,ct2.x,ct2.y,end.x,end.y].join(',')); + + curpos = end; + prevCtlPt = ct2; + } + // handle remaining line segments + d.push("L"); + for(;i < N;++i) { + var pt = points.getItem(i); + d.push([pt.x,pt.y].join(",")); + } + d = d.join(" "); + + // create new path element + element = addSvgElementFromJson({ + "element": "path", + "curStyles": true, + "attr": { + "id": getId(), + "d": d, + "fill": "none" + } + }); + // No need to call "changed", as this is already done under mouseUp + } + return element; + }; + + return { + mouseDown: function(evt, mouse_target, start_x, start_y) { + if(current_mode === "path") { + mouse_x = start_x; + mouse_y = start_y; + + var x = mouse_x/current_zoom, + y = mouse_y/current_zoom, + stretchy = getElem("path_stretch_line"); + newPoint = [x, y]; + + if(curConfig.gridSnapping){ + x = snapToGrid(x); + y = snapToGrid(y); + mouse_x = snapToGrid(mouse_x); + mouse_y = snapToGrid(mouse_y); + } + + if (!stretchy) { + stretchy = document.createElementNS(svgns, "path"); + assignAttributes(stretchy, { + 'id': "path_stretch_line", + 'stroke': "#22C", + 'stroke-width': "0.5", + 'fill': 'none' + }); + stretchy = getElem("selectorParentGroup").appendChild(stretchy); + } + stretchy.setAttribute("display", "inline"); + + var keep = null; + + // if pts array is empty, create path element with M at current point + if (!drawn_path) { + d_attr = "M" + x + "," + y + " "; + drawn_path = addSvgElementFromJson({ + "element": "path", + "curStyles": true, + "attr": { + "d": d_attr, + "id": getNextId(), + "opacity": cur_shape.opacity / 2 + } + }); + // set stretchy line to first point + stretchy.setAttribute('d', ['M', mouse_x, mouse_y, mouse_x, mouse_y].join(' ')); + var index = subpath ? svgedit.path.path.segs.length : 0; + svgedit.path.addPointGrip(index, mouse_x, mouse_y); + } + else { + // determine if we clicked on an existing point + var seglist = drawn_path.pathSegList; + var i = seglist.numberOfItems; + var FUZZ = 6/current_zoom; + var clickOnPoint = false; + while(i) { + i --; + var item = seglist.getItem(i); + var px = item.x, py = item.y; + // found a matching point + if ( x >= (px-FUZZ) && x <= (px+FUZZ) && y >= (py-FUZZ) && y <= (py+FUZZ) ) { + clickOnPoint = true; + break; + } + } + + // get path element that we are in the process of creating + var id = getId(); + + // Remove previous path object if previously created + svgedit.path.removePath_(id); + + var newpath = getElem(id); + + var len = seglist.numberOfItems; + // if we clicked on an existing point, then we are done this path, commit it + // (i,i+1) are the x,y that were clicked on + if (clickOnPoint) { + // if clicked on any other point but the first OR + // the first point was clicked on and there are less than 3 points + // then leave the path open + // otherwise, close the path + if (i <= 1 && len >= 2) { + // Create end segment + var abs_x = seglist.getItem(0).x; + var abs_y = seglist.getItem(0).y; + + + var s_seg = stretchy.pathSegList.getItem(1); + if(s_seg.pathSegType === 4) { + var newseg = drawn_path.createSVGPathSegLinetoAbs(abs_x, abs_y); + } else { + var newseg = drawn_path.createSVGPathSegCurvetoCubicAbs( + abs_x, + abs_y, + s_seg.x1 / current_zoom, + s_seg.y1 / current_zoom, + abs_x, + abs_y + ); + } + + var endseg = drawn_path.createSVGPathSegClosePath(); + seglist.appendItem(newseg); + seglist.appendItem(endseg); + } else if(len < 3) { + keep = false; + return keep; + } + $(stretchy).remove(); + + // this will signal to commit the path + element = newpath; + drawn_path = null; + started = false; + + if(subpath) { + if(svgedit.path.path.matrix) { + remapElement(newpath, {}, svgedit.path.path.matrix.inverse()); + } + + var new_d = newpath.getAttribute("d"); + var orig_d = $(svgedit.path.path.elem).attr("d"); + $(svgedit.path.path.elem).attr("d", orig_d + new_d); + $(newpath).remove(); + if(svgedit.path.path.matrix) { + svgedit.path.recalcRotatedPath(); + } + svgedit.path.path.init(); + pathActions.toEditMode(svgedit.path.path.elem); + svgedit.path.path.selectPt(); + return false; + } + } + // else, create a new point, update path element + else { + // Checks if current target or parents are #svgcontent + if(!$.contains(container, getMouseTarget(evt))) { + // Clicked outside canvas, so don't make point + console.log("Clicked outside canvas"); + return false; + } + + var num = drawn_path.pathSegList.numberOfItems; + var last = drawn_path.pathSegList.getItem(num -1); + var lastx = last.x, lasty = last.y; + + if(evt.shiftKey) { var xya = snapToAngle(lastx,lasty,x,y); x=xya.x; y=xya.y; } + + // Use the segment defined by stretchy + var s_seg = stretchy.pathSegList.getItem(1); + if(s_seg.pathSegType === 4) { + var newseg = drawn_path.createSVGPathSegLinetoAbs(round(x), round(y)); + } else { + var newseg = drawn_path.createSVGPathSegCurvetoCubicAbs( + round(x), + round(y), + s_seg.x1 / current_zoom, + s_seg.y1 / current_zoom, + s_seg.x2 / current_zoom, + s_seg.y2 / current_zoom + ); + } + + drawn_path.pathSegList.appendItem(newseg); + + x *= current_zoom; + y *= current_zoom; + + // set stretchy line to latest point + stretchy.setAttribute('d', ['M', x, y, x, y].join(' ')); + var index = num; + if(subpath) index += svgedit.path.path.segs.length; + svgedit.path.addPointGrip(index, x, y); + } +// keep = true; + } + + return; + } + + // TODO: Make sure current_path isn't null at this point + if(!svgedit.path.path) return; + + svgedit.path.path.storeD(); + + var id = evt.target.id; + if (id.substr(0,14) == "pathpointgrip_") { + // Select this point + var cur_pt = svgedit.path.path.cur_pt = parseInt(id.substr(14)); + svgedit.path.path.dragging = [start_x, start_y]; + var seg = svgedit.path.path.segs[cur_pt]; + + // only clear selection if shift is not pressed (otherwise, add + // node to selection) + if (!evt.shiftKey) { + if(svgedit.path.path.selected_pts.length <= 1 || !seg.selected) { + svgedit.path.path.clearSelection(); + } + svgedit.path.path.addPtsToSelection(cur_pt); + } else if(seg.selected) { + svgedit.path.path.removePtFromSelection(cur_pt); + } else { + svgedit.path.path.addPtsToSelection(cur_pt); + } + } else if(id.indexOf("ctrlpointgrip_") == 0) { + svgedit.path.path.dragging = [start_x, start_y]; + + var parts = id.split('_')[1].split('c'); + var cur_pt = parts[0]-0; + var ctrl_num = parts[1]-0; + svgedit.path.path.selectPt(cur_pt, ctrl_num); + } + + // Start selection box + if(!svgedit.path.path.dragging) { + if (rubberBox == null) { + rubberBox = selectorManager.getRubberBandBox(); + } + assignAttributes(rubberBox, { + 'x': start_x * current_zoom, + 'y': start_y * current_zoom, + 'width': 0, + 'height': 0, + 'display': 'inline' + }, 100); + } + }, + mouseMove: function(mouse_x, mouse_y) { + hasMoved = true; + if(current_mode === "path") { + if(!drawn_path) return; + var seglist = drawn_path.pathSegList; + var index = seglist.numberOfItems - 1; + + if(newPoint) { + // First point +// if(!index) return; + + // Set control points + var pointGrip1 = svgedit.path.addCtrlGrip('1c1'); + var pointGrip2 = svgedit.path.addCtrlGrip('0c2'); + + // dragging pointGrip1 + pointGrip1.setAttribute('cx', mouse_x); + pointGrip1.setAttribute('cy', mouse_y); + pointGrip1.setAttribute('display', 'inline'); + + var pt_x = newPoint[0]; + var pt_y = newPoint[1]; + + // set curve + var seg = seglist.getItem(index); + var cur_x = mouse_x / current_zoom; + var cur_y = mouse_y / current_zoom; + var alt_x = (pt_x + (pt_x - cur_x)); + var alt_y = (pt_y + (pt_y - cur_y)); + + pointGrip2.setAttribute('cx', alt_x * current_zoom); + pointGrip2.setAttribute('cy', alt_y * current_zoom); + pointGrip2.setAttribute('display', 'inline'); + + var ctrlLine = svgedit.path.getCtrlLine(1); + assignAttributes(ctrlLine, { + x1: mouse_x, + y1: mouse_y, + x2: alt_x * current_zoom, + y2: alt_y * current_zoom, + display: 'inline' + }); + + if(index === 0) { + firstCtrl = [mouse_x, mouse_y]; + } else { + var last_x, last_y; + + var last = seglist.getItem(index - 1); + var last_x = last.x; + var last_y = last.y + + if(last.pathSegType === 6) { + last_x += (last_x - last.x2); + last_y += (last_y - last.y2); + } else if(firstCtrl) { + last_x = firstCtrl[0]/current_zoom; + last_y = firstCtrl[1]/current_zoom; + } + svgedit.path.replacePathSeg(6, index, [pt_x, pt_y, last_x, last_y, alt_x, alt_y], drawn_path); + } + } else { + var stretchy = getElem("path_stretch_line"); + if (stretchy) { + var prev = seglist.getItem(index); + if(prev.pathSegType === 6) { + var prev_x = prev.x + (prev.x - prev.x2); + var prev_y = prev.y + (prev.y - prev.y2); + svgedit.path.replacePathSeg(6, 1, [mouse_x, mouse_y, prev_x * current_zoom, prev_y * current_zoom, mouse_x, mouse_y], stretchy); + } else if(firstCtrl) { + svgedit.path.replacePathSeg(6, 1, [mouse_x, mouse_y, firstCtrl[0], firstCtrl[1], mouse_x, mouse_y], stretchy); + } else { + svgedit.path.replacePathSeg(4, 1, [mouse_x, mouse_y], stretchy); + } + } + } + return; + } + // if we are dragging a point, let's move it + if (svgedit.path.path.dragging) { + var pt = svgedit.path.getPointFromGrip({ + x: svgedit.path.path.dragging[0], + y: svgedit.path.path.dragging[1] + }, svgedit.path.path); + var mpt = svgedit.path.getPointFromGrip({ + x: mouse_x, + y: mouse_y + }, svgedit.path.path); + var diff_x = mpt.x - pt.x; + var diff_y = mpt.y - pt.y; + svgedit.path.path.dragging = [mouse_x, mouse_y]; + + if(svgedit.path.path.dragctrl) { + svgedit.path.path.moveCtrl(diff_x, diff_y); + } else { + svgedit.path.path.movePts(diff_x, diff_y); + } + } else { + svgedit.path.path.selected_pts = []; + svgedit.path.path.eachSeg(function(i) { + var seg = this; + if(!seg.next && !seg.prev) return; + + var item = seg.item; + var rbb = rubberBox.getBBox(); + + var pt = svgedit.path.getGripPt(seg); + var pt_bb = { + x: pt.x, + y: pt.y, + width: 0, + height: 0 + }; + + var sel = svgedit.math.rectsIntersect(rbb, pt_bb); + + this.select(sel); + //Note that addPtsToSelection is not being run + if(sel) svgedit.path.path.selected_pts.push(seg.index); + }); + + } + }, + mouseUp: function(evt, element, mouse_x, mouse_y) { + + // Create mode + if(current_mode === "path") { + newPoint = null; + if(!drawn_path) { + element = getElem(getId()); + started = false; + firstCtrl = null; + } + + return { + keep: true, + element: element + } + } + + // Edit mode + + if (svgedit.path.path.dragging) { + var last_pt = svgedit.path.path.cur_pt; + + svgedit.path.path.dragging = false; + svgedit.path.path.dragctrl = false; + svgedit.path.path.update(); + + + if(hasMoved) { + svgedit.path.path.endChanges("Move path point(s)"); + } + + if(!evt.shiftKey && !hasMoved) { + svgedit.path.path.selectPt(last_pt); + } + } + else if(rubberBox && rubberBox.getAttribute('display') != 'none') { + // Done with multi-node-select + rubberBox.setAttribute("display", "none"); + + if(rubberBox.getAttribute('width') <= 2 && rubberBox.getAttribute('height') <= 2) { + pathActions.toSelectMode(evt.target); + } + + // else, move back to select mode + } else { + pathActions.toSelectMode(evt.target); + } + hasMoved = false; + }, + toEditMode: function(element) { + svgedit.path.path = svgedit.path.getPath_(element); + current_mode = "pathedit"; + clearSelection(); + svgedit.path.path.show(true).update(); + svgedit.path.path.oldbbox = svgedit.utilities.getBBox(svgedit.path.path.elem); + subpath = false; + }, + toSelectMode: function(elem) { + var selPath = (elem == svgedit.path.path.elem); + current_mode = "select"; + svgedit.path.path.show(false); + current_path = false; + clearSelection(); + + if(svgedit.path.path.matrix) { + // Rotated, so may need to re-calculate the center + svgedit.path.recalcRotatedPath(); + } + + if(selPath) { + call("selected", [elem]); + addToSelection([elem], true); + } + }, + addSubPath: function(on) { + if(on) { + // Internally we go into "path" mode, but in the UI it will + // still appear as if in "pathedit" mode. + current_mode = "path"; + subpath = true; + } else { + pathActions.clear(true); + pathActions.toEditMode(svgedit.path.path.elem); + } + }, + select: function(target) { + if (current_path === target) { + pathActions.toEditMode(target); + current_mode = "pathedit"; + } // going into pathedit mode + else { + current_path = target; + } + }, + reorient: function() { + var elem = selectedElements[0]; + if(!elem) return; + var angle = getRotationAngle(elem); + if(angle == 0) return; + + var batchCmd = new BatchCommand("Reorient path"); + var changes = { + d: elem.getAttribute('d'), + transform: elem.getAttribute('transform') + }; + batchCmd.addSubCommand(new ChangeElementCommand(elem, changes)); + clearSelection(); + this.resetOrientation(elem); + + addCommandToHistory(batchCmd); + + // Set matrix to null + svgedit.path.getPath_(elem).show(false).matrix = null; + + this.clear(); + + addToSelection([elem], true); + call("changed", selectedElements); + }, + + clear: function(remove) { + current_path = null; + if (drawn_path) { + var elem = getElem(getId()); + $(getElem("path_stretch_line")).remove(); + $(elem).remove(); + $(getElem("pathpointgrip_container")).find('*').attr('display', 'none'); + drawn_path = firstCtrl = null; + started = false; + } else if (current_mode == "pathedit") { + this.toSelectMode(); + } + if(svgedit.path.path) svgedit.path.path.init().show(false); + }, + resetOrientation: function(path) { + if(path == null || path.nodeName != 'path') return false; + var tlist = getTransformList(path); + var m = transformListToTransform(tlist).matrix; + tlist.clear(); + path.removeAttribute("transform"); + var segList = path.pathSegList; + + // Opera/win/non-EN throws an error here. + // TODO: Find out why! + // Presumed fixed in Opera 10.5, so commented out for now + +// try { + var len = segList.numberOfItems; +// } catch(err) { +// var fixed_d = pathActions.convertPath(path); +// path.setAttribute('d', fixed_d); +// segList = path.pathSegList; +// var len = segList.numberOfItems; +// } + var last_x, last_y; + + + for (var i = 0; i < len; ++i) { + var seg = segList.getItem(i); + var type = seg.pathSegType; + if(type == 1) continue; + var pts = []; + $.each(['',1,2], function(j, n) { + var x = seg['x'+n], y = seg['y'+n]; + if(x !== undefined && y !== undefined) { + var pt = transformPoint(x, y, m); + pts.splice(pts.length, 0, pt.x, pt.y); + } + }); + svgedit.path.replacePathSeg(type, i, pts, path); + } + + reorientGrads(path, m); + + + }, + zoomChange: function() { + if(current_mode == "pathedit") { + svgedit.path.path.update(); + } + }, + getNodePoint: function() { + var sel_pt = svgedit.path.path.selected_pts.length ? svgedit.path.path.selected_pts[0] : 1; + + var seg = svgedit.path.path.segs[sel_pt]; + return { + x: seg.item.x, + y: seg.item.y, + type: seg.type + }; + }, + linkControlPoints: function(linkPoints) { + svgedit.path.setLinkControlPoints(linkPoints); + }, + clonePathNode: function() { + svgedit.path.path.storeD(); + + var sel_pts = svgedit.path.path.selected_pts; + var segs = svgedit.path.path.segs; + + var i = sel_pts.length; + var nums = []; + + while(i--) { + var pt = sel_pts[i]; + svgedit.path.path.addSeg(pt); + + nums.push(pt + i); + nums.push(pt + i + 1); + } + svgedit.path.path.init().addPtsToSelection(nums); + + svgedit.path.path.endChanges("Clone path node(s)"); + }, + opencloseSubPath: function() { + var sel_pts = svgedit.path.path.selected_pts; + // Only allow one selected node for now + if(sel_pts.length !== 1) return; + + var elem = svgedit.path.path.elem; + var list = elem.pathSegList; + + var len = list.numberOfItems; + + var index = sel_pts[0]; + + var open_pt = null; + var start_item = null; + + // Check if subpath is already open + svgedit.path.path.eachSeg(function(i) { + if(this.type === 2 && i <= index) { + start_item = this.item; + } + if(i <= index) return true; + if(this.type === 2) { + // Found M first, so open + open_pt = i; + return false; + } else if(this.type === 1) { + // Found Z first, so closed + open_pt = false; + return false; + } + }); + + if(open_pt == null) { + // Single path, so close last seg + open_pt = svgedit.path.path.segs.length - 1; + } + + if(open_pt !== false) { + // Close this path + + // Create a line going to the previous "M" + var newseg = elem.createSVGPathSegLinetoAbs(start_item.x, start_item.y); + + var closer = elem.createSVGPathSegClosePath(); + if(open_pt == svgedit.path.path.segs.length - 1) { + list.appendItem(newseg); + list.appendItem(closer); + } else { + svgedit.path.insertItemBefore(elem, closer, open_pt); + svgedit.path.insertItemBefore(elem, newseg, open_pt); + } + + svgedit.path.path.init().selectPt(open_pt+1); + return; + } + + + + // M 1,1 L 2,2 L 3,3 L 1,1 z // open at 2,2 + // M 2,2 L 3,3 L 1,1 + + // M 1,1 L 2,2 L 1,1 z M 4,4 L 5,5 L6,6 L 5,5 z + // M 1,1 L 2,2 L 1,1 z [M 4,4] L 5,5 L(M)6,6 L 5,5 z + + var seg = svgedit.path.path.segs[index]; + + if(seg.mate) { + list.removeItem(index); // Removes last "L" + list.removeItem(index); // Removes the "Z" + svgedit.path.path.init().selectPt(index - 1); + return; + } + + var last_m, z_seg; + + // Find this sub-path's closing point and remove + for(var i=0; i<list.numberOfItems; i++) { + var item = list.getItem(i); + + if(item.pathSegType === 2) { + // Find the preceding M + last_m = i; + } else if(i === index) { + // Remove it + list.removeItem(last_m); +// index--; + } else if(item.pathSegType === 1 && index < i) { + // Remove the closing seg of this subpath + z_seg = i-1; + list.removeItem(i); + break; + } + } + + var num = (index - last_m) - 1; + + while(num--) { + svgedit.path.insertItemBefore(elem, list.getItem(last_m), z_seg); + } + + var pt = list.getItem(last_m); + + // Make this point the new "M" + svgedit.path.replacePathSeg(2, last_m, [pt.x, pt.y]); + + var i = index + + svgedit.path.path.init().selectPt(0); + }, + deletePathNode: function() { + if(!pathActions.canDeleteNodes) return; + svgedit.path.path.storeD(); + + var sel_pts = svgedit.path.path.selected_pts; + var i = sel_pts.length; + + while(i--) { + var pt = sel_pts[i]; + svgedit.path.path.deleteSeg(pt); + } + + // Cleanup + var cleanup = function() { + var segList = svgedit.path.path.elem.pathSegList; + var len = segList.numberOfItems; + + var remItems = function(pos, count) { + while(count--) { + segList.removeItem(pos); + } + } + + if(len <= 1) return true; + + while(len--) { + var item = segList.getItem(len); + if(item.pathSegType === 1) { + var prev = segList.getItem(len-1); + var nprev = segList.getItem(len-2); + if(prev.pathSegType === 2) { + remItems(len-1, 2); + cleanup(); + break; + } else if(nprev.pathSegType === 2) { + remItems(len-2, 3); + cleanup(); + break; + } + + } else if(item.pathSegType === 2) { + if(len > 0) { + var prev_type = segList.getItem(len-1).pathSegType; + // Path has M M + if(prev_type === 2) { + remItems(len-1, 1); + cleanup(); + break; + // Entire path ends with Z M + } else if(prev_type === 1 && segList.numberOfItems-1 === len) { + remItems(len, 1); + cleanup(); + break; + } + } + } + } + return false; + } + + cleanup(); + + // Completely delete a path with 1 or 0 segments + if(svgedit.path.path.elem.pathSegList.numberOfItems <= 1) { + pathActions.toSelectMode(svgedit.path.path.elem); + canvas.deleteSelectedElements(); + return; + } + + svgedit.path.path.init(); + + svgedit.path.path.clearSelection(); + + // TODO: Find right way to select point now + // path.selectPt(sel_pt); + if(window.opera) { // Opera repaints incorrectly + var cp = $(svgedit.path.path.elem); cp.attr('d',cp.attr('d')); + } + svgedit.path.path.endChanges("Delete path node(s)"); + }, + smoothPolylineIntoPath: smoothPolylineIntoPath, + setSegType: function(v) { + svgedit.path.path.setSegType(v); + }, + moveNode: function(attr, newValue) { + var sel_pts = svgedit.path.path.selected_pts; + if(!sel_pts.length) return; + + svgedit.path.path.storeD(); + + // Get first selected point + var seg = svgedit.path.path.segs[sel_pts[0]]; + var diff = {x:0, y:0}; + diff[attr] = newValue - seg.item[attr]; + + seg.move(diff.x, diff.y); + svgedit.path.path.endChanges("Move path point"); + }, + fixEnd: function(elem) { + // Adds an extra segment if the last seg before a Z doesn't end + // at its M point + // M0,0 L0,100 L100,100 z + var segList = elem.pathSegList; + var len = segList.numberOfItems; + var last_m; + for (var i = 0; i < len; ++i) { + var item = segList.getItem(i); + if(item.pathSegType === 2) { + last_m = item; + } + + if(item.pathSegType === 1) { + var prev = segList.getItem(i-1); + if(prev.x != last_m.x || prev.y != last_m.y) { + // Add an L segment here + var newseg = elem.createSVGPathSegLinetoAbs(last_m.x, last_m.y); + svgedit.path.insertItemBefore(elem, newseg, i); + // Can this be done better? + pathActions.fixEnd(elem); + break; + } + + } + } + if(svgedit.browser.isWebkit()) resetD(elem); + }, + // Convert a path to one with only absolute or relative values + convertPath: function(path, toRel) { + var segList = path.pathSegList; + var len = segList.numberOfItems; + var curx = 0, cury = 0; + var d = ""; + var last_m = null; + + for (var i = 0; i < len; ++i) { + var seg = segList.getItem(i); + // if these properties are not in the segment, set them to zero + var x = seg.x || 0, + y = seg.y || 0, + x1 = seg.x1 || 0, + y1 = seg.y1 || 0, + x2 = seg.x2 || 0, + y2 = seg.y2 || 0; + + var type = seg.pathSegType; + var letter = pathMap[type]['to'+(toRel?'Lower':'Upper')+'Case'](); + + var addToD = function(pnts, more, last) { + var str = ''; + var more = more?' '+more.join(' '):''; + var last = last?' '+svgedit.units.shortFloat(last):''; + $.each(pnts, function(i, pnt) { + pnts[i] = svgedit.units.shortFloat(pnt); + }); + d += letter + pnts.join(' ') + more + last; + } + + switch (type) { + case 1: // z,Z closepath (Z/z) + d += "z"; + break; + case 12: // absolute horizontal line (H) + x -= curx; + case 13: // relative horizontal line (h) + if(toRel) { + curx += x; + letter = 'l'; + } else { + x += curx; + curx = x; + letter = 'L'; + } + // Convert to "line" for easier editing + addToD([[x, cury]]); + break; + case 14: // absolute vertical line (V) + y -= cury; + case 15: // relative vertical line (v) + if(toRel) { + cury += y; + letter = 'l'; + } else { + y += cury; + cury = y; + letter = 'L'; + } + // Convert to "line" for easier editing + addToD([[curx, y]]); + break; + case 2: // absolute move (M) + case 4: // absolute line (L) + case 18: // absolute smooth quad (T) + x -= curx; + y -= cury; + case 5: // relative line (l) + case 3: // relative move (m) + // If the last segment was a "z", this must be relative to + if(last_m && segList.getItem(i-1).pathSegType === 1 && !toRel) { + curx = last_m[0]; + cury = last_m[1]; + } + + case 19: // relative smooth quad (t) + if(toRel) { + curx += x; + cury += y; + } else { + x += curx; + y += cury; + curx = x; + cury = y; + } + if(type === 3) last_m = [curx, cury]; + + addToD([[x,y]]); + break; + case 6: // absolute cubic (C) + x -= curx; x1 -= curx; x2 -= curx; + y -= cury; y1 -= cury; y2 -= cury; + case 7: // relative cubic (c) + if(toRel) { + curx += x; + cury += y; + } else { + x += curx; x1 += curx; x2 += curx; + y += cury; y1 += cury; y2 += cury; + curx = x; + cury = y; + } + addToD([[x1,y1],[x2,y2],[x,y]]); + break; + case 8: // absolute quad (Q) + x -= curx; x1 -= curx; + y -= cury; y1 -= cury; + case 9: // relative quad (q) + if(toRel) { + curx += x; + cury += y; + } else { + x += curx; x1 += curx; + y += cury; y1 += cury; + curx = x; + cury = y; + } + addToD([[x1,y1],[x,y]]); + break; + case 10: // absolute elliptical arc (A) + x -= curx; + y -= cury; + case 11: // relative elliptical arc (a) + if(toRel) { + curx += x; + cury += y; + } else { + x += curx; + y += cury; + curx = x; + cury = y; + } + addToD([[seg.r1,seg.r2]], [ + seg.angle, + (seg.largeArcFlag ? 1 : 0), + (seg.sweepFlag ? 1 : 0) + ],[x,y] + ); + break; + case 16: // absolute smooth cubic (S) + x -= curx; x2 -= curx; + y -= cury; y2 -= cury; + case 17: // relative smooth cubic (s) + if(toRel) { + curx += x; + cury += y; + } else { + x += curx; x2 += curx; + y += cury; y2 += cury; + curx = x; + cury = y; + } + addToD([[x2,y2],[x,y]]); + break; + } // switch on path segment type + } // for each segment + return d; + } + } +}(); +// end pathActions + +// Group: Serialization + +// Function: removeUnusedDefElems +// Looks at DOM elements inside the <defs> to see if they are referred to, +// removes them from the DOM if they are not. +// +// Returns: +// The amount of elements that were removed +var removeUnusedDefElems = this.removeUnusedDefElems = function() { + var defs = svgcontent.getElementsByTagNameNS(svgns, "defs"); + if(!defs || !defs.length) return 0; + +// if(!defs.firstChild) return; + + var defelem_uses = [], + numRemoved = 0; + var attrs = ['fill', 'stroke', 'filter', 'marker-start', 'marker-mid', 'marker-end']; + var alen = attrs.length; + + var all_els = svgcontent.getElementsByTagNameNS(svgns, '*'); + var all_len = all_els.length; + + for(var i=0; i<all_len; i++) { + var el = all_els[i]; + for(var j = 0; j < alen; j++) { + var ref = getUrlFromAttr(el.getAttribute(attrs[j])); + if(ref) { + defelem_uses.push(ref.substr(1)); + } + } + + // gradients can refer to other gradients + var href = getHref(el); + if (href && href.indexOf('#') === 0) { + defelem_uses.push(href.substr(1)); + } + }; + + var defelems = $(defs).find("linearGradient, radialGradient, filter, marker, svg, symbol"); + defelem_ids = [], + i = defelems.length; + while (i--) { + var defelem = defelems[i]; + var id = defelem.id; + if(defelem_uses.indexOf(id) < 0) { + // Not found, so remove (but remember) + removedElements[id] = defelem; + defelem.parentNode.removeChild(defelem); + numRemoved++; + } + } + + return numRemoved; +} + +// Function: svgCanvasToString +// Main function to set up the SVG content for output +// +// Returns: +// String containing the SVG image for output +this.svgCanvasToString = function() { + // keep calling it until there are none to remove + while (removeUnusedDefElems() > 0) {}; + + pathActions.clear(true); + + // Keep SVG-Edit comment on top + $.each(svgcontent.childNodes, function(i, node) { + if(i && node.nodeType === 8 && node.data.indexOf('Created with') >= 0) { + svgcontent.insertBefore(node, svgcontent.firstChild); + } + }); + + // Move out of in-group editing mode + if(current_group) { + leaveContext(); + selectOnly([current_group]); + } + + var naked_svgs = []; + + // Unwrap gsvg if it has no special attributes (only id and style) + $(svgcontent).find('g:data(gsvg)').each(function() { + var attrs = this.attributes; + var len = attrs.length; + for(var i=0; i<len; i++) { + if(attrs[i].nodeName == 'id' || attrs[i].nodeName == 'style') { + len--; + } + } + // No significant attributes, so ungroup + if(len <= 0) { + var svg = this.firstChild; + naked_svgs.push(svg); + $(this).replaceWith(svg); + } + }); + var output = this.svgToString(svgcontent, 0); + + // Rewrap gsvg + if(naked_svgs.length) { + $(naked_svgs).each(function() { + groupSvgElem(this); + }); + } + + return output; +}; + +// Function: svgToString +// Sub function ran on each SVG element to convert it to a string as desired +// +// Parameters: +// elem - The SVG element to convert +// indent - Integer with the amount of spaces to indent this tag +// +// Returns: +// String with the given element as an SVG tag +this.svgToString = function(elem, indent) { + var out = new Array(), toXml = svgedit.utilities.toXml; + var unit = curConfig.baseUnit; + var unit_re = new RegExp('^-?[\\d\\.]+' + unit + '$'); + + if (elem) { + cleanupElement(elem); + var attrs = elem.attributes, + attr, + i, + childs = elem.childNodes; + + for (var i=0; i<indent; i++) out.push(" "); + out.push("<"); out.push(elem.nodeName); + if(elem.id === 'svgcontent') { + // Process root element separately + var res = getResolution(); + + var vb = ""; + // TODO: Allow this by dividing all values by current baseVal + // Note that this also means we should properly deal with this on import +// if(curConfig.baseUnit !== "px") { +// var unit = curConfig.baseUnit; +// var unit_m = svgedit.units.getTypeMap()[unit]; +// res.w = svgedit.units.shortFloat(res.w / unit_m) +// res.h = svgedit.units.shortFloat(res.h / unit_m) +// vb = ' viewBox="' + [0, 0, res.w, res.h].join(' ') + '"'; +// res.w += unit; +// res.h += unit; +// } + + if(unit !== "px") { + res.w = svgedit.units.convertUnit(res.w, unit) + unit; + res.h = svgedit.units.convertUnit(res.h, unit) + unit; + } + + out.push(' width="' + res.w + '" height="' + res.h + '"' + vb + ' xmlns="'+svgns+'"'); + + var nsuris = {}; + + // Check elements for namespaces, add if found + $(elem).find('*').andSelf().each(function() { + var el = this; + $.each(this.attributes, function(i, attr) { + var uri = attr.namespaceURI; + if(uri && !nsuris[uri] && nsMap[uri] !== 'xmlns' && nsMap[uri] !== 'xml' ) { + nsuris[uri] = true; + out.push(" xmlns:" + nsMap[uri] + '="' + uri +'"'); + } + }); + }); + + var i = attrs.length; + var attr_names = ['width','height','xmlns','x','y','viewBox','id','overflow']; + while (i--) { + attr = attrs.item(i); + var attrVal = toXml(attr.nodeValue); + + // Namespaces have already been dealt with, so skip + if(attr.nodeName.indexOf('xmlns:') === 0) continue; + + // only serialize attributes we don't use internally + if (attrVal != "" && attr_names.indexOf(attr.localName) == -1) + { + + if(!attr.namespaceURI || nsMap[attr.namespaceURI]) { + out.push(' '); + out.push(attr.nodeName); out.push("=\""); + out.push(attrVal); out.push("\""); + } + } + } + } else { + // Skip empty defs + if(elem.nodeName === 'defs' && !elem.firstChild) return; + + var moz_attrs = ['-moz-math-font-style', '_moz-math-font-style']; + for (var i=attrs.length-1; i>=0; i--) { + attr = attrs.item(i); + var attrVal = toXml(attr.nodeValue); + //remove bogus attributes added by Gecko + if (moz_attrs.indexOf(attr.localName) >= 0) continue; + if (attrVal != "") { + if(attrVal.indexOf('pointer-events') === 0) continue; + if(attr.localName === "class" && attrVal.indexOf('se_') === 0) continue; + out.push(" "); + if(attr.localName === 'd') attrVal = pathActions.convertPath(elem, true); + if(!isNaN(attrVal)) { + attrVal = svgedit.units.shortFloat(attrVal); + } else if(unit_re.test(attrVal)) { + attrVal = svgedit.units.shortFloat(attrVal) + unit; + } + + // Embed images when saving + if(save_options.apply + && elem.nodeName === 'image' + && attr.localName === 'href' + && save_options.images + && save_options.images === 'embed') + { + var img = encodableImages[attrVal]; + if(img) attrVal = img; + } + + // map various namespaces to our fixed namespace prefixes + // (the default xmlns attribute itself does not get a prefix) + if(!attr.namespaceURI || attr.namespaceURI == svgns || nsMap[attr.namespaceURI]) { + out.push(attr.nodeName); out.push("=\""); + out.push(attrVal); out.push("\""); + } + } + } + } + + if (elem.hasChildNodes()) { + out.push(">"); + indent++; + var bOneLine = false; + + for (var i=0; i<childs.length; i++) + { + var child = childs.item(i); + switch(child.nodeType) { + case 1: // element node + out.push("\n"); + out.push(this.svgToString(childs.item(i), indent)); + break; + case 3: // text node + var str = child.nodeValue.replace(/^\s+|\s+$/g, ""); + if (str != "") { + bOneLine = true; + out.push(toXml(str) + ""); + } + break; + case 4: // cdata node + out.push("\n"); + out.push(new Array(indent+1).join(" ")); + out.push("<![CDATA["); + out.push(child.nodeValue); + out.push("]]>"); + break; + case 8: // comment + out.push("\n"); + out.push(new Array(indent+1).join(" ")); + out.push("<!--"); + out.push(child.data); + out.push("-->"); + break; + } // switch on node type + } + indent--; + if (!bOneLine) { + out.push("\n"); + for (var i=0; i<indent; i++) out.push(" "); + } + out.push("</"); out.push(elem.nodeName); out.push(">"); + } else { + out.push("/>"); + } + } + return out.join(''); +}; // end svgToString() + +// Function: embedImage +// Converts a given image file to a data URL when possible, then runs a given callback +// +// Parameters: +// val - String with the path/URL of the image +// callback - Optional function to run when image data is found, supplies the +// result (data URL or false) as first parameter. +this.embedImage = function(val, callback) { + + // load in the image and once it's loaded, get the dimensions + $(new Image()).load(function() { + // create a canvas the same size as the raster image + var canvas = document.createElement("canvas"); + canvas.width = this.width; + canvas.height = this.height; + // load the raster image into the canvas + canvas.getContext("2d").drawImage(this,0,0); + // retrieve the data: URL + try { + var urldata = ';svgedit_url=' + encodeURIComponent(val); + urldata = canvas.toDataURL().replace(';base64',urldata+';base64'); + encodableImages[val] = urldata; + } catch(e) { + encodableImages[val] = false; + } + last_good_img_url = val; + if(callback) callback(encodableImages[val]); + }).attr('src',val); +} + +// Function: setGoodImage +// Sets a given URL to be a "last good image" URL +this.setGoodImage = function(val) { + last_good_img_url = val; +} + +this.open = function() { + // Nothing by default, handled by optional widget/extension +}; + +// Function: save +// Serializes the current drawing into SVG XML text and returns it to the 'saved' handler. +// This function also includes the XML prolog. Clients of the SvgCanvas bind their save +// function to the 'saved' event. +// +// Returns: +// Nothing +this.save = function(opts) { + // remove the selected outline before serializing + clearSelection(); + // Update save options if provided + if(opts) $.extend(save_options, opts); + save_options.apply = true; + + // no need for doctype, see http://jwatt.org/svg/authoring/#doctype-declaration + var str = this.svgCanvasToString(); + call("saved", str); +}; + +// Function: rasterExport +// Generates a PNG Data URL based on the current image, then calls "exported" +// with an object including the string and any issues found +this.rasterExport = function() { + // remove the selected outline before serializing + clearSelection(); + + // Check for known CanVG issues + var issues = []; + + // Selector and notice + var issue_list = { + 'feGaussianBlur': uiStrings.exportNoBlur, + 'foreignObject': uiStrings.exportNoforeignObject, + '[stroke-dasharray]': uiStrings.exportNoDashArray + }; + var content = $(svgcontent); + + // Add font/text check if Canvas Text API is not implemented + if(!("font" in $('<canvas>')[0].getContext('2d'))) { + issue_list['text'] = uiStrings.exportNoText; + } + + $.each(issue_list, function(sel, descr) { + if(content.find(sel).length) { + issues.push(descr); + } + }); + + var str = this.svgCanvasToString(); + call("exported", {svg: str, issues: issues}); +}; + +// Function: getSvgString +// Returns the current drawing as raw SVG XML text. +// +// Returns: +// The current drawing as raw SVG XML text. +this.getSvgString = function() { + save_options.apply = false; + return this.svgCanvasToString(); +}; + +// Function: randomizeIds +// This function determines whether to use a nonce in the prefix, when +// generating IDs for future documents in SVG-Edit. +// +// Parameters: +// an opional boolean, which, if true, adds a nonce to the prefix. Thus +// svgCanvas.randomizeIds() <==> svgCanvas.randomizeIds(true) +// +// if you're controlling SVG-Edit externally, and want randomized IDs, call +// this BEFORE calling svgCanvas.setSvgString +// +this.randomizeIds = function() { + if (arguments.length > 0 && arguments[0] == false) { + svgedit.draw.randomizeIds(false, getCurrentDrawing()); + } else { + svgedit.draw.randomizeIds(true, getCurrentDrawing()); + } +}; + +// Function: uniquifyElems +// Ensure each element has a unique ID +// +// Parameters: +// g - The parent element of the tree to give unique IDs +var uniquifyElems = this.uniquifyElems = function(g) { + var ids = {}; + // TODO: Handle markers and connectors. These are not yet re-identified properly + // as their referring elements do not get remapped. + // + // <marker id='se_marker_end_svg_7'/> + // <polyline id='svg_7' se:connector='svg_1 svg_6' marker-end='url(#se_marker_end_svg_7)'/> + // + // Problem #1: if svg_1 gets renamed, we do not update the polyline's se:connector attribute + // Problem #2: if the polyline svg_7 gets renamed, we do not update the marker id nor the polyline's marker-end attribute + var ref_elems = ["filter", "linearGradient", "pattern", "radialGradient", "symbol", "textPath", "use"]; + + svgedit.utilities.walkTree(g, function(n) { + // if it's an element node + if (n.nodeType == 1) { + // and the element has an ID + if (n.id) { + // and we haven't tracked this ID yet + if (!(n.id in ids)) { + // add this id to our map + ids[n.id] = {elem:null, attrs:[], hrefs:[]}; + } + ids[n.id]["elem"] = n; + } + + // now search for all attributes on this element that might refer + // to other elements + $.each(ref_attrs,function(i,attr) { + var attrnode = n.getAttributeNode(attr); + if (attrnode) { + // the incoming file has been sanitized, so we should be able to safely just strip off the leading # + var url = svgedit.utilities.getUrlFromAttr(attrnode.value), + refid = url ? url.substr(1) : null; + if (refid) { + if (!(refid in ids)) { + // add this id to our map + ids[refid] = {elem:null, attrs:[], hrefs:[]}; + } + ids[refid]["attrs"].push(attrnode); + } + } + }); + + // check xlink:href now + var href = svgedit.utilities.getHref(n); + // TODO: what if an <image> or <a> element refers to an element internally? + if(href && ref_elems.indexOf(n.nodeName) >= 0) + { + var refid = href.substr(1); + if (refid) { + if (!(refid in ids)) { + // add this id to our map + ids[refid] = {elem:null, attrs:[], hrefs:[]}; + } + ids[refid]["hrefs"].push(n); + } + } + } + }); + + // in ids, we now have a map of ids, elements and attributes, let's re-identify + for (var oldid in ids) { + if (!oldid) continue; + var elem = ids[oldid]["elem"]; + if (elem) { + var newid = getNextId(); + + // assign element its new id + elem.id = newid; + + // remap all url() attributes + var attrs = ids[oldid]["attrs"]; + var j = attrs.length; + while (j--) { + var attr = attrs[j]; + attr.ownerElement.setAttribute(attr.name, "url(#" + newid + ")"); + } + + // remap all href attributes + var hreffers = ids[oldid]["hrefs"]; + var k = hreffers.length; + while (k--) { + var hreffer = hreffers[k]; + svgedit.utilities.setHref(hreffer, "#"+newid); + } + } + } +} + +// Function setUseData +// Assigns reference data for each use element +var setUseData = this.setUseData = function(parent) { + var elems = $(parent); + + if(parent.tagName !== 'use') { + elems = elems.find('use'); + } + + elems.each(function() { + var id = getHref(this).substr(1); + var ref_elem = getElem(id); + if(!ref_elem) return; + $(this).data('ref', ref_elem); + if(ref_elem.tagName == 'symbol' || ref_elem.tagName == 'svg') { + $(this).data('symbol', ref_elem).data('ref', ref_elem); + } + }); +} + +// Function convertGradients +// Converts gradients from userSpaceOnUse to objectBoundingBox +var convertGradients = this.convertGradients = function(elem) { + var elems = $(elem).find('linearGradient, radialGradient'); + if(!elems.length && svgedit.browser.isWebkit()) { + // Bug in webkit prevents regular *Gradient selector search + elems = $(elem).find('*').filter(function() { + return (this.tagName.indexOf('Gradient') >= 0); + }); + } + + elems.each(function() { + var grad = this; + if($(grad).attr('gradientUnits') === 'userSpaceOnUse') { + // TODO: Support more than one element with this ref by duplicating parent grad + var elems = $(svgcontent).find('[fill=url(#' + grad.id + ')],[stroke=url(#' + grad.id + ')]'); + if(!elems.length) return; + + // get object's bounding box + var bb = svgedit.utilities.getBBox(elems[0]); + + // This will occur if the element is inside a <defs> or a <symbol>, + // in which we shouldn't need to convert anyway. + if(!bb) return; + + if(grad.tagName === 'linearGradient') { + var g_coords = $(grad).attr(['x1', 'y1', 'x2', 'y2']); + + // If has transform, convert + var tlist = grad.gradientTransform.baseVal; + if(tlist && tlist.numberOfItems > 0) { + var m = transformListToTransform(tlist).matrix; + var pt1 = transformPoint(g_coords.x1, g_coords.y1, m); + var pt2 = transformPoint(g_coords.x2, g_coords.y2, m); + + g_coords.x1 = pt1.x; + g_coords.y1 = pt1.y; + g_coords.x2 = pt2.x; + g_coords.y2 = pt2.y; + grad.removeAttribute('gradientTransform'); + } + + $(grad).attr({ + x1: (g_coords.x1 - bb.x) / bb.width, + y1: (g_coords.y1 - bb.y) / bb.height, + x2: (g_coords.x2 - bb.x) / bb.width, + y2: (g_coords.y2 - bb.y) / bb.height + }); + grad.removeAttribute('gradientUnits'); + } else { + // Note: radialGradient elements cannot be easily converted + // because userSpaceOnUse will keep circular gradients, while + // objectBoundingBox will x/y scale the gradient according to + // its bbox. + + // For now we'll do nothing, though we should probably have + // the gradient be updated as the element is moved, as + // inkscape/illustrator do. + +// var g_coords = $(grad).attr(['cx', 'cy', 'r']); +// +// $(grad).attr({ +// cx: (g_coords.cx - bb.x) / bb.width, +// cy: (g_coords.cy - bb.y) / bb.height, +// r: g_coords.r +// }); +// +// grad.removeAttribute('gradientUnits'); + } + + + } + }); +} + +// Function: convertToGroup +// Converts selected/given <use> or child SVG element to a group +var convertToGroup = this.convertToGroup = function(elem) { + if(!elem) { + elem = selectedElements[0]; + } + var $elem = $(elem); + + var batchCmd = new BatchCommand(); + + var ts; + + if($elem.data('gsvg')) { + // Use the gsvg as the new group + var svg = elem.firstChild; + var pt = $(svg).attr(['x', 'y']); + + $(elem.firstChild.firstChild).unwrap(); + $(elem).removeData('gsvg'); + + var tlist = getTransformList(elem); + var xform = svgroot.createSVGTransform(); + xform.setTranslate(pt.x, pt.y); + tlist.appendItem(xform); + recalculateDimensions(elem); + call("selected", [elem]); + } else if($elem.data('symbol')) { + elem = $elem.data('symbol'); + + ts = $elem.attr('transform'); + var pos = $elem.attr(['x','y']); + + var vb = elem.getAttribute('viewBox'); + + if(vb) { + var nums = vb.split(' '); + pos.x -= +nums[0]; + pos.y -= +nums[1]; + } + + // Not ideal, but works + ts += " translate(" + (pos.x || 0) + "," + (pos.y || 0) + ")"; + + var prev = $elem.prev(); + + // Remove <use> element + batchCmd.addSubCommand(new RemoveElementCommand($elem[0], $elem[0].nextSibling, $elem[0].parentNode)); + $elem.remove(); + + // See if other elements reference this symbol + var has_more = $(svgcontent).find('use:data(symbol)').length; + + var g = svgdoc.createElementNS(svgns, "g"); + var childs = elem.childNodes; + + for(var i = 0; i < childs.length; i++) { + g.appendChild(childs[i].cloneNode(true)); + } + + // Duplicate the gradients for Gecko, since they weren't included in the <symbol> + if(svgedit.browser.isGecko()) { + var dupeGrads = $(findDefs()).children('linearGradient,radialGradient,pattern').clone(); + $(g).append(dupeGrads); + } + + if (ts) { + g.setAttribute("transform", ts); + } + + var parent = elem.parentNode; + + uniquifyElems(g); + + // Put the dupe gradients back into <defs> (after uniquifying them) + if(svgedit.browser.isGecko()) { + $(findDefs()).append( $(g).find('linearGradient,radialGradient,pattern') ); + } + + // now give the g itself a new id + g.id = getNextId(); + + prev.after(g); + + if(parent) { + if(!has_more) { + // remove symbol/svg element + var nextSibling = elem.nextSibling; + parent.removeChild(elem); + batchCmd.addSubCommand(new RemoveElementCommand(elem, nextSibling, parent)); + } + batchCmd.addSubCommand(new InsertElementCommand(g)); + } + + setUseData(g); + + if(svgedit.browser.isGecko()) { + convertGradients(findDefs()); + } else { + convertGradients(g); + } + + // recalculate dimensions on the top-level children so that unnecessary transforms + // are removed + svgedit.utilities.walkTreePost(g, function(n){try{recalculateDimensions(n)}catch(e){console.log(e)}}); + + // Give ID for any visible element missing one + $(g).find(visElems).each(function() { + if(!this.id) this.id = getNextId(); + }); + + selectOnly([g]); + + var cm = pushGroupProperties(g, true); + if(cm) { + batchCmd.addSubCommand(cm); + } + + addCommandToHistory(batchCmd); + + } else { + console.log('Unexpected element to ungroup:', elem); + } +} + +// +// Function: setSvgString +// This function sets the current drawing as the input SVG XML. +// +// Parameters: +// xmlString - The SVG as XML text. +// +// Returns: +// This function returns false if the set was unsuccessful, true otherwise. +this.setSvgString = function(xmlString) { + try { + // convert string into XML document + var newDoc = svgedit.utilities.text2xml(xmlString); + + this.prepareSvg(newDoc); + + var batchCmd = new BatchCommand("Change Source"); + + // remove old svg document + var nextSibling = svgcontent.nextSibling; + var oldzoom = svgroot.removeChild(svgcontent); + batchCmd.addSubCommand(new RemoveElementCommand(oldzoom, nextSibling, svgroot)); + + // set new svg document + // If DOM3 adoptNode() available, use it. Otherwise fall back to DOM2 importNode() + if(svgdoc.adoptNode) { + svgcontent = svgdoc.adoptNode(newDoc.documentElement); + } + else { + svgcontent = svgdoc.importNode(newDoc.documentElement, true); + } + + svgroot.appendChild(svgcontent); + var content = $(svgcontent); + + canvas.current_drawing_ = new svgedit.draw.Drawing(svgcontent, idprefix); + + // retrieve or set the nonce + var nonce = getCurrentDrawing().getNonce(); + if (nonce) { + call("setnonce", nonce); + } else { + call("unsetnonce"); + } + + // change image href vals if possible + content.find('image').each(function() { + var image = this; + preventClickDefault(image); + var val = getHref(this); + if(val.indexOf('data:') === 0) { + // Check if an SVG-edit data URI + var m = val.match(/svgedit_url=(.*?);/); + if(m) { + var url = decodeURIComponent(m[1]); + $(new Image()).load(function() { + image.setAttributeNS(xlinkns,'xlink:href',url); + }).attr('src',url); + } + } + // Add to encodableImages if it loads + canvas.embedImage(val); + }); + + // Wrap child SVGs in group elements + content.find('svg').each(function() { + // Skip if it's in a <defs> + if($(this).closest('defs').length) return; + + uniquifyElems(this); + + // Check if it already has a gsvg group + var pa = this.parentNode; + if(pa.childNodes.length === 1 && pa.nodeName === 'g') { + $(pa).data('gsvg', this); + pa.id = pa.id || getNextId(); + } else { + groupSvgElem(this); + } + }); + + // For Firefox: Put all paint elems in defs + if(svgedit.browser.isGecko()) { + content.find('linearGradient, radialGradient, pattern').appendTo(findDefs()); + } + + + // Set ref element for <use> elements + + // TODO: This should also be done if the object is re-added through "redo" + setUseData(content); + + convertGradients(content[0]); + + // recalculate dimensions on the top-level children so that unnecessary transforms + // are removed + svgedit.utilities.walkTreePost(svgcontent, function(n){try{recalculateDimensions(n)}catch(e){console.log(e)}}); + + var attrs = { + id: 'svgcontent', + overflow: curConfig.show_outside_canvas?'visible':'hidden' + }; + + var percs = false; + + // determine proper size + if (content.attr("viewBox")) { + var vb = content.attr("viewBox").split(' '); + attrs.width = vb[2]; + attrs.height = vb[3]; + } + // handle content that doesn't have a viewBox + else { + $.each(['width', 'height'], function(i, dim) { + // Set to 100 if not given + var val = content.attr(dim); + + if(!val) val = '100%'; + + if((val+'').substr(-1) === "%") { + // Use user units if percentage given + percs = true; + } else { + attrs[dim] = convertToNum(dim, val); + } + }); + } + + // identify layers + identifyLayers(); + + // Give ID for any visible layer children missing one + content.children().find(visElems).each(function() { + if(!this.id) this.id = getNextId(); + }); + + // Percentage width/height, so let's base it on visible elements + if(percs) { + var bb = getStrokedBBox(); + attrs.width = bb.width + bb.x; + attrs.height = bb.height + bb.y; + } + + // Just in case negative numbers are given or + // result from the percs calculation + if(attrs.width <= 0) attrs.width = 100; + if(attrs.height <= 0) attrs.height = 100; + + content.attr(attrs); + this.contentW = attrs['width']; + this.contentH = attrs['height']; + + batchCmd.addSubCommand(new InsertElementCommand(svgcontent)); + // update root to the correct size + var changes = content.attr(["width", "height"]); + batchCmd.addSubCommand(new ChangeElementCommand(svgroot, changes)); + + // reset zoom + current_zoom = 1; + + // reset transform lists + svgedit.transformlist.resetListMap(); + clearSelection(); + svgedit.path.clearData(); + svgroot.appendChild(selectorManager.selectorParentGroup); + + addCommandToHistory(batchCmd); + call("changed", [svgcontent]); + } catch(e) { + console.log(e); + return false; + } + + return true; +}; + +// Function: importSvgString +// This function imports the input SVG XML as a <symbol> in the <defs>, then adds a +// <use> to the current layer. +// +// Parameters: +// xmlString - The SVG as XML text. +// +// Returns: +// This function returns false if the import was unsuccessful, true otherwise. +// TODO: +// * properly handle if namespace is introduced by imported content (must add to svgcontent +// and update all prefixes in the imported node) +// * properly handle recalculating dimensions, recalculateDimensions() doesn't handle +// arbitrary transform lists, but makes some assumptions about how the transform list +// was obtained +// * import should happen in top-left of current zoomed viewport +this.importSvgString = function(xmlString) { + + try { + // Get unique ID + var uid = svgedit.utilities.encode64(xmlString.length + xmlString).substr(0,32); + + var useExisting = false; + + // Look for symbol and make sure symbol exists in image + if(import_ids[uid]) { + if( $(import_ids[uid].symbol).parents('#svgroot').length ) { + useExisting = true; + } + } + + var batchCmd = new BatchCommand("Import SVG"); + + if(useExisting) { + var symbol = import_ids[uid].symbol; + var ts = import_ids[uid].xform; + } else { + // convert string into XML document + var newDoc = svgedit.utilities.text2xml(xmlString); + + this.prepareSvg(newDoc); + + // import new svg document into our document + var svg; + // If DOM3 adoptNode() available, use it. Otherwise fall back to DOM2 importNode() + if(svgdoc.adoptNode) { + svg = svgdoc.adoptNode(newDoc.documentElement); + } + else { + svg = svgdoc.importNode(newDoc.documentElement, true); + } + + uniquifyElems(svg); + + var innerw = convertToNum('width', svg.getAttribute("width")), + innerh = convertToNum('height', svg.getAttribute("height")), + innervb = svg.getAttribute("viewBox"), + // if no explicit viewbox, create one out of the width and height + vb = innervb ? innervb.split(" ") : [0,0,innerw,innerh]; + for (var j = 0; j < 4; ++j) + vb[j] = +(vb[j]); + + // TODO: properly handle preserveAspectRatio + var canvasw = +svgcontent.getAttribute("width"), + canvash = +svgcontent.getAttribute("height"); + // imported content should be 1/3 of the canvas on its largest dimension + + if (innerh > innerw) { + var ts = "scale(" + (canvash/3)/vb[3] + ")"; + } + else { + var ts = "scale(" + (canvash/3)/vb[2] + ")"; + } + + // Hack to make recalculateDimensions understand how to scale + ts = "translate(0) " + ts + " translate(0)"; + + var symbol = svgdoc.createElementNS(svgns, "symbol"); + var defs = findDefs(); + + if(svgedit.browser.isGecko()) { + // Move all gradients into root for Firefox, workaround for this bug: + // https://bugzilla.mozilla.org/show_bug.cgi?id=353575 + // TODO: Make this properly undo-able. + $(svg).find('linearGradient, radialGradient, pattern').appendTo(defs); + } + + while (svg.firstChild) { + var first = svg.firstChild; + symbol.appendChild(first); + } + var attrs = svg.attributes; + for(var i=0; i < attrs.length; i++) { + var attr = attrs[i]; + symbol.setAttribute(attr.nodeName, attr.nodeValue); + } + symbol.id = getNextId(); + + // Store data + import_ids[uid] = { + symbol: symbol, + xform: ts + } + + findDefs().appendChild(symbol); + batchCmd.addSubCommand(new InsertElementCommand(symbol)); + } + + + var use_el = svgdoc.createElementNS(svgns, "use"); + use_el.id = getNextId(); + setHref(use_el, "#" + symbol.id); + + (current_group || getCurrentDrawing().getCurrentLayer()).appendChild(use_el); + batchCmd.addSubCommand(new InsertElementCommand(use_el)); + clearSelection(); + + use_el.setAttribute("transform", ts); + recalculateDimensions(use_el); + $(use_el).data('symbol', symbol).data('ref', symbol); + addToSelection([use_el]); + + // TODO: Find way to add this in a recalculateDimensions-parsable way +// if (vb[0] != 0 || vb[1] != 0) +// ts = "translate(" + (-vb[0]) + "," + (-vb[1]) + ") " + ts; + addCommandToHistory(batchCmd); + call("changed", [svgcontent]); + + } catch(e) { + console.log(e); + return false; + } + + return true; +}; + +// TODO(codedread): Move all layer/context functions in draw.js +// Layer API Functions + +// Group: Layers + +// Function: identifyLayers +// Updates layer system +var identifyLayers = canvas.identifyLayers = function() { + leaveContext(); + getCurrentDrawing().identifyLayers(); +}; + +// Function: createLayer +// Creates a new top-level layer in the drawing with the given name, sets the current layer +// to it, and then clears the selection This function then calls the 'changed' handler. +// This is an undoable action. +// +// Parameters: +// name - The given name +this.createLayer = function(name) { + var batchCmd = new BatchCommand("Create Layer"); + var new_layer = getCurrentDrawing().createLayer(name); + batchCmd.addSubCommand(new InsertElementCommand(new_layer)); + addCommandToHistory(batchCmd); + clearSelection(); + call("changed", [new_layer]); +}; + +// Function: cloneLayer +// Creates a new top-level layer in the drawing with the given name, copies all the current layer's contents +// to it, and then clears the selection This function then calls the 'changed' handler. +// This is an undoable action. +// +// Parameters: +// name - The given name +this.cloneLayer = function(name) { + var batchCmd = new BatchCommand("Duplicate Layer"); + var new_layer = svgdoc.createElementNS(svgns, "g"); + var layer_title = svgdoc.createElementNS(svgns, "title"); + layer_title.textContent = name; + new_layer.appendChild(layer_title); + var current_layer = getCurrentDrawing().getCurrentLayer(); + $(current_layer).after(new_layer); + var childs = current_layer.childNodes; + for(var i = 0; i < childs.length; i++) { + var ch = childs[i]; + if(ch.localName == 'title') continue; + new_layer.appendChild(copyElem(ch)); + } + + clearSelection(); + identifyLayers(); + + batchCmd.addSubCommand(new InsertElementCommand(new_layer)); + addCommandToHistory(batchCmd); + canvas.setCurrentLayer(name); + call("changed", [new_layer]); +}; + +// Function: deleteCurrentLayer +// Deletes the current layer from the drawing and then clears the selection. This function +// then calls the 'changed' handler. This is an undoable action. +this.deleteCurrentLayer = function() { + var current_layer = getCurrentDrawing().getCurrentLayer(); + var nextSibling = current_layer.nextSibling; + var parent = current_layer.parentNode; + current_layer = getCurrentDrawing().deleteCurrentLayer(); + if (current_layer) { + var batchCmd = new BatchCommand("Delete Layer"); + // store in our Undo History + batchCmd.addSubCommand(new RemoveElementCommand(current_layer, nextSibling, parent)); + addCommandToHistory(batchCmd); + clearSelection(); + call("changed", [parent]); + return true; + } + return false; +}; + +// Function: setCurrentLayer +// Sets the current layer. If the name is not a valid layer name, then this function returns +// false. Otherwise it returns true. This is not an undo-able action. +// +// Parameters: +// name - the name of the layer you want to switch to. +// +// Returns: +// true if the current layer was switched, otherwise false +this.setCurrentLayer = function(name) { + var result = getCurrentDrawing().setCurrentLayer(svgedit.utilities.toXml(name)); + if (result) { + clearSelection(); + } + return result; +}; + +// Function: renameCurrentLayer +// Renames the current layer. If the layer name is not valid (i.e. unique), then this function +// does nothing and returns false, otherwise it returns true. This is an undo-able action. +// +// Parameters: +// newname - the new name you want to give the current layer. This name must be unique +// among all layer names. +// +// Returns: +// true if the rename succeeded, false otherwise. +this.renameCurrentLayer = function(newname) { + var drawing = getCurrentDrawing(); + if (drawing.current_layer) { + var oldLayer = drawing.current_layer; + // setCurrentLayer will return false if the name doesn't already exist + // this means we are free to rename our oldLayer + if (!canvas.setCurrentLayer(newname)) { + var batchCmd = new BatchCommand("Rename Layer"); + // find the index of the layer + for (var i = 0; i < drawing.getNumLayers(); ++i) { + if (drawing.all_layers[i][1] == oldLayer) break; + } + var oldname = drawing.getLayerName(i); + drawing.all_layers[i][0] = svgedit.utilities.toXml(newname); + + // now change the underlying title element contents + var len = oldLayer.childNodes.length; + for (var i = 0; i < len; ++i) { + var child = oldLayer.childNodes.item(i); + // found the <title> element, now append all the + if (child && child.tagName == "title") { + // wipe out old name + while (child.firstChild) { child.removeChild(child.firstChild); } + child.textContent = newname; + + batchCmd.addSubCommand(new ChangeElementCommand(child, {"#text":oldname})); + addCommandToHistory(batchCmd); + call("changed", [oldLayer]); + return true; + } + } + } + drawing.current_layer = oldLayer; + } + return false; +}; + +// Function: setCurrentLayerPosition +// Changes the position of the current layer to the new value. If the new index is not valid, +// this function does nothing and returns false, otherwise it returns true. This is an +// undo-able action. +// +// Parameters: +// newpos - The zero-based index of the new position of the layer. This should be between +// 0 and (number of layers - 1) +// +// Returns: +// true if the current layer position was changed, false otherwise. +this.setCurrentLayerPosition = function(newpos) { + var drawing = getCurrentDrawing(); + if (drawing.current_layer && newpos >= 0 && newpos < drawing.getNumLayers()) { + for (var oldpos = 0; oldpos < drawing.getNumLayers(); ++oldpos) { + if (drawing.all_layers[oldpos][1] == drawing.current_layer) break; + } + // some unknown error condition (current_layer not in all_layers) + if (oldpos == drawing.getNumLayers()) { return false; } + + if (oldpos != newpos) { + // if our new position is below us, we need to insert before the node after newpos + var refLayer = null; + var oldNextSibling = drawing.current_layer.nextSibling; + if (newpos > oldpos ) { + if (newpos < drawing.getNumLayers()-1) { + refLayer = drawing.all_layers[newpos+1][1]; + } + } + // if our new position is above us, we need to insert before the node at newpos + else { + refLayer = drawing.all_layers[newpos][1]; + } + svgcontent.insertBefore(drawing.current_layer, refLayer); + addCommandToHistory(new MoveElementCommand(drawing.current_layer, oldNextSibling, svgcontent)); + + identifyLayers(); + canvas.setCurrentLayer(drawing.getLayerName(newpos)); + + return true; + } + } + + return false; +}; + +// Function: setLayerVisibility +// Sets the visibility of the layer. If the layer name is not valid, this function return +// false, otherwise it returns true. This is an undo-able action. +// +// Parameters: +// layername - the name of the layer to change the visibility +// bVisible - true/false, whether the layer should be visible +// +// Returns: +// true if the layer's visibility was set, false otherwise +this.setLayerVisibility = function(layername, bVisible) { + var drawing = getCurrentDrawing(); + var prevVisibility = drawing.getLayerVisibility(layername); + var layer = drawing.setLayerVisibility(layername, bVisible); + if (layer) { + var oldDisplay = prevVisibility ? 'inline' : 'none'; + addCommandToHistory(new ChangeElementCommand(layer, {'display':oldDisplay}, 'Layer Visibility')); + } else { + return false; + } + + if (layer == drawing.getCurrentLayer()) { + clearSelection(); + pathActions.clear(); + } +// call("changed", [selected]); + return true; +}; + +// Function: moveSelectedToLayer +// Moves the selected elements to layername. If the name is not a valid layer name, then false +// is returned. Otherwise it returns true. This is an undo-able action. +// +// Parameters: +// layername - the name of the layer you want to which you want to move the selected elements +// +// Returns: +// true if the selected elements were moved to the layer, false otherwise. +this.moveSelectedToLayer = function(layername) { + // find the layer + var layer = null; + var drawing = getCurrentDrawing(); + for (var i = 0; i < drawing.getNumLayers(); ++i) { + if (drawing.getLayerName(i) == layername) { + layer = drawing.all_layers[i][1]; + break; + } + } + if (!layer) return false; + + var batchCmd = new BatchCommand("Move Elements to Layer"); + + // loop for each selected element and move it + var selElems = selectedElements; + var i = selElems.length; + while (i--) { + var elem = selElems[i]; + if (!elem) continue; + var oldNextSibling = elem.nextSibling; + // TODO: this is pretty brittle! + var oldLayer = elem.parentNode; + layer.appendChild(elem); + batchCmd.addSubCommand(new MoveElementCommand(elem, oldNextSibling, oldLayer)); + } + + addCommandToHistory(batchCmd); + + return true; +}; + +this.mergeLayer = function(skipHistory) { + var batchCmd = new BatchCommand("Merge Layer"); + var drawing = getCurrentDrawing(); + var prev = $(drawing.current_layer).prev()[0]; + if(!prev) return; + var childs = drawing.current_layer.childNodes; + var len = childs.length; + var layerNextSibling = drawing.current_layer.nextSibling; + batchCmd.addSubCommand(new RemoveElementCommand(drawing.current_layer, layerNextSibling, svgcontent)); + + while(drawing.current_layer.firstChild) { + var ch = drawing.current_layer.firstChild; + if(ch.localName == 'title') { + var chNextSibling = ch.nextSibling; + batchCmd.addSubCommand(new RemoveElementCommand(ch, chNextSibling, drawing.current_layer)); + drawing.current_layer.removeChild(ch); + continue; + } + var oldNextSibling = ch.nextSibling; + prev.appendChild(ch); + batchCmd.addSubCommand(new MoveElementCommand(ch, oldNextSibling, drawing.current_layer)); + } + + // Remove current layer + svgcontent.removeChild(drawing.current_layer); + + if(!skipHistory) { + clearSelection(); + identifyLayers(); + + call("changed", [svgcontent]); + + addCommandToHistory(batchCmd); + } + + drawing.current_layer = prev; + return batchCmd; +} + +this.mergeAllLayers = function() { + var batchCmd = new BatchCommand("Merge all Layers"); + var drawing = getCurrentDrawing(); + drawing.current_layer = drawing.all_layers[drawing.getNumLayers()-1][1]; + while($(svgcontent).children('g').length > 1) { + batchCmd.addSubCommand(canvas.mergeLayer(true)); + } + + clearSelection(); + identifyLayers(); + call("changed", [svgcontent]); + addCommandToHistory(batchCmd); +} + +// Function: leaveContext +// Return from a group context to the regular kind, make any previously +// disabled elements enabled again +var leaveContext = this.leaveContext = function() { + var len = disabled_elems.length; + if(len) { + for(var i = 0; i < len; i++) { + var elem = disabled_elems[i]; + + var orig = elData(elem, 'orig_opac'); + if(orig !== 1) { + elem.setAttribute('opacity', orig); + } else { + elem.removeAttribute('opacity'); + } + elem.setAttribute('style', 'pointer-events: inherit'); + } + disabled_elems = []; + clearSelection(true); + call("contextset", null); + } + current_group = null; +} + +// Function: setContext +// Set the current context (for in-group editing) +var setContext = this.setContext = function(elem) { + leaveContext(); + if(typeof elem === 'string') { + elem = getElem(elem); + } + + // Edit inside this group + current_group = elem; + + // Disable other elements + $(elem).parentsUntil('#svgcontent').andSelf().siblings().each(function() { + var opac = this.getAttribute('opacity') || 1; + // Store the original's opacity + elData(this, 'orig_opac', opac); + this.setAttribute('opacity', opac * .33); + this.setAttribute('style', 'pointer-events: none'); + disabled_elems.push(this); + }); + + clearSelection(); + call("contextset", current_group); +} + +// Group: Document functions + +// Function: clear +// Clears the current document. This is not an undoable action. +this.clear = function() { + pathActions.clear(); + + clearSelection(); + + // clear the svgcontent node + canvas.clearSvgContentElement(); + + // create new document + canvas.current_drawing_ = new svgedit.draw.Drawing(svgcontent); + + // create empty first layer + canvas.createLayer("Layer 1"); + + // clear the undo stack + canvas.undoMgr.resetUndoStack(); + + // reset the selector manager + selectorManager.initGroup(); + + // reset the rubber band box + rubberBox = selectorManager.getRubberBandBox(); + + call("cleared"); +}; + +// Function: linkControlPoints +// Alias function +this.linkControlPoints = pathActions.linkControlPoints; + +// Function: getContentElem +// Returns the content DOM element +this.getContentElem = function() { return svgcontent; }; + +// Function: getRootElem +// Returns the root DOM element +this.getRootElem = function() { return svgroot; }; + +// Function: getSelectedElems +// Returns the array with selected DOM elements +this.getSelectedElems = function() { return selectedElements; }; + +// Function: getResolution +// Returns the current dimensions and zoom level in an object +var getResolution = this.getResolution = function() { +// var vb = svgcontent.getAttribute("viewBox").split(' '); +// return {'w':vb[2], 'h':vb[3], 'zoom': current_zoom}; + + var width = svgcontent.getAttribute("width")/current_zoom; + var height = svgcontent.getAttribute("height")/current_zoom; + + return { + 'w': width, + 'h': height, + 'zoom': current_zoom + }; +}; + +// Function: getZoom +// Returns the current zoom level +this.getZoom = function(){return current_zoom;}; + +// Function: getVersion +// Returns a string which describes the revision number of SvgCanvas. +this.getVersion = function() { + return "svgcanvas.js ($Rev: 2070 $)"; +}; + +// Function: setUiStrings +// Update interface strings with given values +// +// Parameters: +// strs - Object with strings (see uiStrings for examples) +this.setUiStrings = function(strs) { + $.extend(uiStrings, strs.notification); +} + +// Function: setConfig +// Update configuration options with given values +// +// Parameters: +// opts - Object with options (see curConfig for examples) +this.setConfig = function(opts) { + $.extend(curConfig, opts); +} + +// Function: getTitle +// Returns the current group/SVG's title contents +this.getTitle = function(elem) { + elem = elem || selectedElements[0]; + if(!elem) return; + elem = $(elem).data('gsvg') || $(elem).data('symbol') || elem; + var childs = elem.childNodes; + for (var i=0; i<childs.length; i++) { + if(childs[i].nodeName == 'title') { + return childs[i].textContent; + } + } + return ''; +} + +// Function: setGroupTitle +// Sets the group/SVG's title content +// TODO: Combine this with setDocumentTitle +this.setGroupTitle = function(val) { + var elem = selectedElements[0]; + elem = $(elem).data('gsvg') || elem; + + var ts = $(elem).children('title'); + + var batchCmd = new BatchCommand("Set Label"); + + if(!val.length) { + // Remove title element + var tsNextSibling = ts.nextSibling; + batchCmd.addSubCommand(new RemoveElementCommand(ts[0], tsNextSibling, elem)); + ts.remove(); + } else if(ts.length) { + // Change title contents + var title = ts[0]; + batchCmd.addSubCommand(new ChangeElementCommand(title, {'#text': title.textContent})); + title.textContent = val; + } else { + // Add title element + title = svgdoc.createElementNS(svgns, "title"); + title.textContent = val; + $(elem).prepend(title); + batchCmd.addSubCommand(new InsertElementCommand(title)); + } + + addCommandToHistory(batchCmd); +} + +// Function: getDocumentTitle +// Returns the current document title or an empty string if not found +this.getDocumentTitle = function() { + return canvas.getTitle(svgcontent); +} + +// Function: setDocumentTitle +// Adds/updates a title element for the document with the given name. +// This is an undoable action +// +// Parameters: +// newtitle - String with the new title +this.setDocumentTitle = function(newtitle) { + var childs = svgcontent.childNodes, doc_title = false, old_title = ''; + + var batchCmd = new BatchCommand("Change Image Title"); + + for (var i=0; i<childs.length; i++) { + if(childs[i].nodeName == 'title') { + doc_title = childs[i]; + old_title = doc_title.textContent; + break; + } + } + if(!doc_title) { + doc_title = svgdoc.createElementNS(svgns, "title"); + svgcontent.insertBefore(doc_title, svgcontent.firstChild); + } + + if(newtitle.length) { + doc_title.textContent = newtitle; + } else { + // No title given, so element is not necessary + doc_title.parentNode.removeChild(doc_title); + } + batchCmd.addSubCommand(new ChangeElementCommand(doc_title, {'#text': old_title})); + addCommandToHistory(batchCmd); +} + +// Function: getEditorNS +// Returns the editor's namespace URL, optionally adds it to root element +// +// Parameters: +// add - Boolean to indicate whether or not to add the namespace value +this.getEditorNS = function(add) { + if(add) { + svgcontent.setAttribute('xmlns:se', se_ns); + } + return se_ns; +} + +// Function: setResolution +// Changes the document's dimensions to the given size +// +// Parameters: +// x - Number with the width of the new dimensions in user units. +// Can also be the string "fit" to indicate "fit to content" +// y - Number with the height of the new dimensions in user units. +// +// Returns: +// Boolean to indicate if resolution change was succesful. +// It will fail on "fit to content" option with no content to fit to. +this.setResolution = function(x, y) { + var res = getResolution(); + var w = res.w, h = res.h; + var batchCmd; + + if(x == 'fit') { + // Get bounding box + var bbox = getStrokedBBox(); + + if(bbox) { + batchCmd = new BatchCommand("Fit Canvas to Content"); + var visEls = getVisibleElements(); + addToSelection(visEls); + var dx = [], dy = []; + $.each(visEls, function(i, item) { + dx.push(bbox.x*-1); + dy.push(bbox.y*-1); + }); + + var cmd = canvas.moveSelectedElements(dx, dy, true); + batchCmd.addSubCommand(cmd); + clearSelection(); + + x = Math.round(bbox.width); + y = Math.round(bbox.height); + } else { + return false; + } + } + if (x != w || y != h) { + var handle = svgroot.suspendRedraw(1000); + if(!batchCmd) { + batchCmd = new BatchCommand("Change Image Dimensions"); + } + + x = convertToNum('width', x); + y = convertToNum('height', y); + + svgcontent.setAttribute('width', x); + svgcontent.setAttribute('height', y); + + this.contentW = x; + this.contentH = y; + batchCmd.addSubCommand(new ChangeElementCommand(svgcontent, {"width":w, "height":h})); + + svgcontent.setAttribute("viewBox", [0, 0, x/current_zoom, y/current_zoom].join(' ')); + batchCmd.addSubCommand(new ChangeElementCommand(svgcontent, {"viewBox": ["0 0", w, h].join(' ')})); + + addCommandToHistory(batchCmd); + svgroot.unsuspendRedraw(handle); + call("changed", [svgcontent]); + } + return true; +}; + +// Function: getOffset +// Returns an object with x, y values indicating the svgcontent element's +// position in the editor's canvas. +this.getOffset = function() { + return $(svgcontent).attr(['x', 'y']); +} + +// Function: setBBoxZoom +// Sets the zoom level on the canvas-side based on the given value +// +// Parameters: +// val - Bounding box object to zoom to or string indicating zoom option +// editor_w - Integer with the editor's workarea box's width +// editor_h - Integer with the editor's workarea box's height +this.setBBoxZoom = function(val, editor_w, editor_h) { + var spacer = .85; + var bb; + var calcZoom = function(bb) { + if(!bb) return false; + var w_zoom = Math.round((editor_w / bb.width)*100 * spacer)/100; + var h_zoom = Math.round((editor_h / bb.height)*100 * spacer)/100; + var zoomlevel = Math.min(w_zoom,h_zoom); + canvas.setZoom(zoomlevel); + return {'zoom': zoomlevel, 'bbox': bb}; + } + + if(typeof val == 'object') { + bb = val; + if(bb.width == 0 || bb.height == 0) { + var newzoom = bb.zoom?bb.zoom:current_zoom * bb.factor; + canvas.setZoom(newzoom); + return {'zoom': current_zoom, 'bbox': bb}; + } + return calcZoom(bb); + } + + switch (val) { + case 'selection': + if(!selectedElements[0]) return; + var sel_elems = $.map(selectedElements, function(n){ if(n) return n; }); + bb = getStrokedBBox(sel_elems); + break; + case 'canvas': + var res = getResolution(); + spacer = .95; + bb = {width:res.w, height:res.h ,x:0, y:0}; + break; + case 'content': + bb = getStrokedBBox(); + break; + case 'layer': + bb = getStrokedBBox(getVisibleElements(getCurrentDrawing().getCurrentLayer())); + break; + default: + return; + } + return calcZoom(bb); +} + +// Function: setZoom +// Sets the zoom to the given level +// +// Parameters: +// zoomlevel - Float indicating the zoom level to change to +this.setZoom = function(zoomlevel) { + var res = getResolution(); + svgcontent.setAttribute("viewBox", "0 0 " + res.w/zoomlevel + " " + res.h/zoomlevel); + current_zoom = zoomlevel; + $.each(selectedElements, function(i, elem) { + if(!elem) return; + selectorManager.requestSelector(elem).resize(); + }); + pathActions.zoomChange(); + runExtensions("zoomChanged", zoomlevel); +} + +// Function: getMode +// Returns the current editor mode string +this.getMode = function() { + return current_mode; +}; + +// Function: setMode +// Sets the editor's mode to the given string +// +// Parameters: +// name - String with the new mode to change to +this.setMode = function(name) { + pathActions.clear(true); + textActions.clear(); + cur_properties = (selectedElements[0] && selectedElements[0].nodeName == 'text') ? cur_text : cur_shape; + current_mode = name; +}; + +// Group: Element Styling + +// Function: getColor +// Returns the current fill/stroke option +this.getColor = function(type) { + return cur_properties[type]; +}; + +// Function: setColor +// Change the current stroke/fill color/gradient value +// +// Parameters: +// type - String indicating fill or stroke +// val - The value to set the stroke attribute to +// preventUndo - Boolean indicating whether or not this should be and undoable option +this.setColor = function(type, val, preventUndo) { + cur_shape[type] = val; + cur_properties[type + '_paint'] = {type:"solidColor"}; + var elems = []; + var i = selectedElements.length; + while (i--) { + var elem = selectedElements[i]; + if (elem) { + if (elem.tagName == "g") + svgedit.utilities.walkTree(elem, function(e){if(e.nodeName!="g") elems.push(e);}); + else { + if(type == 'fill') { + if(elem.tagName != "polyline" && elem.tagName != "line") { + elems.push(elem); + } + } else { + elems.push(elem); + } + } + } + } + if (elems.length > 0) { + if (!preventUndo) { + changeSelectedAttribute(type, val, elems); + call("changed", elems); + } else + changeSelectedAttributeNoUndo(type, val, elems); + } +} + + +// Function: findDefs +// Return the document's <defs> element, create it first if necessary +var findDefs = function() { + var defs = svgcontent.getElementsByTagNameNS(svgns, "defs"); + if (defs.length > 0) { + defs = defs[0]; + } + else { + defs = svgdoc.createElementNS(svgns, "defs" ); + if(svgcontent.firstChild) { + // first child is a comment, so call nextSibling + svgcontent.insertBefore( defs, svgcontent.firstChild.nextSibling); + } else { + svgcontent.appendChild(defs); + } + } + return defs; +}; + +// Function: setGradient +// Apply the current gradient to selected element's fill or stroke +// +// Parameters +// type - String indicating "fill" or "stroke" to apply to an element +var setGradient = this.setGradient = function(type) { + if(!cur_properties[type + '_paint'] || cur_properties[type + '_paint'].type == "solidColor") return; + var grad = canvas[type + 'Grad']; + // find out if there is a duplicate gradient already in the defs + var duplicate_grad = findDuplicateGradient(grad); + var defs = findDefs(); + // no duplicate found, so import gradient into defs + if (!duplicate_grad) { + var orig_grad = grad; + grad = defs.appendChild( svgdoc.importNode(grad, true) ); + // get next id and set it on the grad + grad.id = getNextId(); + } + else { // use existing gradient + grad = duplicate_grad; + } + canvas.setColor(type, "url(#" + grad.id + ")"); +} + +// Function: findDuplicateGradient +// Check if exact gradient already exists +// +// Parameters: +// grad - The gradient DOM element to compare to others +// +// Returns: +// The existing gradient if found, null if not +var findDuplicateGradient = function(grad) { + var defs = findDefs(); + var existing_grads = $(defs).find("linearGradient, radialGradient"); + var i = existing_grads.length; + var rad_attrs = ['r','cx','cy','fx','fy']; + while (i--) { + var og = existing_grads[i]; + if(grad.tagName == "linearGradient") { + if (grad.getAttribute('x1') != og.getAttribute('x1') || + grad.getAttribute('y1') != og.getAttribute('y1') || + grad.getAttribute('x2') != og.getAttribute('x2') || + grad.getAttribute('y2') != og.getAttribute('y2')) + { + continue; + } + } else { + var grad_attrs = $(grad).attr(rad_attrs); + var og_attrs = $(og).attr(rad_attrs); + + var diff = false; + $.each(rad_attrs, function(i, attr) { + if(grad_attrs[attr] != og_attrs[attr]) diff = true; + }); + + if(diff) continue; + } + + // else could be a duplicate, iterate through stops + var stops = grad.getElementsByTagNameNS(svgns, "stop"); + var ostops = og.getElementsByTagNameNS(svgns, "stop"); + + if (stops.length != ostops.length) { + continue; + } + + var j = stops.length; + while(j--) { + var stop = stops[j]; + var ostop = ostops[j]; + + if (stop.getAttribute('offset') != ostop.getAttribute('offset') || + stop.getAttribute('stop-opacity') != ostop.getAttribute('stop-opacity') || + stop.getAttribute('stop-color') != ostop.getAttribute('stop-color')) + { + break; + } + } + + if (j == -1) { + return og; + } + } // for each gradient in defs + + return null; +}; + +function reorientGrads(elem, m) { + var bb = svgedit.utilities.getBBox(elem); + for(var i = 0; i < 2; i++) { + var type = i === 0 ? 'fill' : 'stroke'; + var attrVal = elem.getAttribute(type); + if(attrVal && attrVal.indexOf('url(') === 0) { + var grad = getRefElem(attrVal); + if(grad.tagName === 'linearGradient') { + var x1 = grad.getAttribute('x1') || 0; + var y1 = grad.getAttribute('y1') || 0; + var x2 = grad.getAttribute('x2') || 1; + var y2 = grad.getAttribute('y2') || 0; + + // Convert to USOU points + x1 = (bb.width * x1) + bb.x; + y1 = (bb.height * y1) + bb.y; + x2 = (bb.width * x2) + bb.x; + y2 = (bb.height * y2) + bb.y; + + // Transform those points + var pt1 = transformPoint(x1, y1, m); + var pt2 = transformPoint(x2, y2, m); + + // Convert back to BB points + var g_coords = {}; + + g_coords.x1 = (pt1.x - bb.x) / bb.width; + g_coords.y1 = (pt1.y - bb.y) / bb.height; + g_coords.x2 = (pt2.x - bb.x) / bb.width; + g_coords.y2 = (pt2.y - bb.y) / bb.height; + + var newgrad = grad.cloneNode(true); + $(newgrad).attr(g_coords); + + newgrad.id = getNextId(); + findDefs().appendChild(newgrad); + elem.setAttribute(type, 'url(#' + newgrad.id + ')'); + } + } + } +} + +// Function: setPaint +// Set a color/gradient to a fill/stroke +// +// Parameters: +// type - String with "fill" or "stroke" +// paint - The jGraduate paint object to apply +this.setPaint = function(type, paint) { + // make a copy + var p = new $.jGraduate.Paint(paint); + this.setPaintOpacity(type, p.alpha/100, true); + + // now set the current paint object + cur_properties[type + '_paint'] = p; + switch ( p.type ) { + case "solidColor": + this.setColor(type, p.solidColor != "none" ? "#"+p.solidColor : "none");; + break; + case "linearGradient": + case "radialGradient": + canvas[type + 'Grad'] = p[p.type]; + setGradient(type); + break; + default: +// console.log("none!"); + } +}; + + +// this.setStrokePaint = function(p) { +// // make a copy +// var p = new $.jGraduate.Paint(p); +// this.setStrokeOpacity(p.alpha/100); +// +// // now set the current paint object +// cur_properties.stroke_paint = p; +// switch ( p.type ) { +// case "solidColor": +// this.setColor('stroke', p.solidColor != "none" ? "#"+p.solidColor : "none");; +// break; +// case "linearGradient" +// case "radialGradient" +// canvas.strokeGrad = p[p.type]; +// setGradient(type); +// default: +// // console.log("none!"); +// } +// }; +// +// this.setFillPaint = function(p, addGrad) { +// // make a copy +// var p = new $.jGraduate.Paint(p); +// this.setFillOpacity(p.alpha/100, true); +// +// // now set the current paint object +// cur_properties.fill_paint = p; +// if (p.type == "solidColor") { +// this.setColor('fill', p.solidColor != "none" ? "#"+p.solidColor : "none"); +// } +// else if(p.type == "linearGradient") { +// canvas.fillGrad = p.linearGradient; +// if(addGrad) setGradient(); +// } +// else if(p.type == "radialGradient") { +// canvas.fillGrad = p.radialGradient; +// if(addGrad) setGradient(); +// } +// else { +// // console.log("none!"); +// } +// }; + +// Function: getStrokeWidth +// Returns the current stroke-width value +this.getStrokeWidth = function() { + return cur_properties.stroke_width; +}; + +// Function: setStrokeWidth +// Sets the stroke width for the current selected elements +// When attempting to set a line's width to 0, this changes it to 1 instead +// +// Parameters: +// val - A Float indicating the new stroke width value +this.setStrokeWidth = function(val) { + if(val == 0 && ['line', 'path'].indexOf(current_mode) >= 0) { + canvas.setStrokeWidth(1); + return; + } + cur_properties.stroke_width = val; + + var elems = []; + var i = selectedElements.length; + while (i--) { + var elem = selectedElements[i]; + if (elem) { + if (elem.tagName == "g") + svgedit.utilities.walkTree(elem, function(e){if(e.nodeName!="g") elems.push(e);}); + else + elems.push(elem); + } + } + if (elems.length > 0) { + changeSelectedAttribute("stroke-width", val, elems); + call("changed", selectedElements); + } +}; + +// Function: setStrokeAttr +// Set the given stroke-related attribute the given value for selected elements +// +// Parameters: +// attr - String with the attribute name +// val - String or number with the attribute value +this.setStrokeAttr = function(attr, val) { + cur_shape[attr.replace('-','_')] = val; + var elems = []; + var i = selectedElements.length; + while (i--) { + var elem = selectedElements[i]; + if (elem) { + if (elem.tagName == "g") + svgedit.utilities.walkTree(elem, function(e){if(e.nodeName!="g") elems.push(e);}); + else + elems.push(elem); + } + } + if (elems.length > 0) { + changeSelectedAttribute(attr, val, elems); + call("changed", selectedElements); + } +}; + +// Function: getStyle +// Returns current style options +this.getStyle = function() { + return cur_shape; +} + +// Function: getOpacity +// Returns the current opacity +this.getOpacity = function() { + return cur_shape.opacity; +}; + +// Function: setOpacity +// Sets the given opacity to the current selected elements +this.setOpacity = function(val) { + cur_shape.opacity = val; + changeSelectedAttribute("opacity", val); +}; + +// Function: getOpacity +// Returns the current fill opacity +this.getFillOpacity = function() { + return cur_shape.fill_opacity; +}; + +// Function: getStrokeOpacity +// Returns the current stroke opacity +this.getStrokeOpacity = function() { + return cur_shape.stroke_opacity; +}; + +// Function: setPaintOpacity +// Sets the current fill/stroke opacity +// +// Parameters: +// type - String with "fill" or "stroke" +// val - Float with the new opacity value +// preventUndo - Boolean indicating whether or not this should be an undoable action +this.setPaintOpacity = function(type, val, preventUndo) { + cur_shape[type + '_opacity'] = val; + if (!preventUndo) + changeSelectedAttribute(type + "-opacity", val); + else + changeSelectedAttributeNoUndo(type + "-opacity", val); +}; + +// Function: getBlur +// Gets the stdDeviation blur value of the given element +// +// Parameters: +// elem - The element to check the blur value for +this.getBlur = function(elem) { + var val = 0; +// var elem = selectedElements[0]; + + if(elem) { + var filter_url = elem.getAttribute('filter'); + if(filter_url) { + var blur = getElem(elem.id + '_blur'); + if(blur) { + val = blur.firstChild.getAttribute('stdDeviation'); + } + } + } + return val; +}; + +(function() { + var cur_command = null; + var filter = null; + var filterHidden = false; + + // Function: setBlurNoUndo + // Sets the stdDeviation blur value on the selected element without being undoable + // + // Parameters: + // val - The new stdDeviation value + canvas.setBlurNoUndo = function(val) { + if(!filter) { + canvas.setBlur(val); + return; + } + if(val === 0) { + // Don't change the StdDev, as that will hide the element. + // Instead, just remove the value for "filter" + changeSelectedAttributeNoUndo("filter", ""); + filterHidden = true; + } else { + var elem = selectedElements[0]; + if(filterHidden) { + changeSelectedAttributeNoUndo("filter", 'url(#' + elem.id + '_blur)'); + } + if(svgedit.browser.isWebkit()) { + console.log('e', elem); + elem.removeAttribute('filter'); + elem.setAttribute('filter', 'url(#' + elem.id + '_blur)'); + } + changeSelectedAttributeNoUndo("stdDeviation", val, [filter.firstChild]); + canvas.setBlurOffsets(filter, val); + } + } + + function finishChange() { + var bCmd = canvas.undoMgr.finishUndoableChange(); + cur_command.addSubCommand(bCmd); + addCommandToHistory(cur_command); + cur_command = null; + filter = null; + } + + // Function: setBlurOffsets + // Sets the x, y, with, height values of the filter element in order to + // make the blur not be clipped. Removes them if not neeeded + // + // Parameters: + // filter - The filter DOM element to update + // stdDev - The standard deviation value on which to base the offset size + canvas.setBlurOffsets = function(filter, stdDev) { + if(stdDev > 3) { + // TODO: Create algorithm here where size is based on expected blur + assignAttributes(filter, { + x: '-50%', + y: '-50%', + width: '200%', + height: '200%' + }, 100); + } else { + // Removing these attributes hides text in Chrome (see Issue 579) + if(!svgedit.browser.isWebkit()) { + filter.removeAttribute('x'); + filter.removeAttribute('y'); + filter.removeAttribute('width'); + filter.removeAttribute('height'); + } + } + } + + // Function: setBlur + // Adds/updates the blur filter to the selected element + // + // Parameters: + // val - Float with the new stdDeviation blur value + // complete - Boolean indicating whether or not the action should be completed (to add to the undo manager) + canvas.setBlur = function(val, complete) { + if(cur_command) { + finishChange(); + return; + } + + // Looks for associated blur, creates one if not found + var elem = selectedElements[0]; + var elem_id = elem.id; + filter = getElem(elem_id + '_blur'); + + val -= 0; + + var batchCmd = new BatchCommand(); + + // Blur found! + if(filter) { + if(val === 0) { + filter = null; + } + } else { + // Not found, so create + var newblur = addSvgElementFromJson({ "element": "feGaussianBlur", + "attr": { + "in": 'SourceGraphic', + "stdDeviation": val + } + }); + + filter = addSvgElementFromJson({ "element": "filter", + "attr": { + "id": elem_id + '_blur' + } + }); + + filter.appendChild(newblur); + findDefs().appendChild(filter); + + batchCmd.addSubCommand(new InsertElementCommand(filter)); + } + + var changes = {filter: elem.getAttribute('filter')}; + + if(val === 0) { + elem.removeAttribute("filter"); + batchCmd.addSubCommand(new ChangeElementCommand(elem, changes)); + return; + } else { + changeSelectedAttribute("filter", 'url(#' + elem_id + '_blur)'); + + batchCmd.addSubCommand(new ChangeElementCommand(elem, changes)); + + canvas.setBlurOffsets(filter, val); + } + + cur_command = batchCmd; + canvas.undoMgr.beginUndoableChange("stdDeviation", [filter?filter.firstChild:null]); + if(complete) { + canvas.setBlurNoUndo(val); + finishChange(); + } + }; +}()); + +// Function: getBold +// Check whether selected element is bold or not +// +// Returns: +// Boolean indicating whether or not element is bold +this.getBold = function() { + // should only have one element selected + var selected = selectedElements[0]; + if (selected != null && selected.tagName == "text" && + selectedElements[1] == null) + { + return (selected.getAttribute("font-weight") == "bold"); + } + return false; +}; + +// Function: setBold +// Make the selected element bold or normal +// +// Parameters: +// b - Boolean indicating bold (true) or normal (false) +this.setBold = function(b) { + var selected = selectedElements[0]; + if (selected != null && selected.tagName == "text" && + selectedElements[1] == null) + { + changeSelectedAttribute("font-weight", b ? "bold" : "normal"); + } + if(!selectedElements[0].textContent) { + textActions.setCursor(); + } +}; + +// Function: getItalic +// Check whether selected element is italic or not +// +// Returns: +// Boolean indicating whether or not element is italic +this.getItalic = function() { + var selected = selectedElements[0]; + if (selected != null && selected.tagName == "text" && + selectedElements[1] == null) + { + return (selected.getAttribute("font-style") == "italic"); + } + return false; +}; + +// Function: setItalic +// Make the selected element italic or normal +// +// Parameters: +// b - Boolean indicating italic (true) or normal (false) +this.setItalic = function(i) { + var selected = selectedElements[0]; + if (selected != null && selected.tagName == "text" && + selectedElements[1] == null) + { + changeSelectedAttribute("font-style", i ? "italic" : "normal"); + } + if(!selectedElements[0].textContent) { + textActions.setCursor(); + } +}; + +// Function: getFontFamily +// Returns the current font family +this.getFontFamily = function() { + return cur_text.font_family; +}; + +// Function: setFontFamily +// Set the new font family +// +// Parameters: +// val - String with the new font family +this.setFontFamily = function(val) { + cur_text.font_family = val; + changeSelectedAttribute("font-family", val); + if(selectedElements[0] && !selectedElements[0].textContent) { + textActions.setCursor(); + } +}; + + +// Function: setFontColor +// Set the new font color +// +// Parameters: +// val - String with the new font color +this.setFontColor = function(val) { + cur_text.fill = val; + changeSelectedAttribute("fill", val); +}; + +// Function: getFontColor +// Returns the current font color +this.getFontSize = function() { + return cur_text.fill; +}; + +// Function: getFontSize +// Returns the current font size +this.getFontSize = function() { + return cur_text.font_size; +}; + +// Function: setFontSize +// Applies the given font size to the selected element +// +// Parameters: +// val - Float with the new font size +this.setFontSize = function(val) { + cur_text.font_size = val; + changeSelectedAttribute("font-size", val); + if(!selectedElements[0].textContent) { + textActions.setCursor(); + } +}; + +// Function: getText +// Returns the current text (textContent) of the selected element +this.getText = function() { + var selected = selectedElements[0]; + if (selected == null) { return ""; } + return selected.textContent; +}; + +// Function: setTextContent +// Updates the text element with the given string +// +// Parameters: +// val - String with the new text +this.setTextContent = function(val) { + changeSelectedAttribute("#text", val); + textActions.init(val); + textActions.setCursor(); +}; + +// Function: setImageURL +// Sets the new image URL for the selected image element. Updates its size if +// a new URL is given +// +// Parameters: +// val - String with the image URL/path +this.setImageURL = function(val) { + var elem = selectedElements[0]; + if(!elem) return; + + var attrs = $(elem).attr(['width', 'height']); + var setsize = (!attrs.width || !attrs.height); + + var cur_href = getHref(elem); + + // Do nothing if no URL change or size change + if(cur_href !== val) { + setsize = true; + } else if(!setsize) return; + + var batchCmd = new BatchCommand("Change Image URL"); + + setHref(elem, val); + batchCmd.addSubCommand(new ChangeElementCommand(elem, { + "#href": cur_href + })); + + if(setsize) { + $(new Image()).load(function() { + var changes = $(elem).attr(['width', 'height']); + + $(elem).attr({ + width: this.width, + height: this.height + }); + + selectorManager.requestSelector(elem).resize(); + + batchCmd.addSubCommand(new ChangeElementCommand(elem, changes)); + addCommandToHistory(batchCmd); + call("changed", [elem]); + }).attr('src',val); + } else { + addCommandToHistory(batchCmd); + } +}; + +// Function: setLinkURL +// Sets the new link URL for the selected anchor element. +// +// Parameters: +// val - String with the link URL/path +this.setLinkURL = function(val) { + var elem = selectedElements[0]; + if(!elem) return; + if(elem.tagName !== 'a') { + // See if parent is an anchor + var parents_a = $(elem).parents('a'); + if(parents_a.length) { + elem = parents_a[0]; + } else { + return; + } + } + + var cur_href = getHref(elem); + + if(cur_href === val) return; + + var batchCmd = new BatchCommand("Change Link URL"); + + setHref(elem, val); + batchCmd.addSubCommand(new ChangeElementCommand(elem, { + "#href": cur_href + })); + + addCommandToHistory(batchCmd); +}; + + +// Function: setRectRadius +// Sets the rx & ry values to the selected rect element to change its corner radius +// +// Parameters: +// val - The new radius +this.setRectRadius = function(val) { + var selected = selectedElements[0]; + if (selected != null && selected.tagName == "rect") { + var r = selected.getAttribute("rx"); + if (r != val) { + selected.setAttribute("rx", val); + selected.setAttribute("ry", val); + addCommandToHistory(new ChangeElementCommand(selected, {"rx":r, "ry":r}, "Radius")); + call("changed", [selected]); + } + } +}; + +// Function: makeHyperlink +// Wraps the selected element(s) in an anchor element or converts group to one +this.makeHyperlink = function(url) { + canvas.groupSelectedElements('a', url); + + // TODO: If element is a single "g", convert to "a" + // if(selectedElements.length > 1 && selectedElements[1]) { + +} + +// Function: removeHyperlink +this.removeHyperlink = function() { + canvas.ungroupSelectedElement(); +} + +// Group: Element manipulation + +// Function: setSegType +// Sets the new segment type to the selected segment(s). +// +// Parameters: +// new_type - Integer with the new segment type +// See http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSeg for list +this.setSegType = function(new_type) { + pathActions.setSegType(new_type); +} + +// TODO(codedread): Remove the getBBox argument and split this function into two. +// Function: convertToPath +// Convert selected element to a path, or get the BBox of an element-as-path +// +// Parameters: +// elem - The DOM element to be converted +// getBBox - Boolean on whether or not to only return the path's BBox +// +// Returns: +// If the getBBox flag is true, the resulting path's bounding box object. +// Otherwise the resulting path element is returned. +this.convertToPath = function(elem, getBBox) { + if(elem == null) { + var elems = selectedElements; + $.each(selectedElements, function(i, elem) { + if(elem) canvas.convertToPath(elem); + }); + return; + } + + if(!getBBox) { + var batchCmd = new BatchCommand("Convert element to Path"); + } + + var attrs = getBBox?{}:{ + "fill": cur_shape.fill, + "fill-opacity": cur_shape.fill_opacity, + "stroke": cur_shape.stroke, + "stroke-width": cur_shape.stroke_width, + "stroke-dasharray": cur_shape.stroke_dasharray, + "stroke-linejoin": cur_shape.stroke_linejoin, + "stroke-linecap": cur_shape.stroke_linecap, + "stroke-opacity": cur_shape.stroke_opacity, + "opacity": cur_shape.opacity, + "visibility":"hidden" + }; + + // any attribute on the element not covered by the above + // TODO: make this list global so that we can properly maintain it + // TODO: what about @transform, @clip-rule, @fill-rule, etc? + $.each(['marker-start', 'marker-end', 'marker-mid', 'filter', 'clip-path'], function() { + if (elem.getAttribute(this)) { + attrs[this] = elem.getAttribute(this); + } + }); + + var path = addSvgElementFromJson({ + "element": "path", + "attr": attrs + }); + + var eltrans = elem.getAttribute("transform"); + if(eltrans) { + path.setAttribute("transform",eltrans); + } + + var id = elem.id; + var parent = elem.parentNode; + if(elem.nextSibling) { + parent.insertBefore(path, elem); + } else { + parent.appendChild(path); + } + + var d = ''; + + var joinSegs = function(segs) { + $.each(segs, function(j, seg) { + var l = seg[0], pts = seg[1]; + d += l; + for(var i=0; i < pts.length; i+=2) { + d += (pts[i] +','+pts[i+1]) + ' '; + } + }); + } + + // Possibly the cubed root of 6, but 1.81 works best + var num = 1.81; + + switch (elem.tagName) { + case 'ellipse': + case 'circle': + var a = $(elem).attr(['rx', 'ry', 'cx', 'cy']); + var cx = a.cx, cy = a.cy, rx = a.rx, ry = a.ry; + if(elem.tagName == 'circle') { + rx = ry = $(elem).attr('r'); + } + + joinSegs([ + ['M',[(cx-rx),(cy)]], + ['C',[(cx-rx),(cy-ry/num), (cx-rx/num),(cy-ry), (cx),(cy-ry)]], + ['C',[(cx+rx/num),(cy-ry), (cx+rx),(cy-ry/num), (cx+rx),(cy)]], + ['C',[(cx+rx),(cy+ry/num), (cx+rx/num),(cy+ry), (cx),(cy+ry)]], + ['C',[(cx-rx/num),(cy+ry), (cx-rx),(cy+ry/num), (cx-rx),(cy)]], + ['Z',[]] + ]); + break; + case 'path': + d = elem.getAttribute('d'); + break; + case 'line': + var a = $(elem).attr(["x1", "y1", "x2", "y2"]); + d = "M"+a.x1+","+a.y1+"L"+a.x2+","+a.y2; + break; + case 'polyline': + case 'polygon': + d = "M" + elem.getAttribute('points'); + break; + case 'rect': + var r = $(elem).attr(['rx', 'ry']); + var rx = r.rx, ry = r.ry; + var b = elem.getBBox(); + var x = b.x, y = b.y, w = b.width, h = b.height; + var num = 4-num; // Why? Because! + + if(!rx && !ry) { + // Regular rect + joinSegs([ + ['M',[x, y]], + ['L',[x+w, y]], + ['L',[x+w, y+h]], + ['L',[x, y+h]], + ['L',[x, y]], + ['Z',[]] + ]); + } else { + joinSegs([ + ['M',[x, y+ry]], + ['C',[x,y+ry/num, x+rx/num,y, x+rx,y]], + ['L',[x+w-rx, y]], + ['C',[x+w-rx/num,y, x+w,y+ry/num, x+w,y+ry]], + ['L',[x+w, y+h-ry]], + ['C',[x+w, y+h-ry/num, x+w-rx/num,y+h, x+w-rx,y+h]], + ['L',[x+rx, y+h]], + ['C',[x+rx/num, y+h, x,y+h-ry/num, x,y+h-ry]], + ['L',[x, y+ry]], + ['Z',[]] + ]); + } + break; + default: + path.parentNode.removeChild(path); + break; + } + + if(d) { + path.setAttribute('d',d); + } + + if(!getBBox) { + // Replace the current element with the converted one + + // Reorient if it has a matrix + if(eltrans) { + var tlist = getTransformList(path); + if(hasMatrixTransform(tlist)) { + pathActions.resetOrientation(path); + } + } + + var nextSibling = elem.nextSibling; + batchCmd.addSubCommand(new RemoveElementCommand(elem, nextSibling, parent)); + batchCmd.addSubCommand(new InsertElementCommand(path)); + + clearSelection(); + elem.parentNode.removeChild(elem) + path.setAttribute('id', id); + path.removeAttribute("visibility"); + addToSelection([path], true); + + addCommandToHistory(batchCmd); + + } else { + // Get the correct BBox of the new path, then discard it + pathActions.resetOrientation(path); + var bb = false; + try { + bb = path.getBBox(); + } catch(e) { + // Firefox fails + } + path.parentNode.removeChild(path); + return bb; + } +}; + + +// Function: changeSelectedAttributeNoUndo +// This function makes the changes to the elements. It does not add the change +// to the history stack. +// +// Parameters: +// attr - String with the attribute name +// newValue - String or number with the new attribute value +// elems - The DOM elements to apply the change to +var changeSelectedAttributeNoUndo = function(attr, newValue, elems) { + var handle = svgroot.suspendRedraw(1000); + if(current_mode == 'pathedit') { + // Editing node + pathActions.moveNode(attr, newValue); + } + var elems = elems || selectedElements; + var i = elems.length; + var no_xy_elems = ['g', 'polyline', 'path']; + var good_g_attrs = ['transform', 'opacity', 'filter']; + + while (i--) { + var elem = elems[i]; + if (elem == null) continue; + + // Go into "select" mode for text changes + if(current_mode === "textedit" && attr !== "#text" && elem.textContent.length) { + textActions.toSelectMode(elem); + } + + // Set x,y vals on elements that don't have them + if((attr === 'x' || attr === 'y') && no_xy_elems.indexOf(elem.tagName) >= 0) { + var bbox = getStrokedBBox([elem]); + var diff_x = attr === 'x' ? newValue - bbox.x : 0; + var diff_y = attr === 'y' ? newValue - bbox.y : 0; + canvas.moveSelectedElements(diff_x*current_zoom, diff_y*current_zoom, true); + continue; + } + + // only allow the transform/opacity/filter attribute to change on <g> elements, slightly hacky + // TODO: FIXME: This doesn't seem right. Where's the body of this if statement? + if (elem.tagName === "g" && good_g_attrs.indexOf(attr) >= 0); + var oldval = attr === "#text" ? elem.textContent : elem.getAttribute(attr); + if (oldval == null) oldval = ""; + if (oldval !== String(newValue)) { + if (attr == "#text") { + var old_w = svgedit.utilities.getBBox(elem).width; + elem.textContent = newValue; + + // FF bug occurs on on rotated elements + if(/rotate/.test(elem.getAttribute('transform'))) { + elem = ffClone(elem); + } + + // Hoped to solve the issue of moving text with text-anchor="start", + // but this doesn't actually fix it. Hopefully on the right track, though. -Fyrd + +// var box=getBBox(elem), left=box.x, top=box.y, width=box.width, +// height=box.height, dx = width - old_w, dy=0; +// var angle = getRotationAngle(elem, true); +// if (angle) { +// var r = Math.sqrt( dx*dx + dy*dy ); +// var theta = Math.atan2(dy,dx) - angle; +// dx = r * Math.cos(theta); +// dy = r * Math.sin(theta); +// +// elem.setAttribute('x', elem.getAttribute('x')-dx); +// elem.setAttribute('y', elem.getAttribute('y')-dy); +// } + + } else if (attr == "#href") { + setHref(elem, newValue); + } + else elem.setAttribute(attr, newValue); +// if (i==0) +// selectedBBoxes[0] = svgedit.utilities.getBBox(elem); + // Use the Firefox ffClone hack for text elements with gradients or + // where other text attributes are changed. + if(svgedit.browser.isGecko() && elem.nodeName === 'text' && /rotate/.test(elem.getAttribute('transform'))) { + if((newValue+'').indexOf('url') === 0 || ['font-size','font-family','x','y'].indexOf(attr) >= 0 && elem.textContent) { + elem = ffClone(elem); + } + } + // Timeout needed for Opera & Firefox + // codedread: it is now possible for this function to be called with elements + // that are not in the selectedElements array, we need to only request a + // selector if the element is in that array + if (selectedElements.indexOf(elem) >= 0) { + setTimeout(function() { + // Due to element replacement, this element may no longer + // be part of the DOM + if(!elem.parentNode) return; + selectorManager.requestSelector(elem).resize(); + },0); + } + // if this element was rotated, and we changed the position of this element + // we need to update the rotational transform attribute + var angle = getRotationAngle(elem); + if (angle != 0 && attr != "transform") { + var tlist = getTransformList(elem); + var n = tlist.numberOfItems; + while (n--) { + var xform = tlist.getItem(n); + if (xform.type == 4) { + // remove old rotate + tlist.removeItem(n); + + var box = svgedit.utilities.getBBox(elem); + var center = transformPoint(box.x+box.width/2, box.y+box.height/2, transformListToTransform(tlist).matrix); + var cx = center.x, + cy = center.y; + var newrot = svgroot.createSVGTransform(); + newrot.setRotate(angle, cx, cy); + tlist.insertItemBefore(newrot, n); + break; + } + } + } + } // if oldValue != newValue + } // for each elem + svgroot.unsuspendRedraw(handle); +}; + +// Function: changeSelectedAttribute +// Change the given/selected element and add the original value to the history stack +// If you want to change all selectedElements, ignore the elems argument. +// If you want to change only a subset of selectedElements, then send the +// subset to this function in the elems argument. +// +// Parameters: +// attr - String with the attribute name +// newValue - String or number with the new attribute value +// elems - The DOM elements to apply the change to +var changeSelectedAttribute = this.changeSelectedAttribute = function(attr, val, elems) { + var elems = elems || selectedElements; + canvas.undoMgr.beginUndoableChange(attr, elems); + var i = elems.length; + + changeSelectedAttributeNoUndo(attr, val, elems); + + var batchCmd = canvas.undoMgr.finishUndoableChange(); + if (!batchCmd.isEmpty()) { + addCommandToHistory(batchCmd); + } +}; + +// Function: deleteSelectedElements +// Removes all selected elements from the DOM and adds the change to the +// history stack +this.deleteSelectedElements = function() { + var batchCmd = new BatchCommand("Delete Elements"); + var len = selectedElements.length; + var selectedCopy = []; //selectedElements is being deleted + for (var i = 0; i < len; ++i) { + var selected = selectedElements[i]; + if (selected == null) break; + + var parent = selected.parentNode; + var t = selected; + + // this will unselect the element and remove the selectedOutline + selectorManager.releaseSelector(t); + + // Remove the path if present. + svgedit.path.removePath_(t.id); + + // Get the parent if it's a single-child anchor + if(parent.tagName === 'a' && parent.childNodes.length === 1) { + t = parent; + parent = parent.parentNode; + } + + var nextSibling = t.nextSibling; + var elem = parent.removeChild(t); + selectedCopy.push(selected); //for the copy + selectedElements[i] = null; + batchCmd.addSubCommand(new RemoveElementCommand(elem, nextSibling, parent)); + } + if (!batchCmd.isEmpty()) addCommandToHistory(batchCmd); + call("changed", selectedCopy); + clearSelection(); +}; + +// Function: cutSelectedElements +// Removes all selected elements from the DOM and adds the change to the +// history stack. Remembers removed elements on the clipboard + +// TODO: Combine similar code with deleteSelectedElements +this.cutSelectedElements = function() { + var batchCmd = new BatchCommand("Cut Elements"); + var len = selectedElements.length; + var selectedCopy = []; //selectedElements is being deleted + for (var i = 0; i < len; ++i) { + var selected = selectedElements[i]; + if (selected == null) break; + + var parent = selected.parentNode; + var t = selected; + + // this will unselect the element and remove the selectedOutline + selectorManager.releaseSelector(t); + + // Remove the path if present. + svgedit.path.removePath_(t.id); + + var nextSibling = t.nextSibling; + var elem = parent.removeChild(t); + selectedCopy.push(selected); //for the copy + selectedElements[i] = null; + batchCmd.addSubCommand(new RemoveElementCommand(elem, nextSibling, parent)); + } + if (!batchCmd.isEmpty()) addCommandToHistory(batchCmd); + call("changed", selectedCopy); + clearSelection(); + + canvas.clipBoard = selectedCopy; +}; + +// Function: copySelectedElements +// Remembers the current selected elements on the clipboard +this.copySelectedElements = function() { + canvas.clipBoard = $.merge([], selectedElements); +}; + +this.pasteElements = function(type, x, y) { + var cb = canvas.clipBoard; + var len = cb.length; + if(!len) return; + + var pasted = []; + var batchCmd = new BatchCommand('Paste elements'); + + // Move elements to lastClickPoint + + while (len--) { + var elem = cb[len]; + if(!elem) continue; + var copy = copyElem(elem); + + // See if elem with elem ID is in the DOM already + if(!getElem(elem.id)) copy.id = elem.id; + + pasted.push(copy); + (current_group || getCurrentDrawing().getCurrentLayer()).appendChild(copy); + batchCmd.addSubCommand(new InsertElementCommand(copy)); + } + + selectOnly(pasted); + + if(type !== 'in_place') { + + var ctr_x, ctr_y; + + if(!type) { + ctr_x = lastClickPoint.x; + ctr_y = lastClickPoint.y; + } else if(type === 'point') { + ctr_x = x; + ctr_y = y; + } + + var bbox = getStrokedBBox(pasted); + var cx = ctr_x - (bbox.x + bbox.width/2), + cy = ctr_y - (bbox.y + bbox.height/2), + dx = [], + dy = []; + + $.each(pasted, function(i, item) { + dx.push(cx); + dy.push(cy); + }); + + var cmd = canvas.moveSelectedElements(dx, dy, false); + batchCmd.addSubCommand(cmd); + } + + + + addCommandToHistory(batchCmd); + call("changed", pasted); +} + +// Function: groupSelectedElements +// Wraps all the selected elements in a group (g) element + +// Parameters: +// type - type of element to group into, defaults to <g> +this.groupSelectedElements = function(type) { + if(!type) type = 'g'; + var cmd_str = ''; + + switch ( type ) { + case "a": + cmd_str = "Make hyperlink"; + var url = ''; + if(arguments.length > 1) { + url = arguments[1]; + } + break; + default: + type = 'g'; + cmd_str = "Group Elements"; + break; + } + + var batchCmd = new BatchCommand(cmd_str); + + // create and insert the group element + var g = addSvgElementFromJson({ + "element": type, + "attr": { + "id": getNextId() + } + }); + if(type === 'a') { + setHref(g, url); + } + batchCmd.addSubCommand(new InsertElementCommand(g)); + + // now move all children into the group + var i = selectedElements.length; + while (i--) { + var elem = selectedElements[i]; + if (elem == null) continue; + + if (elem.parentNode.tagName === 'a' && elem.parentNode.childNodes.length === 1) { + elem = elem.parentNode; + } + + var oldNextSibling = elem.nextSibling; + var oldParent = elem.parentNode; + g.appendChild(elem); + batchCmd.addSubCommand(new MoveElementCommand(elem, oldNextSibling, oldParent)); + } + if (!batchCmd.isEmpty()) addCommandToHistory(batchCmd); + + // update selection + selectOnly([g], true); +}; + + +// Function: pushGroupProperties +// Pushes all appropriate parent group properties down to its children, then +// removes them from the group +var pushGroupProperties = this.pushGroupProperties = function(g, undoable) { + + var children = g.childNodes; + var len = children.length; + var xform = g.getAttribute("transform"); + + var glist = getTransformList(g); + var m = transformListToTransform(glist).matrix; + + var batchCmd = new BatchCommand("Push group properties"); + + // TODO: get all fill/stroke properties from the group that we are about to destroy + // "fill", "fill-opacity", "fill-rule", "stroke", "stroke-dasharray", "stroke-dashoffset", + // "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", + // "stroke-width" + // and then for each child, if they do not have the attribute (or the value is 'inherit') + // then set the child's attribute + + var i = 0; + var gangle = getRotationAngle(g); + + var gattrs = $(g).attr(['filter', 'opacity']); + var gfilter, gblur; + + for(var i = 0; i < len; i++) { + var elem = children[i]; + + if(elem.nodeType !== 1) continue; + + if(gattrs.opacity !== null && gattrs.opacity !== 1) { + var c_opac = elem.getAttribute('opacity') || 1; + var new_opac = Math.round((elem.getAttribute('opacity') || 1) * gattrs.opacity * 100)/100; + changeSelectedAttribute('opacity', new_opac, [elem]); + } + + if(gattrs.filter) { + var cblur = this.getBlur(elem); + var orig_cblur = cblur; + if(!gblur) gblur = this.getBlur(g); + if(cblur) { + // Is this formula correct? + cblur = (gblur-0) + (cblur-0); + } else if(cblur === 0) { + cblur = gblur; + } + + // If child has no current filter, get group's filter or clone it. + if(!orig_cblur) { + // Set group's filter to use first child's ID + if(!gfilter) { + gfilter = getRefElem(gattrs.filter); + } else { + // Clone the group's filter + gfilter = copyElem(gfilter); + findDefs().appendChild(gfilter); + } + } else { + gfilter = getRefElem(elem.getAttribute('filter')); + } + + // Change this in future for different filters + var suffix = (gfilter.firstChild.tagName === 'feGaussianBlur')?'blur':'filter'; + gfilter.id = elem.id + '_' + suffix; + changeSelectedAttribute('filter', 'url(#' + gfilter.id + ')', [elem]); + + // Update blur value + if(cblur) { + changeSelectedAttribute('stdDeviation', cblur, [gfilter.firstChild]); + canvas.setBlurOffsets(gfilter, cblur); + } + } + + var chtlist = getTransformList(elem); + + // Don't process gradient transforms + if(~elem.tagName.indexOf('Gradient')) chtlist = null; + + // Hopefully not a problem to add this. Necessary for elements like <desc/> + if(!chtlist) continue; + + // Apparently <defs> can get get a transformlist, but we don't want it to have one! + if(elem.tagName === 'defs') continue; + + if (glist.numberOfItems) { + // TODO: if the group's transform is just a rotate, we can always transfer the + // rotate() down to the children (collapsing consecutive rotates and factoring + // out any translates) + if (gangle && glist.numberOfItems == 1) { + // [Rg] [Rc] [Mc] + // we want [Tr] [Rc2] [Mc] where: + // - [Rc2] is at the child's current center but has the + // sum of the group and child's rotation angles + // - [Tr] is the equivalent translation that this child + // undergoes if the group wasn't there + + // [Tr] = [Rg] [Rc] [Rc2_inv] + + // get group's rotation matrix (Rg) + var rgm = glist.getItem(0).matrix; + + // get child's rotation matrix (Rc) + var rcm = svgroot.createSVGMatrix(); + var cangle = getRotationAngle(elem); + if (cangle) { + rcm = chtlist.getItem(0).matrix; + } + + // get child's old center of rotation + var cbox = svgedit.utilities.getBBox(elem); + var ceqm = transformListToTransform(chtlist).matrix; + var coldc = transformPoint(cbox.x+cbox.width/2, cbox.y+cbox.height/2,ceqm); + + // sum group and child's angles + var sangle = gangle + cangle; + + // get child's rotation at the old center (Rc2_inv) + var r2 = svgroot.createSVGTransform(); + r2.setRotate(sangle, coldc.x, coldc.y); + + // calculate equivalent translate + var trm = matrixMultiply(rgm, rcm, r2.matrix.inverse()); + + // set up tlist + if (cangle) { + chtlist.removeItem(0); + } + + if (sangle) { + if(chtlist.numberOfItems) { + chtlist.insertItemBefore(r2, 0); + } else { + chtlist.appendItem(r2); + } + } + + if (trm.e || trm.f) { + var tr = svgroot.createSVGTransform(); + tr.setTranslate(trm.e, trm.f); + if(chtlist.numberOfItems) { + chtlist.insertItemBefore(tr, 0); + } else { + chtlist.appendItem(tr); + } + } + } + else { // more complicated than just a rotate + + // transfer the group's transform down to each child and then + // call recalculateDimensions() + var oldxform = elem.getAttribute("transform"); + var changes = {}; + changes["transform"] = oldxform ? oldxform : ""; + + var newxform = svgroot.createSVGTransform(); + + // [ gm ] [ chm ] = [ chm ] [ gm' ] + // [ gm' ] = [ chm_inv ] [ gm ] [ chm ] + var chm = transformListToTransform(chtlist).matrix, + chm_inv = chm.inverse(); + var gm = matrixMultiply( chm_inv, m, chm ); + newxform.setMatrix(gm); + chtlist.appendItem(newxform); + } + var cmd = recalculateDimensions(elem); + if(cmd) batchCmd.addSubCommand(cmd); + } + } + + + // remove transform and make it undo-able + if (xform) { + var changes = {}; + changes["transform"] = xform; + g.setAttribute("transform", ""); + g.removeAttribute("transform"); + batchCmd.addSubCommand(new ChangeElementCommand(g, changes)); + } + + if (undoable && !batchCmd.isEmpty()) { + return batchCmd; + } +} + + +// Function: ungroupSelectedElement +// Unwraps all the elements in a selected group (g) element. This requires +// significant recalculations to apply group's transforms, etc to its children +this.ungroupSelectedElement = function() { + var g = selectedElements[0]; + if($(g).data('gsvg') || $(g).data('symbol')) { + // Is svg, so actually convert to group + + convertToGroup(g); + return; + } else if(g.tagName === 'use') { + // Somehow doesn't have data set, so retrieve + var symbol = getElem(getHref(g).substr(1)); + $(g).data('symbol', symbol).data('ref', symbol); + convertToGroup(g); + return; + } + var parents_a = $(g).parents('a'); + if(parents_a.length) { + g = parents_a[0]; + } + + // Look for parent "a" + if (g.tagName === "g" || g.tagName === "a") { + + var batchCmd = new BatchCommand("Ungroup Elements"); + var cmd = pushGroupProperties(g, true); + if(cmd) batchCmd.addSubCommand(cmd); + + var parent = g.parentNode; + var anchor = g.nextSibling; + var children = new Array(g.childNodes.length); + + var i = 0; + + while (g.firstChild) { + var elem = g.firstChild; + var oldNextSibling = elem.nextSibling; + var oldParent = elem.parentNode; + + // Remove child title elements + if(elem.tagName === 'title') { + var nextSibling = elem.nextSibling; + batchCmd.addSubCommand(new RemoveElementCommand(elem, nextSibling, oldParent)); + oldParent.removeChild(elem); + continue; + } + + children[i++] = elem = parent.insertBefore(elem, anchor); + batchCmd.addSubCommand(new MoveElementCommand(elem, oldNextSibling, oldParent)); + } + + // remove the group from the selection + clearSelection(); + + // delete the group element (but make undo-able) + var gNextSibling = g.nextSibling; + g = parent.removeChild(g); + batchCmd.addSubCommand(new RemoveElementCommand(g, gNextSibling, parent)); + + if (!batchCmd.isEmpty()) addCommandToHistory(batchCmd); + + // update selection + addToSelection(children); + } +}; + +// Function: moveToTopSelectedElement +// Repositions the selected element to the bottom in the DOM to appear on top of +// other elements +this.moveToTopSelectedElement = function() { + var selected = selectedElements[0]; + if (selected != null) { + var t = selected; + var oldParent = t.parentNode; + var oldNextSibling = t.nextSibling; + t = t.parentNode.appendChild(t); + // If the element actually moved position, add the command and fire the changed + // event handler. + if (oldNextSibling != t.nextSibling) { + addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, "top")); + call("changed", [t]); + } + } +}; + +// Function: moveToBottomSelectedElement +// Repositions the selected element to the top in the DOM to appear under +// other elements +this.moveToBottomSelectedElement = function() { + var selected = selectedElements[0]; + if (selected != null) { + var t = selected; + var oldParent = t.parentNode; + var oldNextSibling = t.nextSibling; + var firstChild = t.parentNode.firstChild; + if (firstChild.tagName == 'title') { + firstChild = firstChild.nextSibling; + } + // This can probably be removed, as the defs should not ever apppear + // inside a layer group + if (firstChild.tagName == 'defs') { + firstChild = firstChild.nextSibling; + } + t = t.parentNode.insertBefore(t, firstChild); + // If the element actually moved position, add the command and fire the changed + // event handler. + if (oldNextSibling != t.nextSibling) { + addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, "bottom")); + call("changed", [t]); + } + } +}; + +// Function: moveUpDownSelected +// Moves the select element up or down the stack, based on the visibly +// intersecting elements +// +// Parameters: +// dir - String that's either 'Up' or 'Down' +this.moveUpDownSelected = function(dir) { + var selected = selectedElements[0]; + if (!selected) return; + + curBBoxes = []; + var closest, found_cur; + // jQuery sorts this list + var list = $(getIntersectionList(getStrokedBBox([selected]))).toArray(); + if(dir == 'Down') list.reverse(); + + $.each(list, function() { + if(!found_cur) { + if(this == selected) { + found_cur = true; + } + return; + } + closest = this; + return false; + }); + if(!closest) return; + + var t = selected; + var oldParent = t.parentNode; + var oldNextSibling = t.nextSibling; + $(closest)[dir == 'Down'?'before':'after'](t); + // If the element actually moved position, add the command and fire the changed + // event handler. + if (oldNextSibling != t.nextSibling) { + addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, "Move " + dir)); + call("changed", [t]); + } +}; + +// Function: moveSelectedElements +// Moves selected elements on the X/Y axis +// +// Parameters: +// dx - Float with the distance to move on the x-axis +// dy - Float with the distance to move on the y-axis +// undoable - Boolean indicating whether or not the action should be undoable +// +// Returns: +// Batch command for the move +this.moveSelectedElements = function(dx, dy, undoable) { + // if undoable is not sent, default to true + // if single values, scale them to the zoom + if (dx.constructor != Array) { + dx /= current_zoom; + dy /= current_zoom; + } + var undoable = undoable || true; + var batchCmd = new BatchCommand("position"); + var i = selectedElements.length; + while (i--) { + var selected = selectedElements[i]; + if (selected != null) { +// if (i==0) +// selectedBBoxes[0] = svgedit.utilities.getBBox(selected); + +// var b = {}; +// for(var j in selectedBBoxes[i]) b[j] = selectedBBoxes[i][j]; +// selectedBBoxes[i] = b; + + var xform = svgroot.createSVGTransform(); + var tlist = getTransformList(selected); + + // dx and dy could be arrays + if (dx.constructor == Array) { +// if (i==0) { +// selectedBBoxes[0].x += dx[0]; +// selectedBBoxes[0].y += dy[0]; +// } + xform.setTranslate(dx[i],dy[i]); + } else { +// if (i==0) { +// selectedBBoxes[0].x += dx; +// selectedBBoxes[0].y += dy; +// } + xform.setTranslate(dx,dy); + } + + if(tlist.numberOfItems) { + tlist.insertItemBefore(xform, 0); + } else { + tlist.appendItem(xform); + } + + var cmd = recalculateDimensions(selected); + if (cmd) { + batchCmd.addSubCommand(cmd); + } + + selectorManager.requestSelector(selected).resize(); + } + } + if (!batchCmd.isEmpty()) { + if (undoable) + addCommandToHistory(batchCmd); + call("changed", selectedElements); + return batchCmd; + } +}; + +// Function: cloneSelectedElements +// Create deep DOM copies (clones) of all selected elements and move them slightly +// from their originals +this.cloneSelectedElements = function(x,y) { + var batchCmd = new BatchCommand("Clone Elements"); + // find all the elements selected (stop at first null) + var len = selectedElements.length; + for (var i = 0; i < len; ++i) { + var elem = selectedElements[i]; + if (elem == null) break; + } + // use slice to quickly get the subset of elements we need + var copiedElements = selectedElements.slice(0,i); + this.clearSelection(true); + // note that we loop in the reverse way because of the way elements are added + // to the selectedElements array (top-first) + var i = copiedElements.length; + while (i--) { + // clone each element and replace it within copiedElements + var elem = copiedElements[i] = copyElem(copiedElements[i]); + (current_group || getCurrentDrawing().getCurrentLayer()).appendChild(elem); + batchCmd.addSubCommand(new InsertElementCommand(elem)); + } + + if (!batchCmd.isEmpty()) { + addToSelection(copiedElements.reverse()); // Need to reverse for correct selection-adding + this.moveSelectedElements(x,y,false); + addCommandToHistory(batchCmd); + } +}; + +// Function: alignSelectedElements +// Aligns selected elements +// +// Parameters: +// type - String with single character indicating the alignment type +// relative_to - String that must be one of the following: +// "selected", "largest", "smallest", "page" +this.alignSelectedElements = function(type, relative_to) { + var bboxes = [], angles = []; + var minx = Number.MAX_VALUE, maxx = Number.MIN_VALUE, miny = Number.MAX_VALUE, maxy = Number.MIN_VALUE; + var curwidth = Number.MIN_VALUE, curheight = Number.MIN_VALUE; + var len = selectedElements.length; + if (!len) return; + for (var i = 0; i < len; ++i) { + if (selectedElements[i] == null) break; + var elem = selectedElements[i]; + bboxes[i] = getStrokedBBox([elem]); + + // now bbox is axis-aligned and handles rotation + switch (relative_to) { + case 'smallest': + if ( (type == 'l' || type == 'c' || type == 'r') && (curwidth == Number.MIN_VALUE || curwidth > bboxes[i].width) || + (type == 't' || type == 'm' || type == 'b') && (curheight == Number.MIN_VALUE || curheight > bboxes[i].height) ) { + minx = bboxes[i].x; + miny = bboxes[i].y; + maxx = bboxes[i].x + bboxes[i].width; + maxy = bboxes[i].y + bboxes[i].height; + curwidth = bboxes[i].width; + curheight = bboxes[i].height; + } + break; + case 'largest': + if ( (type == 'l' || type == 'c' || type == 'r') && (curwidth == Number.MIN_VALUE || curwidth < bboxes[i].width) || + (type == 't' || type == 'm' || type == 'b') && (curheight == Number.MIN_VALUE || curheight < bboxes[i].height) ) { + minx = bboxes[i].x; + miny = bboxes[i].y; + maxx = bboxes[i].x + bboxes[i].width; + maxy = bboxes[i].y + bboxes[i].height; + curwidth = bboxes[i].width; + curheight = bboxes[i].height; + } + break; + default: // 'selected' + if (bboxes[i].x < minx) minx = bboxes[i].x; + if (bboxes[i].y < miny) miny = bboxes[i].y; + if (bboxes[i].x + bboxes[i].width > maxx) maxx = bboxes[i].x + bboxes[i].width; + if (bboxes[i].y + bboxes[i].height > maxy) maxy = bboxes[i].y + bboxes[i].height; + break; + } + } // loop for each element to find the bbox and adjust min/max + + if (relative_to == 'page') { + minx = 0; + miny = 0; + maxx = canvas.contentW; + maxy = canvas.contentH; + } + + var dx = new Array(len); + var dy = new Array(len); + for (var i = 0; i < len; ++i) { + if (selectedElements[i] == null) break; + var elem = selectedElements[i]; + var bbox = bboxes[i]; + dx[i] = 0; + dy[i] = 0; + switch (type) { + case 'l': // left (horizontal) + dx[i] = minx - bbox.x; + break; + case 'c': // center (horizontal) + dx[i] = (minx+maxx)/2 - (bbox.x + bbox.width/2); + break; + case 'r': // right (horizontal) + dx[i] = maxx - (bbox.x + bbox.width); + break; + case 't': // top (vertical) + dy[i] = miny - bbox.y; + break; + case 'm': // middle (vertical) + dy[i] = (miny+maxy)/2 - (bbox.y + bbox.height/2); + break; + case 'b': // bottom (vertical) + dy[i] = maxy - (bbox.y + bbox.height); + break; + } + } + this.moveSelectedElements(dx,dy); +}; + +// Group: Additional editor tools + +this.contentW = getResolution().w; +this.contentH = getResolution().h; + +// Function: updateCanvas +// Updates the editor canvas width/height/position after a zoom has occurred +// +// Parameters: +// w - Float with the new width +// h - Float with the new height +// +// Returns: +// Object with the following values: +// * x - The canvas' new x coordinate +// * y - The canvas' new y coordinate +// * old_x - The canvas' old x coordinate +// * old_y - The canvas' old y coordinate +// * d_x - The x position difference +// * d_y - The y position difference +this.updateCanvas = function(w, h) { + svgroot.setAttribute("width", w); + svgroot.setAttribute("height", h); + var bg = $('#canvasBackground')[0]; + var old_x = svgcontent.getAttribute('x'); + var old_y = svgcontent.getAttribute('y'); + var x = (w/2 - this.contentW*current_zoom/2); + var y = (h/2 - this.contentH*current_zoom/2); + + assignAttributes(svgcontent, { + width: this.contentW*current_zoom, + height: this.contentH*current_zoom, + 'x': x, + 'y': y, + "viewBox" : "0 0 " + this.contentW + " " + this.contentH + }); + + assignAttributes(bg, { + width: svgcontent.getAttribute('width'), + height: svgcontent.getAttribute('height'), + x: x, + y: y + }); + + var bg_img = getElem('background_image'); + if (bg_img) { + assignAttributes(bg_img, { + 'width': '100%', + 'height': '100%' + }); + } + + selectorManager.selectorParentGroup.setAttribute("transform","translate(" + x + "," + y + ")"); + + return {x:x, y:y, old_x:old_x, old_y:old_y, d_x:x - old_x, d_y:y - old_y}; +} + +// Function: setBackground +// Set the background of the editor (NOT the actual document) +// +// Parameters: +// color - String with fill color to apply +// url - URL or path to image to use +this.setBackground = function(color, url) { + var bg = getElem('canvasBackground'); + var border = $(bg).find('rect')[0]; + var bg_img = getElem('background_image'); + border.setAttribute('fill',color); + if(url) { + if(!bg_img) { + bg_img = svgdoc.createElementNS(svgns, "image"); + assignAttributes(bg_img, { + 'id': 'background_image', + 'width': '100%', + 'height': '100%', + 'preserveAspectRatio': 'xMinYMin', + 'style':'pointer-events:none' + }); + } + setHref(bg_img, url); + bg.appendChild(bg_img); + } else if(bg_img) { + bg_img.parentNode.removeChild(bg_img); + } +} + +// Function: cycleElement +// Select the next/previous element within the current layer +// +// Parameters: +// next - Boolean where true = next and false = previous element +this.cycleElement = function(next) { + var cur_elem = selectedElements[0]; + var elem = false; + var all_elems = getVisibleElements(current_group || getCurrentDrawing().getCurrentLayer()); + if(!all_elems.length) return; + if (cur_elem == null) { + var num = next?all_elems.length-1:0; + elem = all_elems[num]; + } else { + var i = all_elems.length; + while(i--) { + if(all_elems[i] == cur_elem) { + var num = next?i-1:i+1; + if(num >= all_elems.length) { + num = 0; + } else if(num < 0) { + num = all_elems.length-1; + } + elem = all_elems[num]; + break; + } + } + } + selectOnly([elem], true); + call("selected", selectedElements); +} + +this.clear(); + + +// DEPRECATED: getPrivateMethods +// Since all methods are/should be public somehow, this function should be removed + +// Being able to access private methods publicly seems wrong somehow, +// but currently appears to be the best way to allow testing and provide +// access to them to plugins. +this.getPrivateMethods = function() { + var obj = { + addCommandToHistory: addCommandToHistory, + setGradient: setGradient, + addSvgElementFromJson: addSvgElementFromJson, + assignAttributes: assignAttributes, + BatchCommand: BatchCommand, + call: call, + ChangeElementCommand: ChangeElementCommand, + copyElem: copyElem, + ffClone: ffClone, + findDefs: findDefs, + findDuplicateGradient: findDuplicateGradient, + getElem: getElem, + getId: getId, + getIntersectionList: getIntersectionList, + getMouseTarget: getMouseTarget, + getNextId: getNextId, + getPathBBox: getPathBBox, + getUrlFromAttr: getUrlFromAttr, + hasMatrixTransform: hasMatrixTransform, + identifyLayers: identifyLayers, + InsertElementCommand: InsertElementCommand, + isIdentity: svgedit.math.isIdentity, + logMatrix: logMatrix, + matrixMultiply: matrixMultiply, + MoveElementCommand: MoveElementCommand, + preventClickDefault: preventClickDefault, + recalculateAllSelectedDimensions: recalculateAllSelectedDimensions, + recalculateDimensions: recalculateDimensions, + remapElement: remapElement, + RemoveElementCommand: RemoveElementCommand, + removeUnusedDefElems: removeUnusedDefElems, + round: round, + runExtensions: runExtensions, + sanitizeSvg: sanitizeSvg, + SVGEditTransformList: svgedit.transformlist.SVGTransformList, + toString: toString, + transformBox: svgedit.math.transformBox, + transformListToTransform: transformListToTransform, + transformPoint: transformPoint, + walkTree: svgedit.utilities.walkTree + } + return obj; +}; + +} diff --git a/editor/svgicons/jquery.svgicons.js b/editor/svgicons/jquery.svgicons.js new file mode 100644 index 0000000..8a70509 --- /dev/null +++ b/editor/svgicons/jquery.svgicons.js @@ -0,0 +1,486 @@ +/* + * SVG Icon Loader 2.0 + * + * jQuery Plugin for loading SVG icons from a single file + * + * Copyright (c) 2009 Alexis Deveria + * http://a.deveria.com + * + * Apache 2 License + +How to use: + +1. Create the SVG master file that includes all icons: + +The master SVG icon-containing file is an SVG file that contains +<g> elements. Each <g> element should contain the markup of an SVG +icon. The <g> element has an ID that should +correspond with the ID of the HTML element used on the page that should contain +or optionally be replaced by the icon. Additionally, one empty element should be +added at the end with id "svg_eof". + +2. Optionally create fallback raster images for each SVG icon. + +3. Include the jQuery and the SVG Icon Loader scripts on your page. + +4. Run $.svgIcons() when the document is ready: + +$.svgIcons( file [string], options [object literal]); + +File is the location of a local SVG or SVGz file. + +All options are optional and can include: + +- 'w (number)': The icon widths + +- 'h (number)': The icon heights + +- 'fallback (object literal)': List of raster images with each + key being the SVG icon ID to replace, and the value the image file name. + +- 'fallback_path (string)': The path to use for all images + listed under "fallback" + +- 'replace (boolean)': If set to true, HTML elements will be replaced by, + rather than include the SVG icon. + +- 'placement (object literal)': List with selectors for keys and SVG icon ids + as values. This provides a custom method of adding icons. + +- 'resize (object literal)': List with selectors for keys and numbers + as values. This allows an easy way to resize specific icons. + +- 'callback (function)': A function to call when all icons have been loaded. + Includes an object literal as its argument with as keys all icon IDs and the + icon as a jQuery object as its value. + +- 'id_match (boolean)': Automatically attempt to match SVG icon ids with + corresponding HTML id (default: true) + +- 'no_img (boolean)': Prevent attempting to convert the icon into an <img> + element (may be faster, help for browser consistency) + +- 'svgz (boolean)': Indicate that the file is an SVGZ file, and thus not to + parse as XML. SVGZ files add compression benefits, but getting data from + them fails in Firefox 2 and older. + +5. To access an icon at a later point without using the callback, use this: + $.getSvgIcon(id (string)); + +This will return the icon (as jQuery object) with a given ID. + +6. To resize icons at a later point without using the callback, use this: + $.resizeSvgIcons(resizeOptions) (use the same way as the "resize" parameter) + + +Example usage #1: + +$(function() { + $.svgIcons('my_icon_set.svg'); // The SVG file that contains all icons + // No options have been set, so all icons will automatically be inserted + // into HTML elements that match the same IDs. +}); + +Example usage #2: + +$(function() { + $.svgIcons('my_icon_set.svg', { // The SVG file that contains all icons + callback: function(icons) { // Custom callback function that sets click + // events for each icon + $.each(icons, function(id, icon) { + icon.click(function() { + alert('You clicked on the icon with id ' + id); + }); + }); + } + }); //The SVG file that contains all icons +}); + +Example usage #3: + +$(function() { + $.svgIcons('my_icon_set.svgz', { // The SVGZ file that contains all icons + w: 32, // All icons will be 32px wide + h: 32, // All icons will be 32px high + fallback_path: 'icons/', // All fallback files can be found here + fallback: { + '#open_icon': 'open.png', // The "open.png" will be appended to the + // HTML element with ID "open_icon" + '#close_icon': 'close.png', + '#save_icon': 'save.png' + }, + placement: {'.open_icon','open'}, // The "open" icon will be added + // to all elements with class "open_icon" + resize: function() { + '#save_icon .svg_icon': 64 // The "save" icon will be resized to 64 x 64px + }, + + callback: function(icons) { // Sets background color for "close" icon + icons['close'].css('background','red'); + }, + + svgz: true // Indicates that an SVGZ file is being used + + }) +}); + +*/ + + +(function($) { + var svg_icons = {}, fixIDs; + + $.svgIcons = function(file, opts) { + var svgns = "http://www.w3.org/2000/svg", + xlinkns = "http://www.w3.org/1999/xlink", + icon_w = opts.w?opts.w : 24, + icon_h = opts.h?opts.h : 24, + elems, svgdoc, testImg, + icons_made = false, data_loaded = false, load_attempts = 0, + ua = navigator.userAgent, isOpera = !!window.opera, isSafari = (ua.indexOf('Safari/') > -1 && ua.indexOf('Chrome/')==-1), + data_pre = 'data:image/svg+xml;charset=utf-8;base64,'; + + if(opts.svgz) { + var data_el = $('<object data="' + file + '" type=image/svg+xml>').appendTo('body').hide(); + try { + svgdoc = data_el[0].contentDocument; + data_el.load(getIcons); + getIcons(0, true); // Opera will not run "load" event if file is already cached + } catch(err1) { + useFallback(); + } + } else { + var parser = new DOMParser(); + $.ajax({ + url: file, + dataType: 'string', + success: function(data) { + if(!data) { + $(useFallback); + return; + } + svgdoc = parser.parseFromString(data, "text/xml"); + $(function() { + getIcons('ajax'); + }); + }, + error: function(err) { + // TODO: Fix Opera widget icon bug + if(window.opera) { + $(function() { + useFallback(); + }); + } else { + if(err.responseText) { + svgdoc = parser.parseFromString(err.responseText, "text/xml"); + + if(!svgdoc.childNodes.length) { + $(useFallback); + } + $(function() { + getIcons('ajax'); + }); + } else { + $(useFallback); + } + } + } + }); + } + + function getIcons(evt, no_wait) { + if(evt !== 'ajax') { + if(data_loaded) return; + // Webkit sometimes says svgdoc is undefined, other times + // it fails to load all nodes. Thus we must make sure the "eof" + // element is loaded. + svgdoc = data_el[0].contentDocument; // Needed again for Webkit + var isReady = (svgdoc && svgdoc.getElementById('svg_eof')); + if(!isReady && !(no_wait && isReady)) { + load_attempts++; + if(load_attempts < 50) { + setTimeout(getIcons, 20); + } else { + useFallback(); + data_loaded = true; + } + return; + } + data_loaded = true; + } + + elems = $(svgdoc.firstChild).children(); //.getElementsByTagName('foreignContent'); + + if(!opts.no_img) { + var testSrc = data_pre + 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D'; + + testImg = $(new Image()).attr({ + src: testSrc, + width: 0, + height: 0 + }).appendTo('body') + .load(function () { + // Safari 4 crashes, Opera and Chrome don't + makeIcons(true); + }).error(function () { + makeIcons(); + }); + } else { + setTimeout(function() { + if(!icons_made) makeIcons(); + },500); + } + } + + var setIcon = function(target, icon, id, setID) { + if(isOpera) icon.css('visibility','hidden'); + if(opts.replace) { + if(setID) icon.attr('id',id); + var cl = target.attr('class'); + if(cl) icon.attr('class','svg_icon '+cl); + target.replaceWith(icon); + } else { + + target.append(icon); + } + if(isOpera) { + setTimeout(function() { + icon.removeAttr('style'); + },1); + } + } + + var addIcon = function(icon, id) { + if(opts.id_match === undefined || opts.id_match !== false) { + setIcon(holder, icon, id, true); + } + svg_icons[id] = icon; + } + + function makeIcons(toImage, fallback) { + if(icons_made) return; + if(opts.no_img) toImage = false; + var holder; + + if(toImage) { + var temp_holder = $(document.createElement('div')); + temp_holder.hide().appendTo('body'); + } + if(fallback) { + var path = opts.fallback_path?opts.fallback_path:''; + $.each(fallback, function(id, imgsrc) { + holder = $('#' + id); + var icon = $(new Image()) + .attr({ + 'class':'svg_icon', + src: path + imgsrc, + 'width': icon_w, + 'height': icon_h, + 'alt': 'icon' + }); + + addIcon(icon, id); + }); + } else { + var len = elems.length; + for(var i = 0; i < len; i++) { + var elem = elems[i]; + var id = elem.id; + if(id === 'svg_eof') break; + holder = $('#' + id); + var svg = elem.getElementsByTagNameNS(svgns, 'svg')[0]; + var svgroot = document.createElementNS(svgns, "svg"); + svgroot.setAttributeNS(svgns, 'viewBox', [0,0,icon_w,icon_h].join(' ')); + + // Make flexible by converting width/height to viewBox + var w = svg.getAttribute('width'); + var h = svg.getAttribute('height'); + svg.removeAttribute('width'); + svg.removeAttribute('height'); + + var vb = svg.getAttribute('viewBox'); + if(!vb) { + svg.setAttribute('viewBox', [0,0,w,h].join(' ')); + } + + // Not using jQuery to be a bit faster + svgroot.setAttribute('xmlns', svgns); + svgroot.setAttribute('width', icon_w); + svgroot.setAttribute('height', icon_h); + svgroot.setAttribute("xmlns:xlink", xlinkns); + svgroot.setAttribute("class", 'svg_icon'); + + // Without cloning, Firefox will make another GET request. + // With cloning, causes issue in Opera/Win/Non-EN + if(!isOpera) svg = svg.cloneNode(true); + + svgroot.appendChild(svg); + + if(toImage) { + // Without cloning, Safari will crash + // With cloning, causes issue in Opera/Win/Non-EN + var svgcontent = isOpera?svgroot:svgroot.cloneNode(true); + temp_holder.empty().append(svgroot); + var str = data_pre + encode64(temp_holder.html()); + var icon = $(new Image()) + .attr({'class':'svg_icon', src:str}); + } else { + var icon = fixIDs($(svgroot), i); + } + addIcon(icon, id); + } + + } + + if(opts.placement) { + $.each(opts.placement, function(sel, id) { + if(!svg_icons[id]) return; + $(sel).each(function(i) { + var copy = svg_icons[id].clone(); + if(i > 0 && !toImage) copy = fixIDs(copy, i, true); + setIcon($(this), copy, id); + }) + }); + } + if(!fallback) { + if(toImage) temp_holder.remove(); + if(data_el) data_el.remove(); + if(testImg) testImg.remove(); + } + if(opts.resize) $.resizeSvgIcons(opts.resize); + icons_made = true; + + if(opts.callback) opts.callback(svg_icons); + } + + fixIDs = function(svg_el, svg_num, force) { + var defs = svg_el.find('defs'); + if(!defs.length) return svg_el; + + if(isOpera) { + var id_elems = defs.find('*').filter(function() { + return !!this.id; + }); + } else { + var id_elems = defs.find('[id]'); + } + + var all_elems = svg_el[0].getElementsByTagName('*'), len = all_elems.length; + + id_elems.each(function(i) { + var id = this.id; + var no_dupes = ($(svgdoc).find('#' + id).length <= 1); + if(isOpera) no_dupes = false; // Opera didn't clone svg_el, so not reliable + // if(!force && no_dupes) return; + var new_id = 'x' + id + svg_num + i; + this.id = new_id; + + var old_val = 'url(#' + id + ')'; + var new_val = 'url(#' + new_id + ')'; + + // Selector method, possibly faster but fails in Opera / jQuery 1.4.3 +// svg_el.find('[fill="url(#' + id + ')"]').each(function() { +// this.setAttribute('fill', 'url(#' + new_id + ')'); +// }).end().find('[stroke="url(#' + id + ')"]').each(function() { +// this.setAttribute('stroke', 'url(#' + new_id + ')'); +// }).end().find('use').each(function() { +// if(this.getAttribute('xlink:href') == '#' + id) { +// this.setAttributeNS(xlinkns,'href','#' + new_id); +// } +// }).end().find('[filter="url(#' + id + ')"]').each(function() { +// this.setAttribute('filter', 'url(#' + new_id + ')'); +// }); + + for(var i = 0; i < len; i++) { + var elem = all_elems[i]; + if(elem.getAttribute('fill') === old_val) { + elem.setAttribute('fill', new_val); + } + if(elem.getAttribute('stroke') === old_val) { + elem.setAttribute('stroke', new_val); + } + if(elem.getAttribute('filter') === old_val) { + elem.setAttribute('filter', new_val); + } + } + }); + return svg_el; + } + + function useFallback() { + if(file.indexOf('.svgz') != -1) { + var reg_file = file.replace('.svgz','.svg'); + if(window.console) { + console.log('.svgz failed, trying with .svg'); + } + $.svgIcons(reg_file, opts); + } else if(opts.fallback) { + makeIcons(false, opts.fallback); + } + } + + function encode64(input) { + // base64 strings are 4/3 larger than the original string + if(window.btoa) return window.btoa(input); + var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; + var output = new Array( Math.floor( (input.length + 2) / 3 ) * 4 ); + var chr1, chr2, chr3; + var enc1, enc2, enc3, enc4; + var i = 0, p = 0; + + do { + chr1 = input.charCodeAt(i++); + chr2 = input.charCodeAt(i++); + chr3 = input.charCodeAt(i++); + + enc1 = chr1 >> 2; + enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); + enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); + enc4 = chr3 & 63; + + if (isNaN(chr2)) { + enc3 = enc4 = 64; + } else if (isNaN(chr3)) { + enc4 = 64; + } + + output[p++] = _keyStr.charAt(enc1); + output[p++] = _keyStr.charAt(enc2); + output[p++] = _keyStr.charAt(enc3); + output[p++] = _keyStr.charAt(enc4); + } while (i < input.length); + + return output.join(''); + } + } + + $.getSvgIcon = function(id, uniqueClone) { + var icon = svg_icons[id]; + if(uniqueClone && icon) { + icon = fixIDs(icon, 0, true).clone(true); + } + return icon; + } + + $.resizeSvgIcons = function(obj) { + // FF2 and older don't detect .svg_icon, so we change it detect svg elems instead + var change_sel = !$('.svg_icon:first').length; + $.each(obj, function(sel, size) { + var arr = $.isArray(size); + var w = arr?size[0]:size, + h = arr?size[1]:size; + if(change_sel) { + sel = sel.replace(/\.svg_icon/g,'svg'); + } + $(sel).each(function() { + this.setAttribute('width', w); + this.setAttribute('height', h); + if(window.opera && window.widget) { + this.parentNode.style.width = w + 'px'; + this.parentNode.style.height = h + 'px'; + } + }); + }); + } + +})(jQuery); \ No newline at end of file diff --git a/editor/svgtransformlist.js b/editor/svgtransformlist.js new file mode 100644 index 0000000..5c291ca --- /dev/null +++ b/editor/svgtransformlist.js @@ -0,0 +1,291 @@ +/** + * SVGTransformList + * + * Licensed under the Apache License, Version 2 + * + * Copyright(c) 2010 Alexis Deveria + * Copyright(c) 2010 Jeff Schiller + */ + +// Dependencies: +// 1) browser.js + +var svgedit = svgedit || {}; + +(function() { + +if (!svgedit.transformlist) { + svgedit.transformlist = {}; +} + +var svgroot = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + +// Helper function. +function transformToString(xform) { + var m = xform.matrix, + text = ""; + switch(xform.type) { + case 1: // MATRIX + text = "matrix(" + [m.a,m.b,m.c,m.d,m.e,m.f].join(",") + ")"; + break; + case 2: // TRANSLATE + text = "translate(" + m.e + "," + m.f + ")"; + break; + case 3: // SCALE + if (m.a == m.d) text = "scale(" + m.a + ")"; + else text = "scale(" + m.a + "," + m.d + ")"; + break; + case 4: // ROTATE + var cx = 0, cy = 0; + // this prevents divide by zero + if (xform.angle != 0) { + var K = 1 - m.a; + cy = ( K * m.f + m.b*m.e ) / ( K*K + m.b*m.b ); + cx = ( m.e - m.b * cy ) / K; + } + text = "rotate(" + xform.angle + " " + cx + "," + cy + ")"; + break; + } + return text; +}; + + +/** + * Map of SVGTransformList objects. + */ +var listMap_ = {}; + + +// ************************************************************************************** +// SVGTransformList implementation for Webkit +// These methods do not currently raise any exceptions. +// These methods also do not check that transforms are being inserted. This is basically +// implementing as much of SVGTransformList that we need to get the job done. +// +// interface SVGEditTransformList { +// attribute unsigned long numberOfItems; +// void clear ( ) +// SVGTransform initialize ( in SVGTransform newItem ) +// SVGTransform getItem ( in unsigned long index ) (DOES NOT THROW DOMException, INDEX_SIZE_ERR) +// SVGTransform insertItemBefore ( in SVGTransform newItem, in unsigned long index ) (DOES NOT THROW DOMException, INDEX_SIZE_ERR) +// SVGTransform replaceItem ( in SVGTransform newItem, in unsigned long index ) (DOES NOT THROW DOMException, INDEX_SIZE_ERR) +// SVGTransform removeItem ( in unsigned long index ) (DOES NOT THROW DOMException, INDEX_SIZE_ERR) +// SVGTransform appendItem ( in SVGTransform newItem ) +// NOT IMPLEMENTED: SVGTransform createSVGTransformFromMatrix ( in SVGMatrix matrix ); +// NOT IMPLEMENTED: SVGTransform consolidate ( ); +// } +// ************************************************************************************** +svgedit.transformlist.SVGTransformList = function(elem) { + this._elem = elem || null; + this._xforms = []; + // TODO: how do we capture the undo-ability in the changed transform list? + this._update = function() { + var tstr = ""; + var concatMatrix = svgroot.createSVGMatrix(); + for (var i = 0; i < this.numberOfItems; ++i) { + var xform = this._list.getItem(i); + tstr += transformToString(xform) + " "; + } + this._elem.setAttribute("transform", tstr); + }; + this._list = this; + this._init = function() { + // Transform attribute parser + var str = this._elem.getAttribute("transform"); + if(!str) return; + + // TODO: Add skew support in future + var re = /\s*((scale|matrix|rotate|translate)\s*\(.*?\))\s*,?\s*/; + var arr = []; + var m = true; + while(m) { + m = str.match(re); + str = str.replace(re,''); + if(m && m[1]) { + var x = m[1]; + var bits = x.split(/\s*\(/); + var name = bits[0]; + var val_bits = bits[1].match(/\s*(.*?)\s*\)/); + val_bits[1] = val_bits[1].replace(/(\d)-/g, "$1 -"); + var val_arr = val_bits[1].split(/[, ]+/); + var letters = 'abcdef'.split(''); + var mtx = svgroot.createSVGMatrix(); + $.each(val_arr, function(i, item) { + val_arr[i] = parseFloat(item); + if(name == 'matrix') { + mtx[letters[i]] = val_arr[i]; + } + }); + var xform = svgroot.createSVGTransform(); + var fname = 'set' + name.charAt(0).toUpperCase() + name.slice(1); + var values = name=='matrix'?[mtx]:val_arr; + + if (name == 'scale' && values.length == 1) { + values.push(values[0]); + } else if (name == 'translate' && values.length == 1) { + values.push(0); + } else if (name == 'rotate' && values.length == 1) { + values.push(0); + values.push(0); + } + xform[fname].apply(xform, values); + this._list.appendItem(xform); + } + } + }; + this._removeFromOtherLists = function(item) { + if (item) { + // Check if this transform is already in a transformlist, and + // remove it if so. + var found = false; + for (var id in listMap_) { + var tl = listMap_[id]; + for (var i = 0, len = tl._xforms.length; i < len; ++i) { + if(tl._xforms[i] == item) { + found = true; + tl.removeItem(i); + break; + } + } + if (found) { + break; + } + } + } + }; + + this.numberOfItems = 0; + this.clear = function() { + this.numberOfItems = 0; + this._xforms = []; + }; + + this.initialize = function(newItem) { + this.numberOfItems = 1; + this._removeFromOtherLists(newItem); + this._xforms = [newItem]; + }; + + this.getItem = function(index) { + if (index < this.numberOfItems && index >= 0) { + return this._xforms[index]; + } + throw {code: 1}; // DOMException with code=INDEX_SIZE_ERR + }; + + this.insertItemBefore = function(newItem, index) { + var retValue = null; + if (index >= 0) { + if (index < this.numberOfItems) { + this._removeFromOtherLists(newItem); + var newxforms = new Array(this.numberOfItems + 1); + // TODO: use array copying and slicing + for ( var i = 0; i < index; ++i) { + newxforms[i] = this._xforms[i]; + } + newxforms[i] = newItem; + for ( var j = i+1; i < this.numberOfItems; ++j, ++i) { + newxforms[j] = this._xforms[i]; + } + this.numberOfItems++; + this._xforms = newxforms; + retValue = newItem; + this._list._update(); + } + else { + retValue = this._list.appendItem(newItem); + } + } + return retValue; + }; + + this.replaceItem = function(newItem, index) { + var retValue = null; + if (index < this.numberOfItems && index >= 0) { + this._removeFromOtherLists(newItem); + this._xforms[index] = newItem; + retValue = newItem; + this._list._update(); + } + return retValue; + }; + + this.removeItem = function(index) { + if (index < this.numberOfItems && index >= 0) { + var retValue = this._xforms[index]; + var newxforms = new Array(this.numberOfItems - 1); + for (var i = 0; i < index; ++i) { + newxforms[i] = this._xforms[i]; + } + for (var j = i; j < this.numberOfItems-1; ++j, ++i) { + newxforms[j] = this._xforms[i+1]; + } + this.numberOfItems--; + this._xforms = newxforms; + this._list._update(); + return retValue; + } else { + throw {code: 1}; // DOMException with code=INDEX_SIZE_ERR + } + }; + + this.appendItem = function(newItem) { + this._removeFromOtherLists(newItem); + this._xforms.push(newItem); + this.numberOfItems++; + this._list._update(); + return newItem; + }; +}; + + +svgedit.transformlist.resetListMap = function() { + listMap_ = {}; +}; + +/** + * Removes transforms of the given element from the map. + * Parameters: + * elem - a DOM Element + */ +svgedit.transformlist.removeElementFromListMap = function(elem) { + if (elem.id && listMap_[elem.id]) { + delete listMap_[elem.id]; + } +}; + +// Function: getTransformList +// Returns an object that behaves like a SVGTransformList for the given DOM element +// +// Parameters: +// elem - DOM element to get a transformlist from +svgedit.transformlist.getTransformList = function(elem) { + if (!svgedit.browser.supportsNativeTransformLists()) { + var id = elem.id; + if(!id) { + // Get unique ID for temporary element + id = 'temp'; + } + var t = listMap_[id]; + if (!t || id == 'temp') { + listMap_[id] = new svgedit.transformlist.SVGTransformList(elem); + listMap_[id]._init(); + t = listMap_[id]; + } + return t; + } + else if (elem.transform) { + return elem.transform.baseVal; + } + else if (elem.gradientTransform) { + return elem.gradientTransform.baseVal; + } + else if (elem.patternTransform) { + return elem.patternTransform.baseVal; + } + + return null; +}; + + +})(); \ No newline at end of file diff --git a/editor/svgutils.js b/editor/svgutils.js new file mode 100644 index 0000000..17d24a1 --- /dev/null +++ b/editor/svgutils.js @@ -0,0 +1,648 @@ +/** + * Package: svgedit.utilities + * + * Licensed under the Apache License, Version 2 + * + * Copyright(c) 2010 Alexis Deveria + * Copyright(c) 2010 Jeff Schiller + */ + +// Dependencies: +// 1) jQuery +// 2) browser.js +// 3) svgtransformlist.js + +var svgedit = svgedit || {}; + +(function() { + +if (!svgedit.utilities) { + svgedit.utilities = {}; +} + +// Constants + +// String used to encode base64. +var KEYSTR = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='; +var SVGNS = 'http://www.w3.org/2000/svg'; +var XLINKNS = 'http://www.w3.org/1999/xlink'; +var XMLNS = "http://www.w3.org/XML/1998/namespace"; + +// Much faster than running getBBox() every time +var visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use'; +var visElems_arr = visElems.split(','); +//var hidElems = 'clipPath,defs,desc,feGaussianBlur,filter,linearGradient,marker,mask,metadata,pattern,radialGradient,stop,switch,symbol,title,textPath'; + +var editorContext_ = null; +var domdoc_ = null; +var domcontainer_ = null; +var svgroot_ = null; + +svgedit.utilities.init = function(editorContext) { + editorContext_ = editorContext; + domdoc_ = editorContext.getDOMDocument(); + domcontainer_ = editorContext.getDOMContainer(); + svgroot_ = editorContext.getSVGRoot(); +}; + +// Function: svgedit.utilities.toXml +// Converts characters in a string to XML-friendly entities. +// +// Example: "&" becomes "&" +// +// Parameters: +// str - The string to be converted +// +// Returns: +// The converted string +svgedit.utilities.toXml = function(str) { + return $('<p/>').text(str).html(); +}; + +// Function: svgedit.utilities.fromXml +// Converts XML entities in a string to single characters. +// Example: "&" becomes "&" +// +// Parameters: +// str - The string to be converted +// +// Returns: +// The converted string +svgedit.utilities.fromXml = function(str) { + return $('<p/>').html(str).text(); +}; + +// This code was written by Tyler Akins and has been placed in the +// public domain. It would be nice if you left this header intact. +// Base64 code from Tyler Akins -- http://rumkin.com + +// schiller: Removed string concatenation in favour of Array.join() optimization, +// also precalculate the size of the array needed. + +// Function: svgedit.utilities.encode64 +// Converts a string to base64 +svgedit.utilities.encode64 = function(input) { + // base64 strings are 4/3 larger than the original string +// input = svgedit.utilities.encodeUTF8(input); // convert non-ASCII characters + input = svgedit.utilities.convertToXMLReferences(input); + if(window.btoa) return window.btoa(input); // Use native if available + var output = new Array( Math.floor( (input.length + 2) / 3 ) * 4 ); + var chr1, chr2, chr3; + var enc1, enc2, enc3, enc4; + var i = 0, p = 0; + + do { + chr1 = input.charCodeAt(i++); + chr2 = input.charCodeAt(i++); + chr3 = input.charCodeAt(i++); + + enc1 = chr1 >> 2; + enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); + enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); + enc4 = chr3 & 63; + + if (isNaN(chr2)) { + enc3 = enc4 = 64; + } else if (isNaN(chr3)) { + enc4 = 64; + } + + output[p++] = KEYSTR.charAt(enc1); + output[p++] = KEYSTR.charAt(enc2); + output[p++] = KEYSTR.charAt(enc3); + output[p++] = KEYSTR.charAt(enc4); + } while (i < input.length); + + return output.join(''); +}; + +// Function: svgedit.utilities.decode64 +// Converts a string from base64 +svgedit.utilities.decode64 = function(input) { + if(window.atob) return window.atob(input); + var output = ""; + var chr1, chr2, chr3 = ""; + var enc1, enc2, enc3, enc4 = ""; + var i = 0; + + // remove all characters that are not A-Z, a-z, 0-9, +, /, or = + input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); + + do { + enc1 = KEYSTR.indexOf(input.charAt(i++)); + enc2 = KEYSTR.indexOf(input.charAt(i++)); + enc3 = KEYSTR.indexOf(input.charAt(i++)); + enc4 = KEYSTR.indexOf(input.charAt(i++)); + + chr1 = (enc1 << 2) | (enc2 >> 4); + chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); + chr3 = ((enc3 & 3) << 6) | enc4; + + output = output + String.fromCharCode(chr1); + + if (enc3 != 64) { + output = output + String.fromCharCode(chr2); + } + if (enc4 != 64) { + output = output + String.fromCharCode(chr3); + } + + chr1 = chr2 = chr3 = ""; + enc1 = enc2 = enc3 = enc4 = ""; + + } while (i < input.length); + return unescape(output); +}; + +// Currently not being used, so commented out for now +// based on http://phpjs.org/functions/utf8_encode:577 +// codedread:does not seem to work with webkit-based browsers on OSX +// "encodeUTF8": function(input) { +// //return unescape(encodeURIComponent(input)); //may or may not work +// var output = ''; +// for (var n = 0; n < input.length; n++){ +// var c = input.charCodeAt(n); +// if (c < 128) { +// output += input[n]; +// } +// else if (c > 127) { +// if (c < 2048){ +// output += String.fromCharCode((c >> 6) | 192); +// } +// else { +// output += String.fromCharCode((c >> 12) | 224) + String.fromCharCode((c >> 6) & 63 | 128); +// } +// output += String.fromCharCode((c & 63) | 128); +// } +// } +// return output; +// }, + +// Function: svgedit.utilities.convertToXMLReferences +// Converts a string to use XML references +svgedit.utilities.convertToXMLReferences = function(input) { + var output = ''; + for (var n = 0; n < input.length; n++){ + var c = input.charCodeAt(n); + if (c < 128) { + output += input[n]; + } else if(c > 127) { + output += ("&#" + c + ";"); + } + } + return output; +}; + +// Function: svgedit.utilities.text2xml +// Cross-browser compatible method of converting a string to an XML tree +// found this function here: http://groups.google.com/group/jquery-dev/browse_thread/thread/c6d11387c580a77f +svgedit.utilities.text2xml = function(sXML) { + if(sXML.indexOf('<svg:svg') >= 0) { + sXML = sXML.replace(/<(\/?)svg:/g, '<$1').replace('xmlns:svg', 'xmlns'); + } + + var out; + try{ + var dXML = (window.DOMParser)?new DOMParser():new ActiveXObject("Microsoft.XMLDOM"); + dXML.async = false; + } catch(e){ + throw new Error("XML Parser could not be instantiated"); + }; + try{ + if(dXML.loadXML) out = (dXML.loadXML(sXML))?dXML:false; + else out = dXML.parseFromString(sXML, "text/xml"); + } + catch(e){ throw new Error("Error parsing XML string"); }; + return out; +}; + +// Function: svgedit.utilities.bboxToObj +// Converts a SVGRect into an object. +// +// Parameters: +// bbox - a SVGRect +// +// Returns: +// An object with properties names x, y, width, height. +svgedit.utilities.bboxToObj = function(bbox) { + return { + x: bbox.x, + y: bbox.y, + width: bbox.width, + height: bbox.height + } +}; + +// Function: svgedit.utilities.walkTree +// Walks the tree and executes the callback on each element in a top-down fashion +// +// Parameters: +// elem - DOM element to traverse +// cbFn - Callback function to run on each element +svgedit.utilities.walkTree = function(elem, cbFn){ + if (elem && elem.nodeType == 1) { + cbFn(elem); + var i = elem.childNodes.length; + while (i--) { + svgedit.utilities.walkTree(elem.childNodes.item(i), cbFn); + } + } +}; + +// Function: svgedit.utilities.walkTreePost +// Walks the tree and executes the callback on each element in a depth-first fashion +// TODO: FIXME: Shouldn't this be calling walkTreePost? +// +// Parameters: +// elem - DOM element to traverse +// cbFn - Callback function to run on each element +svgedit.utilities.walkTreePost = function(elem, cbFn) { + if (elem && elem.nodeType == 1) { + var i = elem.childNodes.length; + while (i--) { + svgedit.utilities.walkTree(elem.childNodes.item(i), cbFn); + } + cbFn(elem); + } +}; + +// Function: svgedit.utilities.getUrlFromAttr +// Extracts the URL from the url(...) syntax of some attributes. +// Three variants: +// * <circle fill="url(someFile.svg#foo)" /> +// * <circle fill="url('someFile.svg#foo')" /> +// * <circle fill='url("someFile.svg#foo")' /> +// +// Parameters: +// attrVal - The attribute value as a string +// +// Returns: +// String with just the URL, like someFile.svg#foo +svgedit.utilities.getUrlFromAttr = function(attrVal) { + if (attrVal) { + // url("#somegrad") + if (attrVal.indexOf('url("') === 0) { + return attrVal.substring(5,attrVal.indexOf('"',6)); + } + // url('#somegrad') + else if (attrVal.indexOf("url('") === 0) { + return attrVal.substring(5,attrVal.indexOf("'",6)); + } + else if (attrVal.indexOf("url(") === 0) { + return attrVal.substring(4,attrVal.indexOf(')')); + } + } + return null; +}; + +// Function: svgedit.utilities.getHref +// Returns the given element's xlink:href value +svgedit.utilities.getHref = function(elem) { + return elem.getAttributeNS(XLINKNS, "href"); +} + +// Function: svgedit.utilities.setHref +// Sets the given element's xlink:href value +svgedit.utilities.setHref = function(elem, val) { + elem.setAttributeNS(XLINKNS, "xlink:href", val); +} + +// Function: findDefs +// Parameters: +// svgElement - The <svg> element. +// +// Returns: +// The document's <defs> element, create it first if necessary +svgedit.utilities.findDefs = function(svgElement) { + var svgElement = editorContext_.getSVGContent().documentElement; + var defs = svgElement.getElementsByTagNameNS(SVGNS, "defs"); + if (defs.length > 0) { + defs = defs[0]; + } + else { + // first child is a comment, so call nextSibling + defs = svgElement.insertBefore( svgElement.ownerDocument.createElementNS(SVGNS, "defs" ), svgElement.firstChild.nextSibling); + } + return defs; +}; + +// TODO(codedread): Consider moving the next to functions to bbox.js + +// Function: svgedit.utilities.getPathBBox +// Get correct BBox for a path in Webkit +// Converted from code found here: +// http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html +// +// Parameters: +// path - The path DOM element to get the BBox for +// +// Returns: +// A BBox-like object +svgedit.utilities.getPathBBox = function(path) { + var seglist = path.pathSegList; + var tot = seglist.numberOfItems; + + var bounds = [[], []]; + var start = seglist.getItem(0); + var P0 = [start.x, start.y]; + + for(var i=0; i < tot; i++) { + var seg = seglist.getItem(i); + + if(typeof seg.x == 'undefined') continue; + + // Add actual points to limits + bounds[0].push(P0[0]); + bounds[1].push(P0[1]); + + if(seg.x1) { + var P1 = [seg.x1, seg.y1], + P2 = [seg.x2, seg.y2], + P3 = [seg.x, seg.y]; + + for(var j=0; j < 2; j++) { + + var calc = function(t) { + return Math.pow(1-t,3) * P0[j] + + 3 * Math.pow(1-t,2) * t * P1[j] + + 3 * (1-t) * Math.pow(t,2) * P2[j] + + Math.pow(t,3) * P3[j]; + }; + + var b = 6 * P0[j] - 12 * P1[j] + 6 * P2[j]; + var a = -3 * P0[j] + 9 * P1[j] - 9 * P2[j] + 3 * P3[j]; + var c = 3 * P1[j] - 3 * P0[j]; + + if(a == 0) { + if(b == 0) { + continue; + } + var t = -c / b; + if(0 < t && t < 1) { + bounds[j].push(calc(t)); + } + continue; + } + + var b2ac = Math.pow(b,2) - 4 * c * a; + if(b2ac < 0) continue; + var t1 = (-b + Math.sqrt(b2ac))/(2 * a); + if(0 < t1 && t1 < 1) bounds[j].push(calc(t1)); + var t2 = (-b - Math.sqrt(b2ac))/(2 * a); + if(0 < t2 && t2 < 1) bounds[j].push(calc(t2)); + } + P0 = P3; + } else { + bounds[0].push(seg.x); + bounds[1].push(seg.y); + } + } + + var x = Math.min.apply(null, bounds[0]); + var w = Math.max.apply(null, bounds[0]) - x; + var y = Math.min.apply(null, bounds[1]); + var h = Math.max.apply(null, bounds[1]) - y; + return { + 'x': x, + 'y': y, + 'width': w, + 'height': h + }; +}; + +// Function: groupBBFix +// Get the given/selected element's bounding box object, checking for +// horizontal/vertical lines (see issue 717) +// Note that performance is currently terrible, so some way to improve would +// be great. +// +// Parameters: +// selected - Container or <use> DOM element +function groupBBFix(selected) { + if(svgedit.browser.supportsHVLineContainerBBox()) { + try { return selected.getBBox();} catch(e){} + } + var ref = $.data(selected, 'ref'); + var matched = null; + + if(ref) { + var copy = $(ref).children().clone().attr('visibility', 'hidden'); + $(svgroot_).append(copy); + matched = copy.filter('line, path'); + } else { + matched = $(selected).find('line, path'); + } + + var issue = false; + if(matched.length) { + matched.each(function() { + var bb = this.getBBox(); + if(!bb.width || !bb.height) { + issue = true; + } + }); + if(issue) { + var elems = ref ? copy : $(selected).children(); + ret = getStrokedBBox(elems); + } else { + ret = selected.getBBox(); + } + } else { + ret = selected.getBBox(); + } + if(ref) { + copy.remove(); + } + return ret; +} + +// Function: svgedit.utilities.getBBox +// Get the given/selected element's bounding box object, convert it to be more +// usable when necessary +// +// Parameters: +// elem - Optional DOM element to get the BBox for +svgedit.utilities.getBBox = function(elem) { + var selected = elem || editorContext_.geSelectedElements()[0]; + if (elem.nodeType != 1) return null; + var ret = null; + var elname = selected.nodeName; + + switch ( elname ) { + case 'text': + if(selected.textContent === '') { + selected.textContent = 'a'; // Some character needed for the selector to use. + ret = selected.getBBox(); + selected.textContent = ''; + } else { + try { ret = selected.getBBox();} catch(e){} + } + break; + case 'path': + if(!svgedit.browser.supportsPathBBox()) { + ret = svgedit.utilities.getPathBBox(selected); + } else { + try { ret = selected.getBBox();} catch(e){} + } + break; + case 'g': + case 'a': + ret = groupBBFix(selected); + break; + default: + + if(elname === 'use') { + ret = groupBBFix(selected, true); + } + + if(elname === 'use' || elname === 'foreignObject') { + if(!ret) ret = selected.getBBox(); + if(!svgedit.browser.isWebkit()) { + var bb = {}; + bb.width = ret.width; + bb.height = ret.height; + bb.x = ret.x + parseFloat(selected.getAttribute('x')||0); + bb.y = ret.y + parseFloat(selected.getAttribute('y')||0); + ret = bb; + } + } else if(~visElems_arr.indexOf(elname)) { + try { ret = selected.getBBox();} + catch(e) { + // Check if element is child of a foreignObject + var fo = $(selected).closest("foreignObject"); + if(fo.length) { + try { + ret = fo[0].getBBox(); + } catch(e) { + ret = null; + } + } else { + ret = null; + } + } + } + } + + if(ret) { + ret = svgedit.utilities.bboxToObj(ret); + } + + // get the bounding box from the DOM (which is in that element's coordinate system) + return ret; +}; + +// Function: svgedit.utilities.getRotationAngle +// Get the rotation angle of the given/selected DOM element +// +// Parameters: +// elem - Optional DOM element to get the angle for +// to_rad - Boolean that when true returns the value in radians rather than degrees +// +// Returns: +// Float with the angle in degrees or radians +svgedit.utilities.getRotationAngle = function(elem, to_rad) { + var selected = elem || editorContext_.getSelectedElements()[0]; + // find the rotation transform (if any) and set it + var tlist = svgedit.transformlist.getTransformList(selected); + if(!tlist) return 0; // <svg> elements have no tlist + var N = tlist.numberOfItems; + for (var i = 0; i < N; ++i) { + var xform = tlist.getItem(i); + if (xform.type == 4) { + return to_rad ? xform.angle * Math.PI / 180.0 : xform.angle; + } + } + return 0.0; +}; + +// Function: getElem +// Get a DOM element by ID within the SVG root element. +// +// Parameters: +// id - String with the element's new ID +if (svgedit.browser.supportsSelectors()) { + svgedit.utilities.getElem = function(id) { + // querySelector lookup + return svgroot_.querySelector('#'+id); + }; +} else if (svgedit.browser.supportsXpath()) { + svgedit.utilities.getElem = function(id) { + // xpath lookup + return domdoc_.evaluate( + 'svg:svg[@id="svgroot"]//svg:*[@id="'+id+'"]', + domcontainer_, + function() { return "http://www.w3.org/2000/svg"; }, + 9, + null).singleNodeValue; + }; +} else { + svgedit.utilities.getElem = function(id) { + // jQuery lookup: twice as slow as xpath in FF + return $(svgroot_).find('[id=' + id + ']')[0]; + }; +} + +// Function: assignAttributes +// Assigns multiple attributes to an element. +// +// Parameters: +// node - DOM element to apply new attribute values to +// attrs - Object with attribute keys/values +// suspendLength - Optional integer of milliseconds to suspend redraw +// unitCheck - Boolean to indicate the need to use svgedit.units.setUnitAttr +svgedit.utilities.assignAttributes = function(node, attrs, suspendLength, unitCheck) { + if(!suspendLength) suspendLength = 0; + // Opera has a problem with suspendRedraw() apparently + var handle = null; + if (!svgedit.browser.isOpera()) svgroot_.suspendRedraw(suspendLength); + + for (var i in attrs) { + var ns = (i.substr(0,4) === "xml:" ? XMLNS : + i.substr(0,6) === "xlink:" ? XLINKNS : null); + + if(ns) { + node.setAttributeNS(ns, i, attrs[i]); + } else if(!unitCheck) { + node.setAttribute(i, attrs[i]); + } else { + svgedit.units.setUnitAttr(node, i, attrs[i]); + } + + } + + if (!svgedit.browser.isOpera()) svgroot_.unsuspendRedraw(handle); +}; + +// Function: cleanupElement +// Remove unneeded (default) attributes, makes resulting SVG smaller +// +// Parameters: +// element - DOM element to clean up +svgedit.utilities.cleanupElement = function(element) { + var handle = svgroot_.suspendRedraw(60); + var defaults = { + 'fill-opacity':1, + 'stop-opacity':1, + 'opacity':1, + 'stroke':'none', + 'stroke-dasharray':'none', + 'stroke-linejoin':'miter', + 'stroke-linecap':'butt', + 'stroke-opacity':1, + 'stroke-width':1, + 'rx':0, + 'ry':0 + } + + for(var attr in defaults) { + var val = defaults[attr]; + if(element.getAttribute(attr) == val) { + element.removeAttribute(attr); + } + } + + svgroot_.unsuspendRedraw(handle); +}; + + +})(); diff --git a/editor/units.js b/editor/units.js new file mode 100644 index 0000000..8be858c --- /dev/null +++ b/editor/units.js @@ -0,0 +1,281 @@ +/** + * Package: svgedit.units + * + * Licensed under the Apache License, Version 2 + * + * Copyright(c) 2010 Alexis Deveria + * Copyright(c) 2010 Jeff Schiller + */ + +// Dependencies: +// 1) jQuery + +var svgedit = svgedit || {}; + +(function() { + +if (!svgedit.units) { + svgedit.units = {}; +} + +var w_attrs = ['x', 'x1', 'cx', 'rx', 'width']; +var h_attrs = ['y', 'y1', 'cy', 'ry', 'height']; +var unit_attrs = $.merge(['r','radius'], w_attrs); + +var unitNumMap = { + '%': 2, + 'em': 3, + 'ex': 4, + 'px': 5, + 'cm': 6, + 'mm': 7, + 'in': 8, + 'pt': 9, + 'pc': 10 +}; + +$.merge(unit_attrs, h_attrs); + +// Container of elements. +var elementContainer_; + +/** + * Stores mapping of unit type to user coordinates. + */ +var typeMap_ = {px: 1}; + +/** + * ElementContainer interface + * + * function getBaseUnit() - returns a string of the base unit type of the container ("em") + * function getElement() - returns an element in the container given an id + * function getHeight() - returns the container's height + * function getWidth() - returns the container's width + * function getRoundDigits() - returns the number of digits number should be rounded to + */ + +/** + * Function: svgedit.units.init() + * Initializes this module. + * + * Parameters: + * elementContainer - an object implementing the ElementContainer interface. + */ +svgedit.units.init = function(elementContainer) { + elementContainer_ = elementContainer; + + var svgns = 'http://www.w3.org/2000/svg'; + + // Get correct em/ex values by creating a temporary SVG. + var svg = document.createElementNS(svgns, 'svg'); + document.body.appendChild(svg); + var rect = document.createElementNS(svgns,'rect'); + rect.setAttribute('width',"1em"); + rect.setAttribute('height',"1ex"); + rect.setAttribute('x',"1in"); + svg.appendChild(rect); + var bb = rect.getBBox(); + document.body.removeChild(svg); + + var inch = bb.x; + typeMap_['em'] = bb.width; + typeMap_['ex'] = bb.height; + typeMap_['in'] = inch; + typeMap_['cm'] = inch / 2.54; + typeMap_['mm'] = inch / 25.4; + typeMap_['pt'] = inch / 72; + typeMap_['pc'] = inch / 6; + typeMap_['%'] = 0; +}; + +// Group: Unit conversion functions + +// Function: svgedit.units.getTypeMap +// Returns the unit object with values for each unit +svgedit.units.getTypeMap = function() { + return typeMap_; +}; + +// Function: svgedit.units.shortFloat +// Rounds a given value to a float with number of digits defined in save_options +// +// Parameters: +// val - The value as a String, Number or Array of two numbers to be rounded +// +// Returns: +// If a string/number was given, returns a Float. If an array, return a string +// with comma-seperated floats +svgedit.units.shortFloat = function(val) { + var digits = elementContainer_.getRoundDigits(); + if(!isNaN(val)) { + // Note that + converts to Number + return +((+val).toFixed(digits)); + } else if($.isArray(val)) { + return svgedit.units.shortFloat(val[0]) + ',' + svgedit.units.shortFloat(val[1]); + } + return parseFloat(val).toFixed(digits) - 0; +}; + +// Function: svgedit.units.convertUnit +// Converts the number to given unit or baseUnit +svgedit.units.convertUnit = function(val, unit) { + unit = unit || elementContainer_.getBaseUnit(); +// baseVal.convertToSpecifiedUnits(unitNumMap[unit]); +// var val = baseVal.valueInSpecifiedUnits; +// baseVal.convertToSpecifiedUnits(1); + return svgedit.unit.shortFloat(val / typeMap_[unit]); +}; + +// Function: svgedit.units.setUnitAttr +// Sets an element's attribute based on the unit in its current value. +// +// Parameters: +// elem - DOM element to be changed +// attr - String with the name of the attribute associated with the value +// val - String with the attribute value to convert +svgedit.units.setUnitAttr = function(elem, attr, val) { + if(!isNaN(val)) { + // New value is a number, so check currently used unit + var old_val = elem.getAttribute(attr); + + // Enable this for alternate mode +// if(old_val !== null && (isNaN(old_val) || elementContainer_.getBaseUnit() !== 'px')) { +// // Old value was a number, so get unit, then convert +// var unit; +// if(old_val.substr(-1) === '%') { +// var res = getResolution(); +// unit = '%'; +// val *= 100; +// if(w_attrs.indexOf(attr) >= 0) { +// val = val / res.w; +// } else if(h_attrs.indexOf(attr) >= 0) { +// val = val / res.h; +// } else { +// return val / Math.sqrt((res.w*res.w) + (res.h*res.h))/Math.sqrt(2); +// } +// } else { +// if(elementContainer_.getBaseUnit() !== 'px') { +// unit = elementContainer_.getBaseUnit(); +// } else { +// unit = old_val.substr(-2); +// } +// val = val / typeMap_[unit]; +// } +// +// val += unit; +// } + } + elem.setAttribute(attr, val); +}; + +var attrsToConvert = { + "line": ['x1', 'x2', 'y1', 'y2'], + "circle": ['cx', 'cy', 'r'], + "ellipse": ['cx', 'cy', 'rx', 'ry'], + "foreignObject": ['x', 'y', 'width', 'height'], + "rect": ['x', 'y', 'width', 'height'], + "image": ['x', 'y', 'width', 'height'], + "use": ['x', 'y', 'width', 'height'], + "text": ['x', 'y'] +}; + +// Function: svgedit.units.convertAttrs +// Converts all applicable attributes to the configured baseUnit +// +// Parameters: +// element - a DOM element whose attributes should be converted +svgedit.units.convertAttrs = function(element) { + var elName = element.tagName; + var unit = elementContainer_.getBaseUnit(); + var attrs = attrsToConvert[elName]; + if(!attrs) return; + var len = attrs.length + for(var i = 0; i < len; i++) { + var attr = attrs[i]; + var cur = element.getAttribute(attr); + if(cur) { + if(!isNaN(cur)) { + element.setAttribute(attr, (cur / typeMap_[unit]) + unit); + } else { + // Convert existing? + } + } + } +}; + +// Function: svgedit.units.convertToNum +// Converts given values to numbers. Attributes must be supplied in +// case a percentage is given +// +// Parameters: +// attr - String with the name of the attribute associated with the value +// val - String with the attribute value to convert +svgedit.units.convertToNum = function(attr, val) { + // Return a number if that's what it already is + if(!isNaN(val)) return val-0; + + if(val.substr(-1) === '%') { + // Deal with percentage, depends on attribute + var num = val.substr(0, val.length-1)/100; + var width = elementContainer_.getWidth(); + var height = elementContainer_.getHeight(); + + if(w_attrs.indexOf(attr) >= 0) { + return num * width; + } else if(h_attrs.indexOf(attr) >= 0) { + return num * height; + } else { + return num * Math.sqrt((width*width) + (height*height))/Math.sqrt(2); + } + } else { + var unit = val.substr(-2); + var num = val.substr(0, val.length-2); + // Note that this multiplication turns the string into a number + return num * typeMap_[unit]; + } +}; + +// Function: svgedit.units.isValidUnit +// Check if an attribute's value is in a valid format +// +// Parameters: +// attr - String with the name of the attribute associated with the value +// val - String with the attribute value to check +svgedit.units.isValidUnit = function(attr, val) { + var valid = false; + if(unit_attrs.indexOf(attr) >= 0) { + // True if it's just a number + if(!isNaN(val)) { + valid = true; + } else { + // Not a number, check if it has a valid unit + val = val.toLowerCase(); + $.each(typeMap_, function(unit) { + if(valid) return; + var re = new RegExp('^-?[\\d\\.]+' + unit + '$'); + if(re.test(val)) valid = true; + }); + } + } else if (attr == "id") { + // if we're trying to change the id, make sure it's not already present in the doc + // and the id value is valid. + + var result = false; + // because getElem() can throw an exception in the case of an invalid id + // (according to http://www.w3.org/TR/xml-id/ IDs must be a NCName) + // we wrap it in an exception and only return true if the ID was valid and + // not already present + try { + var elem = elementContainer_.getElement(val); + result = (elem == null); + } catch(e) {} + return result; + } else { + valid = true; + } + + return valid; +}; + + +})(); \ No newline at end of file